/* Versions A et B de l'accueil (octobre 2026) · socle commun
 * Polices et bleu de l'ADN (bleu-tokens.css). Sans gris foncé, sans grain par défaut.
 * Une seule famille, Archivo : graisse moyenne pour A, affichage gras élargi pour B.
 */

:root {
  /* bleus tirés de l'outremer de l'ADN, teinte 266 */
  --color-bleu-profond: oklch(27% 0.15 266);         /* #06156e : carte 01 et réalisations de A */
  --color-bleu-profond-2: oklch(32% 0.17 266);
  --color-nuit-bleue: oklch(17% 0.06 266);           /* #040d29 : fond de B */
  --color-nuit-bleue-2: oklch(22% 0.07 266);         /* #0b183b : cartes de B */
  --color-blanc-casse: oklch(97.5% 0.004 266);       /* #f5f7fa */
  --color-gris-media: oklch(94.5% 0.006 266);
  --color-encre-v: oklch(18% 0.01 266);              /* #0f1216, texte presque noir */
  --color-texte-v2: oklch(45% 0.01 266);             /* 7,5:1 sur blanc */
  --color-texte-nuit-v2: oklch(78% 0.03 266);        /* 9,5:1 sur la nuit bleue */
  --color-filet-v: oklch(18% 0.01 266 / 0.12);
  --color-filet-v-fort: oklch(18% 0.01 266 / 0.24);
  --color-filet-nuit-v: oklch(100% 0 0 / 0.16);
  --color-filet-nuit-v-fort: oklch(100% 0 0 / 0.32);
  --color-verre-blanc: oklch(100% 0 0 / 0.78);
  --color-verre-nuit: oklch(17% 0.06 266 / 0.72);
  --color-voile-film: oklch(12% 0.05 266 / 0.86);
  --color-voile-film-0: oklch(12% 0.05 266 / 0);
  --color-voile-haut: oklch(12% 0.05 266 / 0.45);
  --color-voile-contact: oklch(12% 0.05 266 / 0.55);
  --color-ombre-menu: oklch(18% 0.01 266 / 0.3);
  --color-repere: oklch(93% 0.12 100);
  --color-repere-encre: oklch(22% 0 0);
  /* mouvement, mesuré sur les références */
  --ease-cub: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-revele: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.evitement { position: absolute; left: 16px; top: -100px; z-index: 300; padding: 10px 16px; background: var(--color-encre-v); color: var(--color-blanc); text-decoration: none; }
.evitement:focus-visible { top: 16px; }
.lecteur-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.a-confirmer {
  display: inline; padding: 0.12em 0.4em;
  font: 500 0.72em/1.5 var(--font-mono); letter-spacing: 0; text-transform: none;
  color: var(--color-repere-encre); background: var(--color-repere);
  outline: 1px dashed var(--color-repere-encre); outline-offset: -1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* les vidéos : l'image d'attente reste dessous, la vidéo apparaît quand elle joue */
[data-video] { opacity: 0; transition: opacity 600ms var(--ease-sortie); }
[data-video].est-lue { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-video] { display: none; } }

/* apparition simple, partout où GSAP ne prend pas la main */
@media (prefers-reduced-motion: no-preference) {
  .js .revele { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-revele) var(--ease-sortie), transform var(--dur-revele) var(--ease-sortie); }
  .js .revele.est-vu { opacity: 1; transform: none; }
}

/* le grain, en option : ?grain dans l'adresse. Presque invisible */
.avec-grain body::after {
  content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: url("/assets/oct/papier-ordinateur.webp") 50% 50% / cover;
  mix-blend-mode: multiply; opacity: 0.22;
}

/* la visite complète, en plein écran */
.visionneuse { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-nuit-bleue); color: var(--color-blanc); }
.visionneuse::backdrop { background: var(--color-nuit-bleue); }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse video { width: 100%; height: 100%; object-fit: contain; background: var(--color-nuit-bleue); }
.visionneuse__fermer { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 2; height: 44px; padding: 0 18px; border: 1px solid var(--color-filet-nuit-v-fort); border-radius: 999px; font: 500 15px/1 var(--font-body); color: var(--color-blanc); background: var(--color-nuit-bleue-2); cursor: pointer; }

/* aiguillage des versions de test */
.aiguillage { position: fixed; left: 16px; bottom: 16px; z-index: 250; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--color-encre-v); color: var(--color-texte-nuit-v2); font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.aiguillage span { margin-right: 6px; }
.aiguillage a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; color: var(--color-blanc); text-decoration: none; }
.aiguillage a[aria-current="page"] { background: var(--color-bleu); }
@media (max-width: 767px) { .aiguillage { display: none; } }

/* pied de page commun, décliné par version */
.vp-pied { padding: clamp(64px, 8vw, 120px) 0 clamp(28px, 3vw, 40px); }
.vp-pied__in { width: min(100% - 2 * var(--vp-marge, 24px), var(--vp-largeur, 1286px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px 64px; }
.vp-pied__logo { display: inline-flex; align-items: baseline; gap: 0.08em; font: 800 semi-expanded 2rem/1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; }
.vp-pied__logo span { width: 0.24em; height: 0.24em; background: var(--vp-carre, var(--color-bleu-sur-nuit)); }
.vp-pied__marque p { margin-top: 20px; max-width: 30ch; font-size: 15px; line-height: 1.5; opacity: 0.82; }
.vp-pied__liens { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px 64px; align-content: start; justify-content: end; }
.vp-pied__liens a { font-size: 17px; text-decoration: none; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 400ms var(--ease-cub); }
.vp-pied__liens a:hover { background-size: 100% 1px; }
.vp-pied__bas { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--vp-filet, var(--color-filet-nuit-v)); font-size: 13px; opacity: 0.72; }
@media (max-width: 767px) {
  .vp-pied__in { grid-template-columns: minmax(0, 1fr); }
  .vp-pied__liens { justify-content: start; gap: 14px 40px; }
}