/* ==========================================================================
   Periaza : composants communes à toutes les pages
   Ne consomme que les variables de tokens.css. Aucune valeur de couleur ici.
   Règle de contraste : chaque texte repose sur une surface opaque
   (--c-bg, --c-surface-1, --c-surface-2 ou --c-accent). La matière du fond
   (halo et grain) ne se voit que dans les interstices, jamais sous un texte.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  position: relative;
  min-height: 100vh;
  background-color: var(--c-bg);
  color: var(--c-body);
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* Matière : deux couches statiques, fixes, sans interaction. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before { background: var(--matter-halo); }
body::after { background-image: var(--matter-grain); background-size: 180px 180px; opacity: var(--matter-grain-opacity); }
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--c-accent-hover); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--c-text); font-weight: 700; letter-spacing: var(--tr-title); line-height: var(--lh-title); text-wrap: balance; }
h1 { font-weight: 900; font-size: var(--fs-h1); letter-spacing: var(--tr-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-display); }
h3 { font-size: var(--fs-h3); }
p { max-width: 68ch; text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; }
strong { color: var(--c-text); font-weight: 600; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--c-accent); color: var(--c-on-accent); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: var(--c-on-accent); }

/* ---------- Typographie utilitaire ---------- */
.kick {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-info);
  margin-bottom: var(--s-5);
}
.mono { font-family: var(--f-mono); }
.num { font-family: var(--f-mono); color: var(--c-accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lg); color: var(--c-soft); line-height: 1.55; max-width: 52ch; }
.soft { color: var(--c-soft); }
.info { color: var(--c-info); }
.small { font-size: var(--fs-sm); }
.title-soft { color: var(--c-info); }

/* ---------- Mise en page ---------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; }
.slab {
  width: min(100% - 2 * var(--slab-gap), var(--frame));
  margin: var(--slab-gap) auto;
  padding: var(--section-y) var(--gutter);
  /* Fond translucide, et non opaque : c'est ce qui laisse la vidéo de fond
     visible derrière les sections. Le texte reste très au-dessus du seuil AA,
     la vidéo étant elle-même très sombre. */
  background-color: rgba(10, 15, 30, 0.68);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.slab--1 { background-color: rgba(18, 26, 43, 0.78); }
.slab--tight { padding-block: calc(var(--section-y) * 0.6); }
.section-head { margin-bottom: var(--s-12); max-width: 60ch; }
.section-head h2 + p { margin-top: var(--s-5); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.btn--primary { background-color: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background-color: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--ghost { background-color: var(--c-bg); color: var(--c-text); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-text); }
.btn--lg { min-height: 52px; padding: var(--s-4) var(--s-8); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
  color: var(--c-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--c-line-strong);
}
.link-arrow:hover { color: var(--c-accent); border-color: var(--c-accent); }
.link-arrow span[aria-hidden] { color: var(--c-accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-8); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  width: min(100% - 2 * var(--slab-gap), var(--frame)); margin-inline: auto;
  min-height: var(--header-h); padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); color: var(--c-text); text-decoration: none; font-family: var(--f-display); font-weight: 900; font-size: 1.25rem; letter-spacing: var(--tr-title); }
.brand:hover { color: var(--c-text); }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav-main ul { display: flex; align-items: center; gap: var(--s-1); list-style: none; }
.nav-main a {
  position: relative;
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-3);
  color: var(--c-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-sm);
}
.nav-main a:hover, .nav-main a[aria-current="page"] { color: var(--c-text); }
/* Soulignement progressif : au survol ou au focus clavier, un filet bleu
   glacé se trace de gauche à droite (transform: scaleX). La page courante
   garde son filet ambré, déjà tracé. Le tracé animé est déclaré plus bas,
   dans le bloc « Motion design », sous prefers-reduced-motion: no-preference ;
   sinon le filet apparaît d'un coup. */
.nav-main a::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 10px; height: 1px;
  background-color: var(--c-info); transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.nav-main a:hover::after, .nav-main a:focus-visible::after, .nav-main a[aria-current="page"]::after { transform: scaleX(1); }
.nav-main a[aria-current="page"]::after { background-color: var(--c-accent); }
.header-cta { flex: none; }

