/* ══════════════════════════════════════════════════════════════════════════
   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 ─────────────────────────── */

/* vitrine-basse-marker — LA HAUTEUR PORTE UN NOM, parce qu'elle sert trois
   fois : la vitrine elle-même, la remontée du contenu qui la suit, et la
   hauteur à laquelle les flèches se centrent. Trois nombres indépendants, et
   c'est la demi-hauteur qui aurait décalé les deux autres — mesuré : barre de
   badges par-dessus le titre. */
.cizi-vitrine {
  position: relative;
  z-index: 0;
  width: 100%;
  /* vitrine-basse-marker (14/10/2026) — « le jeu mis en avant doit prendre 2
     fois moins de hauteur ». 50svh, donc, et un plancher : sous 320 px, la
     vignette, trois lignes de texte et la barre ne tiennent plus, et on
     recouperait ce qu'on vient de ranger. Sur un téléphone de 640, la
     vitrine passe de 640 à 320 px — la grille des jeux remonte d'autant et
     se voit sans défiler. */
  height: var(--vitrine-h);
  /* 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. */
/* ══════════════════════════════════════════════════════════════════════════
   vitrine-basse-marker (14/10/2026) — LA REMONTÉE SUIT LA VITRINE.

   Tout ce qui précède raisonnait en pourcentage de L'ÉCRAN : « le contenu
   commence à 58 % de la hauteur », avec un plancher pour les écrans bas. Ça
   tenait tant que la vitrine faisait tout l'écran — les deux étaient le même
   nombre. Elle en fait la moitié : la remontée de 42 % est devenue un
   recouvrement de 42 %, et la barre de badges s'est posée sur le titre.
   Mesuré, et visible sur la photo avant correction.

   On remonte donc d'une fraction de LA VITRINE, et plus de l'écran. Dix pour
   cent : assez pour que le dégradé du bas se fonde dans le contenu, trop peu
   pour recouvrir quoi que ce soit. Et c'est une proportion de la boîte
   qu'elle recouvre, donc elle ne peut pas déborder quand la boîte rétrécit —
   le plancher n'a plus de raison d'être.
   ══════════════════════════════════════════════════════════════════════════ */
.cizi-apres-vitrine {
  position: relative;
  z-index: 1;
  margin-top: calc(-0.1 * max(320px, 50svh));
  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;
  /* vitrine-basse-marker — SUR LE <body>, et non sur .cizi-vitrine : les
     flèches de défilement vivent en dehors d'elle, et une variable déclarée
     sur un élément ne descend pas chez ses voisins. Elles retombaient donc
     sur la valeur de repli et se plaçaient au bas de l'écran, par-dessus la
     grille des jeux. */
  --vitrine-h: max(320px, 50svh);
}

/* 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;
}

/* vitrine-basse-marker — LE BLOC EST UNE RANGÉE, PAS UNE COLONNE.
   Image à gauche, texte à droite : c'est ce qui divise la hauteur par deux
   sans rien retirer. Il est centré verticalement dans ce qui reste au-dessus
   de la barre, au lieu d'être posé à 18svh du haut — une position absolue
   calculée pour une vitrine de pleine page n'a plus de sens dans une demie. */
.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). */
  /* Deux fois la barre : la vitrine commence à -56 px (elle passe DERRIÈRE
     la barre Cizi), donc 56 px depuis son bord haut tombent pile sur la barre
     — l'étiquette de genre s'écrivait par-dessus « /Jeux ». */
  /* vitrine-sans-vide-marker (14/10/2026) — « il faudrait retirer l'espace
     vide entre la barre cizi et le jeu suggéré ».

     Le bloc était CENTRÉ entre la barre et la barre d'action : sur un écran
     haut, tout le surplus se partageait au-dessus et au-dessous, et c'est la
     moitié du haut qu'on voyait comme un trou. Il est maintenant POSÉ sous la
     barre — hauteur de son contenu, et rien de plus. Le surplus passe
     entièrement en dessous, entre le bloc et « Jouer », où il se lit comme de
     l'air et non comme un oubli. */
  top: calc(var(--topbar-h, 56px) * 2 - 4px);
  bottom: auto;
  /* Posé sous la barre, le bloc n'a plus de bord bas pour l'arrêter : un
     résumé de quatre lignes passait SOUS le bouton « Jouer » (mesuré : 8 px
     de recouvrement sur un téléphone). On lui rend une limite — la place
     réellement libre jusqu'à la barre d'action — et ce qui dépasse est coupé
     plutôt que caché derrière. */
  max-height: calc(var(--vitrine-h, 50svh) - var(--topbar-h, 56px) * 2 - 92px);
  overflow: hidden;
  left: 0;
  right: 0;
  padding: 0 5vw;
  display: flex;
  flex-direction: row;
  /* vitrine-sans-vide-marker — ALIGNÉ EN HAUT, pas centré. Centré dans une
     boîte à hauteur bornée, un texte trop long déborde des DEUX côtés : sur
     un téléphone, l'étiquette de genre se faisait couper par le haut, ce qui
     ne ressemble à rien. Aligné en haut, seul le bas est coupé — et le bas
     est la fin d'un résumé, ce qui se comprend. */
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: clamp(12px, 3vw, 26px);
}

