/* =============================================================
   Kliq. - Showroom de styles (/styles)
   Habillage Kliq uniquement : intro, cadre de scene, fiche,
   boutons de vote, HUD, fin de parcours, grille.

   Les univers visuels, eux, vivent dans assets/showroom/<slug>.css
   et n'ont aucune regle ici : deux styles cote a cote doivent
   pouvoir sembler venir de deux agences differentes.
   ============================================================= */

/* Sur cette page la barre de navigation ne reste pas fixee : chaque univers
   occupe un ecran entier et une barre sombre flottante casserait l'immersion.
   Le retour vers le site est assure en permanence par le HUD, en bas. */
.page-nav { position: relative; }

/* ---------- Intro ---------- */
.sh-intro {
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 60px 40px 80px;
  max-width: 900px;
}
.sh-intro h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.sh-intro h1 .dot { color: var(--yellow); }
.sh-intro-lede {
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.82);
  max-width: 62ch;
}
.sh-intro-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 6px;
}
.sh-intro-mode li {
  list-style: none;
  font-size: 13.5px;
  color: rgba(245, 245, 240, 0.62);
  display: flex;
  align-items: center;
  gap: 9px;
}
.sh-intro-mode li::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--yellow);
  transform: rotate(45deg);
  flex: none;
}
.sh-intro-note {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(245, 245, 240, 0.5);
  border-left: 2px solid rgba(247, 235, 55, 0.4);
  padding-left: 14px;
  max-width: 58ch;
}
.sh-start {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--black);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 26px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
}
.sh-start:hover { background: #fff; }

/* La piste reserve la hauteur de ses univers avant meme qu'ils existent : le
   moteur les construit en JavaScript, et sans cette reserve la fin de
   parcours, visible en bas du premier ecran, sautait de seize hauteurs
   d'ecran d'un coup au chargement. Le nombre est ecrit dans la page par
   scripts/showroom-grille.mjs, depuis le catalogue. */
.sh-piste { min-height: calc(var(--sh-nb, 0) * 100svh); }

/* ---------- Un univers ---------- */
/* Un univers occupe l'ecran entier, bord a bord. La maquette n'est ni reduite
   ni posee dans un cadre : elle EST l'ecran, et se met en page a la largeur
   reelle du navigateur. C'est ce qui permet a son texte de rester a sa taille
   reelle, 14 px au minimum en telephone, au lieu d'etre une vignette illisible
   posee sur un fond. */
.sh-univers {
  position: relative;
  height: 100svh;
  /* Chaque univers pose --sh-fond dans son propre fichier. La valeur de repli
     sert pendant le chargement : un aplat neutre, jamais un flash blanc. */
  background: var(--sh-fond, #14141c);
  overflow: hidden;
}
.sh-univers:focus-visible { outline: 3px solid var(--yellow); outline-offset: -6px; }

/* container-type : les univers se mettent en page avec @container. La mesure
   porte sur la largeur de la maquette, qui vaut ici celle de la fenetre, mais
   la vignette du bilan reutilise la meme feuille a une autre largeur. */
.sh-maquette {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  container-name: maquette;
  overflow: hidden;
  /* La maquette forme son propre contexte d'empilement. Sans cela, un calque
     d'univers qui se donne un z-index eleve, une punaise de carte ou un
     autocollant, passe au-dessus de la fiche Kliq et cache les votes. Aucun
     univers n'a plus a se soucier de l'habillage. */
  isolation: isolate;
  z-index: 0;
  background: #fff;
}
/* Reserves : en telephone, la fiche est posee en bas de l'ecran et le HUD en
   haut. Les univers gardent ces deux creux libres de contenu, pour que rien
   d'utile ne finisse dessous. Le fond, lui, va bien jusqu'aux bords : c'est ce
   qui fait qu'un univers occupe vraiment l'ecran.
   La reserve basse est recalculee par showroom.js a la hauteur reelle de la
   fiche ; la valeur posee ici sert de repli. */
.sh-maquette {
  /* Trois reserves, posees une fois a la racine de chaque univers. Le HUD
     tient le haut, la barre de fiche tient le bas, et plus rien ne mange la
     largeur : la colonne de droite a disparu. */
  --sh-reserve-bas: 92px;
  --sh-reserve-haut: 54px;
  --sh-reserve-droite: 0px;
}


.sh-maquette-vide {
  width: 100%;
  height: 100%;
  background: var(--sh-fond, #14141c);
}

/* ---------- Fiche : barre fine, detail au tap ---------- */
/* La fiche est repliee par defaut, a toutes les largeurs. Elle tient dans une
   barre posee au bas de l'univers : le rang, le nom du style, les trois votes,
   et un bouton qui ouvre le detail. L'univers garde ainsi toute la largeur de
   l'ecran, ce qui n'etait pas le cas avec une colonne de 336 px a droite.
   Le detail, lui, se pose par-dessus la maquette et ne reserve rien. */
.sh-fiche {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  color: var(--white);
}

.sh-fiche-barre {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: rgba(10, 10, 18, 0.92);
  border: 1px solid rgba(245, 245, 240, 0.16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
@supports (backdrop-filter: blur(10px)) {
  .sh-fiche-barre { background: rgba(10, 10, 18, 0.82); backdrop-filter: blur(12px); }
}
@media (prefers-reduced-transparency: reduce) {
  .sh-fiche-barre { background: rgba(10, 10, 18, 0.97) !important; backdrop-filter: none !important; }
}

.sh-fiche-rang {
  flex: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}
.sh-fiche h2 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le detail : un panneau pose au-dessus de la barre, jamais a cote. */
.sh-fiche-detail {
  display: none;
  margin-bottom: 10px;
  max-height: min(58svh, 520px);
  overflow-y: auto;
  padding: 18px 19px 17px;
  border-radius: 6px;
  background: rgba(10, 10, 18, 0.95);
  border: 1px solid rgba(245, 245, 240, 0.18);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
@supports (backdrop-filter: blur(10px)) {
  .sh-fiche-detail { background: rgba(10, 10, 18, 0.88); backdrop-filter: blur(14px); }
}
@media (prefers-reduced-transparency: reduce) {
  .sh-fiche-detail { background: rgba(10, 10, 18, 0.98) !important; backdrop-filter: none !important; }
}
.sh-fiche.is-ouverte .sh-fiche-detail { display: block; }

.sh-fiche dl { display: grid; gap: 9px; margin: 0 0 14px; }
.sh-fiche dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.58);
  margin-bottom: 3px;
}
.sh-fiche dd { margin: 0; font-size: 14px; line-height: 1.48; color: rgba(245, 245, 240, 0.92); }
.sh-pastilles { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sh-pastille {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(245, 245, 240, 0.3);
  flex: none;
}
.sh-polices { font-size: 13.5px; color: rgba(245, 245, 240, 0.82); line-height: 1.5; }

/* Le bouton qui declenche le geste de l'univers. Il vit dans le detail : la
   maquette ne contient rien de focalisable, et c'est la seule porte d'entree
   au clavier vers le geste. */
.sh-geste {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
  cursor: pointer;
  min-height: 40px;
}
.sh-geste:hover { background: var(--yellow); color: var(--black); }
.sh-geste:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sh-geste.is-en-cours { background: var(--yellow); color: var(--black); }

.sh-detail {
  flex: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245, 245, 240, 0.26);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  min-height: 42px;
  white-space: nowrap;
}
.sh-detail:hover { border-color: var(--white); }
.sh-detail:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- Votes ---------- */
.sh-votes { display: flex; gap: 8px; flex: none; }
.sh-vote {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(245, 245, 240, 0.26);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  min-height: 42px;
  white-space: nowrap;
}
.sh-vote:hover { border-color: var(--white); background: rgba(245, 245, 240, 0.1); }
.sh-vote:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.sh-vote[aria-pressed="true"] { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.sh-vote--non[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---------- HUD ---------- */
/* Le HUD passe en haut : le bas de l'ecran appartient a la barre de fiche, et
   deux bandeaux superposes en bas etaient illisibles. */
.sh-hud {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 9px 9px 16px;
  border-radius: 999px;
  background: rgba(10, 10, 18, 0.93);
  border: 1px solid rgba(245, 245, 240, 0.18);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  color: var(--white);
  max-width: calc(100vw - 24px);
}
@supports (backdrop-filter: blur(10px)) {
  .sh-hud { background: rgba(10, 10, 18, 0.8); backdrop-filter: blur(14px); }
}
@media (prefers-reduced-transparency: reduce) {
  .sh-hud { background: rgba(10, 10, 18, 0.98) !important; backdrop-filter: none !important; }
}
.sh-hud-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--white);
}
.sh-hud-logo .dot { color: var(--yellow); }
.sh-hud-logo:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.sh-hud-sep { width: 1px; height: 22px; background: rgba(245, 245, 240, 0.2); flex: none; }
.sh-hud-bloc { display: flex; flex-direction: column; gap: 5px; min-width: 132px; }
.sh-hud-compte {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sh-hud-jauge-piste {
  height: 4px;
  border-radius: 2px;
  background: rgba(245, 245, 240, 0.2);
  overflow: hidden;
}
.sh-hud-jauge-barre {
  height: 100%;
  width: 0;
  background: var(--yellow);
  transition: width 420ms cubic-bezier(.16, 1, .3, 1);
}
.sh-hud-etat { font-size: 11px; color: rgba(245, 245, 240, 0.68); white-space: nowrap; }
.sh-hud-fin {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--black);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
}
.sh-hud-fin:hover { background: #fff; }
.sh-hud-fin:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sh-hud-fin[hidden] { display: none; }
/* Sur la fin de parcours, le compteur n'a plus rien a dire et le HUD se
   poserait sur le formulaire d'envoi. Il se reduit alors au seul logo, qui
   reste le retour vers le site a toute hauteur de page. */
.sh-hud { transition: padding 240ms ease, transform 240ms ease; }
.sh-hud.is-range { padding: 9px 16px; }
.sh-hud.is-range .sh-hud-sep,
.sh-hud.is-range .sh-hud-bloc,
.sh-hud.is-range .sh-hud-etat,
.sh-hud.is-range .sh-hud-fin { display: none; }

/* ---------- Fin de parcours ---------- */
.sh-bilan { padding: 96px 40px 60px; background: var(--black); }
.sh-bilan-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 30px; }
.sh-bilan h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.sh-bilan h2 .dot { color: var(--yellow); }
.sh-bilan-phrase { font-size: clamp(17px, 2.4vw, 22px); line-height: 1.55; max-width: 60ch; }
.sh-bilan-phrase strong { color: var(--yellow); font-weight: 600; }
/* auto-fit : avec deux styles retenus seulement, les cartes remplissent la
   rangee au lieu de laisser un trou a droite. */
.sh-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; list-style: none; }
.sh-podium-carte {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #101018;
  display: flex;
  flex-direction: column;
}
/* Le rapport de la boite de dessin de la vignette (1440 x 900), c'est-a-dire
   l'ecran de bureau sur lequel les univers sont verifies : la vignette montre
   exactement ce qu'un visiteur a vu. */
.sh-podium-visuel { aspect-ratio: 1440 / 900; display: flex; overflow: hidden; position: relative; }
.sh-podium-visuel span { flex: 1; }
/* Vignette : la maquette de l'univers, recopiee a sa taille de dessin puis
   reduite a la largeur de la carte. Le texte n'y est plus lisible, c'est
   voulu : on reconnait une mise en page, pas on ne la relit pas. */
.sh-mini { position: absolute; inset: 0; overflow: hidden; }
/* La boite est positionnee : c'est elle qui donne ses reperes a la maquette,
   posee en absolu. Sans cela la maquette se cale sur la carte du podium et sa
   mise en page se replie sur elle-meme. */
.sh-mini-boite { position: relative; transform-origin: top left; flex: none; }
.sh-mini .sh-maquette {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  container-name: maquette;
  /* Une vignette n'a ni fiche ni HUD par-dessus : aucune reserve a garder. */
  --sh-reserve-bas: 0px;
  --sh-reserve-haut: 0px;
  --sh-reserve-droite: 0px;
}
.sh-podium-corps { padding: 14px 16px 16px; display: grid; gap: 6px; }
.sh-podium-rang {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--yellow);
}
.sh-podium-nom { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; }
.sh-podium-note { font-size: 13.5px; color: rgba(245, 245, 240, 0.7); line-height: 1.5; }
.sh-podium-lien {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  justify-self: start;
}
.sh-podium-lien:hover { color: var(--white); }
.sh-podium-lien:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sh-conseil {
  border-left: 3px solid var(--yellow);
  padding: 4px 0 4px 18px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
}

.sh-envoi { display: grid; gap: 14px; max-width: 560px; }
.sh-envoi label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 245, 240, 0.6); }
.sh-envoi input, .sh-envoi textarea {
  width: 100%;
  background: #101018;
  border: 1px solid rgba(245, 245, 240, 0.2);
  border-radius: 3px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  padding: 13px 14px;
}
.sh-envoi input:focus-visible, .sh-envoi textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.sh-envoi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sh-envoi-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sh-bouton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  padding: 14px 24px;
  border-radius: 3px;
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: var(--black);
  cursor: pointer;
  min-height: 46px;
}
.sh-bouton:hover { background: #fff; border-color: #fff; }
.sh-bouton--creux { background: transparent; color: var(--white); border-color: rgba(245, 245, 240, 0.32); }
.sh-bouton--creux:hover { background: rgba(245, 245, 240, 0.1); border-color: var(--white); color: var(--white); }
.sh-bouton:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sh-message { font-size: 14.5px; line-height: 1.55; }
.sh-message[data-ton="ok"] { color: #7BE3A8; }
.sh-message[data-ton="ko"] { color: #FF9A8A; }

/* ---------- Grille de tous les styles ---------- */
/* ---------- Continuer a explorer ---------- */
/* Le bloc de rallonge occupe un ecran entier, comme un univers : il ferme le
   parcours sans le couper, et la piste garde son rythme. */
.sh-rallonge {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px calc(96px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: var(--black);
}
.sh-rallonge-titre {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.1;
  color: var(--white, #F5F5F0);
}
.sh-rallonge-texte {
  margin: 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.72);
}
.sh-rallonge-bouton {
  margin-top: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow, #FFE600);
  color: #141414;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.sh-rallonge-bouton:hover { filter: brightness(1.08); }
.sh-rallonge-bouton:focus-visible { outline: 3px solid #FFF; outline-offset: 3px; }

/* ---------- Filtres de la grille ---------- */
.sh-nojs .sh-filtres, .sh-nojs .sh-carte-saut { display: none; }
.sh-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  margin-bottom: 24px;
}
.sh-filtres-niveaux { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-filtre {
  padding: 8px 16px;
  border: 1px solid rgba(245, 245, 240, 0.26);
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 245, 240, 0.82);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.sh-filtre:hover { border-color: rgba(245, 245, 240, 0.5); }
.sh-filtre.is-actif {
  background: var(--yellow, #FFE600);
  border-color: var(--yellow, #FFE600);
  color: #141414;
  font-weight: 700;
}
.sh-filtre:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }

.sh-filtres-champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; }
.sh-filtres-champ span { font-size: 14px; color: rgba(245, 245, 240, 0.6); }
.sh-filtres-champ input {
  padding: 9px 14px;
  border: 1px solid rgba(245, 245, 240, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #F5F5F0;
  font: inherit;
  font-size: 16px;
}
.sh-filtres-champ input:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }
.sh-filtres-compte { margin: 0; font-size: 14px; color: rgba(245, 245, 240, 0.6); }
.sh-grille-vide { color: rgba(245, 245, 240, 0.7); font-size: 15px; }

.sh-carte-niveau {
  margin: 2px 0 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow, #FFE600);
}
.sh-carte-saut {
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid rgba(245, 245, 240, 0.3);
  border-radius: 999px;
  background: transparent;
  color: #F5F5F0;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.sh-carte-saut:hover { border-color: var(--yellow, #FFE600); color: var(--yellow, #FFE600); }
.sh-carte-saut:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }

.sh-grille-section { padding: 20px 40px 96px; background: var(--black); }
.sh-grille-inner { max-width: 1100px; margin: 0 auto; }
.sh-grille-titre {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.sh-grille-lede { color: rgba(245, 245, 240, 0.7); font-size: 15px; margin-bottom: 26px; max-width: 60ch; }
.sh-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
  list-style: none;
}
/* La carte pose display: grid, qui l'emporte sur le display: none que le
   navigateur attache a [hidden]. Le filtre serait donc sans effet. */
.sh-carte[hidden] { display: none; }
.sh-carte {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 16px 18px;
  background: #101018;
  display: grid;
  gap: 8px;
  align-content: start;
}
.sh-carte h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; }
.sh-carte p { font-size: 13.5px; line-height: 1.5; color: rgba(245, 245, 240, 0.72); }
.sh-carte-meta { font-size: 12px; color: rgba(245, 245, 240, 0.55); }
.sh-carte .sh-pastilles { padding-top: 2px; }

/* ---------- Transitions d'entree ---------- */
/* Courtes et sans JS d'animation : un volet qui se retire et la fiche qui
   monte. Elles ne portent aucune information, elles sont donc coupees net
   par prefers-reduced-motion. */
/* Pas de will-change ici : la boite de maquette porte deja une reduction
   d'echelle permanente. Promue en couche a part, Chrome la rasterise en
   tuiles et laisse voir les jointures, une grille de traits clairs bien
   visible sur les aplats sombres. La transition d'entree dure 400 ms et ne
   demande pas cette optimisation. */
.sh-univers:not(.is-in) .sh-maquette { opacity: 0; }
.sh-univers:not(.is-in) .sh-fiche { opacity: 0; transform: translateY(14px); }
.sh-univers.is-in .sh-maquette {
  opacity: 1;
  transition: opacity 360ms ease;
}
.sh-univers.is-in .sh-fiche {
  opacity: 1;
  transform: none;
  transition: opacity 320ms ease 90ms, transform 420ms cubic-bezier(.16, 1, .3, 1) 90ms;
}
/* Repli sans JS : le moteur pose .sh-anime sur la piste au demarrage. Sans
   lui, rien ne doit rester invisible. */
.sh-piste:not(.sh-anime) .sh-univers .sh-maquette { opacity: 1; }
.sh-piste:not(.sh-anime) .sh-univers .sh-fiche { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sh-univers .sh-maquette { opacity: 1 !important; transition: none !important; }
  .sh-univers .sh-fiche {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sh-univers,
  .sh-hud,
  .sh-hud-jauge-barre,
  .sh-vote,
  .sh-bouton,
  .sh-start { transition: none; }
}

/* ---------- Sans JavaScript ---------- */
.sh-sansjs { display: none; }
.sh-nojs .sh-sansjs { display: block; }
.sh-nojs .sh-piste, .sh-nojs .sh-hud, .sh-nojs .sh-bilan, .sh-nojs .sh-start { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .sh-intro { padding: 40px 20px 56px; min-height: 0; gap: 18px; }
  /* En telephone la barre passe sur deux lignes : le nom et le bouton de
     detail au-dessus, les trois votes en dessous, sur toute la largeur. */
  .sh-fiche { left: 10px; right: 10px; bottom: 10px; }
  .sh-fiche-barre {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
    border-radius: 20px;
  }
  .sh-fiche-rang { order: 1; font-size: 10px; letter-spacing: 0.12em; }
  .sh-fiche h2 { order: 2; flex: 1 1 auto; font-size: 17px; }
  .sh-detail { order: 3; padding: 8px 13px; min-height: 38px; font-size: 12px; }
  .sh-votes { order: 4; flex: 1 0 100%; }
  .sh-vote { flex: 1; padding: 11px 6px; font-size: 12.5px; }
  .sh-fiche-detail { max-height: 52svh; padding: 14px 14px 13px; }
  .sh-maquette { --sh-reserve-bas: 118px; --sh-reserve-haut: 52px; }
  /* Le HUD passe en haut : en bas il se poserait sur la feuille. */
  .sh-hud {
    top: 10px;
    bottom: auto;
    gap: 11px;
    padding: 7px 7px 7px 13px;
  }
  .sh-hud.is-range { transform: translate(-50%, -14px); }
  .sh-hud-logo { font-size: 17px; }
  .sh-hud-bloc { min-width: 104px; }
  .sh-hud-etat { display: none; }
  .sh-bilan { padding: 56px 20px 40px; }
  .sh-podium { grid-template-columns: 1fr; }
  .sh-rallonge { gap: 12px; padding: 32px 20px 120px; }
  .sh-rallonge-texte { font-size: 15px; }
  .sh-filtres { gap: 12px; margin-bottom: 18px; }
  .sh-filtre { padding: 7px 13px; font-size: 14px; }
  .sh-grille-section { padding: 10px 20px 72px; }
  .sh-envoi-duo { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .sh-vote { font-size: 12px; padding: 12px 4px; }
  .sh-vote--bof { flex: 0 0 58px; }
}

/* ---------- Apercus du bilan et de la grille ---------- */
/* Une vignette reelle de l'univers, pas une bande de couleur : c'est la
   structure qui distingue un style, pas sa palette. */
.sh-podium-img,
.sh-carte-vignette img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
  background: #14141c;
}
.sh-podium-visuel { overflow: hidden; border-radius: 3px; }
.sh-carte-vignette {
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.sh-podium-vide {
  margin: 0 0 18px;
  color: rgba(245, 245, 240, 0.78);
  font-size: 15px;
  line-height: 1.6;
  max-width: 54ch;
}