/* =========================================================================
   CHRONO CLUC — site public : catalogue, fiche jeu, thèmes, « Quand
   passez-vous ? », pages d'information, retour et simulation de paiement,
   carte de jeu partagée (aussi dans la vitrine de l'accueil).
   Chargée par layouts/site.php après app.css. Charte « Aurore retenue » :
   jetons et composants du cœur (app.css, docs/CHARTE_AURORE.md) ; aucune
   règle du cœur ici. Maquette : serie-4/01-retenue.html (vitrine, cartes).

   - La couleur va sur la structure : halos « aurore » derrière la tête de
     chaque écran (bleu = navigation et information, jaune = temps, vert =
     validé). L'information reste calme : panneaux blancs, encre, petits
     marqueurs de couleur + icône + texte.
   - Aucune lettre C-L-U-C en décor (bandeau vertical des cartes supprimé),
     aucune grosse case colorée sous une caractéristique.
   - Texte posé sur un halo : toujours en encre (≥ 7:1 sur les quatre
     couleurs pleines) ; les liens y passent en encre soulignée.
   ========================================================================= */

/* ---------- 1. Écran public : halos et tête ------------------------------ */
/* <div class="ecran"><div class="aurore">…halos…</div><div class="conteneur">
   Les halos ne vivent que dans le haut de l'écran (masque), derrière la tête
   et le premier panneau ; position et taille par classe (CSP). */
.ecran { position: relative; isolation: isolate; padding-top: var(--e-6); }
/* Deux masques croisés : fondu en haut et sous 34 rem, et toujours un fondu
   au bas de l'écran (page courte : aucun bord net au-dessus du pied). */