/* Un carré, comme sur le croquis : il se cale sur la hauteur disponible
   autant que sur la largeur, pour ne jamais pousser le texte dehors. */
.vit-diapo-vignette {
  flex: 0 0 auto;
  width: clamp(72px, min(22vw, 20svh), 150px);
  height: clamp(72px, min(22vw, 20svh), 150px);
  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: flex-start;
  gap: 6px;
  min-width: 0;             /* sans quoi un titre long refuse de se tronquer */
  max-width: min(640px, 72vw);
}

.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: 3;
  -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). ─── */
/* ══════════════════════════════════════════════════════════════════════════
   fleches-discretes-marker (15/10/2026) — BUG 20261015-123944.

   « Les icônes pour revenir sur l'élément mis en avant (dans toutes les
     catégories) ou le suivant doivent être plus discrètes, et qu'on ne puisse
     pas confondre avec le bouton retour. »

   LA CONFUSION ÉTAIT MÉRITÉE : les deux étaient un chevron blanc dans une
   PASTILLE RONDE SOMBRE, près du bord gauche, à quelques centimètres l'un de
   l'autre. Même dessin, même forme, même couleur — seule la hauteur les
   distinguait, ce qui ne suffit pas quand l'un des deux quitte la page et
   l'autre fait défiler une vitrine. Le bouton retour vient d'être agrandi à
   64 px le même jour, ce qui aurait rendu la ressemblance pire encore.

   TROIS DIFFÉRENCES PLUTÔT QU'UNE, parce qu'une seule se rattrape du coin de
   l'œil :
     · LA FORME. Le rond est au retour ; la vitrine prend un carré arrondi.
       C'est la silhouette qu'on reconnaît avant le dessin.
     · LA TAILLE. 36 px contre 64 : une commande de confort n'a pas le poids
       d'une sortie.
     · LE POIDS. Fond à peine marqué et flèche à 55 % au repos ; elles
       s'affirment sous le curseur, qui dit qu'on les cherche.

   Elles ne paraissent toujours qu'au survol, et seulement là où il y a un
   curseur : au doigt, c'est le glissement qui fait défiler. */
.vit-fleche {
  position: absolute;
  z-index: 5;
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: rgba(0, 0, 0, .22);
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.vit-fleche:hover { background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .95); }
.vit-fleche svg { width: 18px; height: 18px; }
/* fleches-rentrees-marker (15/10/2026) — « peut-être faudrait-il rajouter une
   marge du même ordre que la page pour les ceintrer un peu plus ».

   Elles étaient à 8 px du bord, c'est-à-dire plus au bord que TOUT le reste :
   le contenu du site respire à 14 px (.bloc-page, styles/base.css), et deux
   boutons posés plus près que ça se lisent comme collés à la vitre.

   On reprend donc la marge de la page, et on l'ajoute aux 8 qu'elles avaient
   déjà : 22 px. Pas une valeur choisie à l'œil — celle de la page, plus leur
   retrait d'origine. Le jour où la page respirera autrement, ces deux lignes
   suivront sans qu'on ait à y penser. */
