/*
 * ViralHit : la page d'arrivée.
 *
 * Elle a une seule tâche : donner envie d'essayer, puis recueillir une adresse.
 * Tout ce qui ne sert pas à ça a été écarté.
 *
 * Trois règles tenues partout dans ce fichier :
 *
 *  - **Les couleurs sont celles de l'application**, au chiffre près. Un site qui
 *    n'a pas la couleur du produit fait douter qu'il parle du même produit.
 *  - **Rien n'est inventé.** Pas de compteur de défis relevés, pas d'avis, pas
 *    de badges de magasins tant que l'application n'y est pas. Un chiffre faux
 *    se démonte à la première vérification, et il emporte le reste avec lui.
 *  - **Aucune image extérieure.** La page montre l'interface réelle, dessinée,
 *    plutôt que des photos de gens qui n'existent pas.
 */

:root {
  --charbon: #0B0D12;
  --carte: #171B26;
  --carte-haute: #232838;
  --carte-basse: #0F121B;
  --blanc: #F7F8FC;
  --ardoise: #B0B7C6;
  --ardoise-pale: #8A93A8;
  --lime: #D7FF3F;
  --orange: #FF6B4A;
  --cyan: #43D9FF;
  --bord: rgba(247, 248, 252, 0.10);
  --bord-fort: rgba(247, 248, 252, 0.18);

  /* L'inclinaison de la charte : 12 degrés, partout la même. */
  --penche: -12deg;
  --rayon: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--charbon);
  color: var(--blanc);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/*
 * Le halo de fond.
 *
 * Une seule source lumineuse, très diffuse, derrière le titre. Elle donne de la
 * profondeur sans rien coûter en lecture : posée en `fixed` et en arrière-plan,
 * elle ne gêne aucun texte.
 */
