/* GENERE : ne pas editer a la main.
   Extrait du bloc <style> d'index.html par build/generate.mjs.
   index.html reste la source unique du design : modifier la home,
   puis relancer « node build/generate.mjs ». */

        /* ============================================
           THÉO BAUDRY - PORTFOLIO PREMIUM
           Aesthetic: Soft Structuralism + Editorial Split
           Vibe: $150k agency-tier, Awwwards-level
           Font: Geist (display) + Instrument Serif (accent)
           ============================================ */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Colors - Soft Structuralism palette */
            --accent: #4F6BFF;
            --accent-deep: #3d54cc;
            --accent-soft: rgba(79, 107, 255, 0.08);

            --canvas: #F9FAFB;
            --surface: #FFFFFF;
            --ink: #18181B;
            --ink-soft: #27272A;
            --steel: #71717A;
            --slate: #94A3B8;
            --whisper: rgba(226, 232, 240, 0.6);
            --hairline: rgba(0, 0, 0, 0.06);
            --shadow-diffused: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
            --shadow-soft: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
            --shadow-deep: 0 40px 80px -20px rgba(0, 0, 0, 0.12);

            /* Type */
            --font-display: 'Geist', -apple-system, sans-serif;
            --font-editorial: 'Instrument Serif', serif;
            --font-mono: 'Geist Mono', monospace;

            /* Motion */
            --spring: cubic-bezier(0.32, 0.72, 0, 1);
            --smooth: cubic-bezier(0.16, 1, 0.3, 1);
            --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 120px;
        }

        body {
            font-family: var(--font-display);
            background: var(--canvas);
            color: var(--ink);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            font-weight: 400;
        }

        ::selection {
            background: var(--accent);
            color: white;
        }

        /* ============================================
           NAVIGATION - Fluid Island (visible by default, centered)
           ============================================ */
        #nav {
            position: fixed;
            top: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            transition: all 0.6s var(--spring);
            will-change: transform;
            animation: navEnter 1s var(--smooth) 0.2s both;
        }

        @keyframes navEnter {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        #nav.scrolled .nav-pill {
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.04),
                0 12px 40px -8px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        .nav-pill {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.04),
                0 8px 32px -8px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            border-radius: 999px;
            padding: 0.5rem 0.5rem 0.5rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            transition: box-shadow 0.4s var(--smooth);
        }

        .nav-logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            padding-right: 0.875rem;
            border-right: 1px solid var(--hairline);
            transition: opacity 0.3s var(--smooth);
        }

        .nav-logo:hover {
            opacity: 0.7;
        }

        .nav-logo img {
            height: 1.5rem;
            width: auto;
            display: block;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.6;
                transform: scale(0.9);
            }
        }

        .nav-links {
            display: flex;
            gap: 0.25rem;
            list-style: none;
            align-items: center;
        }

        .nav-links a {
            white-space: nowrap;
            color: var(--steel);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: -0.01em;
            transition: all 0.4s var(--smooth);
            padding: 0.5rem 1rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
        }

        .nav-links a:hover {
            color: var(--ink);
            background: rgba(0, 0, 0, 0.04);
        }

        /* Button-in-Button Nav CTA */
        .nav-cta {
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            background: var(--ink);
            color: white;
            padding: 0.5rem 0.5rem 0.5rem 1.25rem;
            border-radius: 999px;
            font-size: 0.875rem;
            font-weight: 600;
            text-decoration: none;
            letter-spacing: -0.01em;
            transition: all 0.4s var(--spring);
        }

        .nav-cta:hover {
            background: var(--accent);
            transform: scale(1.02);
        }

        .nav-cta:active {
            transform: scale(0.98);
        }

        .nav-cta-arrow {
            width: 1.75rem;
            height: 1.75rem;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            transition: transform 0.4s var(--spring);
        }

        .nav-cta:hover .nav-cta-arrow {
            transform: translateX(2px) translateY(-1px) scale(1.05);
            background: rgba(255, 255, 255, 0.25);
        }

        /* ============================================
           CONTAINER & LAYOUT
           ============================================ */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 4rem;
            position: relative;
        }

        section {
            padding: clamp(6rem, 12vw, 10rem) 0;
            position: relative;
        }

        /* Eyebrow tag */
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 0.875rem;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 999px;
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--ink);
            box-shadow: var(--shadow-diffused);
        }

        .eyebrow-dot {
            width: 0.375rem;
            height: 0.375rem;
            border-radius: 50%;
            background: var(--accent);
            animation: pulse 2s ease-in-out infinite;
        }

        /* Section header */
        .section-header {
            margin-bottom: clamp(4rem, 8vw, 6rem);
            max-width: 720px;
        }

        .section-header.centered {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .section-header h2 {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.035em;
            color: var(--ink);
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .section-header h2 em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
            letter-spacing: -0.01em;
        }

        .section-header p {
            font-size: 1.125rem;
            line-height: 1.6;
            color: var(--steel);
            max-width: 540px;
        }

        .section-header.centered p {
            margin: 0 auto;
        }

        /* ============================================
           HERO - Editorial Split
           ============================================ */
        #hero {
            display: flex;
            align-items: center;
            padding: 11rem 0 9rem;
            position: relative;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse 80% 50% at 20% 0%, rgba(79, 107, 255, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(79, 107, 255, 0.06) 0%, transparent 60%);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.55fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        /* Hero sans portrait, pour les pages ou le sujet n'est pas la
           personne : References et Secteurs.

           `#hero` est en display:flex, donc `.container` y est un element
           flex dimensionne par son contenu. Avec les deux colonnes de
           l'accueil, ce contenu suffit a remplir la ligne et personne ne
           s'en apercoit. Avec une colonne unique, le conteneur se
           retractait a la largeur du texte : 822px au lieu de 1184px, et
           le hero se retrouvait tasse au milieu de la page. D'ou la classe
           explicite sur le conteneur, plutot qu'un `flex: 1` sur la regle
           commune qui aurait elargi le hero de l'accueil au passage. */
        #hero .container-hero-solo { width: 100%; }

        /* Sans portrait a equilibrer, la hauteur de l'accueil ne se
           justifie plus : elle ne produisait que du vide sous le texte. */
        #hero.hero-sans-portrait { padding: 9rem 0 5rem; }

        .hero-grid-solo {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .hero-grid-solo .hero-content { max-width: 52rem; }

        .hero-grid-solo .hero-stats { max-width: 46rem; }

        /* Les references de confiance passent sous le contenu au lieu de
           flotter sur la photo. */
        .hero-credentials-inline {
            position: static;
            margin-top: 2.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .hero-content {
            animation: fadeUp 1s var(--smooth) both;
            animation-delay: 0.1s;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(24px);
                filter: blur(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        .hero h1 {
            font-family: var(--font-display);
            font-size: clamp(3rem, 6.5vw, 5.5rem);
            font-weight: 700;
            line-height: 0.98;
            letter-spacing: -0.04em;
            color: var(--ink);
            margin: 2rem 0 2rem;
        }

        .hero h1 em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
            letter-spacing: -0.02em;
            display: inline-block;
        }

        .hero-sub {
            font-size: 1.25rem;
            line-height: 1.55;
            color: var(--steel);
            max-width: 480px;
            margin-bottom: 2.75rem;
            animation: fadeUp 1s var(--smooth) both;
            animation-delay: 0.25s;
        }

        .hero-cta-row {
            display: flex;
            gap: 1rem;
            align-items: center;
            margin-bottom: 4rem;
            animation: fadeUp 1s var(--smooth) both;
            animation-delay: 0.4s;
        }

        /* Primary Button - Button-in-Button */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--ink);
            color: white;
            padding: 0.625rem 0.625rem 0.625rem 1.75rem;
            border-radius: 999px;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            letter-spacing: -0.01em;
            transition: all 0.4s var(--spring);
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            background: var(--accent);
            transform: scale(1.02);
        }

        .btn-primary:active {
            transform: scale(0.98);
        }

        .btn-arrow {
            width: 2rem;
            height: 2rem;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.4s var(--spring), background 0.4s;
        }

        .btn-primary:hover .btn-arrow {
            transform: translateX(3px) translateY(-1px) scale(1.08);
            background: rgba(255, 255, 255, 0.25);
        }

        .btn-arrow svg {
            width: 0.875rem;
            height: 0.875rem;
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            color: var(--ink);
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            letter-spacing: -0.01em;
            padding: 1.125rem 1.75rem;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 999px;
            transition: all 0.4s var(--spring);
            box-shadow: var(--shadow-diffused);
        }

        .btn-secondary:hover {
            background: var(--canvas);
            border-color: rgba(79, 107, 255, 0.3);
            transform: translateY(-1px);
            box-shadow: var(--shadow-soft);
        }

        .btn-secondary svg {
            color: var(--accent);
        }

        /* Hero stats */
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 2rem;
            padding-top: 1.75rem;
            border-top: 1px solid var(--hairline);
            animation: fadeUp 1s var(--smooth) both;
            animation-delay: 0.55s;
        }

        .stat-block {
            display: flex;
            flex-direction: column;
        }

        .stat-value {
            font-family: var(--font-display);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--ink);
            line-height: 1;
            letter-spacing: -0.03em;
            margin-bottom: 0.625rem;
        }

        .stat-value em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .stat-label {
            font-size: 0.8125rem;
            color: var(--steel);
            font-weight: 500;
            letter-spacing: -0.005em;
        }

        /* Lien de preuve sous une statistique. Discret par defaut : il ne
           doit pas concurrencer les deux boutons du hero, seulement offrir
           la verification a qui la cherche. */
        .stat-link {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            margin-top: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--accent);
            text-decoration: none;
            padding: 0.25rem 0.6rem 0.25rem 0.55rem;
            border: 1px solid rgba(79, 107, 255, 0.22);
            border-radius: 999px;
            background: var(--accent-soft);
            transition: all 0.3s var(--smooth);
        }

        .stat-link svg {
            width: 0.5rem;
            height: 0.5rem;
            transition: transform 0.3s var(--smooth);
        }

        .stat-link:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .stat-link:hover svg { transform: translate(1px, -1px); }

        /* Hero Visual - Double Bezel Photo */
        .hero-visual {
            position: relative;
            animation: fadeUp 1.2s var(--smooth) both;
            animation-delay: 0.35s;
            max-width: 340px;
            margin-left: auto;
            width: 100%;
        }

        .photo-frame-outer {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 2rem;
            padding: 0.5rem;
            box-shadow: var(--shadow-deep);
            position: relative;
        }

        .photo-frame-inner {
            border-radius: calc(2rem - 0.5rem);
            overflow: hidden;
            position: relative;
            aspect-ratio: 4/5;
            background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(79, 107, 255, 0.03) 100%);
        }

        .photo-frame-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Hero credentials (Google Partner + LinkedIn) sous la photo */
        .hero-credentials {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            justify-content: center;
            margin-top: 1.25rem;
            animation: fadeUp 1.2s var(--smooth) both;
            animation-delay: 0.7s;
        }

        .hero-cred-google {
            display: inline-block;
            line-height: 0;
            transition: transform 0.4s var(--spring);
            flex-shrink: 0;
        }

        .hero-cred-google img {
            height: 5rem;
            width: auto;
            display: block;
        }

        .hero-cred-google:hover {
            transform: translateY(-2px) scale(1.04);
        }

        .hero-cred-linkedin {
            width: 3rem;
            height: 3rem;
            background: #0077B5;
            color: white;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s var(--spring);
            box-shadow: var(--shadow-diffused);
            flex-shrink: 0;
        }

        .hero-cred-linkedin:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: var(--shadow-soft);
        }

        .hero-cred-linkedin svg {
            width: 1.375rem;
            height: 1.375rem;
        }

        /* Floating badges */
        .float-badge {
            position: absolute;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1rem;
            padding: 0.75rem 1rem 0.75rem 0.75rem;
            box-shadow: var(--shadow-deep);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            backdrop-filter: blur(10px);
            animation: float 4s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .float-badge.badge-1 {
            top: 10%;
            left: -2.5rem;
            animation-delay: 0s;
        }

        .float-badge.badge-2 {
            top: 45%;
            right: -4.5rem;
            animation-delay: 1.3s;
        }

        .float-badge.badge-3 {
            bottom: 18%;
            left: -2rem;
            animation-delay: 2.6s;
        }

        /* Entre 769px et 1080px la grille du hero reste sur deux colonnes mais
           la colonne visuelle se retrecit : le debord des badges (-4.5rem a
           droite) sortait alors de la fenetre. On le rentre. */
        @media (min-width: 769px) and (max-width: 1280px) {
            .float-badge.badge-1 { left: -1rem; }
            .float-badge.badge-2 { right: -1rem; }
            .float-badge.badge-3 { left: -0.75rem; }
        }

        .badge-icon-wrap {
            width: 2.25rem;
            height: 2.25rem;
            background: var(--accent-soft);
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
        }

        .badge-icon-wrap svg {
            width: 1.125rem;
            height: 1.125rem;
            stroke-width: 1.5;
        }

        .badge-text {
            display: flex;
            flex-direction: column;
        }

        .badge-value {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .badge-label {
            font-size: 0.6875rem;
            color: var(--steel);
            line-height: 1.3;
            margin-top: 0.125rem;
        }

        /* ============================================
           CLIENTS MARQUEE
           ============================================ */
        .clients-section {
            padding: 4rem 0 5rem;
            border-top: 1px solid var(--hairline);
            border-bottom: 1px solid var(--hairline);
            overflow: hidden;
            background: var(--surface);
            position: relative;
        }

        .clients-label {
            text-align: center;
            font-family: var(--font-mono);
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--slate);
            margin-bottom: 2.5rem;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        .clients-label::before,
        .clients-label::after {
            content: '';
            display: inline-block;
            width: 2.5rem;
            height: 1px;
            background: var(--hairline);
        }

        .marquee-wrapper {
            overflow: hidden;
            position: relative;
            mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
            display: flex;
            gap: 4.5rem;
        }

        .marquee-track {
            display: flex;
            gap: 4.5rem;
            align-items: center;
            flex-shrink: 0;
            animation: marquee 80s linear infinite;
            will-change: transform;
        }

        .marquee-wrapper:hover .marquee-track {
            animation-play-state: paused;
        }


        @keyframes marquee {
            from {
                transform: translate3d(0, 0, 0);
            }

            to {
                transform: translate3d(calc(-100% - 4.5rem), 0, 0);
            }
        }

        /* Grisage au repos, couleur au survol : la frise reste sobre et
           ne concurrence pas le discours, et le visiteur revele la marque
           qu'il reconnait. Une parenthese en pleine couleur a ete essayee
           pour sauver les identites claires (Home Explorer), elle rendait
           le bandeau trop present. Ces logos-la restent donc pales au
           repos : c'est le prix de la sobriete, et il n'y a pas de reglage
           de filtre qui evite l'arbitrage, ces PNG ayant un fond blanc
           opaque. */
        .marquee-track img {
            height: 3.25rem;
            max-width: 10rem;
            width: auto;
            object-fit: contain;
            flex-shrink: 0;
            filter: grayscale(1) opacity(0.55);
            transition: filter 0.4s var(--smooth), transform 0.4s var(--spring);
        }

        .marquee-track img:hover {
            filter: grayscale(0) opacity(1);
            transform: scale(1.08);
        }

        /* ============================================
           MUR DE LOGOS - page References
           Le marquee ci-dessus fait defiler un extrait du portefeuille.
           Ce mur le montre en entier, d'un seul coup d'oeil. Meme
           traitement (grise au repos, couleur au survol) pour que les
           deux lectures du meme portefeuille restent coherentes.
           ============================================ */
        .section-logowall {
            padding: 5.5rem 0 6rem;
            background: var(--canvas);
        }

        /* Les separateurs sont portes par chaque tuile (anneau de 1px qui
           se superpose a celui du voisin) et non par un fond gris vu au
           travers des gouttieres : la derniere ligne est presque toujours
           incomplete, et un fond gris y laissait une plage vide grisee. */
        .logo-wall {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
            gap: 0;
            background: var(--surface);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-soft), 0 0 0 1px var(--hairline);
        }

        /* La tuile n'est plus en 2/1 : elle empile un cadre de logo de
           hauteur fixe et le nom. La hauteur du cadre est la meme partout,
           donc les logos restent alignes d'une ligne a l'autre quelle que
           soit la longueur du nom, qui peut passer sur deux lignes. */
        .logo-wall-item {
            background: var(--surface);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 0.6rem;
            padding: 1.35rem 0.9rem 1.15rem;
            box-shadow: 0 0 0 1px var(--hairline);
        }

        .logo-wall-mark {
            height: 3.1rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Pleine couleur des le repos, contrairement au marquee de la home.
           Le bandeau est decoratif : le grisage y unifie une frise qui
           defile derriere le discours. Ici les logos SONT le contenu, et
           un grisage a 55 % rendait invisibles les identites claires. */
        .logo-wall-item img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: transform 0.4s var(--spring);
        }

        .logo-wall-item:hover img {
            transform: scale(1.06);
        }

        .logo-wall-name {
            margin-top: auto;
            font-size: 0.75rem;
            line-height: 1.35;
            text-align: center;
            color: var(--steel);
            letter-spacing: -0.005em;
            transition: color 0.3s var(--smooth);
        }

        .logo-wall-item:hover .logo-wall-name {
            color: var(--ink);
        }

        /* Un vertical = un intertitre discret + son propre mur. L'etiquette
           reprend la facture mono/majuscules des eyebrows du site, et le
           compteur donne le poids du secteur d'un coup d'oeil. */
        .logo-wall-group + .logo-wall-group {
            margin-top: 3.25rem;
        }

        .logo-wall-group-head {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .logo-wall-group-label {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--ink);
            white-space: nowrap;
        }

        /* Les groupes qui ont une page secteur deviennent cliquables. Le
           libelle garde sa casse et son interlettrage : seule la couleur
           et la fleche signalent le lien, pour ne pas transformer les
           intertitres du mur en barre de navigation. */
        .logo-wall-group-label.is-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            text-decoration: none;
            color: var(--accent);
            transition: opacity 0.3s var(--smooth);
        }

        .logo-wall-group-label.is-link:hover { opacity: 0.68; }

        .logo-wall-group-go {
            width: 0.58rem;
            height: 0.58rem;
        }

        .logo-wall-group-count {
            font-family: var(--font-mono);
            font-size: 0.68rem;
            color: var(--slate);
            padding: 0.1rem 0.45rem;
            border: 1px solid var(--hairline);
            border-radius: 999px;
        }

        .logo-wall-group-head::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--hairline);
        }

        @media (max-width: 520px) {
            .section-logowall { padding: 4rem 0 4.5rem; }
            .logo-wall-group + .logo-wall-group { margin-top: 2.5rem; }
            .logo-wall { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
            .logo-wall-item { padding: 1.1rem 0.6rem 0.95rem; }
            .logo-wall-mark { height: 2.6rem; }
            .logo-wall-name { font-size: 0.7rem; }
        }

        /* ============================================
           RESULTS - Carousel premium avec onglets
           ============================================ */
        #results {
            background: var(--canvas);
            overflow: hidden;
            padding-top: clamp(3rem, 5vw, 5rem);
        }

        /* Tabs */
        .tabs-wrap {
            display: flex;
            justify-content: center;
            margin-bottom: 2.75rem;
        }

        .tabs {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.375rem;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 999px;
            box-shadow: var(--shadow-diffused);
            position: relative;
        }

        .tab {
            position: relative;
            padding: 0.75rem 1.5rem;
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--steel);
            letter-spacing: -0.01em;
            border: none;
            background: none;
            cursor: pointer;
            border-radius: 999px;
            transition: color 0.4s var(--smooth);
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .tab svg {
            width: 1rem;
            height: 1rem;
            stroke-width: 1.75;
        }

        .tab.active {
            color: white;
        }

        .tab-indicator {
            position: absolute;
            top: 0.375rem;
            bottom: 0.375rem;
            background: var(--ink);
            border-radius: 999px;
            z-index: 1;
            transition: all 0.5s var(--spring);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .tab-count {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            padding: 0.125rem 0.5rem;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 999px;
            font-weight: 500;
        }

        .tab.active .tab-count {
            background: rgba(255, 255, 255, 0.15);
        }

        /* Carousel */
        .carousel-container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Le debord a droite doit se lire comme « il y en a d'autres » et
           non comme une carte coupee par accident : un degrade masque la
           tranche, et il disparait quand on arrive au bout. */
        .carousel-viewport {
            overflow: hidden;
            padding: 1rem 0;
            margin: -1rem 0;
            position: relative;
        }

        .carousel-viewport::after {
            content: '';
            position: absolute;
            inset: 0 0 0 auto;
            width: 5rem;
            pointer-events: none;
            background: linear-gradient(to right, transparent, var(--canvas) 72%);
            opacity: 1;
            transition: opacity 0.5s var(--smooth);
        }

        .carousel-viewport[data-fin]::after { opacity: 0; }

        .carousel-track {
            display: flex;
            gap: 1.5rem;
            transition: transform 0.7s var(--spring);
            will-change: transform;
        }

        .result-card {
            flex: 0 0 calc((100% - 3rem) / 3);
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.75rem;
            padding: 2rem;
            box-shadow: var(--shadow-diffused);
            transition: all 0.6s var(--smooth);
            position: relative;
            overflow: hidden;
        }

        .result-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(79, 107, 255, 0.06), transparent 40%);
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

        .result-card:hover::before {
            opacity: 1;
        }

        .result-card:hover {
            transform: translateY(-4px);
            border-color: rgba(79, 107, 255, 0.2);
            box-shadow: var(--shadow-deep);
        }

        /* Les logos clients sont des fichiers 400x200. Enfermes dans un carre
           de 2.5rem avec du padding, ils s'affichaient a environ 28x14 pixels :
           illisibles. Le cadre suit desormais leur format paysage. */
        .result-logo {
            width: 5.75rem;
            height: 2.875rem;
            border-radius: 0.6rem;
            object-fit: contain;
            background: var(--canvas);
            padding: 0.3rem 0.55rem;
            border: 1px solid var(--hairline);
            flex-shrink: 0;
        }

        /* Les regies etaient annoncees par des pastilles de texte colorees :
           cinq libelles cote a cote sur une carte deja dense, qui se lisaient
           avant le resultat lui-meme. Le logo dit la meme chose sans mot, et
           se reconnait sans etre lu. Le nom reste dans `title` et
           `aria-label` pour le survol et pour les lecteurs d'ecran.
           Les traces viennent du calculateur de cette meme page : une seule
           source, comme pour les pages generees. */
        .result-platforms .platform-chip {
            width: 1.625rem;
            height: 1.625rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--surface);
            border: 1px solid var(--hairline);
            box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.08);
            flex-shrink: 0;
            transition: transform 0.3s var(--spring), box-shadow 0.3s var(--smooth);
        }

        /* Les pastilles se chevauchent legerement : la serie se lit comme un
           groupe plutot que comme une liste, et tient sur une seule ligne
           meme a cinq regies. */
        .result-platforms { gap: 0.3rem; }

        /* Carousel controls */
        /* Le compteur et la barre restaient loin des fleches, separes par
           un long filet et beaucoup de vide : la rangee se lisait comme
           deux elements sans rapport. Ils forment desormais un groupe
           centre, et la barre porte la progression a une taille lisible. */
        .carousel-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.75rem;
            margin-top: 2.75rem;
        }

        .carousel-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .carousel-counter {
            font-family: var(--font-mono);
            font-size: 0.8125rem;
            color: var(--ink);
            font-weight: 500;
        }

        .carousel-counter .current {
            font-family: var(--font-editorial);
            font-style: italic;
            color: var(--accent);
            font-size: 1rem;
        }

        .carousel-progress {
            width: clamp(7rem, 22vw, 16rem);
            height: 3px;
            background: var(--hairline);
            border-radius: 999px;
            overflow: hidden;
        }

        .carousel-progress-bar {
            height: 100%;
            background: var(--accent);
            border-radius: 999px;
            transition: width 0.5s var(--smooth);
        }

        .carousel-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .carousel-btn {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background: var(--surface);
            border: 1px solid var(--hairline);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s var(--spring);
            color: var(--ink);
            box-shadow: var(--shadow-diffused);
        }

        .carousel-btn svg {
            width: 1rem;
            height: 1rem;
            stroke-width: 1.75;
        }

        .carousel-btn:hover:not(:disabled) {
            background: var(--ink);
            color: white;
            border-color: var(--ink);
            transform: scale(1.05);
        }

        /* A 0.3 d'opacite, la fleche precedente devenait un rond gris
           illisible. On la garde nette : c'est sa couleur qui dit qu'elle
           ne sert pas encore, pas son effacement. */
        .carousel-btn:disabled {
            color: var(--steel);
            opacity: 0.55;
            box-shadow: none;
            cursor: default;
        }

        .carousel-btn:disabled:hover {
            transform: none;
            border-color: var(--hairline);
        }

        .carousel-btn:active:not(:disabled) {
            transform: scale(0.95);
        }

        /* ============================================
           EXPERTISE - Bento Cards (no accordion)
           ============================================ */
        #expertise {
            background: var(--ink);
            color: white;
            position: relative;
            overflow: hidden;
        }

        #expertise::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 40% at 15% 20%, rgba(79, 107, 255, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse 60% 40% at 85% 80%, rgba(79, 107, 255, 0.08) 0%, transparent 60%);
            pointer-events: none;
        }

        #expertise .section-header h2 {
            color: white;
        }

        #expertise .section-header p {
            color: rgba(255, 255, 255, 0.65);
        }

        #expertise .eyebrow {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: white;
            backdrop-filter: blur(10px);
        }

        .expertise-bento {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1.25rem;
        }

        .exp-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1.75rem;
            padding: 2.5rem;
            transition: all 0.6s var(--smooth);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .exp-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 0%, rgba(79, 107, 255, 0.12), transparent 50%);
            opacity: 0;
            transition: opacity 0.6s var(--smooth);
            pointer-events: none;
        }

        .exp-card:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(79, 107, 255, 0.25);
            transform: translateY(-4px);
        }

        .exp-card:hover::before {
            opacity: 1;
        }

        .exp-card.large {
            grid-column: span 3;
        }

        .exp-card.medium {
            grid-column: span 3;
        }

        .exp-card.small {
            grid-column: span 2;
        }

        .exp-number {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--accent);
            letter-spacing: 0.1em;
            margin-bottom: 1.5rem;
            display: block;
        }

        .exp-card h3 {
            font-family: var(--font-display);
            font-size: 1.625rem;
            font-weight: 600;
            color: white;
            line-height: 1.15;
            letter-spacing: -0.025em;
            margin-bottom: 1rem;
        }

        .exp-card h3 em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .exp-desc {
            font-size: 0.9375rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.65);
            margin-bottom: 1.5rem;
        }

        .exp-tools {
            display: flex;
            flex-wrap: wrap;
            gap: 0.375rem;
        }

        .tool-chip {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            padding: 0.375rem 0.75rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.8);
        }

        /* ============================================
           CALCULATOR - Premium Multi-Step
           ============================================ */
        #calculator {
            background: var(--canvas);
        }

        .calc-wrap {
            max-width: 860px;
            margin: 0 auto;
        }

        .calc-shell {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 2rem;
            padding: 0.5rem;
            box-shadow: var(--shadow-deep);
        }

        .calc-inner {
            background: var(--canvas);
            border-radius: calc(2rem - 0.5rem);
            padding: 3.5rem;
            position: relative;
        }

        .calc-progress {
            display: flex;
            gap: 1rem;
            margin-bottom: 3.5rem;
            position: relative;
        }

        .progress-dot {
            flex: 1;
            height: 4px;
            background: var(--hairline);
            border-radius: 999px;
            overflow: hidden;
            position: relative;
        }

        .progress-dot.done {
            background: var(--accent);
        }

        .progress-dot.active {
            background: var(--hairline);
        }

        .progress-dot.active::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--accent);
            width: 50%;
            animation: progressPulse 2s ease-in-out infinite;
        }

        @keyframes progressPulse {

            0%,
            100% {
                opacity: 1;
                transform: translateX(-50%);
            }

            50% {
                opacity: 0.6;
                transform: translateX(50%);
            }
        }

        .calc-step {
            display: none;
        }

        .calc-step.active {
            display: block;
            animation: stepIn 0.6s var(--smooth);
        }

        @keyframes stepIn {
            from {
                opacity: 0;
                transform: translateY(16px);
                filter: blur(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        .step-number {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            color: var(--accent);
            letter-spacing: 0.1em;
            font-weight: 500;
            margin-bottom: 1rem;
            display: block;
        }

        .step-question {
            font-family: var(--font-display);
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 600;
            color: var(--ink);
            line-height: 1.15;
            letter-spacing: -0.025em;
            margin-bottom: 0.625rem;
        }

        .step-question em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .step-helper {
            font-size: 0.9375rem;
            color: var(--steel);
            margin-bottom: 2.5rem;
        }

        /* Platform grid */
        /* Quatre colonnes depuis l'ajout de Reddit Ads et ChatGPT Ads :
           huit tuiles sur trois colonnes laissaient une derniere ligne de
           deux, visuellement bancale. */
        .platforms-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-bottom: 3rem;
        }

        .platform-input {
            display: none;
        }

        .platform-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            padding: 1.25rem 1rem;
            background: var(--surface);
            border: 1.5px solid var(--hairline);
            border-radius: 0.875rem;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: -0.01em;
            cursor: pointer;
            transition: all 0.4s var(--spring);
            min-height: 5.5rem;
        }

        .platform-label:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
            box-shadow: var(--shadow-soft);
        }

        .platform-input:checked+.platform-label {
            background: var(--ink);
            color: white;
            border-color: var(--ink);
            transform: translateY(-2px);
        }

        .platform-logo {
            width: 1.75rem;
            height: 1.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s var(--smooth);
        }

        .platform-logo svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .platform-input:checked+.platform-label .platform-logo {
            filter: brightness(0) invert(1);
        }

        /* Sauf les marques qui sont un aplat : blanchies, elles ne sont plus
           qu'un rectangle blanc. Leurs couleurs d'origine ressortent tres
           bien sur le fond sombre. */
        .platform-input[data-platform="microsoft"]:checked+.platform-label .platform-logo,
        .platform-input[data-platform="snapchat"]:checked+.platform-label .platform-logo {
            filter: none;
        }

        /* Budget input avec symbole € */
        .budget-wrap {
            position: relative;
            margin-bottom: 1rem;
        }

        .budget-input {
            width: 100%;
            padding: 1.75rem 3rem 1.75rem 1.75rem;
            background: var(--surface);
            border: 1.5px solid var(--hairline);
            border-radius: 1rem;
            color: var(--ink);
            font-family: var(--font-display);
            font-size: 2.25rem;
            font-weight: 700;
            letter-spacing: -0.025em;
            transition: all 0.4s var(--smooth);
            -moz-appearance: textfield;
        }

        .budget-input::-webkit-outer-spin-button,
        .budget-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .budget-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--accent-soft);
        }

        .budget-suffix {
            position: absolute;
            right: 1.75rem;
            top: 50%;
            transform: translateY(-50%);
            font-family: var(--font-display);
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--slate);
            letter-spacing: -0.025em;
            pointer-events: none;
        }

        .budget-slider-wrap {
            margin: 2rem 0 0;
        }

        .budget-slider {
            width: 100%;
            height: 4px;
            background: var(--hairline);
            border-radius: 999px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        .budget-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--ink);
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s var(--spring);
        }

        .budget-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        .budget-slider::-moz-range-thumb {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--ink);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .slider-markers {
            display: flex;
            justify-content: space-between;
            margin-top: 0.75rem;
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            color: var(--slate);
        }

        /* Calc Actions */
        .calc-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: 3rem;
        }

        .btn-back {
            padding: 0.75rem 1.5rem;
            background: transparent;
            border: 1.5px solid var(--hairline);
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--ink);
            cursor: pointer;
            transition: all 0.4s var(--smooth);
        }

        .btn-back:hover {
            background: var(--hairline);
        }

        .btn-next {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            background: var(--ink);
            color: white;
            padding: 0.75rem 0.75rem 0.75rem 1.75rem;
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            border: none;
            cursor: pointer;
            transition: all 0.4s var(--spring);
        }

        .btn-next:hover:not(:disabled) {
            background: var(--accent);
        }

        .btn-next:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Final result */
        .calc-final {
            display: none;
        }

        .calc-final.active {
            display: block;
            animation: stepIn 0.6s var(--smooth);
        }

        .final-headline {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .final-price-shell {
            background: var(--ink);
            border-radius: 1.5rem;
            padding: 3rem 2rem;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .final-price-shell::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 20%, rgba(79, 107, 255, 0.2), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(79, 107, 255, 0.15), transparent 50%);
            pointer-events: none;
        }

        .final-label {
            position: relative;
            font-family: var(--font-mono);
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 1rem;
        }

        .final-price {
            position: relative;
            font-family: var(--font-display);
            font-size: clamp(3.5rem, 7vw, 5.5rem);
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.04em;
            margin-bottom: 0.75rem;
        }

        .final-price em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .final-recurrence {
            position: relative;
            font-size: 0.9375rem;
            color: rgba(255, 255, 255, 0.6);
        }

        /* Devis block (> 100k) */
        .final-devis-block {
            background: var(--ink);
            color: white;
            border-radius: 1.5rem;
            padding: 3rem 2.5rem;
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .final-devis-block::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 50% at 50% 0%, rgba(79, 107, 255, 0.25) 0%, transparent 60%);
            pointer-events: none;
        }

        .devis-icon {
            width: 3.5rem;
            height: 3.5rem;
            background: rgba(79, 107, 255, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            position: relative;
            color: var(--accent);
        }

        .devis-icon svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .devis-title {
            font-family: var(--font-display);
            font-size: 1.75rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            margin-bottom: 1rem;
            position: relative;
        }

        .devis-title em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .devis-desc {
            font-size: 0.9375rem;
            line-height: 1.65;
            color: rgba(255, 255, 255, 0.75);
            max-width: 520px;
            margin: 0 auto;
            position: relative;
        }

        /* Final breakdown enrichi */
        .final-breakdown {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.25rem;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .breakdown-section {
            padding: 1.25rem 0;
            border-bottom: 1px solid var(--hairline);
        }

        .breakdown-section:first-child {
            padding-top: 0;
        }

        .breakdown-section:last-of-type {
            border-bottom: none;
            padding-bottom: 0.5rem;
        }

        .breakdown-section-title {
            font-family: var(--font-mono);
            font-size: 0.625rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--slate);
            margin-bottom: 0.75rem;
        }

        .breakdown-row-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .breakdown-regie-item {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5rem 0.75rem;
            background: var(--canvas);
            border-radius: 0.5rem;
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--ink);
        }

        .breakdown-regie-item .platform-logo {
            width: 1.125rem;
            height: 1.125rem;
            flex-shrink: 0;
        }

        .breakdown-value-big {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: -0.025em;
        }

        .breakdown-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.375rem 0;
        }

        .breakdown-label {
            font-size: 0.875rem;
            color: var(--steel);
        }

        .breakdown-value {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--ink);
        }

        /* Tranches */
        .tranches-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 0.875rem;
        }

        .tranche-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 0.875rem;
            align-items: center;
            padding: 0.625rem 0.875rem;
            background: var(--canvas);
            border-radius: 0.5rem;
            font-size: 0.8125rem;
        }

        .tranche-row.inactive {
            opacity: 0.35;
        }

        .tranche-label {
            font-family: var(--font-mono);
            color: var(--slate);
            letter-spacing: 0.02em;
        }

        .tranche-calc {
            font-family: var(--font-mono);
            color: var(--steel);
            text-align: right;
            font-size: 0.75rem;
        }

        .tranche-result {
            font-family: var(--font-display);
            font-weight: 600;
            color: var(--ink);
            font-size: 0.875rem;
        }

        .tranches-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0.875rem;
            background: var(--accent-soft);
            border-radius: 0.5rem;
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--accent);
        }

        /* Total ligne mise en avant */
        .breakdown-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.25rem;
            margin-top: 1rem;
            background: var(--ink);
            border-radius: 0.875rem;
            color: white;
        }

        .breakdown-total-label {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
        }

        .breakdown-total-value {
            font-family: var(--font-display);
            font-size: 1.375rem;
            font-weight: 700;
            color: white;
            letter-spacing: -0.025em;
        }

        /* Minimum alert */
        .minimum-alert {
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-radius: 0.875rem;
            padding: 1rem 1.25rem;
            margin: -1rem 0 1.5rem;
            display: flex;
            gap: 0.875rem;
            align-items: flex-start;
        }

        .minimum-alert-icon {
            width: 1.25rem;
            height: 1.25rem;
            color: rgb(217, 119, 6);
            flex-shrink: 0;
            margin-top: 0.125rem;
        }

        .minimum-alert-icon svg {
            width: 100%;
            height: 100%;
        }

        .minimum-alert-content {
            flex: 1;
        }

        .minimum-alert-title {
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 600;
            color: rgb(146, 64, 14);
            margin-bottom: 0.25rem;
        }

        .minimum-alert-desc {
            font-size: 0.8125rem;
            line-height: 1.5;
            color: rgb(146, 64, 14);
        }

        .minimum-alert-desc span {
            font-weight: 600;
        }

        /* Inclus section */
        .inclus-block {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.25rem;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .inclus-title {
            font-family: var(--font-display);
            font-size: 0.8125rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ink);
            margin-bottom: 1.25rem;
        }

        .inclus-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.875rem;
        }

        .inclus-item {
            display: flex;
            align-items: start;
            gap: 0.625rem;
            font-size: 0.875rem;
            color: var(--steel);
            line-height: 1.5;
        }

        .inclus-check {
            width: 1rem;
            height: 1rem;
            flex-shrink: 0;
            color: var(--accent);
            margin-top: 0.1875rem;
        }

        .engagement-note {
            text-align: center;
            padding: 1rem;
            background: var(--accent-soft);
            border-radius: 0.875rem;
            font-size: 0.875rem;
            color: var(--ink);
            margin-bottom: 2rem;
        }

        .engagement-note strong {
            font-weight: 600;
        }

        .final-cta-wrap {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .btn-reset {
            padding: 0.875rem 1.25rem;
            background: transparent;
            border: 1.5px solid var(--hairline);
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--steel);
            cursor: pointer;
            transition: all 0.4s var(--smooth);
        }

        .btn-reset:hover {
            background: var(--hairline);
            color: var(--ink);
        }

        .btn-final-cta {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            background: var(--accent);
            color: white;
            padding: 0.875rem 0.875rem 0.875rem 1.75rem;
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            text-decoration: none;
            transition: all 0.4s var(--spring);
        }

        .btn-final-cta:hover {
            background: var(--accent-deep);
            transform: scale(1.02);
        }

        /* Prestations spécifiques (Setup / Audit) */
        .specific-services {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
            margin-top: 3rem;
        }

        .specific-card {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.75rem;
            padding: 2.25rem;
            box-shadow: var(--shadow-diffused);
            transition: all 0.6s var(--smooth);
            display: flex;
            flex-direction: column;
        }

        .specific-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-deep);
            border-color: rgba(79, 107, 255, 0.2);
        }

        .specific-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 1rem;
        }

        .specific-card h4 {
            font-family: var(--font-display);
            font-size: 1.375rem;
            font-weight: 600;
            color: var(--ink);
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        .specific-card h4 em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .devis-pill {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            padding: 0.375rem 0.75rem;
            border-radius: 999px;
            background: var(--accent-soft);
            color: var(--accent);
            letter-spacing: 0.05em;
            white-space: nowrap;
        }

        .specific-desc {
            font-size: 0.9375rem;
            line-height: 1.55;
            color: var(--steel);
            margin-bottom: 1.5rem;
            flex: 1;
        }

        .specific-meta {
            display: flex;
            gap: 1.5rem;
            padding-top: 1.25rem;
            border-top: 1px solid var(--hairline);
        }

        .specific-meta-item {
            display: flex;
            flex-direction: column;
        }

        .specific-meta-label {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--slate);
            margin-bottom: 0.25rem;
        }

        .specific-meta-value {
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--ink);
        }

        /* ============================================
           FAQ
           ============================================ */
        #faq {
            background: var(--canvas);
        }

        .faq-list {
            max-width: 820px;
            margin: 0 auto;
        }

        .faq-item {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.25rem;
            margin-bottom: 0.75rem;
            overflow: hidden;
            transition: all 0.4s var(--smooth);
        }

        .faq-item.active {
            border-color: rgba(79, 107, 255, 0.2);
            box-shadow: var(--shadow-soft);
        }

        .faq-q {
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            padding: 1.5rem 1.75rem;
            font-family: var(--font-display);
            font-size: 1.0625rem;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: -0.01em;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
        }

        .faq-icon {
            width: 1.75rem;
            height: 1.75rem;
            background: var(--canvas);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s var(--spring);
            flex-shrink: 0;
        }

        .faq-icon svg {
            width: 0.875rem;
            height: 0.875rem;
            transition: transform 0.4s var(--spring);
        }

        .faq-item.active .faq-icon {
            background: var(--accent);
            color: white;
        }

        .faq-item.active .faq-icon svg {
            transform: rotate(45deg);
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s var(--smooth);
        }

        .faq-item.active .faq-a {
            max-height: 300px;
        }

        .faq-a-inner {
            padding: 0 1.75rem 1.5rem;
            font-size: 0.9375rem;
            line-height: 1.65;
            color: var(--steel);
        }

        /* ============================================
           ABOUT - Éditorial narratif full-width
           ============================================ */
        #about {
            background: var(--canvas);
            position: relative;
            overflow: hidden;
            padding-bottom: clamp(3rem, 5vw, 5rem);
        }

        #about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 1000px;
            height: 100%;
            background:
                radial-gradient(ellipse 60% 50% at 50% 0%, rgba(79, 107, 255, 0.06) 0%, transparent 60%),
                radial-gradient(ellipse 40% 30% at 20% 80%, rgba(79, 107, 255, 0.03) 0%, transparent 60%);
            pointer-events: none;
        }

        .about-wrap {
            max-width: 1100px;
            margin: 0 auto;
        }

        .about-intro-block {
            text-align: center;
            max-width: 780px;
            margin: 0 auto 5rem;
        }

        .about-intro-block .eyebrow {
            margin-bottom: 1.5rem;
        }

        .about-intro-block h2 {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.04em;
            color: var(--ink);
            margin-bottom: 2rem;
        }

        .about-intro-block h2 em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .about-narrative {
            font-family: var(--font-display);
            font-size: 1.25rem;
            line-height: 1.65;
            color: var(--steel);
            max-width: 680px;
            margin: 0 auto;
        }

        .about-narrative strong {
            color: var(--ink);
            font-weight: 600;
        }

        /* Section header "Mon parcours en agence" */
        .timeline-h-header-section {
            text-align: center;
            margin-bottom: 3rem;
            margin-top: 4rem;
        }

        .timeline-h-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 0.875rem;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 999px;
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--steel);
            margin-bottom: 1.25rem;
        }

        .timeline-h-eyebrow-dot {
            width: 0.375rem;
            height: 0.375rem;
            background: var(--accent);
            border-radius: 50%;
        }

        .timeline-h-section-title {
            font-family: var(--font-display);
            font-size: clamp(1.875rem, 3.5vw, 2.5rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.035em;
            color: var(--ink);
            margin-bottom: 0.875rem;
        }

        .timeline-h-section-title em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .timeline-h-section-desc {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            color: var(--steel);
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Timeline horizontale */
        .timeline-h {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.75rem;
            margin-bottom: 2.5rem;
            position: relative;
        }

        .timeline-h-card {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.75rem;
            padding: 2.5rem 2rem;
            box-shadow: var(--shadow-diffused);
            transition: all 0.5s var(--smooth);
            position: relative;
            overflow: hidden;
            min-height: 19rem;
            display: flex;
            flex-direction: column;
        }

        .timeline-h-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 0%, rgba(79, 107, 255, 0.06), transparent 50%);
            opacity: 0;
            transition: opacity 0.5s var(--smooth);
            pointer-events: none;
        }

        .timeline-h-card:hover {
            transform: translateY(-6px);
            border-color: rgba(79, 107, 255, 0.2);
            box-shadow: var(--shadow-deep);
        }

        .timeline-h-card:hover::before {
            opacity: 1;
        }

        .timeline-h-card.current {
            background: var(--ink);
            border-color: var(--ink);
            color: white;
        }

        .timeline-h-card.current::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
        }

        .timeline-h-card.current::before {
            background: radial-gradient(circle at 50% 0%, rgba(79, 107, 255, 0.25), transparent 60%);
            opacity: 1;
        }

        .timeline-h-card:hover .timeline-h-arrow {
            transform: translateX(3px) translateY(-2px);
        }

        .timeline-h-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .timeline-h-period {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            color: var(--slate);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .timeline-h-card.current .timeline-h-period {
            color: rgba(255, 255, 255, 0.5);
        }

        .timeline-h-current-dot {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background: var(--accent);
            position: relative;
        }

        .timeline-h-current-dot::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: var(--accent);
            animation: dotPulse 2s ease-out infinite;
        }

        @keyframes dotPulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }

            100% {
                transform: scale(3);
                opacity: 0;
            }
        }

        .timeline-h-arrow {
            width: 1.25rem;
            height: 1.25rem;
            color: var(--slate);
            transition: transform 0.4s var(--spring);
        }

        .timeline-h-card.current .timeline-h-arrow {
            color: rgba(255, 255, 255, 0.4);
        }

        .timeline-h-name {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: -0.035em;
            line-height: 1.05;
            color: var(--ink);
            margin-bottom: 0.625rem;
        }

        .timeline-h-card.current .timeline-h-name {
            color: white;
        }

        .timeline-h-name em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .timeline-h-role {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--steel);
            letter-spacing: -0.005em;
            line-height: 1.5;
        }

        .timeline-h-card.current .timeline-h-role {
            color: rgba(255, 255, 255, 0.7);
        }

        /* Metrics dans les cards timeline - poussées en bas */
        .timeline-h-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            margin-top: auto;
            padding-top: 1.75rem;
            border-top: 1px solid var(--hairline);
        }

        .timeline-h-card.current .timeline-h-metrics {
            border-top-color: rgba(255, 255, 255, 0.12);
        }

        .timeline-h-metric {
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
        }

        .timeline-h-metric-value {
            font-family: var(--font-display);
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--ink);
            line-height: 1;
            letter-spacing: -0.025em;
        }

        .timeline-h-card.current .timeline-h-metric-value {
            color: white;
        }

        .timeline-h-metric-value em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .timeline-h-metric-label {
            font-family: var(--font-mono);
            font-size: 0.625rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--slate);
            line-height: 1.35;
        }

        .timeline-h-card.current .timeline-h-metric-label {
            color: rgba(255, 255, 255, 0.5);
        }

        /* Freelance Card - Premium Editorial */
        .freelance-card {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 2rem;
            padding: 0.5rem;
            box-shadow: var(--shadow-deep);
            position: relative;
            overflow: hidden;
            transition: all 0.5s var(--smooth);
            margin: 0 auto 1rem;
            max-width: 820px;
        }

        .freelance-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent) 0%, transparent 70%);
            z-index: 2;
        }

        .freelance-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 60% at 100% 100%, rgba(79, 107, 255, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 40% 40% at 0% 0%, rgba(79, 107, 255, 0.04) 0%, transparent 60%);
            pointer-events: none;
            border-radius: 2rem;
        }

        .freelance-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-deep), 0 20px 60px -20px rgba(79, 107, 255, 0.15);
        }

        .freelance-inner {
            background: var(--surface);
            border-radius: calc(2rem - 0.5rem);
            padding: 2.5rem 2.75rem;
            display: grid;
            grid-template-columns: 1.25fr 0.6fr 0.75fr;
            gap: 2.25rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .freelance-content {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .freelance-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 0.875rem;
            background: var(--accent-soft);
            border: 1px solid rgba(79, 107, 255, 0.15);
            border-radius: 999px;
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--accent);
            align-self: flex-start;
        }

        .freelance-badge-dot {
            width: 0.375rem;
            height: 0.375rem;
            background: var(--accent);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .freelance-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 4.5vw, 3.5rem);
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.04em;
            color: var(--ink);
        }

        .freelance-title em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .freelance-desc {
            font-family: var(--font-display);
            font-size: 1rem;
            line-height: 1.65;
            color: var(--steel);
            max-width: 420px;
        }

        /* La colonne du milieu : d'ou je travaille. Un freelance se voit
           demander sa localisation avant ses competences ; un point sur une
           carte repond plus vite qu'une phrase, et le pays autour dit le
           reste. */
        .freelance-lieu {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.15rem;
        }

        .freelance-carte {
            width: 100%;
            max-width: 8.5rem;
            margin-bottom: 0.65rem;
        }

        .freelance-contour {
            fill: rgba(79, 107, 255, 0.1);
            stroke: rgba(79, 107, 255, 0.55);
            stroke-width: 3;
            stroke-linejoin: round;
        }

        /* Une punaise plutot qu'un point, et le nom ecrit a cote : un disque
           de dix unites sur une France de 8 rem ne se lit pas comme une
           adresse. Meme traitement que le bloc « Qui je suis ». */
        .freelance-punaise {
            fill: var(--accent);
            stroke: var(--surface);
            stroke-width: 6;
            stroke-linejoin: round;
        }

        .freelance-oeil { fill: var(--surface); }

        .freelance-halo {
            fill: var(--accent);
            transform-box: fill-box;
            transform-origin: center;
            animation: freelance-halo 3.2s ease-out infinite;
        }

        @keyframes freelance-halo {
            0% { transform: scale(0.35); opacity: 0.32; }
            70% { transform: scale(1); opacity: 0; }
            100% { transform: scale(1); opacity: 0; }
        }

        .freelance-lieu-titre {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--ink);
        }

        .freelance-lieu-titre strong {
            color: var(--accent);
            font-weight: 650;
        }

        .freelance-lieu-texte {
            font-size: 0.78125rem;
            line-height: 1.5;
            color: var(--steel);
        }

        @media (prefers-reduced-motion: reduce) {
            .freelance-halo { animation: none; opacity: 0.14; }
        }

        .freelance-number {
            display: flex;
            align-items: center;
            gap: 1rem;
            justify-content: flex-end;
            padding-left: 1.75rem;
            border-left: 1px solid var(--hairline);
        }

        .freelance-number-big {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            font-size: clamp(4rem, 7vw, 5.5rem);
            line-height: 0.85;
            color: var(--accent);
            letter-spacing: -0.04em;
        }

        .freelance-number-label {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--slate);
            line-height: 1.4;
        }

        /* Crédentials footer */
        .about-credentials {
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: center;
            padding-top: 3rem;
            border-top: 1px solid var(--hairline);
            flex-wrap: wrap;
        }

        .google-partner-badge {
            display: inline-block;
            padding: 0;
            background: transparent;
            border-radius: 1.25rem;
            transition: all 0.4s var(--spring);
            text-decoration: none;
            line-height: 0;
        }

        .google-partner-badge img {
            width: 160px;
            height: auto;
            transition: transform 0.4s var(--spring);
        }

        .google-partner-badge:hover img {
            transform: scale(1.04);
        }

        .linkedin-link {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem 1rem 0.875rem 1.5rem;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: -0.01em;
            text-decoration: none;
            transition: all 0.4s var(--spring);
            box-shadow: var(--shadow-diffused);
        }

        .linkedin-link:hover {
            transform: translateY(-2px);
            border-color: #0077B5;
            color: #0077B5;
            box-shadow: var(--shadow-soft);
        }

        .linkedin-link-icon {
            width: 1.75rem;
            height: 1.75rem;
            background: #0077B5;
            color: white;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.4s var(--spring);
        }

        .linkedin-link:hover .linkedin-link-icon {
            transform: scale(1.08);
        }

        .linkedin-link-icon svg {
            width: 0.875rem;
            height: 0.875rem;
        }

        /* ============================================
           PROCESS - Timeline horizontale 4 étapes
           ============================================ */
        #process {
            background: var(--surface);
            position: relative;
            overflow: hidden;
        }

        .process-wrap {
            max-width: 1100px;
            margin: 0 auto;
        }

        .process-timeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            position: relative;
            margin-top: 1rem;
        }

        .process-timeline::before {
            content: '';
            position: absolute;
            top: 1.75rem;
            left: 12%;
            right: 12%;
            height: 2px;
            background: linear-gradient(to right,
                    var(--accent) 0%,
                    var(--accent) 25%,
                    var(--hairline) 60%,
                    var(--hairline) 100%);
            z-index: 0;
        }

        .process-step {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: 0 0.5rem;
        }

        .process-step-dot {
            width: 3.5rem;
            height: 3.5rem;
            margin: 0 auto 1.5rem;
            background: var(--surface);
            border: 2px solid var(--hairline);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--steel);
            transition: all 0.4s var(--spring);
            position: relative;
        }

        .process-step.active .process-step-dot {
            background: var(--ink);
            border-color: var(--ink);
            color: white;
            box-shadow:
                0 0 0 6px var(--surface),
                0 8px 24px -4px rgba(0, 0, 0, 0.2);
        }

        .process-step-phase {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            color: var(--accent);
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 0.75rem;
        }

        .process-step-title {
            font-family: var(--font-display);
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -0.015em;
            margin-bottom: 0.75rem;
            line-height: 1.25;
        }

        .process-step-title em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .process-step-desc {
            font-size: 0.8125rem;
            line-height: 1.55;
            color: var(--steel);
        }

        /* ============================================
           FREELANCE VS AGENCE - Comparatif Premium
           ============================================ */
        #comparison {
            background: var(--ink);
            color: white;
            position: relative;
            overflow: hidden;
        }

        #comparison::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 50% 40% at 80% 0%, rgba(79, 107, 255, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse 40% 30% at 20% 100%, rgba(79, 107, 255, 0.08) 0%, transparent 60%);
            pointer-events: none;
        }

        #comparison .section-header h2 {
            color: white;
        }

        #comparison .section-header p {
            color: rgba(255, 255, 255, 0.65);
        }

        #comparison .eyebrow {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: white;
        }

        /* ─── Le comparatif de l'accueil est la seule section sombre de ce
           composant. On retourne la palette au lieu de dupliquer le bloc.
           A surveiller a chaque refonte : la version claire donne un fond
           aux colonnes 1 et 3, et sans cette surcharge la colonne « En
           agence » est un pave blanc en plein milieu du noir. ─── */
        #comparison .vs-head.vs-c1,
        #comparison .vs-head.vs-c3,
        #comparison .vs-cell.vs-c1,
        #comparison .vs-cell.vs-c3 {
            background: rgba(255, 255, 255, 0.045);
            border-top-color: rgba(255, 255, 255, 0.09);
        }

        #comparison .vs-c1 { border-left-color: rgba(255, 255, 255, 0.1); }
        #comparison .vs-c3 { border-right-color: rgba(255, 255, 255, 0.1); }

        #comparison .vs-c1.is-last,
        #comparison .vs-c3.is-last { border-bottom-color: rgba(255, 255, 255, 0.1); }

        #comparison .vs-head.vs-c1 { color: rgba(255, 255, 255, 0.42); }
        #comparison .vs-head.vs-c3 { color: rgba(255, 255, 255, 0.6); }
        #comparison .vs-cell.vs-c1 { color: #fff; }
        #comparison .vs-cell.vs-c3 { color: rgba(255, 255, 255, 0.64); }

        /* La carte reste la piece eclairee du bloc : sur fond sombre c'est
           le bleu qui la fait avancer, pas l'ombre. */
        #comparison .vs-head.vs-c2,
        #comparison .vs-cell.vs-c2 {
            background: linear-gradient(180deg, rgba(79, 107, 255, 0.24) 0%,
                        rgba(79, 107, 255, 0.13) 100%);
            border-left-color: rgba(129, 152, 255, 0.42);
            border-right-color: rgba(129, 152, 255, 0.42);
            color: #fff;
            box-shadow: -26px 0 52px -26px rgba(79, 107, 255, 0.5),
                         26px 0 52px -26px rgba(79, 107, 255, 0.5);
        }

        #comparison .vs-head.vs-c2 {
            border-top-color: rgba(129, 152, 255, 0.42);
            box-shadow: 0 -20px 44px -24px rgba(79, 107, 255, 0.45),
                        -26px 0 52px -26px rgba(79, 107, 255, 0.5),
                         26px 0 52px -26px rgba(79, 107, 255, 0.5);
        }

        #comparison .vs-cell.vs-c2 { border-top-color: rgba(255, 255, 255, 0.11); }

        #comparison .vs-cell.vs-c2.is-last {
            border-bottom-color: rgba(129, 152, 255, 0.42);
            box-shadow: 0 28px 54px -28px rgba(79, 107, 255, 0.55),
                        -26px 0 52px -26px rgba(79, 107, 255, 0.5),
                         26px 0 52px -26px rgba(79, 107, 255, 0.5);
        }

        #comparison .vs-head-label em { color: #B8C4FF; }

        #comparison .vs-mark.is-no,
        #comparison .vs-mark.is-maybe {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.26);
            color: rgba(255, 255, 255, 0.78);
        }

        /* Le bouton s'inverse : encre sur fond clair, clair sur fond sombre. */
        #comparison .vs-cta { background: #fff; color: var(--ink); }
        #comparison .vs-cta:hover { background: var(--accent); color: #fff; }

        @media (max-width: 820px) {
            #comparison .vs {
                background: rgba(255, 255, 255, 0.04);
                border-color: rgba(255, 255, 255, 0.1);
            }

            #comparison .vs-cell.vs-c1,
            #comparison .vs-cell.vs-c2,
            #comparison .vs-cell.vs-c3 { background: transparent; }

            #comparison .vs-cell.vs-c1 { background: rgba(255, 255, 255, 0.06); }
            #comparison .vs-cell.vs-c2 { background: rgba(79, 107, 255, 0.16); }
            #comparison .vs-cell.vs-c2.is-last { background: transparent; }
        }


        /* ============================================
           CONTACT - Premium Split Layout
           ============================================ */
        #contact {
            background: var(--surface);
            position: relative;
            overflow: hidden;
        }

        #contact::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 70% 50% at 0% 0%, rgba(79, 107, 255, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(79, 107, 255, 0.04) 0%, transparent 50%);
            pointer-events: none;
        }

        .contact-split {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        /* LEFT SIDE — Context + Info */
        .contact-left {
            padding: 2rem 0;
        }

        .contact-intro {
            margin-bottom: 3rem;
        }

        .contact-intro h3 {
            font-family: var(--font-display);
            font-size: clamp(2rem, 4vw, 2.75rem);
            font-weight: 600;
            color: var(--ink);
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 1rem;
        }

        .contact-intro h3 em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .contact-intro p {
            font-size: 1.0625rem;
            line-height: 1.6;
            color: var(--steel);
        }

        /* Pourquoi me contacter */
        .contact-reasons {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            margin-bottom: 2.5rem;
        }

        .contact-reason {
            display: flex;
            gap: 1rem;
            padding: 1.25rem;
            background: var(--canvas);
            border: 1px solid var(--hairline);
            border-radius: 1rem;
            transition: all 0.4s var(--smooth);
        }

        .contact-reason:hover {
            border-color: rgba(79, 107, 255, 0.2);
            transform: translateX(4px);
        }

        .contact-reason-icon {
            width: 2.5rem;
            height: 2.5rem;
            flex-shrink: 0;
            background: var(--accent-soft);
            color: var(--accent);
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .contact-reason-icon svg {
            width: 1.125rem;
            height: 1.125rem;
            stroke-width: 1.75;
        }

        .contact-reason-text h4 {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 0.25rem;
            letter-spacing: -0.01em;
        }

        .contact-reason-text p {
            font-size: 0.875rem;
            color: var(--steel);
            line-height: 1.5;
        }

        /* Response time */
        .contact-response {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.25rem;
            background: var(--ink);
            color: white;
            border-radius: 999px;
            font-size: 0.875rem;
            font-weight: 500;
            width: fit-content;
        }

        .response-dot {
            width: 0.5rem;
            height: 0.5rem;
            background: #10B981;
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
            animation: pulse-dot 2s ease-in-out infinite;
        }

        @keyframes pulse-dot {

            0%,
            100% {
                box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
            }

            50% {
                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.1);
            }
        }

        /* RIGHT SIDE — Form Double Bezel */
        .contact-shell {
            background: var(--canvas);
            border: 1px solid var(--hairline);
            border-radius: 2rem;
            padding: 0.5rem;
            box-shadow: var(--shadow-deep);
        }

        .contact-inner {
            background: var(--surface);
            border-radius: calc(2rem - 0.5rem);
            padding: 2.5rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .form-row.full {
            grid-template-columns: 1fr;
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            position: relative;
        }

        .form-label {
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--steel);
            letter-spacing: -0.005em;
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .form-label .required {
            color: var(--accent);
            font-size: 0.6875rem;
        }

        .form-label-hint {
            color: var(--slate);
            font-weight: 400;
            font-size: 0.6875rem;
            margin-left: auto;
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 0.9375rem 1rem;
            background: var(--canvas);
            border: 1.5px solid transparent;
            border-radius: 0.75rem;
            font-family: var(--font-display);
            font-size: 0.9375rem;
            color: var(--ink);
            letter-spacing: -0.005em;
            transition: all 0.4s var(--smooth);
        }

        .form-input::placeholder,
        .form-textarea::placeholder {
            color: var(--slate);
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            background: var(--surface);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .form-input-wrap {
            position: relative;
        }

        .form-input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--slate);
            pointer-events: none;
            transition: color 0.3s var(--smooth);
        }

        .form-input-icon svg {
            width: 1rem;
            height: 1rem;
            stroke-width: 1.75;
        }

        .form-input-wrap .form-input,
        .form-input-wrap .form-select {
            padding-left: 2.75rem;
        }

        .form-input-wrap .form-input:focus~.form-input-icon,
        .form-input-wrap .form-select:focus~.form-input-icon {
            color: var(--accent);
        }

        .form-textarea {
            resize: vertical;
            min-height: 100px;
            font-family: var(--font-display);
        }

        /* Budget chip selector */
        .budget-chips {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }

        .budget-chip {
            position: relative;
        }

        .budget-chip input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .budget-chip label {
            display: block;
            padding: 0.75rem 0.5rem;
            background: var(--canvas);
            border: 1.5px solid transparent;
            border-radius: 0.625rem;
            font-family: var(--font-mono);
            font-size: 0.75rem;
            text-align: center;
            color: var(--steel);
            cursor: pointer;
            transition: all 0.3s var(--spring);
        }

        .budget-chip label:hover {
            border-color: var(--hairline);
            color: var(--ink);
        }

        .budget-chip input:checked+label {
            background: var(--ink);
            color: white;
            border-color: var(--ink);
        }

        .form-submit {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            background: var(--ink);
            color: white;
            padding: 1rem 1rem 1rem 2rem;
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            border: none;
            cursor: pointer;
            transition: all 0.4s var(--spring);
        }

        .form-submit:hover {
            background: var(--accent);
            transform: scale(1.01);
        }

        .form-footer {
            text-align: center;
            font-size: 0.75rem;
            color: var(--slate);
            margin-top: 1rem;
            line-height: 1.5;
        }

        .form-footer a {
            color: var(--ink);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* ============================================
           RETOURS DU FORMULAIRE (succes / erreur)
           ============================================ */
        .form-feedback {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            padding: 1.25rem 1.5rem;
            border-radius: 1rem;
            margin-bottom: 1.5rem;
            animation: feedbackSlide 0.5s cubic-bezier(0.32, 0.72, 0, 1);
        }

        @keyframes feedbackSlide {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-feedback-success {
            background: rgba(34, 197, 94, 0.08);
            border: 1px solid rgba(34, 197, 94, 0.25);
            color: #15803d;
        }

        .form-feedback-error {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.25);
            color: #b91c1c;
        }

        .form-feedback-icon {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .form-feedback-success .form-feedback-icon {
            background: rgba(34, 197, 94, 0.15);
        }

        .form-feedback-error .form-feedback-icon {
            background: rgba(239, 68, 68, 0.15);
        }

        .form-feedback-icon svg {
            width: 1.125rem;
            height: 1.125rem;
        }

        .form-feedback-content {
            flex: 1;
            min-width: 0;
        }

        .form-feedback-title {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 0.9375rem;
            margin-bottom: 0.25rem;
        }

        .form-feedback-text {
            font-size: 0.8125rem;
            line-height: 1.5;
            color: var(--ink-soft);
        }

        .form-feedback-error .form-feedback-text a {
            color: #b91c1c;
            font-weight: 500;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* Une fois le message parti, les champs disparaissent. Sans cette
           regle la carte se retasse sur la seule ligne de confirmation et
           donne l'impression d'un bloc casse plutot que d'un envoi reussi. */
        #contact-form.is-sent {
            display: grid;
            place-items: center;
            min-height: 15rem;
        }

        #contact-form.is-sent .form-feedback {
            margin-bottom: 0;
            width: 100%;
        }

        /* Bouton pendant l’envoi */
        .form-submit:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* ============================================
           FOOTER - Enrichi
           ============================================ */
        footer {
            background: var(--ink);
            color: rgba(255, 255, 255, 0.5);
            padding: 6rem 0 2.5rem;
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 40% at 50% 100%, rgba(79, 107, 255, 0.15) 0%, transparent 70%),
                radial-gradient(ellipse 40% 30% at 10% 20%, rgba(79, 107, 255, 0.05) 0%, transparent 60%);
            pointer-events: none;
        }

        .footer-hero {
            position: relative;
            text-align: center;
            max-width: 900px;
            margin: 0 auto 5rem;
        }

        .footer-headline {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 6vw, 5rem);
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.04em;
            color: white;
            margin-bottom: 2.5rem;
        }

        .footer-headline em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .footer-hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1rem 1rem 2rem;
            background: var(--accent);
            color: white;
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            text-decoration: none;
            transition: all 0.4s var(--spring);
        }

        .footer-hero-cta:hover {
            background: var(--accent-deep);
            transform: scale(1.02);
        }

        .footer-hero-cta-arrow {
            width: 2rem;
            height: 2rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s var(--spring);
        }

        .footer-hero-cta:hover .footer-hero-cta-arrow {
            transform: translateX(3px) translateY(-1px) scale(1.08);
            background: rgba(255, 255, 255, 0.3);
        }

        .footer-hero-cta-arrow svg {
            width: 0.875rem;
            height: 0.875rem;
        }

        .footer-grid {
            position: relative;
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
            gap: 2.75rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 2rem;
        }

        /* Le footer n'avait aucune declinaison responsive : 4 colonnes et
           4rem de gouttiere quelle que soit la largeur. Sous 1000px les
           gouttieres mangeaient la place, la colonne « Regies » etait tronquee
           et « Contact » sortait de l'ecran. Depuis le passage a 5 colonnes,
           le palier intermediaire evite d'ecraser les libelles longs du type
           « Consultant Microsoft Ads » entre 1000 et 1240px. */
        @media (max-width: 1240px) {
            .footer-grid {
                grid-template-columns: 1.3fr 1fr 1fr;
                gap: 2.75rem 2.25rem;
            }
        }

        @media (max-width: 1000px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2.75rem 2rem;
            }
            .footer-grid > .footer-col-brand { grid-column: 1 / -1; }
        }

        @media (max-width: 420px) {
            .footer-grid {
                gap: 2.25rem 1.25rem;
            }
        }

        .footer-col-brand {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        /* Les coordonnees ont rejoint la colonne de marque quand une cinquieme
           rubrique de liens a ete ajoutee. Un filet les separe des liens
           sociaux : sans lui, LinkedIn apparaissait deux fois de suite sans
           qu'on comprenne pourquoi. */
        .footer-brand-contact {
            display: flex;
            flex-direction: column;
            gap: 0.875rem;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .footer-logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: opacity 0.3s var(--smooth);
            background: white;
            border-radius: 0.875rem;
            padding: 0.625rem 0.875rem;
            width: fit-content;
        }

        .footer-logo:hover {
            opacity: 0.85;
        }

        .footer-logo img {
            height: 2rem;
            width: auto;
            display: block;
        }

        .footer-tagline {
            font-size: 0.875rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.55);
            max-width: 280px;
        }

        .footer-socials {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .footer-social {
            width: 2.25rem;
            height: 2.25rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: all 0.4s var(--spring);
        }

        .footer-social:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
            transform: translateY(-2px);
        }

        .footer-social svg {
            width: 0.9375rem;
            height: 0.9375rem;
        }

        .footer-col-title {
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 1.25rem;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            list-style: none;
        }

        .footer-links a {
            font-family: var(--font-display);
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            letter-spacing: -0.005em;
            transition: color 0.3s var(--smooth);
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
        }

        .footer-links a:hover {
            color: white;
        }

        .footer-links a .ext-icon {
            opacity: 0;
            transform: translateX(-4px);
            transition: all 0.3s var(--smooth);
            width: 0.75rem;
            height: 0.75rem;
        }

        .footer-links a:hover .ext-icon {
            opacity: 0.6;
            transform: translateX(0);
        }

        .footer-contact-item {
            font-family: var(--font-display);
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            letter-spacing: -0.005em;
            transition: color 0.3s var(--smooth);
            display: block;
            margin-bottom: 0.75rem;
        }

        .footer-contact-item:hover {
            color: white;
        }

        .footer-contact-label {
            font-family: var(--font-mono);
            font-size: 0.625rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 0.25rem;
            display: block;
        }

        .footer-bottom {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            padding-top: 1rem;
        }

        .footer-copy {
            font-size: 0.75rem;
            letter-spacing: 0.01em;
            color: rgba(255, 255, 255, 0.35);
        }

        .footer-legal {
            display: flex;
            gap: 1.5rem;
        }

        .footer-legal a {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.35);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-legal a:hover {
            color: rgba(255, 255, 255, 0.7);
        }

        /* ============================================
           HERO AVAILABILITY BADGE
           ============================================ */
        .hero-availability {
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5rem 0.875rem;
            background: rgba(34, 197, 94, 0.08);
            border: 1px solid rgba(34, 197, 94, 0.2);
            border-radius: 999px;
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgb(21, 128, 61);
            margin-top: 1rem;
        }

        .availability-dot {
            width: 0.4375rem;
            height: 0.4375rem;
            border-radius: 50%;
            background: rgb(34, 197, 94);
            position: relative;
        }

        .availability-dot::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: rgb(34, 197, 94);
            animation: availPulse 2s ease-out infinite;
        }

        @keyframes availPulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }

            100% {
                transform: scale(3);
                opacity: 0;
            }
        }

        /* ============================================
           RESPONSIVE
           ============================================ */
        /* La pilule de navigation portait huit entrees ; l'ajout de « Secteurs »
           la faisait deborder entre 768px (ou les liens disparaissent) et le
           grand ecran. On resserre la gouttiere et le rembourrage sur cette
           bande plutot que de masquer une rubrique. */
        @media (max-width: 1180px) {
            .nav-links { gap: 0.0625rem; }
            .nav-links a { padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
        }

        @media (max-width: 1100px) {

            .exp-card.large,
            .exp-card.medium,
            .exp-card.small {
                grid-column: span 3;
            }

            .result-card {
                flex: 0 0 calc((100% - 1.5rem) / 2);
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 1.25rem;
            }

            section {
                padding: 4rem 0;
            }

            #nav {
                top: 1rem;
                width: calc(100% - 2rem);
            }

            .nav-pill {
                padding: 0.5rem 0.5rem 0.5rem 1rem;
                gap: 0.75rem;
                justify-content: space-between;
            }

            .nav-links {
                display: none;
            }

            .nav-logo {
                border-right: none;
                padding-right: 0;
            }

            /* About mobile */
            .about-intro-block {
                margin-bottom: 3rem;
            }

            .timeline-h {
                grid-template-columns: 1fr;
                gap: 1rem;
                margin-bottom: 2.5rem;
            }

            .timeline-h-card {
                padding: 1.5rem;
            }

            .timeline-h-name {
                font-size: 1.5rem;
            }

            /* Freelance card responsive */
            .freelance-inner {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 2rem;
                text-align: center;
            }

            .freelance-badge {
                align-self: center;
            }

            .freelance-content {
                align-items: center;
            }

            .freelance-desc {
                text-align: center;
            }

            .freelance-number {
                justify-content: center;
                padding-left: 0;
                padding-top: 2rem;
                border-left: none;
                border-top: 1px solid var(--hairline);
                flex-direction: row;
            }

            /* Empilee, la colonne du lieu a besoin du meme filet que le
               chiffre : sans lui, les trois blocs se touchent. */
            .freelance-lieu {
                padding-top: 2rem;
                border-top: 1px solid var(--hairline);
            }

            /* Process mobile - stack vertical */
            .process-timeline {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .process-timeline::before {
                left: 1.75rem;
                top: 3.5rem;
                bottom: 3.5rem;
                right: auto;
                width: 2px;
                height: auto;
                background: linear-gradient(to bottom,
                        var(--accent) 0%,
                        var(--accent) 25%,
                        var(--hairline) 60%,
                        var(--hairline) 100%);
            }

            .process-step {
                text-align: left;
                display: grid;
                grid-template-columns: 3.5rem 1fr;
                gap: 1rem;
                padding: 0;
            }

            .process-step-dot {
                margin: 0;
            }

            .process-step-content {
                padding-top: 0.5rem;
            }


            .hero-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .hero-visual {
                max-width: 340px;
                margin: 0 auto;
            }

            .float-badge {
                position: static;
                display: inline-flex;
                margin: 0.5rem;
                animation: none;
            }

            .hero-stats {
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
            }

            .hero-stats .stat-block:last-child {
                grid-column: span 2;
            }

            .expertise-bento {
                grid-template-columns: 1fr;
            }

            .exp-card.large,
            .exp-card.medium,
            .exp-card.small {
                grid-column: span 1;
            }

            .result-card {
                flex: 0 0 100%;
            }

            .tabs {
                width: 100%;
            }

            .tab {
                flex: 1;
                justify-content: center;
                padding: 0.625rem 0.75rem;
                font-size: 0.75rem;
            }

            .carousel-controls {
                flex-direction: column;
                gap: 1.25rem;
                align-items: stretch;
            }

            .carousel-info {
                justify-content: space-between;
            }

            .carousel-buttons {
                justify-content: center;
            }

            .platforms-grid {
                grid-template-columns: 1fr 1fr;
            }

            .calc-inner {
                padding: 2rem 1.5rem;
            }

            .contact-inner {
                padding: 2rem 1.5rem;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .specific-services {
                grid-template-columns: 1fr;
            }

            .hero-cta-row {
                flex-direction: column;
                align-items: stretch;
            }

            .btn-primary {
                justify-content: space-between;
            }

            .inclus-list {
                grid-template-columns: 1fr;
            }

            .footer-main {
                font-size: 2rem;
            }

            .contact-split {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
           COOKIE BANNER & SETTINGS
           ============================================ */
        .cookie-banner {
            position: fixed;
            bottom: 1.5rem;
            left: 1.5rem;
            right: 1.5rem;
            z-index: 10000;
            max-width: 460px;
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
            transition: opacity 0.5s var(--smooth), transform 0.5s var(--smooth);
        }

        .cookie-banner.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .cookie-banner-inner {
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.25rem;
            box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.18), 0 8px 24px -8px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .cookie-content {
            padding: 1.5rem 1.75rem 1.75rem;
        }

        .cookie-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-mono);
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--accent);
            margin-bottom: 0.75rem;
            font-weight: 500;
        }

        .cookie-eyebrow svg {
            width: 0.875rem;
            height: 0.875rem;
        }

        .cookie-eyebrow-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
        }

        .cookie-title {
            font-family: var(--font-display);
            font-size: 1.375rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            color: var(--ink);
            line-height: 1.2;
            margin-bottom: 0.75rem;
        }

        .cookie-title em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .cookie-description {
            font-size: 0.875rem;
            color: var(--steel);
            line-height: 1.6;
            margin-bottom: 1.25rem;
        }

        .cookie-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .cookie-btn {
            font-family: var(--font-display);
            font-size: 0.8125rem;
            font-weight: 500;
            padding: 0.625rem 1rem;
            border-radius: 0.625rem;
            border: 1px solid var(--hairline);
            background: transparent;
            color: var(--ink);
            cursor: pointer;
            transition: all 0.3s var(--spring);
            line-height: 1;
        }

        .cookie-btn-primary {
            background: var(--ink);
            color: white;
            border-color: var(--ink);
            flex: 1;
            min-width: fit-content;
        }

        .cookie-btn-primary:hover {
            background: var(--accent);
            border-color: var(--accent);
            transform: translateY(-1px);
        }

        .cookie-btn-secondary {
            background: var(--canvas);
            color: var(--ink);
        }

        .cookie-btn-secondary:hover {
            background: var(--whisper);
        }

        .cookie-btn-ghost {
            background: transparent;
            color: var(--steel);
            border-color: transparent;
        }

        .cookie-btn-ghost:hover {
            color: var(--ink);
            background: var(--canvas);
        }

        .cookie-links {
            font-size: 0.75rem;
            color: var(--steel);
        }

        .cookie-links a {
            color: var(--steel);
            text-decoration: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
            transition: color 0.25s var(--spring), border-color 0.25s var(--spring);
        }

        .cookie-links a:hover {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        /* Settings modal */
        .cookie-settings {
            position: fixed;
            inset: 0;
            z-index: 10001;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s var(--smooth);
        }

        .cookie-settings.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .cookie-settings-overlay {
            position: absolute;
            inset: 0;
            background: rgba(24, 24, 27, 0.5);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .cookie-settings-panel {
            position: relative;
            max-width: 540px;
            margin: 5vh auto;
            background: var(--surface);
            border-radius: 1.5rem;
            padding: 2.5rem 2rem 2rem;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.25);
            transform: scale(0.96);
            transition: transform 0.5s var(--spring);
        }

        .cookie-settings.visible .cookie-settings-panel {
            transform: scale(1);
        }

        .cookie-settings-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 2rem;
            height: 2rem;
            border: none;
            background: var(--canvas);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--steel);
            transition: all 0.25s var(--spring);
        }

        .cookie-settings-close:hover {
            background: var(--ink);
            color: white;
            transform: rotate(90deg);
        }

        .cookie-settings-close svg {
            width: 1rem;
            height: 1rem;
        }

        .cookie-settings-header {
            margin-bottom: 1.5rem;
        }

        .cookie-settings-title {
            font-family: var(--font-display);
            font-size: 1.625rem;
            font-weight: 600;
            letter-spacing: -0.025em;
            color: var(--ink);
            line-height: 1.2;
            margin-bottom: 0.75rem;
        }

        .cookie-settings-title em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .cookie-settings-desc {
            font-size: 0.875rem;
            color: var(--steel);
            line-height: 1.6;
        }

        .cookie-category {
            background: var(--canvas);
            border-radius: 0.875rem;
            padding: 1.25rem;
            margin-bottom: 0.75rem;
        }

        .cookie-category-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.5rem;
        }

        .cookie-category-name {
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 0.2rem;
        }

        .cookie-category-tag {
            font-family: var(--font-mono);
            font-size: 0.625rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--steel);
        }

        .cookie-category-desc {
            font-size: 0.8125rem;
            color: var(--steel);
            line-height: 1.55;
            margin: 0;
        }

        .cookie-toggle-wrap {
            cursor: pointer;
            display: block;
            flex-shrink: 0;
        }

        .cookie-toggle-input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .cookie-toggle {
            width: 2.5rem;
            height: 1.375rem;
            background: #D4D4D8;
            border-radius: 999px;
            position: relative;
            transition: background 0.3s var(--spring);
        }

        .cookie-toggle-dot {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 1.125rem;
            height: 1.125rem;
            background: white;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s var(--spring);
        }

        .cookie-toggle-input:checked+.cookie-toggle {
            background: var(--accent);
        }

        .cookie-toggle-input:checked+.cookie-toggle .cookie-toggle-dot {
            transform: translateX(1.125rem);
        }

        .cookie-toggle-disabled {
            background: var(--accent);
            opacity: 0.4;
        }

        .cookie-toggle-disabled .cookie-toggle-dot {
            transform: translateX(1.125rem);
        }

        .cookie-settings-footer {
            display: flex;
            gap: 0.625rem;
            padding-top: 1.25rem;
            margin-top: 0.5rem;
            border-top: 1px solid var(--hairline);
        }

        .cookie-settings-footer .cookie-btn {
            flex: 1;
        }

        /* Bouton flottant de réouverture */
        .cookie-reopen {
            position: fixed;
            bottom: 1.5rem;
            left: 1.5rem;
            width: 2.75rem;
            height: 2.75rem;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 50%;
            cursor: pointer;
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            color: var(--steel);
            box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
            transition: all 0.3s var(--spring);
        }

        .cookie-reopen.visible {
            display: flex;
        }

        .cookie-reopen:hover {
            color: var(--accent);
            border-color: var(--accent);
            transform: scale(1.1);
        }

        .cookie-reopen svg {
            width: 1.125rem;
            height: 1.125rem;
        }

        @media (max-width: 640px) {
            .cookie-banner {
                left: 0.75rem;
                right: 0.75rem;
                bottom: 0.75rem;
            }

            .cookie-content {
                padding: 1.25rem;
            }

            .cookie-title {
                font-size: 1.25rem;
            }

            .cookie-actions {
                flex-direction: column;
            }

            .cookie-btn {
                width: 100%;
            }

            .cookie-settings-panel {
                margin: 0;
                border-radius: 1.25rem 1.25rem 0 0;
                padding: 2rem 1.25rem 1.5rem;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                max-height: 85vh;
            }

            .cookie-settings.visible .cookie-settings-panel {
                transform: translateY(0);
            }

            .cookie-settings-panel {
                transform: translateY(30px);
            }

            .cookie-settings-footer {
                flex-direction: column;
            }

            .cookie-reopen {
                bottom: 1rem;
                left: 1rem;
            }
        }
    

        /* ══════════════════════════════════════════════════════════════
           BANDEAU DE CONVERSION

           Barre collante en bas de fenetre. Absente au chargement, elle
           monte des que le visiteur descend et s'efface quand le
           formulaire de contact arrive a l'ecran.

           Tous les champs sont visibles d'emblee : le depliant precedent
           demandait un clic de plus et se pretait mal au mobile.

           Elle ne poste pas elle-meme : une seule soumission part, celle du
           formulaire principal. Le bandeau le preremplit, y amene le visiteur
           et lui annonce ce qu'il reste a completer.

           Le CSS vit ici plutot que dans pages.css : la home l'utilise
           aussi, et le generateur l'extrait pour les pages d'expertises.
           ══════════════════════════════════════════════════════════════ */
        .cta-dock {
            position: fixed;
            left: 50%;
            bottom: 1.25rem;
            z-index: 90;
            width: min(66rem, calc(100% - 2rem));
            transform: translateX(-50%) translateY(140%);
            opacity: 0;
            transition: transform 0.55s var(--spring), opacity 0.35s var(--smooth);
            will-change: transform;
        }

        .cta-dock.is-in {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .cta-dock-inner {
            position: relative;
            display: block;
            padding: 0.7rem 0.85rem 0.85rem;
            background: rgba(24, 24, 27, 0.92);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.15rem;
            box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        /* ─── Ligne de tete : l'accroche a sa propre ligne ───
           Elle etait auparavant collee devant le champ « Budget mensuel ». */
        .cta-dock-head {
            display: flex;
            align-items: baseline;
            gap: 0.75rem;
            padding: 0 0.15rem 0.6rem;
        }

        .cta-dock-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            flex: 0 0 auto;
            font-family: var(--font-mono);
            font-size: 0.5938rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
            white-space: nowrap;
        }

        .cta-dock-pulse {
            width: 0.375rem;
            height: 0.375rem;
            border-radius: 50%;
            background: #4ADE80;
            animation: dockPulse 2.4s var(--smooth) infinite;
        }

        @keyframes dockPulse {
            0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
            70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
            100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
        }

        .cta-dock-title {
            flex: 1 1 auto;
            min-width: 0;
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            color: #fff;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cta-dock-title em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
        }

        /* ─── Grille des champs : deux rangees de six colonnes ─── */
        .cta-dock-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.45rem;
        }

        .cta-dock-field { position: relative; }
        .cta-dock-msg { grid-column: span 4; }
        .cta-dock-submit { grid-column: span 2; }

        .cta-dock-select,
        .cta-dock-input {
            width: 100%;
            font-family: var(--font-display);
            font-size: 0.8125rem;
            color: #fff;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0.65rem;
            padding: 0.5rem 0.7rem;
            transition: border-color 0.3s var(--smooth), background 0.3s var(--smooth);
        }

        .cta-dock-select {
            appearance: none;
            -webkit-appearance: none;
            padding-right: 1.75rem;
            cursor: pointer;
        }

        .cta-dock-select option {
            color: var(--ink);
            background: #fff;
        }

        .cta-dock-input::placeholder { color: rgba(255, 255, 255, 0.4); }

        /* Le seul champ obligatoire se signale discretement. */
        .cta-dock-req { border-color: rgba(255, 255, 255, 0.22); }

        .cta-dock-select:focus,
        .cta-dock-input:focus {
            outline: none;
            border-color: var(--accent);
            background: rgba(79, 107, 255, 0.14);
        }

        .cta-dock-input.is-invalid {
            border-color: #F87171;
            background: rgba(248, 113, 113, 0.12);
            animation: dockShake 0.4s var(--smooth);
        }

        @keyframes dockShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
        }

        .cta-dock-caret {
            position: absolute;
            right: 0.65rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: rgba(255, 255, 255, 0.5);
        }

        .cta-dock-caret svg { width: 0.7rem; height: 0.7rem; display: block; }

        /* ─── Envoi ───
           Icone d'envoi plutot que fleche diagonale : la fleche suggerait
           un depart vers une autre page. */
        .cta-dock-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-family: var(--font-display);
            font-size: 0.8125rem;
            font-weight: 650;
            letter-spacing: -0.01em;
            color: var(--ink);
            background: #fff;
            border: 0;
            border-radius: 0.65rem;
            padding: 0.5rem 0.9rem;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s var(--smooth);
        }

        .cta-dock-submit:hover { background: var(--accent); color: #fff; }
        .cta-dock-submit-icon { display: inline-flex; }
        .cta-dock-submit-icon svg { width: 0.85rem; height: 0.85rem; display: block; }

        /* Confirmation d'envoi : elle ne s'ajoute pas au formulaire, elle
           prend toute la place du bandeau. L'en-tete et la grille sont
           masques, sans quoi le visiteur continuait de lire « Parlons de
           votre projet » au-dessus d'un message lui disant que son projet
           est deja parti. */
        .cta-dock-inner.is-done {
            grid-template-columns: 1fr;
            justify-items: center;
            padding-top: 1.15rem;
            padding-bottom: 1.15rem;
        }

        .cta-dock-done {
            display: flex;
            align-items: center;
            gap: 1rem;
            max-width: 46rem;
            margin: 0 auto;
        }

        .cta-dock-done-badge {
            flex-shrink: 0;
            width: 2.35rem;
            height: 2.35rem;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            box-shadow: 0 0 0 6px rgba(79, 107, 255, 0.18);
        }

        .cta-dock-done-badge svg { width: 1.1rem; height: 1.1rem; display: block; }

        .cta-dock-done-text {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            line-height: 1.4;
        }

        .cta-dock-done-text strong {
            font-size: 0.95rem;
            font-weight: 600;
            color: #fff;
            letter-spacing: -0.01em;
        }

        .cta-dock-done-text span {
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.62);
        }

        .cta-dock-done-close {
            margin-left: 0.65rem;
            flex-shrink: 0;
            font-family: var(--font-display);
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.6);
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            padding: 0.38rem 0.9rem;
            cursor: pointer;
            transition: color 0.3s var(--smooth), border-color 0.3s var(--smooth),
                        background 0.3s var(--smooth);
        }

        .cta-dock-done-close:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.38);
            background: rgba(255, 255, 255, 0.08);
        }

        /* Le trace de la coche se dessine, plutot que d'apparaitre : c'est
           le seul mouvement de tout le bandeau, et il dit « c'est fait »
           mieux qu'une icone posee la. Rejoue uniquement apres un envoi
           reel, jamais a la restauration depuis sessionStorage. */
        .cta-dock-done.is-anim .cta-dock-done-badge {
            animation: dockDoneBadge 0.5s var(--spring) both;
        }

        .cta-dock-done.is-anim .cta-dock-done-check {
            stroke-dasharray: 26;
            stroke-dashoffset: 26;
            animation: dockDoneCheck 0.45s var(--smooth) 0.18s forwards;
        }

        .cta-dock-done.is-anim .cta-dock-done-text {
            animation: dockDoneText 0.45s var(--smooth) 0.1s both;
        }

        @keyframes dockDoneBadge {
            from { transform: scale(0.4); opacity: 0; }
            to   { transform: scale(1); opacity: 1; }
        }

        @keyframes dockDoneCheck {
            to { stroke-dashoffset: 0; }
        }

        @keyframes dockDoneText {
            from { opacity: 0; transform: translateX(-6px); }
            to   { opacity: 1; transform: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .cta-dock-done.is-anim .cta-dock-done-badge,
            .cta-dock-done.is-anim .cta-dock-done-check,
            .cta-dock-done.is-anim .cta-dock-done-text {
                animation: none;
            }
            .cta-dock-done.is-anim .cta-dock-done-check { stroke-dashoffset: 0; }
        }

        .cta-dock-erreur {
            grid-column: 1 / -1;
            margin: 0.55rem 0 0;
            font-size: 0.78rem;
            line-height: 1.4;
            color: #ffd7d7;
        }

        .cta-dock-inner.is-sending .cta-dock-submit {
            opacity: 0.6;
            pointer-events: none;
        }

        @media (max-width: 640px) {
            .cta-dock-done { gap: 0.75rem; }
            .cta-dock-done-close { margin-left: 0; }
            .cta-dock-done-text strong { font-size: 0.88rem; }
            .cta-dock-done-text span { font-size: 0.76rem; }
        }

        .cta-dock-close {
            position: absolute;
            top: 0.45rem;
            right: 0.5rem;
            width: 1.5rem;
            height: 1.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: 0;
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s var(--smooth);
        }

        .cta-dock-close svg { width: 0.7rem; height: 0.7rem; }
        .cta-dock-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

        /* ─── Message d'accueil sur le formulaire prerempli ───
           Le visiteur doit comprendre pourquoi il atterrit ici et ce qu'il
           lui reste a faire. */
        .form-relay {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            margin: 0 0 1.5rem;
            padding: 0.9rem 1.1rem;
            background: var(--accent-soft);
            border: 1px solid rgba(79, 107, 255, 0.25);
            border-radius: 0.9rem;
            font-size: 0.9375rem;
            line-height: 1.55;
            color: var(--ink);
            animation: dockGrow 0.4s var(--smooth) both;
        }

        @keyframes dockGrow {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-relay-dot {
            flex: 0 0 1.4rem;
            height: 1.4rem;
            margin-top: 0.05rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
        }

        .form-relay-dot svg { width: 0.75rem; height: 0.75rem; }
        .form-relay strong { font-weight: 650; }

        @media (max-width: 1080px) {
            .cta-dock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .cta-dock-msg { grid-column: span 2; }
            .cta-dock-submit { grid-column: span 2; }
        }

        @media (max-width: 760px) {
            .cta-dock {
                bottom: 0.6rem;
                width: calc(100% - 1.2rem);
            }

            .cta-dock-inner { padding: 0.6rem 0.6rem 0.7rem; border-radius: 1rem; }
            .cta-dock-head { padding-bottom: 0.5rem; gap: 0.5rem; flex-wrap: wrap; }
            .cta-dock-title { font-size: 0.8125rem; }
            .cta-dock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
            .cta-dock-msg { grid-column: span 2; }
            .cta-dock-submit { grid-column: span 2; padding: 0.6rem 0.9rem; }

            .cta-dock-select,
            .cta-dock-input { font-size: 0.8125rem; padding: 0.55rem 0.65rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .cta-dock { transition: opacity 0.2s linear; }
            .cta-dock-pulse { animation: none; }
            .form-relay { animation: none; }
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

    
        /* ══════════════════════════════════════════════════════════════
           FORMULAIRES — reprise

           Les champs avaient un fond gris et une bordure transparente :
           dans un site ou tout est carte blanche a filet fin, ils sortaient
           du langage visuel et se lisaient comme des champs desactives.

           Ils reprennent donc la meme facture que les cartes : surface
           blanche, filet net, coin large, ombre interieure discrete. Les
           intitules passent en micro-label mono, comme les surtitres du
           site, et l'asterisque devient un point d'accent.
           ══════════════════════════════════════════════════════════════ */
        .form-input,
        .form-select,
        .form-textarea {
            background: var(--surface);
            border: 1.5px solid var(--hairline);
            border-radius: 0.85rem;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
            transition: border-color 0.3s var(--smooth), box-shadow 0.3s var(--smooth), background 0.3s var(--smooth);
        }

        .form-input:hover:not(:focus),
        .form-select:hover:not(:focus),
        .form-textarea:hover:not(:focus) {
            border-color: rgba(0, 0, 0, 0.14);
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            background: var(--surface);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        /* Intitules : meme facture que les surtitres du site. */
        .form-label {
            font-family: var(--font-mono);
            font-size: 0.625rem;
            font-weight: 400;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: var(--slate);
        }

        /* L'asterisque rouge devient un point d'accent : moins agressif,
           et coherent avec les pastilles du reste du site. */
        .form-label .required {
            width: 0.3rem;
            height: 0.3rem;
            border-radius: 50%;
            background: var(--accent);
            display: inline-block;
            font-size: 0;
            margin-left: 0.35rem;
            vertical-align: middle;
        }

        .form-label-hint {
            font-family: var(--font-mono);
            font-size: 0.5625rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--slate);
            background: var(--canvas);
            border: 1px solid var(--hairline);
            border-radius: 999px;
            padding: 0.15rem 0.5rem;
            margin-left: auto;
        }

        /* ─── Chips de budget ───
           Elles se lisaient comme des etiquettes inertes. Elles doivent
           avoir l'air cliquables, et l'etat choisi doit sauter aux yeux. */
        .budget-chip label {
            background: var(--surface);
            border: 1.5px solid var(--hairline);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
            transition: all 0.3s var(--spring);
        }

        .budget-chip label:hover {
            border-color: rgba(79, 107, 255, 0.35);
            background: var(--accent-soft);
            color: var(--ink);
        }

        .budget-chip input:checked+label {
            background: var(--ink);
            border-color: var(--ink);
            color: #fff;
            box-shadow: var(--shadow-soft);
        }

        .budget-chip input:focus-visible+label {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* ─── Respiration ───
           Six rangees de champs a la suite se lisaient comme un mur. Un
           filet separe l'identite du projet. */

        .form-submit {
            border-radius: 999px;
            box-shadow: var(--shadow-soft);
        }

        .form-submit:hover {
            box-shadow: var(--shadow-deep);
        }

    



        /* ══════════════════════════════════════════════════════════════
           COMPARATIF

           La version precedente etait lisible mais plate : « c'est tres
           simple, aucune complexite ». Un tableau a plat ne peut pas avoir
           de relief, quelle que soit sa peinture.

           Ici la colonne de Théo n'est plus une colonne. C'est une carte
           surelevee qui deborde la grille en haut et en bas, posee
           par-dessus le tableau de reference : le dispositif de la formule
           mise en avant d'une grille tarifaire, applique a une comparaison.
           Elle porte la signature du site (serif italique sur l'accent) et
           se termine par un bouton, donc elle sert a quelque chose au lieu
           de seulement decorer.

           Pas de conteneur unique avec overflow:hidden : il rognerait la
           carte. Le cadre du tableau est porte par les cellules elles-memes
           (bordures et rayons via is-first / is-last), ce qui laisse la
           carte deborder librement.
           ══════════════════════════════════════════════════════════════ */
        .section-versus {
            padding: clamp(3.25rem, 5.5vw, 5rem) 0;
            background: var(--canvas);
        }

        .vs {
            max-width: 62rem;
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(9.5rem, 0.85fr) minmax(0, 1fr) minmax(0, 1fr);
            position: relative;
        }

        /* ─── Le tableau de reference : criteres + colonne d'en face ─── */
        .vs-head.vs-c1,
        .vs-head.vs-c3,
        .vs-cell.vs-c1,
        .vs-cell.vs-c3 {
            background: var(--surface);
            border-top: 1px solid var(--hairline);
        }

        .vs-c1 { border-left: 1px solid var(--hairline); }
        .vs-c3 { border-right: 1px solid var(--hairline); }

        .vs-c1.is-first { border-top-left-radius: 1.35rem; }
        .vs-c3.is-first { border-top-right-radius: 1.35rem; }
        .vs-c1.is-last { border-bottom-left-radius: 1.35rem; }
        .vs-c3.is-last { border-bottom-right-radius: 1.35rem; }

        /* Les rangees vides qui ferment le cadre de part et d'autre du
           bouton : pas de contenu, seulement une hauteur. */
        .vs-c1.is-last,
        .vs-c3.is-last {
            border-bottom: 1px solid var(--hairline);
            min-height: 3.9rem;
        }

        /* ─── En-tetes ─── */
        .vs-head {
            font-size: 0.9688rem;
            font-weight: 600;
            line-height: 1.3;
            padding: 1.15rem 1.35rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .vs-head.vs-c3 { color: #52525B; }

        /* Micro-libelle : il nomme l'axe sans rivaliser avec les deux camps. */
        .vs-head.vs-c1 {
            font-family: var(--font-mono);
            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: var(--slate);
        }

        /* ─── La carte surelevee ─── */
        .vs-head.vs-c2,
        .vs-cell.vs-c2 {
            background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
            border-left: 1px solid rgba(79, 107, 255, 0.24);
            border-right: 1px solid rgba(79, 107, 255, 0.24);
            /* Les ombres laterales de chaque cellule se recouvrent et
               forment un halo continu le long de la carte. */
            box-shadow: -22px 0 44px -26px rgba(43, 62, 168, 0.45),
                         22px 0 44px -26px rgba(43, 62, 168, 0.45);
        }

        .vs-head.vs-c2 {
            font-size: 1.0625rem;
            letter-spacing: -0.012em;
            /* Le debord en haut : c'est lui qui fait la carte. */
            position: relative;
            overflow: hidden;
            margin-top: -1.35rem;
            padding: 2.6rem 1.35rem 1.15rem;
            border-top: 1px solid rgba(79, 107, 255, 0.24);
            border-radius: 1.35rem 1.35rem 0 0;
            color: var(--ink);
            font-weight: 620;
            box-shadow: 0 -18px 40px -24px rgba(43, 62, 168, 0.4),
                        -22px 0 44px -26px rgba(43, 62, 168, 0.45),
                         22px 0 44px -26px rgba(43, 62, 168, 0.45);
        }

        .vs-cell.vs-c2.is-last {
            margin-bottom: -1.35rem;
            border-bottom: 1px solid rgba(79, 107, 255, 0.24);
            border-radius: 0 0 1.35rem 1.35rem;
            padding: 1.15rem 1.35rem 1.5rem;
            box-shadow: 0 26px 48px -28px rgba(43, 62, 168, 0.5),
                        -22px 0 44px -26px rgba(43, 62, 168, 0.45),
                         22px 0 44px -26px rgba(43, 62, 168, 0.45);
        }

        /* Comparatif neutre : deux regies dont aucune n'a tort. La carte
           reste, la couronne aussi, mais sans bouton ni marques : ce n'est
           pas un argumentaire, c'est une mise en regard. Le generateur ne
           produit alors pas de rangee de pied et pose `is-last` sur la
           derniere ligne de donnees, donc rien de particulier a faire ici :
           les regles is-last existantes ferment le cadre.
           La seule correction : cette ligne porte du texte, pas un bouton,
           donc elle n'a pas besoin du surcroit de padding du pied. */
        .vs.is-neutral .vs-cell.is-last { padding-bottom: 1.15rem; }
        .vs.is-neutral .vs-cell.vs-c2.is-last { padding-bottom: 1.6rem; }

        /* Le liseré accent, pose a l'interieur du rayon de la carte. */
        .vs-crown {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 0.1875rem;
            background: linear-gradient(90deg, rgba(107, 132, 255, 0) 0%, #6B84FF 18%,
                        var(--accent) 50%, #3550D9 82%, rgba(53, 80, 217, 0) 100%);
        }

        /* La signature du site : italique serif sur le mot accentue. */
        .vs-head-label em {
            font-family: var(--font-editorial);
            font-style: italic;
            font-weight: 400;
            font-size: 1.18em;
            color: var(--accent);
            letter-spacing: 0;
        }

        /* ─── Cellules ─── */
        .vs-cell {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            padding: 1.05rem 1.35rem;
            font-size: 0.9375rem;
            line-height: 1.5;
        }

        .vs-cell.vs-c1 {
            color: var(--ink);
            font-weight: 560;
            align-items: center;
        }

        .vs-cell.vs-c2 {
            color: var(--ink);
            font-weight: 560;
            border-top: 1px solid rgba(79, 107, 255, 0.13);
        }

        .vs-cell.vs-c3 {
            color: var(--steel);
            font-weight: 400;
        }

        /* ─── Marques ─── */
        .vs-mark {
            /* La largeur est explicite : en disposition mobile la marque
               devient un element de grille, ou flex-basis ne s'applique
               plus. Sans elle la pastille s'ecrase en ovale. */
            flex: 0 0 1.25rem;
            width: 1.25rem;
            height: 1.25rem;
            margin-top: 0.13rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .vs-mark svg { width: 0.72rem; height: 0.72rem; }

        .vs-mark.is-yes {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 2px 8px -2px rgba(79, 107, 255, 0.6);
        }

        /* Croix et tirets restent neutres : le vert-rouge est ce qui donnait
           au premier tableau son air d'argumentaire bon marche. */
        .vs-mark.is-no,
        .vs-mark.is-maybe {
            background: rgba(24, 24, 27, 0.06);
            border: 1px solid rgba(24, 24, 27, 0.14);
            color: var(--ink);
        }

        /* ─── Le bouton qui ferme la carte ─── */
        .vs-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            width: 100%;
            padding: 0.7rem 1rem;
            border-radius: 0.85rem;
            background: var(--ink);
            color: #fff;
            font-size: 0.875rem;
            font-weight: 550;
            text-decoration: none;
            transition: background 0.3s var(--smooth), transform 0.3s var(--smooth);
        }

        .vs-cta svg { width: 0.7rem; height: 0.7rem; }
        .vs-cta:hover { background: var(--accent); transform: translateY(-1px); }

        .versus-foot {
            max-width: 62rem;
            margin: 2.35rem auto 0;
            text-align: center;
            font-size: 0.9375rem;
            line-height: 1.65;
            color: var(--steel);
        }

        /* ─── Petit ecran ───
           La carte surelevee n'a pas de sens sur une colonne unique : on
           revient a l'empilement, ou chaque valeur porte le nom de son camp.
           Sans cela on retombe sur deux valeurs anonymes. */
        @media (max-width: 820px) {
            .vs {
                grid-template-columns: 1fr;
                border: 1px solid var(--hairline);
                border-radius: 1.35rem;
                overflow: hidden;
                background: var(--surface);
            }

            .vs-head { display: none; }

            .vs-cell.vs-c1,
            .vs-cell.vs-c2,
            .vs-cell.vs-c3 {
                border: 0;
                border-radius: 0;
                margin: 0;
                min-height: 0;
                box-shadow: none;
                background: var(--surface);
            }

            .vs-cell.vs-c1 {
                background: rgba(24, 24, 27, 0.05);
                border-top: 1px solid var(--hairline);
                font-size: 1rem;
                font-weight: 600;
                padding: 0.95rem 1.1rem 0.85rem;
            }

            .vs-cell.vs-c1.is-last,
            .vs-cell.vs-c3.is-last { display: none; }

            /* Une grille, pas un flex : dans un conteneur flex le pseudo
               ::before devient un element flex et se pose EN COLONNE a cote
               du texte au lieu de le surmonter. */
            .vs-cell.vs-c2,
            .vs-cell.vs-c3 {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                column-gap: 0.6rem;
                row-gap: 0.2rem;
                padding: 0.6rem 1.1rem;
            }

            .vs-cell.vs-c2 {
                background: rgba(79, 107, 255, 0.07);
                padding-top: 0.8rem;
            }

            .vs-cell.vs-c3 { padding-bottom: 1rem; }

            .vs-cell[data-vs]::before {
                content: attr(data-vs);
                grid-column: 1 / -1;
                grid-row: 1;
                font-size: 0.6875rem;
                font-weight: 600;
                letter-spacing: 0.04em;
                text-transform: uppercase;
            }

            .vs-cell.vs-c2[data-vs]::before { color: #3550D9; }
            .vs-cell.vs-c3[data-vs]::before { color: #52525B; }

            .vs-mark { grid-column: 1; grid-row: 2; margin-top: 0.1rem; }
            .vs-cell.vs-c2:not(:has(.vs-mark)) > span:last-child,
            .vs-cell.vs-c3:not(:has(.vs-mark)) > span:last-child { grid-column: 1 / -1; }

            /* Le bouton reste, en pied de bloc et pleine largeur. */
            .vs-cell.vs-c2.is-last {
                display: block;
                background: var(--surface);
                border-top: 1px solid var(--hairline);
                padding: 1rem 1.1rem 1.15rem;
            }
        }

        /* ══════════════════════════════════════════════════════════════
           CARTES DE RESULTAT — disposition de l'en-tete

           Le logo, le nom et le secteur etaient sur une seule ligne en
           `nowrap`. Depuis que le logo suit son format paysage (92px), le
           nom se retrouvait ecrase a 46px et tronque : le logo paraissait
           enorme a cote d'un nom illisible.

           L'en-tete devient une grille de deux rangees : logo et secteur
           en haut, nom en dessous avec du poids typographique.
           `display: contents` sur .result-client fait remonter ses enfants
           dans la grille, ce qui evite de toucher au balisage.
           ══════════════════════════════════════════════════════════════ */
        .result-head {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            column-gap: 0.85rem;
            row-gap: 0.65rem;
            align-items: center;
            flex-wrap: initial;
            margin-bottom: 1.25rem;
        }


        /* ═══ Cartes de resultat ═══
           La version precedente posait cinq objets a cinq endroits : vignette en
           haut a gauche, etiquette de secteur a l'oppose, nom dessous, logos de
           regie seuls sur une ligne, chiffres dans un pave gris, contexte tout en
           bas. Six arrets de l'oeil pour lire une carte.
           Ici trois zones, une seule colonne de lecture : qui, combien, pourquoi. */
        .cas-deck {
            display: flex;
            gap: 1.25rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            padding-bottom: 0.25rem;
        }

        .cas-deck::-webkit-scrollbar { display: none; }

        .cas-deck.cas-seul { justify-content: center; }

        .cas {
            flex: 0 0 clamp(18rem, 31%, 23rem);
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.25rem;
            box-shadow: var(--shadow-soft);
            padding: 1.5rem 1.6rem;
            transition: transform 0.4s var(--smooth), border-color 0.4s var(--smooth);
        }

        .cas:hover {
            transform: translateY(-3px);
            border-color: rgba(79, 107, 255, 0.25);
        }

        /* ─── Qui ─────────────────────────────────────────────────────── */
        .cas-tete {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding-bottom: 1.1rem;
            border-bottom: 1px solid var(--hairline);
        }

        /* Pas de niveaux de gris ici. La frise grise ses logos pour rester
           sobre — c'est un decor. Sur une carte de resultat, le logo est la
           preuve : le griser faisait passer un logo en degrade pour une
           tache terne. */
        .cas-logo {
            width: 3.25rem;
            height: 1.7rem;
            flex: 0 0 3.25rem;
            object-fit: contain;
            object-position: left center;
        }

        .cas-qui { min-width: 0; flex: 1 1 auto; }

        .cas-nom {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 650;
            letter-spacing: -0.02em;
            color: var(--ink);
            margin: 0 0 0.1rem;
            overflow-wrap: anywhere;
        }

        .cas-secteur {
            font-size: 0.75rem;
            line-height: 1.3;
            color: var(--steel);
            margin: 0;
        }

        /* Les logos de regie ferment la ligne de titre, a la taille d'une puce :
           ils signent le dispositif au lieu d'occuper une ligne pour eux seuls. */
        .cas-regies {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            flex: 0 0 auto;
        }

        .cas-regie {
            width: 1.3rem;
            height: 1.3rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.35rem;
            background: var(--canvas);
            border: 1px solid var(--hairline);
        }

        .cas-regie svg { width: 0.8rem; height: 0.8rem; display: block; }

        /* ─── Combien ─────────────────────────────────────────────────── */
        .cas-chiffres {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
            padding: 1.15rem 0;
        }

        .cas-chiffre-v {
            display: block;
            font-family: var(--font-display);
            font-size: 1.625rem;
            font-weight: 650;
            letter-spacing: -0.035em;
            color: var(--ink);
            line-height: 1.05;
        }

        .cas-chiffre-v em {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-weight: 400;
            color: var(--accent);
        }

        .cas-chiffre-l {
            display: block;
            font-size: 0.75rem;
            line-height: 1.35;
            color: var(--steel);
            margin-top: 0.3rem;
        }

        /* ─── Pourquoi ────────────────────────────────────────────────── */
        .cas-contexte {
            font-size: 0.8125rem;
            line-height: 1.6;
            color: var(--steel);
            margin: 0;
            padding-top: 1.05rem;
            border-top: 1px solid var(--hairline);
        }

        @media (max-width: 760px) {
            .cas { flex-basis: 85%; }
            .cas-deck.cas-seul { justify-content: flex-start; }
            .cas-deck.cas-seul .cas { flex-basis: 100%; }
        }


        /* ═══ Menu deroulant des expertises ═══
           Theo : « quand on clique sur Expertises, ca serait bien que ca
           affiche toutes les expertises ». Le lien reste cliquable et mene
           a la page-mere : le menu s'ouvre au survol et au clavier, il ne
           remplace pas la navigation. */
        .nav-deroulant { position: relative; }

        .nav-deroulant > a {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .nav-chev {
            width: 0.55rem;
            height: 0.55rem;
            opacity: 0.55;
            transition: transform 0.35s var(--smooth), opacity 0.35s var(--smooth);
        }

        .nav-deroulant:hover .nav-chev,
        .nav-deroulant:focus-within .nav-chev {
            transform: rotate(180deg);
            opacity: 1;
        }

        .nav-menu {
            position: absolute;
            top: calc(100% + 0.9rem);
            left: 50%;
            transform: translate(-50%, -6px);
            display: grid;
            grid-template-columns: repeat(2, minmax(10.5rem, 1fr));
            gap: 0 1.75rem;
            padding: 1.5rem 1.75rem;
            background: var(--surface);
            border: 1px solid var(--hairline);
            border-radius: 1.25rem;
            box-shadow: var(--shadow-deep);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s var(--smooth), transform 0.3s var(--smooth),
                visibility 0.3s;
            z-index: 60;
        }

        /* Une bande invisible sous le lien : sans elle, le menu se referme
           des que le curseur traverse l'espace qui l'en separe. */
        .nav-deroulant::after {
            content: '';
            position: absolute;
            inset: 100% 0 auto 0;
            height: 0.9rem;
        }

        .nav-deroulant:hover .nav-menu,
        .nav-deroulant:focus-within .nav-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, 0);
        }

        .nav-menu-col { display: flex; flex-direction: column; }

        .nav-menu a {
            padding: 0.42rem 0.5rem;
            margin: 0 -0.5rem;
            border-radius: 0.5rem;
            font-size: 0.8125rem;
            font-weight: 450;
            color: var(--steel);
            white-space: nowrap;
            transition: background 0.25s var(--smooth), color 0.25s var(--smooth);
        }

        .nav-menu a:hover {
            background: var(--accent-soft);
            color: var(--ink);
        }

        /* Le lien vers la page-mere ferme le menu sur toute sa largeur. */
        .nav-menu-pied {
            grid-column: 1 / -1;
            margin-top: 0.7rem;
            padding-top: 0.7rem;
            border-top: 1px solid var(--hairline);
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--accent);
            white-space: nowrap;
        }

        /* La barre est masquee sous 1100px : le menu n'a alors pas lieu
           d'etre et ses colonnes deborderaient de l'ecran. */
        @media (max-width: 1100px) {
            .nav-menu { display: none; }
            .nav-chev { display: none; }
        }