/* ══ DECAPRIZE — LA DA EST CELLE DE DECARMY, PAS UNE INVENTION ══════

   ⛔ LA FAUTE DU 27/10, ET ELLE EST ENTIÈRE : ce fichier avait une
   palette CLAIRE sur `:root` et ne passait au sombre que par
   `@media (prefers-color-scheme: dark)`. En mode clair le site était
   donc BLANC — la moitié des visiteurs. Or la règle du site existe,
   donnée par Elia le 05/09 et citée en tête de `constants/DecaTheme.ts` :

       « le site, peu importe qu'on soit en mode sombre ou en mode
         clair, il faut toujours qu'il soit NOIR, NOIR, NOIR, comme
         sur l'application »

   Ce même fichier raconte que l'app avait eu ce bug (« un ordinateur en
   mode clair repeignait tout le site en blanc ») et qu'il a été corrigé.
   Le site l'a reproduit. ⇒ AUCUNE `@media (prefers-color-scheme)` ici,
   jamais. Le renversement du 02/10 (« tu fais en fonction du téléphone »)
   vaut pour l'APP, pas pour le site.

   ⛔ ET PLUS AUCUNE COULEUR INVENTÉE. Le `--bois` (#C89B5E) et son ombre
   ne sont dans aucune palette de l'app : ils avaient été inventés ici,
   et Elia : « je n'aime pas du tout cette couleur pourrate ». L'app est
   NOIR, BLANC, GRIS. La sphère est la seule note chaude de la page, et
   elle suffit. Les valeurs ci-dessous sont relevées une à une dans
   `constants/DecaTheme.ts` (palette `dark`).
   ══════════════════════════════════════════════════════════════════ */

/* ⭐ MANROPE, auto-hébergée : c'est la police de l'app depuis le 18/09
   (`constants/DecaType.ts` — « la géométrique ouverte la plus proche
   d'Aeonik », celle de Revolut). Les woff2 sont dérivés des TTF
   embarqués dans l'app elle-même : même fichier, même dessin.
   50 Ko les quatre graisses, et toujours ZÉRO requête tierce. */
@font-face { font-family: Manrope; font-weight: 400; font-style: normal;
  font-display: swap; src: url('/polices/manrope-400.woff2') format('woff2'); }
@font-face { font-family: Manrope; font-weight: 500; font-style: normal;
  font-display: swap; src: url('/polices/manrope-500.woff2') format('woff2'); }
@font-face { font-family: Manrope; font-weight: 600; font-style: normal;
  font-display: swap; src: url('/polices/manrope-600.woff2') format('woff2'); }
@font-face { font-family: Manrope; font-weight: 700; font-style: normal;
  font-display: swap; src: url('/polices/manrope-700.woff2') format('woff2'); }

:root {
  /* constants/DecaTheme.ts → DecaColors.dark, valeur par valeur */
  --bg: #000000;
  --texte: #FFFFFF;
  --texte-2: #C7C7CC;
  --texte-3: #8E8E93;
  --surface: #1C1C1E;
  --bord: #2C2C2E;
  --bord-doux: #1C1C1E;

  /* La sphère, relevée sur assets/images/boule.png : deux aplats, aucun
     dégradé. #FAF8F4 = 85,9 % des pixels opaques, #CDC9C1 = 10,8 %. */
  --sphere-corps: #FAF8F4;
  --sphere-ombre: #CDC9C1;

  --rayon: 16px;
  --large: 1080px;
  color-scheme: dark;            /* ⛔ `dark` SEUL : jamais `light dark` */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

/* corps : 16 / 500, DecaType.corps */
body {
  margin: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

.saut { position: absolute; left: -9999px; top: 0;
  background: var(--texte); color: var(--bg); padding: 12px 16px; z-index: 10; }
.saut:focus { left: 8px; top: 8px; }

/* ══ LA SPHÈRE, EN CSS PUR ═════════════════════════════════════════
   Deux disques IDENTIQUES, l'ombre décalée en diagonale bas-droite.
   Décalage mesuré sur boule.png : +36 px sur un diamètre de 470, soit
   +7,66 % ; on pose 7,5 %. ⚠️ L'ombre passe DESSOUS (c'est un croissant
   qui dépasse), jamais par-dessus. Nette à toute taille, zéro octet
   de plus, et c'est la vraie sphère — pas un beige inventé. */
.sphere { position: relative; display: inline-block; aspect-ratio: 1; flex: none; }
.sphere::before, .sphere::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
}
.sphere::before { background: var(--sphere-ombre); translate: 7.5% 7.5%; }
.sphere::after  { background: var(--sphere-corps); }

/* ══ EN-TÊTE ═══════════════════════════════════════════════════════ */
.entete {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  max-width: var(--large); margin: 0 auto; padding: 22px 16px;
}
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.2px; text-decoration: none;
}
.marque .sphere { width: 22px; }
/* ⛔ LA BARRE DÉFILE, ELLE NE SE CASSE PAS. Mesuré à 375 px le 27/10 :
   « Les candidats » tombait seul sur une deuxième ligne, avec un grand
   blanc à droite — sur la largeur où ce lien s'ouvrira presque toujours
   (WhatsApp, la presse sur un téléphone). Les libellés ont d'abord été
   raccourcis (les cinq langues tiennent à 375 px), et ce défilement est
   le filet : à 320 px quatre langues sur cinq dépassent encore, et
   l'allemand de 50 px. C'est la grammaire des onglets de catégories de
   l'app. ⚠️ `flex-wrap: nowrap` est le cœur : sans lui, rien ne défile,
   ça retourne à la ligne. */
