/* ══════════════════════════════════════════════════════════════════════════
   vitrine.css — vitrine-marker (12/09/2026)
   « la présentation de l'accueil de Vision est bonne, il faut la calquer à
     toutes les catégories du site »

   Ce fichier porte les DEUX moitiés de cette présentation, telles qu'elles
   existent côté Vision (app/page.tsx, components/hub-slider.tsx) :

     1. LA VITRINE — un bandeau plein écran en tête de page, qui passe SOUS la
        barre Cizi (transparente) et que le contenu vient recouvrir aux 58 % de
        la hauteur. Côté Vision c'est le média mis en avant ; ici, où il n'y a
        rien à mettre en avant, c'est le logo de la catégorie et un mot qui
        annonce la suite.

     2. LA BOÎTE — le contenu conserve sa propre présentation (les icônes de
        l'accueil cizi.fr pour les jeux et les cartes, les panneaux pour les
        outils) : c'est la MISE EN PAGE de Vision qu'on calque, pas ses
        carrousels. Un premier jet les avait portés ici ; retiré le soir même,
        « la page des jeux doit être gérée comme la page d'accueil de cizi pour
        les icônes ».

   Les valeurs chiffrées viennent de Vision, pas d'un choix nouveau :
     · 100svh pour le bandeau         (hero-hauteur-marker)
     · -42svh pour la remontée         (hubs-depart-marker : le contenu commence
       donc à 58 % de la hauteur d'écran)
     · --cizi-contenu-max pour la boîte (marges-accueil-marker, 1280 px)
     · 72px de voile flouté à 3px      (voile-flou-marker)
   Changer le départ du contenu = changer LE SEUL nombre -42svh ci-dessous.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── LA VITRINE ─────────────────────────── */

.cizi-vitrine {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100svh;
  /* Remonte sous la barre : base.css pose body{padding-top:var(--topbar-h)},
     la barre étant fixe et transparente. Même geste que hero-fullbleed-marker
     côté Vision. */
  margin-top: calc(-1 * var(--topbar-h, 56px));
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Fond : dégradé profond + halo aux couleurs du site. Aucune image à produire,
   et rien à charger — la vitrine s'affiche donc instantanément. */
.cizi-vitrine-fond {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(90, 105, 140, 0.30) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(90% 60% at 78% 82%, rgba(140, 90, 70, 0.22) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #12141a 0%, #0c0d11 55%, #0a0a0c 100%);
}

/* Dégradé du haut : la barre Cizi flotte par-dessus la vitrine, il lui faut un
   fond sombre pour rester lisible (même rôle que le dégradé de hero.tsx). */
.cizi-vitrine-fond::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Dégradé du bas : le contenu remonte par-dessus la vitrine, la jointure doit
   se fondre au lieu de se voir. */
.cizi-vitrine-fond::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.85) 65%, #0a0a0c 100%);
}

.cizi-vitrine-contenu {
  position: relative;
  z-index: 1;
  /* Aligné sur le premier tiers, comme le titre du média mis en avant côté
     Vision : le bas de l'écran est recouvert par le contenu. */
  align-self: start;
  margin-top: 22svh;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(680px, 92vw);
}

.cizi-vitrine-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  max-width: none;           /* cf. logo-cat-ecrase-marker */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.85));
  opacity: .95;
}

.cizi-vitrine-titre {
  margin: 0;
  font-family: var(--cizi-font-cartoon, inherit);
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1.05;
  color: rgba(245, 242, 235, 1);
  text-shadow: var(--cizi-text-outline, 0 2px 8px rgba(0, 0, 0, .9));
}

.cizi-vitrine-mot {
  margin: 0;
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.5;
  color: rgba(240, 235, 220, 0.72);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Étiquette « à venir » — dit sans ambiguïté que la place est réservée. */
.cizi-vitrine-bientot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 235, 220, 0.85);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.9);
}
.cizi-vitrine-bientot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0a245;
  box-shadow: 0 0 8px rgba(224, 162, 69, 0.9);
}

/* ─────────────── LE CONTENU QUI RECOUVRE LA VITRINE ─────────────── */

/* -42svh : le contenu commence à 58 % de la hauteur d'écran, exactement comme
   les carrousels de l'accueil Vision (hubs-depart-marker). UN SEUL nombre. */