/* Menu mobile : details natif, fonctionne sans JavaScript. */
.nav-mobile { display: none; }
.nav-mobile > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; background-color: var(--c-bg);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::after { content: "+"; font-family: var(--f-mono); color: var(--c-accent); }
.nav-mobile[open] > summary::after { content: "\00D7"; }
.nav-mobile-panel {
  position: absolute; left: var(--slab-gap); right: var(--slab-gap); top: calc(100% + 1px);
  background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--s-4) var(--gutter) var(--s-6); box-shadow: var(--sh-2);
}
.nav-mobile-panel ul { list-style: none; }
.nav-mobile-panel li + li { border-top: 1px solid var(--c-line); }
.nav-mobile-panel a:not(.btn) { display: flex; align-items: center; min-height: 52px; color: var(--c-text); text-decoration: none; font-weight: 600; }
.nav-mobile-panel .btn { margin-top: var(--s-4); }

@media (max-width: 1080px) {
  .nav-main { display: none; }
  .nav-mobile { display: block; }
  .header-inner { position: relative; }
}
@media (max-width: 560px) {
  .header-cta { display: none; }
}

/* ---------- Pied de page ---------- */
.site-footer { margin-top: var(--slab-gap); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-10) var(--s-8); }
.footer-brand p { color: var(--c-soft); font-size: var(--fs-sm); margin-top: var(--s-4); max-width: 34ch; }
.footer-col h2 { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--c-info); margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; }
.footer-col a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-soft); text-decoration: none; font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--c-text); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--c-line);
  color: var(--c-info); font-size: var(--fs-xs); font-family: var(--f-mono); letter-spacing: 0.04em;
}
.footer-base p { max-width: none; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Révélation par masque : le seul geste d'animation ----------
   L'état masqué n'est posé que par site.js, sur les blocs situés sous la
   ligne de flottaison, et jamais si prefers-reduced-motion est actif.
   Sans JavaScript, rien n'est masqué. */
.is-masked { clip-path: inset(0 0 100% 0); }
/* Entrée en cascade : site.js numérote (--i) les blocs d'un même parent qui
   entrent dans le champ au même moment ; chacun suit le précédent de
   --stagger-reveal. Un bloc qui arrive seul garde --i à 0, sans retard. */
.is-masked.is-in { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-reveal) var(--ease-reveal); transition-delay: calc(var(--i, 0) * var(--stagger-reveal)); }
@media (prefers-reduced-motion: reduce) {
  .is-masked { clip-path: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   ACCUEIL
   ========================================================================== */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12);
  align-items: center;
  min-height: min(720px, calc(100svh - var(--header-h) - 2 * var(--slab-gap)));
  padding-block: clamp(40px, 7vh, 112px);
}
.hero h1 { max-width: 11ch; }
.hero .lead { margin-top: var(--s-6); }
.ledger {
  background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--s-2) var(--s-6);
}
.ledger li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--s-4); padding-block: var(--s-5); }
.ledger li + li { border-top: 1px solid var(--c-line); }
.ledger .num { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1; }
.ledger span:last-child { color: var(--c-soft); font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--s-10); align-items: start; }
}

/* Constat : titre collant et liste éditoriale */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12) var(--s-16); }
.split-sticky { position: sticky; top: calc(var(--header-h) + var(--s-8)); align-self: start; }
.split-sticky p { margin-top: var(--s-5); }
.steps-list { list-style: none; counter-reset: none; }
.steps-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-8); border-top: 1px solid var(--c-line); }
.steps-list li:last-child { border-bottom: 1px solid var(--c-line); }
.steps-list .num { font-size: var(--fs-lg); padding-top: 0.15em; }
.steps-list h3 { margin-bottom: var(--s-3); }
.steps-list p { color: var(--c-soft); }
.resolve { margin-top: var(--s-10); font-size: var(--fs-xl); font-family: var(--f-display); font-weight: 700; color: var(--c-text); letter-spacing: var(--tr-title); line-height: 1.3; max-width: 34ch; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split-sticky { position: static; } }
@media (max-width: 480px) { .steps-list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

/* Offres : composition asymétrique (pas trois cartes identiques) */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--slab-gap); }
.tile {
  background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: var(--s-4);
}
.tile p { color: var(--c-soft); }
.tile .link-arrow { margin-top: auto; align-self: flex-start; }
.tile--lead { grid-column: span 7; grid-row: span 2; background-color: var(--c-surface-2); }
.tile--lead h3 { font-size: var(--fs-h2); letter-spacing: var(--tr-display); line-height: 1.04; }
.tile--side { grid-column: span 5; }
.checklist { list-style: none; display: grid; gap: var(--s-3); margin-block: var(--s-2) var(--s-6); }
.checklist li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-2); color: var(--c-body); }
.checklist li::before { content: "+"; font-family: var(--f-mono); color: var(--c-accent); }
@media (max-width: 900px) { .tile--lead, .tile--side { grid-column: 1 / -1; grid-row: auto; } }

