/* ===== Le film, plein écran ===== */
.film-dlg { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: #EFEBE7; overflow: hidden; opacity: 0; transition: opacity .35s ease; }
.film-dlg::backdrop { background: #000; }
.film-dlg.visible { opacity: 1; }
.film-scene { position: absolute; inset: 0; }
#film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; will-change: transform; }
#film::cue { font: 500 1.1rem/1.35 var(--texte-f); background: rgba(0,0,0,.72); }
.statique { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; image-rendering: pixelated; will-change: transform, opacity; }
.film-dlg.gresille .film-scene::after { opacity: 1; transition: none; }
.crt-point { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: 5; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 30%, rgba(255,236,214,.9) 45%, rgba(226,165,119,0) 72%); box-shadow: 0 0 22px 8px rgba(255,236,214,.75), 0 0 70px 24px rgba(226,165,119,.35); will-change: transform, opacity; }
.crt { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; z-index: 4; opacity: 0; pointer-events: none; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 12%, #fff 88%, rgba(255,255,255,0));
  box-shadow: 0 0 16px 3px rgba(255,240,222,.95), 0 0 60px 14px rgba(226,165,119,.55); will-change: transform, opacity; }
.film-scene::after { /* lignes de balayage */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55));
}
.film-fermer { position: absolute; z-index: 6; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(239,235,231,.3); background: rgba(20,16,12,.55); color: #EFEBE7; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.film-fermer:hover { background: rgba(40,32,24,.8); }
.film-fermer:focus-visible { outline: 2px solid #F1DCC0; outline-offset: 2px; }
.film-fermer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.film-zone { position: absolute; z-index: 4; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; box-shadow: 0 0 0 0 rgba(241,220,192,0); transition: box-shadow .3s ease; }
.film-zone:hover { box-shadow: 0 0 0 2px rgba(241,220,192,.85), 0 0 30px rgba(226,165,119,.45); }
.film-zone[hidden], .film-fin[hidden] { display: none; }
.film-fin { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), rgba(0,0,0,.9)); animation: apparait .5s ease both; }
.film-fin-titre { font: 700 clamp(1.7rem, 4vw, 3rem)/1.1 var(--display); letter-spacing: -.03em; color: #EFEBE7; text-wrap: balance; }
.film-fin-sous { color: rgba(239,235,231,.8); font-size: 1.05rem; max-width: 40ch; }
.film-fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.film-fin .pill-plein { background: #EFEBE7; color: #000; }
.film-fin .film-revoir { color: #EFEBE7; border-color: rgba(239,235,231,.35); background: rgba(255,255,255,.06); }

/* ===== Liens à texte qui glisse, flèche en diagonale ===== */
.glisse { display: inline-grid; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.glisse > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.glisse .g2 { transform: translateY(108%); }
:is(a, button):hover > .glisse .g1, :is(a, button):focus-visible > .glisse .g1, .ex-lien:hover .glisse .g1, .ex-lien:focus-visible .glisse .g1 { transform: translateY(-108%); }
:is(a, button):hover > .glisse .g2, :is(a, button):focus-visible > .glisse .g2, .ex-lien:hover .glisse .g2, .ex-lien:focus-visible .glisse .g2 { transform: none; }
.fleche-diag { display: inline-grid; width: .95em; height: .95em; margin-left: .35em; overflow: hidden; vertical-align: -.1em; flex: none; }
.fleche-diag svg { grid-area: 1 / 1; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.fleche-diag .f2 { transform: translate(-110%, 110%); }
:is(a, button):hover > .fleche-diag .f1, :is(a, button):focus-visible > .fleche-diag .f1 { transform: translate(110%, -110%); }
:is(a, button):hover > .fleche-diag .f2, :is(a, button):focus-visible > .fleche-diag .f2 { transform: none; }
.lien-fleche.v5-glisse::after { display: none; }
@media (prefers-reduced-motion: reduce) { .glisse > span, .fleche-diag svg { transition: none; } }

/* ===== Curseur : bulle « Parlons-en » sur les appels à l'action ===== */
.c-bulle { position: absolute; left: 18px; top: 18px; padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  font: 650 .8125rem/1 var(--texte-f); color: #1a0f06; background: var(--chrome); background-size: 300% 100%; background-position: 50% 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.6);
  transform: scale(.2); transform-origin: 0 0; opacity: 0; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.curseur[data-bulle] .c-bulle { transform: none; opacity: 1; }

/* ===== Titres révélés ligne par ligne ; le texte se remplit avec la lecture ===== */
.tl .tl-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .12em; margin: 0 -.03em -.12em; }
.tl .tl-i { display: inline-block; transform: translateY(112%); transition: transform 1s cubic-bezier(.2, .85, .2, 1); transition-delay: calc(var(--l, 0) * 120ms);
  background: linear-gradient(90deg, var(--tl-plein) 0, var(--tl-plein) calc(var(--f, 0) * 130% - 30%), var(--tl-bord) calc(var(--f, 0) * 130% - 15%), var(--tl-vide) calc(var(--f, 0) * 130%));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tl.tl-vu .tl-i { transform: none; }

/* ===== Chiffres (vrais : ce que la page promet) ===== */
.chiffres { list-style: none; max-width: var(--max); margin: 0 auto var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres li { padding: 26px 22px 26px 0; display: flex; flex-direction: column; gap: 10px; }
.chiffres li + li { padding-left: 22px; border-left: 1px solid var(--trait); }
.ch-n { font: 700 clamp(2.6rem, 5vw, 4.2rem)/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--texte); }
.ch-lib { color: var(--texte-2); font-size: .975rem; line-height: 1.45; max-width: 26ch; }
@media (max-width: 760px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres li { padding: 20px 14px 20px 0; }
  .chiffres li + li { padding-left: 14px; }
  .chiffres li:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--trait); }
  .chiffres li:nth-child(4) { border-top: 1px solid var(--trait); }
}

/* ===== Logos : points aux coins, passage en couleur au survol ===== */
.logo-lien { position: relative; }
.logo-lien::after { content: ""; position: absolute; inset: 9px; pointer-events: none; transition: inset .4s var(--ease), opacity .3s ease; opacity: .55;
  background:
    radial-gradient(circle, #6b5538 0 1.6px, transparent 2.2px) left top / 6px 6px no-repeat,
    radial-gradient(circle, #6b5538 0 1.6px, transparent 2.2px) right top / 6px 6px no-repeat,
    radial-gradient(circle, #6b5538 0 1.6px, transparent 2.2px) left bottom / 6px 6px no-repeat,
    radial-gradient(circle, #6b5538 0 1.6px, transparent 2.2px) right bottom / 6px 6px no-repeat; }
.logo-lien:hover::after, .logo-lien:focus-visible::after { inset: 5px; opacity: 1;
  background:
    radial-gradient(circle, #C9834F 0 1.8px, transparent 2.4px) left top / 6px 6px no-repeat,
    radial-gradient(circle, #C9834F 0 1.8px, transparent 2.4px) right top / 6px 6px no-repeat,
    radial-gradient(circle, #C9834F 0 1.8px, transparent 2.4px) left bottom / 6px 6px no-repeat,
    radial-gradient(circle, #C9834F 0 1.8px, transparent 2.4px) right bottom / 6px 6px no-repeat; }
@media (hover: hover) and (pointer: fine) {
  .logo-lien img { filter: grayscale(1) contrast(1.05); transition: filter .4s ease, opacity .25s ease; }
  .logo-lien:hover img, .logo-lien:focus-visible img { filter: none; }
}
/* Sentinelis est livré en blanc : il garde son encre sombre (v4), au repos comme au survol */
.logo-lien.logo-sentinelis img, .logo-lien.logo-sentinelis:hover img, .logo-lien.logo-sentinelis:focus-visible img { filter: brightness(0) saturate(100%) invert(13%) sepia(17%) saturate(1500%) hue-rotate(160deg); }

/* ===== FAQ numérotée, pastille active ===== */
.faq { counter-reset: faq; }
.faq details { counter-increment: faq; }
.faq summary { justify-content: flex-start; }
.faq summary::after { margin-left: auto; }
.faq summary::before { content: counter(faq, decimal-leading-zero); flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--trait-fort); font: 600 .8125rem/1 var(--texte-f); font-variant-numeric: tabular-nums; color: var(--texte-2);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.faq details[open] summary::before { background: var(--plein-fond); color: var(--plein-texte); border-color: transparent; }
.faq summary:hover::before { border-color: var(--accent-texte); }

/* ===== Appel final : ondes concentriques ===== */
.ondes-boite { position: relative; display: inline-flex; isolation: isolate; }
.ondes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ondes i { position: absolute; inset: 0; border-radius: 999px; outline: 1.5px solid var(--accent-texte); outline-offset: 0; opacity: 0; animation: onde 3.3s cubic-bezier(.2, .6, .3, 1) infinite; }
.ondes i:nth-child(2) { animation-delay: 1.1s; }
.ondes i:nth-child(3) { animation-delay: 2.2s; }
@keyframes onde { 0% { outline-offset: 0; opacity: .8; } 100% { outline-offset: 34px; opacity: 0; } }
.final:not(.anime) .ondes i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ondes { display: none; } }

/* ===== Pied : le logo en particules ===== */
.pied-particules { display: block; flex: 1 0 100%; order: -1; width: 100%; height: clamp(110px, 16vw, 230px); touch-action: pan-y; }
/* sans la page qui tourne (mouvement réduit), le menu reste en haut : le bandeau passe dessous */
:root:not(.turn-on) .actu { top: 100px; }

/* ===== Contraste (audit du 17/10, axe-core + mesure sur l'image, jour et nuit, 1440 et 375) ===== */
/* « Exemple » sur l'écran clair du téléphone 3D : cuivre foncé en mode jour (était #f0c79f sur crème, 1,4:1) */
:root[data-theme="light"] .tel-ex { color: #7a4520 !important; background: rgba(201,131,79,.16); }
/* initiales des équipes : texte foncé sur les pastilles de couleur en mode nuit (blanc : 2,3 à 2,8:1) */
:root[data-theme="dark"] .equipes-liste .av { color: #111; }

/* mot qui tourne (« Pour la santé ») : glissement seul, sans fondu, pour ne jamais passer sous le contraste requis */
.rot-mot.sort { animation-name: rot-sort-v5; }
.rot-mot.entre { animation-name: rot-entre-v5; }
@keyframes rot-sort-v5 { to { transform: translateY(-115%); } }
@keyframes rot-entre-v5 { from { transform: translateY(115%); } }


/* ===== Fondus entre les sections (retour d'Hugo, 18/10) =====
   Plus aucune couture : chaque fond photo, chaque couche de nuages et le fond du voyage se fondent dans la page
   par un masque à 14 pas (courbe d'aisance sinusoïdale, pas un dégradé linéaire) sur environ 50 vh en haut et en bas. */
.fond-photo, .nuages, .voyage::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.012) 4vh, rgba(0,0,0,0.045) 8vh, rgba(0,0,0,0.1) 12vh, rgba(0,0,0,0.17) 16vh, rgba(0,0,0,0.26) 20vh, rgba(0,0,0,0.36) 24vh, rgba(0,0,0,0.47) 28vh, rgba(0,0,0,0.58) 32vh, rgba(0,0,0,0.69) 36vh, rgba(0,0,0,0.79) 40vh, rgba(0,0,0,0.88) 44vh, rgba(0,0,0,0.96) 48vh, #000 52vh, #000 calc(100% - 52vh), rgba(0,0,0,0.96) calc(100% - 48vh), rgba(0,0,0,0.88) calc(100% - 44vh), rgba(0,0,0,0.79) calc(100% - 40vh), rgba(0,0,0,0.69) calc(100% - 36vh), rgba(0,0,0,0.58) calc(100% - 32vh), rgba(0,0,0,0.47) calc(100% - 28vh), rgba(0,0,0,0.36) calc(100% - 24vh), rgba(0,0,0,0.26) calc(100% - 20vh), rgba(0,0,0,0.17) calc(100% - 16vh), rgba(0,0,0,0.1) calc(100% - 12vh), rgba(0,0,0,0.045) calc(100% - 8vh), rgba(0,0,0,0.012) calc(100% - 4vh), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.012) 4vh, rgba(0,0,0,0.045) 8vh, rgba(0,0,0,0.1) 12vh, rgba(0,0,0,0.17) 16vh, rgba(0,0,0,0.26) 20vh, rgba(0,0,0,0.36) 24vh, rgba(0,0,0,0.47) 28vh, rgba(0,0,0,0.58) 32vh, rgba(0,0,0,0.69) 36vh, rgba(0,0,0,0.79) 40vh, rgba(0,0,0,0.88) 44vh, rgba(0,0,0,0.96) 48vh, #000 52vh, #000 calc(100% - 52vh), rgba(0,0,0,0.96) calc(100% - 48vh), rgba(0,0,0,0.88) calc(100% - 44vh), rgba(0,0,0,0.79) calc(100% - 40vh), rgba(0,0,0,0.69) calc(100% - 36vh), rgba(0,0,0,0.58) calc(100% - 32vh), rgba(0,0,0,0.47) calc(100% - 28vh), rgba(0,0,0,0.36) calc(100% - 24vh), rgba(0,0,0,0.26) calc(100% - 20vh), rgba(0,0,0,0.17) calc(100% - 16vh), rgba(0,0,0,0.1) calc(100% - 12vh), rgba(0,0,0,0.045) calc(100% - 8vh), rgba(0,0,0,0.012) calc(100% - 4vh), transparent 100%); }
/* le fond du voyage passe sur une couche masquée : il glisse depuis le fond de la page au lieu de commencer par une ligne */
.voyage { background: transparent !important; }
.voyage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 1 !important; background: radial-gradient(120% 80% at 50% 0%, #2a231c, #14110e 70%); }
:root[data-theme="light"] .voyage::before { background: radial-gradient(120% 80% at 50% 0%, #e9dfd0, #d8cbb8 75%); }
/* « Parlons » : le ciel bleu de droite et le nuage chaud de gauche ne se rencontrent plus en couture : une brume chaude les lie */
.final .nuages .lueur { background: radial-gradient(70% 55% at 70% 30%, rgba(236,196,160,.42), rgba(236,196,160,0) 72%), radial-gradient(60% 50% at 62% 58%, rgba(255,196,140,.22), transparent 70%); }
:root[data-theme="dark"] .final .nuages .lueur { background: radial-gradient(70% 55% at 70% 30%, rgba(150,96,60,.3), rgba(150,96,60,0) 72%), radial-gradient(60% 50% at 62% 58%, rgba(255,196,140,.16), transparent 70%); }
/* « Parlons » lisible en mode jour : encre sombre (navy, sarcelle, cuivre) au lieu du verre crème (était 1,3:1) */
:root[data-theme="light"] .final .contour text:not(.vl-brille) { fill: url(#filigrane-clair); }
/* brume en parallaxe sur les fonds photo : l'image glisse moins vite que la page (--k : position de la section, posée par v5.js) */
.parallaxe .fond-photo img { translate: 0 calc(var(--k, 0) * -5%); }
.parallaxe .nuages .nuage.n1 { translate: 0 calc(var(--k, 0) * -9%); }
.parallaxe .nuages .nuage.n2 { translate: 0 calc(var(--k, 0) * -14%); }
@media (prefers-reduced-motion: reduce) { .parallaxe .fond-photo img, .parallaxe .nuages .nuage { translate: none; } }




/* ===== Colonnes équilibrées (retour d'Hugo, 18/10 : « grand espace vide » dans Sécurité) =====
   Sécurité : le cadenas 3D descend sous les coches, avec « Ce que nous faisons » et un appel à l'action : les deux colonnes ont la même hauteur
   (une colonne collante plus haute que l'écran cachait le titre sous le menu : pas de sticky ici).
   IA et Terrain : la colonne de l'objet (cerveau, téléphone) suit la lecture de la colonne voisine au lieu de laisser un vide. */
.sec-suite { margin-top: 34px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 30px; align-items: center; }
.sec-suite .obj.cadenas { position: relative; width: 190px; max-width: 190px; aspect-ratio: 1; margin: 0; }
.sec-faire-titre { font: 650 1.05rem/1.2 var(--display); letter-spacing: -.01em; color: var(--texte); margin: 0 0 12px; }
.sec-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.sec-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.sec-liste svg { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--accent-texte); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-liste b { display: block; font-weight: 650; color: var(--texte); font-size: .98rem; }
.sec-liste span { color: var(--texte-2); font-size: .94rem; line-height: 1.45; }
.sec-faire .pill { white-space: nowrap; }
@media (min-width: 901px) {
  .securite .bloc { align-items: start; }
  #ia .bloc, #terrain .bloc { align-items: start; }
  #ia .obj-col, #terrain .obj-col { position: sticky; top: max(96px, calc(50vh - 300px)); }
}
@media (max-width: 1100px) and (min-width: 901px) { .sec-suite { grid-template-columns: minmax(0, 1fr); } .sec-suite .obj.cadenas { width: 160px; } }
@media (max-width: 900px) { .sec-suite { grid-template-columns: minmax(0, 1fr); justify-items: start; } .sec-suite .obj.cadenas { width: 150px; justify-self: center; } }

/* pied : plus de filet horizontal entre « Parlons » et le pied (seule couture restante mesurée, 36 niveaux d'un pixel au suivant) */
.pied { border-top: 0; }

/* ===== Du jour au soir (moment 5 de AUDIT_UNITED.md) =====
   Après « Parlons », la page glisse vers le crépuscule : crème du fond, ambre, cuivre, brun, bleu nuit HOSTA,
   sur environ 55 vh, dégradé à pas multiples interpolé en oklch, grain statique ; le logo en particules s'y allume en or.
   Le pied est donc toujours « de nuit », dans les deux thèmes : ses couleurs passent en clair. */
.pied { position: relative; isolation: isolate; padding-top: calc(55vh + 24px);
  --texte: #EFEBE7; --texte-2: #C9C2BA; --accent-texte: #E2A577; --trait: rgba(239,235,231,.16); color: #C9C2BA; color-scheme: dark;
  background: linear-gradient(180deg, var(--fond) 0, #e3d4bf 6vh, #dfbf96 12vh, #d39a66 19vh, #b0703f 26vh, #7d4a2b 33vh, #4a3029 40vh, #23222a 47vh, #0d1820 53vh, #081218 58vh, #070f14 100%);
  background: linear-gradient(in oklch 180deg, var(--fond) 0, #e3d4bf 6vh, #dfbf96 12vh, #d39a66 19vh, #b0703f 26vh, #7d4a2b 33vh, #4a3029 40vh, #23222a 47vh, #0d1820 53vh, #081218 58vh, #070f14 100%); }
:root[data-theme="dark"] .pied {
  background: linear-gradient(180deg, #000 0, #050302 10vh, #160c06 20vh, #3b1f0e 28vh, #6a3a1a 33vh, #3a2014 38vh, #141418 46vh, #091017 54vh, #070f14 100%);
  background: linear-gradient(in oklch 180deg, #000 0, #050302 10vh, #160c06 20vh, #3b1f0e 28vh, #6a3a1a 33vh, #3a2014 38vh, #141418 46vh, #091017 54vh, #070f14 100%); }
.pied::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.pied .marque, .pied .marque span { color: #EFEBE7; }
.pied .marque span { color: #E2A577; }
.pied a { color: #EFEBE7; }
.pied .pied-particules { margin-top: -18vh; }
@media (max-width: 699px) { .pied { padding-top: calc(42vh + 16px); } .pied .pied-particules { margin-top: -12vh; } }


/* ===== Réalisation CockPit (refonte du 18/10) ===== */
.cas-surtitre { margin: 0 0 12px !important; font: 600 .8125rem/1.3 var(--texte-f) !important; letter-spacing: .14em; font-variant-caps: all-small-caps; color: var(--accent-texte) !important; }


/* ===== Un même dossier, de la demande à la facture (refonte du 18/10) ===== */
.dossier .dos { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 28px; align-items: start; }
.dos-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; }
.dos-rail::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--trait); }
.dos-pas { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 10px 4px 4px; border: 0; border-radius: 14px; background: none; color: var(--texte-2); font: 550 .98rem/1.2 var(--texte-f); text-align: left; cursor: pointer; }
.dos-pas b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--trait-fort); background: var(--fond); color: var(--texte-2); font-size: .9rem; transition: background-color .3s ease, color .3s ease, border-color .3s ease; z-index: 1; }
.dos-pas[aria-current="step"] { color: var(--texte); background: var(--surface); }
.dos-pas[aria-current="step"] b { border-color: var(--accent-texte); color: var(--accent-texte); }
.dos-pas.fait b { background: var(--plein-fond); color: var(--plein-texte); border-color: transparent; }
.dos-pas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dos-scene { position: relative; display: grid; gap: 14px; }
.dos-demo { margin: 0; font: 600 .75rem/1 var(--texte-f); letter-spacing: .12em; font-variant-caps: all-small-caps; color: var(--accent-texte); }
.dos-fiche { border-radius: var(--r-xl); border: 1px solid var(--trait); background: var(--surface); padding: clamp(18px, 2.4vw, 30px); box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.dos-tete { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--trait); }
.dos-client { font: 700 1.1rem/1.2 var(--display); color: var(--texte); }
.dos-ref { color: var(--texte-2); font-size: .9rem; }
.dos-etat { margin-left: auto; font-weight: 650; font-size: .9rem; color: var(--accent-texte); }
.dos-vue h3 { font: 700 clamp(1.25rem, 2vw, 1.55rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--texte); margin: 0 0 12px; }
.dos-vue h3:focus { outline: none; }
.dos-doc { margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; background: var(--fond); color: var(--texte); line-height: 1.55; border: 1px solid var(--trait); }
.dos-ia { margin: 0 0 18px; color: var(--texte-2); line-height: 1.55; }
.dos-ia b { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-fond); color: var(--accent-texte); font-size: .8rem; }
.dos-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; color: var(--texte); }
.dos-table td { padding: 9px 4px; border-bottom: 1px solid var(--trait); }
.dos-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dos-total td { font-weight: 700; border-bottom: 0; }
.dos-vue:not([hidden]) { animation: dos-entre .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes dos-entre { from { opacity: 0; transform: translateY(10px); } }
.dos-trace { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dos-trace li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--trait); color: var(--texte-2); font-size: .85rem; }
.dos-trace li::before { content: "✓ "; color: var(--accent-texte); font-weight: 700; }
@media (max-width: 860px) {
  .dossier .dos { grid-template-columns: minmax(0, 1fr); }
  .dos-rail { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow-x: auto; }
  .dos-rail::before { left: 22px; right: 22px; top: 22px; bottom: auto; width: auto; height: 2px; }
  .dos-pas { flex-direction: column; justify-content: flex-start; min-height: 64px; padding: 4px 2px; font-size: .75rem; text-align: center; gap: 6px; }
  .dos-pas span { display: block; }
}
@media (max-width: 480px) { .dos-pas span { font-size: .6875rem; } }
@media (prefers-reduced-motion: reduce) { .dos-vue:not([hidden]) { animation: none; } }

/* ===== Trois portes d'entrée ===== */
.portes-liste { list-style: none; max-width: var(--max); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.porte { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; border-radius: var(--r-xl); border: 1px solid var(--trait); background: var(--surface); text-decoration: none; color: var(--texte); transition: transform .3s var(--ease), border-color .3s ease; }
.porte:hover, .porte:focus-visible { transform: translateY(-3px); border-color: var(--accent-texte); }
.porte-n { font: 700 1.3rem/1.2 var(--display); letter-spacing: -.02em; }
.porte-d { color: var(--texte-2); line-height: 1.55; flex: 1; }
.porte .lien-fleche { margin-top: 4px; }
@media (max-width: 860px) { .portes-liste { grid-template-columns: minmax(0, 1fr); } }

/* ===== Méthode : ce qui compose un budget ===== */
.budget { margin-top: 40px; }
.budget h3 { font: 700 1.25rem/1.2 var(--display); color: var(--texte); margin: 0 0 16px; }
.budget-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.budget-liste li { display: grid; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid var(--trait); background: var(--surface); }
.budget-liste b { color: var(--texte); }
.budget-liste span { color: var(--texte-2); font-size: .94rem; line-height: 1.45; }
@media (max-width: 1100px) { .budget-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .budget-liste { grid-template-columns: minmax(0, 1fr); } }

/* ===== Le voyage dans le temps, volontaire : replié jusqu'à ce qu'on l'ouvre ===== */
.voyage.replie .livre, .voyage.replie .voy-eres { display: none !important; }
.voyage.replie { padding-bottom: clamp(48px, 6vh, 72px); }
.voy-ouvrir-ligne { margin-top: 18px !important; }
.voyage .voy-ouvrir { color: inherit; }

/* ===== Formulaire ===== */
.ct-question { display: block; padding: 0; margin: 0 0 6px; font: 700 1.15rem/1.3 var(--display); color: var(--texte); }
.ct-quelques { margin: 4px 0 14px; color: var(--texte-2); font-size: .95rem; }


/* ===== Étude de cas client CockPit (18/10, refaite) : titre chrome ENTIER sous l'en-tête fixe, deux colonnes équilibrées,
   captures réelles à droite (données fictives) qui s'écartent pendant que la page tourne ; la fiche défile dans la section suivante. ===== */
.contour-cas { font-size: min(7.2vw, 6.6rem); margin-bottom: clamp(10px, 2vh, 22px); }
.turn-on .intro.prelude { justify-content: flex-start; padding-top: clamp(92px, 12vh, 132px); padding-bottom: 28px; }
.cas-bloc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
.cas-txt { max-width: 34rem; }
.cas-txt h2 { font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 16px; }
.cas-txt > p { color: var(--texte-2); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; max-width: 48ch; }
.cas-txt .actions { margin-top: 26px; }
.cas-visuels { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1.12; justify-self: end; }
.cv { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(15,23,42,.1);
  box-shadow: 0 2px 6px rgba(15,23,42,.08), 0 30px 70px -24px rgba(15,23,42,.45); will-change: transform; }
.cv img { display: block; width: 100%; height: auto; }
.cv-ecran { left: 0; top: 6%; width: 88%; transform: translate3d(calc((1 - var(--p, 1)) * 40px), calc((1 - var(--p, 1)) * 30px), 0); }
.cv-barre { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #eef0f3; border-bottom: 1px solid rgba(15,23,42,.08); font: 600 .6875rem/1 var(--texte-f); color: #475569; }
.cv-barre i { width: 9px; height: 9px; border-radius: 50%; background: #cfd4dc; }
.cv-barre span { margin-left: 8px; }
.cv-doc { right: 0; top: 0; width: 36%; transform: rotate(3deg) translate3d(calc((1 - var(--p, 1)) * -60px), calc((1 - var(--p, 1)) * 50px), 0); }
.cv-tel { left: 50%; bottom: 0; width: 26%; border-radius: 30px; border: 7px solid #111; background: #111;
  transform: rotate(-4deg) translate3d(calc((1 - var(--p, 1)) * -40px), calc((1 - var(--p, 1)) * 90px), 0); }
.cv-tel img { border-radius: 22px; }
.cas-visuels-petit { display: none; }
@media (min-width: 900px) { .cas-bloc { align-items: start; } .cas-txt { padding-top: clamp(8px, 2vh, 24px); } .cas-visuels-grand { margin-top: calc(-1 * min(7.2vw, 6.6rem)); } }

/* La fiche du cas : une section qui défile normalement */
.cas-detail { padding: clamp(36px, 4vw, 56px) var(--gouttiere) clamp(56px, 8vw, 104px); }
.cas-detail-in { max-width: var(--max); margin: 0 auto; }
.cas-detail-titre { font: 700 clamp(1.6rem, 2.6vw, 2.3rem)/1.15 var(--display); letter-spacing: -.025em; color: var(--texte); margin: 0 0 26px; }
.cas-fiche { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cas-fiche div { display: grid; align-content: start; gap: 10px; padding: 22px 20px; border-radius: 18px; border: 1px solid var(--trait); background: var(--surface); }
.cas-fiche dt { display: flex; align-items: center; gap: 10px; font: 650 1.02rem/1.25 var(--texte-f); color: var(--texte); }
.cas-fiche dt svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; fill: none; stroke: var(--accent-texte); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--accent-fond); }
.cas-fiche dd { margin: 0; color: var(--texte-2); line-height: 1.55; font-size: .97rem; }
.cas-note { margin: 16px 0 0; color: var(--texte-2); font-size: .875rem; }
.cas-detail .actions { margin-top: 22px; }
@media (max-width: 1100px) { .cas-fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .cas-bloc { grid-template-columns: minmax(0, 1fr); }
  .cas-visuels-grand { display: none; }
  .cas-visuels-petit { display: block; margin: 0 auto 30px; max-width: 520px; }
  .cas-visuels-petit .cv { transform: none; }
  .cas-visuels-petit .cv-doc { transform: rotate(3deg); }
  .cas-visuels-petit .cv-tel { transform: rotate(-4deg); }
}
@media (max-width: 560px) { .cas-fiche { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .contour-cas { font-size: clamp(3rem, 16vw, 4.4rem); }
  .turn-on .intro.prelude { padding-top: 84px; }
}
@media (max-height: 760px) and (min-width: 900px) { .contour-cas { font-size: min(6vw, 5rem); } .turn-on .intro.prelude { padding-top: 88px; } .cas-visuels { max-width: 540px; } }
@media (prefers-reduced-motion: reduce) { .cv-ecran, .cv-doc, .cv-tel { --p: 1; } }

/* L'origine de HOSTA : un encart factuel (plus de citation) */
.origine .origine-titre { margin: 0 0 12px; font: 650 .8125rem/1.3 var(--texte-f); letter-spacing: .12em; font-variant-caps: all-small-caps; color: #7A5A2E; }
.origine > p:not(.origine-titre) { margin: 0; font: 500 clamp(1.05rem, 1.5vw, 1.25rem)/1.55 var(--display); letter-spacing: -.012em; text-wrap: pretty; }


/* ===== Langues (18/10) : sélecteur d'en-tête (globe + code), liste du pied, suggestion non bloquante ===== */
.langues { position: relative; }
.langues > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; cursor: pointer; }
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langues-code { font: 650 .75rem/1 var(--texte-f); letter-spacing: .04em; }
.langues-liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px; margin: 0; padding: 6px; list-style: none; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--trait); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.langues-liste a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--texte); text-decoration: none; font: 500 .95rem/1.2 var(--texte-f); }
.langues-liste a:hover, .langues-liste a:focus-visible { background: var(--accent-fond); }
.langues-liste a[aria-current] { font-weight: 700; color: var(--accent-texte); }
@media (max-width: 1100px) { .langues-code { display: none; } .langues > summary { padding: 0; width: 44px; justify-content: center; } }
@media (max-width: 520px) { .langues > summary { width: 40px; min-width: 40px; } }
.pied-langues ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
.pied-langues a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; opacity: .8; text-decoration: none; font-size: .875rem; }
.pied-langues a:hover, .pied-langues a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.langue-suggestion { position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: min(380px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 18px;
  background: var(--surface); color: var(--texte); border: 1px solid var(--trait); box-shadow: 0 20px 60px rgba(0,0,0,.28); animation: ls-entre .4s ease; }
.langue-suggestion p { margin: 0 0 12px; font: 500 .95rem/1.45 var(--texte-f); }
.ls-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes ls-entre { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .langue-suggestion { animation: none; } }