.nav {
  display: flex; gap: 22px; flex-wrap: nowrap; font-size: 15px; font-weight: 500;
  overflow-x: auto; min-width: 0;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--texte-3); text-decoration: none; padding: 2px 0; white-space: nowrap; }
.nav a:hover { color: var(--texte); }
.nav a[aria-current="page"] { color: var(--texte); font-weight: 600; }

main { max-width: var(--large); margin: 0 auto; padding: 0 16px 72px; }

/* ══ TYPOGRAPHIE — l'échelle de constants/DecaType.ts ══════════════
   ⛔ LE 700 EST LE PLAFOND, PARTOUT. DecaType.ts : « Les graisses
   800/900 tombent sur Bold : Revolut n'a nulle part d'extra-gras. »
   Mon h1 était en 800 et montait à 68px par un clamp — deux fautes
   dans la même ligne.
   ⚠️ L'interlettrage NÉGATIF des grandes tailles n'est pas un détail :
   c'est lui qui fait la densité qu'Elia reconnaît. */
h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 44px; margin: 0 0 10px; }
h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 14px; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; margin: 0 0 6px; }
h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; margin: 0 0 4px; }
/* ⭐ LE BLANC EST UN PRIVILÈGE : titres et chiffres SEULEMENT. Le corps
   descend en --texte-2. Avant le 27/10 tout était blanc, donc rien
   n'était mis en avant — une des trois causes de « on ne comprend pas
   lequel est important ». */
p  { margin: 0 0 14px; color: var(--texte-2); }
h1, h2, h3, h4 { color: var(--texte); }
.bloc > p:last-child, .carte p:last-child { margin-bottom: 0; }

.sur-titre {
  margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte-3);
}
/* le sous-titre du héros : la baseline du dossier, en 26/700 */
.accroche { margin: 0 0 18px; font-size: 26px; font-weight: 700;
  letter-spacing: -0.6px; line-height: 1.2; max-width: 20em; }
.chapo { margin: 0 0 20px; font-size: 17px; font-weight: 500;
  color: var(--texte-2); max-width: 44em; }
.menu { font-size: 15px; font-weight: 500; color: var(--texte-2); }
.attente { color: var(--texte-3); }

/* ══ LE CHIFFRE HÉROS ══════════════════════════════════════════════
   ⭐ C'est le geste maison : `constants/DecaType.ts` décrit « le chiffre
   héros » de Revolut — 700, interlettrage très serré — et le site ne
   l'utilisait nulle part. L'écart d'échelle était de 2,1 (titre 34 px
   contre corps 16), d'où la platitude ; il passe à 3,75.
   ⚠️ 700 reste le plafond, même ici : jamais 800. */
