/* base.css — polices, remise à zéro, typographie de base, fonds (noir | noir-2, filet or), transitions de page,
   mouvement réduit. Dépend de tokens.css. Ne contient aucun composant (voir composants.css). */

/* ------------------------------------------------------------------ polices (OFL, sous-ensembles latins) */
@font-face {
  font-family: 'Anybody';
  src: url(../fonts/anybody-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Epilogue';
  src: url(../fonts/epilogue-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ remise à zéro */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, picture, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, label, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
address { font-style: normal; }
[hidden] { display: none !important; }

html {
  /* le fond derrière tout, y compris pendant une transition de page : le noir de la maison */
  background: var(--noir);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--barre-h) + 1rem);
  hanging-punctuation: first last;
}
body {
  min-height: 100svh;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: var(--interligne);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; line-height: 1.05; text-wrap: balance; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
strong, b { font-weight: 700; }

/* liens : soulignés en or (charte §13) */
a { color: inherit; text-decoration-color: var(--or); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--or-clair); text-decoration-thickness: 2px; }
a:active { opacity: .78; }

::selection { background: var(--or); color: var(--noir); }

/* ------------------------------------------------------------------ focus : anneau blanc de 2 px, décalé de 2 px (charte §13)
   Sur un document blanc (billet), l'anneau passe au noir pour rester visible. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 2px;
  border-radius: 2px;
}
:is(.billet, .fond-papier, .cb-papier) :focus-visible { outline-color: var(--noir); }

/* ------------------------------------------------------------------ accessibilité */
.sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.evitement {
  position: absolute; left: var(--marge); top: -100px; z-index: var(--z-evitement);
  padding: .75rem 1rem;
  background: var(--or); color: var(--noir);
  font-weight: 700; text-decoration: none;
}
.evitement:focus, .evitement:focus-visible { top: .5rem; }

/* ------------------------------------------------------------------ fonds : noir, noir-2, et le filet or qui les sépare
   (--grain vaut none : la charte veut un noir plat ; les pseudo-éléments restent pour la compatibilité, sans rien peindre) */
.fond-couture, .fond-inverse, .fond-touche, .fond-guide, .fond-suit, .fond-nuit, .fond-encre, .grain {
  position: relative;
  isolation: isolate;
}
.fond-couture { background: var(--fond-couture); }
.fond-inverse { background: var(--fond-inverse); }
.fond-touche  { background: var(--fond-touche); }
.fond-guide   { background: var(--guide); }
.fond-suit    { background: var(--suit); }
.fond-nuit    { background: var(--nuit); }
.fond-encre   { background: var(--encre); }
.fond-papier  { background: var(--blanc); color: var(--noir); }
.fond-couture::before, .fond-inverse::before, .fond-touche::before, .fond-guide::before,
.fond-suit::before, .fond-nuit::before, .fond-encre::before, .grain::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: var(--grain-taille) var(--grain-taille);
  opacity: var(--grain-opacite);
}

/* cadre de contenu */
.cadre { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--marge); }

/* ------------------------------------------------------------------ transitions de page : la page se fend sur le filet
   Durée totale < 400 ms : la sortante s'ouvre en 260 ms, l'entrante suit avec 120 ms de décalage. 0 s en mouvement réduit. */
@view-transition { navigation: auto; }
.barre { view-transition-name: barre; }
.barre-logo { view-transition-name: logo; }
::view-transition-group(root) { animation-duration: calc(var(--vt) + 120ms); }
::view-transition-old(root) {
  animation: vt-fend var(--vt) var(--elan) both;
}
::view-transition-new(root) {
  animation: vt-entre var(--vt) var(--prise) 120ms both;
}
::view-transition-group(barre), ::view-transition-group(logo) { animation-duration: 0s; }
@keyframes vt-fend {
  /* deux rectangles qui s'écartent de part et d'autre de la couture (45 %) */
  from { clip-path: polygon(0 0, 45% 0, 45% 100%, 45% 100%, 45% 0, 100% 0, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 0 0, 0 100%, 100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes vt-entre {
  from { clip-path: inset(0 55% 0 45%); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ------------------------------------------------------------------ zoom fort / très petit écran : une seule colonne ; la barre
   (disque de 96 px, minimum de la charte) ne colle plus : elle mangerait l'écran */
@media (max-width: 21.9rem), (max-height: 30rem) {
  :root { --marge: .75rem; }
}

/* ------------------------------------------------------------------ mouvement réduit : tout est posé sur sa frame finale
   (les styles de base de chaque composant SONT la frame finale ; les animations partent d'un état initial vers eux) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* harnais de capture uniquement : ?pause retient les animations temporelles à t = 0 */
.pause-intro *, .pause-intro *::before, .pause-intro *::after { animation-play-state: paused !important; }