/* Réalisations : une démonstration à la une, puis une grille dense */
.demo-feature { margin-bottom: var(--s-12); }
.demo-feature .demo-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--s-10); }
.demo-feature .demo-shot { grid-column: 1; grid-row: 1 / -1; }
.demo-feature .demo-meta { grid-column: 2; grid-row: 2; }
.demo-feature .demo-name { grid-column: 2; grid-row: 3; }
.demo-feature .demo-text { grid-column: 2; grid-row: 4; }
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--slab-gap); list-style: none; }
.demo-card { display: block; color: inherit; text-decoration: none; }
.demo-card:hover { color: inherit; }
.demo-shot { display: block; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--c-line); background-color: var(--c-surface-1); aspect-ratio: 16 / 10; }
.demo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.demo-card:hover .demo-shot { border-color: var(--c-accent); }
.demo-meta { display: block; margin-top: var(--s-4); font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--c-info); }
.demo-name { display: block; margin-top: var(--s-1); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-text); letter-spacing: var(--tr-title); }
.demo-text { display: block; margin-top: var(--s-2); color: var(--c-soft); font-size: var(--fs-sm); }
.demo-feature .demo-name { font-size: var(--fs-h2); letter-spacing: var(--tr-display); line-height: 1.05; }
.demo-note { margin-top: var(--s-10); color: var(--c-info); font-size: var(--fs-sm); }
@media (max-width: 900px) { .demo-feature .demo-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .demo-feature .demo-shot, .demo-feature .demo-meta, .demo-feature .demo-name, .demo-feature .demo-text { grid-column: 1; grid-row: auto; } .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }

/* Catalogue : le chiffre monumental */
.mega { display: block; font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-mega); line-height: 0.9; letter-spacing: -0.06em; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.mega-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-10); margin-top: var(--s-6); padding-bottom: var(--s-8); border-bottom: 1px solid var(--c-line); }
.mega-caption p { font-size: var(--fs-xl); color: var(--c-text); font-family: var(--f-display); font-weight: 700; letter-spacing: var(--tr-title); max-width: 30ch; line-height: 1.3; }
.domain-table { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-12); margin-top: var(--s-4); }
.domain-table li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.domain-table .num { font-size: var(--fs-md); }
@media (max-width: 720px) { .domain-table { grid-template-columns: minmax(0, 1fr); } }

