/* CSS spécifique pour les pages de service. Idéalement, ce code devrait être dans un fichier CSS séparé (ex: /assets/css/service-page.css) et lié dans le , mais il est inclus ici pour faciliter le "copier-coller". */ :root { /* Assurez-vous que cette variable est définie dans votre CSS principal, sinon décommentez et ajustez */ --primary-color: #005bff; */ } .service-hero { text-align: center; padding: 4rem 1.5rem 2rem 1.5rem; /* Moins de padding en bas pour laisser la place à la carte */ background-color: #f8f9fa; } .service-hero h1 { font-size: clamp(2.2rem, 5vw, 2.8rem); margin-bottom: 0.5rem; } .service-hero__subtitle { font-size: clamp(1.1rem, 2.5vw, 1.25rem); color: #555; max-width: 700px; margin: 1rem auto 0 auto; line-height: 1.6; } /* Conteneur pour la carte de rappel */ .service-card-container { background-color: #f8f9fa; padding-bottom: 4rem; display: flex; justify-content: center; } /* Styles pour la carte (doivent être cohérents avec /services/index.html) */ .asset-card { background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); padding: 2rem; text-align: center; max-width: 350px; border: 1px solid #e9ecef; } .asset-card-icon { max-width: 60px; margin-bottom: 1rem; } .asset-card-title { font-size: 1.4rem; margin-bottom: 0.75rem; } .asset-card-text { font-size: 1rem; color: #555; line-height: 1.5; } .service-section { padding: 4rem 1.5rem; max-width: 960px; margin: 0 auto; } .service-section h2 { text-align: center; margin-bottom: 2.5rem; font-size: clamp(1.8rem, 4vw, 2.2rem); } .service-section p { line-height: 1.7; font-size: 1.1rem; color: #333; } .methodology-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .step-card { background-color: #fff; border: 1px solid #e9ecef; padding: 2rem 1.5rem; border-radius: 8px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .step-card:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.07); } .step-card__number { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background-color: var(--primary-color); color: white; font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; } .step-card h3 { font-size: 1.3rem; margin-bottom: 0.75rem; } .benefits-list { list-style-type: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .benefits-list li { font-size: 1.1rem; padding-left: 2.5rem; position: relative; } .benefits-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--primary-color); font-weight: bold; font-size: 1.5rem; } .cta-section { background-color: var(--primary-color); color: white; text-align: center; padding: 4rem 1.5rem; } .cta-section h2 { margin-bottom: 1rem; color: white; } .cta-section p { color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto 2rem auto; } .cta-button { display: inline-block; background-color: white; color: var(--primary-color); padding: 1rem 2.5rem; text-decoration: none; font-weight: bold; border-radius: 5px; transition: transform 0.2s ease, background-color 0.2s ease; font-size: 1.1rem; } .cta-button:hover { transform: scale(1.05); background-color: #f0f0f0; } .top-nav-bar a.nav-active { background-color: #e9ecef; /* Un gris argenté clair et sobre */ color: #212529; /* Un texte plus foncé pour le contraste */ padding: 8px 15px; border-radius: 6px; font-weight: 600; }