body::before {
  content: '';
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 70vh;
  background:
    radial-gradient(60% 60% at 70% 20%, rgba(215, 255, 63, 0.10), transparent 70%),
    radial-gradient(50% 50% at 15% 0%, rgba(67, 217, 255, 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.contenu { position: relative; z-index: 1; }

/* ------------------------------------------------------------- En-tête */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(11, 13, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}

.marque { width: 30px; height: auto; display: block; flex: none; }

.nom {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.4px;
  font-style: italic;
}

header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

header nav a {
  color: var(--ardoise);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
}
header nav a:hover { color: var(--blanc); }

/* Le lien d'action de l'en-tête : la seule chose lime en haut de page. */
.nav-action {
  background: var(--lime);
  color: var(--charbon) !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700 !important;
  white-space: nowrap;
}
.nav-action:hover { background: #E4FF6B; }

/* La bascule de langue : deux boutons, pas un menu. */
.langues {
  display: flex;
  border: 1px solid var(--bord-fort);
  border-radius: 999px;
  overflow: hidden;
}
.langue {
  min-width: 42px;
  min-height: 34px;
  padding: 0 10px;
  background: transparent;
  border: none;
  color: var(--ardoise);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
}
.langue[aria-pressed="true"] {
  background: var(--lime);
  color: var(--charbon);
}
.langue:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

@media (max-width: 720px) {
  header nav a:not(.nav-action) { display: none; }
}

/* -------------------------------------------------------------- Trame */

.bande {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 72px 0; }
@media (max-width: 860px) { section { padding: 52px 0; } }

.oeil {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ardoise-pale);
  margin: 0 0 14px;
}
.oeil.lime { color: var(--lime); }

h2 {
  font-size: clamp(26px, 4.2vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.12;
  margin: 0;
}

.sous {
  color: var(--ardoise);
  font-size: 16.5px;
  margin: 14px 0 0;
  max-width: 54ch;
}

/* ------------------------------------------------------------- Bandeau */

/*
 * Le bandeau de défi reçu.
 *
 * Masqué tant qu'aucun code valide n'est dans l'adresse : afficher « un défi
 * t'attend » à quelqu'un qui arrive par une recherche serait un mensonge, et
 * le code affiché serait vide.
 */
.invite {
  display: none;
  margin: 20px 0 0;
  padding: 18px 20px;
  background: rgba(215, 255, 63, 0.08);
  border: 1px solid rgba(215, 255, 63, 0.32);
  border-radius: var(--rayon);
}
.invite.visible { display: block; }
.invite-label {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--lime);
}
.invite-code {
  display: block;
  font-size: 32px; font-weight: 800; letter-spacing: 6px;
  margin: 8px 0 6px;
  font-variant-numeric: tabular-nums;
}
.invite p { margin: 0; color: var(--ardoise); font-size: 14.5px; }

/* --------------------------------------------------------------- Héros */

.heros {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding: 56px 0 72px;
}
@media (max-width: 980px) {
  .heros { grid-template-columns: 1fr; gap: 40px; padding: 36px 0 48px; }
}

.fil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--ardoise-pale);
  margin: 0 0 22px;
}
.fil span::after { content: ' ·'; color: var(--lime); }
.fil span:last-child::after { content: ''; }

h1 {
  font-size: clamp(40px, 7.4vw, 76px);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -2.4px;
  margin: 0;
}

/*
 * L'inclinaison de la charte, sur la ligne qui porte la promesse.
 *
 * Elle est obtenue en italique dessiné plutôt qu'en déformation : un `skew`
 * penche aussi les contreformes et donne des lettres qui s'effondrent. Douze
 * degrés, la même valeur que dans l'application.
 */
h1 .penche {
  display: inline-block;
  color: var(--lime);
  font-style: italic;
  transform: skewX(var(--penche)) translateX(-2px);
  transform-origin: bottom left;
}

.accroche {
  color: var(--ardoise);
  font-size: 18px;
  line-height: 1.6;
  margin: 22px 0 0;
  max-width: 46ch;
}

.gestes { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton.plein { background: var(--lime); color: var(--charbon); }
.bouton.plein:hover { background: #E4FF6B; }
.bouton.vide { background: transparent; color: var(--blanc); border-color: var(--bord-fort); }
.bouton.vide:hover { border-color: var(--blanc); }
.bouton svg { width: 18px; height: 18px; flex: none; }

.sous-gestes {
  margin: 18px 0 0;
  color: var(--ardoise-pale);
  font-size: 13.5px;
}

/* ------------------------------------------------- Téléphone, dessiné */

/*
 * L'écran du duel, reconstruit en HTML.
 *
 * Pas une capture, pas un photomontage : les mêmes couleurs, les mêmes libellés
 * et la même disposition que l'arène réelle. Quelqu'un qui installe ensuite
 * l'application doit retrouver exactement ce qu'il a vu ici. Une maquette plus
 * belle que le produit se paie au premier lancement.
 */
.scene {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.telephone {
  width: min(300px, 78vw);
  border-radius: 38px;
  padding: 9px;
  background: linear-gradient(160deg, #2A3040, #12151E);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(247, 248, 252, 0.07),
    0 0 60px rgba(215, 255, 63, 0.10);
  transform: rotateY(-11deg) rotateX(4deg) rotateZ(-1.5deg);
}
@media (max-width: 980px) { .telephone { transform: none; } }

.ecran {
  background: var(--charbon);
  border-radius: 30px;
  overflow: hidden;
  padding: 14px 13px 16px;
  /* Proportion d'un téléphone réel : un écran presque carré trahit la
     maquette au premier coup d'œil, et fait douter du reste. */
  min-height: 540px;
  display: flex;
  flex-direction: column;
}

.barre-etat {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ardoise-pale); font-weight: 600;
  padding: 2px 6px 12px;
}

.duel-titre {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ardoise-pale);
  padding-bottom: 10px;
}

/* Les deux panneaux de joueurs, côte à côte comme dans l'arène. */
.panneaux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.panneaux { flex: 1; }

.panneau {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 12px 10px;
  text-align: center;
}
.panneau.moi { border-color: rgba(67, 217, 255, 0.42); }
.panneau.lui { border-color: rgba(255, 107, 74, 0.42); }

/* Le monogramme : c'est l'avatar réel de l'application, pas une photo. */
.jeton {
  width: 38px; height: 38px; margin: 0 auto;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
  border: 2px solid;
}
.jeton.a { color: var(--cyan); border-color: var(--cyan); background: rgba(67, 217, 255, 0.12); }
.jeton.b { color: var(--orange); border-color: var(--orange); background: rgba(255, 107, 74, 0.12); }

.panneau .qui { font-size: 12.5px; font-weight: 700; margin: 8px 0 2px; }
.panneau .combien {
  font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.panneau.moi .combien { color: var(--cyan); }
.panneau.lui .combien { color: var(--orange); }
.panneau .unite {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ardoise-pale); margin-top: 3px;
}

/*
 * L'ouverture, au milieu des participants.
 *
 * C'est exactement ce que voient les joueurs et les spectateurs : le logo
 * apparaît en fondu entre les deux panneaux, et c'est le signal que ça
 * commence. Posé par-dessus plutôt qu'à la place, pour que le duel reste
 * visible pendant l'annonce.
 */
.ouverture {
  position: relative;
  margin: -118px 0 0;
  padding: 14px 0 0;
  text-align: center;
}
.ouverture .halo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 22px;
  border-radius: 18px;
  background: rgba(11, 13, 18, 0.86);
  border: 1px solid rgba(215, 255, 63, 0.28);
  backdrop-filter: blur(6px);
  animation: respire 3.4s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { opacity: 0.86; }
  50% { opacity: 1; }
}
.ouverture .marque-petite { width: 34px; height: auto; }
.ouverture .consigne {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--lime);
}

.chrono-bas {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--carte-basse);
  border: 1px solid var(--bord);
  border-radius: 14px;
}
.chrono-bas .temps {
  font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.chrono-bas .etat {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ardoise-pale);
}

