/* EMPYRWEB
   Couleurs et polices : dossier brand (docs/design-system.md).
   Tailles et espacements : docs/design-tokens.md, relevés sur la référence. Tout en rem, racine fluide.
   Correspondances élément du site / rôle du relevé : docs/design-tokens-mapping.md. */
@font-face { font-family: "Urbanist"; src: url("/fonts/Urbanist-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Happy Monkey"; src: url("/fonts/HappyMonkey-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* Racine fluide : 1 rem = 1/144 de la largeur (bureau), 1/36 (mobile), plafonnée à 1920 px */
html { font-size: 0.694444vw; -webkit-text-size-adjust: 100%; }
@media (min-width: 1920px) { html { font-size: 13.3333px; } }
@media (max-width: 768px) { html { font-size: 2.77778vw; } }

:root {
  --c-bg: #0A0A0A;
  --c-bg-deep: #101326;
  --c-iris: #303E73;
  --c-ink: #FFFFFF;
  --c-ink-2: rgba(255,255,255,.66);
  --c-ink-dim: rgba(255,255,255,.22);
  --c-accent: #E30B5D;
  --c-accent-hover: #F2286F;
  --c-glow: #E3ED55;
  --c-line: rgba(255,255,255,.12);
  --c-surface: #14141A;
  --c-surface-2: #1B1B23;
  --f-sans: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-accent: "Happy Monkey", system-ui, sans-serif;
  --r-card: 2rem;
  --r-sm: 1.2rem;
  --r-pill: 2.8rem;
  --hair: .1rem;
  --shadow: 0 3rem 6rem -3rem rgba(0,0,0,.6);
  --ease: cubic-bezier(.2,.7,.1,1);
  --gutter: 4.8rem;
  --col-text-start: 67.8rem;  /* 72.6 rem depuis le bord, moins la marge latérale */
  --col-text-width: 44.4rem;
}
@media (max-width: 768px) { :root { --gutter: 1.2rem; } }

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-sans); font-size: 1.6rem; line-height: 2.24rem; letter-spacing: .01em; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 400; letter-spacing: -.02em; }
h3 { font-size: 2.4rem; line-height: 2.88rem; letter-spacing: 0; }
p { margin: 0 0 2.4rem; }
a { color: inherit; }
img, svg { display: block; }
.wrap { width: 100%; max-width: 144rem; margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.small { font-size: 1.4rem; line-height: 1.96rem; }
.dim { color: var(--c-ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999rem; top: .8rem; z-index: 100; background: #fff; color: #000; padding: .8rem 1.4rem; border-radius: var(--r-pill); }
.skip:focus { left: .8rem; }
:focus-visible { outline: .2rem solid var(--c-ink); outline-offset: .3rem; }
.ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* Colonne de texte courant (bureau : 72.6 rem du bord, 44.4 rem de large ; mobile : pleine largeur) */
.col-text { width: 100%; }
@media (min-width: 769px) { .col-text { margin-left: var(--col-text-start); width: var(--col-text-width); } }

/* Mots-clés : Happy Monkey, framboise */
.kw { font-family: var(--f-accent); font-style: normal; font-weight: 400; color: var(--c-accent); letter-spacing: -.01em; }

/* Titres (relevé : H1 hero, titre de section moyen, titre de section secondaire) */
/* Hero : 12.8 rem, l'autre valeur relevée pour les très grands titres (réduction demandée par Fatma le 19/10/2026) */
.display { font-size: 12.8rem; line-height: 12.8rem; letter-spacing: -.02em; }
/* Titres de section : 6.4 rem, 2 lignes maximum (rôle « titre de section secondaire », demande du 20/10/2026) */
.h2 { font-size: 6.4rem; line-height: 7.04rem; letter-spacing: -.02em; }
.h-sec { font-size: 6.4rem; line-height: 7.04rem; letter-spacing: -.02em; font-weight: 400; }
@media (max-width: 768px) {
  /* 4.2 rem au lieu de 6.4 : plus grande taille qui garde les 3 lignes fixes du titre à 390 px (calculé : 4.26) */
  .display { font-size: 4.2rem; line-height: 4.62rem; }
  .h2 { font-size: 3.2rem; line-height: 3.84rem; }
  .h-sec { font-size: 3.2rem; line-height: 3.84rem; }
}
.line { display: block; overflow: hidden; padding-bottom: .08em; }
/* Titres de section : marge masquée de part et d'autre pour que le mot-clé ne soit jamais rogné */
.h2 .line { padding-left: .3em; padding-right: .3em; margin-left: -.3em; margin-right: -.3em; }
.line > span { display: inline-block; }
.wd { display: inline-block; will-change: transform; }
.line--indent { padding-left: 1.2em; }
.line--drift { will-change: transform; }
/* Titre du hero : retours à la ligne fixes, une ligne ne se coupe jamais */
.display .line { white-space: nowrap; }
/* Sous-titre du hero : plus petit que le titre, seul « vos équipes. » est en rose */
.line--sub { font-size: .5em; line-height: 1.25; margin-top: .3em; letter-spacing: 0; }
@media (max-width: 768px) { .line--indent { padding-left: .5em; } .line--sub { font-size: .62em; } }

/* Chapô, paragraphe d'introduction, liste, mentions légales */
.lead { font-size: 2.4rem; line-height: 2.88rem; letter-spacing: 0; color: var(--c-ink-2); }
.p-intro { font-size: 1.8rem; line-height: 2.52rem; letter-spacing: .01em; }
.list-text { font-size: 2.4rem; line-height: 3.6rem; letter-spacing: 0; }
@media (max-width: 768px) { .list-text { font-size: 2rem; line-height: 3rem; } }
.legal { font-size: 1rem; line-height: 1.4rem; letter-spacing: .04em; }

/* Étiquette de section avec trait animé (relevé : 1.2 rem, graisse 600, lettres 0.08 em) */
.label { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 1.2rem; font-size: 1.2rem; line-height: 1.68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rule { display: block; height: .3rem; width: min(100%, 68rem); background: var(--c-ink); transform-origin: left center; }

/* Boutons (relevé : hauteur 5.6, petit 4.8, marge 2.4, texte 1.4, pilule rayon 2.8) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; height: 5.6rem; padding: 0 2.4rem; border-radius: var(--r-pill); border: 0; font: inherit; font-size: 1.4rem; line-height: 1.96rem; letter-spacing: .02em; font-weight: 400; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s, box-shadow .25s, color .25s; }
.btn:hover { transform: translateY(-.2rem); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn--primary { background: var(--c-accent); color: #fff; box-shadow: inset 0 .1rem 0 rgba(255,255,255,.25), 0 1.2rem 3rem -1.2rem rgba(227,11,93,.7); }
.btn--primary:hover { background: var(--c-accent-hover); }
.btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 .15rem rgba(255,255,255,.4); }
.btn--ghost:hover { box-shadow: inset 0 0 0 .15rem #fff; }
.icon-btn { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 2rem; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.8rem; transition: background-color .2s; }
.icon-btn:hover { background: rgba(127,127,127,.18); }

/* Texte de bouton qui défile au survol */
.roll { display: inline-block; overflow: hidden; height: 1.4em; line-height: 1.4em; vertical-align: middle; }
.roll__t { display: block; text-shadow: 0 1.4em 0 currentColor; transition: transform .45s var(--ease); }
.btn:hover .roll__t, .nav__cta:hover .roll__t { transform: translateY(-1.4em); }

/* Navigation en pilule flottante (texte de menu : 1.4 rem) */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 1.2rem var(--gutter); background: rgba(10,10,10,.72); backdrop-filter: blur(1.6rem) saturate(1.2); -webkit-backdrop-filter: blur(1.6rem) saturate(1.2); border-bottom: var(--hair) solid var(--c-line); display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; font-size: 1.4rem; line-height: 1.96rem; letter-spacing: .02em; }
.nav__logo, .nav__links { transition: transform .4s var(--ease), opacity .4s var(--ease); }
.nav__right { display: flex; align-items: center; gap: .8rem; }
.nav__logo { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.8rem; border-radius: var(--r-pill); background: rgba(20,20,26,.72); backdrop-filter: blur(1.4rem); -webkit-backdrop-filter: blur(1.4rem); border: var(--hair) solid var(--c-line); font-weight: 600; letter-spacing: .12em; text-decoration: none; }
.logo { display: block; height: 2.4rem; width: auto; }
.nav__links { display: none; gap: .4rem; padding: .6rem; border-radius: var(--r-pill); background: rgba(20,20,26,.72); backdrop-filter: blur(1.4rem); -webkit-backdrop-filter: blur(1.4rem); border: var(--hair) solid var(--c-line); }
.nav__links a { padding: .6rem 1.4rem; border-radius: var(--r-pill); text-decoration: none; color: var(--c-ink-2); transition: color .2s, background-color .2s; }
.nav__links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__cta { display: inline-flex; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem 1.6rem; border-radius: var(--r-pill); background: rgba(20,20,26,.72); backdrop-filter: blur(1.4rem); -webkit-backdrop-filter: blur(1.4rem); border: var(--hair) solid var(--c-line); text-decoration: none; }
.nav__cta-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--c-accent); }
.nav__menu { display: inline-grid; place-content: center; gap: .4rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: var(--hair) solid var(--c-line); background: rgba(20,20,26,.72); backdrop-filter: blur(1.4rem); -webkit-backdrop-filter: blur(1.4rem); cursor: pointer; }
.nav__menu span { display: block; width: 1.6rem; height: .15rem; background: #fff; transition: transform .3s var(--ease), opacity .3s; }
.nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(.55rem) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.55rem) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end; padding: 10rem var(--gutter) 4.8rem; background: rgba(10,10,10,.96); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: .6rem; width: 100%; }
.menu a { padding: 1rem 0; border-bottom: var(--hair) solid var(--c-line); font-size: 3.2rem; line-height: 3.84rem; text-decoration: none; }
.menu a:last-child { color: var(--c-accent); }
body.menu-open { overflow: hidden; }
@media (max-width: 459px) {
  .nav__cta { padding: .6rem; }
  .nav__cta > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Cubes 3D (canvas fixe derrière le haut de page) */
.cubes { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cubes canvas { width: 100% !important; height: 100% !important; display: block; }
.cubes.is-fallback { background: radial-gradient(40% 35% at 78% 40%, rgba(227,237,85,.22), transparent 70%), radial-gradient(45% 45% at 85% 45%, rgba(48,62,115,.55), transparent 75%); }
/* La page (fond opaque) passe au-dessus du pied de page, collé en bas de l'écran derrière elle */
main { position: relative; z-index: 1; background: var(--c-bg); }
main > section { position: relative; z-index: 1; }

/* Hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 12rem 0 9.6rem; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.75) 45%, transparent 75%); }
.hero > .wrap { position: relative; z-index: 2; }
.hero__lead { max-width: var(--col-text-width); margin-top: 2.8rem; color: var(--c-ink-2); }
.hero__line { max-width: var(--col-text-width); margin: 1.2rem 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 3.2rem; }
.hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 1.2rem; line-height: 1.68rem; color: var(--c-ink-2); letter-spacing: .08em; }
.hero__scroll::after { content: ""; width: var(--hair); height: 4rem; background: linear-gradient(var(--c-ink) 0 0) top / 100% 0% no-repeat, rgba(255,255,255,.2); animation: scrollLine 2s var(--ease) infinite; }
@keyframes scrollLine { 0% { background-size: 100% 0%; background-position: top; } 50% { background-size: 100% 100%; background-position: top; } 51% { background-position: bottom; } 100% { background-size: 100% 0%; background-position: bottom; } }

/* En-tête de section : étiquette, titre, sous-titre, puis contenu */
.sec-head { margin-bottom: 4.8rem; }
.sec-head .h2 { margin: 0; }
.sec-head__sub { max-width: var(--col-text-width); margin: 2.4rem 0 0; }

/* Grandes phrases qui s'allument mot par mot */
.w { opacity: .2; transition: opacity .25s linear; }
.w.is-on, .no-motion .w { opacity: 1; }

/* Sections (relevé : 11.2 rem au-dessus, 0 en dessous, 16 avant un changement d'ambiance) */
.section { padding: 11.2rem 0 0; }

/* Exemples d'applications : anneau en CSS 3D (perspective + rotateY), cartes HTML plates.
   Refonte du 27/10/2026 : cartes plus compactes (36 rem), toutes à la hauteur de la plus remplie (app.js),
   titre 3.6 rem gras, secteur en pastille, bouton en pilule. Voisines tournées de 30° puis 60°, au-delà invisibles.
   Rotation lente et continue, ralentie quand une carte passe de face (app.js).
   Mobile : pas d'anneau, rangée plate, carte de face de 28 rem, voisines qui dépassent sur les côtés. */
.ring3d { position: relative; overflow-x: clip; padding: 2.4rem 0 2.4rem; }
.ring3d__stage { position: relative; height: 44rem; perspective: 160rem; perspective-origin: 50% 50%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.ring3d__stage.is-dragging { cursor: grabbing; }
.ring3d__stage:focus-visible .card.is-front { outline: .2rem solid var(--c-ink); outline-offset: .4rem; }
.card { position: absolute; top: 0; left: 50%; width: 36rem; margin-left: -18rem; display: flex; flex-direction: column; padding: 2.8rem 2.8rem 2.4rem; border-radius: 2rem; background: #FFFFFF; color: #0A0A0A; box-shadow: 0 3rem 7rem -2rem rgba(0,0,0,.9), 0 .6rem 1.6rem rgba(0,0,0,.45); transform-origin: 50% 50%; cursor: pointer; overflow: hidden; -webkit-font-smoothing: antialiased; transition: box-shadow .4s var(--ease); }
/* Carte de face : halo framboise discret pour qu'elle ressorte du fond noir */
.card.is-front { box-shadow: 0 3rem 7rem -2rem rgba(0,0,0,.9), 0 2rem 6rem -1.6rem rgba(227,11,93,.45); }
/* Filet framboise en haut de chaque carte */
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .5rem; background: var(--c-accent); }
/* Assombrissement des voisines : un voile (jamais de filter) */
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0A0A0A; opacity: var(--shade, 0); pointer-events: none; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin: 0 0 2.4rem; }
.card__num { margin: 0; font-size: 1.4rem; line-height: 1; font-weight: 700; letter-spacing: .04em; color: var(--c-accent); }
.card__tag { margin: 0; padding: .6rem 1.2rem; border-radius: var(--r-pill); background: rgba(227,11,93,.09); color: #B8084B; font-size: 1.15rem; line-height: 1.2; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.card__title { margin: 0 0 1.6rem; font-size: 3.6rem; line-height: 1.08; font-weight: 600; letter-spacing: -.025em; color: #0A0A0A; text-wrap: balance; }
.card__summary { margin: 0 0 3.2rem; font-size: 1.7rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: rgba(0,0,0,.68); }
.card__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 1.2rem; height: 4.8rem; padding: 0 .6rem 0 2rem; background: #0A0A0A; border: 0; border-radius: var(--r-pill); color: #FFFFFF; font: inherit; font-size: 1.5rem; line-height: 1; font-weight: 500; letter-spacing: .01em; cursor: pointer; transition: background-color .25s; }
.card__cta::after { content: "→"; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--c-accent); color: #FFFFFF; font-size: 1.6rem; transition: transform .25s var(--ease); }
.card__cta:hover { background: #26262E; }
.card__cta:hover::after { transform: translateX(.3rem); }
.card__cta:focus-visible { outline: .2rem solid #0A0A0A; outline-offset: .3rem; }
.ring3d__dots { display: flex; justify-content: center; gap: .4rem; margin-top: 3.2rem; }
.ring3d__dot { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; padding: 0; border: 0; background: none; cursor: pointer; }
.ring3d__dot::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: rgba(255,255,255,.3); transition: background-color .25s, transform .25s; }
.ring3d__dot[aria-current="true"]::before { background: var(--c-accent); transform: scale(1.25); }
@media (max-width: 768px) {
  .ring3d__stage { height: auto; min-height: 35rem; perspective: none; }
  .card { width: 28rem; margin-left: -14rem; padding: 2.4rem 2.4rem 2rem; }
  .card__title { font-size: 3rem; }
  .card__summary { font-size: 1.6rem; }
}
.case-label, .case-block__title { margin: 0; font-size: 1.2rem; line-height: 1.5; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.case-panel__title { margin: 0; font-size: 3.2rem; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; color: var(--c-ink); }

.case-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(56rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: var(--hair) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); overflow-y: auto; }
.case-panel[open] { animation: panelIn .45s var(--ease); }
@keyframes panelIn { from { transform: translateX(100%); } to { transform: none; } }
.case-panel::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(.4rem); }
.case-panel__inner { position: relative; display: grid; gap: 2.4rem; padding: 6.4rem 4.8rem 4.8rem; }
.case-panel__close { position: absolute; top: 2rem; right: 2rem; }
.case-panel__body { display: grid; gap: 2.4rem; }
.case-block { display: grid; gap: .8rem; }
.case-block p { margin: 0; font-size: 1.8rem; line-height: 1.5; font-weight: 400; color: rgba(255,255,255,.85); }
.case-panel__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-top: 2.4rem; border-top: var(--hair) solid var(--c-line); }
@media (max-width: 768px) { .case-panel__inner { padding: 6.4rem 1.2rem 3.2rem; } }

/* Contact : section de fin, changement d'ambiance */
.band { margin-top: 11.2rem; padding: 11.2rem 0; background: linear-gradient(180deg, transparent, var(--c-bg-deep) 30%, var(--c-bg-deep) 70%, transparent); }
.band .h2 { margin: 0; }
.band .btn { margin-top: 3.2rem; }
.band__note { margin: 1.6rem 0 0; }

/* Ce que vous pouvez changer : 3 cartes, même style que celles de Notre approche, sans le fil */
.gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.gain { display: flex; flex-direction: column; padding: 3.2rem; border-radius: 2.4rem; background: var(--c-surface); border: var(--hair) solid var(--c-line); }

/* Notre approche : 5 cartes numérotées reliées par un fil, allumées une à une (app.js) */
.steps { --node: 1.2rem; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.steps::before { content: ""; position: absolute; z-index: 0; left: calc(3.2rem + var(--node) / 2 - var(--hair) / 2); top: 3.2rem; bottom: 3.2rem; width: var(--hair); background: rgba(255,255,255,.28); }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 3.2rem; border-radius: 2.4rem; background: var(--c-surface); border: var(--hair) solid var(--c-line); transition: transform .3s var(--ease), border-color .3s, opacity .6s var(--ease); }
.step::before { content: ""; position: absolute; width: var(--node); height: var(--node); border-radius: 50%; left: 3.2rem; top: -1rem; background: var(--c-ink); box-shadow: 0 0 0 .4rem var(--c-bg); transform: translateY(-50%); }
.step:first-child::before { display: none; }
.step:hover { transform: translateY(-.4rem); border-color: rgba(255,255,255,.28); }
.step__n { font-size: 6.4rem; line-height: 7.04rem; letter-spacing: -.02em; color: var(--c-ink-2); }
.step__title { margin: 2.4rem 0 1.2rem; }
.step__text { margin: 0; color: var(--c-ink-2); }
.step:first-child { background: var(--c-accent); border-color: var(--c-accent); }
.step:first-child .step__n, .step:first-child .step__text { color: rgba(255,255,255,.9); }
/* Avant l'allumage (seulement si les animations sont actives) */
.js-motion .step:not(.is-on) { opacity: .2; }

/* FAQ : à gauche titre et bouton ; à droite les questions (question 2.4 rem, réponse 1.8 rem) */
.faq-layout { display: grid; gap: 4.8rem; }
.faq-layout .sec-head { margin-bottom: 0; }
.faq-layout .btn { margin-top: 3.2rem; }
.faq { border-top: var(--hair) solid var(--c-line); }
.faq details { border-bottom: var(--hair) solid var(--c-line); }
.faq summary { padding: 2.4rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 2.4rem; font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; letter-spacing: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1em; text-align: center; font-size: 3.2rem; line-height: 1; color: var(--c-ink-2); }
.faq:not(.js-faq) details[open] summary::after, .faq.js-faq details.is-open summary::after { content: "\2212"; color: var(--c-accent); }
.faq details p { margin: 0; padding: 0 4.8rem 2.4rem 0; overflow: hidden; font-size: 1.8rem; line-height: 2.52rem; letter-spacing: .01em; color: var(--c-ink-2); }
@media (max-width: 768px) { .faq summary { font-size: 2rem; line-height: 3rem; } .faq details p { padding-right: 0; } }

/* Pied de page révélé */
.footer { position: sticky; bottom: 0; z-index: 0; overflow: hidden; background: var(--c-bg-deep); color: var(--c-ink-2); }
.footer__top { display: grid; gap: 3.2rem; padding-top: 6.4rem; padding-bottom: 3.2rem; }
.footer__logo { height: 4rem; }
.footer__tag { margin: 1.6rem 0 0; font-size: 1.2rem; line-height: 1.68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer__nav { display: grid; gap: .6rem; }
.footer__nav a { color: var(--c-ink); text-decoration: none; transition: color .25s; }
.footer__nav a:hover { color: var(--c-accent); }
.footer__art { min-height: 0; }
.footer__art:not(:empty) { height: 32rem; }
.footer__bottom { padding-top: 2rem; padding-bottom: 2.8rem; border-top: var(--hair) solid var(--c-line); }

/* État initial des éléments animés (seulement si JS d'animation actif) */
.js-motion [data-reveal="lines"] .line > span { transform: translateY(110%); }
.js-motion .label > span:not(.rule) { opacity: 0; }
.js-motion [data-reveal="fade"], .js-motion [data-reveal="rise"], .js-motion .gain { opacity: 0; }

/* Bureau (au-delà de 768 px, la racine passe à 1/144 de la largeur) */
@media (min-width: 769px) {
  .hero { justify-content: center; padding: 12rem 0 8rem; }
  .hero::before { background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.6) 38%, transparent 62%); }
  .nav { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .nav__links { display: flex; }
  .nav__menu { display: none; }
  /* En descendant : logo et liens s'effacent, le bouton de réservation reste */
  .nav.is-hidden .nav__logo, .nav.is-hidden .nav__links { transform: translateY(-160%); opacity: 0; pointer-events: none; }
  .gains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 3.2rem; }
  .steps::before { left: calc(3.2rem + var(--node) / 2); right: calc((100% - 8rem) / 5 - 3.2rem - var(--node) / 2); top: 0; bottom: auto; width: auto; height: var(--hair); }
  .step::before, .step:first-child::before { display: block; top: -3.2rem; background: var(--c-ink); }
  .step:first-child::before { background: var(--c-accent); }
  .faq-layout { grid-template-columns: var(--col-text-start) minmax(0, 1fr); gap: 0; align-items: start; }
  .faq-layout__head { padding-right: 4.8rem; }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}