/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   LES PAGES ANNEXES DU SITE VITRINE (19/10/2026) — Écrire à Orkios, Mentions légales, Vos données, Vos données pendant la
   visite, la page introuvable. Elles chargent assets/style.css (la barre, le pied, les gestes, les jetons) PUIS ce fichier.
   Maquettes relues par le directeur artistique : capture/design-site-360/ (_p5 à _p8, _p10). Préfixes : ax- (commun),
   ec- (écrire à Orkios), ml- (la carte d'identité), cv- (le coffre de verre), gx- (la gare de la 404), ac- (l'accueil de la visite).
   Une scène dessinée à 1 022 px se met à l'échelle de la largeur (annexes : script commun) ; sur téléphone, les pages
   qui portent un texte légal passent en colonne LISIBLE (.ax-etroit) au lieu de rapetisser.
   🔴 L'étiquette orange .ax-afaire marque ce qu'Eddy doit trancher ou brancher avant publication : un seul composant,
   à retirer d'un coup quand tout est réglé.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
.annexe { --outil: var(--sans); }
.annexe .r1 { --v: var(--v1); --p: var(--p1); --c: var(--c1); --e: var(--e1); --k: var(--k1); }
.annexe .r2 { --v: var(--v2); --p: var(--p2); --c: var(--c2); --e: var(--e2); --k: var(--k2); }
.annexe .r3 { --v: var(--v3); --p: var(--p3); --c: var(--c3); --e: var(--e3); --k: var(--k3); }
.annexe .r4 { --v: var(--v4); --p: var(--p4); --c: var(--c4); --e: var(--e4); --k: var(--k4); }
.annexe .r5 { --v: var(--v5); --p: var(--p5); --c: var(--c5); --e: var(--e5); --k: var(--k5); }
.annexe .r6 { --v: var(--v6); --p: var(--p6); --c: var(--c6); --e: var(--e6); --k: var(--k6); }
.annexe .pic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lx-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ax-heros { background: radial-gradient(60% 80% at 0% 0%, rgba(var(--k3), .14), transparent 60%), radial-gradient(50% 70% at 100% 0%, rgba(var(--k6), .16), transparent 60%), var(--fond); padding-block: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px); }
.ax-tete { margin: 0 auto 30px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 30px; }
.ax-tete .titre-xl em { white-space: nowrap; }
.ax-tete .main { margin-top: 10px; }
.ax-cadre { position: relative; max-width: 1328px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px -34px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--ombre), .08); }
.ax-cadre > .ax-scene { position: relative; width: 1022px; transform-origin: 0 0; }
.ax-scene > * { position: absolute; }
.ax-gestes { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 30px auto 0; }
.ax-gestes .geste { width: 280px; justify-content: space-between; }
.annexe .geste:not(.geste--pastel) .geste__marque { color: var(--g2); }
.ax-date { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--p); box-shadow: inset 0 0 0 1px rgba(var(--k), .4); font: 500 13px/1 var(--sans); color: var(--e); white-space: nowrap; }
.ax-date .ico { width: 16px; height: 16px; }
.ax-afaire { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 9px; border-radius: 6px; background: #FFF4D6; box-shadow: inset 0 0 0 1.5px #E8B200; font: 600 11px/1.2 var(--sans); color: #775900; white-space: nowrap; vertical-align: middle; }
.ax-afaire svg, .annexe .ax-afaire .pic { width: 12px; height: 12px; }
.ax-puces { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ax-puces li { display: flex; align-items: center; gap: 9px; font: 400 15px/1.3 var(--sans); color: var(--appui); }
.ax-puces li .pic { width: 18px; height: 18px; color: var(--c); }
.ax-lien { color: var(--accent-encre); font-weight: 600; text-decoration: none; }
.ax-lien:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .ax-tete { grid-template-columns: minmax(0, 1fr); }
  .ax-tete .titre-xl em { white-space: normal; }
  .ax-tete > :last-child { justify-self: start; }
  .ax-gestes .geste { width: 100%; }
  .ax-afaire { white-space: normal; }
}

/* ─── 1 · Écrire à Orkios : la planète d'Orkios et la lettre déjà commencée ───
   Maquette validée le 19/10/2026 (capture/design-site-360/_p5). Eddy : « ça doit être un contact formulaire, on a déjà
   mis un système de formulaire sur la page de simulation, inspire-toi ». « Pareil que » : le contact des visiteurs
   d'Orkios (composants/visite/EcrireAOrkios.jsx, le-contact.js) — la planète violette, son anneau où tourne une lettre
   et son halo ; la lettre déjà commencée et ses cases (le message, le mail ou le téléphone, l'accord, le nom en
   signature) ; l'enveloppe, le cachet « ORKIOS · PARTI ». L'enveloppe se cachette SUR PLACE et la planète passe au vert :
   la vraie fenêtre a retiré l'orbite de la lettre le 10/10. Aucun gras : un titre de message se dit en couleur.
   Rien ne s'anime dans un <svg> : le cachet est un dessin immobile, c'est son cadre qui bouge. Préfixe ec-. */
.annexe--ecrire-a-orkios .surtitre, .annexe--ecrire-a-orkios .ax-afaire { font-weight: 500; }
.annexe--ecrire-a-orkios .main { font-weight: 400; }   /* la main sans graisse : sous Windows, Segoe Script passe en gras à 600 */
.ec-tete-d { white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--filet), 0 8px 16px -12px rgba(var(--ombre), .5); font: 400 13.5px/1.3 var(--sans); color: var(--appui); }
.ec-tete-d .pic { width: 16px; height: 16px; color: var(--c1); }
.ec-tete-d a { color: var(--accent-encre); text-decoration: none; }
.ec-tete-d a:hover { text-decoration: underline; }

/* la scène : la lettre à gauche, le ciel de la planète à droite */
.ec { position: relative; margin: 0 auto; display: grid; grid-template-columns: 566px minmax(0, 1fr); padding: 34px 0 22px 34px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(55% 60% at 80% 38%, rgba(var(--k3), .16), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(var(--k6), .14), transparent 70%), linear-gradient(180deg, #FBFAFE, #F2F3FB);
  box-shadow: 0 26px 60px -34px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--ombre), .08); }
.ec * { transition: opacity .7s ease, transform .9s cubic-bezier(.22, .8, .25, 1), background .6s, box-shadow .6s, border-color .6s; }
.ec-etoiles { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.3px 1.3px at 62.6% 9%, rgba(var(--k3), .6) 50%, transparent), radial-gradient(1.2px 1.2px at 95.9% 14%, rgba(var(--k2), .6) 50%, transparent),
    radial-gradient(1.4px 1.4px at 68.5% 81%, rgba(var(--k6), .6) 50%, transparent), radial-gradient(1.1px 1.1px at 97.8% 87%, rgba(var(--k3), .5) 50%, transparent),
    radial-gradient(1.2px 1.2px at 60.7% 47%, rgba(var(--k2), .45) 50%, transparent), radial-gradient(1.3px 1.3px at 88% 5%, rgba(var(--k5), .45) 50%, transparent); }
.ec-gauche { position: relative; z-index: 2; min-width: 0; grid-column: 1; grid-row: 1; }

