/* Deklaro — motion « fiduciaire » : tokens, hero animé, séquences, micro-interactions.
   N'anime que transform, opacity, stroke-dashoffset et clip-path. Voir docs/MOTION.md. */

@font-face { font-family: "Sora"; src: url(../fonts/sora-latin-var.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plex-mono-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plex-mono-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plex-mono-600-latin.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Couleurs — famille mathael.com · mavapp, accent propre ambre */
  --papier: #f7f6f2;
  --surface: #ffffff;
  --nuit: #1c2f5e;
  --nuit-hover: #26407c;
  --texte-2: #5c606b;
  --hint: #6e6c66;
  --filet: #e3e0d7;
  --filet-fort: #d3cfc4;
  --gain: #0e7a5f;
  --perte: #b3261e;
  --signal: #2f5bea;          /* bleu signal (famille mavapp), 5,5:1 avec le blanc */
  --cuivre: #c4956a;          /* famille mavapp — matière, jamais du texte */
  --sur-aube: #ffffff;        /* texte sur la bande Aube */
  --sur-aube-2: #eef2fe;      /* texte secondaire sur la bande (≥ 4,9:1 sur #2f5bea) */
  --ambre: #f5a623;
  --ambre-texte: #8a5a06;
  --tag-fond: #fdf3e0;
  --sans: "Sora", "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, monospace;
  --r-carte: 8px;
  --r-btn: 6px;
  --r-tag: 4px;

  /* Mouvement */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
  --dur-4: 700ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-entree: cubic-bezier(0, 0, .2, 1);
  --ease-sortie: cubic-bezier(.4, 0, 1, 1);
  --stagger: 40ms;
}

.chiffre, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── Hero animé ─────────────────────────────────────────────── */

.hm-scene { position: relative; }
.hm { display: block; width: 100%; height: auto; aspect-ratio: 400 / 480; overflow: visible; }
.hm text { font-family: var(--mono); font-size: 12px; fill: var(--nuit); font-variant-numeric: tabular-nums; }
.hm .hm-label, .hm .hm-noeud { font-size: 10px; letter-spacing: 1px; fill: var(--texte-2); }
.hm .hm-titre { font-family: var(--sans); font-weight: 600; font-size: 11px; }
.hm-frontiere { fill: none; stroke: var(--nuit); stroke-width: 1; stroke-dasharray: 4 5; opacity: .55; }
.hm-fenetre { fill: var(--surface); stroke: var(--nuit); stroke-width: 1; }
.hm-filet, .hm-regle, .hm-ligne line { stroke: var(--filet); stroke-width: 1; transform-box: fill-box; transform-origin: left center; }
.hm-regle { stroke: var(--filet-fort); }
.hm-pastilles circle { fill: none; stroke: var(--nuit); stroke-width: 1; }
.hm-cote { fill: none; stroke: var(--texte-2); stroke-width: 1; }
.hm-lien { stroke: var(--nuit); stroke-width: 1; stroke-dasharray: 2 4; }
.hm-paquet rect { fill: var(--surface); stroke: var(--nuit); stroke-width: 1; }
.hm .hm-paquet text { font-size: 10px; }
.hm .hm-entete, .hm .hm-csv-entete { font-size: 10px; letter-spacing: 1px; fill: var(--texte-2); }
.hm .hm-calc { font-size: 11px; fill: var(--texte-2); }
.hm-cadre { fill: none; stroke: var(--gain); stroke-width: 1; }
.hm-tampon { transform-box: fill-box; transform-origin: center; }
.hm .hm-pv-l { font-family: var(--sans); font-weight: 600; font-size: 14px; }
.hm .hm-pv { font-weight: 600; font-size: 20px; fill: var(--gain); }
.hm .hm-avert { font-size: 10px; fill: var(--texte-2); }
.hm .hm-reg.v, .hm .hm-f.v { font-weight: 500; }
.hm .hm-res { font-weight: 600; }
.hm-legende { font-family: var(--mono); font-size: 12.5px; color: var(--texte-2); margin-top: 12px; }
.hm-controles { display: flex; gap: 8px; margin-top: 10px; }
.hm-controles button {
  font: 500 12px var(--mono); color: var(--nuit); background: transparent; cursor: pointer;
  border: 1px solid var(--filet-fort); border-radius: var(--r-tag); padding: 6px 10px;
}
.hm-controles button:hover { border-color: var(--nuit); }
.hm-controles button:disabled { opacity: .45; cursor: default; }
.hm-controles { visibility: hidden; }
.hm-anime .hm-controles { visibility: visible; }

/* ─── Boutons : soulignement en balayage ─────────────────────── */

.btn { position: relative; }
.btn::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 8px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-1) var(--ease-standard);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
:focus-visible { outline: 2px solid var(--nuit); outline-offset: 3px; }

/* ─── FAQ : accordéon grid-template-rows 0fr → 1fr ───────────── */