.date-hero, .nombre {
  font-size: 60px; font-weight: 700; letter-spacing: -2px;
  line-height: 1.02; color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.date-hero { margin: 24px 0 8px; }
.date-hero time { display: inline-block; }
.date-detail { margin: 0; font-size: 15px; color: var(--texte-3); line-height: 1.5; }

.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; list-style: none; padding: 0; margin: 0;
}
.chiffres li { display: flex; flex-direction: column; gap: 4px; }
.nombre-libelle { font-size: 13px; font-weight: 500; color: var(--texte-3); }

/* ══ L'AFFICHE ═════════════════════════════════════════════════════
   ⛔ Elia, 28/10 : « la première page est toujours moche ». Elle l'était
   par DISPOSITION : tout tassé dans une colonne à gauche, la sphère qui
   flottait à droite, et de la hauteur vide. Tout aligné à gauche sur
   toute la page, ça a l'air d'un document.
   ⇒ Pleine hauteur, centré, la sphère d'abord, le NOM très grand. Une
   affiche de cérémonie. Et c'est le seul bloc centré du site : le corps
   reste aligné à gauche, et ce contraste fait le rythme. */
/* ⭐ LE HÉROS DES GRAMMYS, REGARDÉ CETTE FOIS : une photo plein cadre,
   le texte posé EN BAS À GAUCHE par-dessus, et un voile qui monte du bas
   pour que ça reste lisible quelle que soit la photo. */
.affiche {
  position: relative; isolation: isolate;
  min-height: min(78vh, 680px);
  display: flex; flex-direction: column; justify-content: flex-end;
  margin: 0 0 8px; padding: 0 0 40px;
  border-radius: var(--rayon); overflow: hidden;
}
.affiche-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* ⚠️ Le voile n'est pas une coquetterie : sans lui, un texte blanc sur
   une photo claire devient illisible, et on ne choisit pas la photo que
   quelqu'un posera demain. */
.affiche::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 38%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.1) 100%);
}
.affiche-texte { padding: 0 28px; max-width: 52em; }
.affiche .sur-titre { margin: 0 0 12px; color: var(--texte-2); }
.titre-affiche {
  font-size: clamp(52px, 8.5vw, 104px); line-height: 0.94;
  letter-spacing: -0.045em; margin: 0 0 16px;
}
.accroche-affiche {
  font-size: clamp(18px, 2vw, 23px); font-weight: 600;
  letter-spacing: -0.2px; color: var(--texte-2);
  max-width: 24em; margin: 0 0 26px;
}
.date-affiche {
  font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.6px;
  color: var(--texte); margin: 0 0 6px; font-variant-numeric: tabular-nums;
}
.affiche .date-detail { margin: 0 0 28px; }

/* ⭐ LE DÉCOMPTE. ⚠️ Sans JavaScript il garde ses tirets, et la date
   reste écrite juste au-dessus : aucune information n'est perdue. */
.compteur { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; }
.compteur li { display: flex; flex-direction: column; gap: 2px; }
.compteur-n {
  font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -1.4px;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--texte);
}
.compteur-l { font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texte-3); }
.compteur.fini .compteur-n { color: var(--texte-3); }

.credits { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
  font-size: 14px; color: var(--texte-3); }
.credits a { color: var(--texte-2); }

.boutons { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.bouton {
  display: inline-block; background: var(--texte); color: var(--bg);
  padding: 13px 22px; border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
  border: 1px solid var(--texte);
}
.bouton:hover { opacity: 0.85; }
.bouton.creux { background: transparent; color: var(--texte); border-color: var(--bord); }
.lien-fort { font-size: 15px; font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor; }

/* ══ LES TROIS FAITS ═══════════════════════════════════════════════ */
.faits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 0 0 44px; padding: 0;
  background: var(--bord); border-radius: var(--rayon); overflow: hidden;
}
.faits > div { background: var(--surface); padding: 20px; }
.faits dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte-3); margin-bottom: 7px; }
.faits dd { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }

/* ══ BLOCS ═════════════════════════════════════════════════════════ */
/* ⭐ L'ÉCART ENTRE DEUX SECTIONS VAUT 3 FOIS L'ÉCART INTÉRIEUR.
   48 px de part et d'autre = 96 entre deux sections, contre 32 à
   l'intérieur (titre → contenu). Avant, les deux se ressemblaient
   (34 contre 14) : c'est la cause mécanique du « ça coule comme un
   document ». Tout reste sur la grille de 8. */