/* le ciel : la planète d'Orkios, son orbite, trois petites planètes sans nom (les liens sont dans la bande du bas) */
.ec-ciel { position: relative; grid-column: 2; grid-row: 1; height: 360px; margin-top: 86px; pointer-events: none; --k: 1; }
.ec-ciel-dedans { position: absolute; left: 50%; top: 0; width: 400px; height: 360px; margin-left: -200px; transform-origin: 50% 0; transform: scale(var(--k)); }
.ec-ciel-dedans > * { position: absolute; }
.ec-orbite-g { left: 24px; top: 14px; width: 352px; height: 316px; border-radius: 50%; border: 1.5px dashed rgba(var(--k3), .28); }
.ec-halo { left: 45px; top: 17px; width: 310px; height: 310px; border-radius: 50%; filter: blur(4px); background: radial-gradient(circle, rgba(var(--k3), .55) 0%, rgba(var(--k3), 0) 68%); animation: ecLuit 2s ease-in-out infinite; }
.ec-halo--vert { background: radial-gradient(circle, rgba(var(--k1), .55) 0%, rgba(var(--k1), 0) 68%); opacity: 0; animation: none; }
@keyframes ecLuit { 0%, 100% { opacity: .35; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.1); } }
.ec-anneau { left: 82px; top: 54px; width: 236px; height: 236px; border-radius: 50%; border: 2px dashed rgba(var(--k3), .55); animation: ecTourne 14s linear infinite; }
@keyframes ecTourne { to { transform: rotate(360deg); } }
.ec-pli { position: absolute; left: 50%; top: -12px; margin-left: -16px; display: grid; place-items: center; width: 32px; height: 24px; border-radius: 5px; background: #FFFFFF; color: var(--c3); box-shadow: 0 0 0 1.5px rgba(var(--k3), .45), 0 6px 10px -6px rgba(var(--k3), .9); }
.ec-pli .pic { width: 15px; height: 15px; }
.ec-boule { left: 118px; top: 90px; width: 164px; height: 164px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0 6%, var(--v3) 42%, var(--c3) 100%); box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 10px rgba(var(--k3), .5), 0 26px 40px -18px rgba(var(--k3), .95); }
.ec-boule .pic { width: 58px; height: 58px; stroke-width: 1.6; }
.ec-boule--verte { opacity: 0; background: radial-gradient(circle at 32% 28%, #FFFFFF 0 6%, var(--v1) 42%, var(--c1) 100%); box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 10px rgba(var(--k1), .5), 0 26px 40px -18px rgba(var(--k1), .95); }
.ec-boule--verte .pic { stroke-width: 2.4; }
.ec-nom { left: 200px; top: 276px; transform: translateX(-50%); height: 34px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 10px 20px -12px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--k3), .35); font: 500 14px/1 var(--sans); color: var(--encre); white-space: nowrap; }
.ec-nom > span { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; }
.ec-nom i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v3), var(--c3)); color: #FFFFFF; }
.ec-nom i .pic { width: 13px; height: 13px; stroke-width: 2.2; }
.ec-nom-b { position: absolute; inset: 0; justify-content: center; border-radius: 999px; background: #FFFFFF; opacity: 0; }
.ec-nom-b i { background: linear-gradient(180deg, var(--v1), var(--c1)); }
.ec-sat { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0 7%, var(--v) 45%, var(--c) 100%); box-shadow: 0 0 0 3px #FFFFFF, 0 8px 14px -8px rgba(var(--k), .9); }
.ec-sat .pic { width: 15px; height: 15px; stroke-width: 2; }
/* message parti : la planète passe au vert */
.ec[data-t="4"] .ec-halo--violet, .ec[data-t="5"] .ec-halo--violet { opacity: 0; animation: none; }
.ec[data-t="4"] :is(.ec-halo--vert, .ec-boule--verte, .ec-nom-b), .ec[data-t="5"] :is(.ec-halo--vert, .ec-boule--verte, .ec-nom-b) { opacity: 1; }

/* ─── la lettre déjà commencée (`ork-lettre`) : une vraie feuille, de vraies cases ─── */
.ec-pliure { position: relative; perspective: 1800px; transition: opacity .5s ease, transform .6s ease, visibility 0s; }
.ec-feuille { position: relative; margin: 0; padding: 24px 28px 22px 38px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 30px 50px -30px rgba(var(--ombre), .6), 0 0 0 1px rgba(var(--ombre), .07); transform-origin: 50% 0; }
.ec-feuille::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 3px 0 0 3px; background: linear-gradient(180deg, var(--v3), var(--v6)); }
.ec-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ec-tirets { display: flex; gap: 6px; }
.ec-tirets i { width: 22px; height: 4px; border-radius: 2px; opacity: .85; }
.ec-date { display: inline-flex; align-items: center; gap: 7px; font: 400 13px/1 var(--sans); color: var(--appui); white-space: nowrap; }
.ec-date .pic { width: 15px; height: 15px; color: var(--c2); }
.ec-bonjour { position: relative; width: max-content; max-width: 100%; margin: 16px 0 12px; overflow: hidden; font: 400 27px/1.2 var(--main); color: var(--encre); white-space: nowrap; }
.ec-bonjour::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform-origin: 100% 50%; transform: scaleX(0); }
.ec-cap { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c3); }
.ec-cap .pic { width: 14px; height: 14px; }
.ec-message { position: relative; display: block; }
.ec-corps { display: block; width: 100%; height: 120px; margin-top: 8px; padding: 5px 2px 0; border: 0; border-radius: 0; resize: none; outline: none;
  background: transparent repeating-linear-gradient(180deg, transparent 0 28px, rgba(var(--ombre), .09) 28px 30px); background-attachment: local;
  font: 400 16px/30px var(--sans); color: #1C54AA; }
.ec-corps::placeholder { color: #8F96AE; opacity: 1; }
.ec-corps:focus-visible { box-shadow: 0 0 0 2px rgba(var(--k2), .35); border-radius: 4px; }
/* « Vous pouvez me répondre à … » : une phrase, et sa case ; la puce dit mail ou téléphone dès qu'elle l'a reconnu */
.ec-phrase { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-top: 18px; padding-bottom: 22px; font: 400 16px/1.3 var(--sans); color: var(--encre); }
.ec-phrase[hidden] { display: none; }
.ec-phrase--joindre > span:first-child { flex: 0 0 100%; }
.ec-phrase--et { margin-top: 2px; }
.ec-blanc { position: relative; display: inline-flex; flex: 1 1 270px; max-width: 300px; min-width: 0; border-bottom: 2px dotted var(--filet-fort); }
.ec-blanc input { width: 100%; min-width: 0; padding: 0 4px 4px; border: 0; background: transparent; outline: none; font: 400 16px/26px var(--sans); color: #1C54AA; }
.ec-blanc input::placeholder { color: #8F96AE; opacity: 1; }
.ec-blanc.plein { border-bottom: 1.5px solid rgba(var(--k2), .45); }
.ec-blanc:focus-within { border-bottom-color: var(--c2); }
.ec-blanc small, .ec-signe small { position: absolute; left: 4px; top: calc(100% + 6px); display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c6); }
.ec-blanc small .pic, .ec-signe small .pic { width: 12px; height: 12px; }
.ec-voie { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; white-space: nowrap; background: var(--p); color: var(--c); box-shadow: inset 0 0 0 1px rgba(var(--k), .35); font: 500 12px/1 var(--sans); }
.ec-voie[hidden] { display: none; }
.ec-voie .pic { width: 13px; height: 13px; }
/* l'accord en case cochée, le nom en signature, à la main */
.ec-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-top: 22px; }
.ec-accord { position: relative; flex: 1 1 220px; max-width: 300px; display: flex; align-items: center; gap: 11px; font: 400 13.5px/1.4 var(--sans); color: var(--appui); cursor: pointer; }
.ec-accord input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.ec-case { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--c1); transform: rotate(-3deg); background: #FFFFFF; color: var(--c1); }
.ec-case .pic { width: 16px; height: 16px; stroke-width: 3; opacity: 0; transform: scale(.6); }
.ec-accord input:checked + .ec-case .pic { opacity: 1; transform: none; }
.ec-accord input:focus-visible + .ec-case { outline: 3px solid var(--v2); outline-offset: 3px; }
.ec-signe { position: relative; flex: 0 0 196px; display: block; margin-bottom: 20px; padding-bottom: 2px; border-bottom: 2px dotted var(--filet-fort); text-align: center; }
.ec-signe input { display: block; width: 100%; height: 46px; padding: 0 6px; border: 0; background: transparent; outline: none; text-align: center; font: 400 24px/46px var(--main); color: #1C54AA; }
.ec-signe input::placeholder { font: 400 15px/46px var(--sans); color: #8F96AE; opacity: 1; }
.ec-signe.signee { border-bottom: 1.5px solid rgba(var(--k2), .4); }
.ec-signe:focus-within { border-bottom-color: var(--c2); }
.ec-signe small { left: 0; right: 0; justify-content: center; color: var(--c2); }
.ec-volute { position: absolute; left: 30px; right: 40px; top: 34px; height: 16px; border-bottom: 2px solid rgba(var(--k2), .55); border-radius: 0 0 60% 40%; opacity: 0; pointer-events: none; }
.ec-signe.signee .ec-volute { opacity: 1; }
/* ce qui manque s'entoure à l'endroit même, au jaune */
.ec-manque { position: relative; }
.ec-manque::after { content: ""; position: absolute; left: -14px; right: -14px; top: -8px; bottom: -10px; border: 2.2px solid var(--v4); border-radius: 50%; pointer-events: none; }
.ec-message.ec-manque::after { left: -10px; right: -10px; }
.ec-blanc.ec-manque, .ec-signe.ec-manque { border-bottom: 2.5px solid var(--v4); }
.ec-accord.ec-manque::after { right: auto; width: calc(100% + 28px); }
.ec-accord.ec-manque .ec-case { border-color: var(--c4); background: var(--p4); box-shadow: 0 0 0 4px rgba(var(--k4), .22); }
.lx-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* le pied de la lettre : ce qui reste à brancher ou ce qui manque, à gauche ; le geste, au bord droit de la feuille */
.ec-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; margin-top: 16px; }
.ec-pied-g { min-width: 0; }
.ec-msg { display: flex; align-items: center; gap: 11px; max-width: 304px; padding: 8px 12px 8px 8px; border-radius: 12px; font: 400 12.5px/1.35 var(--sans); color: var(--appui); }
.ec-msg i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #FFFFFF; }
.ec-msg .pic { width: 15px; height: 15px; }
.ec-msg-t { display: block; }
.ec-msg--savoir { background: var(--p2); box-shadow: inset 0 0 0 1px rgba(var(--k2), .35); }
.ec-msg--savoir i, .ec-msg--savoir .ec-msg-t { color: var(--e2); }
.ec-msg--bloque { background: #FDEEEE; box-shadow: inset 0 0 0 1px rgba(146, 28, 32, .22); }
.ec-msg--bloque i, .ec-msg--bloque .ec-msg-t { color: #921C20; }
.ec-envoyer { flex: none; width: 248px; justify-content: space-between; }
.ec-envoyer[aria-disabled="true"] { opacity: .6; cursor: default; translate: none; }
.geste--jaune { --g: var(--v4); --g2: var(--c4); color: #4A3700; }
.annexe .geste--jaune .geste__marque { color: #775900; }
.ec[data-t="4"] .ec-pied, .ec[data-t="5"] .ec-pied { visibility: hidden; }

/* l'enveloppe (`ork-lettre-env`) : la feuille pliée y entre, le rabat se ferme, le cachet se pose, le cachet rond se frappe */
.ec-env { position: absolute; left: 50%; top: 150px; width: 350px; height: 190px; margin-left: -175px; border-radius: 6px; opacity: 0; pointer-events: none; transform-origin: 50% 0; transform: scale(var(--ke, 1));
  background: linear-gradient(180deg, #FFFFFF, #F4F2FC); box-shadow: 0 26px 40px -24px rgba(var(--ombre), .7), 0 0 0 1px rgba(var(--ombre), .08); }
.ec-env > * { position: absolute; }
.ec-env .pliee { left: 30px; right: 30px; top: -58px; height: 118px; padding: 10px 16px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(var(--ombre), .08), 0 10px 16px -10px rgba(var(--ombre), .5); font: 400 15px/1 var(--main); color: var(--encre); }
.ec-env .poche { inset: 0; border-radius: 6px; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #FBFAFF, #EFEDF9); box-shadow: inset 0 0 0 1px rgba(var(--ombre), .06); }
.ec-env .rabat, .ec-mini .rabat { left: 0; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, rgba(var(--k3), .22), rgba(var(--k2), .10)), #FFFFFF; }
.ec-env .rabat { height: 106px; transform-origin: 50% 0; transform: scaleY(0); }
.ec-env .sceau, .ec-mini .sceau { left: 50%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 30%, #FFFFFF 0 6%, var(--v6) 45%, var(--c6) 100%); }
.ec-env .sceau { top: 104px; width: 48px; height: 48px; margin: -24px 0 0 -24px; box-shadow: 0 0 0 3px #FFFFFF, 0 8px 14px -8px rgba(var(--k6), 1); transform: scale(0); }
.ec-env .sceau svg { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.ec-env .adresse { left: 24px; bottom: 22px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--filet); font: 500 12px/1 var(--sans); letter-spacing: .14em; color: var(--encre); }
.ec-env .adresse small { font: 500 9.5px/1 var(--sans); color: var(--douce); }
.ec-env .adresse svg { width: 18px; height: 18px; }
.ec-env .cachet { right: 4px; top: 12px; width: 160px; color: var(--c6); opacity: 0; transform: rotate(-9deg) scale(1.6); }
.ec-env .cachet svg, .ec-mini .cachet svg { display: block; width: 100%; }
.ec-statut { position: absolute; left: 0; right: 0; top: 372px; display: flex; justify-content: center; align-items: center; gap: 8px; font: 400 14px/1 var(--sans); color: var(--appui); opacity: 0; }
.ec-statut .pic { width: 15px; height: 15px; color: var(--c6); }
.ec[data-t="3"] :is(.ec-pliure), .ec[data-t="4"] .ec-pliure, .ec[data-t="5"] .ec-pliure { opacity: 0; transform: scale(.92); visibility: hidden; transition: opacity .5s ease, transform .6s ease, visibility 0s .6s; }
.ec[data-t="3"] .ec-env, .ec[data-t="4"] .ec-env { opacity: 1; }
.ec[data-t="3"] .ec-statut { opacity: 1; }
.ec[data-t="3"] .ec-env .pliee { animation: ecEntre .7s cubic-bezier(.5, 0, .3, 1) .2s both; }
@keyframes ecEntre { from { transform: translateY(-40px); } to { transform: translateY(80px); } }
.ec[data-t="3"] .ec-env .rabat { transform: scaleY(1); transition-delay: .95s; }
.ec[data-t="3"] .ec-env .sceau { transform: scale(1); transition-delay: 1.35s; }
.ec[data-t="3"] .ec-env .cachet { opacity: .88; transform: rotate(-9deg) scale(1); transition-delay: 1.75s; }
.ec[data-t="4"] .ec-env .pliee, .ec[data-t="5"] .ec-env .pliee { opacity: 0; transform: translateY(80px); transition: none; }
.ec[data-t="4"] .ec-env .rabat, .ec[data-t="5"] .ec-env .rabat { transform: scaleY(1); }
.ec[data-t="4"] .ec-env .sceau, .ec[data-t="5"] .ec-env .sceau { transform: scale(1); }
.ec[data-t="4"] .ec-env .cachet, .ec[data-t="5"] .ec-env .cachet { opacity: .88; transform: rotate(-9deg) scale(1); }
.ec[data-t="5"] .ec-env { opacity: 0; }

/* le talon : ce qui reste, à la place de la lettre — l'enveloppe cachetée et les trois rangs */
.ec-talon { position: absolute; left: 0; right: 0; top: 120px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: center; opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity .5s ease, transform .6s ease, visibility 0s .6s; }
.ec-talon:focus { outline: none; }
.ec[data-t="5"] .ec-talon { opacity: 1; transform: none; visibility: visible; transition: opacity .7s ease .2s, transform .9s cubic-bezier(.22, .8, .25, 1) .2s, visibility 0s; }
.ec-mini { position: relative; width: 240px; height: 132px; border-radius: 6px; transform: rotate(-4deg); background: linear-gradient(180deg, #FFFFFF, #F4F2FC); box-shadow: 0 20px 30px -20px rgba(var(--ombre), .7), 0 0 0 1px rgba(var(--ombre), .08); }
.ec-mini > * { position: absolute; }
.ec-mini .rabat { height: 74px; }
.ec-mini .sceau { top: 72px; width: 34px; height: 34px; margin: -17px 0 0 -17px; box-shadow: 0 0 0 2px #FFFFFF; }
.ec-mini .sceau svg { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.ec-mini .cachet { right: 0; top: 6px; width: 112px; color: var(--c6); opacity: .88; transform: rotate(-9deg); }
.ec-rangs { display: grid; gap: 9px; min-width: 0; }
.ec-palettes { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--filet), 0 12px 20px -14px rgba(var(--ombre), .5); }
.ec-palettes small { font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--douce); }
.ec-palettes span { display: flex; gap: 2px; }
.ec-palettes span i { width: 20px; height: 28px; border-radius: 4px; display: grid; place-items: center; font: 500 16px/1 var(--valeur); font-style: normal; color: var(--e1); background: linear-gradient(180deg, #E6FAEE 0 49%, #D3F4E0 51%); box-shadow: 0 0 0 1px rgba(0, 160, 59, .3); }
.ec-rang { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--filet); font: 400 13.5px/1.35 var(--sans); color: var(--appui); }
.ec-rang i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--p); color: var(--c); }
.ec-rang i .pic { width: 15px; height: 15px; }
.ec-rang .vu { color: var(--e1); }
.ec-rang .qui { display: inline-block; max-width: 100%; color: #1C54AA; overflow-wrap: anywhere; }
.ec-rang .nw { white-space: nowrap; }

/* le sous-titre : un temps, son numéro, sa phrase — sous la planète, à droite, comme la maquette (_p5 : left 806, bottom 16) */
.ec-sous { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin: 14px 0 0; padding: 5px 16px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 28px -12px rgba(var(--ombre), .55), 0 0 0 1px rgba(var(--ombre), .07); font: 400 13.5px/1.3 var(--sans); color: var(--appui); }
.ec-sous .n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--v), var(--c)); color: #FFFFFF; font: 500 13px/1 var(--sans); }

/* l'ouverture, une fois : la feuille se déplie depuis son pli du haut, puis « Bonjour Orkios, » s'écrit */
.ec--ouvre .ec-feuille { animation: ecDeplie .9s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes ecDeplie { from { opacity: 0; transform: rotateX(-82deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
.ec--ouvre .ec-bonjour::after { animation: ecSEcrit .9s steps(16) .75s both; }
@keyframes ecSEcrit { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* la bande du bas : plutôt voir par soi-même — les seuls liens vers la simulation et les formules */
.ec-plutot-zone { padding: 0 0 clamp(40px, 6vw, 64px); }
.ec-plutot { margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 30px; padding: 30px 36px; border-radius: 20px;
  background: radial-gradient(70% 90% at 0% 0%, rgba(var(--k3), .14), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(var(--k6), .16), transparent 60%), linear-gradient(180deg, #F5F3FC, #EEF2FB); }
.ec-plutot-t { margin: 8px 0 0; font: 500 30px/1.1 var(--sans); letter-spacing: -.02em; color: var(--encre); }
.ec-plutot-t em { font-style: normal; color: var(--accent); }
.ec-plutot-gestes { display: flex; gap: 16px; }
.ec-plutot-gestes .geste { width: 270px; justify-content: space-between; }

@media (max-width: 1085px) {
  .ec { grid-template-columns: minmax(0, 1fr); padding: 24px 24px 20px; }
  .ec-ciel { grid-column: 1; grid-row: 1; height: 288px; margin: 0 0 8px; --k: .8; }
  .ec-gauche { grid-column: 1; grid-row: 2; width: 100%; max-width: 566px; margin: 0 auto; }
  .ec-sous { grid-column: 1; grid-row: 3; justify-self: start; margin-left: max(0px, calc((100% - 566px) / 2)); }
  /* une fois parti, sur une colonne : le talon prend la place de la lettre, sans trou dessous */
  .ec[data-t="5"] :is(.ec-pliure, .ec-pied) { display: none; }
  .ec[data-t="5"] .ec-talon { position: relative; top: 0; padding: 16px 0 6px; }
  .ec-plutot { grid-template-columns: minmax(0, 1fr); }
  .annexe--ecrire-a-orkios .ax-tete { grid-template-columns: minmax(0, 1fr); }
  .annexe--ecrire-a-orkios .ax-tete > :last-child { justify-self: start; }
  .ec-tete-d { white-space: normal; }
}
@media (max-width: 760px) { .ec-tete-d { border-radius: 16px; } }
@media (max-width: 680px) {
  .ec { padding: 14px 12px 16px; border-radius: 14px; }
  .ec-ciel { height: 202px; --k: .56; }
  .ec-feuille { padding: 20px 16px 18px 24px; }
  .ec-bonjour { font-size: 24px; }
  .ec-tirets i { width: 14px; }
  .ec-phrase { font-size: 15px; }
  .ec-blanc { flex-basis: 100%; max-width: none; }
  .ec-voie { margin-top: 16px; }
  .ec-bas { flex-direction: column; align-items: stretch; }
  .ec-accord { max-width: none; flex: none; }
  .ec-signe { flex: none; width: 220px; max-width: 100%; align-self: flex-end; }
  .ec-pied { flex-direction: column-reverse; align-items: stretch; }
  .ec-envoyer { width: 100%; }
  .ec-msg { max-width: none; }
  .ec-env { --ke: .86; }
  .ec-statut { top: 336px; }
  .ec-talon { top: 30px; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 26px; }
  .ec-rangs { width: 100%; }
  .ec-sous { font-size: 13px; }
  .ec-plutot { padding: 22px 18px; }
  .ec-plutot-t { font-size: 25px; }
  .ec-plutot-gestes { flex-direction: column; }
  .ec-plutot-gestes .geste { width: 100%; }
}
@media (max-width: 359px) { .ec-tirets { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ec *, .ec--ouvre .ec-feuille, .ec--ouvre .ec-bonjour::after { transition: none !important; animation: none !important; }
  .ec[data-t="3"] .ec-env .pliee { transform: translateY(80px); }
}

/* ─── 2 · Mentions légales : la carte d'identité d'Orkios ───
   Maquette validée le 19/10/2026 (capture/design-site-360/_p6). Eddy : « trouve un truc plus original, et pour le texte
   ça doit être moins chargé, n'utilise pas de gras ». Deux faces de la même carte, posées côte à côte : l'éditeur au
   recto, signé par le directeur de la publication ; l'hébergeur et le contact au verso. Fond de sécurité (guilloché fin),
   micro-impression « ORKIOS » sur le bord, hologramme qui passe une fois à l'arrivée puis au survol. Rien au-delà de 500.
   Sur téléphone, les deux faces passent en colonne LISIBLE (.ax-etroit), sans rotation ni arrivée. Préfixe ml-. */
.annexe--mentions-legales .surtitre, .annexe--mentions-legales .ax-afaire { font-weight: 500; }
.annexe--mentions-legales .main { font-weight: 400; }
.ml { height: 590px; background: radial-gradient(70% 90% at 50% 0%, #FFFFFF 0%, #F2F3FA 60%, #E8E9F3 100%); }
.ml-lumiere { left: 0; right: 0; top: 0; height: 420px; background: radial-gradient(45% 60% at 50% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.ml-ombre { height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ombre), .22), transparent); }
.ml-mot { font: 400 22px/1 var(--main); color: var(--c3); }
.ml-mot--r { left: 44px; top: 44px; }
.ml-mot--v { left: 924px; top: 58px; }
.ml-carte { width: 466px; height: 304px; margin: 0; border-radius: 18px; overflow: hidden; z-index: 3;
  background: repeating-radial-gradient(circle at 88% 14%, rgba(77, 148, 255, .075) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 6% 96%, rgba(0, 199, 193, .075) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, #FFFFFF 0%, #F2F6FD 55%, #EAF0FB 100%);
  box-shadow: 0 0 0 1px rgba(var(--ombre), .10), 0 30px 46px -26px rgba(var(--ombre), .55), inset 0 1px 0 #FFFFFF; }
.ml-carte--r { left: 26px; top: 84px; transform: rotate(-2.4deg); }
.ml-carte--v { left: 530px; top: 96px; transform: rotate(1.8deg); }
.ml-micro { position: absolute; left: 12px; right: 12px; top: 6px; font: 400 5.5px/1 var(--valeur); letter-spacing: .18em; color: rgba(37, 101, 195, .32); white-space: nowrap; overflow: hidden; text-align: center; }
.ml-tete { position: absolute; left: 22px; right: 22px; top: 16px; height: 26px; margin: 0; display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #1C54AA; }
.ml-tete svg { width: 22px; height: 22px; flex: none; }
.ml-tete .pic { color: #1C54AA; }
.ml-tete span { margin-left: auto; font: 400 15px/1 var(--main); letter-spacing: 0; text-transform: none; color: var(--c3); }
.ml-sceau { position: absolute; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 20deg, rgba(77, 148, 255, .30), rgba(189, 114, 255, .30), rgba(0, 199, 193, .30), rgba(255, 198, 13, .25), rgba(77, 148, 255, .30)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.ml-sceau svg { width: 24px; height: 24px; opacity: .75; }
.ml-photo { position: absolute; left: 22px; top: 54px; width: 104px; height: 130px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 8px;
  background: linear-gradient(160deg, #E8F1FF 0%, #F6EDFF 55%, #DEF8F7 100%); box-shadow: inset 0 0 0 1px rgba(37, 101, 195, .18); }
.ml-photo svg { width: 62px; height: 62px; }
.ml-photo small { font: 500 9px/1 var(--sans); letter-spacing: .22em; color: #1C54AA; }
.ml-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .7) 44%, rgba(189, 114, 255, .18) 50%, transparent 62%); }
.ml-champs { position: absolute; left: 146px; right: 22px; top: 54px; margin: 0; display: grid; gap: 9px; }
.ml-champs--plein { left: 22px; }
.ml-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.ml-c { min-width: 0; margin: 0; }
.ml-c dd { margin: 0; }
.ml-l { display: block; margin: 0 0 3px; font: 500 8.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6F7899; }
.ml-v { display: block; font: 400 13px/1.35 var(--sans); color: var(--encre); }
.ml-v--nom { font: 500 19px/1 var(--sans); letter-spacing: .14em; color: #1C54AA; }
.ml-v a { color: #1C54AA; text-decoration: none; }
.ml-v a:hover { text-decoration: underline; }
.ax-afaire--petit { min-height: 17px; margin-left: 6px; padding: 1px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px #E8B200; font-size: 9.5px; gap: 4px; }
.ax-afaire--petit svg, .annexe .ax-afaire--petit .pic { width: 10px; height: 10px; }
.ml-signe { position: absolute; left: 22px; right: 80px; bottom: 16px; display: flex; align-items: flex-end; gap: 14px; padding: 8px 0 0; border-top: 1px dashed rgba(37, 101, 195, .22); }
.ml-signe .ml-l { margin: 0 0 6px; }
.ml-signature { display: block; font: 400 26px/1 var(--main); color: #2565C3; transform: rotate(-4deg); transform-origin: 0 100%; white-space: nowrap; }
.ml-qui { font: 400 11.5px/1.3 var(--sans); color: var(--douce); }
.ml-mrz { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; padding: 9px 22px 0; background: linear-gradient(180deg, rgba(232, 241, 255, .6), rgba(222, 232, 250, .9)); border-top: 1px solid rgba(37, 101, 195, .14);
  font: 400 11px/1.45 var(--valeur); letter-spacing: .2em; color: #4A5378; white-space: pre; overflow: hidden; }
/* la bande lisible à la machine, en dessin : écrite dans la feuille, pas dans la page (ses « < » ne sont pas du texte) */
.ml-mrz::before { content: "ORKIOS<<SAS<<CAPITAL<5000<EUR<<<<<<<\A 109456962<<RCS<PARIS<<75008<<<<<<<"; }
/* l'hologramme : il passe une fois à l'arrivée, puis à chaque survol */
.ml-holo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ml-holo i, .ml-holo b { position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; transform: translateX(-60%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8) 35%, rgba(189, 114, 255, .22) 50%, rgba(0, 199, 193, .22) 60%, rgba(255, 198, 13, .16) 70%, transparent); }
.ml-holo i { opacity: 0; animation: mlHolo 1.3s ease-in-out 3.3s 1 both; }
.ml-holo b { opacity: 0; transition: transform 1.1s ease-in-out, opacity .2s; }
.ml-carte:hover .ml-holo b { opacity: 1; transform: translateX(230%) skewX(-18deg); }
@keyframes mlHolo { 0% { opacity: 0; transform: translateX(-60%) skewX(-18deg); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(230%) skewX(-18deg); } }
/* l'arrivée : la carte glisse et se pose au milieu, se retourne, puis ses deux faces s'écartent */
.ml-carte--r { animation: mlRecto 3.2s cubic-bezier(.3, .7, .2, 1) both; }
.ml-carte--v { animation: mlVerso 3.2s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes mlRecto {
  0% { transform: translate(300px, 190px) rotate(16deg); opacity: 0; }
  20% { transform: translate(252px, 0) rotate(0); opacity: 1; }
  32% { transform: translate(252px, 0) scaleX(1); }
  40%, 62% { transform: translate(252px, 0) scaleX(0); }
  86%, 100% { transform: rotate(-2.4deg) scaleX(1); } }
@keyframes mlVerso {
  0%, 40% { transform: translate(-252px, -12px) scaleX(0); opacity: 0; }
  41% { opacity: 1; }
  48%, 62% { transform: translate(-252px, -12px) scaleX(1); }
  86%, 100% { transform: rotate(1.8deg); } }
.ml-mot, .ml-indice { animation: mlParait .8s ease-out 2.9s both; }
@keyframes mlParait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* le site, en pastilles d'une ligne, posées sous les deux faces */
.ml-indice { left: 0; right: 0; top: 420px; text-align: center; font: 400 17px/1 var(--main); color: var(--c2); }
.ml-site { left: 0; right: 0; top: 458px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 0; padding: 0 40px; list-style: none; }
.ml-p { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(var(--k), .28), 0 8px 16px -12px rgba(var(--ombre), .5);
  font: 400 13px/1 var(--sans); color: var(--appui); white-space: nowrap; }
.ml-p i { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--p); color: var(--c); }
.ml-p i .pic { width: 14px; height: 14px; }
.ml-p a { color: #1C54AA; text-decoration: none; }
.ml-p a:hover { text-decoration: underline; }
@media (hover: none) { .ml-indice { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .ml-carte, .ml-mot, .ml-indice, .ml-holo i, .ml-holo b { animation: none !important; transition: none !important; } }
/* sur téléphone : les deux faces l'une sous l'autre, droites, lisibles */
.ax-etroit .ml { height: auto; padding: 18px 12px 22px; display: grid; gap: 14px; }
.ax-etroit .ml > * { position: relative; left: auto; top: auto; }
.ax-etroit .ml-lumiere, .ax-etroit .ml-ombre, .ax-etroit .ml-indice { display: none; }
.ax-etroit .ml-mot { margin: 6px 0 -6px 4px; animation: none; }
.ax-etroit .ml-mot--v { order: 2; }
.ax-etroit .ml-carte--v { order: 3; }
.ax-etroit .ml-site { order: 4; padding: 6px 0 0; justify-content: flex-start; }
.ax-etroit .ml-carte { width: auto; height: auto; transform: none; animation: none; padding: 48px 16px 16px; }
.ax-etroit .ml-carte--r { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 76px; }
.ax-etroit .ml-photo { position: static; width: 76px; height: 96px; gap: 6px; }
.ax-etroit .ml-photo svg { width: 44px; height: 44px; }
.ax-etroit .ml-champs { position: static; }
.ax-etroit .ml-deux { grid-template-columns: minmax(0, 1fr); }
.ax-etroit .ml-signe { left: 16px; right: 74px; }
.ax-etroit .ml-carte--v { padding-bottom: 0; }
.ax-etroit .ml-mrz { position: static; height: auto; margin: 16px -16px 0; padding: 9px 16px 10px; font-size: 9.5px; letter-spacing: .12em; }
.ax-etroit .ml-holo i { animation-delay: .8s; }
.ax-etroit .ml-p { height: auto; min-height: 36px; padding: 6px 14px 6px 6px; white-space: normal; line-height: 1.3; }

/* ─── 3 · Vos données : le coffre de verre ─── */

.cv{height:700px;background:radial-gradient(60% 70% at 50% 30%,#FFFFFF,#EEF1F9 70%),#EEF1F9}
.cv.fige .cv-non,.cv.fige .cv-lettre{animation:none!important}
.cv-sol{left:0;right:0;top:604px;height:96px;background:linear-gradient(180deg,#E3E6F1,#ECEEF5)}
/* le chemin de la lettre, en haut : votre navigateur → les relais → Orkios → le coffre */
.cv-chemin{left:40px;right:40px;top:26px;height:120px}
.cv-fil{position:absolute;left:60px;right:60px;top:38px;height:0;border-top:2.5px dashed rgba(37,101,195,.35)}
.cv-etape{position:absolute;top:0;width:190px;margin-left:-95px;display:grid;justify-items:center;gap:6px;text-align:center}
.cv-etape i{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(160deg,#FFFFFF,var(--p));box-shadow:0 0 0 1px rgba(var(--k),.4),0 12px 18px -12px rgba(var(--k),.9);color:var(--c)}
.cv-etape i svg{width:26px;height:26px}
.cv-etape b{font:600 13px/1.2 var(--outil);color:var(--encre)}
.cv-etape span{font:500 11.5px/1.3 var(--outil);color:var(--douce)}
.cv-etape.relais i{background:repeating-linear-gradient(135deg,#FFF8E1 0 6px,#FFF1C2 6px 12px);box-shadow:0 0 0 1.5px #E8B200}
.cv-lettre{position:absolute;left:60px;top:26px;width:30px;height:22px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgba(37,101,195,.4),0 6px 10px -6px rgba(var(--ombre),.6);animation:cvVoyage 6s linear infinite}
.cv-lettre::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,transparent 48%,rgba(37,101,195,.35) 50%,transparent 52%),linear-gradient(25deg,transparent 48%,rgba(37,101,195,.35) 50%,transparent 52%)}
@keyframes cvVoyage{0%{transform:translateX(0);opacity:0}6%{opacity:1}90%{opacity:1}100%{transform:translateX(830px);opacity:0}}
/* le coffre de verre et ce qu'il garde */
.cv-verre{left:371px;top:196px;width:280px;height:382px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(214,228,250,.35));
  box-shadow:0 0 0 6px #FFFFFF,0 0 0 7px rgba(var(--ombre),.12),inset 0 0 40px rgba(77,148,255,.12),0 30px 50px -28px rgba(var(--ombre),.6)}
.cv-verre::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.65) 32%,transparent 40%)}
.cv-titre{left:311px;top:166px;width:400px;text-align:center;font:400 19px/1 var(--main);color:var(--c1);white-space:nowrap}
.cv-dedans{left:391px;top:286px;width:200px;display:grid;gap:9px;z-index:2}
.cv-carte{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(var(--k),.35),0 8px 14px -10px rgba(var(--ombre),.6);font:500 13px/1.15 var(--outil);color:var(--encre)}
.cv-carte i{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,var(--v),var(--c));color:#fff}
.cv-carte i svg{width:14px;height:14px;stroke-width:2}
.cv-carte small{display:block;font:500 10.5px/1.1 var(--outil);color:var(--douce)}
.cv-molette{left:610px;top:362px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff,#C9CFDF);box-shadow:0 0 0 1.5px rgba(var(--ombre),.18),0 3px 6px -2px rgba(var(--ombre),.4);z-index:3}
/* les clés de vos droits, pendues à la molette */
.cv-cles{left:628px;top:374px;width:250px;z-index:4}
.cv-cles::before{content:"";position:absolute;left:0;top:0;width:96px;height:2px;background:#AEB6CB;transform:rotate(52deg);transform-origin:0 0}
.cv-etiq{position:absolute;left:52px;top:76px;width:214px;padding:10px 12px 10px 18px;border-radius:6px 10px 10px 6px;background:#fff;box-shadow:0 0 0 1px rgba(37,101,195,.4),0 14px 22px -14px rgba(var(--ombre),.6);clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.cv-etiq b{display:flex;align-items:center;gap:7px;font:600 13px/1.2 var(--outil);color:#1C54AA}
.cv-etiq b svg{width:16px;height:16px}
.cv-etiq span{display:block;margin-top:5px;font:500 11.5px/1.35 var(--outil);color:var(--appui)}
/* le sablier posé sur le socle */
.cv-socle{left:351px;top:578px;width:320px;height:34px;border-radius:8px;background:linear-gradient(180deg,#FFFFFF,#DCE1EE);box-shadow:0 14px 22px -12px rgba(var(--ombre),.55)}
.cv-socle span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font:600 11px/1 var(--outil);letter-spacing:.16em;color:var(--douce)}
.cv-socle span svg{width:14px;height:14px;color:var(--c1)}
.cv-sablier{left:258px;top:470px;width:110px;display:grid;justify-items:center;gap:6px;z-index:4}
.cv-sablier i{width:58px;height:96px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(160deg,#FFFFFF,#FFF4D6);box-shadow:0 0 0 1.5px rgba(217,164,0,.5),0 14px 20px -12px rgba(var(--ombre),.6);color:#D9A400}
.cv-sablier i svg{width:34px;height:34px}
.cv-sablier b{font:600 15px/1 var(--valeur);color:#775900}
.cv-sablier span{font:500 11px/1.25 var(--outil);color:var(--douce);text-align:center}
/* à gauche : ce qui n'entre jamais, barré d'un picto d'interdiction */
.cv-dehors{left:36px;top:206px;width:250px;display:grid;gap:11px}
.cv-dehors h5,.cv-pourquoi h5{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:600 11.5px/1 var(--outil);letter-spacing:.18em;text-transform:uppercase;color:var(--douce)}
.cv-dehors h5 svg,.cv-pourquoi h5 svg{width:16px;height:16px}
.cv-non{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--filet),0 6px 12px -10px rgba(var(--ombre),.5);font:500 13.5px/1 var(--outil);color:var(--appui);
  animation:cvRebond 4.8s ease-in-out infinite}
.cv-non i{position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#EEF0F6;color:#8F98B6}
.cv-non i svg{width:14px;height:14px}
.cv-non i::after{content:"";position:absolute;inset:1px;border-radius:50%;border:2px solid #DF006F;background:linear-gradient(45deg,transparent 46%,#DF006F 46%,#DF006F 54%,transparent 54%)}
@keyframes cvRebond{0%,100%{transform:translateX(0)}40%{transform:translateX(22px)}50%{transform:translateX(13px)}}
/* à droite : pour quoi faire, et qui les lit */
.cv-pourquoi{left:700px;top:206px;width:290px}
.cv-grand{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,160,59,.35),0 18px 30px -20px rgba(var(--ombre),.6)}
.cv-grand i{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,#00CC4B,#00A03B);color:#fff;box-shadow:0 10px 18px -10px rgba(0,160,59,.9)}
.cv-grand i svg{width:22px;height:22px;stroke-width:2}
.cv-grand b{display:block;font:500 22px/1.15 var(--outil);color:var(--encre)}
.cv-grand span{display:block;margin-top:4px;font:400 17px/1 var(--main);color:#006C25}
.cv-pourquoi .cv-l{display:flex;align-items:center;gap:8px;margin:10px 0 0;font:500 13px/1.35 var(--outil);color:var(--appui)}
.cv-pourquoi .cv-l svg{flex:none;width:16px;height:16px;color:var(--c)}
/* ─── SOUS LE COFFRE : LE PRÉSENTOIR DE VERRE (maquette _p7, bas validé le 19/10/2026) ───
   Eddy, sur la grille de six cartes et le bandeau du responsable : « tout est ok sauf la partie en PJ, refais-la », puis,
   sur le cube « Une fois client · contrat de sous-traitance » : « il y a aucun contrat » (retiré). Les mêmes faits,
   chacun posé en cube de verre éclairé sur une étagère, son nom gravé dessous, deux lignes courtes, aucun gras ; ce qui
   reste à brancher : une pastille sur le cube et quatre mots (.ax-afaire--point, la même étiquette orange). Le
   responsable et la CNIL, gravés sur le socle. Sur téléphone, une ligne par cube, le cube devant son nom. */
.cv-pres { position: relative; margin: 32px auto 0; padding: 26px 26px 0; border-radius: 18px; overflow: hidden;
  background: radial-gradient(70% 120% at 50% 0%, #FFFFFF 0%, #F2F5FC 70%, #ECF0F9 100%); box-shadow: 0 0 0 1px rgba(var(--ombre), .06), 0 22px 40px -30px rgba(var(--ombre), .5); }
.cv-pres-t { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 0 0 22px; font: 400 19px/1.2 var(--main); color: var(--c2); text-align: center; }
.cv-pres-t .pic { width: 17px; height: 17px; }
.cv-rangee { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; margin: 0; padding: 0 0 22px; list-style: none; }
/* l'étagère : une lame de verre et sa ligne de lumière, sous les cubes */
.cv-rangee::before { content: ""; position: absolute; left: -26px; right: -26px; top: 96px; height: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(214, 228, 250, .75)); box-shadow: 0 1px 0 rgba(var(--ombre), .08), 0 10px 16px -12px rgba(var(--ombre), .45); }
.cv-rangee::after { content: ""; position: absolute; left: 8%; right: 8%; top: 99px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, rgba(77, 148, 255, .55), transparent); }
.cv-objet { position: relative; display: grid; justify-items: center; align-content: start; gap: 30px; text-align: center; }
.cv-cube { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 16px; display: grid; place-items: center; color: var(--c);
  background: linear-gradient(160deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 45%, rgba(var(--k), .18) 100%);
  box-shadow: 0 0 0 1px rgba(var(--k), .38), inset 0 0 22px rgba(var(--k), .16), inset 0 2px 0 rgba(255, 255, 255, .95), 0 18px 22px -14px rgba(var(--k), .7);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.cv-cube::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, .7) 36%, transparent 46%); pointer-events: none; }
.cv-cube > .pic { width: 34px; height: 34px; stroke-width: 1.6; }
.cv-cube .pt { position: absolute; right: -7px; top: -7px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #FFF4D6; box-shadow: 0 0 0 1.5px #E8B200, 0 4px 8px -4px rgba(119, 89, 0, .6); color: #775900; }
.cv-cube .pt .pic { width: 12px; height: 12px; stroke-width: 2; }
.cv-objet:hover .cv-cube { transform: translateY(-5px); }
.cv-pres.attend .cv-cube { opacity: .25; transform: translateY(8px) scale(.94); }
.cv-pres.vivant .cv-cube { animation: cvAllume .9s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: var(--d); }
@keyframes cvAllume { 0% { opacity: .25; transform: translateY(8px) scale(.94); } 100% { opacity: 1; transform: none; } }
.cv-nom { display: grid; justify-items: center; align-content: start; gap: 5px; }
.cv-nom .n1 { font: 500 13.5px/1.25 var(--sans); color: var(--encre); }
.cv-nom .n2 { max-width: 160px; font: 400 12px/1.35 var(--sans); color: var(--douce); }
.cv-nom .n2 a { color: #1C54AA; font-weight: 500; text-decoration: none; }
.cv-nom .n2 a:hover { text-decoration: underline; }
/* l'étiquette orange, en point : la même classe .ax-afaire, que l'on retire d'un coup quand tout est branché */
.ax-afaire--point { align-items: flex-start; max-width: 160px; min-height: 0; margin-top: 2px; padding: 0; background: none; box-shadow: none; font: 500 10.5px/1.25 var(--sans); color: #775900; white-space: normal; text-align: left; }
.ax-afaire--point::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: #E8B200; }
/* le socle, gravé : le responsable et la CNIL */
.cv-grave { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 0 -26px; padding: 13px 20px; background: linear-gradient(180deg, #E6EAF4, #DCE1EE);
  font: 500 12.5px/1.3 var(--sans); letter-spacing: .04em; color: #4F5878; text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }
.cv-grave > span { display: inline-flex; align-items: center; gap: 8px; }
.cv-grave .pic { width: 15px; height: 15px; color: #8F98B6; }
.cv-grave i { width: 4px; height: 4px; border-radius: 50%; background: #AEB6CB; }
.cv-grave a { color: #1C54AA; text-decoration: none; }
.cv-grave a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .cv-pres { padding: 20px 14px 0; }
  .cv-rangee { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 20px; }
  .cv-rangee::before, .cv-rangee::after { display: none; }
  .cv-objet { grid-template-columns: 60px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; text-align: left; }
  .cv-cube { width: 60px; height: 60px; border-radius: 14px; }
  .cv-cube > .pic { width: 26px; height: 26px; }
  .cv-nom { justify-items: start; }
  .cv-nom .n2, .ax-afaire--point { max-width: none; }
  .cv-grave { margin: 0 -14px; justify-content: flex-start; letter-spacing: .02em; }
  .cv-grave i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cv-pres .cv-cube { animation: none !important; transition: none !important; } }

.ax-etroit .cv-cles::before { display: none; }
.ax-etroit .cv { height: auto; padding: 16px 12px 20px; display: grid; gap: 18px; }
.ax-etroit .cv > * { position: static; width: auto; }
.ax-etroit .cv-sol, .ax-etroit .cv-verre, .ax-etroit .cv-molette, .ax-etroit .cv-socle, .ax-etroit .cv-fil, .ax-etroit .cv-lettre { display: none; }
.ax-etroit .cv-chemin { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
.ax-etroit .cv-etape { position: static; width: auto; margin: 0; }
.ax-etroit .cv-titre { white-space: normal; text-align: left; }
.ax-etroit .cv-cles .cv-etiq { position: static; width: auto; }
.ax-etroit .cv-sablier { justify-items: start; }
.ax-etroit .cv-dehors, .ax-etroit .cv-pourquoi, .ax-etroit .cv-dedans { width: auto; }
.ax-etroit .cv-non { animation: none; }

/* ─── 4 · La page introuvable : le tableau qui ne trouve pas la ligne ─── */
.ru>*{position:absolute}
/* le hall : la verrière, sa grande arche, la lumière qui tombe */
.gx-hall{left:0;top:0;width:1150px;height:600px;background:linear-gradient(180deg,#DDE8FA 0%,#EEF2FB 34%,#F5F5FB 62%,#E8EAF3 100%)}
.gx-verriere{left:0;top:0;width:1150px;height:200px;background:linear-gradient(180deg,#BFD6F7 0%,#DCE8FA 70%,rgba(220,232,250,0) 100%);
  -webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
.gx-verriere::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 5px,transparent 5px 92px)}
.gx-verriere::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 46px,rgba(255,255,255,.75) 46px 49px)}
.gx-arche{left:-20px;top:-10px;width:1190px;height:560px;border-radius:50%/52%;border:11px solid #FFFFFF;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;
  box-shadow:inset 0 14px 0 -6px rgba(var(--ombre),.07);opacity:.95}
.gx-arche.b{left:30px;top:24px;width:1090px;height:520px;border-width:5px;opacity:.7}
.gx-rai{top:0;width:200px;height:520px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 85%);transform:skewX(-16deg);opacity:.55}
.gx-pilier{top:0;width:14px;height:500px;border-radius:3px;background:linear-gradient(90deg,#FFFFFF,#E2E6F1 60%,#D4D9E8);box-shadow:4px 0 10px -6px rgba(var(--ombre),.35)}
.gx-pilier::after{content:"";position:absolute;left:5px;top:150px;width:3px;height:300px;border-radius:2px;background:linear-gradient(180deg,rgba(77,148,255,.0),rgba(77,148,255,.7),rgba(77,148,255,0))}
/* l'horloge de la gare */
.gx-tige{width:3px;background:#C3C9DA}
.gx-horloge{left:226px;top:92px;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFFFFF,#EEF1F8);box-shadow:0 0 0 5px #2565C3,0 0 0 7px #FFFFFF,0 14px 24px -12px rgba(var(--ombre),.6)}
.gx-horloge i{position:absolute;left:50%;top:50%;width:3px;border-radius:2px;background:#21263A;transform-origin:50% 100%}
.gx-horloge i.h{height:20px;margin:-20px 0 0 -1.5px;transform:rotate(135deg)}
.gx-horloge i.m{height:28px;margin:-28px 0 0 -1px;width:2px;transform:rotate(180deg)}
.gx-horloge b{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#FF62B0;box-shadow:0 0 6px 2px rgba(255,98,176,.6)}
.gx-horloge u{position:absolute;inset:6px;border-radius:50%;background:repeating-conic-gradient(from -1deg,#21263A 0 2deg,transparent 2deg 30deg);-webkit-mask:radial-gradient(circle,transparent 76%,#000 77%);mask:radial-gradient(circle,transparent 76%,#000 77%)}
/* le grand tableau à palettes : bandeau bleu clair (règle des bulletins), corps de verre nuit, palettes claires */
.gx-tab{left:356px;top:52px;width:660px;height:276px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#26305A,#1C2446);
  box-shadow:0 0 0 6px #FFFFFF,0 0 0 7px rgba(var(--ombre),.12),0 30px 50px -24px rgba(16,22,52,.7)}
.gx-tete{position:absolute;left:0;right:0;top:0;height:42px;display:flex;align-items:center;gap:10px;padding:0 14px;background:linear-gradient(180deg,#DCEBFF,#C9DDFB);box-shadow:inset 0 -2px 0 #4D94FF}
.gx-tete svg{width:22px;height:22px}
.gx-tete b{font:600 13px/1 var(--outil);letter-spacing:.2em;color:#1C54AA}
.gx-tete em{font:400 15px/1 var(--main);color:#2565C3}
.gx-tete .heure{margin-left:auto;display:flex;gap:2px;align-items:center}
.gx-tete .heure span{width:17px;height:24px;border-radius:3px;display:grid;place-items:center;background:linear-gradient(180deg,#FFFFFF 0 49%,#EEF3FB 51%);box-shadow:0 0 0 1px rgba(37,101,195,.3);font:600 14px/1 var(--valeur);color:#1C54AA}
.gx-tete .heure i{font:600 14px/1 var(--valeur);color:#1C54AA;font-style:normal;margin:0 1px}
.gx-cols{position:absolute;left:0;right:0;top:48px;display:grid;grid-template-columns:30px 252px 1fr 56px 84px;gap:0 10px;padding:0 14px;font:600 9px/1 var(--outil);letter-spacing:.18em;color:#8F9AC0}
.gx-lignes{position:absolute;left:0;right:0;top:64px}
.gx-l{display:grid;grid-template-columns:30px 252px 1fr 56px 84px;gap:0 10px;align-items:center;height:24px;margin:0 0 2px;padding:0 14px;position:relative}
.gx-l::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:1px;background:rgba(255,255,255,.06)}
.gx-l .pic-r{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--v),var(--c));color:#fff;box-shadow:0 0 10px -2px rgba(var(--k),.8)}
.gx-l .pic-r svg{width:13px;height:13px;stroke-width:2.2}
.gx-pal{display:flex;gap:1.6px}
.gx-pal span{width:13px;height:19px;border-radius:2px;display:grid;place-items:center;background:linear-gradient(180deg,#F4F6FB 0 49%,#E3E8F3 51%);box-shadow:0 1px 0 rgba(0,0,0,.4);font:600 11px/1 var(--valeur);color:#1E2850}
.gx-pal span.v{background:linear-gradient(180deg,rgba(255,255,255,.07) 0 49%,rgba(255,255,255,.04) 51%);box-shadow:none}
.gx-fam{font:500 10.5px/1.15 var(--outil);color:#B4BED6;white-space:nowrap;overflow:hidden}
.gx-n{font:600 12px/1 var(--valeur);color:#EEF2FA;text-align:center}
.gx-n small{display:block;font:500 8px/1.1 var(--outil);letter-spacing:.1em;color:#8F9AC0;margin-top:2px}
.gx-etat{height:20px;border-radius:4px;display:grid;place-items:center;font:600 10px/1 var(--valeur);letter-spacing:.14em}
.gx-etat.pret{background:linear-gradient(180deg,#E6FAEE 0 49%,#D3F4E0 51%);color:#006C25}
.gx-etat.bientot{background:linear-gradient(180deg,#FFF6D2 0 49%,#FFEDA8 51%);color:#775900;animation:gaCligne 2.4s ease-in-out infinite}
@keyframes gaCligne{50%{opacity:.55}}
.gx-l.choisie{background:linear-gradient(90deg,rgba(255,226,154,.24),rgba(255,226,154,.06));box-shadow:inset 3px 0 0 #FFC60D}
.gx-l.choisie .gx-pal span{box-shadow:0 1px 0 rgba(0,0,0,.4),0 0 10px rgba(255,214,110,.6)}
.gx-l.bientot-vue{background:linear-gradient(90deg,rgba(255,198,13,.22),rgba(255,198,13,.04))}
.gx-l.bascule .gx-pal span{animation:gaBascule .5s ease-in-out both}
@keyframes gaBascule{0%{transform:scaleY(1)}45%{transform:scaleY(.06)}100%{transform:scaleY(1)}}
.gx-pied{position:absolute;left:14px;right:14px;bottom:9px;display:flex;justify-content:space-between;font:500 10px/1 var(--outil);color:#8F9AC0}
.gx-pied b{color:#FFE29A;font-weight:600}
/* la voie, le tram, le quai où l'on se tient */
.gx-fond-voie{left:0;top:344px;width:1150px;height:146px;background:linear-gradient(180deg,#E9ECF6 0%,#DFE3EF 100%)}
.gx-fond-voie::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;background:linear-gradient(90deg,transparent,rgba(77,148,255,.55),transparent);filter:blur(1px)}
.gx-quai-face{left:0;top:452px;width:1150px;height:18px;background:linear-gradient(180deg,#F3F4F9,#D8DCE8)}
.gx-ballast{left:0;top:470px;width:1150px;height:34px;background:linear-gradient(180deg,#C9CEDC,#D7DBE6)}
.gx-rail{left:0;width:1150px;height:4px;border-radius:2px;background:linear-gradient(180deg,#F2F4F9,#A9B1C7)}
.gx-cable{left:0;top:356px;width:1150px;height:2px;background:#A9B1C7;opacity:.7}
.gx-quai{left:0;top:504px;width:1150px;height:96px;background:linear-gradient(180deg,#F6F6FA,#ECECF3)}
.gx-bord{left:0;top:504px;width:1150px;height:12px;background:linear-gradient(180deg,#FFFFFF,#F1F2F7);box-shadow:0 2px 0 rgba(var(--ombre),.08)}
.gx-bord::after{content:"";position:absolute;left:0;right:0;top:3px;height:6px;background-image:radial-gradient(circle,#FFC60D 1.6px,transparent 2px);background-size:9px 6px;opacity:.85}
.gx-banc{left:980px;top:528px;width:136px;height:44px}
.gx-banc i{position:absolute;left:0;right:0;height:8px;border-radius:3px;background:linear-gradient(180deg,#FFFFFF,#DDE2EE);box-shadow:0 3px 5px -3px rgba(var(--ombre),.5)}
.gx-banc u{position:absolute;bottom:0;width:6px;height:22px;background:#C3C9DA}
.gx-tram{left:300px;top:366px;width:700px;height:120px;z-index:8;transform:translateX(960px)}
.gx-tram .caisse{position:absolute;inset:0;border-radius:52px 14px 10px 10px;background:linear-gradient(180deg,#FFFFFF 0%,#F1F5FD 56%,#4D94FF 56%,#2565C3 92%,#1C54AA 100%);
  box-shadow:0 0 0 1px rgba(37,101,195,.35),0 22px 30px -16px rgba(var(--ombre),.7),inset 0 3px 0 rgba(255,255,255,.95)}
.gx-tram .toit{position:absolute;left:70px;right:40px;top:-8px;height:10px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#F4F6FB,#DCE1EE)}
.gx-tram .panto{position:absolute;left:330px;top:-12px;width:60px;height:2px;background:#8D96B2}
.gx-tram .panto::before,.gx-tram .panto::after{content:"";position:absolute;top:-6px;width:2px;height:16px;background:#8D96B2;transform:rotate(32deg);left:18px}
.gx-tram .panto::after{transform:rotate(-32deg);left:40px}
.gx-tram .vitre{position:absolute;top:16px;height:38px;border-radius:7px;background:linear-gradient(165deg,#7A88B8 0%,#2E375E 55%,#414C7E 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.gx-tram .vitre::after{content:"";position:absolute;inset:0;border-radius:7px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 38%,transparent 48%)}
.gx-tram .avant{position:absolute;left:14px;top:14px;width:76px;height:44px;border-radius:40px 8px 8px 8px;background:linear-gradient(165deg,#7A88B8 0%,#2E375E 60%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.gx-tram .dest{position:absolute;left:108px;top:-1px;height:14px;padding:0 10px;border-radius:3px;display:flex;align-items:center;gap:6px;background:#1E2850;font:600 9.5px/1 var(--valeur);letter-spacing:.12em;color:#FFE29A;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.gx-tram .dest i{width:5px;height:5px;border-radius:50%;background:#FF62B0;box-shadow:0 0 6px 2px rgba(255,98,176,.7)}
.gx-tram .phare{position:absolute;left:4px;top:76px;width:12px;height:10px;border-radius:50%;background:#FF62B0;box-shadow:0 0 14px 6px rgba(255,98,176,.6)}
.gx-tram .porte{position:absolute;top:14px;width:64px;height:96px;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#FFF1CF,#FFD98C);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.gx-tram .porte::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,rgba(255,255,255,.95),rgba(255,226,154,0))}
.gx-tram .battant{position:absolute;top:0;width:32px;height:96px;background:linear-gradient(165deg,#6E7CAE 0%,#2E375E 60%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);z-index:2}
.gx-tram .battant.g{left:0}.gx-tram .battant.d{right:0}
.gx-lumiere{left:300px;top:486px;width:700px;height:110px;z-index:7;opacity:0;background:radial-gradient(40% 70% at 47% 0%,rgba(255,226,154,.75),rgba(255,226,154,0))}
.ru:not([data-t="allume"]) .gx-tram{visibility:hidden}
.ru[data-t="allume"] .gx-tram{transform:none;transition:transform 2.4s cubic-bezier(.2,.75,.25,1)}
.ru[data-t="allume"] .gx-tram .battant.g{transform:translateX(-30px);transition-delay:2.5s}
.ru[data-t="allume"] .gx-tram .battant.d{transform:translateX(30px);transition-delay:2.5s}
.ru[data-t="allume"] .gx-lumiere{opacity:1;transition-delay:2.7s}

.gx-in{height:600px;background:#EEF2FB;overflow:hidden}
.gx-in .gx-tab{left:190px;top:44px;width:640px;height:300px}
.gx-in .gx-cols{grid-template-columns:30px 286px 1fr 112px}
.gx-in .gx-l{grid-template-columns:30px 286px 1fr 112px;height:30px;margin:0 0 3px;cursor:pointer}
.gx-in .gx-pal span{width:15px;height:22px;font-size:12.5px}
.gx-in .gx-l.lumiere{background:linear-gradient(90deg,rgba(255,226,154,.24),rgba(255,226,154,.06));box-shadow:inset 3px 0 0 #FFC60D}
.in-faux{background:linear-gradient(90deg,rgba(255,198,13,.26),rgba(255,198,13,.05));box-shadow:inset 3px 0 0 #FFC60D}
.in-faux .gx-pal span{background:linear-gradient(180deg,#FFF6D2 0 49%,#FFEDA8 51%);color:#775900}
.in-code{font:600 13px/1 var(--valeur);color:#FFE29A;letter-spacing:.14em}
.in-etat{height:22px;border-radius:4px;display:grid;place-items:center;font:600 10px/1 var(--valeur);letter-spacing:.14em}
.in-etat.ouv{background:linear-gradient(180deg,#E6FAEE 0 49%,#D3F4E0 51%);color:#006C25}
.in-etat.int{background:#FFEDA8;color:#775900;animation:inHalo 2.2s ease-in-out infinite}
@keyframes inHalo{0%,100%{box-shadow:0 0 0 0 rgba(255,198,13,.0)}50%{box-shadow:0 0 0 4px rgba(255,198,13,.35),0 0 14px 2px rgba(255,198,13,.55)}}
.gx-in .gx-tram{left:224px;top:370px;transform:none;visibility:visible!important;transition:transform 2.6s cubic-bezier(.55,.05,.65,.95)}
.gx-in.part .gx-tram{transform:translateX(-1100px)}
.gx-in .gx-tram .dest{min-width:90px;justify-content:center}
.in-sol{left:0;top:490px;width:1150px;height:110px;background:linear-gradient(180deg,#F6F6FA,#ECECF3)}
.in-sol::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background-image:radial-gradient(circle,#FFC60D 1.6px,transparent 2px);background-size:9px 6px;opacity:.8}
.in-hector{left:842px;top:176px;width:300px;z-index:20;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(var(--k5),.45),0 20px 34px -18px rgba(var(--ombre),.6)}
.in-hector p{display:flex;gap:10px;margin:0;font:500 14px/1.4 var(--outil);color:var(--encre)}
.in-hector img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--v5)}
.in-hector b{color:var(--c5);font-weight:600}
.in-point{left:852px;top:156px;width:16px;height:16px;z-index:21;border-radius:50%;background:radial-gradient(circle at 36% 34%,#FFC4E0,#FF62B0 55%,#DF006F);box-shadow:0 0 0 5px rgba(255,98,176,.22),0 0 20px 7px rgba(255,98,176,.45);animation:inPouls 1.8s ease-in-out infinite}
@keyframes inPouls{50%{transform:scale(1.25)}}
.in-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--p4);box-shadow:inset 0 0 0 1px rgba(var(--k4),.5);font:500 13px/1 var(--outil);color:#775900}
.in-chip svg{width:16px;height:16px;color:var(--c4)}

a.gx-l { color: inherit; text-decoration: none; cursor: pointer; }
a.gx-l:focus-visible { outline: 3px solid var(--v2); outline-offset: -3px; }
.gx-liste { display: none; }
@media (max-width: 760px) {
  .gx-liste { display: grid; gap: 10px; max-width: 1022px; margin: 22px auto 0; padding: 0; list-style: none; }
  .gx-liste a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--filet); font: 600 15px/1.2 var(--sans); color: var(--encre); text-decoration: none; }
  .gx-liste a .pic { color: var(--c); }
}

/* ─── 5 · Vos données pendant la visite : l'accueil de la simulation ─── */

.ac{height:690px;background:linear-gradient(180deg,#26305A 0%,#2F3A6B 34%,#E9E7F2 34%,#EFEEF6 100%)}
.ac-ciel{left:0;top:0;width:1022px;height:234px;background:radial-gradient(70% 120% at 70% 0%,rgba(189,114,255,.35),transparent 60%),radial-gradient(40% 80% at 10% 30%,rgba(77,148,255,.30),transparent 60%)}
.ac-enseigne{left:0;right:0;top:30px;text-align:center;font:600 22px/1 var(--outil);letter-spacing:.42em;color:#EEF2FA;text-shadow:0 0 18px rgba(156,196,251,.8)}
.ac-enseigne em{font:400 18px/1 var(--main);letter-spacing:0;color:#FFD9C2;margin-left:12px;text-shadow:none}
/* la salle commune, derrière la vitre */
.ac-vitre{left:300px;top:76px;width:422px;height:200px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#FFF3D6,#FFE2A8);box-shadow:0 0 0 6px #EEF0F8,0 0 0 7px rgba(var(--ombre),.2),0 0 60px 8px rgba(255,214,140,.35)}
.ac-vitre::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 36%,transparent 44%)}
.ac-salle{position:absolute;left:18px;right:18px;top:16px;bottom:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ac-salle span{border-radius:8px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(var(--ombre),.1);display:grid;place-items:center;align-content:center;gap:4px;font:500 10.5px/1.2 var(--outil);color:var(--appui);text-align:center}
.ac-salle span svg{width:18px;height:18px;color:var(--c)}
.ac-panneau{left:330px;top:290px;width:362px;padding:9px 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1.5px rgba(var(--k5),.55),0 14px 22px -14px rgba(var(--ombre),.6);display:flex;align-items:center;gap:10px;font:500 13px/1.35 var(--outil);color:var(--encre)}
.ac-panneau i{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--v5),var(--c5));color:#fff}
.ac-panneau i svg{width:16px;height:16px}
.ac-panneau b{color:var(--c5);font-weight:600}
/* le comptoir de l'accueil */
.ac-comptoir{left:30px;top:372px;width:962px;height:266px;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#FFFFFF,#F1F2F8);box-shadow:0 -10px 30px -18px rgba(var(--ombre),.5),inset 0 2px 0 #fff}
.ac-comptoir::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,var(--v3),var(--v2),var(--v6))}
/* le badge, sur le comptoir */
.ac-badge{left:70px;top:330px;width:230px;z-index:5}
.ac-cordon{position:absolute;left:96px;top:0;width:38px;height:56px;border:6px solid var(--v3);border-bottom:0;border-radius:20px 20px 0 0}
.ac-carte{position:absolute;left:0;top:50px;width:230px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(var(--ombre),.1),0 24px 34px -18px rgba(var(--ombre),.65)}
.ac-carte .tete{padding:12px 14px;background:linear-gradient(135deg,var(--v3),var(--c3));font:600 10.5px/1 var(--outil);letter-spacing:.2em;color:#fff}
.ac-carte .corps{padding:12px 14px 14px}
.ac-carte .nom{display:flex;align-items:center;gap:10px;font:500 20px/1 var(--outil);color:var(--encre)}
.ac-carte .nom i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--p3);color:var(--c3);font:600 16px/1 var(--outil)}
.ac-carte .nom small{display:block;margin-top:4px;font:500 11px/1.2 var(--outil);color:var(--douce)}
.ac-code{display:flex;gap:5px;margin:12px 0 6px}
.ac-code span{width:34px;height:38px;border-radius:7px;display:grid;place-items:center;background:var(--p1);box-shadow:inset 0 0 0 1.5px var(--v1);font:600 18px/1 var(--valeur);color:#006C25}
.ac-carte .dit{display:flex;align-items:center;gap:6px;font:500 11.5px/1.3 var(--outil);color:var(--appui)}
.ac-carte .dit svg{width:14px;height:14px;color:var(--c1)}
.ac-jours{display:flex;gap:3px;margin:10px 0 4px}
.ac-jours i{flex:1;height:6px;border-radius:3px;background:#FFC60D}
.ac-jours i.vu{background:#E3E7F1}
.ac-carte .reste{font:600 11px/1 var(--outil);color:#775900}
/* le registre ouvert : ce que l'accueil note */
.ac-registre{left:330px;top:400px;width:620px;height:228px;z-index:4;display:grid;grid-template-columns:1fr 1fr;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(var(--ombre),.08),0 20px 30px -20px rgba(var(--ombre),.6)}
.ac-registre::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:20px;margin-left:-10px;background:linear-gradient(90deg,transparent,rgba(var(--ombre),.10),transparent)}
.ac-page{padding:14px 18px;display:grid;align-content:start;gap:7px}
.ac-page h6{display:flex;align-items:center;gap:8px;margin:0 0 3px;font:400 18px/1 var(--main);color:var(--c3)}
.ac-l{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;font:500 12.5px/1.35 var(--outil);color:var(--appui)}
.ac-l svg{width:15px;height:15px;color:var(--c);margin-top:1px}
.ac-l b{color:var(--encre);font-weight:600}
/* la ligne des partenaires, à droite de la vitre */
.ac-ligne{left:744px;top:96px;width:250px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(var(--k5),.4),0 18px 30px -18px rgba(0,0,0,.6)}
.ac-ligne .qui{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.ac-ligne .qui img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--c)}
.ac-ligne .qui img+img{margin-left:-12px}
.ac-ligne p{margin:0 0 6px;display:flex;gap:7px;font:500 12px/1.35 var(--outil);color:var(--appui)}
.ac-ligne p svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--c5)}
.ac-ligne b{color:var(--encre);font-weight:600}
/* à gauche de la vitre : ce qui sort de la visite pour de vrai */
.ac-sortie{left:28px;top:96px;width:250px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(var(--k2),.4),0 18px 30px -18px rgba(0,0,0,.6)}
.ac-sortie h6,.ac-ligne h6{display:flex;align-items:center;gap:7px;margin:0 0 8px;font:600 11px/1 var(--outil);letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.ac-sortie h6 svg,.ac-ligne h6 svg{width:15px;height:15px}
.ac-sortie p{margin:0 0 6px;display:flex;gap:7px;font:500 12px/1.35 var(--outil);color:var(--appui)}
.ac-sortie p svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--c2)}
.ac-sortie b{color:var(--encre);font-weight:600}
/* la frise de la fin, sous la scène */
.ac-frise{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:28px 0 0;position:relative}
.ac-frise::before{content:"";position:absolute;left:12%;right:12%;top:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--v3),var(--v2),var(--v6),var(--v1))}
.ac-temps{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;padding:0 10px}
.ac-temps i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 3px var(--v),0 12px 18px -10px rgba(var(--k),.9);color:var(--c);z-index:1}
.ac-temps i svg{width:24px;height:24px}
.ac-temps b{font:600 14px/1.2 var(--outil);color:var(--encre)}
.ac-temps span{font:500 12.5px/1.35 var(--outil);color:var(--appui)}

.annexe .ac-carte .tete { margin: 0; gap: 0; }
.ax-etroit .ac { height: auto; padding: 16px 12px 20px; display: grid; gap: 16px; background: linear-gradient(180deg, #F3F1FA, #ECEAF6); }
.ax-etroit .ac > * { position: static; width: auto; }
.ax-etroit .ac-ciel, .ax-etroit .ac-enseigne, .ax-etroit .ac-comptoir, .ax-etroit .ac-cordon { display: none; }
.ax-etroit .ac-vitre { height: auto; }
.ax-etroit .ac-salle { position: static; grid-template-columns: 1fr 1fr; padding: 12px; }
.ax-etroit .ac-carte { position: static; width: auto; }
.ax-etroit .ac-registre { height: auto; grid-template-columns: minmax(0, 1fr); }
.ac-frise { margin-inline: auto; }
.ac-temps { align-content: start; }
@media (max-width: 760px) { .ac-frise { grid-template-columns: minmax(0, 1fr); gap: 18px; } .ac-frise::before { display: none; } }

.ac-retour { margin: 22px auto 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font: 500 14.5px/1.4 var(--sans); color: var(--douce); }