/* Vault — Nuit et or.
   L'or ne marque que ce qui s'allume : un neurone, un bouton, un compte à rebours. Il ne décore rien. */
:root {
  --nuit: #070b16;
  --nuit-2: #0e1526;
  --nuit-voile: rgba(7, 11, 22, 0.86);
  --or: #c9a15a;
  --or-clair: #f0d59a;
  --ivoire: #eee8dc;
  --brume: #8c95a8;
  --trait: rgba(201, 161, 90, 0.26);
  --trait-doux: rgba(238, 232, 220, 0.1);
  --f-titre: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --f-texte: "Hanken Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --colonne: 34rem;
  --marge: clamp(1rem, 5vw, 5.5rem);
  --rayon: 22px;
  --rayon-petit: 14px;
  --verre: linear-gradient(158deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .018) 34%, rgba(255, 255, 255, 0) 60%);
  --ombre-verre: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .025), 0 28px 60px -32px rgba(0, 0, 0, .85);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--nuit); color: var(--ivoire);
  font: 400 1.0625rem/1.65 var(--f-texte);
  font-feature-settings: "kern", "liga", "lnum";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--or); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 2px; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- la scène ---------- */
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; opacity: 0; transition: opacity 2.2s ease; }
.scene-prete #scene { opacity: 1; }
.sans-3d #scene { display: none; }
.sans-3d body, html.sans-3d { background: radial-gradient(ellipse at 70% 30%, #1a2034 0%, var(--nuit) 60%) fixed; }
.voile-bas { position: fixed; inset: auto 0 0 0; height: 30vh; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 11, 22, 0.7), transparent); }
.voile-scene { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--nuit); opacity: 0; }
main section { position: relative; }
.cam { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
main, .pied { position: relative; z-index: 2; }

/* ---------- en-tête ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--marge); transition: background-color .4s ease, padding .4s ease, transform .4s ease;
}
.entete.defile { background: rgba(7, 11, 22, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--trait-doux); }
.marque { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 500 1.65rem/1 var(--f-titre); letter-spacing: .01em; }
.marque svg { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(240, 213, 154, .28)); }
.marque-nom { font: 600 1.28rem/1 var(--f-titre); letter-spacing: .22em; margin-right: -.22em; text-transform: uppercase; color: var(--or-clair); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); font-size: .95rem; }
.nav a { text-decoration: none; color: var(--brume); transition: color .2s; }
.nav a:hover { color: var(--ivoire); }
.nav .nav-tarif { color: var(--or-clair); }
.nav .bouton { color: var(--nuit); }
@media (max-width: 860px) { .nav a:not(.bouton):not(.nav-tarif) { display: none; } }
@media (max-width: 400px) { .marque-nom { font-size: 1.1rem; letter-spacing: .16em; } .nav { gap: .8rem; } .marque svg { width: 26px; height: 26px; } }

/* ---------- boutons ---------- */
.bouton {
  --c: var(--or);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem; padding: .85rem 1.6rem; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #e2bf7c 0%, var(--c) 52%, #b38a45 100%); color: var(--nuit); font: 600 1rem/1.1 var(--f-texte); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(240, 213, 154, .5) inset, 0 10px 40px -12px rgba(201, 161, 90, .55);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.bouton::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 246, 220, .55) 50%, transparent 80%); transition: transform .7s ease; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 241, 207, .8) inset, 0 16px 50px -12px rgba(201, 161, 90, .75); }
.bouton:hover::after { transform: translateX(110%); }
.bouton:active { transform: translateY(1px) scale(.99); }
.bouton[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.bouton.petit { min-height: 2.5rem; padding: .55rem 1.05rem; font-size: .92rem; }
.lien { display: inline-flex; align-items: center; gap: .5rem; color: var(--ivoire); text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: .32em; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.lien:hover { text-decoration-color: var(--or); }

/* ---------- typographie ---------- */
h1, h2, h3 { font-family: var(--f-titre); font-weight: 500; margin: 0; letter-spacing: -.015em; }
h1 { font-size: clamp(3.6rem, 10.5vw, 9.6rem); line-height: .88; font-weight: 500; }
h2 { font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: .98; }
h3 { font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.08; font-weight: 600; }
p { margin: 0 0 1em; }
.chapo { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: #d9d3c6; max-width: 36rem; }
.discret { color: var(--brume); font-size: .95rem; }
.grand-serif { font-family: var(--f-titre); font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.12; font-weight: 500; }

/* ---------- structure des chapitres ---------- */
.chapitre { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 18vh var(--marge); }
.chapitre .colonne { max-width: var(--colonne); position: relative; }
.chapitre.droite { justify-content: flex-end; }
.chapitre.centre { justify-content: center; text-align: center; }
.chapitre .colonne::before { /* une ombre douce derrière le texte, pour le lire par-dessus les neurones */
  content: ""; position: absolute; inset: -26% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 11, 22, .93) 35%, rgba(7, 11, 22, .6) 70%, rgba(7, 11, 22, 0)); }
.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .apparait.vu { opacity: 1; transform: none; }

/* ---------- héros ---------- */
.heros { min-height: 100svh; align-items: flex-end; padding-bottom: 12vh; }
.heros .colonne { max-width: 46rem; }
.heros h1 { margin-bottom: 1.6rem; }
.heros .chapo { margin-bottom: 2rem; }
.heros-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.heros-prix { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; color: var(--brume); font-size: .95rem; }
.heros-prix strong { color: var(--or-clair); font-weight: 600; }
.compte { font-variant-numeric: tabular-nums; color: var(--ivoire); }
.indice-defile { position: absolute; right: var(--marge); bottom: 12vh; width: 1px; height: 4.5rem; background: linear-gradient(var(--or), transparent); }
.indice-defile::after { content: ""; position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--or-clair); animation: goutte 2.4s ease-in-out infinite; }
@keyframes goutte { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(4.3rem); opacity: 0; } }
@media (max-width: 760px) {
  .heros { padding-bottom: 7vh; padding-top: 46vh; }
  .heros h1 { font-size: clamp(3rem, 14.5vw, 4.4rem); margin-bottom: 1rem; }
  .heros .chapo { font-size: 1.04rem; margin-bottom: 1.4rem; }
  .heros-actions { gap: .9rem 1.2rem; }
  .heros-prix { margin-top: 1.4rem; font-size: .88rem; }
  .indice-defile { display: none; }
  .nav .bouton { padding: .5rem .85rem; font-size: .88rem; white-space: nowrap; }
}

/* ---------- chaos : phrases une à une ---------- */
.chaos { position: relative; height: 760vh; }
.chaos-scene { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 var(--marge); overflow: hidden; }
.chaos-phrase { grid-area: 1 / 1; max-width: 22ch; text-align: center; font: 500 clamp(2.2rem, 6vw, 5.2rem)/1.04 var(--f-titre);
  will-change: opacity, transform; }
.js .chaos-phrase { opacity: 0; color: rgb(44, 49, 62); transform: translateY(18px); }
html:not(.js) .chaos { height: auto; }
html:not(.js) .chaos-scene { position: relative; height: auto; gap: 3rem; padding: 14vh var(--marge); }
html:not(.js) .chaos-phrase { grid-area: auto; }
.chaos-phrase .mot { display: inline-block; white-space: nowrap; }
.chaos-phrase .l { display: inline-block; transform-origin: 50% 60%; }
.chaos-phrase.fin { max-width: 20ch; }
.chaos-phrase .decider { display: block; color: var(--or-clair); text-shadow: 0 0 30px rgba(240, 213, 154, .45); }

/* ---------- les trois piliers ---------- */
.piliers { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.piliers li { padding-left: 1.2rem; border-left: 1px solid var(--trait); }
.piliers strong { display: block; font: 600 1.35rem/1.2 var(--f-titre); color: var(--or-clair); margin-bottom: .2rem; }
.piliers span { color: #cfc9bc; }

/* ---------- capacités : l'échange ---------- */
.capacite h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); margin-bottom: 1.1rem; }
.echange { margin-top: 1.8rem; padding: 1.2rem 1.3rem; border-left: 1px solid var(--or); background: linear-gradient(90deg, rgba(14, 21, 38, .9), rgba(14, 21, 38, .55)); border-radius: 0 var(--rayon) var(--rayon) 0; }
.replique { margin: 0; }
.replique + .replique { margin-top: .9rem; }
.replique b { display: block; font: 600 .78rem/1.3 var(--f-texte); letter-spacing: .04em; color: var(--brume); margin-bottom: .15rem; }
.replique q { quotes: none; font: italic 500 1.28rem/1.4 var(--f-titre); color: var(--ivoire); }
.replique.vault q { color: var(--or-clair); font-style: normal; }
.replique.vault b { color: var(--or); }
.replique q.tape::after { content: "▍"; margin-left: 2px; color: var(--or); animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

/* ---------- agents ---------- */
.agents-etiquettes { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.agents-etiquettes span { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; transform-origin: 0 0;
  margin: -0.65rem 0 0 1.1rem; font: 500 .82rem/1 var(--f-texte); letter-spacing: .03em; color: var(--or-clair);
  padding: .38rem .75rem; border: 1px solid var(--trait); border-radius: 999px; background: rgba(7, 11, 22, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .3s; }
@media (max-width: 760px) { .agents-etiquettes span { font-size: .72rem; padding: .25rem .45rem; } }

/* ---------- la journée ---------- */
.journee { position: relative; padding: 14vh var(--marge) 10vh; }
.journee-tete { max-width: 40rem; margin-bottom: 8vh; }
.journee-grille { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.2fr); gap: 4vw; }
.horloge { position: sticky; top: 30vh; align-self: start; font: 500 clamp(4rem, 9vw, 8.5rem)/1 var(--f-titre); font-variant-numeric: lining-nums tabular-nums; color: var(--or-clair); }
.horloge small { display: block; font: 400 .95rem/1.4 var(--f-texte); color: var(--brume); margin-top: .8rem; max-width: 14rem; }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 12vh; }
.moment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.moment:nth-child(even) .moment-media { order: 2; }
.moment-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--rayon); background: var(--nuit-2); }
.moment-media img, .moment-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.moment.vu .moment-media img, .moment.vu .moment-media video { transform: scale(1); }
.moment-media::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 0 1px var(--trait-doux) inset; border-radius: inherit; pointer-events: none; }
.moment-heure { display: none; font: 500 2.6rem/1 var(--f-titre); color: var(--or-clair); margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.moment p { font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.25 var(--f-titre); margin: 0; }
.moment .note { display: block; margin-top: .8rem; font: 400 .95rem/1.5 var(--f-texte); color: var(--brume); }
@media (max-width: 860px) {
  .journee-grille { grid-template-columns: 1fr; }
  .horloge { display: none; }
  .moment { grid-template-columns: 1fr; gap: 1.1rem; }
  .moment:nth-child(even) .moment-media { order: 0; }
  .moment-media { aspect-ratio: 4 / 5; }
  .moment-heure { display: block; }
  .moments { gap: 9vh; }
}

/* ---------- le coffre ---------- */
.garanties { list-style: none; padding: 0; margin: 2.2rem 0 1.6rem; display: grid; gap: 1.3rem; }
.garanties li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .9rem; align-items: start; }
.garanties svg { width: 1.6rem; height: 1.6rem; color: var(--or); margin-top: .15rem; }
.garanties strong { display: block; font: 600 1.22rem/1.25 var(--f-titre); color: var(--ivoire); }
.garanties span { color: #cbc5b8; font-size: .98rem; }
.transparence { font-size: .92rem; color: var(--brume); border-top: 1px solid var(--trait-doux); padding-top: 1rem; }

/* ---------- pour qui ---------- */
.pour-qui { padding: 16vh var(--marge); }
.pour-qui-tete { max-width: 44rem; margin-bottom: 7vh; }
.profils { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.profil { position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--nuit-2); margin: 0; min-height: 22rem; }
.profil:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.profil:nth-child(2), .profil:nth-child(3) { grid-column: span 7; }
.profil:nth-child(4), .profil:nth-child(5), .profil:nth-child(6), .profil:nth-child(7) { grid-column: span 3; }
.profil:nth-child(8), .profil:nth-child(9) { grid-column: span 6; }
.profil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.profil:hover img { transform: scale(1.04); }
.profil figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.2rem 1.1rem; background: linear-gradient(to top, rgba(7, 11, 22, .94), rgba(7, 11, 22, 0)); }
.profil figcaption strong { display: block; font: 600 1.45rem/1.15 var(--f-titre); }
.profil figcaption span { font-size: .93rem; color: #cfc9bc; }
.profil-lien { display: inline-block; margin-top: .55rem; font-size: .88rem; color: var(--or-clair); text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: .3em; }
.profil-lien::after { content: ""; position: absolute; inset: 0; }
.profil-lien:hover { text-decoration-color: var(--or-clair); }
@media (max-width: 960px) {
  .profils { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin: 0 calc(var(--marge) * -1); padding: 0 var(--marge) 1rem; scrollbar-width: none; }
  .profils::-webkit-scrollbar { display: none; }
  .profil { flex: 0 0 78%; min-height: 27rem; scroll-snap-align: center; }
}

/* ---------- installation ---------- */
.installation { padding: 14vh var(--marge); }
.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.etapes li { counter-increment: etape; position: relative; padding-top: 3.4rem; border-top: 1px solid var(--trait); }
.etapes li::before { content: counter(etape); position: absolute; top: .9rem; left: 0; font: 500 2rem/1 var(--f-titre); color: var(--or); }
.etapes strong { display: block; font: 600 1.35rem/1.2 var(--f-titre); margin-bottom: .4rem; }
.etapes span { color: #cbc5b8; font-size: .98rem; }
.prerequis { margin-top: 3.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 2rem; align-items: start; padding: 1.6rem 1.8rem; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: rgba(14, 21, 38, .72); max-width: 58rem; }
.prerequis h3 { font-size: 1.4rem; }
.prerequis ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; color: #d6d0c3; }
.prerequis li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--or); margin-right: .7rem; vertical-align: middle; }
@media (max-width: 960px) {
  .etapes { grid-template-columns: 1fr 1fr; }
  .prerequis { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; gap: 1.4rem; } .prerequis ul { grid-template-columns: 1fr; } }

