/* ==========================================================================
   n24g — base globale
   Esthétique « éditoriale suisse » : filets 1px, grille stricte, Space Grotesk,
   annotations mono, accent vert unique.
   IMPORTANT : aucune transition CSS sur les variables de thème — la bascule
   est gérée par la « goutte d'eau » (theme_controller.js) ; un fade résiduel
   créerait un flash.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    --accent: #34D399;
    --accent-ink: #06281c;

    --bg: #ffffff;
    --panel: #fafafa;
    --ink: #0a0a0a;
    --muted: #6f6f6f;
    --line: #e7e7e4;
    --dot: #d8d8d4;
    --imgA: #ececea;
    --imgB: #f5f5f3;
    --c1bg: #ffffff;
    --c1ink: #0a0a0a;
    --c1sub: #6f6f6f;
    --c2bg: #0a0a0a;
    --c2ink: #ffffff;
    --c2sub: #a8a8a8;
    --logoInk: #0a0a0a;

    --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

:root[data-theme='dark'] {
    --bg: #0b0b0c;
    --panel: #131314;
    --ink: #f4f4f2;
    --muted: #9a9a96;
    --line: #262628;
    --dot: #2a2a2c;
    --imgA: #161617;
    --imgB: #1d1d1f;
    --c1bg: #131314;
    --c1ink: #f4f4f2;
    --c1sub: #9a9a96;
    --c2bg: #f4f4f2;
    --c2ink: #0b0b0c;
    --c2sub: #565656;
    --logoInk: #f4f4f2;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--ink);
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

/* Racine thémable (clonée par la goutte d'eau) */
.app {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
}

/* Pages plein écran (accueil, réalisations, contact) */
.app--vh {
    height: 100vh;
    min-height: 760px;
}

.app--vh-800 {
    height: 100vh;
    min-height: 800px;
}

/* Pages scrollables (projet, services) */
.app--scroll {
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Utilitaires récurrents
   -------------------------------------------------------------------------- */
.mono {
    font-family: var(--font-mono);
}

/* Annotation mono « // commentaire » */
.note {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.note--accent {
    color: var(--accent);
}

.note--ink {
    color: var(--ink);
}

/* Fond pointillé */
.dotted {
    background-color: var(--panel);
    background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: center;
}

/* Placeholder image hachuré */
.hatch {
    background: repeating-linear-gradient(135deg, var(--imgA) 0, var(--imgA) 14px, var(--imgB) 14px, var(--imgB) 28px);
}

/* Inversion au hover — instantanée, pas de transition */
.hover-invert:hover {
    background: var(--c2bg);
    color: var(--c2ink);
}

/* Chips / pills */
.chip {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 999px;
}

/* Titres géants */
.gtitle {
    font-weight: 700;
    font-size: clamp(52px, 8vw, 118px);
    letter-spacing: -.04em;
    line-height: .95;
    color: var(--ink);
}

/* Titre en lettres animées */
.letters {
    display: flex;
    overflow: hidden;
}

.lt {
    display: inline-block;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Navbar (identique sur les 5 pages)
   -------------------------------------------------------------------------- */
.nav {
    flex: 0 0 auto;
    height: 78px;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.nav--sticky {
    position: sticky;
    top: 0;
    z-index: 40;
}

.nav-logo {
    display: flex;
    align-items: center;
    padding: 0 32px;
    margin-right: auto;
    color: var(--logoInk);
}

.nav-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 34px;
    border-left: 1px solid var(--line);
    color: var(--ink);
    text-align: left;
}

.nav-cell:hover {
    background: var(--c2bg);
    color: var(--c2ink);
}

.nav-num {
    font-size: 10px;
    letter-spacing: .12em;
    opacity: .5;
}

.nav-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.nav-cell.is-active {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-cell.is-active .nav-num {
    color: var(--accent);
    opacity: 1;
}

.nav-cell.is-active .nav-label {
    font-weight: 700;
}

/* Toggle thème (dernière cellule) */
.nav-toggle {
    align-items: flex-start;
    gap: 6px;
    padding: 0 30px;
}

.theme-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
}

:root[data-theme='dark'] .theme-dot {
    background: transparent;
    border: 1.5px solid currentColor;
}

.theme-name {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: lowercase;
    opacity: .6;
}

.theme-name--dark {
    display: none;
}

:root[data-theme='dark'] .theme-name--light {
    display: none;
}

:root[data-theme='dark'] .theme-name--dark {
    display: inline;
}

/* --------------------------------------------------------------------------
   Marquee (bandeau vert au-dessus de la nav)
   -------------------------------------------------------------------------- */
.marquee {
    flex: 0 0 auto;
    overflow: hidden;
}

.marquee-link {
    display: block;
    background: var(--accent);
    color: var(--accent-ink);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: n24g-mq 20s linear infinite;
}

.marquee-group {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 13px 24px 13px 48px;
}

.marquee-text {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

.marquee-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-ink);
    flex: 0 0 auto;
}

@keyframes n24g-mq {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none !important;
    }
}

/* ==========================================================================
   Page Accueil (/) — hero plein écran
   Layout : nav 78px → main grid 2 colonnes 1fr/1fr (racine .app--vh.home).
   Aucune animation d'entrée sur cette page (fidèle au prototype).
   ========================================================================== */

/* Plein écran, mais sans jamais rogner le pitch : si le contenu dépasse 100vh
   (viewport court + typo géante), la page pousse et scrolle. Rendu identique
   à la spec dès que ça tient. */
.app--vh.home {
    height: auto;
    min-height: max(760px, 100vh);
}

.home-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Colonne gauche — panneau intro
   -------------------------------------------------------------------------- */
.home-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-right: 1px solid var(--line);
    overflow: hidden;
}

