/* ============================================================
   INDEX — styles propres à cette page
   ============================================================ */

/* ============ RESET & BASE ============ */
        html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }/* ============ DESIGN TOKENS (palette d'origine) ============ *//* ============ ACCESSIBILITÉ ============ *//* ============ BOUTONS ============ */
        .btn-secondary { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.4); }
        .btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }/* ============ HEADER PILL NAV ============ *//* Icône menu (uniquement visible en état collapsed) */

        @media (max-width: 900px) {
            .header { top: 16px; }
            .header-pill { padding: 6px 6px 6px 16px; height: 52px; gap: 8px; }
            .header-logo img { height: 28px; }
            .nav-desktop { display: none; }
            .header-cta { display: none; }
            .nav-toggle { display: inline-flex; }
            .nav-mobile {
                position: fixed; top: 82px; left: 16px; right: 16px;
                z-index: 99; /* hors du header : doit passer au-dessus du contenu */
                max-height: calc(100vh - 100px);
                background: rgba(255, 255, 255, 0.97);
                border: 1px solid rgba(19, 31, 86, 0.08);
                border-radius: var(--radius-lg);
                padding: 12px;
                display: flex; flex-direction: column; gap: 2px;
                /* visibility:hidden est indispensable : masqué par opacity seule, ce panneau
                   fixed + backdrop-filter reste composité et repeint le contenu qui défile
                   derrière lui (texte fantôme décalé suivant le scroll sur mobile). */
                opacity: 0; transform: translateY(-2px) scale(0.98);
                visibility: hidden;
                pointer-events: none;
                transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
                box-shadow: 0 20px 60px rgba(19, 31, 86, 0.15);
                overflow-y: auto;
            }
            .nav-mobile.open {
                opacity: 1;
                transform: translateY(0) scale(1);
                visibility: visible;
                pointer-events: auto;
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                transition: opacity 0.25s ease, transform 0.25s ease;
            }
            .nav-mobile a {
                color: var(--primary);
                padding: 14px 16px;
                font-size: 16px; font-weight: 500;
                border-radius: var(--radius-md);
                border-bottom: none;
            }
            .nav-mobile a:hover { background: rgba(19, 31, 86, 0.04); }
            .nav-mobile .btn {
                margin-top: 8px;
                background: var(--primary); color: var(--white);
                justify-content: center;
                padding: 14px 20px;
            }
        }/* ============ HERO — gradient animé (adapté de framer-motion) ============ *//* @property permet à CSS d'interpoler couleurs et angles entre keyframes.
           Fallback : les navigateurs qui ne supportent pas gardent le gradient statique. */

        
        
        @property --hero-c1 {
            syntax: '<color>';
            initial-value: #131f56;
            inherits: false;
        }
        @property --hero-c2 {
            syntax: '<color>';
            initial-value: #5680b2;
            inherits: false;
        }
        @property --hero-angle {
            syntax: '<angle>';
            initial-value: 115deg;
            inherits: false;
        }
        /* ⚠️ Le dégradé seul donnait un aplat sans sujet — le fond qu'on voit
           sur tous les sites générés. La photographie de la plateforme de
           marque lui rend un sujet humain ; le dégradé passe par-dessus en
           voile, pour que le texte blanc reste lisible. L'ordre compte : le
           dégradé D'ABORD dans la pile, la photo dessous. */
        .hero {
            position: relative; min-height: 100vh;
            background:
                linear-gradient(
                    var(--hero-angle),
                    var(--hero-c1) 0%,
                    var(--hero-c1) 35%,
                    var(--hero-c2) 100%
                ),
                url('../../img/reunion.webp') center right / cover no-repeat;
            background-blend-mode: multiply, normal;
            color: var(--white); overflow: hidden;
            display: flex; align-items: center;
            padding: 120px 0 80px;
            animation: heroGradientShift 24s infinite ease-in-out;
        }
        @keyframes heroGradientShift {
            0%, 100% {
                --hero-c1: #131f56;
                --hero-c2: #5680b2;
                --hero-angle: 115deg;
            }
            25% {
                --hero-c1: #0c143f;
                --hero-c2: #3d6699;
                --hero-angle: 135deg;
            }
            50% {
                --hero-c1: #131f56;
                --hero-c2: #4d6f9e;
                --hero-angle: 155deg;
            }
            75% {
                --hero-c1: #0c143f;
                --hero-c2: #5680b2;
                --hero-angle: 105deg;
            }
        }/* Respect des préférences d'accessibilité : pas d'animation si l'utilisateur l'a désactivée */
        
        @media (prefers-reduced-motion: reduce) {
            .hero { animation: none; }
        }
        /* Le procédé signature de la plateforme de marque : l'emblème citron
           surdimensionné, en surimpression et débordant du cadre. Il remplace
           une tache floue décorative — un geste de la charte plutôt qu'un
           effet passe-partout. Le tracé est celui du logo, jamais redessiné. */
        .hero::before {
            content: ''; position: absolute;
            top: 46%; right: -14%; width: min(52vw, 700px); aspect-ratio: 1;
            transform: translateY(-50%);
            background: url('../../img/embleme-s.svg') no-repeat center / contain;
            /* Assez présent pour se lire comme l'emblème, assez discret pour
               ne pas concurrencer le titre. Il ne passe jamais sous le texte :
               la colonne de gauche s'arrête bien avant. */
            opacity: 0.3; pointer-events: none;
        }
        @media (max-width: 900px) { .hero::before { display: none; } }
        .hero::after {
            content: ''; position: absolute; bottom: -20%; left: -10%; width: 50%; aspect-ratio: 1;
            background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
            opacity: 0.4; filter: blur(80px); pointer-events: none;
        }
        .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
        .hero-eyebrow {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 0; background: none; border: none;
            color: var(--accent); font-size: 13px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.08em;
            margin-bottom: 20px;
        }
        .hero-eyebrow::before {
            content: ''; width: 7px; height: 7px; border-radius: 50%;
            background: var(--accent); flex-shrink: 0;
            box-shadow: 0 0 10px rgba(206, 231, 86, 0.7);
            animation: eyebrowPulse 2s ease-in-out infinite;
        }
        @keyframes eyebrowPulse {
            0%, 100% { box-shadow: 0 0 5px rgba(206, 231, 86, 0.45); opacity: 0.8; transform: scale(1); }
            50%      { box-shadow: 0 0 18px 2px rgba(206, 231, 86, 1); opacity: 1; transform: scale(1.25); }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-eyebrow::before { animation: none; }
        }
        .hero h1 { color: var(--white); margin-bottom: 24px; }
        .hero h1 span { color: var(--accent); }
        .hero-lead { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: rgba(255,255,255,0.85); margin-bottom: 40px; max-width: 560px; }
        .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
        .hero-stats {
            display: grid; grid-template-columns: 1fr; gap: 16px;
            background: rgba(255,255,255,0.06); backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
            padding: 32px;
        }
        .stat-item { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .stat-item:last-child { border-bottom: none; padding-bottom: 0; }
        .stat-item:first-child { padding-top: 0; }
        .stat-value { font-size: 2.5rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 4px; }
        .stat-label { font-size: 14px; color: rgba(255,255,255,0.7); }

        @media (max-width: 900px) {
            /* Mobile/tablette : on coupe le dégradé animé et les flous du hero.
               Sur GPU mobile, le repaint permanent du dégradé animé combiné aux
               filter/backdrop-filter rasterisait le texte sur un calque qui traînait
               au scroll (dédoublement visible). Le dégradé statique reste identique à l'œil. */
            .hero { min-height: auto; padding: 110px 0 60px; animation: none; }
            .hero-inner { grid-template-columns: 1fr; gap: 40px; }
            .hero::before, .hero::after { display: none; }
            .hero-stats { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.10); }
        }/* ============ SECTIONS ============ *//* ============ TRUST BAR ============ */

        
        .trust-bar { padding: 40px 0; background: var(--gray-50); border-bottom: 1px solid rgba(19, 31, 86,0.06); }
        .trust-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 40px; }
        .trust-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .trust-logos { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; justify-content: center; }
        .trust-logo {
            font-weight: 700; font-size: 18px; color: var(--muted); opacity: 0.6;
            font-family: var(--font-sans); letter-spacing: -0.02em;
            transition: opacity 0.2s ease;
        }
        .trust-logo:hover { opacity: 1; }/* ============ EXPERTISES (bento asymétrique) ============ */

        
        .expertises-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        
        .expertise-card {
            background: var(--white); border: 1px solid rgba(19, 31, 86,0.08);
            border-radius: var(--radius-lg); padding: 40px; transition: all 0.3s ease;
            position: relative; overflow: hidden;
        }
        .expertise-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
            background: var(--accent); transform: scaleX(0); transform-origin: left;
            transition: transform 0.4s ease;
        }
        .expertise-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: transparent; }
        .expertise-card:hover::before { transform: scaleX(1); }
        .expertise-icon {
            width: 64px; height: 64px; border-radius: var(--radius-md);
            background: var(--cream); display: flex; align-items: center; justify-content: center;
            margin-bottom: 24px; color: var(--primary);
        }
        .expertise-icon svg { width: 32px; height: 32px; }
        .expertise-card h3 { margin-bottom: 12px; }
        .expertise-card p { margin-bottom: 20px; }
        .expertise-features { display: flex; flex-direction: column; gap: 8px; }
        .expertise-features li {
            display: flex; align-items: flex-start; gap: 10px;
            font-size: 14px; color: var(--primary); font-weight: 500;
        }
        .expertise-features li::before {
            content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px;
            background: var(--accent); border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23131f56' d='M6.5 11L3 7.5l1-1 2.5 2.5L12 3.5l1 1z'/%3E%3C/svg%3E");
            background-size: contain;
        }

        
        @media (max-width: 700px) { .expertises-grid { grid-template-columns: 1fr; } .expertise-card { padding: 32px 24px; } }/* ============ MÉTHODE (frise horizontale) ============ */

        
        .method { background: var(--gray-50); }
        .method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
        .method-grid::before {
            content: ''; position: absolute; top: 30px; left: 12.5%; right: 12.5%; height: 2px;
            background: linear-gradient(90deg, rgba(19, 31, 86,0.12), var(--accent) 45%, var(--accent) 55%, rgba(19, 31, 86,0.12));
            z-index: 0;
        }
        .method-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
        .method-header { display: flex; justify-content: center; margin-bottom: 22px; }
        .method-icon {
            width: 60px; height: 60px; border-radius: 50%;
            background: var(--white); color: var(--primary);
            border: 2px solid var(--accent);
            display: inline-flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 16px rgba(19, 31, 86,0.09);
        }
        .method-icon svg { width: 24px; height: 24px; }
        .method-step h3 { font-size: 1.125rem; margin-bottom: 8px; }
        .method-step p { font-size: 15px; }
        @media (max-width: 900px) { .method-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .method-grid::before { display: none; } }
        @media (max-width: 540px) { .method-grid { grid-template-columns: 1fr; } }/* ============ MISSIONS ============ */

        
        /* ⚠️ Bento asymétrique, à la place de repeat(4, 1fr).
           Quatre colonnes strictement égales, c'est la cadence mécanique qui
           donne au site son air de gabarit : l'œil traverse la rangée sans
           rien y accrocher. Ici, six colonnes et des empans variés — la carte
           Stratégie occupe la moitié gauche sur toute la hauteur, les trois
           autres se répartissent la droite. Aucune ne fait la même taille,
           donc il y a une hiérarchie à lire.
           Le suivi visuel reste bon : les couleurs suivent toujours la rampe
           du book (marine, bleu, crème, citron), c'est la géométrie seule
           qui change. */
        .missions-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: minmax(0, auto);
            gap: 20px;
        }
        /* ⚠️ L'asymétrie porte sur la LARGEUR, jamais sur la hauteur.
           Premier essai : une carte étirée sur deux rangées. Raté — les quatre
           cartes portent le même volume (un titre, quatre puces), donc la
           grande se retrouvait aux trois quarts vide. Un bento ne marche que
           si les contenus diffèrent vraiment.
           Ici : 4+2 puis 2+4. Les hauteurs restent égales, les largeurs
           alternent, et le regard cesse de balayer une rangée uniforme.
           C'est le rythme que `.expertises-grid` applique déjà plus haut. */
        .missions-grid > :nth-child(1) { grid-column: span 4; }
        .missions-grid > :nth-child(2) { grid-column: span 2; }
        .missions-grid > :nth-child(3) { grid-column: span 2; }
        .missions-grid > :nth-child(4) { grid-column: span 4; }
        .mission-card {
            background: var(--primary); color: var(--white);
            border-radius: var(--radius-lg); padding: 32px; transition: transform 0.3s ease;
        }
        .mission-card:nth-child(2) { background: var(--secondary-fonce); }
        .mission-card:nth-child(3) { background: var(--cream); color: var(--primary); }
        .mission-card:nth-child(4) { background: var(--accent); color: var(--primary); }
        .mission-card:hover { transform: translateY(-2px); }
        .mission-card h3 { color: inherit; margin-bottom: 16px; font-size: 1.25rem; }
        .mission-icon {
            width: 52px; height: 52px; border-radius: var(--radius-md);
            background: rgba(255,255,255,0.15);
            display: inline-flex; align-items: center; justify-content: center;
            margin-bottom: 20px; color: currentColor;
        }
        .mission-card:nth-child(3) .mission-icon { background: rgba(19, 31, 86,0.1); }
        .mission-card:nth-child(4) .mission-icon { background: rgba(19, 31, 86,0.15); }
        /* Pas d'`opacity` ici : elle rabotait le contraste de tout le texte des
           cartes sans rien apporter à l'œil. */
        .mission-card ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
        .mission-card li { padding-left: 24px; position: relative; line-height: 1.4; }
        .mission-card li::before {
            content: ''; position: absolute; left: 0; top: 4px;
            width: 14px; height: 14px; border-radius: var(--radius-sm);
            background: currentColor; opacity: 0.2;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 7l2 2 4-4'/%3E%3C/svg%3E");
            background-size: contain;
        }
        .mission-card:nth-child(1) li::before, .mission-card:nth-child(2) li::before { background: rgba(206, 231, 86, 0.35); }
        .mission-card:nth-child(3) li::before { background: rgba(19, 31, 86, 0.12); }
        .mission-card:nth-child(4) li::before { background: rgba(19, 31, 86, 0.15); }
        @media (max-width: 900px) {
            .missions-grid { grid-template-columns: repeat(2, 1fr); }
            .missions-grid > :nth-child(1) { grid-column: span 2; grid-row: auto; }
            .missions-grid > :nth-child(2),
            .missions-grid > :nth-child(3),
            .missions-grid > :nth-child(4) { grid-column: span 1; }
        }
        @media (max-width: 540px) {
            .missions-grid { grid-template-columns: 1fr; }
            .missions-grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
        }/* ============ TÉMOIGNAGES ============ */

        
        .testimonials { background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%); }
        .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .testimonial {
            background: var(--white); border-radius: var(--radius-lg);
            padding: 32px; border: 1px solid rgba(19, 31, 86,0.08);
            display: flex; flex-direction: column; gap: 20px;
        }
        .quote-mark { font-family: Georgia, serif; font-size: 64px; line-height: 0.5; color: var(--accent); margin-bottom: -16px; }
        .testimonial-text { color: var(--primary); font-size: 16px; line-height: 1.65; flex-grow: 1; }
        .testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(19, 31, 86,0.08); }
        .author-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary), var(--primary)); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; flex-shrink: 0; }
        .author-info strong { display: block; color: var(--primary); font-size: 14px; }
        .author-info span { font-size: 13px; color: var(--muted); }
        @media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }/* ============ ÉQUIPE (alternance pleine largeur) ============ */

        
        .team-list { display: flex; flex-direction: column; gap: 96px; }
        .associate {
            display: grid; grid-template-columns: 5fr 6fr; gap: 64px;
            align-items: center;
        }
        .associate.reverse { grid-template-columns: 6fr 5fr; }
        .associate.reverse .associate-photo-wrap { order: 2; }
        .associate.reverse .associate-body { order: 1; }
        .associate-photo-wrap {
            aspect-ratio: 4 / 5; background: var(--primary);
            border-radius: var(--radius-md); overflow: hidden;
            box-shadow: 0 20px 40px rgba(19, 31, 86,0.15);
        }
        .associate-photo-wrap img {
            width: 100%; height: 100%; object-fit: cover;
            object-position: center top; /* Marième : photo déjà cadrée en 4/5 */
        }
        .associate.reverse .associate-photo-wrap img {
            object-position: center top; /* Rhoda : photo déjà cadrée en 4/5 */
        }
        .associate-eyebrow {
            display: inline-block; font-size: 13px; font-weight: 600;
            color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em;
            margin-bottom: 12px;
        }
        .associate-body h3 {
            font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 600;
            margin-bottom: 8px; letter-spacing: -0.02em;
        }
        .associate-role {
            color: var(--secondary-fonce); font-weight: 600; font-size: 15px;
            margin-bottom: 28px;
        }
        .associate-bio { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 24px; }
        .associate-linkedin {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 14px; font-weight: 600; color: var(--primary);
            padding-bottom: 4px; border-bottom: 1.5px solid var(--primary);
            transition: color 0.2s ease, border-color 0.2s ease;
        }
        .associate-linkedin:hover { color: var(--secondary-fonce); border-color: var(--secondary); }
        @media (max-width: 800px) {
            .team-list { gap: 64px; }
            .associate, .associate.reverse { grid-template-columns: 1fr; gap: 32px; }
            .associate.reverse .associate-photo-wrap { order: 0; }
            .associate.reverse .associate-body { order: 1; }
            .associate-photo-wrap { max-width: 400px; margin: 0 auto; }
        }/* ============ LEAD MAGNET ============ */

        
        .lead-magnet {
            background: linear-gradient(115deg, var(--primary) 0%, var(--secondary) 100%);
            color: var(--white); border-radius: var(--radius-lg);
            padding: 64px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
            position: relative; overflow: hidden;
        }
        .lead-magnet::before {
            content: ''; position: absolute; top: -50%; right: -10%; width: 50%; aspect-ratio: 1;
            background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
            opacity: 0.2; filter: blur(60px);
        }
        .lead-magnet h2 { color: var(--white); margin-bottom: 16px; }
        .lead-magnet p { color: rgba(255,255,255,0.85); margin-bottom: 24px; }
        .lead-magnet-form { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
        .lead-magnet-form input {
            flex-grow: 1; min-width: 200px; padding: 16px 20px;
            border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08);
            border-radius: var(--radius-pill); color: var(--white); font-family: inherit; font-size: 15px;
        }
        .lead-magnet-form input::placeholder { color: rgba(255,255,255,0.5); }
        .lead-magnet-visual {
            position: relative; z-index: 1; aspect-ratio: 3/4; background: var(--white);
            border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
            padding: 32px; transform: rotate(3deg); color: var(--primary);
            display: flex; flex-direction: column; justify-content: space-between;
        }
        .lead-magnet-visual .doc-tag { display: inline-block; padding: 4px 10px; background: var(--cream); border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; text-transform: uppercase; width: fit-content; }
        /* `margin-top` repris d'un attribut style= posé dans le HTML : la balise
           est passée de h4 à h3 pour ne plus sauter de niveau de titre, et sa
           mise en forme redescend ici, à sa place. */
        .lead-magnet-visual h3 { font-size: 1.5rem; line-height: 1.2; }
        .lead-magnet-titre { margin-top: 16px; }
        .lead-magnet-visual .doc-footer { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
        @media (max-width: 800px) { .lead-magnet { grid-template-columns: 1fr; padding: 40px 24px; } .lead-magnet-visual { display: none; } }/* ============ CONTACT ============ */

        
        .contact { background: var(--gray-50); }
        .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
        .contact-info h2 { margin-bottom: 16px; }
        .contact-info p { font-size: 1.0625rem; margin-bottom: 32px; }
        .contact-detail { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
        .contact-detail svg { flex-shrink: 0; color: var(--primary); }
        .contact-detail a { font-weight: 600; color: var(--primary); }
        .contact-detail a:hover { color: var(--secondary-fonce); }
        .contact-form {
            background: var(--white); padding: 40px; border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
        }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%; padding: 12px 16px; font-family: inherit; font-size: 15px;
            border: 1.5px solid rgba(19, 31, 86,0.12); border-radius: var(--radius-sm);
            background: var(--white); color: var(--primary);
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        /* ⚠️ `outline: none` remplacé par un simple changement de couleur de
           bordure : pour qui navigue au clavier, 1,5 px de bleu ne suffit pas
           à repérer où l'on se trouve. On remet un anneau franc, décollé du
           champ, dans le citron de la charte. */
        .form-group input:focus-visible,
        .form-group select:focus-visible,
        .form-group textarea:focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 2px;
            border-color: var(--secondary);
        }
        /* Le survol dit que le champ est vivant avant même de le toucher. */
        @media (hover: hover) and (pointer: fine) {
            .form-group input:hover, .form-group select:hover, .form-group textarea:hover {
                border-color: rgba(19, 31, 86, 0.28);
            }
        }
        /* Les erreurs de saisie sont affichées par js/formulaires.js, avec un message
           sous le champ : pas de liseré rouge posé par le navigateur sans explication. */
        .form-group textarea { resize: vertical; min-height: 120px; }
        .form-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 13px; color: var(--muted); }
        .form-checkbox input { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--primary); }
        .form-checkbox a { color: var(--secondary-fonce); text-decoration: underline; }
        @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } .form-row { grid-template-columns: 1fr; } .contact-form { padding: 28px 20px; } }/* ============ FOOTER ============ *//* ============ COOKIE BANNER ============ */
        .cookie-banner p button { color: var(--secondary-fonce); text-decoration: underline; font-size: inherit; padding: 0; }
        .cookie-banner p button:hover { color: var(--primary); }/* Modale cookies */

        
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(19, 31, 86,0.6);
            backdrop-filter: blur(4px); z-index: 300;
            display: flex; align-items: center; justify-content: center;
            padding: 24px; opacity: 0; visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }
        .modal-overlay.show { opacity: 1; visibility: visible; }
        .modal {
            background: var(--white); border-radius: var(--radius-lg);
            max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto;
            padding: 40px; position: relative;
            transform: translateY(20px); transition: transform 0.25s ease;
        }
        .modal-overlay.show .modal { transform: translateY(0); }
        .modal-close {
            position: absolute; top: 16px; right: 16px;
            width: 36px; height: 36px; border-radius: 50%;
            background: var(--gray-50); color: var(--primary);
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; line-height: 1;
        }
        .modal-close:hover { background: var(--cream); }
        .modal h3 { margin-bottom: 8px; font-size: 1.5rem; }
        .modal > p { font-size: 15px; margin-bottom: 24px; }
        .cookie-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 24px; }
        .cookie-table th, .cookie-table td {
            padding: 12px; text-align: left;
            border-bottom: 1px solid rgba(19, 31, 86,0.08);
        }
        .cookie-table th { font-weight: 600; color: var(--primary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
        .cookie-table td { color: var(--muted); }
        .cookie-table tr:last-child td { border-bottom: none; }
        .modal-footer { padding-top: 20px; border-top: 1px solid rgba(19, 31, 86,0.08); font-size: 13px; color: var(--muted); }/* ============ ANIMATIONS ============ */

        
        @media (prefers-reduced-motion: no-preference) {
            .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
            .fade-in.visible { opacity: 1; transform: translateY(0); }
        }

/* ============ BANDE PLEINE LARGEUR ============ */
/* Le site enchaînait huit sections bâties pareil : étiquette centrée, titre
   centré, grille de cartes arrondies sur fond alterné pâle/blanc. C'est
   régulier au point d'en devenir inerte. Cette bande casse la cadence :
   bord à bord, sans arrondi, sans conteneur, avec l'emblème qui déborde. */
.bande-image {
    position: relative;
    height: clamp(240px, 34vw, 380px);
    background: url('../../img/eolienne.webp') center 62% / cover no-repeat;
    overflow: hidden;
}
/* Voile marine léger : la bande appartient à la page au lieu d'y être collée,
   et l'emblème citron s'y détache. */
.bande-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(19,31,86,0.58) 0%, rgba(19,31,86,0.12) 55%, transparent 100%);
}
.bande-image::before {
    content: '';
    position: absolute; z-index: 1;
    left: 4%; top: 50%; transform: translateY(-50%);
    width: min(28vw, 290px); aspect-ratio: 1;
    background: url('../../img/embleme-s.svg') no-repeat center / contain;
    opacity: 0.9;
}
@media (max-width: 700px) {
    .bande-image::before { width: 42vw; left: 6%; }
}