.faq-item { border-top: 1px solid var(--filet); }
.faq-item:last-child { border-bottom: 1px solid var(--filet); }
.faq-q {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 0; font-weight: 600; font-size: 15px;
}
.faq-q:focus-visible { outline: 2px solid var(--nuit); outline-offset: 3px; }
.faq-signe { font-family: var(--mono); color: var(--texte-2); transition: transform var(--dur-2) var(--ease-standard); }
.faq-q[aria-expanded="true"] .faq-signe { transform: rotate(45deg); }
.faq-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-standard); }
.faq-r > div { overflow: hidden; }
.faq-r p { color: var(--texte-2); font-size: 14px; padding-bottom: 16px; max-width: 70ch; }
.faq-q[aria-expanded="true"] + .faq-r { grid-template-rows: 1fr; }

/* ─── Comment ça marche : ligne de progression au scroll ─────── */

.etapes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 28px; }
.etapes-ligne { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--filet); }
.etapes-trait { position: absolute; inset: 0; background: var(--nuit); transform: scaleX(var(--progres, 0)); transform-origin: left center; transition: transform var(--dur-4) var(--ease-standard); }
.etape { position: relative; padding-top: 16px; view-timeline: --etape block; }
.etape-num {
  position: absolute; top: 0; width: 23px; height: 23px; border-radius: 50%; background: var(--papier);
  border: 1px solid var(--filet-fort); font: 500 11px/21px var(--mono); text-align: center; color: var(--texte-2);
}
/* Allumage : un disque nuit se pose sur la pastille, un filet souligne le titre (opacity / transform). */
.etape-num::after {
  content: attr(data-n); position: absolute; inset: -1px; border-radius: 50%; background: var(--nuit); color: #fff;
  opacity: 0; transition: opacity var(--dur-2) var(--ease-standard);
}
.etape h3 { position: relative; display: inline-block; font-size: 17px; margin: 14px 0 6px; }
.etape h3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--nuit);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-3) var(--ease-standard);
}
.etape.allumee .etape-num::after { opacity: 1; }
.etape.allumee h3::after { transform: scaleX(1); }
.etape p { color: var(--texte-2); font-size: 14px; }

@supports (animation-timeline: view()) {
  /* Amélioration progressive : la ligne et les étapes suivent le défilement, sans JS. */
  .etapes.sd .etapes-trait { transition: none; animation: trace-ligne linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  .etapes.sd .etape-num::after { transition: none; animation: allume-num linear both; animation-timeline: --etape; animation-range: entry 60% cover 45%; }
  .etapes.sd .etape h3::after { transition: none; animation: allume-titre linear both; animation-timeline: --etape; animation-range: entry 60% cover 45%; }
  @keyframes trace-ligne { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes allume-num { from { opacity: 0; } to { opacity: 1; } }
  @keyframes allume-titre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ─── Cloud / local ──────────────────────────────────────────── */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo figure { border: 1px solid var(--filet); border-radius: var(--r-carte); background: var(--surface); padding: 18px; margin: 0; }
.duo figcaption { font-size: 14px; color: var(--texte-2); margin-top: 10px; }
.duo figcaption b { color: var(--nuit); display: block; font-size: 15px; margin-bottom: 2px; }
.duo svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 150; }
.duo svg text { font-family: var(--mono); font-size: 10px; fill: var(--texte-2); letter-spacing: .5px; }
.duo .cadre { fill: none; stroke: var(--nuit); stroke-width: 1; }
.duo .serveur { fill: none; stroke: var(--texte-2); stroke-width: 1; stroke-dasharray: 3 3; }
.duo .donnee { fill: var(--surface); stroke: var(--nuit); stroke-width: 1; }
.duo .donnee-texte { fill: var(--nuit); }

/* ─── Compteurs ──────────────────────────────────────────────── */

.preuves-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--r-carte); overflow: hidden; }
.preuves-chiffres > div { background: var(--surface); padding: 20px; }
.preuves-chiffres dt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--nuit); }
.preuves-chiffres dd { margin: 4px 0 0; font-size: 13.5px; color: var(--texte-2); }
.cpt { display: inline-flex; }
.cpt-case { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: top; }
.cpt-col { display: block; }
.cpt-col span { display: block; height: 1.2em; }

/* ─── Mouvement réduit : état final, zéro mouvement ──────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .etapes-trait { transform: scaleX(1); }
  .etape-num::after { opacity: 1; }
  .etape h3::after { transform: scaleX(1); }
  .hm-controles { display: none; }
}
:root[data-reduit="1"] *, :root[data-reduit="1"] *::before, :root[data-reduit="1"] *::after { transition: none !important; animation: none !important; }
:root[data-reduit="1"] .etapes-trait { transform: scaleX(1); }
:root[data-reduit="1"] .etape-num::after { opacity: 1; }
:root[data-reduit="1"] .etape h3::after { transform: scaleX(1); }
:root[data-reduit="1"] .hm-controles { display: none; }

@media (max-width: 760px) {
  .etapes { grid-template-columns: 1fr; padding-top: 0; padding-left: 36px; }
  .etapes-ligne { left: 11px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .etapes-trait { transform: scaleY(var(--progres, 0)); transform-origin: center top; }
  .etape-num { left: -36px; top: 14px; }
  .duo { grid-template-columns: 1fr; }
  .preuves-chiffres { grid-template-columns: 1fr 1fr; }
}
@supports (animation-timeline: view()) {
  @media (max-width: 760px) {
    @keyframes trace-ligne { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}