/* ══════════════════════════════════════════════════════════════════════════
   plancher-vitrine-marker (13/09/2026) — BUG 20260913-210801
   « /jeux/ en 699 x 274 : le bouton Jouer est sous les vignettes. »

   LE COMMENTAIRE DU DESSUS SE VANTAIT D'UN SEUL NOMBRE, ET C'ÉTAIT LE DÉFAUT.
   -42svh dit « le contenu commence à 58 % de la hauteur », ce qui est juste
   tant que l'écran est haut. Sur un téléphone couché, 58 % de 274 px font
   159 px — alors que la plaque de la vitrine (logo, titre, phrase, bouton
   Jouer) en demande deux cents et finit à 272. Mesuré : 113 px de
   recouvrement, le bouton Jouer sous la grille des jeux.

   Un pourcentage n'a pas de plancher. On en ajoute un : la remontée ne peut
   jamais dépasser « toute la hauteur moins la place qu'il faut à la plaque ».
   C'est --vitrine-plancher, mesuré au banc et redescendu par palier quand la
   plaque elle-même se resserre (blocs paysage en fin de fichier).

   max() et non min() : sur des nombres négatifs, c'est max() qui rend le moins
   négatif, donc la remontée la plus PRUDENTE. L'inverse aggraverait le
   recouvrement au lieu de le supprimer. */
.cizi-apres-vitrine {
  --vitrine-plancher: 424px;
  position: relative;
  z-index: 1;
  margin-top: max(-42svh, calc(-1 * (100svh - var(--vitrine-plancher))));
  isolation: isolate;         /* cf. voile ci-dessous */
}

/* La page qui porte une vitrine ne doit pas garder le padding du haut : c'est
   la vitrine qui occupe cette place. */
body.a-vitrine { padding-top: 0; }

/* Le bandeau flouté du haut, repris de voile-flou-marker : il ne s'allume
   qu'une fois la vitrine entièrement défilée, sinon il assombrirait l'image
   qu'il est censé laisser nette. La classe est posée par scripts/vitrine.js. */
.cizi-voile {
  pointer-events: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: 72px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: linear-gradient(to bottom, #0a0a0c 0%, rgba(10, 10, 12, 0.55) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.cizi-voile.is-on { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   jeux-fiches-marker (12/09/2026) — LA VITRINE À CONTENU
   « adapte les éléments mis en avant en conséquence »

   Quand une catégorie a de quoi mettre en avant (les jeux, depuis qu'ils ont
   un genre et un résumé), la vitrine cesse d'annoncer et se met à montrer :
   un diaporama de fiches, sur le modèle du média mis en avant de l'accueil
   Vision. Les diapos sont empilées en couches absolues et seule l'active est à
   opacité 1 — c'est le crossfade-stack de Vision, mot pour mot, y compris ses
   4,5 s de fondu.

   La contrainte de hauteur commande tout le reste : le contenu de la page vient
   recouvrir la vitrine à -42svh, soit un peu après la moitié de l'écran. Le
   texte de la diapo doit donc tenir AU-DESSUS de cette ligne. D'où le départ à
   12svh et le résumé borné à trois lignes (deux sur téléphone).
   ══════════════════════════════════════════════════════════════════════════ */

.vit-diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 4500ms ease-in-out;
  z-index: 1;
}
.vit-diapo.is-active { opacity: 1; pointer-events: auto; z-index: 2; }

/* fond-vignette-retire-marker (20/09/2026) — CES RÈGLES NE S'APPLIQUENT PLUS À
   RIEN sur /jeux : l'image qu'elles habillaient a été retirée du gabarit (une
   vignette de 110 px agrandie douze fois ne donnait pas une ambiance mais une
   bouillie). Elles restent pour le jour où le catalogue aura de vraies images
   — remettre la balise dans gabarits/vitrine-jeux.php suffira.

   Le fond : la vignette agrandie, floutée, assombrie. object-fit:cover pour
   qu'elle remplisse sans se déformer ; scale(1.1) pour que le flou ne laisse
   pas voir les bords adoucis de l'image. */
.vit-diapo-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.1);
  filter: blur(26px) saturate(1.15) brightness(.55);
  opacity: .85;
}
/* Le même dégradé de raccord que la vitrine générique, par-dessus le fond. */
.cizi-vitrine-media .vit-diapo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, 0) 28%),
    linear-gradient(180deg, rgba(10, 10, 12, 0) 45%, rgba(10, 10, 12, .88) 78%, #0a0a0c 100%);
  pointer-events: none;
}

.vit-diapo-corps {
  position: absolute;
  z-index: 1;
  /* 18svh et non 12 : la vitrine commence à -56 px (elle passe sous la barre
     Cizi), donc tout ce qu'elle contient est remonté d'autant. Mesuré à 800 px
     de haut, 12svh plaçait l'étiquette de genre à 58 px de l'écran, collée à la
     barre, et laissait un grand vide entre le bouton « Jouer » et la ligne où
     le contenu de la page remonte. 18svh recentre le bloc dans la moitié haute
     sans jamais le faire passer sous cette ligne (vérifié à 390 et 1280 px). */
  top: 18svh;
  left: 0;
  right: 0;
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.vit-diapo-vignette {
  width: min(110px, 14svh);
  height: min(110px, 14svh);
  max-width: none;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .18);
}