.vit-fleche-g { left: calc(8px + 14px); top: calc(var(--vitrine-h, 50svh) / 2 - 18px); }
.vit-fleche-d { right: calc(8px + 14px); top: calc(var(--vitrine-h, 50svh) / 2 - 18px); }
/* 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) {
  /* vitrine-basse-marker — DEUX lignes et non quatre : dans une vitrine deux
     fois plus basse, la quatrième ligne passait sous le bouton « Jouer ». */
  .vit-diapo-desc { -webkit-line-clamp: 2; }
}
/* É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) {
  /* vitrine-basse-marker — DEUX lignes et non quatre : dans une vitrine deux
     fois plus basse, la quatrième ligne passait sous le bouton « Jouer ». */
  .vit-diapo-desc { -webkit-line-clamp: 2; }
  .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);
}
/* ══════════════════════════════════════════════════════════════════════════
   barre-uniforme-marker (10/10/2026) — le bouton d'action.

   « Mets juste un bouton lecture […] (mets "jouer" pour jeux). »

   Le disque creme de 40 px devient une PILULE qui porte son mot. Pourquoi le
   mot : un play seul ne dit pas sur quoi il agit, et dans une barre ou il n'y
   a plus ni vignette ni nom a cote, il ne restait aucun indice. « Jouer » ici,
   « Lecture » cote Vision — le meme objet, un libelle par categorie.

   La vignette (vignette-collee-marker, 20/09) et le nom sont partis : le
   bouton n'a plus besoin de l'appui d'une image puisqu'il porte un texte, et
   le nom est deja ecrit en grand dans la diapositive juste au-dessus.
   ══════════════════════════════════════════════════════════════════════════ */
.vit-barre-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: #f5f2eb;
  color: #14141a;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .18s ease, background .18s ease;
}
.vit-barre-action:hover { transform: scale(1.04); background: #fff; }
.vit-barre-action:active { transform: scale(.98); }
.vit-barre-action svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }

/* barre-uniforme-marker — la recherche CEDE quand la place manque, au lieu de
   pousser ses voisins hors de l'ecran. Mesure le 10/10 : avec un bouton plus
   large, la barre debordait sous 430 px. `flex: 1 1 0` plutot que
   `flex: 0 0 auto`, et un plancher qui la garde utilisable. */
.vit-barre-rech {
  flex: 1 1 0;
  min-width: 92px;
  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: 100%;
  min-width: 0;
  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 { max-width: 320px; } }
/* 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-action { height: 34px; padding: 0 13px 0 11px; font-size: 14px; }
  .vit-barre-action svg { width: 16px; height: 16px; }
  .vit-barre-rech { height: 34px; padding: 0 10px; }
  .affichage-choix-bouton { width: 30px; height: 30px; }
}

/* 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;
}

/* ══════════════════════════════════════════════════════════════════════════
   jouer-sous-jaquette-marker (18/10/2026) — BUG 20261018-132207 : « le
   bouton "jouer" doit être sous la jaquette du jeu, plus aligné avec le
   champ de recherche ». Puis 23 h 38, capture sur ordinateur : pareil sur
   grand écran, où la barre restait centrée sous le texte.

   SUR TOUS LES ÉCRANS : la jaquette et la barre partent du même bord, la
   gouttière --vit-g (le bord de la colonne de contenu, celle de la grille
   juste dessous ; 5vw sur un téléphone). « Jouer » prend au moins la largeur
   de la jaquette et se trouve donc dessous ; la recherche suit sur la même
   ligne, puis le choix d'affichage. La hauteur de la barre reste celle de
   vitrine.js.

   --vit-jaquette suit les MÊMES paliers que la vignette plus haut dans ce
   fichier (base, ≥ 768 px, hauteur ≤ 700, ≤ 620, paysage ≤ 420), dans le
   même ordre, pour que le bouton ait toujours la largeur de l'image.
   ══════════════════════════════════════════════════════════════════════════ */
#vitrine-jeux {
  --vit-jaquette: clamp(72px, min(22vw, 20svh), 150px);
  /* La colonne de la grille des jeux en affichage « moyennes » (700 px, et
     ses 11 px de marge de tuile) : sur grand écran, la jaquette tombe
     au-dessus de la première colonne de vignettes. */
  --vit-g: max(5vw, calc((100% - 700px) / 2 + 11px));
}
/* Sur grand écran, le bloc se pose sous la barre du site (comme sur
   téléphone) et la jaquette est un peu plus petite : sans ça, à 768 px de
   haut, la jaquette descendait jusque sous la ligne de « Jouer ». */