/* Cadre pointillé pleine largeur : touche les bords gauche/haut/droit du
   panneau, filet bas uniquement. */
.home-wordmark-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 48px;
    border-bottom: 1px solid var(--line);
}

.home-wordmark {
    font-weight: 700;
    font-size: clamp(48px, 7.4vw, 104px);
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--ink);
}

.home-wordmark-accent {
    color: var(--accent);
}

.home-pitch {
    margin-top: auto;
    padding: 36px 48px 44px;
}

.home-title {
    font-weight: 700;
    font-size: clamp(42px, 5.6vw, 88px);
    line-height: .96;
    letter-spacing: -.03em;
    color: var(--ink);
    text-wrap: balance;
}

.home-lede {
    margin-top: 24px;
    max-width: 540px;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}

.home-scroll-hint {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
}

.home-chevron {
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   Colonne droite — visuel + rangée de cartes
   -------------------------------------------------------------------------- */
.home-showcase {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);
}

.home-visual {
    flex: 2.1 1 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.home-pill {
    width: 54%;
    aspect-ratio: 1.95 / 1;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    opacity: .5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-pill-label {
    font-size: 14px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--ink);
    /* Compense le letter-spacing de la dernière lettre pour un centrage optique. */
    padding-left: .42em;
}

.home-visual-note {
    position: absolute;
    left: 24px;
    bottom: 20px;
}

/* Rangée de cartes */
.home-cards {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    border-top: 1px solid var(--line);
}

.home-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
}

.home-card--real {
    background: var(--c1bg);
    color: var(--c1ink);
}

/* Contact : carte inversée en permanence — le hover-invert (bg c2 / ink c2)
   n'y change rien, comme le [data-navlink] du prototype. */
.home-card--contact {
    background: var(--c2bg);
    color: var(--c2ink);
}

.home-card-arrow {
    position: absolute;
    top: 34px;
    right: 36px;
    font-size: 24px;
    line-height: 1;
}

/* Comme dans le prototype, sous-titre et flèche portent une couleur explicite
   qui ne bascule PAS au hover (seuls fond + couleur héritée s'inversent). */
.home-card--real .home-card-arrow,
.home-card--real .home-card-sub {
    color: var(--c1sub);
}

.home-card--contact .home-card-sub {
    color: var(--c2sub);
}

.home-card-title {
    font-weight: 700;
    font-size: clamp(28px, 2.9vw, 46px);
    letter-spacing: -.02em;
    line-height: 1;
}