.vit-diapo-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: min(640px, 90vw);
}

.vit-diapo-genre {
  padding: 4px 12px;
  border-radius: 999px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240, 235, 220, .9);
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .28);
}

/* Le corps de la diapo doit tenir AU-DESSUS de la ligne où le contenu de la
   page remonte, soit 38 % de la hauteur d'écran (0,58 svh pour la ligne, moins
   les 0,20 svh du départ). Les tailles sont donc bornées par la HAUTEUR autant
   que par la largeur : un écran de 1280x800 est large mais court, et c'est
   exactement là que le bloc débordait au banc d'essai avec le plus long titre
   et le plus long résumé du catalogue. Le titre est limité à deux lignes pour
   la même raison. */
.vit-diapo-titre {
  margin: 0;
  font-family: var(--cizi-font-cartoon, inherit);
  font-size: clamp(26px, min(6.2vw, 4.4svh), 48px);
  line-height: 1.05;
  color: rgba(245, 242, 235, 1);
  text-shadow: var(--cizi-text-outline, 0 2px 8px rgba(0, 0, 0, .9));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* descriptions-doublees-marker (20/09/2026) — « il faut doubler le nombre de
   caractères des descriptions des suggestions ». Chaque palier de ce fichier
   voit donc son nombre de lignes doublé : 3→6, 2→4, 1→2. Le palier le plus
   serré (paysage sous 420 px) garde `display:none` — doubler zéro fait zéro,
   et la place n'y existe toujours pas.
   LA PLACE VIENT DU BOUTON QUI PART. « Jouer » vivait sous la description et
   lui prenait sa hauteur ; il est descendu dans la barre fixe du bas
   (barre-suggestion-marker), et le résumé hérite de ce qu'il occupait. Les
   seuils mesurés ci-dessous, eux, restaient calculés AVEC le bouton : ils ont
   donc maintenant de la marge, pas moins. */
/* description-cliquable-marker (20/09/2026) — le résumé est maintenant une
   balise <a>. Sans ces trois lignes, il hériterait de la couleur et du
   soulignement des liens du site, et ne ressemblerait plus à un résumé.
   `display:-webkit-box` juste en dessous le garde en bloc malgré <a>. */
.vit-diapo-desc {
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease;
  margin: 0;
  font-size: clamp(13px, min(3.4vw, 2.1svh), 17px);
  line-height: 1.5;
  color: rgba(245, 242, 235, .92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vit-diapo-desc:hover { color: #fff; }

.vit-diapo-jouer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, .8);
  border: 1px solid rgba(255, 255, 255, .45);
  /* Les trois traits empilés des boutons de la fiche média (cf.
     lisibilite-boutons-marker) : sur une image mouvante, un bord unique se
     confond tantôt avec le clair, tantôt avec le sombre. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20), 0 0 0 1px rgba(0, 0, 0, .92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  transition: background .2s, transform .15s;
}
.vit-diapo-jouer:hover { background: rgba(0, 0, 0, .92); transform: scale(1.04); }
.vit-diapo-jouer svg { width: 18px; height: 18px; }

/* ─── Navigation : flèches au survol sur PC, glissement au doigt sur téléphone
       (mêmes règles qu'à l'accueil Vision, fleches-suggestions-marker). ─── */
.vit-fleche {
  position: absolute;
  z-index: 5;
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.vit-fleche:hover { background: rgba(0, 0, 0, .7); color: #fff; }
.vit-fleche svg { width: 28px; height: 28px; }
.vit-fleche-g { left: 8px; top: 38svh; }
.vit-fleche-d { right: 8px; top: 38svh; }
/* 20svh et non 12 : la vitrine passant sous la barre Cizi, tout ce qu'elle
   contient est remonté de 56 px. À 12svh, sur un téléphone de 643 px de haut,
   ce bouton se retrouvait collé au bouton plein écran de la barre. */
/* relance-retiree-marker (20/09/2026) — le bouton « autres jeux » a quitté le
   gabarit, comme il avait quitté Vision le 13/09. Ces trois règles sont
   dormantes ; elles décrivent encore où il se posait. */
.vit-relance { right: 8px; top: 20svh; width: 40px; height: 40px; }
.vit-relance svg { width: 20px; height: 20px; }

@media (hover: hover) and (min-width: 768px) {
  .cizi-vitrine-media .vit-fleche { display: grid; }
  .cizi-vitrine-media:hover .vit-fleche,
  .vit-fleche:focus-visible { opacity: 1; }
}
/* Le bouton « autres jeux » reste atteignable sur téléphone : il n'a pas de
   geste équivalent, contrairement aux flèches que le glissement remplace. */
@media (max-width: 767px) {
  .cizi-vitrine-media .vit-relance { display: grid; opacity: .55; }
}

/* Indicateur de pause (tap pour reprendre), comme à l'accueil Vision. */
.vit-pause {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  place-items: center;
  pointer-events: none;
}
/* pause-au-clic-retiree-marker (20/09/2026) — la classe `est-en-pause` n'est
   plus posée par personne : le tap qui la déclenchait a été retiré. La règle
   reste, inerte, et avec elle le dessin du ⏸ : c'est le point d'accroche si tu
   veux un jour une vraie pause, sur un bouton nommé. */
.cizi-vitrine-media.est-en-pause .vit-pause { display: grid; }
.vit-pause svg {
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .4);
  border-radius: 50%;
  padding: 15px;
  box-sizing: content-box;
}

@media (min-width: 768px) {
  .vit-diapo-corps {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 28px;
    top: 20svh;
  }
  .vit-diapo-vignette { width: min(170px, 22svh); height: min(170px, 22svh); border-radius: 30px; }
  .vit-diapo-texte { align-items: flex-start; }
}
/* Écran COURT (et non étroit : c'est la hauteur qui commande ici) — deux lignes
   de résumé au lieu de trois, sinon le bouton « Jouer » passe sous la ligne où
   le contenu de la page recouvre la vitrine. Seuil mesuré, pas choisi : à
   900 px de haut, le pire cas du catalogue (« Henry Stickmin Stealing The
   Diamond » avec le plus long résumé) passait encore ; en dessous, non. */
@media (max-height: 900px) {
  .vit-diapo-desc { -webkit-line-clamp: 4; }
}
/* Écran court en portrait — le cas de ton téléphone (360x643). Plutôt que de
   sacrifier le résumé, on récupère la place sur la VIGNETTE : elle passe de 110
   à 70 px, ce qui rend 40 px, alors que la deuxième ligne de résumé n'en coûte
   que 21. L'image reste là (c'est le fond flouté qui porte l'ambiance de toute
   façon), et le texte garde de quoi dire quelque chose.
   Mesuré avec le plus long titre et le plus long résumé du catalogue : 28 px de
   marge sous le bouton « Jouer » à 360x640. */
@media (max-height: 700px) {
  .vit-diapo-desc { -webkit-line-clamp: 4; }
  .vit-diapo-vignette { width: 70px; height: 70px; border-radius: 16px; }
  .vit-diapo-corps { gap: 10px; }
  .vit-diapo-texte { gap: 6px; }
}
/* Très court (un vieux téléphone de 568 px, un paysage serré) : l'étiquette de
   genre s'efface. Elle coûtait les 9 px qui manquaient au pire cas sur un écran
   de 320x568, et c'est l'élément le moins utile des quatre — le genre reste
   lisible dans la grille et sur la fiche du jeu. */
@media (max-height: 620px) {
  .vit-diapo-genre { display: none; }
  .vit-diapo-desc { -webkit-line-clamp: 2; }
  .vit-diapo-vignette { width: 60px; height: 60px; }
}
/* plancher-vitrine-marker (13/09/2026) — BUG 20260913-210801.
   Le palier ci-dessus s'arrête à 620 px ; à 274 il ne suffit plus. Mesuré sur
   /jeux/ en 699 x 274 APRÈS le plancher posé plus haut : le bouton « Jouer »
   finissait encore 59 px sous la ligne où la grille des jeux recouvre la
   vitrine. La plaque du diaporama se resserre donc à son tour — le résumé
   disparaît (une ligne de texte de 12 px pour un écran haut comme trois
   lignes, ce n'était plus une information, c'était un obstacle), la vignette
   et le titre rapetissent, et le plancher de la remontée se règle sur ce qui
   reste. */
@media (orientation: landscape) and (max-height: 420px) {
  .vit-diapo-desc { display: none; }
  .vit-diapo-vignette { width: 44px; height: 44px; }
  .vit-diapo-titre { font-size: clamp(20px, min(4.4vw, 9svh), 30px); }
  .vit-diapo-texte { gap: 4px; }
  .vit-diapo-jouer { margin-top: 0; padding: 6px 16px; font-size: 13px; }
  .cizi-apres-vitrine { --vitrine-plancher: 186px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   vitrine-accueil-marker (13/09/2026) — LA VITRINE DE L'ACCUEIL CIZI.FR
   « ne pas mettre de fond d'élément mis en avant. Pour le moment, se contenter
     de la cizi_mir.gif en taille réelle. La barre de recherche doit être avant
     scroll à la moitié de la hauteur de la page. »
   ══════════════════════════════════════════════════════════════════════════ */

/* NUE : ni fond, ni dégradés de raccord. Le fond du site (body::before, un GIF
   fixé) reste visible d'un bout à l'autre de la page, ce qui était la demande.
   Les dégradés existaient pour fondre la vitrine dans le contenu qui la
   recouvre ; sans fond à fondre, ils ne feraient qu'assombrir l'image. */
.cizi-vitrine--nue { background: none; }
.cizi-vitrine--nue .cizi-vitrine-fond,
.cizi-vitrine--nue .cizi-vitrine-fond::before,
.cizi-vitrine--nue .cizi-vitrine-fond::after { display: none; }

/* HAUTEUR. La vitrine démarre sous la barre Cizi (margin-top négatif) : pour
   que son bas tombe à la hauteur voulue, il lui faut donc cette hauteur PLUS
   celle de la barre. Le contenu suit sans marge négative — c'est la seule
   vitrine du site qui n'est pas recouverte, justement parce que la recherche
   doit être visible en entier, pas à moitié sous le logo.

   hauteur-recherche-marker (13/09/2026) — « le champ de recherche doit
   apparaître un peu plus haut dans la page ». LE réglage, et le seul : c'est
   la hauteur d'écran à laquelle le CENTRE du champ se pose.
     50svh — au milieu pile, la demande du 13/09 au matin
     42svh — un peu plus haut, valeur courante
   Monter ce nombre redescend le champ, le baisser le remonte. Rien d'autre à
   toucher : le rattrapage d'un demi-champ juste dessous suit tout seul. */
:root { --accueil-recherche: 42svh; }

.cizi-vitrine--accueil {
  height: calc(var(--accueil-recherche) + var(--topbar-h, 56px));
}
.cizi-apres-vitrine--accueil {
  /* La moitié de la hauteur du champ de recherche. La consigne est que la
     barre soit À la moitié de la hauteur, pas qu'elle commence à la moitié :
     elle chevauche donc la ligne médiane, son centre dessus.
     Ce nombre suit la hauteur du champ, et lui seul :
       39 px (champ nu)        → -20   [12/09]
       47 px (capsule, 13/09)  → -24   ← valeur courante
     recherche-harmonieuse-marker a épaissi la capsule de huit pixels ; sans ce
     rattrapage le centre tombait quatre pixels sous la ligne médiane (relevé
     au banc : 426 pour un milieu à 422). */
  margin-top: -24px;
}

/* logo-accueil-marker — « réduire un peu la taille du logo » (13/09 matin),
   puis BUG 20260913-123540 : « il faut maximiser la taille du gros cizi.fr à
   60 % maximum de l'écran ».

   Donc : 60 % de la largeur de l'écran, MAIS jamais au-delà des 400 px du
   fichier. Le GIF fait 400 x 145 ; l'étirer à 60 % d'un écran de 1920 (1152 px)
   le rendrait flou, et une image floue au milieu de l'accueil se voit plus
   qu'une image un peu petite. C'est le choix que tu as retenu quand je t'ai
   posé la question.
   Concrètement : 216 px sur un téléphone de 360, 400 px dès 667 px de large.
   Le jour où tu regénères cizi_mir.gif en 1200 px, il suffit de monter le
   second terme du min() et le logo grandira tout seul sur les grands écrans.

   Ça ne déplace PAS la barre de recherche : la vitrine mesure --accueil-recherche
   quoi qu'elle contienne, le logo est simplement plus petit à l'intérieur. */
:root { --logo-accueil: min(60vw, 400px); }
.cizi-vitrine-gif {
  width: var(--logo-accueil);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .85));
}

/* champ-120-marker (13/09/2026) — « le champ de recherche ne peut excéder
   120 % de la largeur du gros logo cizi.fr ».
   Une contrainte de composition, pas un réglage : le champ est désormais lié au
   logo, et suivra tout seul si le logo change de taille — c'est pour ça que la
   largeur du logo est passée en variable juste au-dessus.
   Elle ne vaut QUE sur l'accueil : ailleurs (le panneau de la loupe) il n'y a
   pas de gros logo auquel se mesurer. */
body.a-vitrine .accueil-banner-search .search-wrap {
  max-width: calc(var(--logo-accueil) * 1.2);
  margin-left: auto;
  margin-right: auto;
}

/* La recherche de l'accueil perd son grand rembourrage haut : c'est la vitrine
   qui fait la place au-dessus, désormais. Le trait pointillé du bas reste, il
   sépare la recherche des icônes. */
body.a-vitrine .accueil-banner-search { padding-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   marque-geante-marker (13/09/2026)
   « il ne faut faire apparaître le cizi.fr de la barre cizi que lorsque le gros
     logo cizi disparaît de l'écran au scroll. »

   Le logotype de la barre est masqué tant que le gros logo est visible, et
   revient quand il sort par le haut. La bascule est portée par une classe sur
   <body>, posée par scripts/vitrine.js à l'aide d'un IntersectionObserver — pas
   d'un calcul de position au défilement, qui aurait été refait à chaque pixel.

   Le fondu est là pour que l'apparition ne se remarque pas comme un saut ;
   visibility suit l'opacité pour que le bouton ne soit pas cliquable pendant
   qu'il est invisible. */
body.marque-en-vitrine .topbar-marque {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.topbar-marque {
  transition: opacity .25s ease, visibility 0s linear 0s, filter .2s, transform .2s;
}

/* Le gros logo devient le bouton du menu tant que celui de la barre est
   masqué : pas de cadre, pas de fond — c'est le logo, rien autour. */
.marque-geante {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  display: block;
  transition: filter .2s, transform .2s;
}
.marque-geante:hover {
  filter: drop-shadow(0 0 14px rgba(240, 235, 220, .55));
  transform: scale(1.02);
}


/* ══════════════════════════════════════════════════════════════════════════
   fond-vitrine-jeux-marker (13/09/2026) — BUG 20260913-124542
   « pas de fond d'écran sur le menu de suggestion des jeux. La transition avec
     le fond de la page est horrible. »

   CE QUI SE PASSAIT. La vitrine à contenu empilait deux couches OPAQUES sur
   toute sa hauteur : le fond générique (.cizi-vitrine-fond, un dégradé qui
   finit sur #0a0a0c) et la vignette agrandie et floutée du jeu mis en avant.
   Le papier peint du site — le GIF posé par body::before — était donc caché
   d'un bord à l'autre. Puis, à -42svh, le contenu de la page reprenait, sans
   fond à lui : le papier peint réapparaissait d'un coup. D'où la couture : du
   noir plein qui devient une image, sur une ligne nette.

   CE QU'ON FAIT. Les deux couches de fond s'effacent progressivement vers le
   bas au lieu de s'arrêter net, et le fond générique ne peint plus son aplat
   sous la vitrine à contenu. Le papier peint traverse donc la couture, et le
   raccord se fait en fondu sur un quart de la hauteur.

   Le masque porte sur les COUCHES DE FOND seulement, jamais sur .vit-diapo-corps
   qui porte le titre, le résumé et le bouton « Jouer » : masquer la section
   entière les aurait délavés eux aussi, alors qu'ils vivent précisément dans la
   zone où le fondu commence.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Plus d'aplat sous la vitrine à contenu. Il ne reste qu'un voile sombre en
      haut, celui qui garde la barre Cizi lisible par-dessus une image claire. */
.cizi-vitrine-media .cizi-vitrine-fond {
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 38%);
}
.cizi-vitrine-media .cizi-vitrine-fond::after { display: none; }

/* 2. La vignette floutée s'efface vers le bas. 54 % : le bouton « Jouer » est
      au-dessus, le fondu ne le touche pas. */
.cizi-vitrine-media .vit-diapo-fond {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, .35) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, .35) 82%, transparent 100%);
}

/* 3. Le dégradé de lisibilité ne finit plus sur un noir plein : il assombrit le
      milieu, là où se lit le texte, puis se retire. */
.cizi-vitrine-media .vit-diapo::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(180deg, rgba(10, 10, 12, 0) 38%, rgba(10, 10, 12, .62) 68%, rgba(10, 10, 12, 0) 100%);
}


/* ══════════════════════════════════════════════════════════════════════════
   paysage-court-marker (13/09/2026) — BUG 20260913-134522
   « en paysage sur smartphone, regarde le désastre »  (relevé : 699 x 274)

   274 px de haut, c'est moins que la hauteur du seul groupe joystick sur ses
   réglages de portrait. Tout ce qui est calé en pourcentage d'écran devient
   minuscule, et tout ce qui est calé en pixels devient énorme : le gros logo
   faisait 60 % de 699 px de LARGE dans 274 px de haut, la vitrine 42 % de
   274 = 115 px, et le joystick en occupait 129 à lui seul.

   Ce bloc ne s'applique qu'aux écrans couchés ET bas — un PC en 1280x800 est
   couché aussi, mais il a la hauteur. Trois réglages seulement :
     le logo se mesure sur la LARGEUR, la seule dimension qui reste généreuse ;
     la recherche redescend au milieu, il n'y a plus de place à gagner en haut ;
     le joystick rétrécit d'un tiers et se recolle au bord.
   ══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 480px) {
  :root {
    /* Second passage : 52svh mettait encore les icônes sous la ligne de
       flottaison — « c'est beaucoup mieux, mais les icônes sont trop basses,
       à mettre bien plus haut dans le contexte TV ». À 274 px de haut, chaque
       point de pourcentage coûte moins de trois pixels : il fallait descendre
       franchement. 30 % de 274 = 82 px, la recherche se pose donc juste sous
       le logo et la première rangée d'icônes passe au-dessus du pli. */
    --accueil-recherche: 36svh;
    --joy-taille: 46px;
    --joy-couronne: 108px;
    --joy-bas: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.cizi-bottom-player) {
    --joy-bas: calc(74px + env(safe-area-inset-bottom, 0px));
  }
  :root { --logo-accueil: min(24vw, 400px); }

  /* Et tout ce qui sépare le champ des icônes est resserré. Relevé au banc :
     la recherche finissait à 106 px et la première icône commençait à 242 —
     136 px de vide, faits du rembourrage bas de la bannière, de son trait
     pointillé, de sa marge et de la barre des modes. Aucun de ces espaces
     n'est faux en portrait ; ils sont simplement de trop quand il ne reste
     que 274 px de haut. */
  body.a-vitrine .accueil-banner-search {
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: none;
  }
  .affichage-modes { margin-top: 2px; }

  /* Les icônes rapetissent aussi : à six colonnes sur 699 px, une tuile fait
     130 px de haut et la première rangée ne tenait pas entre la recherche et
     le joystick. Dix colonnes, et elle passe. */
  .icons.mode-icones { gap: 10px; max-width: none; }
  .icons.mode-icones a {
    flex-basis: calc(10% - 10px);
    max-width: calc(10% - 10px);
  }
  /* La plaque de la vitrine générique tient sur moins de lignes.
     plancher-vitrine-marker — elle se resserre franchement ici : à 274 px de
     haut, chaque ligne coûte 5 % de l'écran. Le plancher de la remontée
     descend d'autant, sinon on garderait une réserve devenue inutile. */
  .cizi-vitrine-titre { font-size: clamp(20px, 4.5vw, 30px); }
  .cizi-vitrine-mot   { font-size: 12px; }
  .cizi-vitrine-logo  { max-height: 40px; }
  .cizi-vitrine-contenu { margin-top: max(16px, 10svh); gap: 8px; }
  .cizi-apres-vitrine { --vitrine-plancher: 196px; }
}