.ecran > .aurore {
  -webkit-mask-image: linear-gradient(transparent 0, #000 3rem, #000 34rem, transparent 56rem), linear-gradient(to top, transparent 0, #000 12rem);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent 0, #000 3rem, #000 34rem, transparent 56rem), linear-gradient(to top, transparent 0, #000 12rem);
  mask-composite: intersect;
}
.ecran__tete { max-width: 62rem; margin-bottom: var(--e-7); }
.ecran__tete h1 { margin: 0; }
.ecran__tete .chapo > :last-child { margin-bottom: 0; }
.ecran__suite { margin: var(--e-7) 0 0; }
.ecran .ariane { margin-bottom: var(--e-6); }
/* Sur un halo, le lien du fil d'Ariane passe en encre souligné */
.ecran .ariane a { color: var(--encre); display: inline-flex; align-items: center; min-height: var(--cible); }
.ecran .ariane li { font-weight: 600; }

/* Positions des halos (ordinateur, puis mobile plus bas) */
.halo-catalogue-1 { --x: 3%; --y: 24rem; --t: 64rem; --o: .62; }
.halo-catalogue-2 { --x: 94%; --y: 4rem; --t: 46rem; --o: .5; }
.halo-theme-1 { --x: 4%; --y: 16rem; --t: 60rem; --o: .6; }
.halo-theme-2 { --x: 95%; --y: 6rem; --t: 44rem; --o: .45; }
.halo-themes-1 { --x: 5%; --y: 14rem; --t: 60rem; --o: .6; }
.halo-themes-2 { --x: 92%; --y: 32rem; --t: 48rem; --o: .45; }
.halo-fiche-1 { --x: 16%; --y: 22rem; --t: 58rem; --o: .6; }
.halo-fiche-2 { --x: 97%; --y: 34rem; --t: 42rem; --o: .5; }
.halo-quand-1 { --x: 4%; --y: 20rem; --t: 62rem; --o: .62; }
.halo-quand-2 { --x: 90%; --y: 30rem; --t: 50rem; --o: .6; }
.halo-info-1 { --x: 6%; --y: 10rem; --t: 56rem; --o: .55; }
.halo-paiement-1 { --x: 94%; --y: 8rem; --t: 46rem; --o: .5; }
.halo-paiement-2 { --x: 2%; --y: 4rem; --t: 42rem; --o: .4; }
@media (max-width: 47.99rem) {
  .ecran { padding-top: var(--e-5); }
  .ecran > .aurore {
    -webkit-mask-image: linear-gradient(transparent 0, #000 2rem, #000 26rem, transparent 42rem), linear-gradient(to top, transparent 0, #000 8rem);
    mask-image: linear-gradient(transparent 0, #000 2rem, #000 26rem, transparent 42rem), linear-gradient(to top, transparent 0, #000 8rem);
  }
  .ecran__tete { margin-bottom: var(--e-6); }
  .ecran .ariane { margin-bottom: var(--e-4); }
  .halo-catalogue-1, .halo-theme-1, .halo-themes-1, .halo-fiche-1, .halo-quand-1, .halo-info-1 { --x: 0%; --y: 12rem; --t: 34rem; }
  .halo-catalogue-2, .halo-theme-2, .halo-themes-2, .halo-fiche-2, .halo-quand-2, .halo-paiement-1 { --x: 100%; --y: 4rem; --t: 28rem; }
  .halo-paiement-2 { --x: 0%; --y: 20rem; --t: 28rem; }
}
/* Téléphone : la page courante (souvent un long nom de jeu) quitte le fil d'Ariane ;
   le dernier lien sert de retour et le h1 juste dessous nomme la page. */
@media (max-width: 35.99rem) {
  .ecran .ariane li[aria-current] { display: none; }
}

/* ---------- 2. Texte éditorial (Markdown restreint) --------------------- */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.75rem; margin: var(--e-7) 0 var(--e-4); }
.prose h3 { font-size: 1.375rem; margin: var(--e-6) 0 var(--e-3); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: var(--e-2); }
.prose li::marker { color: var(--encre-douce); }
.prose a { font-weight: 600; }

/* ---------- 3. Catalogue : filtres -------------------------------------- */
/* Panneau dépoli au-dessus des résultats (maquette : « filtres verre »). */
.filtres { margin-bottom: var(--e-7); padding: var(--e-4) var(--e-6) var(--e-6); }
.filtres__titre {
  display: flex; align-items: center; gap: var(--e-3); min-height: var(--cible); margin: 0 calc(-1 * var(--e-2));
  padding: 0 var(--e-2); border-radius: var(--r-s);
  font: 500 1.375rem/1.2 var(--police-titre); letter-spacing: -.01em; cursor: pointer; list-style: none;
}
.filtres__titre::-webkit-details-marker { display: none; }
.filtres__titre .icone { width: 1.5rem; height: 1.5rem; }
.filtres__titre .icone-ouvrir { margin-left: auto; transition: transform .2s ease-out; }
.filtres[open] .icone-ouvrir { transform: rotate(180deg); }
.filtres__formulaire {
  display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr);
  margin-top: var(--e-4); padding-top: var(--e-5); border-top: 1px solid var(--gris);
}
@media (min-width: 40rem) { .filtres__formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .filtres__formulaire { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--e-5); } }
.filtres .champ { margin: 0; align-content: start; }
@media (min-width: 40rem) { .filtres__recherche { grid-column: span 2; } }
.filtres .champ > label { font-size: 1.0625rem; }
.filtres__pied {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-4) var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--gris);
}
.filtres__pied .case-a-cocher { margin: 0; }
.filtres__pied .btn { margin-left: auto; min-height: 3.5rem; padding-inline: var(--e-6); border-radius: var(--r-pill); }

/* Champ de saisie avec icône (recherche du catalogue, commune) */
.filtres__saisie, .quand__saisie { position: relative; display: block; }
.filtres__saisie > .icone, .quand__saisie > .icone {
  position: absolute; left: 1.05rem; top: 50%; translate: 0 -50%; width: 1.375rem; height: 1.375rem;
  color: var(--encre-douce); pointer-events: none;
}
.filtres__saisie input, .quand__saisie input { padding-left: 3.1rem; }