/* La rangée du bas : les deux seules commandes de l'arène. */
.commandes {
  display: flex; gap: 8px; margin: 10px 0 0;
}
.commande {
  flex: 1;
  padding: 11px 0;
  text-align: center;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ardoise);
}

/* Le ruban penché, posé contre le téléphone. */
.ruban {
  position: absolute;
  right: -6px; bottom: 34px;
  transform: rotate(-8deg) skewX(var(--penche));
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--charbon);
  background: var(--lime);
  padding: 7px 14px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(215, 255, 63, 0.28);
}
@media (max-width: 980px) { .ruban { right: 4px; bottom: 16px; } }

/* ------------------------------------------------------------- Étapes */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 36px 0 0;
}

.etape {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 26px 22px;
}
.etape .numero {
  font-size: 13px; font-weight: 800; color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.etape h3 { font-size: 19px; font-weight: 800; margin: 12px 0 0; letter-spacing: -0.4px; }
.etape p { color: var(--ardoise); font-size: 15px; margin: 8px 0 0; }

/* ------------------------------------------------------------ Chaîne */

.chaine-bloc {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 26px;
  padding: 34px 28px;
  margin: 34px 0 0;
}

.maillons {
  display: flex; align-items: center; gap: 0;
  margin: 28px 0 0;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.maillon { text-align: center; flex: none; }
.maillon .jeton { width: 52px; height: 52px; font-size: 16px; }
.maillon .qui { font-size: 12.5px; color: var(--ardoise); margin-top: 8px; }
.maillon.toi .qui { color: var(--lime); font-weight: 700; }
.maillon .jeton.toi { color: var(--lime); border-color: var(--lime); background: rgba(215, 255, 63, 0.12); }
.maillon .jeton.neutre { color: var(--ardoise); border-color: var(--bord-fort); background: var(--carte-haute); }

.lien {
  flex: none;
  width: 34px; height: 2px;
  background: linear-gradient(90deg, rgba(215, 255, 63, 0.25), rgba(215, 255, 63, 0.7));
  margin-bottom: 26px;
}
@media (max-width: 560px) { .lien { width: 20px; } }

.chaine-note {
  margin: 24px 0 0; padding: 16px 18px;
  background: var(--carte-basse);
  border-radius: 14px;
  color: var(--ardoise);
  font-size: 14.5px;
}

/* ------------------------------------------------------------ Loyauté */

.promesses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 32px 0 0;
}
.promesse {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 22px 20px;
  background: linear-gradient(180deg, rgba(247, 248, 252, 0.03), transparent);
}
.promesse strong { display: block; font-size: 16px; font-weight: 700; }
.promesse span { display: block; color: var(--ardoise); font-size: 14.5px; margin-top: 6px; }
.promesse svg { width: 22px; height: 22px; color: var(--lime); margin-bottom: 12px; }

/* --------------------------------------------------------- Formulaire */

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 26px;
  padding: 34px 28px;
  max-width: 560px;
  margin: 36px auto 0;
}
@media (max-width: 560px) { .carte { padding: 26px 20px; } }

