/* ==========================================================================
   Gymgros, socle commun aux trois versions
   Ne contient que ce qui ne doit pas changer d'une version à l'autre :
   polices, palette, remise à zéro, accessibilité, confort de lecture.
   Toute la mise en forme vit dans assets/css/v1.css, v2.css ou v3.css.
   ========================================================================== */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Palette belge */
  --noir:        #0B0B0B;
  --noir-2:      #151412;
  --noir-3:      #201E1B;
  --jaune:       #FFC220;
  --jaune-clair: #FFD75A;
  --jaune-sombre:#D99A00;
  --rouge:       #E5231B;
  --rouge-sombre:#A81109;
  --blanc:       #FFFFFF;
  --creme:       #FFF3DC;
  --gris:        #A8A196;

  --display:     'Anton', 'Impact', 'Haettenschweiler', sans-serif;
  --display-alt: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
  --display-fat: 'Archivo Black', 'Arial Black', sans-serif;
  --body:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Une seule courbe de rebond, partagée : c'est elle qui donne le côté joyeux */
  --pop:   cubic-bezier(.34, 1.56, .64, 1);
  --sortie: cubic-bezier(.22, 1, .36, 1);

  --touche: 48px;   /* taille minimale d'une zone tapable au doigt */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* respecte l'encoche et la barre gestuelle des téléphones */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, figure, figcaption { margin: 0; }
ul { list-style: none; padding: 0; }

button { font: inherit; color: inherit; cursor: pointer; }

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

/* --------------------------------------------------------------- Accès */

.skip-link {
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 99;
  padding: .8rem 1.2rem;
  background: var(--jaune);
  color: var(--noir);
  font-family: var(--display);
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid var(--noir);
  transition: top .2s var(--pop);
}
.skip-link:focus { top: 12px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 4px solid var(--jaune);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- Barre de comparaison */

/* Visible seulement pendant le choix de la piste : `npm run pick` la retire
   de la version installée en production. Volontairement neutre, pour ne pas
   se confondre avec la mise en forme de la piste qu'elle surplombe. */
/* Les libellés sont écrits en entier : plutôt que de les tronquer ou de faire
   défiler la barre, on la laisse passer sur deux lignes quand l'écran est
   étroit. Angles vifs partout, comme le reste de la charte. */
.apercu {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .5rem .6rem;
  background: #000;
  border-bottom: 3px solid var(--jaune);
}

.apercu__titre {
  flex: none;
  padding-right: .2rem;
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

.apercu__lien {
  flex: none;
  display: grid;
  place-items: center;
  min-height: var(--touche);
  padding: 0 .7rem;
  color: var(--jaune);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid rgba(255, 194, 32, .35);
  border-radius: 0;
}
.apercu__lien:hover { background: rgba(255, 194, 32, .14); }
.apercu__lien--sortie { color: var(--blanc); border-color: rgba(255, 255, 255, .3); }

/* --------------------------------------------------------------- Matière */

/* Grain d'impression : à poser en surcouche sur un fond sombre. */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/grain.png');
  background-size: 256px 256px;
  opacity: .5;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Bords déchirés, façon coup de pinceau des miniatures. */
.dechire-1 { clip-path: polygon(0 8%, 3% 0, 27% 4%, 51% 0, 74% 5%, 97% 1%, 100% 9%, 99% 91%, 96% 100%, 72% 95%, 48% 100%, 25% 96%, 2% 100%, 0 92%); }
.dechire-2 { clip-path: polygon(1% 4%, 22% 0, 46% 6%, 68% 1%, 92% 5%, 100% 0, 99% 94%, 78% 100%, 55% 94%, 31% 100%, 8% 95%, 0 100%); }
.dechire-3 { clip-path: polygon(0 6%, 18% 1%, 39% 7%, 61% 0, 83% 6%, 100% 2%, 98% 88%, 100% 97%, 79% 93%, 57% 100%, 34% 94%, 12% 99%, 0 93%); }

/* --------------------------------------------------------------- Entrées */

/* Les blocs marqués .reveal apparaissent quand ils entrent à l'écran.
   Tout est visible par défaut : c'est boot.js qui pose .anim sur <html> et
   arme l'animation. Sans JavaScript, ou en mouvement réduit, rien ne
   disparaît, et il n'y a aucun clignotement au chargement. */
.anim .reveal {
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity .5s var(--sortie), transform .55s var(--pop);
}
.anim .reveal.is-in { opacity: 1; transform: none; }

/* Décalage en cascade, pour que ça arrive en rafale et pas d'un bloc. */
.anim .reveal[data-delay="1"] { transition-delay: .07s }
.anim .reveal[data-delay="2"] { transition-delay: .14s }
.anim .reveal[data-delay="3"] { transition-delay: .21s }
.anim .reveal[data-delay="4"] { transition-delay: .28s }
.anim .reveal[data-delay="5"] { transition-delay: .35s }
.anim .reveal[data-delay="6"] { transition-delay: .42s }

/* Confettis lâchés au téléchargement du QR code. */
.confetti {
  position: fixed;
  z-index: 90;
  width: 10px; height: 14px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: confetti-tombe var(--duree, 1100ms) cubic-bezier(.2, .6, .5, 1) forwards;
}
@keyframes confetti-tombe {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* --------------------------------------------------------------- Confort */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .anim .reveal { opacity: 1; transform: none; }
  .confetti { display: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .skip-link, .confetti { display: none !important; }
}