/* Deux marchés : diptyque */
.markets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--slab-gap); }
.market { background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: clamp(24px, 3.4vw, 52px); display: flex; flex-direction: column; gap: var(--s-5); }
.market h3 { font-size: var(--fs-h2); letter-spacing: var(--tr-display); }
.market .price-key { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-info); letter-spacing: 0.04em; }
.market .price-hero { font-family: var(--f-mono); color: var(--c-accent); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.market .actions { margin-top: auto; padding-top: var(--s-4); }
@media (max-width: 820px) { .markets { grid-template-columns: minmax(0, 1fr); } }

/* Questions */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-12); }
.faq-list details { border-top: 1px solid var(--c-line); }
.faq-list details:last-child { border-bottom: 1px solid var(--c-line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-6);
  min-height: var(--tap); padding-block: var(--s-5);
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-text); letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-family: var(--f-mono); font-size: var(--fs-lg); color: var(--c-accent); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list .answer { padding-bottom: var(--s-6); color: var(--c-soft); }
.faq-list .answer p + p { margin-top: var(--s-3); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* Clôture : deux voies */
.closing { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-12); align-items: start; }
.closing-way p { color: var(--c-soft); margin-top: var(--s-4); }
@media (max-width: 900px) { .closing { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formulaires ---------- */
.form-panel { background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: clamp(20px, 3vw, 40px); }
.form-panel h3 { margin-bottom: var(--s-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field label { display: block; margin-bottom: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.field input, .field textarea {
  width: 100%; min-height: var(--tap); padding: var(--s-3) var(--s-4);
  background-color: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: 1rem;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-info); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-accent); }
.field-error, .form-error { color: var(--c-error); font-size: var(--fs-sm); margin-top: var(--s-2); }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--c-accent); }
.consent label { font-weight: 400; color: var(--c-soft); margin: 0; }
.form-note { color: var(--c-info); font-size: var(--fs-sm); margin-top: var(--s-4); }
.form-status { color: var(--c-text); font-weight: 600; margin-top: var(--s-4); }
.form-status:empty { display: none; }

/* ==========================================================================
   HUBS MARCHÉS ET PAGES D'OFFRE
   ========================================================================== */
.page-hero { padding-block: clamp(40px, 6vw, 96px); }
.page-hero h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem); max-width: 16ch; }
.page-hero .lead { margin-top: var(--s-6); }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin-top: var(--s-8); }
.facts li { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.facts .k { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--c-info); }
.facts .v { color: var(--c-text); font-weight: 600; }
.facts .v.num { color: var(--c-accent); }

/* Grille tarifaire en lignes (lecture comptable) */
.price-list { list-style: none; border-top: 1px solid var(--c-line); }
.price-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--s-6); align-items: baseline; padding-block: var(--s-6); border-bottom: 1px solid var(--c-line); }
.price-list h3 { font-size: var(--fs-lg); }
.price-list p { color: var(--c-soft); font-size: var(--fs-sm); }
.price-list .price { text-align: right; }
.price-list .price .num { display: block; font-size: var(--fs-xl); }
.price-list .price small { display: block; color: var(--c-info); font-size: var(--fs-xs); font-family: var(--f-mono); margin-top: var(--s-1); }
.price-list li.is-featured { background-color: var(--c-surface-1); border-radius: var(--r-md); padding-inline: var(--s-6); border-bottom-color: transparent; margin-block: var(--s-2); }
.price-legend { margin-top: var(--s-6); color: var(--c-info); font-size: var(--fs-sm); }
@media (max-width: 960px) {
  .price-list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .price-list .price { text-align: left; }
}

/* Mise en avant d'une offre (bandeau opaque) */
.offer-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-10); align-items: center; }
.offer-band .facts { margin-top: var(--s-6); }
@media (max-width: 900px) { .offer-band { grid-template-columns: minmax(0, 1fr); } }

.zone-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.zone-list li { padding: var(--s-2) var(--s-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); color: var(--c-text); font-size: var(--fs-sm); background-color: var(--c-bg); }

.contact-card { display: grid; gap: var(--s-2); }
.contact-card dt { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--c-info); margin-top: var(--s-4); }
.contact-card dd a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-text); font-weight: 600; }
.contact-card dd a:hover { color: var(--c-accent); }