/* ---------- l'offre ---------- */
.offre { padding: 14vh var(--marge); }
.offre-tete { text-align: center; max-width: 42rem; margin: 0 auto 6vh; }
.offre-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; max-width: 70rem; margin: 0 auto; align-items: stretch; }
.invitation { position: relative; padding: clamp(2rem, 4vw, 3.2rem); background: rgba(10, 15, 29, .94); border: 1px solid rgba(201, 161, 90, .55); border-radius: var(--rayon); }
.invitation::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201, 161, 90, .22); border-radius: calc(var(--rayon) - 7px); pointer-events: none; }
.invitation .palier { color: var(--or); font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.prix { display: flex; align-items: baseline; gap: .6rem; margin: .4rem 0 .2rem; }
.prix b { font: 500 clamp(4.4rem, 9vw, 6.6rem)/1 var(--f-titre); color: var(--ivoire); font-variant-numeric: lining-nums; }
.prix span { color: var(--brume); }
.prix-suite { color: var(--brume); font-size: .95rem; margin-bottom: 1.4rem; }
.compte-bloc { display: flex; gap: .9rem; margin: 0 0 1.8rem; font-variant-numeric: tabular-nums; }
.compte-bloc div { min-width: 4.2rem; padding: .7rem .5rem .55rem; text-align: center; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--verre); }
.compte-bloc b { display: block; font: 500 2rem/1 var(--f-titre); color: var(--or-clair); }
.compte-bloc span { font-size: .75rem; color: var(--brume); }
.inclus { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .65rem; }
.inclus li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .7rem; color: #ddd7ca; }
.inclus svg { width: 1.1rem; height: 1.1rem; color: var(--or); margin-top: .3rem; }
.cote { display: grid; gap: 1.5rem; }
.encart { padding: 1.8rem; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: rgba(14, 21, 38, .82); }
.encart h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.encart p { color: #cbc5b8; font-size: .98rem; }
.encart .montant { font: 500 1.9rem/1 var(--f-titre); color: var(--or-clair); margin: .2rem 0 .8rem; }
@media (max-width: 900px) { .offre-grille { grid-template-columns: 1fr; } .compte-bloc div { min-width: 0; flex: 1; } }

/* ---------- le questionnaire ---------- */
.dessin { padding: 14vh var(--marge); display: grid; grid-template-columns: minmax(0, 40rem) 1fr; }
.dessin-cadre { background: var(--nuit-voile); border: 1px solid var(--trait-doux); border-radius: var(--rayon); padding: clamp(1.4rem, 3vw, 2.6rem); }
.dessin-tete h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); margin-bottom: .7rem; }
.progression { display: flex; gap: .4rem; margin: 1.6rem 0 .5rem; }
.progression i { flex: 1; height: 2px; background: var(--trait-doux); transition: background .4s; }
.progression i.fait { background: var(--or); }
.etape-nom { font-size: .9rem; color: var(--brume); margin-bottom: 1.4rem; }
.etape-q { display: none; }
.etape-q.active { display: block; animation: entre .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes entre { from { opacity: 0; transform: translateX(14px); } }
.etape-q h3 { font-size: 1.7rem; margin-bottom: .4rem; }
.etape-q > p { color: var(--brume); font-size: .95rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
legend { font: 600 1.15rem/1.3 var(--f-titre); color: var(--ivoire); margin-bottom: .8rem; padding: 0; }
.legende-note { font: 400 .85rem/1.3 var(--f-texte); color: var(--brume); margin-left: .4rem; }
.puces { display: flex; flex-wrap: wrap; gap: .5rem; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce span { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px solid var(--trait-doux); border-radius: 999px; font-size: .94rem; color: #d6d0c3; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; user-select: none; }
.puce span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px var(--brume) inset; transition: background .2s, box-shadow .2s; }
.puce:hover span { border-color: var(--trait); }
.puce input:checked + span { border-color: var(--or); color: var(--ivoire); background: rgba(201, 161, 90, .12); }
.puce input:checked + span::before { background: var(--or-clair); box-shadow: 0 0 10px 2px rgba(240, 213, 154, .7); }
.puce input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 2px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.champ { display: grid; gap: .35rem; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: .9rem; color: var(--brume); }
.champ input { font: inherit; color: var(--ivoire); background: rgba(14, 21, 38, .9); border: 1px solid var(--trait-doux); border-radius: var(--rayon); padding: .8rem .9rem; transition: border-color .2s; }
.champ input:focus { border-color: var(--or); outline: none; }
.champ input:invalid:not(:placeholder-shown) { border-color: #b8645a; }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }
.verdict { margin: .4rem 0 1.4rem; padding: .9rem 1rem; border-radius: var(--rayon); font-size: .95rem; border: 1px solid var(--trait-doux); background: rgba(14, 21, 38, .7); }
.verdict.bon { border-color: rgba(201, 161, 90, .5); }
.verdict.alerte { border-color: rgba(184, 100, 90, .6); }
.verdict:empty { display: none; }
.navigation-etapes { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.retour { background: none; border: 0; color: var(--brume); font: inherit; cursor: pointer; padding: .6rem 0; }
.retour:hover { color: var(--ivoire); }
.retour[hidden] { visibility: hidden; display: inline; }
.resume { padding: 1.3rem; border: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: 1.6rem; background: rgba(201, 161, 90, .05); }
.resume h4 { margin: 0 0 .6rem; font: 600 1.3rem/1.2 var(--f-titre); color: var(--or-clair); }
.resume p { margin: 0 0 .6rem; color: #d6d0c3; font-size: .97rem; }
.resume ul { margin: .2rem 0 .8rem; padding-left: 1.1rem; color: #d6d0c3; font-size: .97rem; }
.coches { display: grid; gap: .8rem; margin: 1.2rem 0 1.6rem; }
.coche { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; align-items: start; font-size: .93rem; color: #cfc9bc; cursor: pointer; }
.coche input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--or); }
.coche a { color: var(--ivoire); }
.paiement-note { font-size: .86rem; color: var(--brume); margin-top: .9rem; display: flex; align-items: center; gap: .5rem; }
.erreur-form { color: #e7a197; font-size: .92rem; min-height: 1.2em; margin-top: .6rem; }
@media (max-width: 960px) { .dessin { grid-template-columns: 1fr; padding-top: 40vh; } }

/* ---------- questions fréquentes ---------- */
.faq { padding: 14vh var(--marge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4vw; }
.faq-liste { border-top: 1px solid var(--trait-doux); }
.faq details { border-bottom: 1px solid var(--trait-doux); background: rgba(7, 11, 22, .72); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem .2rem; font: 600 1.28rem/1.3 var(--f-titre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; border-right: 1px solid var(--or); border-bottom: 1px solid var(--or); transform: rotate(45deg) translateY(-3px); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { padding: 0 .2rem 1.3rem; margin: 0; color: #cfc9bc; max-width: 44rem; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* ---------- fin ---------- */
.final { min-height: 100vh; text-align: center; justify-content: center; }
.final h2 { font-size: clamp(2.8rem, 7vw, 6.4rem); max-width: 16ch; margin: 0 auto 2rem; }
.final .colonne { max-width: 60rem; }

/* ---------- pied ---------- */
.pied { padding: 5rem var(--marge) 2.5rem; border-top: 1px solid var(--trait-doux); background: var(--nuit); color: var(--brume); font-size: .92rem; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.pied-apropos p { margin: 1rem 0 0; max-width: 24rem; line-height: 1.6; }
.pied-titre { font: 600 .78rem/1.2 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin: .4rem 0 1rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied a { color: var(--brume); text-decoration: none; transition: color .2s; }
.pied a:hover { color: var(--ivoire); }
.pied .marque { color: var(--ivoire); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--trait-doux); font-size: .85rem; }
.pied-bas p { margin: 0; }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.pied .mention { margin: 1.2rem 0 0; font-size: .8rem; max-width: 60rem; }
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-apropos { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied-grille { grid-template-columns: 1fr; gap: 2rem; } .pied { padding-bottom: 6rem; } }

/* ---------- le majordome ---------- */
.majordome-bouton { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 40; display: inline-flex; align-items: center; gap: .65rem; padding: .6rem 1.05rem .6rem .6rem; border-radius: 999px; border: 1px solid rgba(201, 161, 90, .55); background: rgba(10, 15, 29, .94); color: var(--ivoire); font: 500 .95rem/1 var(--f-texte); cursor: pointer; box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8); transition: transform .3s, border-color .3s; }
.majordome-bouton:hover { transform: translateY(-2px); border-color: var(--or); }
.monogramme { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f0d59a, #9b7634); color: var(--nuit); font: 600 1.15rem/1 var(--f-titre); }
.majordome-bouton .pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--or-clair); box-shadow: 0 0 8px 2px rgba(240, 213, 154, .7); }
.majordome { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 50; width: min(25rem, calc(100vw - 2.4rem)); height: min(38rem, calc(100vh - 2.4rem)); display: flex; flex-direction: column; background: #0a0f1d; border: 1px solid rgba(201, 161, 90, .45); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); transform-origin: 100% 100%; transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.majordome[hidden] { display: flex; opacity: 0; transform: scale(.92) translateY(10px); pointer-events: none; visibility: hidden; }
.majordome-tete { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--trait-doux); }
.majordome-tete strong { display: block; font: 600 1.2rem/1.1 var(--f-titre); }
.majordome-tete span { font-size: .8rem; color: var(--brume); }
.majordome-fermer { margin-left: auto; background: none; border: 0; color: var(--brume); cursor: pointer; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; }
.majordome-fermer:hover { color: var(--ivoire); background: rgba(255, 255, 255, .05); }
.majordome-fil { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; overscroll-behavior: contain; }
.bulle { max-width: 88%; padding: .75rem .95rem; border-radius: 18px; font-size: .95rem; line-height: 1.5; white-space: pre-wrap; }
.bulle.lui { align-self: flex-start; background: #121a2e; border: 1px solid var(--trait-doux); border-bottom-left-radius: 6px; }
.bulle.vous { align-self: flex-end; background: rgba(201, 161, 90, .16); border: 1px solid rgba(201, 161, 90, .35); border-bottom-right-radius: 6px; }
.bulle.attente { color: var(--brume); }
.bulle.attente::after { content: "…"; animation: clignote 1s steps(1) infinite; }
.suggestions { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.1rem .8rem; }
.suggestions button { font: inherit; font-size: .84rem; color: #d6d0c3; background: transparent; border: 1px solid var(--trait-doux); border-radius: 999px; padding: .4rem .75rem; cursor: pointer; }
.suggestions button:hover { border-color: var(--or); color: var(--ivoire); }
.majordome-saisie { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--trait-doux); }
.majordome-saisie textarea { flex: 1; resize: none; font: inherit; font-size: .95rem; color: var(--ivoire); background: #0e1526; border: 1px solid var(--trait-doux); border-radius: 16px; padding: .65rem .75rem; max-height: 8rem; }
.majordome-saisie textarea:focus { outline: none; border-color: var(--or); }
.majordome-saisie button { flex: 0 0 auto; width: 2.9rem; border-radius: 14px; border: 0; background: var(--or); color: var(--nuit); cursor: pointer; display: grid; place-items: center; }
.majordome-saisie button[disabled] { opacity: .5; }
@media (max-width: 560px) {
  .majordome { right: 0; bottom: 0; width: 100vw; height: 100svh; border-radius: 0; border: 0; }
  .majordome-bouton .texte { display: none; }
  .majordome-bouton { padding: .45rem; }
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .apparait { opacity: 1; transform: none; }
  .chaos { height: auto; }
  .chaos-scene { position: relative; height: auto; display: grid; gap: 3rem; padding: 14vh var(--marge); }
  .chaos-phrase { grid-area: auto; opacity: 1; transform: none; filter: none; color: var(--ivoire); }
}

/* ---------- pages simples (mentions, conditions, bienvenue) ---------- */
.page-simple { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; padding: 9rem var(--marge) 5rem; }
.page-simple h1 { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; margin-bottom: 1.5rem; }
.page-simple h2 { font-size: 1.7rem; margin: 2.4rem 0 .8rem; }
.page-simple p, .page-simple li { color: #d6d0c3; }
.page-simple ol, .page-simple ul { padding-left: 1.2rem; }

/* ---------- téléphone : le cerveau en haut, le texte en bas ---------- */
@media (max-width: 760px) {
  .chapitre { align-items: flex-end; padding-top: 44vh; padding-bottom: 9vh; }
  .chapitre.centre, .final { align-items: center; padding-top: 18vh; }
  .chapitre .colonne::before { inset: -14% -8%; }
  #agents { min-height: 140vh !important; padding-top: 52vh !important; }
  #coffre { min-height: 120vh !important; }
  .capacite h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .chapo { font-size: 1.02rem; }
  .echange { margin-top: 1.2rem; padding: 1rem 1.05rem; }
  .replique q { font-size: 1.12rem; }
}

/* ---------- verre : les cartes ont du relief, un reflet, et respirent au survol ---------- */
.encart, .invitation, .prerequis, .dessin-cadre, .resume, .verdict, .echange, .frise li, .option-suivi, .faq-liste details, .majordome {
  background-image: var(--verre); box-shadow: var(--ombre-verre);
}
.encart, .prerequis, .frise li, .faq-liste details, .profil, .moment-media {
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s, border-color .6s;
}
@media (hover: hover) {
  .encart:hover, .prerequis:hover, .frise li:hover, .faq-liste details:hover { transform: translateY(-4px); border-color: rgba(201, 161, 90, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 34px 70px -30px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(201, 161, 90, .35); }
  .profil:hover, .moment-media:hover { transform: translateY(-4px) scale(1.01); }
}
.echange { border-left: 0; border-radius: var(--rayon); box-shadow: inset 2px 0 0 rgba(201, 161, 90, .85), var(--ombre-verre); }
.champ input { border-radius: var(--rayon-petit); }
.faq-liste details { border-radius: var(--rayon-petit); }

/* ---------- il vous connaît un peu plus chaque jour ---------- */
.croissance { min-height: 170vh; align-items: flex-start; padding-top: 22vh; }
.frise { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1rem; position: relative; }
.frise::before { content: ""; position: absolute; left: 1.15rem; top: 1.4rem; bottom: 1.4rem; width: 1px;
  background: linear-gradient(180deg, rgba(201, 161, 90, .15), rgba(240, 213, 154, .9) 70%, rgba(215, 236, 255, .9)); box-shadow: 0 0 12px rgba(240, 213, 154, .5); }
.frise li { position: relative; padding: 1.15rem 1.3rem 1.15rem 3.1rem; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background-color: rgba(10, 15, 29, .72); }
.frise li::before { content: ""; position: absolute; left: .82rem; top: 1.45rem; width: .68rem; height: .68rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--or) 70%); box-shadow: 0 0 0 4px rgba(201, 161, 90, .14), 0 0 16px 3px rgba(240, 213, 154, .55); }
.frise li:nth-child(n+3)::before { background: radial-gradient(circle at 35% 30%, #ffffff, #b9dcff 70%); box-shadow: 0 0 0 4px rgba(185, 220, 255, .12), 0 0 18px 4px rgba(215, 236, 255, .6); }
.frise-temps { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--or); margin-bottom: .25rem; }
.frise strong { display: block; font: 500 1.55rem/1.15 var(--f-titre); color: var(--ivoire); }
.frise-texte > span:last-child { display: block; color: #cbc5b8; font-size: .97rem; margin-top: .3rem; }

/* chaque étape a son médaillon : il s'anime à l'approche, prend du relief sous la souris, et un reflet le traverse */
.frise li { display: grid; grid-template-columns: minmax(0, 1fr) 6.4rem; gap: 1.1rem; align-items: center; overflow: hidden; isolation: isolate; }
.frise li::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(18rem circle at var(--mx, 80%) var(--my, 30%), rgba(240, 213, 154, .16), transparent 60%); transition: opacity .5s; }
.frise li:hover::after, .frise li.anime::after { opacity: 1; }
.frise-visuel { position: relative; width: 6.4rem; height: 6.4rem; border-radius: 50%; transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  background: radial-gradient(circle at 50% 42%, rgba(30, 40, 66, .9), rgba(7, 11, 22, .95) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -10px 18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 161, 90, .22), 0 18px 34px -16px rgba(0, 0, 0, .9);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .6s; }
.frise li.anime .frise-visuel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -10px 18px rgba(0, 0, 0, .5), 0 0 0 1px rgba(240, 213, 154, .4), 0 0 34px -8px rgba(240, 213, 154, .35), 0 18px 34px -16px rgba(0, 0, 0, .9); }
.frise-visuel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 246, 220, .22) 50%, transparent 65%); background-size: 260% 100%; background-position: 120% 0; }
.frise li.anime .frise-visuel::after { animation: fv-reflet 5.5s ease-in-out infinite; }
@keyframes fv-reflet { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }
.frise-visuel svg { width: 100%; height: 100%; overflow: visible; }
.frise-visuel * { animation-play-state: paused !important; }
.frise li.anime .frise-visuel * { animation-play-state: running !important; }
.frise-visuel circle, .frise-visuel rect, .frise-visuel g { transform-box: fill-box; transform-origin: center; }

/* le premier jour : une constellation se forme, point par point */
.fv-loin { fill: #8c95a8; opacity: .35; animation: fv-derive 9s ease-in-out infinite alternate; }
@keyframes fv-derive { to { transform: translate(3px, -2px); opacity: .6; } }
.fv-trait { fill: none; stroke: rgba(240, 213, 154, .65); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fv-trace 7s ease-in-out infinite both; }
@keyframes fv-trace { 0%, 34% { stroke-dashoffset: 1; opacity: 1; } 62%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fv-n { fill: #fff3d6; filter: drop-shadow(0 0 3px rgba(240, 213, 154, .9)); opacity: 0; animation: fv-nait 7s cubic-bezier(.2, .8, .2, 1) infinite both; animation-delay: var(--d); }
@keyframes fv-nait { 0% { opacity: 0; transform: scale(.2); } 6% { opacity: 1; transform: scale(1.5); } 12%, 80% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.6); } }

/* après quelques semaines : la carte est prête avant que le temps n'y arrive */
.fv-ligne { stroke: rgba(238, 232, 220, .25); stroke-width: 1.2; }
.fv-cran { stroke: rgba(238, 232, 220, .2); stroke-width: 1; }
.fv-curseur { fill: var(--or-clair); filter: drop-shadow(0 0 4px rgba(240, 213, 154, .9)); animation: fv-marche 6s linear infinite; }
@keyframes fv-marche { 0% { transform: translateX(0); } 80% { transform: translateX(58px); } 100% { transform: translateX(58px); opacity: 0; } }
.fv-cible { fill: none; stroke: #d7ecff; stroke-width: 1.4; opacity: .25; animation: fv-cible 6s ease-out infinite; }
@keyframes fv-cible { 0%, 22% { opacity: .25; fill: transparent; } 30%, 80% { opacity: 1; fill: rgba(215, 236, 255, .35); } 84% { fill: #fff; } 100% { opacity: .25; fill: transparent; } }
.fv-onde { fill: none; stroke: rgba(215, 236, 255, .7); stroke-width: 1; opacity: 0; animation: fv-onde 6s ease-out infinite; }
@keyframes fv-onde { 0%, 25% { opacity: 0; transform: scale(.3); } 30% { opacity: .9; } 50%, 100% { opacity: 0; transform: scale(1.3); } }
.fv-avance { opacity: 0; animation: fv-avance 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes fv-avance { 0%, 30% { opacity: 0; transform: translateY(6px); } 40%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fv-carte { fill: rgba(240, 213, 154, .14); stroke: var(--or-clair); stroke-width: 1; }
.fv-coche { fill: none; stroke: #fff3d6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fv-coche 6s ease-out infinite; }
@keyframes fv-coche { 0%, 40% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
.fv-lien { stroke: rgba(240, 213, 154, .5); stroke-width: 1; stroke-dasharray: 2 2; }

/* au fil des mois : ses lignes prennent la longueur et le rythme des vôtres */
.fv-vous rect { fill: rgba(238, 232, 220, .55); }
.fv-sep { stroke: rgba(201, 161, 90, .3); stroke-width: 1; stroke-dasharray: 2 3; }
.fv-lui rect { fill: #f0d59a; transform-origin: left center; transform: scaleX(0); animation: fv-ecrit 6.5s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: var(--d); }
@keyframes fv-ecrit { 0% { transform: scaleX(0); opacity: 1; filter: none; } 22% { transform: scaleX(1); } 55% { filter: drop-shadow(0 0 3px rgba(240, 213, 154, .95)); } 75% { transform: scaleX(1); opacity: 1; filter: none; } 90%, 100% { transform: scaleX(1); opacity: 0; } }
.fv-vous { animation: fv-echo 6.5s ease-in-out infinite; }
@keyframes fv-echo { 0%, 40% { opacity: .8; } 55% { opacity: 1; filter: drop-shadow(0 0 2px rgba(238, 232, 220, .8)); } 75%, 100% { opacity: .8; } }
.fv-plume { fill: #fff; filter: drop-shadow(0 0 4px #f0d59a); animation: fv-plume 6.5s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fv-plume { 0% { transform: translate(0, 0); opacity: 1; } 8% { transform: translate(62px, 0); } 11% { transform: translate(0, 10px); } 19% { transform: translate(48px, 10px); } 22% { transform: translate(0, 20px); } 30% { transform: translate(56px, 20px); opacity: 1; } 36%, 100% { transform: translate(56px, 20px); opacity: 0; } }

/* avec les années : les cercles du temps s'élargissent, les domaines de la vie gravitent autour du cœur */
.fv-ride { fill: none; stroke: rgba(240, 213, 154, .55); stroke-width: .8; opacity: 0; animation: fv-ride 4.8s ease-out infinite; animation-delay: var(--d); }
@keyframes fv-ride { 0% { transform: scale(.16); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.fv-orbite { fill: none; stroke: rgba(238, 232, 220, .2); stroke-width: 1.4; }
.fv-tour { animation: fv-tourne var(--v) linear infinite; }
@keyframes fv-tourne { to { transform: rotate(360deg); } }
.fv-astre { fill: #fff1cf; filter: drop-shadow(0 0 3px rgba(240, 213, 154, .95)); }
.fv-astre.bleu { fill: #e6f3ff; filter: drop-shadow(0 0 3px rgba(185, 220, 255, .95)); }
.fv-coeur { fill: #fff3d6; filter: drop-shadow(0 0 6px rgba(240, 213, 154, .95)); animation: fv-bat 2.4s ease-in-out infinite; }
@keyframes fv-bat { 50% { transform: scale(1.18); } }

@media (max-width: 560px) {
  .frise li { grid-template-columns: minmax(0, 1fr) 4.4rem; gap: .7rem; padding-right: .9rem; }
  .frise-visuel { width: 4.4rem; height: 4.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .frise-visuel *, .frise-visuel::after { animation: none !important; }
  .fv-n, .fv-avance, .fv-trait { opacity: 1; transform: none; stroke-dashoffset: 0; }
  .fv-coche { stroke-dashoffset: 0; }
  .fv-lui rect { transform: none; }
  .fv-curseur { transform: translateX(40px); }
  .fv-plume, .fv-onde, .fv-ride { opacity: 0; }
}

/* ---------- l'accompagnement dans le questionnaire ---------- */
.option-suivi { display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; align-items: start; margin: 0 0 1.2rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(201, 161, 90, .4); border-radius: var(--rayon); background-color: rgba(201, 161, 90, .06); cursor: pointer; transition: border-color .3s, background-color .3s; }
.option-suivi input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--or); }
.option-suivi:has(input:checked) { border-color: var(--or-clair); background-color: rgba(201, 161, 90, .14); box-shadow: var(--ombre-verre), 0 0 36px -14px rgba(240, 213, 154, .55); }
.option-suivi-texte strong { display: block; font: 500 1.3rem/1.2 var(--f-titre); color: var(--ivoire); }
.option-suivi-texte > span { display: block; font-size: .92rem; color: #cfc9bc; margin-top: .2rem; }
.option-suivi-texte b { color: var(--or-clair); font-weight: 600; }

/* ---------- étiquettes des greffes et des régions ---------- */
.greffes-etiquettes { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.greffes-etiquettes span { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; margin: -0.7rem 0 0 .9rem;
  font: 500 .8rem/1 var(--f-texte); letter-spacing: .02em; padding: .38rem .75rem; border-radius: 999px; }
.greffes-etiquettes .greffe { color: var(--ivoire); border: 1px solid rgba(215, 236, 255, .35); background: rgba(7, 11, 22, .74);
  box-shadow: 0 0 18px -6px rgba(215, 236, 255, .6); transition: box-shadow .4s, border-color .4s; }
.greffes-etiquettes .greffe::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: .45rem; vertical-align: middle;
  background: #fff; box-shadow: 0 0 8px 2px rgba(215, 236, 255, .9); }
.greffes-etiquettes .greffe.vive { border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 30px 2px rgba(215, 236, 255, .75); }
.greffes-etiquettes .region { font: 500 1.05rem/1 var(--f-titre); letter-spacing: .04em; color: var(--or-clair); padding: .4rem .85rem;
  border: 1px solid var(--trait); background: rgba(7, 11, 22, .6); text-shadow: 0 0 14px rgba(240, 213, 154, .6); }
@media (max-width: 760px) { .greffes-etiquettes span { font-size: .7rem; padding: .26rem .5rem; } .greffes-etiquettes .region { font-size: .9rem; } }

/* ---------- les tâches que portent les éclairs ---------- */
.taches-eclairs { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.taches-eclairs .tache { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; margin: -1.6rem 0 0 -.4rem;
  font: 500 .7rem/1 var(--f-texte); letter-spacing: .05em; color: #eef6ff; padding: .3rem .55rem .3rem .45rem; border-radius: 999px;
  border: 1px solid rgba(215, 236, 255, .32); background: rgba(7, 11, 22, .62); text-shadow: 0 0 10px rgba(215, 236, 255, .7);
  box-shadow: 0 0 16px -6px rgba(215, 236, 255, .7); transition: border-color .25s, box-shadow .25s; }
.taches-eclairs .tache::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: .4rem; vertical-align: middle;
  background: #fff; box-shadow: 0 0 8px 2px rgba(215, 236, 255, .95); }
.taches-eclairs .tache.arrivee { border-color: rgba(255, 255, 255, .85); box-shadow: 0 0 26px 1px rgba(215, 236, 255, .8); }
@media (max-width: 760px) { .taches-eclairs .tache { font-size: .64rem; padding: .24rem .45rem .24rem .38rem; } }

/* ---------- le majordome tend la main ---------- */
.bulle-action { display: flex; width: fit-content; margin-top: .7rem; white-space: nowrap; }
.majordome-bouton.invite { border-color: var(--or-clair); animation: invite 2.6s ease-in-out 3; }
@keyframes invite { 0%, 100% { box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8); } 50% { box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8), 0 0 0 6px rgba(240, 213, 154, .14), 0 0 34px 4px rgba(240, 213, 154, .4); } }
@media (max-width: 560px) { .majordome-bouton.invite .texte { display: inline; font-size: .82rem; } .majordome-bouton.invite { padding: .45rem .9rem .45rem .45rem; } }

/* Mesure des annonces : le bandeau naît au premier geste, les deux choix pèsent autant */
.mesure { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 45; width: min(24rem, calc(100vw - 2.4rem)); padding: 1rem 1.1rem; background: rgba(10, 15, 29, .96); border: 1px solid rgba(201, 161, 90, .4); border-radius: 18px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .9); color: var(--ivoire); font: 400 .88rem/1.5 var(--f-texte); }
.mesure p { margin: 0; }
.mesure a { color: var(--or-clair); }
.mesure-choix { display: flex; gap: .6rem; margin-top: .8rem; }
.mesure-choix button { flex: 1; padding: .6rem .8rem; border-radius: 999px; border: 1px solid rgba(201, 161, 90, .55); background: transparent; color: var(--ivoire); font: 500 .9rem/1 var(--f-texte); cursor: pointer; }
.mesure-choix button:hover, .mesure-choix button:focus-visible { border-color: var(--or-clair); background: rgba(201, 161, 90, .12); }
@media (max-width: 640px) { .mesure { left: 1rem; right: 1rem; width: auto; bottom: 5rem; } }

/* ---------- pages par métier ---------- */
.page-metier { position: relative; z-index: 2; max-width: 74rem; margin: 0 auto; padding: 8.5rem var(--marge) 4rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 4rem; }
.metier-tete { grid-column: 1; align-self: center; }
.metier-fil { font-size: .85rem; color: var(--brume); margin-bottom: 1.4rem; }
.metier-fil a { color: var(--or); text-decoration: none; }
.metier-tete h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: .98; margin-bottom: 1.4rem; }
.metier-tete .chapo { margin-bottom: 2rem; }
.metier-image { grid-column: 2; grid-row: 1; margin: 0; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 0 0 1px var(--trait-doux), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.metier-image img { width: 100%; height: 100%; object-fit: cover; }
.metier-corps, .metier-faq, .metier-fin, .metier-autres { grid-column: 1 / -1; max-width: 46rem; }
.metier-corps { margin-top: 3rem; }
.metier-corps h2, .metier-faq h2, .metier-autres h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 3rem 0 1rem; }
.metier-corps p, .metier-corps li { color: #d6d0c3; }
.metier-corps ul { padding-left: 1.1rem; display: grid; gap: .5rem; }
.metier-corps li::marker { color: var(--or); }
.metier-corps .echange { margin: 2rem 0; }
.metier-faq details { border-bottom: 1px solid var(--trait-doux); background: rgba(7, 11, 22, .72); border-radius: var(--rayon-petit); margin-bottom: .4rem; }
.metier-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1rem; font: 600 1.22rem/1.3 var(--f-titre); }
.metier-faq summary::-webkit-details-marker { display: none; }
.metier-faq details p { padding: 0 1rem 1.2rem; margin: 0; color: #cfc9bc; }
.metier-fin { margin-top: 3rem; padding: 2rem; border: 1px solid rgba(201, 161, 90, .5); border-radius: var(--rayon); background: rgba(10, 15, 29, .94); }
.metier-fin p { color: #ddd7ca; }
.metier-fin a:not(.bouton) { color: var(--or-clair); }
.metier-autres ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.metier-autres a { display: inline-block; padding: .5rem .95rem; border: 1px solid var(--trait-doux); border-radius: 999px; color: #d6d0c3; text-decoration: none; }
.metier-autres a:hover { border-color: var(--or); color: var(--ivoire); }
@media (max-width: 860px) {
  .page-metier { grid-template-columns: 1fr; padding-top: 6.5rem; }
  .metier-image { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .metier-tete { grid-column: 1; }
}