.carte h2 { font-size: 28px; }
.indice { color: var(--ardoise); font-size: 15px; margin: 10px 0 26px; }

.champ { margin-bottom: 20px; }
.champ label {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.4px; margin-bottom: 8px; color: var(--blanc);
}

.champ input[type="text"],
.champ input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  background: var(--carte-basse);
  border: 1px solid var(--bord-fort);
  border-radius: 14px;
  color: var(--blanc);
  font-family: inherit;
  font-size: 16px;
}
.champ input::placeholder { color: var(--ardoise-pale); }
.champ input:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-color: var(--lime);
}

.plateformes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.plateforme {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px;
  border: 1px solid var(--bord-fort);
  border-radius: 14px;
  background: var(--carte-basse);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.plateforme svg { width: 19px; height: 19px; }
.plateforme input { position: absolute; opacity: 0; width: 0; height: 0; }
.plateforme:has(input:checked) {
  border-color: var(--lime);
  background: rgba(215, 255, 63, 0.10);
  color: var(--lime);
}
.plateforme:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }

.erreur {
  display: none;
  color: var(--orange);
  font-size: 13.5px;
  margin: 8px 0 0;
}
.champ.faux .erreur { display: block; }
.champ.faux input[type="text"],
.champ.faux input[type="email"] { border-color: var(--orange); }

.envoyer {
  width: 100%;
  min-height: 54px;
  border: none;
  border-radius: 14px;
  background: var(--lime);
  color: var(--charbon);
  font-family: inherit;
  font-size: 16.5px; font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
}
.envoyer:hover { background: #E4FF6B; }
.envoyer:disabled { opacity: 0.55; cursor: default; }
.envoyer:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }

.bandeau {
  display: none;
  margin: 16px 0 0;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  background: rgba(255, 107, 74, 0.12);
  border: 1px solid rgba(255, 107, 74, 0.4);
  color: var(--orange);
}
.bandeau.visible { display: block; }

.mentions {
  color: var(--ardoise-pale);
  font-size: 13px;
  line-height: 1.6;
  margin: 20px 0 0;
}

/* Confirmation : remplace le formulaire, ne s'ajoute pas à lui. */
.fini { display: none; text-align: center; }
.fini.visible { display: block; }
.fini-marque {
  width: 58px; height: 58px; margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(215, 255, 63, 0.14);
  border: 1px solid rgba(215, 255, 63, 0.4);
  color: var(--lime);
  display: flex; align-items: center; justify-content: center;
}
.fini-marque svg { width: 26px; height: 26px; }
.fini p { color: var(--ardoise); margin: 12px 0 0; }
.fini .menu { color: var(--ardoise-pale); font-size: 13.5px; margin-top: 14px; }

/* ------------------------------------------------------------- Pied */

footer {
  border-top: 1px solid var(--bord);
  padding: 34px 20px 46px;
  text-align: center;
  color: var(--ardoise-pale);
  font-size: 13.5px;
}
.devise {
  color: var(--lime);
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-size: 11.5px;
  margin-bottom: 10px;
}

/* Une cible visible au clavier, partout. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/*
 * Les pages légales.
 *
 * Un texte qu'on doit pouvoir lire en entier avant de cocher une case. La
 * mesure du confort de lecture est la longueur de ligne : au-delà de 68
 * caractères, l'œil perd le début de la ligne suivante, et un texte juridique
 * est exactement celui qu'on abandonne à la première difficulté.
 */
.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: 48px 0 72px;
}

.legal h1 {
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -1.4px;
  margin: 10px 0 0;
}

.legal .sous { max-width: none; margin-top: 18px; }

.legal .maj {
  color: var(--ardoise-pale);
  font-size: 13.5px;
  margin: 10px 0 0;
}

.legal section { margin-top: 40px; }

.legal h2 {
  font-size: 20px;
  letter-spacing: -0.4px;
  margin: 0 0 14px;
}

.legal p {
  color: var(--ardoise);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 14px;
}

.legal ul {
  margin: 0;
  padding: 0 0 0 20px;
  color: var(--ardoise);
  font-size: 16px;
  line-height: 1.65;
}

.legal li { margin: 0 0 10px; }

.legal .croise {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--bord);
}