@media (min-width: 768px) {
  #vitrine-jeux { --vit-jaquette: min(170px, 16svh); }
  #vitrine-jeux .vit-diapo-corps { top: calc(var(--topbar-h, 56px) * 2 - 4px); align-items: flex-start; }
}
@media (max-height: 700px) { #vitrine-jeux { --vit-jaquette: 70px; } }
@media (max-height: 620px) { #vitrine-jeux { --vit-jaquette: 60px; } }
@media (orientation: landscape) and (max-height: 420px) { #vitrine-jeux { --vit-jaquette: 44px; } }

#vitrine-jeux .vit-diapo-corps {
  justify-content: flex-start;
  padding-left: var(--vit-g);
  padding-right: var(--vit-g);
}
#vitrine-jeux .vit-diapo-vignette { width: var(--vit-jaquette); height: var(--vit-jaquette); }
#vitrine-jeux .vit-barre {
  left: var(--vit-g);
  right: auto;
  transform: none;
  max-width: calc(100% - 2 * var(--vit-g));
}
#vitrine-jeux .vit-barre-action {
  min-width: var(--vit-jaquette);
  justify-content: center;
  box-sizing: border-box;
  padding: 0 10px 0 8px;
  gap: 5px;
}
/* Sur un téléphone, la barre va jusqu'à l'autre bord et la recherche
   remplit la ligne ; sur grand écran, elle garde sa largeur (320 px). */
@media (max-width: 767px) {
  #vitrine-jeux .vit-barre { right: var(--vit-g); max-width: none; }
  #vitrine-jeux .vit-barre-rech { max-width: none; }
}

/* bug-20261024-142404 (25/10/2026) — « il y a un espace entre le jeu mis en
   avant et les icônes du dessous, à retirer ». Le premier intertitre de la
   grille des jeux (« Sur Cizi.fr ») perd sa grande marge du haut, et la
   vitrine sa marge du bas : la grille suit la barre de recherche. */
.icons-titre.jeux-groupe-premier { margin-top: 2px; }
#vitrine-jeux { margin-bottom: 0 !important; }

/* bug-20261024-142404, 2e passage (06/11/2026) — LE VRAI ESPACE. Le premier
   correctif (ci-dessus) retirait des marges qui ne faisaient que 2 ou 3 px.
   L'espace qu'on voit sur téléphone est DANS la vitrine : elle garde sa
   hauteur plancher (320 px, ou la moitié de l'écran), le jeu mis en avant
   tient en haut, la barre « Jouer / Rechercher » est collée en bas — et
   entre les deux, 80 px de vide (mesuré à 411 × 761).
   Sur un téléphone tenu droit, la vitrine des jeux prend donc la hauteur de
   ce qu'elle contient : la barre du site, le bloc du jeu (au moins la
   jaquette, au moins trois lignes de texte), puis la barre d'action. La variable est posée sur le <body> (cf. plus haut) :
   les flèches et la grille qui se calent sur elle suivent. */