/* ---------- Audit IA ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--slab-gap); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.card { background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: clamp(20px, 2.6vw, 36px); }
.card .kick { margin-bottom: var(--s-3); }
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--c-soft); }
.panel-list { list-style: none; }
.panel-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); border-top: 1px solid var(--c-line); color: var(--c-body); }
.panel-list li:first-child { border-top: 0; }
.auto-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) var(--s-12); padding-block: var(--s-12); border-top: 1px solid var(--c-line); }
.auto-row:last-child { border-bottom: 1px solid var(--c-line); }
.auto-row .num { font-size: var(--fs-h2); line-height: 1; display: block; margin-bottom: var(--s-4); }
.auto-row .sub { color: var(--c-soft); margin-top: var(--s-3); }
.auto-row .body p + p { margin-top: var(--s-4); }
.auto-row .k { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-info); margin-right: var(--s-2); }
.auto-foot { margin-top: var(--s-6); background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-6); display: grid; gap: var(--s-3); }
.auto-foot .gain strong { color: var(--c-accent); font-family: var(--f-mono); font-weight: 600; }
.auto-foot p { color: var(--c-soft); font-size: var(--fs-sm); }
.auto-foot .risk { font-family: var(--f-mono); color: var(--c-info); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .auto-row { grid-template-columns: minmax(0, 1fr); } }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--c-line); }
.timeline li { padding: var(--s-6) var(--s-6) var(--s-6) 0; }
.timeline li + li { padding-left: var(--s-6); border-left: 1px solid var(--c-line); }
.timeline .mono { color: var(--c-accent); font-size: var(--fs-sm); display: block; margin-bottom: var(--s-3); }
.timeline h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.timeline p { color: var(--c-soft); font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline li, .timeline li + li { padding: var(--s-5) 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .timeline li:first-child { border-top: 0; }
}
.gains { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-10); align-items: end; }
.gains .mega { font-size: clamp(3.5rem, 1rem + 9vw, 8rem); }
.gain-rows { list-style: none; }
.gain-rows li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.gain-rows .num { font-size: var(--fs-xl); }
@media (max-width: 900px) { .gains { grid-template-columns: minmax(0, 1fr); } }
.note-block { margin-top: var(--s-10); padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-md); background-color: var(--c-surface-1); color: var(--c-soft); }
.note-block p + p { margin-top: var(--s-3); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--slab-gap); }
@media (max-width: 820px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.bullets { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.bullets li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-2); }
.bullets li::before { content: "+"; font-family: var(--f-mono); color: var(--c-accent); }
.bullets--minus li::before { content: "\2212"; color: var(--c-info); }
.total { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.total strong { color: var(--c-accent); font-family: var(--f-mono); }
.legal-dl dt { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--c-info); margin-top: var(--s-6); }
.legal-dl dd { color: var(--c-soft); margin-top: var(--s-2); max-width: 75ch; }

/* Barre d'action collante, mobile seulement, visible sans JavaScript */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    background-color: var(--c-bg); border-top: 1px solid var(--c-line);
  }
  .mobile-bar .btn { width: 100%; font-size: var(--fs-sm); }
  .mobile-bar.is-hidden { display: none; }
  .has-mobile-bar { padding-bottom: 84px; }
}

/* ==========================================================================
   CATALOGUE
   ========================================================================== */
.cat-static { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-12); }
.cat-static li { padding-block: var(--s-5); border-bottom: 1px solid var(--c-line); }
.cat-static .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.cat-static h3 { font-size: var(--fs-md); }
.cat-static p { color: var(--c-soft); font-size: var(--fs-sm); margin-top: var(--s-2); }
@media (max-width: 760px) { .cat-static { grid-template-columns: minmax(0, 1fr); } }
.explorer[hidden] { display: none; }
.explorer-controls { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); }
.needs { border: 0; }
.needs legend { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); margin-bottom: var(--s-3); }
.needs-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.needs-list label { position: relative; }
.needs-list input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.needs-list span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); color: var(--c-text); font-size: var(--fs-sm); background-color: var(--c-bg);
}
.needs-list input:checked + span { background-color: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.needs-list input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.explorer-count { color: var(--c-info); font-family: var(--f-mono); font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.explorer-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--slab-gap); }
.explorer-grid li { background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.explorer-grid h3 { font-size: var(--fs-md); display: flex; justify-content: space-between; gap: var(--s-3); }
.explorer-grid p { color: var(--c-soft); font-size: var(--fs-sm); }
.explorer-grid .link-arrow { margin-top: auto; align-self: flex-start; font-size: var(--fs-sm); }
.explorer-more { margin-top: var(--s-8); }

/* ==========================================================================
   PAGES DE TEXTE (légal, 404, liens)
   ========================================================================== */
.prose { max-width: 72ch; }
.prose h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.prose h2 { font-size: var(--fs-xl); letter-spacing: var(--tr-title); margin-top: var(--s-10); margin-bottom: var(--s-3); }
.prose p, .prose li { color: var(--c-soft); }
.prose p + p { margin-top: var(--s-3); }
.prose ul { padding-left: var(--s-5); margin-top: var(--s-3); }
.prose .updated { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-info); margin-top: var(--s-4); }
.todo {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm); background-color: var(--c-surface-1);
  color: var(--c-text); font-size: var(--fs-sm);
}
.todo strong { color: var(--c-accent); font-family: var(--f-mono); font-weight: 600; }