/* Et un cran de plus sous 320 px de haut — un téléphone couché, pas une TV.
   À cette hauteur, même resserré, le trio logo / recherche / première rangée
   ne tient pas : mesuré, il restait 21 px pour une tuile qui en demande 64.
   Le logo descend donc à 18 % de la largeur et la recherche remonte au tiers
   supérieur. C'est le dernier cran : en dessous, il faudrait choisir entre le
   logo et les icônes, et ce n'est pas à moi de trancher. */
@media (orientation: landscape) and (max-height: 320px) {
  /* plancher-vitrine-marker — la vitrine À CONTENU (le diaporama des jeux) a
     sa propre plaque, plus haute que la plaque générique : elle garde donc son
     plancher à elle. Mesuré à 699 x 274 : le bouton « Jouer » finit à 109, la
     grille commence à 116. Sept pixels, mais du bon côté. */
  .cizi-vitrine[data-vitrine-media] ~ .cizi-apres-vitrine { --vitrine-plancher: 172px; }

  /* plancher-vitrine-marker — dernier cran : la phrase d'accroche disparaît,
     il ne reste que le logo, le titre et le bouton. */
  .cizi-vitrine-mot { display: none; }
  .cizi-vitrine-logo { max-height: 34px; }
  .cizi-vitrine-contenu { margin-top: max(12px, 8svh); gap: 6px; }
  .cizi-apres-vitrine { --vitrine-plancher: 158px; }
  :root { --accueil-recherche: 28svh; }
  :root { --logo-accueil: min(18vw, 400px); }
  body.a-vitrine .accueil-banner-search { padding-bottom: 4px; }
  .icons.mode-icones { gap: 8px; }
  .icons.mode-icones a {
    flex-basis: calc(8.333% - 8px);
    max-width: calc(8.333% - 8px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   vitrine-spa-marker (19/09/2026) — « les éléments mis en avant doivent
   disparaître quand on clique sur un jeu ».

   Quand scripts/spa-nav.js retire la vitrine lors d'une navigation interne, le
   bloc de contenu reste — c'est lui qui porte le <main>, on ne peut pas le
   démonter sans déplacer la page sous les pieds de celui qui lit. Mais sa
   remontée négative n'a plus de sens : elle servait à faire chevaucher le
   contenu sur le bas de la vitrine, et il n'y a plus de vitrine. Sans cette
   règle, le contenu remonterait de 42 % de la hauteur d'écran et passerait
   derrière la barre.

   `display: contents` plutôt que `margin-top: 0` : neutraliser la seule marge
   laissait un écart de quarante pixels que la page n'a pas au chargement
   complet — la boîte du bloc subsistait, et les marges de ce qu'il contient ne
   se fondaient plus dans celle du <body> comme elles le font sans lui. Avec
   `contents`, la boîte disparaît de la mise en page et le <main> redevient
   enfant direct du <body> : on obtient AU PIXEL la page qu'on aurait en
   rechargeant. Mesuré, pas supposé.

   Ce que la règle emporte au passage — position, z-index, isolation — ne sert
   qu'à faire chevaucher le contenu sur la vitrine. Sans vitrine, rien à isoler.

   Le sélecteur suit la classe du <body>, la même que pose et retire spa-nav :
   une seule source de vérité pour les deux fichiers. */
body:not(.a-vitrine) .cizi-apres-vitrine { display: contents; }


/* ══════════════════════════════════════════════════════════════════════════
   barre-suggestion-marker (20/09/2026) — LA BARRE DU BAS DE LA VITRINE.

   « L'icône de lecture sera désormais fixe, avec le nom en bas de l'espace de
   suggestion, centré » — et le champ de recherche à droite du bouton.

   Position posée ici en `bottom` par défaut ; scripts/vitrine.js la recalcule
   à l'ouverture pour la descendre sur la ligne du titre de rangée quand il y
   en a un et qu'il n'y a pas de chevauchement. Le CSS donne donc la valeur de
   repli, pas la valeur finale — et la page est juste même si le script ne part
   pas.

   `max-width` et le nom en `min-width:0` : sans eux, un nom de jeu long
   pousserait le champ de recherche hors de l'écran au lieu de se tronquer.
   ══════════════════════════════════════════════════════════════════════════ */
.vit-barre {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 24px);
}
/* ══════════════════════════════════════════════════════════════════════════
   vignette-collee-marker (20/09/2026) — « le logo lecture est un peu trop gros,
   je veux qu'il soit désormais collé à la jaquette ».

   La vignette et le bouton forment UN groupe sans espacement interne : bord à
   bord, sans chevauchement. Le bouton passe de 52 à 40 px — il n'a plus besoin
   d'être gros pour exister, il s'appuie sur l'image.

   La vignette est en `object-fit: cover` et carrée : une affiche 2:3 et un
   avatar carré côte à côte auraient fait sauter la hauteur de la barre d'une
   suggestion à l'autre.
   ══════════════════════════════════════════════════════════════════════════ */
.vit-barre-groupe {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}
.vit-barre-vignette {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  max-width: none;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .2);
}
.vit-barre-jouer {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f2eb;
  color: #14141a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .18s ease;
}
.vit-barre-jouer:hover { transform: scale(1.08); }
.vit-barre-jouer svg { width: 20px; height: 20px; margin-left: 2px; display: block; }
.vit-barre-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(13px, 3.2vw, 16px);
  color: rgba(245, 242, 235, .96);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}