@media (max-width: 767px) and (orientation: portrait) {
  body.a-vitrine:has(#vitrine-jeux) {
    /* même compte que la limite du bloc du jeu plus haut (max-height :
       vitrine − 2 barres du site − 92 px pour la barre d'action) : le bloc
       reçoit exactement sa hauteur (au moins la jaquette, au moins 110 px
       de texte), rien de plus */
    --vitrine-h: calc(var(--topbar-h, 56px) * 2 + 92px + max(clamp(72px, min(22vw, 20svh), 150px), 110px));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   une-comme-radio-marker (11/11/2026) — « calquer ce modèle (la radio et la
   TV mises en avant) sur Vision, Sono et Jeux ».
   La vitrine des jeux prend la mise en page de la radio mise en avant :
   ~2/3 de l'écran (640 px au plus), en bas à gauche la vignette aux coins
   arrondis, le nom, « ▶ Jouer » dessous ; ni genre ni description. La barre
   (recherche + affichage) passe SOUS le bandeau (cf. vitrine-jeux.php), et
   la grille suit. Le diaporama et ses flèches ne changent pas.
   ══════════════════════════════════════════════════════════════════════════ */
body.a-vitrine:has(#vitrine-jeux) { --vitrine-h: max(min(68svh, 640px), 360px) !important; }
#vitrine-jeux .vit-diapo-corps {
  top: auto !important;
  bottom: 0;
  max-height: none;
  overflow: visible;
  align-items: flex-end !important;
  justify-content: flex-start;
  gap: 20px;
  padding: 0 var(--vit-g) 40px;
}
#vitrine-jeux .vit-diapo-vignette {
  width: 96px; height: 96px;
  border-radius: 22%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  background: rgba(0, 0, 0, .45);
}
@media (min-width: 768px) { #vitrine-jeux .vit-diapo-vignette { width: 128px; height: 128px; } }
#vitrine-jeux .vit-diapo-genre,
#vitrine-jeux .vit-diapo-desc { display: none !important; }
#vitrine-jeux .vit-diapo-texte { gap: 0; max-width: min(720px, 100%); }
#vitrine-jeux .vit-diapo-titre {
  font-family: inherit;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  -webkit-line-clamp: 1;
  word-break: break-word;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
@media (min-width: 768px) { #vitrine-jeux .vit-diapo-titre { font-size: 48px; } }
#vitrine-jeux .vit-diapo-btn {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  background: #f5f2eb; color: #14141a;
  font-weight: 700; font-size: 16px; line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .15s ease, background .15s ease;
}
#vitrine-jeux .vit-diapo-btn:hover { transform: scale(1.03); background: #fff; }
#vitrine-jeux .vit-diapo-btn svg { width: 16px; height: 16px; flex: none; }
/* le voile de la radio : sombre à gauche, clair à droite, le bas qui rejoint la page */
#vitrine-jeux .vit-diapo::after {
  background:
    linear-gradient(90deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.55) 45%, rgba(10,10,12,.1) 75%),
    linear-gradient(0deg, rgb(10,10,12) 0%, rgba(10,10,12,0) 45%) !important;
}
/* La barre (Jouer · recherche · affichage) reste DANS la section — l'ordre
   section / voile / .cizi-apres-vitrine porte des règles de voisinage (cf.
   app/jeux/page.tsx) — mais elle descend sous le bloc du jeu, dans la bande
   sombre du bas : elle se lit comme la rangée des filtres sous la radio mise
   en avant. « Jouer » quitte la barre : il est sous le titre. */
/* Les jeux n'ont pas d'image de fond (cf. fond-vignette-retire-marker) : à
   68 % de l'écran, le bandeau n'était qu'un grand vide noir. Même bloc que
   la radio, posé dans un bandeau plus bas. */