.links-page { max-width: 640px; margin-inline: auto; }
.link-group + .link-group { margin-top: var(--s-10); }
.link-list { list-style: none; display: grid; gap: var(--s-3); }
.link-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4);
  min-height: 64px; padding: var(--s-4) var(--s-5);
  background-color: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md);
  color: var(--c-text); text-decoration: none;
}
.link-card:hover { border-color: var(--c-accent); color: var(--c-text); }
.link-card strong { display: block; }
.link-card span.d { display: block; color: var(--c-soft); font-size: var(--fs-sm); }
.link-card span[aria-hidden] { color: var(--c-accent); font-family: var(--f-mono); }

.error-code { font-family: var(--f-mono); font-size: var(--fs-mega); color: var(--c-accent); line-height: 0.9; letter-spacing: -0.06em; }

/* Logo : couleurs prises dans les tokens, pas dans le SVG */
.logo-plate { fill: var(--c-surface-1); stroke: var(--c-accent); }
.logo-p { fill: var(--c-accent); }

/* Élévation : un bloc posé sur une surface 1 passe en surface 2 */
.slab--1 .card, .slab--1 .form-panel, .slab--1 .note-block, .slab--1 .ledger { background-color: var(--c-surface-2); }
/* Chiffres en mono : l'espace des milliers occupe une cellule entière, on la resserre */
.mega, .num { word-spacing: -0.35em; }

/* ------------------------------------------------------------------
   Fond vidéo piloté par le scroll
   ------------------------------------------------------------------
   Empilement, du fond vers l'avant :
     1. body::before  le halo ambré fixe
     2. .fond-video   la vidéo asservie au scroll (placée en premier enfant)
     3. body::after   le grain, qui vient unifier l'ensemble
     4. le contenu    en z-index 1 par la règle existante sur body > *

   La vidéo décoit par sa discrétion : elle apporte de la matière et du
   mouvement, jamais du bruit derrière un texte. L'opacité reste basse et
   un voile garantit la lisibilité, ce qui évite d'avoir à retoucher
   chaque bloc de contenu au cas par cas.
   ------------------------------------------------------------------ */
.fond-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Le conteneur est visible des le départ. Il l'était à zéro en attendant
     que la vidéo soit prête, et comme l'affiche était elle aussi transparente,
     le fond restait noir pendant tout le chargement : c'est ce qui donnait
     l'impression que la vidéo ne s'affichait jamais. */
  opacity: 1;
  transition: opacity 1.4s var(--ease, ease);
  background: var(--c-bg);
}

.fond-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* La vidéo porte la matière du fond et doit se voir : la source a été
     éclaircie à l'encodage (moyenne lumineuse portée de 31 à 78 sur 255,
     gamma 1.6). Elle est donc affichée sans atténuation. Le texte reste
     lisible parce qu'il repose sur les surfaces opaques des blocs, et parce
     que le voile ci-dessous protège la colonne de texte. */
  opacity: 1;
}

/* L'affiche sert de fond dans deux cas : avant le chargement de la vidéo,
   et définitivement quand le visiteur a demandé moins d'animation, ou quand
   la page est servie sans vidéo (pages légales, page 404). */
.fond-video--statique { opacity: 1; }

.fond-video--statique video,
.fond-video--statique img.fond-video__affiche { opacity: 0.7; }

.fond-video__affiche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* L'affiche porte le fond tant que la vidéo n'est pas prête. Elle était
     transparente, ce qui laissait un fond noir pendant tout le chargement.
     Le fichier d'affiche est régénéré depuis la vidéo éclaircie : la
     transition entre les deux ne se voit pas. */
  opacity: 0.75;
  transition: opacity 1.4s var(--ease, ease);
}

/* Voile : il assombrit légèrement le centre sous la colonne de texte et
   laisse respirer les bords. Il a été allégé en même temps que la source a
   été éclaircie : il ne sert plus qu'à détacher les blocs de texte, plus à
   rattraper une image trop sombre. Le voile le plus fort passe de 55 à 30
   pour cent, ce qui divise par près de deux l'assombrissement du centre. */