.bloc { padding: 48px 0; border-top: 1px solid var(--bord); }
.bloc > h2 { margin-bottom: 32px; }
.tete { padding: 40px 0 32px; }
.encadre { background: var(--surface); border-radius: var(--rayon);
  padding: 26px; border-top: 0; margin: 22px 0; }

.grille2, .grille3, .grille4 {
  display: grid; gap: 12px; list-style: none; padding: 0; margin: 0 0 16px;
}
.grille2 { grid-template-columns: repeat(2, 1fr); }
.grille3 { grid-template-columns: repeat(3, 1fr); }
.grille4 { grid-template-columns: repeat(4, 1fr); }
.carte { background: var(--surface); border-radius: var(--rayon); padding: 22px; }

/* ⭐ LES QUATRE DOMAINES, À LA FORME DU PRIX NOBEL — celle qu'Elia a
   entourée en vert le 28/10 : un filet, le TITRE, l'explication, et la
   photo EN DERNIER. Les quatre côte à côte, à plat sur le fond, sans
   boîte grise. C'est une mise en page de journal, pas de tuiles.
   ⚠️ Avant, la photo venait EN PREMIER et le texte dessous, dans une
   carte grise : « c'est sous la mauvaise forme ». */
.domaines {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  list-style: none; padding: 0; margin: 0 0 20px;
}
.domaine {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--bord); padding-top: 20px;
}
.domaine h3 { font-size: 21px; letter-spacing: -0.4px; margin: 0 0 10px; }
.domaine p { font-size: 15px; margin: 0 0 12px; }
.domaine-detail {
  font-size: 13px; font-weight: 600; color: var(--texte-3);
  letter-spacing: 0.02em; margin: 0 0 20px;
}
/* ⚠️ `margin-top:auto` pousse la photo en bas : les quatre s'alignent
   même quand les textes n'ont pas la même longueur. */
.domaine-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; margin-top: auto; background: var(--bord);
  border-radius: 10px;
}

/* une seule phrase de faits, là où il y avait six lignes d'horaire */
.une-ligne { font-size: 17px; color: var(--texte-2); margin: 0; }
.titre-barres { margin: 0 0 16px; font-size: 15px; color: var(--texte-3);
  font-weight: 600; letter-spacing: 0.02em; }

/* quatre items alignés, pas une liste à puces */
.items-sobriete { list-style: none; padding: 0; gap: 16px; }
.items-sobriete li {
  font-size: 15px; color: var(--texte-2);
  padding-top: 16px; border-top: 1px solid var(--bord);
}
.accroche-page { margin-bottom: 16px; max-width: 24em; }

.liste-def { list-style: none; padding: 0; margin: 0; }
.liste-def li { padding: 16px 0; border-top: 1px solid var(--bord); }
.liste-def li:first-child { border-top: 0; }
.liste-def p { margin: 4px 0 0; }

.liste-limites { margin: 0; padding-left: 20px; }
.liste-limites li { margin-bottom: 11px; color: var(--texte-2); }

/* ══ BARÈME ════════════════════════════════════════════════════════ */
.critere .sous-titre {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte-3); margin: 16px 0 4px;
}
.critere .angle-texte { color: var(--texte-2); }
.critere p { font-size: 15px; }

/* ⚠️ Le poids se lit à la LONGUEUR de la barre, pas à une couleur : il
   n'y a pas d'accent sur ce site. Blanc sur la surface. */
.postes { list-style: none; padding: 0; margin: 0; }
.poste { display: grid; grid-template-columns: 13em 1fr 3.5em;
  align-items: center; gap: 14px; padding: 9px 0; }
.poste-nom { font-size: 15px; }
.poste-barre { display: block; height: 6px; border-radius: 999px;
  background: var(--surface); overflow: hidden; }
.poste-barre > span { display: block; height: 100%; border-radius: 999px;
  background: var(--texte); }
.poste-poids { font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 15px; text-align: right; letter-spacing: -0.2px; }