body.a-vitrine:has(#vitrine-jeux) { --vitrine-h: calc(max(min(46svh, 440px), 300px) + 56px) !important; }
/* la grille ne remonte plus sous le bandeau : elle recouvrait la barre */
#vitrine-jeux ~ .cizi-apres-vitrine { margin-top: 0 !important; }
/* espace-lecture-recherche-marker (11/11/2026, 22 h 40) — « virer l'espace entre la ligne du bouton Lecture et la ligne du champ de recherche » : 12 px partout (Vision, Sono, Radio, TV, Jeux). Barre : 12 px du bas + ~40 px de haut ; le bloc s'arrête 12 px au-dessus. */
#vitrine-jeux .vit-diapo-corps { padding-bottom: 64px; }
#vitrine-jeux .vit-barre { bottom: 12px !important; }
#vitrine-jeux .vit-barre-action { display: none !important; }
@media (max-height: 620px) { #vitrine-jeux .vit-diapo-corps { padding-bottom: 58px; } }

/* ══════════════════════════════════════════════════════════════════════════
   parcourir-bibliotheque-marker (11/11/2026) — « les champs de recherche sont
   trop grands, c'est pas beau ; on introduit la notion de parcourir la
   bibliothèque, comme sur Plex ». La barre des jeux devient celle des
   onglets, jumelle de components/barre-onglets.tsx (Vision, Sono, Radio,
   TV) : Recommandé · Bibliothèque · Catégories à gauche, l'actif souligné de
   crème ; à droite la loupe (un rond de 36 px qui s'ouvre au focus, sans
   script : le champ couvre le rond tant qu'il est fermé) et le choix
   d'affichage. Un trait fin sous toute la barre.
   ══════════════════════════════════════════════════════════════════════════ */
#vitrine-jeux .vit-barre.vit-onglets {
  left: var(--vit-g); right: var(--vit-g); bottom: 0 !important;
  transform: none; max-width: none;
  gap: 8px;
  border-bottom: 0; /* onglets-maison-marker (13/11/2026) : plus de trait sous la barre */
}
#vitrine-jeux .vit-onglets-nav {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 20px;
  overflow-x: auto; scrollbar-width: none;
}
#vitrine-jeux .vit-onglets-nav::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { #vitrine-jeux .vit-onglets-nav { gap: 28px; } }
#vitrine-jeux .vit-onglet {
  position: relative; flex: none; white-space: nowrap;
  padding: 12px 0;
  font-size: 15px; font-weight: 600; line-height: 20px;
  color: rgba(255, 255, 255, .55); text-decoration: none;
  transition: color .15s;
}
@media (min-width: 768px) { #vitrine-jeux .vit-onglet { font-size: 16px; } }
#vitrine-jeux .vit-onglet:hover { color: rgba(255, 255, 255, .85); }
#vitrine-jeux .vit-onglet.is-on { color: #fff; }
#vitrine-jeux .vit-onglet.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 999px; background: #f5f2eb;
}
#vitrine-jeux .vit-onglets .vit-barre-rech {
  position: relative; flex: none;
  width: 36px; min-width: 0; max-width: none; height: 36px; padding: 0;
  justify-content: center; gap: 0;
  background: transparent; border-color: rgba(255, 255, 255, .15);
  transition: width .2s, background-color .2s, border-color .2s;
  cursor: pointer;
}
#vitrine-jeux .vit-onglets .vit-barre-rech:hover { background: rgba(255, 255, 255, .08); }
#vitrine-jeux .vit-onglets .vit-barre-rech svg { width: 17px; height: 17px; color: rgba(255, 255, 255, .8); }
#vitrine-jeux .vit-onglets .vit-barre-rech input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0;
}
#vitrine-jeux .vit-onglets .vit-barre-rech:focus-within,
#vitrine-jeux .vit-onglets .vit-barre-rech:has(input:not(:placeholder-shown)) {
  width: min(14rem, 46vw); justify-content: flex-start; gap: 8px; padding: 0 12px;
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .25); cursor: text;
}
#vitrine-jeux .vit-onglets .vit-barre-rech:focus-within input,
#vitrine-jeux .vit-onglets .vit-barre-rech:has(input:not(:placeholder-shown)) input {
  position: static; opacity: 1; cursor: text;
}
/* le bloc du jeu s'arrête 12 px au-dessus des onglets (44 px de haut) */
#vitrine-jeux .vit-diapo-corps { padding-bottom: 56px; }
@media (max-height: 620px) { #vitrine-jeux .vit-diapo-corps { padding-bottom: 56px; } }

/* Les onglets Bibliothèque et Catégories, sous la vitrine */
.jeux-biblio-compte { margin: 18px auto 10px; font-size: 14px; color: rgba(255, 255, 255, .45); }
.jeux-categories {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 20px; margin-bottom: 32px;
}
@media (min-width: 640px) { .jeux-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jeux-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jeux-categorie {
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 16 / 9; padding: 12px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.jeux-categorie:hover { transform: scale(1.02); border-color: rgba(255, 255, 255, .25); }
.jeux-categorie-mot { font-size: 17px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.jeux-categorie-nb { font-size: 12px; color: rgba(255, 255, 255, .6); }
.jeux-categorie-tete { display: flex; align-items: center; gap: 12px; margin-top: 18px; margin-bottom: 10px; }
.jeux-categorie-tete h2 { margin: 0; font-size: 20px; font-weight: 700; }
.jeux-categorie-retour {
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .75); font-size: 14px; font-weight: 600; text-decoration: none;
}
/* même colonne que la grille des jeux (.icons.mode-moyennes : 700 px) */
.jeux-categories, .jeux-categorie-tete, .jeux-biblio-compte {
  box-sizing: border-box; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
@media (max-width: 732px) {
  .jeux-categories, .jeux-categorie-tete, .jeux-biblio-compte { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 639px) {
  #vitrine-jeux .vit-onglets-nav { gap: 14px; }
  #vitrine-jeux .vit-onglet { font-size: 13px; }
}

/* onglets-maison-marker (13/11/2026) — l'onglet maison (pictogramme) */
#vitrine-jeux .vit-onglet-ico { display: inline-flex; align-items: center; }
#vitrine-jeux .vit-onglet-ico svg { display: block; }
/* onglets-maison-marker (13/11/2026) — « grossir la maison, le cœur, Genre » */
#vitrine-jeux .vit-onglet { font-size: 16px !important; }
@media (min-width: 640px) { #vitrine-jeux .vit-onglet { font-size: 18px !important; } }
@media (min-width: 768px) { #vitrine-jeux .vit-onglet { font-size: 19px !important; } }
#vitrine-jeux .vit-onglet-ico svg { width: 26px; height: 26px; }