.home-card-sub {
    margin-top: 12px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Fallback sobre < 920px : empilement des colonnes, paddings réduits
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
    .app--vh.home {
        height: auto;
        min-height: 100vh;
    }

    .home-main {
        grid-template-columns: 1fr;
    }

    .home-intro {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .home-wordmark-frame {
        padding: 36px 24px;
    }

    .home-pitch {
        padding: 32px 24px 36px;
    }

    .home-visual {
        min-height: 300px;
    }

    .home-card {
        min-height: 180px;
        padding: 28px 24px;
    }

    .home-card-arrow {
        top: 22px;
        right: 24px;
    }
}

/* ==========================================================================
   Page Réalisations — bande titre pointillée, index 5 rangées, preview flottante.
   Les états animés (entrée, preview, panes) sont pilotés par
   realisations_controller.js ; sans JS / reduced-motion la preview reste
   masquée et le contenu est immédiatement visible (hovers CSS conservés).
   ========================================================================== */

/* Colonne pleine hauteur dans #app (marquee → nav → titre → index) */
.reals {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Bande titre
   -------------------------------------------------------------------------- */
.reals-titleband {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 44px 40px 34px;
}

.reals-notes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 12px;
}

/* Filets — animés en scaleX (origine gauche) à l'entrée */
.reals-hairline {
    flex: 0 0 auto;
    height: 1px;
    background: var(--line);
}

/* --------------------------------------------------------------------------
   Index des projets
   -------------------------------------------------------------------------- */
.reals-index {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.reals-row {
    flex: 1 1 0;
    min-height: 84px;
    display: grid;
    grid-template-columns: 72px 1fr auto 64px;
    gap: 24px;
    align-items: center;
    padding: 0 40px;
    color: var(--ink);
}

.reals-num {
    font-size: 13px;
    opacity: .5;
}

.reals-title {
    display: inline-block;
    font-weight: 700;
    font-size: clamp(28px, 4.4vw, 56px);
    letter-spacing: -.03em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    will-change: transform;
}

.reals-meta {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.reals-cat {
    opacity: .75;
}

.reals-year {
    opacity: .45;
}

.reals-arrow {
    display: inline-block;
    font-size: 26px;
    justify-self: end;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Preview flottante (suit le curseur — pointer-events none)
   -------------------------------------------------------------------------- */
.reals-preview {
    position: fixed;
    left: 0;
    top: 0;
    width: min(420px, 38vw);
    height: 296px;
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .22);
    will-change: transform;
    /* Masquée par défaut : seul GSAP la révèle (jamais sans JS ni en reduced-motion). */
    opacity: 0;
    transform: scale(0);
}

/* Un pane par projet, empilés — révélés par clip-path (JS) */
.reals-pane {
    position: absolute;
    inset: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Placeholder hachuré par défaut (projet sans variante dédiée) */
    background: repeating-linear-gradient(135deg, var(--imgA) 0, var(--imgA) 14px, var(--imgB) 14px, var(--imgB) 28px);
}

/* Variantes de placeholder par projet (cf. prototype) */
.reals-pane--craie {
    background-color: var(--panel);
    background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
}

.reals-pane--flux {
    background: repeating-linear-gradient(90deg, var(--imgA) 0, var(--imgA) 30px, var(--imgB) 30px, var(--imgB) 60px);
}

.reals-pane--helios {
    background:
        repeating-linear-gradient(0deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 26px),
        repeating-linear-gradient(90deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 26px)
        var(--panel);
}

.reals-pane--pulse {
    background: repeating-linear-gradient(45deg, var(--imgA) 0, var(--imgA) 10px, var(--imgB) 10px, var(--imgB) 20px);
}

.reals-pane-pill {
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    padding: 14px 30px;
    font-size: 12px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--ink);
}

.reals-pane-note {
    position: absolute;
    left: 16px;
    bottom: 12px;
    font-size: 12px;
    color: var(--muted);
}

.reals-pane-num {
    position: absolute;
    right: 14px;
    bottom: -14px;
    font-weight: 700;
    font-size: 110px;
    line-height: 1;
    opacity: .07;
    color: var(--ink);
}

.reals-pane-dot {
    position: absolute;
    left: 16px;
    top: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
}

/* --------------------------------------------------------------------------
   Fallback responsive sobre (la spec est desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
    .reals-titleband {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 36px 24px 28px;
    }

    .reals-notes {
        align-items: flex-start;
        padding-bottom: 0;
    }

    .reals-row {
        grid-template-columns: 44px 1fr 44px;
        gap: 16px;
        padding: 0 24px;
    }

    .reals-meta {
        display: none;
    }

    .reals-preview {
        display: none;
    }
}

/* ==========================================================================
   Page Étude de cas — /realisations/{slug}
   Nav sticky, page scrollable. Sections : fil → bande titre → fiche →
   visuel principal → défi/réponse → visuels secondaires → projet suivant.
   Les états initiaux des animations sont gérés en JS (gsap.from) : rien
   n'est caché en CSS — contenu visible sans JS / reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fil
   -------------------------------------------------------------------------- */
.projet-fil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 40px;
    border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   2. Bande titre
   -------------------------------------------------------------------------- */
.projet-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 52px 40px 40px;
}

.projet-title {
    font-weight: 700;
    font-size: clamp(48px, 7.6vw, 112px);
    line-height: .95;
    letter-spacing: -.04em;
    color: var(--ink);
    /* Comme le prototype : préserve l'espace des titres multi-mots — sans ça,
       le span-lettre « espace » (flex item) s'effondre à largeur nulle. */
    white-space: pre;
}

.projet-head-meta {
    padding-bottom: 14px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Fiche
   -------------------------------------------------------------------------- */
.projet-fiche {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.projet-fiche-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px 22px;
    border-right: 1px solid var(--line);
}

.projet-fiche-cell:last-child {
    border-right: 0;
}

.projet-fiche-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.projet-fiche-value {
    font-size: 16px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Visuel principal — bloc image prêt à recevoir une vraie image
   -------------------------------------------------------------------------- */
.projet-visual {
    position: relative;
}

.projet-visual-media {
    display: block;
    width: 100%;
    height: 58vh;
}

/* Quand les vraies images arriveront (dans les médias principal + détails) */
.projet-visual-media img,
.projet-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projet-visual-note {
    position: absolute;
    left: 24px;
    bottom: 16px;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Défi / Réponse
   -------------------------------------------------------------------------- */
.projet-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.projet-story-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 56px 48px;
}

.projet-story-col:first-child {
    border-right: 1px solid var(--line);
}

.projet-story-text {
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.55;
    color: var(--ink);
    max-width: 52ch;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6. Visuels secondaires
   -------------------------------------------------------------------------- */
.projet-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.projet-detail {
    position: relative;
}

.projet-detail:first-child {
    border-right: 1px solid var(--line);
}

.projet-detail-media {
    display: block;
    width: 100%;
    height: 44vh;
}

/* --------------------------------------------------------------------------
   7. Projet suivant — inversion instantanée via .hover-invert
   -------------------------------------------------------------------------- */
.projet-next {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 44px 40px;
    border-top: 1px solid var(--line);
    color: var(--ink);
}

.projet-next-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.projet-next-note {
    font-size: 12px;
    opacity: .6; /* couleur héritée : suit l'inversion au hover */
}

.projet-next-title {
    font-weight: 700;
    font-size: clamp(34px, 5vw, 72px);
    letter-spacing: -.03em;
    line-height: 1;
}

.projet-next-arrow {
    font-size: 34px;
}

/* --------------------------------------------------------------------------
   Fallback sobre < 920px — empilement, paddings réduits (spec = desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
    .projet-fil {
        padding: 18px 24px;
    }

    .projet-head {
        padding: 40px 24px 32px;
    }

    .projet-fiche {
        grid-template-columns: repeat(2, 1fr);
    }

    .projet-fiche-cell:nth-child(2n) {
        border-right: 0;
    }

    .projet-fiche-cell:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .projet-story {
        grid-template-columns: 1fr;
    }

    .projet-story-col {
        padding: 40px 24px;
    }

    .projet-story-col:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .projet-details {
        grid-template-columns: 1fr;
    }

    .projet-detail:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .projet-next {
        padding: 36px 24px;
    }
}

/* ==========================================================================
   Page Services — marquee → nav → bande titre → accordéons (Vue) → CTA bas.
   Les accordéons (.acc-*) sont rendus par assets/vue/controllers/ServicesAccordion.vue ;
   l'entrance du reste de la page est pilotée par assets/controllers/services_controller.js.
   ========================================================================== */

.services {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Bande titre
   -------------------------------------------------------------------------- */
.services-titleband {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 44px 40px 34px;
}

.services-titlemeta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 12px;
}

/* Filet animable (scaleX 0 → 1) sous la bande titre. */
.services-hairline {
    flex: 0 0 auto;
    height: 1px;
    background: var(--line);
}

/* --------------------------------------------------------------------------
   Accordéons (composant Vue ServicesAccordion)
   -------------------------------------------------------------------------- */
.services-acc {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Tête d'accordéon — bouton pleine largeur. Hover : fond panel, instantané. */
.acc-head {
    width: 100%;
    display: grid;
    grid-template-columns: 72px 1fr auto 48px;
    gap: 24px;
    align-items: center;
    padding: 34px 40px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.acc-head:hover {
    background: var(--panel);
}

.acc-num {
    font-size: 13px;
    opacity: .5;
}

.acc-title {
    font-weight: 700;
    font-size: clamp(26px, 3.6vw, 52px);
    letter-spacing: -.03em;
    line-height: 1;
}

.acc-resume {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.acc-plus {
    justify-self: end;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    display: inline-block;
    transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}

.acc-item.is-open .acc-plus {
    transform: rotate(45deg);
}

/* Ouverture : height 0 → scrollHeight mesuré (posé en JS). */
.acc-wrap {
    height: 0;
    overflow: hidden;
    transition: height .55s cubic-bezier(.7, 0, .2, 1);
}

/* Contenu déplié — aligné sous le titre (136px = 40px padding + 72px col + 24px gap). */
.acc-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    padding: 6px 40px 44px 136px;
}

.acc-text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 58ch;
    text-wrap: pretty;
}

.acc-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acc-side-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.acc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.acc-chip {
    padding: 8px 16px;
    font-size: 13px;
}

.acc-start {
    font-size: 13px;
    color: var(--accent);
    margin-top: 8px;
}

/* Filet entre les items (animable dans le Vue, scaleX 0 → 1). */
.acc-hairline {
    height: 1px;
    background: var(--line);
}

/* --------------------------------------------------------------------------
   CTA bas
   -------------------------------------------------------------------------- */
.services-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 44px 40px;
    border-top: 1px solid var(--line);
    color: var(--ink);
}

.services-cta-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.services-cta-note {
    font-size: 12px;
    opacity: .6;
}

.services-cta-title {
    font-weight: 700;
    font-size: clamp(34px, 5vw, 72px);
    letter-spacing: -.03em;
    line-height: 1;
}

.services-cta-arrow {
    font-size: 34px;
}

/* --------------------------------------------------------------------------
   Reduced motion — ouverture d'accordéon et rotation du + rendues sèches.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .acc-wrap,
    .acc-plus {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Fallback sobre < 920px — la spec est desktop, on empile sans réinventer.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
    .services-titleband {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 36px 24px 28px;
    }

    .services-titlemeta {
        align-items: flex-start;
        padding-bottom: 0;
    }

    .acc-head {
        grid-template-columns: 48px 1fr 40px;
        gap: 10px 18px;
        padding: 26px 24px;
    }

    .acc-num {
        grid-column: 1;
        grid-row: 1;
    }

    .acc-title {
        grid-column: 2;
        grid-row: 1;
    }

    .acc-plus {
        grid-column: 3;
        grid-row: 1;
    }

    .acc-resume {
        grid-column: 2;
        grid-row: 2;
        white-space: normal;
    }

    .acc-body {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 4px 24px 36px;
    }

    .services-cta {
        padding: 36px 24px;
    }
}

/* ==========================================================================
   Page Contact — wizard « demande de projet » plein écran (100vh, sans scroll).
   Structure : nav (partial) → barre de progression 2px → grid 300px / 1fr
   (rail pointillé à gauche, scène à droite). Tout ce qui est sous la nav est
   le composant Vue ContactWizard ; ces styles en sont la feuille dédiée.
   ========================================================================== */

/* Point de montage du composant Vue (sous la nav) */
.contact-wizard {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Barre de progression — 2px, remplissage vert (étape + 1) / 5
   -------------------------------------------------------------------------- */
.cw-progress {
    flex: 0 0 auto;
    height: 2px;
    background: var(--line);
}

.cw-progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width .6s cubic-bezier(.7, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Grille principale
   -------------------------------------------------------------------------- */
.cw-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Rail gauche — étapes (fond pointillé via .dotted)
   -------------------------------------------------------------------------- */
.cw-rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 32px 36px;
    border-right: 1px solid var(--line);
}

.cw-rail-top {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cw-rail-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.cw-rail-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    text-align: left;
}

.cw-rail-btn:disabled {
    cursor: default;
}

.cw-rail-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
}

/* Étape courante : ink + pastille visible */
.cw-rail-btn.is-current {
    color: var(--ink);
}

.cw-rail-btn.is-current .cw-rail-dot {
    opacity: 1;
}

/* Étape faite : verte, cliquable pour revenir */
.cw-rail-btn.is-done {
    color: var(--accent);
}

.cw-rail-foot {
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   Scène droite
   -------------------------------------------------------------------------- */
.cw-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

/* Chiffre fantôme en bas à droite (01 → 05) */
.cw-ghost {
    position: absolute;
    right: 28px;
    bottom: -40px;
    font-weight: 700;
    font-size: 240px;
    line-height: 1;
    opacity: .05;
    color: var(--ink);
    pointer-events: none;
}

/* Panneaux d'étape — un seul ouvert à la fois (bascule pilotée par Vue/GSAP) */
.cw-panel {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    padding: 64px 80px;
    max-width: 1040px;
}

.cw-panel.is-open {
    display: flex;
}

.cw-panel--tight {
    gap: 30px;
}

.cw-panel--recap {
    max-width: 1100px;
}

.cw-panel--done {
    gap: 28px;
    max-width: none;
}

/* Question de l'étape */
.cw-q {
    font-weight: 700;
    font-size: clamp(36px, 4.8vw, 68px);
    letter-spacing: -.03em;
    line-height: 1;
    text-wrap: balance;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Chips (choix unique)
   -------------------------------------------------------------------------- */
.cw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cw-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 14px 26px;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
}

.cw-chip:hover {
    border-color: var(--ink);
}

/* Sélection : inversion complète, instantanée */
.cw-chip.is-selected {
    background: var(--c2bg);
    color: var(--c2ink);
    border-color: var(--c2bg);
}

/* --------------------------------------------------------------------------
   Champs soulignés (brief + coordonnées)
   -------------------------------------------------------------------------- */
.cw-field {
    width: 100%;
    font-family: inherit;
    color: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    outline: none;
}

.cw-field::placeholder {
    color: var(--muted);
}

/* Focus visible : souligné renforcé en ink */
.cw-field:focus {
    border-bottom-color: var(--ink);
    box-shadow: 0 1px 0 0 var(--ink);
}

.cw-brief {
    max-width: 860px;
    font-size: clamp(20px, 1.8vw, 27px);
    line-height: 1.5;
    padding: 10px 0 18px;
    resize: none;
}

.cw-inputs {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 620px;
}

.cw-input {
    font-size: clamp(20px, 1.8vw, 26px);
    padding: 10px 0 14px;
}

/* --------------------------------------------------------------------------
   Récap 2×2 bordé
   -------------------------------------------------------------------------- */
.cw-recap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    max-width: 860px;
}

.cw-recap-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
}

.cw-recap-cell:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.cw-recap-cell:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
}

.cw-recap-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.cw-recap-value {
    font-size: 16px;
    font-weight: 600;
}

.cw-recap-value--brief {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Navigation d'étape
   -------------------------------------------------------------------------- */
.cw-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 10px;
}

.cw-actions--tight {
    margin-top: 6px;
}

.cw-next {
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    padding: 16px 30px;
}

/* Hover : inversion instantanée */
.cw-next:hover {
    background: var(--c2bg);
    color: var(--c2ink);
}

.cw-back {
    padding: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

.cw-back:hover {
    color: var(--ink);
}

/* Bouton final : fond accent (la bordure reste accent au hover, cf. prototype) */
.cw-send {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.cw-send:hover {
    background: var(--c2bg);
    color: var(--c2ink);
}

.cw-send:disabled {
    opacity: .6;
    cursor: default;
}

/* Échec d'envoi — message discret */
.cw-error {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Écran « Merci. »
   -------------------------------------------------------------------------- */
.cw-done-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
}

.cw-done-title {
    font-weight: 700;
    font-size: clamp(64px, 9vw, 140px);
    letter-spacing: -.04em;
    line-height: .95;
    color: var(--ink);
}

.cw-done-note {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

.cw-done-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 12px;
}

.cw-done-home,
.cw-done-realisations {
    font-family: var(--font-mono);
    font-size: 13px;
}

.cw-done-home {
    color: var(--muted);
}

.cw-done-realisations {
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Visually hidden (labels + statut lecteur d'écran)
   -------------------------------------------------------------------------- */
.cw-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;
}

/* --------------------------------------------------------------------------
   Fallback sobre < 920px — empilement, paddings réduits (spec desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
    .cw-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .cw-rail {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 16px 24px;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .cw-rail-top {
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }

    .cw-rail-top > .note,
    .cw-rail-foot {
        display: none;
    }

    .cw-rail-steps {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 14px;
        margin-top: 0;
    }

    .cw-panel {
        padding: 36px 28px;
    }

    .cw-ghost {
        right: 16px;
        bottom: -20px;
        font-size: 120px;
    }
}