@media (max-width: 39.99rem) {
  .filtres { padding: var(--e-3) var(--e-4) var(--e-4); border-radius: 24px; }
  .filtres:not([open]) { padding-bottom: var(--e-3); }
  .filtres__pied .btn { width: 100%; margin-left: 0; }
}

/* ---------- 4. Catalogue : résultats ------------------------------------ */
.resultats__entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3) var(--e-5); margin-bottom: var(--e-5);
}
.resultats__nombre { margin: 0; font: 500 1.5rem/1.2 var(--police-titre); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.ecran .resultats__entete .lien-fleche { color: var(--encre); }
.resultats__tri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.resultats__tri select { min-width: 16rem; }
@media (max-width: 35.99rem) {
  .resultats__tri { width: 100%; flex-wrap: nowrap; }
  .resultats__tri .champ { flex: 1; min-width: 0; }
  .resultats__tri select { min-width: 0; }
}

/* Filtres actifs : puces encre (comme une puce choisie de la maquette) */
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); list-style: none; padding: 0; margin: 0 0 var(--e-6); }
.filtres-actifs li { margin: 0; }
.filtre-actif {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 .4rem 0 1.1rem;
  border-radius: var(--r-pill); background: var(--encre); color: #fff;
  font-weight: 600; font-size: 1rem; text-decoration: none;
}
.filtre-actif .icone { width: 1.75rem; height: 1.75rem; padding: .3rem; border-radius: 50%; background: rgb(255 255 255 / .16); }
.filtres-actifs .btn--discret { color: var(--encre); }

/* Grille des cartes : 1, 2, 3 puis 4 colonnes (maquette : 4 cartes à 1 280 px) */
.grille-jeux { display: grid; gap: var(--gouttiere); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .grille-jeux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .grille-jeux { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .grille-jeux { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--e-5); } }

/* ---------- 5. Carte de jeu (catalogue, thèmes, vitrine de l'accueil) ---- */
/* Panneau blanc, visuel en tête, titre-lien étendu à toute la carte. */
.carte-jeu {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--fond); border: 1px solid var(--gris); border-radius: var(--r-m);
  box-shadow: 0 1px 2px rgb(var(--rvb-encre) / .05);
}
.carte-jeu__visuel { margin: 8px 8px 0; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden; background: var(--fond-doux); }
.carte-jeu__visuel picture { display: block; width: 100%; height: 100%; }
.carte-jeu__visuel img { width: 100%; height: 100%; object-fit: cover; }
/* Sans photo : visuel neutre (fond doux, icône de boîte, « Photo à venir »).
   Aucune couleur de charte : elle ne porterait ici aucune information. */
.carte-jeu__visuel .visuel-provisoire, .fiche__visuel > .visuel-provisoire {
  align-content: center; gap: var(--e-2); background: var(--fond-doux); color: var(--encre-douce);
}
.carte-jeu__visuel .visuel-provisoire > .icone, .fiche__visuel > .visuel-provisoire > .icone { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; }
.visuel-provisoire__mention { font: 600 1rem/1.3 var(--police-texte); letter-spacing: 0; }
.carte-jeu__corps { display: flex; flex-direction: column; gap: var(--e-4); flex: 1; min-width: 0; padding: var(--e-5) 20px 20px; }
.carte-jeu__titre { margin: 0; font: 500 1.375rem/1.2 var(--police-titre); letter-spacing: -.01em; overflow-wrap: anywhere; }
.carte-jeu__titre a { color: var(--encre); text-decoration: none; }
.carte-jeu__titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-m); }
.carte-jeu__actions {
  position: relative; z-index: 1; display: grid; gap: var(--e-3); margin-top: auto;
  padding-top: var(--e-4); border-top: 1px solid var(--gris);
}
.carte-jeu__actions p, .carte-jeu__actions form { margin: 0; }
.carte-jeu__actions .btn { min-height: 3.25rem; padding-inline: var(--e-2); gap: var(--e-2); border-radius: var(--r-pill); font-size: 1rem; }

@media (hover: hover) and (pointer: fine) {
  .carte-jeu { transition: transform .2s ease-out, box-shadow .2s ease-out; }
  .carte-jeu:hover { transform: translateY(-2px); box-shadow: var(--ombre-1); }
  .carte-jeu:hover .carte-jeu__titre a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
}
/* Focus clavier sur le titre : toute la carte s'entoure */
@supports selector(:has(a)) {
  .carte-jeu:has(.carte-jeu__titre a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .carte-jeu__titre a:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
}

/* Carte horizontale compacte sur téléphone (maquette, mobile) */
@media (max-width: 35.99rem) {
  .carte-jeu { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e-4); padding: var(--e-4); align-items: center; }
  .carte-jeu__visuel { grid-column: 1; grid-row: 1; width: 6rem; margin: 0; aspect-ratio: 1; border-radius: 12px; }
  .carte-jeu__visuel .visuel-provisoire > .icone { width: 2rem; height: 2rem; }
  .carte-jeu__visuel .visuel-provisoire__mention { display: none; }
  .carte-jeu__corps { display: contents; }
  .carte-jeu__titre { grid-column: 2; grid-row: 1; font-size: 1.3125rem; }
  .carte-jeu .caracs { grid-column: 1 / -1; }
  .carte-jeu__actions { grid-column: 1 / -1; }
}

/* ---------- 6. Caractéristiques : filet de couleur + icône + texte ------- */
/* Code couleur de l'étiquette en petit filet (rouge catégorie, jaune âge,
   bleu joueurs, vert durée), jamais en aplat sous le texte. */
.caracs { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.carac {
  --filet: var(--gris-moyen);
  display: flex; align-items: center; gap: var(--e-2); min-width: 0; max-width: none; margin: 0;
  padding-left: 10px; border-left: 3px solid var(--filet);
  font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--encre);
}
.caracs li + li { margin-top: 0; }
/* Carte : grille régulière, même rythme d'une carte à l'autre. 2 × 2 dès que la
   carte le permet sans couper un mot (« Construction ») ; une par ligne dans
   une carte étroite (4 colonnes à 1 280 px). Requête de conteneur : la largeur
   de la carte compte, pas celle de l'écran. */
.carte-jeu__corps { container-type: inline-size; }
.carte-jeu .caracs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; }
@container (min-width: 17.5rem) { .carte-jeu .caracs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Téléphone : carte horizontale pleine largeur (corps en display: contents) */
@media (max-width: 35.99rem) { .carte-jeu .caracs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carac > .icone { width: 1.25rem; height: 1.25rem; color: var(--encre-douce); }
.carac .case__valeur { overflow-wrap: anywhere; }
.carac--categorie { --filet: var(--cluc-rouge); }
.carac--age { --filet: var(--cluc-jaune); }
.carac--joueurs { --filet: var(--cluc-bleu); }
.carac--duree { --filet: var(--cluc-vert); }
/* Carte : la légende n'est lue que par les lecteurs d'écran (valeurs explicites) */
.caracs:not(.caracs--grandes) .case__legende {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Fiche : panneau blanc, légende visible, valeur en chiffres légers */
.caracs--grandes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4);
  padding: var(--e-5); background: var(--fond); border: 1px solid var(--gris); border-radius: var(--r-m); box-shadow: var(--ombre-1);
}
@media (min-width: 36rem) and (max-width: 47.99rem) { .caracs--grandes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.caracs--grandes .carac { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-1) var(--e-2); padding-left: var(--e-3); }
.caracs--grandes .carac > .icone { grid-row: 1; }
.caracs--grandes .case__legende { grid-row: 1; font: 700 .9375rem/1.3 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.caracs--grandes .case__valeur { grid-column: 1 / -1; font: 300 1.875rem/1.1 var(--police-titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 7. Disponibilité : pastille d'icône + texte ----------------- */
.dispo { display: flex; align-items: flex-start; gap: var(--e-3); margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--encre); }
.dispo > .icone {
  width: 1.75rem; height: 1.75rem; padding: .35rem; margin-top: -.15rem; border-radius: 50%;
  background: var(--c, var(--fond-doux)); color: var(--encre); stroke-width: 2.5;
}
.dispo > span { min-width: 0; }
.dispo--oui { --c: var(--cluc-vert); }
.dispo--non { --c: var(--cluc-jaune); }
.dispo--complet { font-weight: 500; }

/* ---------- 8. Fiche jeu ------------------------------------------------- */
.fiche { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 48rem) { .fiche { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
@media (min-width: 60rem) { .fiche { column-gap: var(--e-8); } }
.fiche__visuel { padding: 10px; background: var(--fond); border: 1px solid var(--verre-bord); border-radius: var(--r-l); box-shadow: var(--ombre-2); }
.fiche__visuel > picture, .fiche__visuel > .visuel-provisoire { display: block; aspect-ratio: 4 / 3; height: auto; border-radius: var(--r-m); overflow: hidden; }
.fiche__visuel > .visuel-provisoire { display: grid; }
.fiche__visuel > .visuel-provisoire > .icone { width: 3rem; height: 3rem; }
.fiche__visuel .visuel-provisoire__mention { font-size: 1.0625rem; }
.fiche__visuel img { width: 100%; height: 100%; object-fit: cover; }
.fiche__infos { display: grid; gap: var(--e-5); min-width: 0; }
.fiche__infos > * { margin: 0; }
.fiche__infos > .sur { margin-bottom: calc(-1 * var(--e-2)); }
.fiche__titre { overflow-wrap: anywhere; }
.fiche__description { max-width: 62ch; }
.fiche__reserver {
  display: grid; gap: var(--e-4); justify-items: start; padding: var(--e-5);
  background: var(--fond); border: 1px solid var(--gris); border-radius: var(--r-l); box-shadow: var(--ombre-2);
}
.fiche__reserver p, .fiche__reserver form { margin: 0; }
.fiche__reserver .btn { border-radius: var(--r-pill); }
@media (max-width: 35.99rem) {
  .fiche__reserver { justify-items: stretch; padding: var(--e-4); border-radius: 24px; }
  .fiche__reserver .btn { width: 100%; }
  .fiche__visuel { padding: 8px; border-radius: 24px; }
  /* Le titre remonte : visuel plus bas sur téléphone, et masqué tant qu'il n'y a pas de vraie photo */
  .fiche__visuel > picture, .fiche__visuel > .visuel-provisoire { aspect-ratio: 16 / 9; border-radius: 18px; }
  .fiche__visuel:has(> .visuel-provisoire) { display: none; }
  .caracs--grandes { padding: var(--e-4); border-radius: 24px; }
  .caracs--grandes .case__valeur { font-size: 1.625rem; }
}

/* Suite de la fiche : détail (panneau) et avis */
.fiche-suite { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: var(--e-8); }
@media (min-width: 60rem) { .fiche-suite { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-8); } }
.fiche-suite__detail h2 { font-size: 1.75rem; }
.fiche-suite__detail h3 {
  margin: var(--e-6) 0 var(--e-3); font: 700 .9375rem/1.3 var(--police-texte);
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce);
}
.fiche-suite__detail .mot { min-height: var(--cible); }
.fiche-suite__avis { display: grid; gap: var(--e-5); min-width: 0; }
.fiche-suite__avis > * { margin: 0; }
.fiche-suite__avis > .sur { margin-bottom: calc(-1 * var(--e-2)); }
.fiche-suite__avis h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1.04; letter-spacing: -.03em; }
.fiche-suite .avis li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-5); }
.fiche-suite .avis li > .icone { grid-row: 1 / 3; width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 50%; border: 2px solid var(--gris); color: var(--encre); }
.fiche-suite .avis blockquote { margin: 0; font-size: 1.125rem; }
.fiche-suite__connexion {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5);
  background: var(--fond); border: 1px solid var(--gris); border-radius: var(--r-m);
}
.fiche-suite__connexion > .icone { width: 1.5rem; height: 1.5rem; color: var(--encre-douce); }
.fiche-suite__formulaire > * { margin: 0; }
.fiche-suite__formulaire > * + * { margin-top: var(--e-4); }
.fiche-suite__formulaire h3 { font-size: 1.5rem; }
.fiche-suite__formulaire .champ { margin-bottom: 0; }

/* ---------- 9. Thématiques ---------------------------------------------- */
.themes-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.themes-liste li { margin: 0; max-width: none; }
.theme-tuile {
  display: flex; align-items: center; gap: var(--e-4); height: 100%; min-height: 5.75rem; padding: var(--e-4) var(--e-5);
  background: var(--fond); border: 1px solid var(--gris); border-radius: var(--r-m); box-shadow: var(--ombre-1);
  color: var(--encre); text-decoration: none;
}
.theme-tuile__texte { display: grid; gap: 2px; flex: 1; min-width: 0; }
.theme-tuile__nom { font: 500 1.375rem/1.2 var(--police-titre); letter-spacing: -.01em; overflow-wrap: anywhere; }
.theme-tuile__nombre { font-size: 1rem; font-weight: 600; color: var(--encre-douce); }
.theme-tuile__fleche { color: var(--encre-douce); transition: transform .2s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .theme-tuile { transition: transform .2s ease-out, border-color .2s ease-out; }
  .theme-tuile:hover { transform: translateY(-2px); border-color: var(--encre); }
  .theme-tuile:hover .theme-tuile__nom { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
  .theme-tuile:hover .theme-tuile__fleche { transform: translateX(3px); color: var(--encre); }
}

/* ---------- 10. « Quand passez-vous ? » ---------------------------------- */
.quand-grille { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .quand-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-8); } }
.quand-grille__principal { display: grid; gap: var(--e-6); min-width: 0; }
/* La recherche se pose sur le halo en panneau dépoli (maquette : « dock ») */
.ecran--quand .quand {
  padding: var(--e-5) var(--e-6);
  background: var(--verre); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  border-color: var(--verre-bord); box-shadow: var(--ombre-2);
}
.ecran--quand .quand__formulaire { row-gap: var(--e-2); }
.ecran--quand .quand__formulaire > .champ > label { font-size: 1.0625rem; }
.ecran--quand .quand__saisie input { min-height: 3.75rem; border-radius: var(--r-pill); font-size: 1.1875rem; font-weight: 600; }
.ecran--quand .quand .btn--grand { min-height: 3.75rem; border-radius: var(--r-pill); }
.ecran--quand .quand .champ__aide { display: flex; align-items: center; gap: var(--e-2); }
.ecran--quand .quand .champ__aide .icone { width: 1.25rem; height: 1.25rem; }
/* Le bouton s'aligne sur le champ, l'aide passe dessous (champ « déplié ») */
@media (min-width: 36rem) {
  .ecran--quand .quand__formulaire { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--e-3); }
  .ecran--quand .quand__formulaire > .champ { display: contents; }
  .ecran--quand .quand__formulaire > .champ > label, .ecran--quand .quand__formulaire .champ__aide { grid-column: 1 / -1; }
  .ecran--quand .quand__formulaire .quand__saisie { grid-column: 1; grid-row: 2; }
  .ecran--quand .quand__formulaire > .btn { grid-column: 2; grid-row: 2; }
}
@media (max-width: 35.99rem) {
  .ecran--quand .quand { padding: var(--e-5) var(--e-4) var(--e-4); border-radius: 24px; }
  .ecran--quand .quand .btn--grand { width: 100%; }
}

.quand-resultat { display: grid; gap: var(--e-5); }
/* Focus donné par app.js après une recherche : annoncé, sans cadre autour du bloc */
.quand-resultat:focus { outline: none; }
.quand-resultat:focus-visible > section > h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.quand-resultat .message { margin: 0; }
.quand-resultat__zone { display: grid; gap: var(--e-4); }
.quand-resultat__zone > * { margin: 0; }
.quand-resultat__zone > .texte-secondaire { color: var(--encre); }
.quand-resultat h2, .quand-grille__cote h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); }

/* Plusieurs communes : liste de liens en lignes */
.liste-choix { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.liste-choix li { margin: 0; max-width: none; }
.liste-choix__lien {
  display: flex; align-items: center; gap: var(--e-3); min-height: var(--cible); padding: var(--e-3) var(--e-4);
  border: 2px solid var(--gris-moyen); border-radius: var(--r-s); background: var(--fond);
  color: var(--encre); font-weight: 600; text-decoration: none;
}
.liste-choix__lien > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liste-choix__lien > .icone { color: var(--encre-douce); }
@media (hover: hover) and (pointer: fine) { .liste-choix__lien:hover { border-color: var(--encre); } }

/* Points relais et « Comment ça marche ? » */
.quand-grille__cote { display: grid; gap: var(--e-4); min-width: 0; }
.quand-grille__cote > * { margin: 0; }
.quand-grille__cote > .texte-secondaire { color: var(--encre); }
.relais-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.relais {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-4); margin: 0; max-width: none;
  padding: var(--e-5); background: var(--fond); border: 1px solid var(--gris); border-radius: var(--r-m); box-shadow: var(--ombre-1);
}
.relais__texte { display: grid; gap: var(--e-2); min-width: 0; }
.relais__texte > * { margin: 0; }
.relais__nom { font: 500 1.25rem/1.25 var(--police-titre); letter-spacing: -.01em; overflow-wrap: anywhere; }
.relais__ligne { display: flex; align-items: flex-start; gap: var(--e-2); font-size: 1rem; line-height: 1.45; }
.relais__ligne > .icone { width: 1.125rem; height: 1.125rem; margin-top: .15em; color: var(--encre-douce); }
@media (max-width: 35.99rem) { .relais { padding: var(--e-4); gap: var(--e-3); border-radius: 24px; } }
.principe-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-5); }
.principe-liste li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-4); align-items: start; margin: 0; max-width: none; }
.principe-liste p { margin: 0; }
.principe-liste .pastille { margin-top: -.2rem; }

/* ---------- 11. Pages d'information ------------------------------------- */
/* Tête collée à gauche, texte dans un panneau blanc (maquette : réservation) */
@media (min-width: 62rem) {
  .ecran--info > .conteneur { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gouttiere); align-items: start; }
  .ecran--info .ariane { grid-column: 1 / -1; }
  .ecran--info .ecran__tete { position: sticky; top: 8.5rem; margin-bottom: 0; padding-right: var(--e-5); }
}
.ecran--info .ecran__tete h1 { font-size: clamp(2.375rem, 1.8rem + 2vw, 3.5rem); overflow-wrap: anywhere; }
.info-texte { max-width: 52rem; }
@media (min-width: 48rem) { .info-texte { padding: var(--e-7) var(--e-7) var(--e-6); } }
.info-texte__date {
  display: flex; align-items: center; gap: var(--e-2); margin: var(--e-6) 0 0; padding-top: var(--e-4);
  border-top: 1px solid var(--gris); font-size: 1rem; color: var(--encre-douce);
}
.info-texte__date .icone { width: 1.25rem; height: 1.25rem; }

/* ---------- 12. Paiement : retour et simulation ------------------------- */
.paiement-panneau { display: grid; gap: var(--e-5); max-width: 46rem; }
.paiement-panneau > * { margin: 0; }
.paiement-panneau .message { margin: 0; box-shadow: none; }
.paiement-panneau__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.paiement-panneau__actions .btn { border-radius: var(--r-pill); }
@media (max-width: 35.99rem) {
  .paiement-panneau { padding: var(--e-4); }
  .paiement-panneau__actions .btn { width: 100%; }
}

/* ---------- 13. Mouvement réduit, contraste forcé ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .carte-jeu:hover, .theme-tuile:hover { transform: none !important; }
}
@media (forced-colors: active) {
  .carac { border-left-color: CanvasText; }
  .dispo > .icone, .filtre-actif { border: 1px solid CanvasText; }
  .carte-jeu, .theme-tuile, .relais { border: 1px solid CanvasText; }
}