.legal a { color: var(--lime); }
.legal a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ==========================================================================
   Les pages de contenu : comment ça marche, les exercices, la démonstration.

   Elles réemploient la bande, l'œil, le sous-titre et les étapes de la page
   d'accueil. Ce qui suit n'ajoute que ce qui leur est propre : un titre de
   page, un tableau de faits, et un pied de page qui porte des liens plutôt
   qu'une seule devise.

   Aucune variable neuve. La charte a ses couleurs, et une page de contenu qui
   en inventerait une se reconnaîtrait tout de suite comme étrangère au reste.
   ========================================================================== */

/* Le lien de retour porte le monogramme : sur une page intérieure, le logo
   doit ramener quelque part, sinon il n'est qu'une décoration en haut à
   gauche. */
.retour-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.titre-page {
  font-size: clamp(30px, 5.4vw, 46px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin: 14px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}

/* Les faits, deux par ligne : ce sont des paires courtes, et les empiler en
   une colonne unique ferait défiler pour lire huit lignes. */
.grille-faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 28px;
}
.fait {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px 20px;
}
.fait strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.fait span {
  display: block;
  margin-top: 6px;
  color: var(--ardoise);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Le tableau déborde dans son propre conteneur : sur un téléphone, trois
   colonnes de texte ne tiennent pas, et c'est le tableau qui doit glisser,
   jamais la page. */
.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  margin-top: 28px;
}
.tableau {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  background: var(--carte);
}
.tableau th,
.tableau td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--bord);
  font-size: 14.5px;
  vertical-align: top;
}
.tableau thead th {
  background: var(--carte-haute);
  color: var(--ardoise-pale);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.tableau tbody td { color: var(--ardoise); }
.tableau tbody td:first-child { color: var(--blanc); font-weight: 600; }
.tableau tbody tr:last-child td { border-bottom: none; }

/* La pastille porte un mot en plus de sa couleur : un état qui ne se lirait
   qu'au vert ou au jaune ne se lit pas du tout pour une partie des gens. */
.pastille {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pastille.oui { background: rgba(215, 255, 63, 0.14); color: var(--lime); }
.pastille.attente { background: rgba(255, 107, 74, 0.14); color: var(--orange); }

.note-tableau {
  color: var(--ardoise);
  font-size: 15px;
  line-height: 1.62;
  margin: 18px 0 0;
  max-width: 68ch;
}

.pied-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 16px;
}
.pied-liens a {
  color: var(--ardoise-pale);
  text-decoration: none;
  font-size: 13.5px;
}
.pied-liens a:hover { color: var(--blanc); }

/* ==========================================================================
   Les emplacements : des cadres vides, aux dimensions exactes.

   Ils réservent la place d'une vidéo ou d'une image qui n'existe pas encore.
   Deux raisons, et la seconde est la plus importante.

   D'abord ils disent où chaque fichier va, ce qui évite d'avoir à le deviner
   au moment de le poser. Ensuite et surtout, ils **réservent leurs dimensions
   dès maintenant** : une image qui arrive dans une page qui ne lui avait rien
   réservé pousse tout ce qui la suit vers le bas au moment où elle se charge,
   et c'est exactement ce que mesure le CLS. Le jour où le fichier arrive, il
   se pose dans un trou qui a déjà sa taille, et rien ne bouge.

   Ils ne ressemblent pas à une image cassée : un rectangle gris muet se lit
   comme une panne. Chacun dit ce qu'il attend, dans les deux langues.
   ========================================================================== */

.cadre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 20px;
  border: 1px dashed var(--bord-fort);
  border-radius: var(--rayon);
  background: var(--carte-basse);
  /* Le format par défaut : celui d'une capture d'écran de duel. */
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Le format vertical, celui d'un clip et d'une vidéo faite pour un téléphone. */
.cadre.vertical {
  aspect-ratio: 9 / 16;
  max-width: 300px;
  margin-inline: auto;
}

/* Le format d'une vignette d'exercice, presque carré : on y voit un corps
   entier de profil, pas un paysage. */
.cadre.vignette { aspect-ratio: 4 / 3; }

.cadre-quoi {
  color: var(--blanc);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0;
}
.cadre-note {
  color: var(--ardoise-pale);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
}
/* La dimension attendue, en petit, pour qu'on sache quoi exporter. */
.cadre-taille {
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--lime);
  margin: 0;
}