.fond-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(10, 15, 30, 0.30) 0%, rgba(10, 15, 30, 0.06) 55%, rgba(10, 15, 30, 0.24) 100%),
    linear-gradient(180deg, rgba(10, 15, 30, 0.20) 0%, rgba(10, 15, 30, 0.05) 45%, rgba(10, 15, 30, 0.34) 100%);
}

.fond-video--prete { opacity: 1; }
.fond-video--prete .fond-video__affiche { opacity: 0; }

/* Sans JavaScript, la vidéo ne peut pas être asservie au scroll :
   on affiche l'affiche, qui donne la matière sans le mouvement. */
.no-js .fond-video { opacity: 1; }
.no-js .fond-video video { display: none; }
.no-js .fond-video__affiche { opacity: 0.32; }

@media (prefers-reduced-motion: reduce) {
  .fond-video { transition: none; }
  .fond-video video { opacity: 1; }
}

/* Sur écran étroit, la vidéo consomme de la batterie et du réseau :
   l'affiche suffit largement à porter l'ambiance. */
@media (max-width: 720px) {
  .fond-video video { opacity: 0.9; }
}



/* Le pack d'abonnements : mis en avant, car c'est l'offre que l'agent biz
   designe comme la plus vendable, un seul montant au lieu de cinq lignes. */
.price-list li.pack {
  border: 1px solid rgba(232, 163, 61, 0.38);
  background: linear-gradient(180deg, rgba(232, 163, 61, 0.05), rgba(232, 163, 61, 0.01));
}
.price-list li.pack h3 { color: var(--c-accent, #E8A33D); }

/* Une offre qui s'ajoute a une autre, et qui le dit sans crier. */
.price-list .etiquette {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text-soft, #6E8BB8);
  border: 1px solid rgba(110, 139, 184, 0.35);
  border-radius: 999px;
  vertical-align: middle;
}


/* Le lien qui mene de l'offre a sa page de commande. Discret, mais toujours a
   la meme place, pour que le chemin d'achat soit evident. */
.price-list .lien-offre {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--c-accent, #E8A33D);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.price-list .lien-offre:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------
   Section « Outils de gestion » : la piece maitresse
   Le dashboard de chantiers est un outil interactif, pas une maquette :
   il occupe la pleine largeur, les deux autres maquettes restent en second.
   ------------------------------------------------------------------ */
.outil-vedette {
  display: grid;
  gap: 2rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--c-surface-1);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  margin-top: 2.2rem;
}
@media (min-width: 900px) {
  .outil-vedette { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}
.outil-vedette__screen {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--c-line); background: var(--c-bg);
}
.outil-vedette__screen img { display: block; width: 100%; height: auto; }
.outil-ref {
  margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-accent);
}
.outil-vedette__corps h3 {
  margin: 0 0 1.1rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3;
  color: var(--c-text);
}
.outil-liste { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
.outil-liste li {
  position: relative; padding-left: 1.35rem; color: var(--c-body);
  line-height: 1.55; font-size: 0.95rem;
}
.outil-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent);
}
.outil-liste strong { color: var(--c-text); }
.outil-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.outil-note { font-size: 0.8rem; color: var(--c-body); }
.outil-second-titre {
  margin: 3.2rem 0 1.2rem; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-body);
}

/* --- Blocs de presentation des dashboards metier --- */
.outil-vedette--bis {
  margin-top: 34px;
}
.outil-vedette--bis:first-of-type {
  margin-top: 30px;
}
@media (max-width: 720px) {
  .outil-vedette--bis { margin-top: 26px; }
}


/* Ou se situe le prix de l'audit : comparaison avec le marche releve. */
.prix-situe{margin:28px 0;padding:22px 24px;border:1px solid var(--c-line);
  border-radius:14px;background:var(--c-surface-1)}