.vit-barre-rech {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .18s ease;
}
.vit-barre-rech:focus-within { border-color: rgba(255, 255, 255, .45); }
.vit-barre-rech svg { width: 16px; height: 16px; flex: 0 0 auto; color: rgba(245, 242, 235, .7); }
.vit-barre-rech input {
  width: 112px;
  border: 0;
  outline: 0;
  background: none;
  color: #f5f2eb;
  font: inherit;
  font-size: 14px;
}
.vit-barre-rech input::placeholder { color: rgba(245, 242, 235, .5); }
@media (min-width: 768px) { .vit-barre-rech input { width: 184px; } }
/* Sur un écran vraiment court, la barre se serre plutôt que de disparaître :
   c'est le seul chemin vers le jeu mis en avant depuis que « Jouer » a quitté
   la plaque de texte. */
@media (max-height: 620px) {
  .vit-barre { gap: 8px; bottom: 20px; }
  .vit-barre-jouer { width: 34px; height: 34px; }
  .vit-barre-jouer svg { width: 17px; height: 17px; }
  .vit-barre-vignette { width: 36px; height: 36px; border-radius: 10px; }
  .vit-barre-rech { height: 34px; padding: 0 10px; }
  .vit-barre-rech input { width: 88px; }
}

/* barre-suggestion-marker — l'accueil n'a ni bouton ni nom : la barre y est
   dans le FLUX du contenu de la vitrine (pas en absolu), sous le sous-titre. */
.vit-barre--nue {
  position: static;
  transform: none;
  margin-top: 18px;
  justify-content: center;
}