/* K2T — base commune au site et à l'application. Dépend de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--font-texte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* Focus visible : anneau or 2 px décalé, sur tout élément interactif */
:focus-visible { outline: 2px solid var(--anneau); outline-offset: 2px; border-radius: var(--r-1); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -64px; z-index: 200; padding: 12px 16px; background: var(--bouton-fond); color: var(--bouton-texte); border-radius: var(--r-2); font-weight: 600; }
.evitement:focus { top: 12px; }

/* Icônes SVG au trait (style lucide, trait 1,75) */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Typographie */
.serif, h1, h2, h3 { font-family: var(--font-titre); font-variation-settings: var(--titre-axes); font-optical-sizing: auto; font-weight: 400; }
.cap { font-size: var(--t-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--texte-3); }
.num { font-variant-numeric: tabular-nums; }

/* Points de conduite (signature « la carte ») : relient un libellé à sa valeur */
.points { flex: 1 1 16px; min-width: 16px; height: 4px; align-self: flex-end; margin-bottom: .4em; background: radial-gradient(circle, var(--non-textuel) 1px, transparent 1.4px) 0 100% / 8px 4px repeat-x; }

/* ---------- Mouvement ----------
   Transition de page (navigateurs compatibles) + entrée douce du document.
   Révélation : 20 px, 560 ms, décalage de 70 ms par élément (--i).
   Le contenu reste visible sans script : seul .js masque avant révélation. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms var(--courbe) both sortie-page; }
::view-transition-new(root) { animation: 240ms var(--courbe) both entree-page; }
@keyframes sortie-page { to { opacity: 0; } }
@keyframes entree-page { from { opacity: 0; transform: translateY(8px); } }
@keyframes monte { from { opacity: 0; transform: translateY(var(--montee)); } to { opacity: 1; transform: none; } }
@keyframes trace { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.js .rev { opacity: 0; transform: translateY(var(--montee)); transition: opacity var(--duree-3) var(--courbe), transform var(--duree-3) var(--courbe); transition-delay: calc(var(--i, 0) * var(--decalage)); }
.js .rev.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rev { opacity: 1; transform: none; }
}