/* ══ DÉROULÉ ═══════════════════════════════════════════════════════ */
.deroule { list-style: none; padding: 0; margin: 0 0 14px; }
.deroule li { display: grid; grid-template-columns: 5.5em 1fr; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--bord); }
.deroule li:first-child { border-top: 0; }
.heure { font-variant-numeric: tabular-nums; font-weight: 700;
  letter-spacing: -0.2px; color: var(--texte-3); white-space: nowrap; }
.deroule b { font-weight: 600; letter-spacing: -0.2px; }

/* ══ LE GABARIT DU BALLON D'OR ═════════════════════════════════════
   Relevé sur sa page le 27/10 : un titre d'UN SEUL MOT en capitales,
   deux paragraphes courts, une rangée de TROIS chiffres. Les trois
   sections de « Le prix » sont bâties à l'identique — c'est la
   répétition d'une MÊME forme, pas d'un même texte. */
.mot {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texte-3);
  margin: 0 0 24px;
}
.section-trois { display: grid; gap: 32px; }
.section-trois-texte {
  display: grid; gap: 14px; max-width: 46em;
}
.section-trois-texte p { font-size: 17px; margin: 0; }
.chiffres-trois { grid-template-columns: repeat(3, 1fr); }

/* ⭐ Les quatre verbes, au gabarit du « Our Purpose » des Grammys :
   un verbe, une ligne. Pas un paragraphe. */
.verbes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px;
  background: var(--bord); border-radius: var(--rayon); overflow: hidden; }
.verbes li { background: var(--bg); padding: 22px 0; display: grid;
  grid-template-columns: 11em 1fr; gap: 20px; align-items: baseline; }
.verbes b { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--texte); }
.verbes p { margin: 0; font-size: 15px; }

/* ⭐ LE CALENDRIER — la leçon des Grammys : un prix se juge à son
   processus. ⚠️ Une étape sans date s'affiche sans date : c'est l'ORDRE
   qui porte l'information, et inventer une date coûterait plus cher. */
.calendrier { list-style: none; padding: 0; margin: 0; counter-reset: etape; }
.calendrier li {
  display: grid; grid-template-columns: 10em 1fr; gap: 20px;
  padding: 18px 0; border-top: 1px solid var(--bord); align-items: baseline;
}
.calendrier li:first-child { border-top: 0; }
.etape-quand { font-size: 14px; font-weight: 600; color: var(--texte-3);
  font-variant-numeric: tabular-nums; }
.etape-quoi { font-size: 17px; color: var(--texte-2); }
.calendrier li.encours .etape-quand { color: var(--texte); }
.etape-fait { color: var(--texte-2); }
.calendrier li.fait .etape-quoi { color: var(--texte-3); text-decoration: line-through;
  text-decoration-color: var(--bord); }
.calendrier li.encours .etape-quoi { color: var(--texte); font-weight: 600; }