.prix-situe h3{margin:0 0 12px;font-size:17px;letter-spacing:-.01em}
.prix-situe p{margin:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--c-text-soft)}
.prix-liste{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:1px}
.prix-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 12px;background:var(--c-surface-2);font-size:14px}
.prix-liste li:first-child{border-radius:8px 8px 0 0}
.prix-liste li:last-child{border-radius:0 0 8px 8px}
.prix-qui{color:var(--c-text-soft)}
.prix-val{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.prix-nous{background:rgba(232,163,61,.12)!important;border-left:3px solid var(--c-accent)}
.prix-nous .prix-qui,.prix-nous .prix-val{color:var(--c-accent);font-weight:700}
.prix-note{font-size:13px!important;color:var(--c-soft)!important;margin-bottom:0!important}
@media (max-width:520px){
  .prix-situe{padding:18px 16px}
  .prix-liste li{flex-direction:column;gap:3px}
  .prix-liste li .prix-val{font-size:15px}
}

/* ==========================================================================
   MOTION DESIGN : gestes secondaires
   Tous prolongent la révélation par masque, avec les mêmes jetons. Chaque
   mouvement n'existe que sous prefers-reduced-motion: no-preference ; avec
   reduce, la page est rendue dans son état final, immobile. Seules les
   propriétés transform, opacity et clip-path sont animées.
   ========================================================================== */

/* Micro-relevé au survol : déclencheur survol ou focus clavier sur une carte
   qui mène quelque part (offres, marchés, réalisations). La carte monte de
   3 px en 220 ms et une ombre resserrée apparaît dessous (opacity d'une
   couche dédiée, jamais box-shadow animé). Les cartes purement informatives
   ne bougent pas : elles ne promettent pas de clic. Avec reduce : rien. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .tile--side, .market { position: relative; transition: transform var(--dur-lift) var(--ease-ui); }
  .tile--side::after, .market::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: var(--sh-lift); opacity: 0; transition: opacity var(--dur-lift) var(--ease-ui);
  }
  .tile--side:hover, .tile--side:focus-within,
  .market:hover, .market:focus-within { transform: translateY(var(--lift-y)); }
  .tile--side:hover::after, .tile--side:focus-within::after,
  .market:hover::after, .market:focus-within::after { opacity: 1; }
  /* Vignettes de réalisation : seule l'image monte, le texte reste en place. */
  .demo-shot { transition: transform var(--dur-lift) var(--ease-ui); }
  .demo-card:hover .demo-shot, .demo-card:focus-visible .demo-shot { transform: translateY(var(--lift-y)); }
}

/* Soulignement progressif de la navigation : le filet déclaré dans l'en-tête
   se trace de gauche à droite au survol, en --dur-ui. Avec reduce : le filet
   apparaît sans tracé. */
@media (prefers-reduced-motion: no-preference) {
  .nav-main a::after { transition: transform var(--dur-ui) var(--ease-ui); }
}

/* Éclairage au curseur : déclencheur pointeur fin qui survole une carte
   vedette ([data-glow]). Une lueur ambrée suit le pointeur (transform posé
   par site.js) et s'allume en --dur-ui, plafonnée à --glow-opacity, soit
   10 pour cent. Elle passe sous le texte (isolation + z-index -1). Écran
   tactile ou reduce : aucune lueur. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  [data-glow] { position: relative; isolation: isolate; overflow: hidden; }
  [data-glow]::before {
    content: ""; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
    width: var(--glow-size); height: var(--glow-size);
    margin: calc(var(--glow-size) / -2) 0 0 calc(var(--glow-size) / -2);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--c-accent), transparent);
    opacity: 0;
    transform: translate3d(var(--glow-x, 50%), var(--glow-y, 50%), 0);
    transition: opacity var(--dur-ui) var(--ease-ui);
  }
  [data-glow].is-lit::before { opacity: var(--glow-opacity); }
}

/* Barre de progression de lecture : créée par site.js sur les pages longues
   (body[data-lecture]), posée sur le filet bas de l'en-tête collant. Elle
   suit le défilement (scaleX, mis à jour une fois par image) dans les deux
   sens : c'est le seul geste qui n'est pas unique. Bleu glacé, l'ambre restant
   réservé aux actions. Avec reduce, ou sans JavaScript : pas de barre. */
.lecture-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background-color: var(--c-info); transform: scaleX(0); transform-origin: left center;
}
@media print { .lecture-progress { display: none; } }

/* Transitions de vue entre pages : si le navigateur connaît les View
   Transitions entre documents, l'ancienne page se fond dans la nouvelle en
   --dur-page, l'en-tête restant immobile. Sinon, navigation classique, sans
   message ni erreur. Avec reduce : aucune transition. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: var(--dur-page);
    animation-timing-function: var(--ease-ui);
  }
}