/* ============ SURLIGNAGE DU HÉRO ============ */
/* Le book fait ressortir un mot en citron dans le texte marine — « Cabinet de
   conseil à IMPACT POSITIF ». Ici le mot clé du titre se surligne au
   chargement, comme un marqueur qu'on passe de gauche à droite.

   ⚠️ Premier essai raté, gardé en mémoire : un `::before` en position absolue
   se cale sur la PREMIÈRE boîte de ligne de l'élément en ligne, pas sur le
   texte lui-même — la bande tombait sous le mot, comme un rectangle égaré.
   La bonne façon est un fond dont on anime `background-size` : il suit le
   texte, y compris quand il passe à la ligne. */
.hero h1 span {
    color: var(--accent);
    background-image: linear-gradient(rgba(206, 231, 86, 0.18), rgba(206, 231, 86, 0.18));
    background-repeat: no-repeat;
    background-position: 0 82%;
    background-size: 0% 0.38em;
    /* Sans ça, le fond se coupe net au passage à la ligne. */
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    animation: surligne 900ms cubic-bezier(0.16, 1, 0.3, 1) 600ms forwards;
}
@keyframes surligne { to { background-size: 100% 0.38em; } }
@media (prefers-reduced-motion: reduce) {
    .hero h1 span { animation: none; background-size: 100% 0.38em; }
}