/* Les rangs #1 #2 #3, prêts pour le jour où Elia tranche l'ordre. */
.rangs { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.rangs:last-child { margin-bottom: 0; }
/* Au gabarit de leurs trois piliers : le rang en grand, le nom à côté. */
.rangs-larges { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rangs-larges .rang { grid-template-columns: 1fr; gap: 6px; align-items: start; }
.rangs-larges .rang-n { font-size: 44px; letter-spacing: -1.6px; line-height: 1; }
.rangs-larges .rang-nom { font-size: 16px; }
.rang { display: grid; grid-template-columns: 3.5em 1fr; gap: 16px; align-items: baseline; }
.rang-n { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; color: var(--texte); }
.rang-nom { font-size: 17px; color: var(--texte-2); }

/* ══ LES CANDIDATS ═════════════════════════════════════════════════
   Chaque chiffre vient avec QUI l'a calculé, QUAND, et un lien vers sa
   source : c'est la promesse que fait la page du barème.
   ⛔ Un indicateur non publié s'écrit « non publié », jamais 0. */
.candidats { align-items: stretch; }
.carte-candidat { padding: 24px; display: flex; flex-direction: column; }
.carte-candidat h4 { font-size: 19px; letter-spacing: -0.3px; margin-bottom: 4px; }
.carte-candidat > p { font-size: 15px; }
.inds { list-style: none; padding: 16px 0 0; margin: auto 0 0; display: grid; gap: 14px; }
.ind { display: grid; gap: 3px; padding-top: 14px; border-top: 1px solid var(--bord); }
.ind-critere { font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texte-3); }
.ind-valeur { font-size: 14px; color: var(--texte); line-height: 1.45; }
.ind-source { font-size: 12px; color: var(--texte-3); }
.src { color: var(--texte-3); }

/* ══ TROPHÉE ═══════════════════════════════════════════════════════ */
.trophee { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.trophee-image { display: flex; justify-content: center; }
.trophee-image .sphere { width: 140px; }

/* ══ PIED ══════════════════════════════════════════════════════════ */
.pied {
  border-top: 1px solid var(--bord); max-width: var(--large); margin: 0 auto;
  padding: 30px 16px 48px; display: flex; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--texte-3);
}
.pied a { color: inherit; }
.pied-asso { margin: 0 0 8px; }
.pied-liens { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; }
.langues { display: flex; gap: 14px; flex-wrap: wrap; }
.langues a { text-decoration: none; }
.langues a[aria-current="true"] { color: var(--texte); font-weight: 600; }

/* ══ RACINE (choix de langue) ══════════════════════════════════════ */
body.racine { display: grid; place-items: center; min-height: 100vh; text-align: center; }
body.racine main { padding: 40px 16px; }
body.racine .sphere { width: 84px; }
body.racine .accroche { max-width: none; margin-left: auto; margin-right: auto; }
.langues-racine { list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ══ ÉTROIT ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grille4, .grille3 { grid-template-columns: repeat(2, 1fr); }
  .domaines { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .chiffres { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (max-width: 680px) {
  h1 { font-size: 34px; letter-spacing: -0.8px; line-height: 38px; }
  .accroche { font-size: 22px; letter-spacing: -0.4px; }
  /* ⚠️ Le chiffre héros descend, mais l'écart d'échelle reste : 44 contre
     16, soit 2,75. En dessous il casse la ligne sur l'espagnol, qui est
     le plus long (« 12 de diciembre de 2026 »). */
  .date-hero, .nombre { font-size: 44px; letter-spacing: -1.4px; }
  .bloc { padding: 40px 0; }
  .bloc > h2 { margin-bottom: 24px; }
  .carte-domaine { padding: 22px; min-height: 0; }
  .affiche { min-height: min(84vh, 620px); padding: 0 0 28px; }
  .affiche-texte { padding: 0 20px; }
  .accroche-affiche { margin-bottom: 20px; }
  .affiche .date-detail { margin-bottom: 20px; }
  .compteur { gap: 20px; }
  .domaines { grid-template-columns: 1fr; gap: 24px; }
  .rangs-larges { grid-template-columns: 1fr; gap: 14px; }
  .rangs-larges .rang { grid-template-columns: 2.6em 1fr; align-items: baseline; }
  .rangs-larges .rang-n { font-size: 30px; letter-spacing: -1px; }
  .section-trois { gap: 24px; }
  .section-trois-texte p { font-size: 16px; }
  .chiffres-trois { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .chiffres-trois .nombre { font-size: 32px; letter-spacing: -1px; }
  .chiffres-trois .nombre-libelle { font-size: 12px; }
  .verbes li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .verbes b { font-size: 19px; }
  .calendrier li { grid-template-columns: 1fr; gap: 4px; }
  .hero, .trophee { grid-template-columns: 1fr; gap: 28px; }
  .hero-sphere, .trophee-image { order: -1; }
  .hero-sphere .sphere { width: 150px; }
  .grille2, .grille3, .grille4 { grid-template-columns: 1fr; }
  .entete { gap: 12px; padding: 16px 0; }
  .marque { padding: 0 16px; }
  /* ⚠️ Elle prend toute la largeur et SAIGNE jusqu'aux bords : un libellé
     coupé net au bord de l'écran est ce qui dit à l'œil qu'on peut tirer.
     `scroll-padding-inline` garde le premier item décollé du bord. */
  .nav {
    flex: 1 1 100%; gap: 16px; font-size: 14px;
    padding: 0 16px; scroll-padding-inline: 16px;
  }
  main { padding: 0 16px 56px; }
  .poste { grid-template-columns: 1fr 3.5em; }
  .poste-barre { grid-column: 1 / -1; order: 3; }
  .deroule li { grid-template-columns: 4.5em 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }