/* ==========================================================================
   « Découvrir Craponne » — page du jeu (V20) et fiches balade (V21).
   Blocs nouveaux de 07-pages-ux-v2 §1.0 : Choix de jeu (2 cartes égales), Étapes · parcours,
   Parcours (extrait de carte + étapes numérotées), Bloc réponse (Parcours).
   Placement (390) : marges 24, 4 colonnes de 73,5, gouttière 16 → cartes de 163 (c1–2 | c3–4) ;
   (1440) : marges 64, 12 colonnes → cartes de 644 (c1–6 | c7–12). Rayon 0, pas de cadre autour des blocs.
   ========================================================================== */

/* ---------- Choix de jeu (R23) ---------- */
.choix-jeu { display: flex; flex-direction: column; gap: var(--espace-16); }
.choix-jeu__liste { row-gap: var(--rythme-bloc); }
.choix-jeu__carte { display: flex; flex-direction: column; gap: var(--espace-16); min-width: 0; }
.choix-jeu__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 0 50%; background: var(--couleur-filet); }
.choix-jeu__credit { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.choix-jeu__public { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.choix-jeu__carte .carte__titre { font-weight: 500; }
.choix-jeu__carte .bouton { align-self: flex-start; margin-top: auto; }
@media (min-width: 1024px) {
  .choix-jeu__image { aspect-ratio: 2 / 1; }
}

/* ---------- Comment on joue (V20) : 390 — 01 · 02 · 03 en lignes à filet (numéro 28/32 Pierre, 64 + texte),
   puis la capture dans le téléphone en verre (220 × 452, socle .appli__telephone) ; 1 440 — c1–6 empilées
   (numéro 48/52), capture 16:9 c7–12 en haut de la section ---------- */
.comment-jeu { row-gap: var(--rythme-bloc); align-items: start; }
.comment-jeu__textes { display: flex; flex-direction: column; gap: var(--rythme-bloc); }
.etapes-jeu { display: flex; flex-direction: column; }
.etapes-jeu > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--espace-8); row-gap: var(--espace-4); padding-block: var(--espace-24); border-top: var(--trait-filet) solid var(--couleur-filet); }
.etapes-jeu > li:first-child { border-top: 0; padding-top: 0; }
.etapes-jeu__numero { grid-row: 1 / span 2; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; color: var(--couleur-texte-secondaire); font-variant-numeric: tabular-nums; }
.etapes-jeu > li h3 { margin: 0; padding-top: 4px; }
.etapes-jeu > li p { grid-column: 2; color: var(--couleur-texte-secondaire); }
.comment-jeu__visuel { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--espace-8); }
.jeu-telephone {   /* les variables du verre du socle (.appli), sans le module application.js */
  --appli-cadre: 220px; --appli-verre: rgb(246 244 239 / 0.6); --appli-reflet: rgb(255 255 255 / 0.95); --appli-lumiere: var(--palette-ville-bleu-d-azurage);
  display: flex; justify-content: center; width: 100%;
}
.jeu-telephone .appli__ecran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.comment-jeu__image { --ratio: 16 / 9; margin: 0; }
@media (min-width: 1024px) {
  .etapes-jeu > li { grid-template-columns: minmax(0, 1fr); padding-block: var(--espace-24) var(--espace-40); border-top: var(--trait-filet) solid var(--couleur-filet); }
  .etapes-jeu > li:first-child { border-top: var(--trait-filet) solid var(--couleur-filet); padding-top: var(--espace-24); }
  .etapes-jeu__numero { grid-row: auto; margin-bottom: var(--espace-16); }
  .etapes-jeu > li p { grid-column: 1; }
  .comment-jeu__image { grid-row: 1; }
}

/* ---------- À la fin du jeu : 390 — titre, capture 3:2, listes ; 1 440 — capture c1–6, titre et listes c7–12 ---------- */
.fin-jeu { row-gap: var(--espace-24); align-items: start; }
.fin-jeu__titre { margin: 0; }
.fin-jeu__image { --ratio: 3 / 2; margin: 0 0 var(--espace-16); }
.fin-jeu__bloc { display: flex; flex-direction: column; gap: var(--espace-8); }
.fin-jeu__bloc + .fin-jeu__bloc { margin-top: var(--espace-16); }
.fin-jeu__bloc h3 { margin: 0; }
.fin-jeu__bloc ul { display: flex; flex-direction: column; }
.fin-jeu__bloc li { padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
@media (min-width: 1024px) {
  .fin-jeu { grid-template-rows: auto auto 1fr; }
  .fin-jeu__image { grid-row: 1 / span 3; margin: 0; }
}

/* ---------- Jouer sans la 3D : l'illustration « decouvrir-craponne » (96 à 390, 128 à 1 440), texte c3–8 ---------- */
.sans-3d { row-gap: var(--espace-24); align-items: start; }
.sans-3d__illustration { width: 96px; height: 96px; }
.sans-3d__textes { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); align-items: flex-start; }
.sans-3d__textes > p:first-of-type { max-width: 34em; }
.sans-3d__liens { display: flex; flex-direction: column; gap: var(--espace-8); padding-top: var(--espace-8); }
@media (min-width: 1024px) {
  .sans-3d__illustration { width: 128px; height: 128px; margin-left: var(--espace-16); }
  .sans-3d__liens { flex-direction: row; flex-wrap: wrap; gap: var(--espace-8) var(--espace-24); }
}

/* ---------- Les balades : la balade à la une (photo 342 × 228 / 310 × 207 c6–8, texte c9–12), puis la liste ---------- */
.balades-jeu { row-gap: var(--rythme-bloc); }
.balades-jeu__liste { display: flex; flex-direction: column; gap: var(--rythme-bloc); }
.balade-une { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-16); }
.balade-une__photo { margin: 0; }
.balade-une__photo .photo__image { image-rendering: pixelated; }
.balade-une__textes { display: flex; flex-direction: column; gap: var(--espace-8); align-items: flex-start; }
.balades-jeu__lien { margin-top: calc(var(--rythme-bloc) * -1 + var(--espace-24)); }
@media (min-width: 1024px) {
  .balade-une { grid-template-columns: 310px minmax(0, 1fr); column-gap: var(--grille-gouttiere); align-items: center; }
}
.ligne__action { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-action); }

/* ---------- Étapes d'une balade (V21) : 390 — numéro 28/32 c1 (64) + titre et lieu, photo 342 × 228, citations ;
   1 440 — numéro 48/52, titre, citations c1–5 ; photo 310 × 207 c6–8 en haut de l'étape ---------- */
.etapes-balade { display: flex; flex-direction: column; }
.etape-ligne {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "num tete" "photo photo" "textes textes";
  row-gap: var(--espace-16); padding-block: var(--espace-24) var(--espace-40); border-top: var(--trait-filet) solid var(--couleur-filet);
  scroll-margin-top: calc(var(--haut-entete, 64px) + var(--espace-24));
}
.etape-ligne:first-child { border-top: 0; padding-top: var(--espace-8); }
.etape-ligne__numero { grid-area: num; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--couleur-texte); }
.etape-ligne--hors .etape-ligne__numero { color: var(--couleur-texte-secondaire); }
.etape-ligne__tete { grid-area: tete; display: flex; flex-direction: column; gap: var(--espace-4); padding-top: 4px; min-width: 0; }
.etape-ligne__tete h3 { margin: 0; }
.etape-ligne__photo { grid-area: photo; align-self: start; margin: 0; max-width: 342px; }
.etape-ligne__photo .photo__image { image-rendering: pixelated; }
.etape-ligne__textes { grid-area: textes; display: flex; flex-direction: column; gap: var(--espace-16); min-width: 0; max-width: 38em; }
.etape-ligne__textes .lien-fleche { align-self: flex-start; }
.etape-ligne:target .etape-ligne__numero { color: var(--couleur-action); }
@media (min-width: 1024px) {
  .etape-ligne { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); column-gap: var(--grille-gouttiere); grid-template-areas: "num photo" "tete photo" "textes photo"; grid-template-rows: auto auto 1fr; row-gap: var(--espace-16); }
  .etape-ligne__photo { max-width: 310px; }
  .etape-ligne__tete { padding-top: 0; }
}

/* ---------- Extrait de carte avec le tracé (§1.17) : 342 × 240 / c7–12 533 × 400 ---------- */
.plan-balade { margin: 0; display: flex; flex-direction: column; gap: var(--espace-8); }
.plan-balade svg { display: block; width: 100%; height: auto; aspect-ratio: 342 / 240; background: var(--couleur-fond); border: var(--trait-filet) solid var(--couleur-filet); }
@media (min-width: 1024px) { .plan-balade svg { aspect-ratio: 533 / 400; } }
.plan-balade figcaption { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.plan-balade__vert { fill: #E3E8DC; }
.plan-balade__rue { fill: none; stroke: var(--couleur-filet); stroke-linecap: round; stroke-linejoin: round; }
.plan-balade__eau { fill: none; stroke: #C9D2EE; stroke-linecap: round; stroke-linejoin: round; }
.plan-balade__eau-trait { fill: none; stroke: var(--couleur-decor); stroke-linecap: round; stroke-linejoin: round; }
.plan-balade__trace-fond { fill: none; stroke: var(--couleur-fond); stroke-linecap: round; stroke-linejoin: round; }
.plan-balade__trace { fill: none; stroke: var(--couleur-texte); stroke-linecap: butt; stroke-linejoin: round; }
.plan-balade__ordre { fill: none; stroke: var(--couleur-texte); }
/* repères du cadre Figma : carrés clairs à filet, numéro en encre (comme les repères de la carte de la ville) */
.plan-balade__repere rect { fill: var(--couleur-fond); stroke: var(--couleur-texte); }
.plan-balade__repere text { fill: var(--couleur-texte); font: 500 15px var(--police-sans); }
.plan-balade__etiquette { fill: var(--couleur-texte); font: 400 15px var(--police-sans); }
.plan-balade__etiquette-fond { fill: var(--couleur-fond); }
:root[data-contrast="high"] .plan-balade__rue { stroke: var(--couleur-texte-secondaire); }

/* ---------- Fiche balade : mise en page ---------- */
.fiche-balade { row-gap: var(--rythme-bloc); }
.fiche-balade .titre-page { padding-bottom: 0; }
.fiche-balade__essentiel { gap: 0; }
.fiche-balade__essentiel .chiffres-cles { border-bottom: 0; }
.fiche-balade__depart { display: flex; flex-direction: column; gap: var(--espace-16); }
.fiche-balade__depart + .reponse__lignes, .fiche-balade__depart + .hors-plan { margin-top: var(--espace-24); }
.fiche-balade__actions { flex-direction: column; align-items: flex-start; gap: var(--espace-8); }
.fiche-balade__actions .lien-fleche { min-height: var(--cible-minimum); }
.fiche-balade__essentiel > .source-ligne { margin-top: var(--espace-16); }
.fiche-balade__essentiel .hors-plan { margin-block: var(--espace-16); }
.fiche-balade__trace-titre { margin: 0 0 calc(var(--rythme-bloc) * -1 + var(--espace-16)); }
.fiche-balade__etapes > h2 { margin: 0; }
.fiche-balade__document .ligne__lien { align-items: flex-start; }
.fiche-balade__document .ligne__lien > .ico:last-child { align-self: center; }
@media (min-width: 1024px) {
  /* Départ c1–4 (421) avec son filet, l'action à sa hauteur c5–7 */
  .fiche-balade__depart { display: grid; grid-template-columns: calc((100% - 6 * var(--grille-gouttiere)) / 7 * 4 + 3 * var(--grille-gouttiere)) minmax(0, 1fr); column-gap: var(--grille-gouttiere); align-items: start; }
  .fiche-balade__actions { padding-top: var(--espace-16); }
  .fiche-balade__depart + .reponse__lignes { margin-top: var(--espace-40); }
  /* lignes de L'essentiel : libellé au-dessus de la valeur (cadre 232:47397), pas en deux colonnes */
  .fiche-balade__essentiel .reponse__ligne { display: flex; flex-direction: column; gap: var(--espace-4); }
}
.fiche-balade__photo .photo__image { image-rendering: pixelated; }
.fiche-balade .hors-plan { display: flex; gap: var(--espace-8); align-items: flex-start; padding: var(--espace-16); border: var(--trait-forme) dashed var(--couleur-champ); color: var(--couleur-texte-secondaire); font-size: var(--taille-meta); line-height: var(--interlignage-meta); }
.fiche-balade .hors-plan .ico { color: var(--couleur-texte); margin-top: 2px; }
.source-ligne { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.citation { display: flex; flex-direction: column; gap: var(--espace-16); max-width: 38em; }
.riviere-tete { margin-bottom: var(--espace-16); }
.autres-balades .ligne__lien { align-items: flex-start; padding-block: var(--espace-16); }
.autres-balades .ligne__lien > .ico:last-child { align-self: center; }

@media (min-width: 1024px) { .fiche-balade__carte { grid-row: 1 / span 2; } .fiche-balade__photo-cellule { align-self: start; } }