/* Site public WesternGo — mise en page de l'accueil (maquette validée « Affiche de rodéo »). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: hidden; }
section[id], [id="acces"] { scroll-margin-top: 16px; }

.section { max-width: 1240px; margin: 0 auto; padding-block: 72px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bande-sable { background: var(--sable-2); border-top: var(--bord); border-bottom: var(--bord); }
.bande-bordeaux { background: #8E2433; color: var(--papier); }
/* le Colporteur, la nuit : ciel étoilé violine, la lueur chaude du réverbère derrière la scène */
#colporteur { overflow-x: clip; } /* le cadre de la 3D déborde de la boîte (ciel, lueurs) : jamais de défilement horizontal */
#colporteur.bande-bordeaux {
  background:
    radial-gradient(ellipse 55% 42% at 50% 30%, rgba(255, 168, 88, .2), transparent 72%),
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(255, 248, 236, .85) 50%, transparent 55%) 0 0 / 230px 170px,
    radial-gradient(1.1px 1.1px at 140px 96px, rgba(255, 236, 196, .7) 50%, transparent 55%) 0 0 / 230px 170px,
    radial-gradient(1.8px 1.8px at 190px 22px, rgba(255, 248, 236, .75) 50%, transparent 55%) 0 0 / 310px 210px,
    linear-gradient(180deg, #1C1330 0%, #33163A 38%, #561B33 78%, #6E1F33 100%);
}
.bande-denim { background: var(--denim); color: var(--sable); }
.chapeau { margin: 12px 0 24px; max-width: 64ch; color: var(--gris); font-size: 18px; }
.titre-xl { margin-top: 8px; margin-bottom: 12px; }

/* ———————— en-tête ———————— */
/* Hauteurs fixes de l'en-tête et de la bande de télégraphe : le héros remplit exactement le premier écran, en CSS seul
   (aucun saut au chargement). L'en-tête tient sur une ligne sur ordinateur (menu replié sous 1280 px). */
:root { --entete-h: 72px; --telegraphe-h: 52px; }
@media (max-width: 900px) { :root { --entete-h: 122px; } }
.entete { min-height: var(--entete-h); position: relative; z-index: 6; background: var(--denim); color: var(--sable); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); box-shadow: inset 0 -4px 0 #0F2338; }
.entete > * { min-width: 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--sable); text-decoration: none; font-size: 26px; }
.logo:hover { color: #fff; }
.logo svg, .logo-chapeau { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.logo-chapeau { display: block; width: 50px; height: auto; }
.logo:hover svg, .logo:hover .logo-chapeau { transform: rotate(-12deg) translateY(-3px); }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; flex: 1 1 420px; font-weight: 700; font-size: 15.5px; font-stretch: 94%; }
.nav a { position: relative; color: var(--sable); text-decoration: none; padding: 10px 0; }
.nav a::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 9px; height: 9px; background: var(--moutarde); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: translateX(-50%) scale(0); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); }
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a:focus-visible::after { transform: translateX(-50%) scale(1) rotate(36deg); }
.entete-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qui { font-weight: 800; color: var(--moutarde); font-size: 15px; }
.son-bascule { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: var(--r-pilule); border: 2px solid rgba(243, 229, 204, .6); background: transparent; color: var(--sable); font: 800 15px var(--texte); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.son-bascule:hover { border-color: var(--sable); color: #fff; }
.son-bascule .son-on { display: none; }
.son-bascule[aria-pressed="true"] { background: var(--moutarde); border-color: var(--moutarde); color: var(--encre); }
.son-bascule[aria-pressed="true"] .son-on { display: block; }
.son-bascule[aria-pressed="true"] .son-off { display: none; }
.menu-bouton { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pilule); border: 2px solid var(--sable); background: transparent; color: var(--sable); font: 800 15px var(--texte); margin-left: auto; cursor: pointer; }
@media (max-width: 1520px) and (min-width: 901px) {
  .entete { gap: 10px 16px; }
  .nav { gap: 2px 13px; font-size: 15px; font-stretch: 86%; }
  .son-texte { display: none; }
  .son-bascule { padding: 0; }
}
@media (max-width: 1279px) and (min-width: 901px) {
  .menu-bouton { display: inline-flex; }
  .nav { display: none; order: 9; flex-basis: 100%; flex-direction: column; justify-content: flex-start; gap: 0; }
  .nav.ouvert { display: flex; }
  .nav a { padding: 12px 4px; border-bottom: 1px solid rgba(243, 229, 204, .2); }
  .nav a::after { display: none; }
}
@media (max-width: 900px) {
  .menu-bouton { display: inline-flex; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; justify-content: flex-start; gap: 0; }
  .nav.ouvert { display: flex; }
  .nav a { padding: 12px 4px; border-bottom: 1px solid rgba(243, 229, 204, .2); }
  .nav a::after { display: none; }
  .entete-actions { flex-basis: 100%; flex-wrap: nowrap; }
  .entete-actions .btn { flex: 1 1 140px; }
  .son-bascule { flex: 0 0 auto; }
}

/* ———————— héros : aube sur le désert ———————— */
.heros { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; min-height: calc(100vh - var(--entete-h) - var(--telegraphe-h)); min-height: calc(100svh - var(--entete-h) - var(--telegraphe-h)); background: linear-gradient(180deg, #0C1D30 0%, var(--denim) 34%, #1D3D5F 66%, #2B4B6C 84%, #3F4F6B 100%); color: var(--sable); display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 20px 0; max-width: none; padding-block: 56px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.heros > * { min-width: 0; }
.heros > :not(.heros-decor) { position: relative; z-index: 1; }
.heros-texte { --texte-l: clamp(390px, calc(26vw + 58px), 600px); flex: 0 0 var(--texte-l); max-width: var(--texte-l); z-index: 2 !important; }
.heros-titre { container-type: inline-size; }
/* La scène : la boîte garde ses proportions (l'affiche correspond toujours, au pixel près) et prend toute la place
   restante, bornée par la hauteur du premier écran. Le diorama y est cadré dans .heros-cadre : plus de place = plus grand.
   Sa marge gauche transparente (sans pixel du diorama) peut glisser sous la colonne de texte, qui reste au-dessus. */
.heros-scene { flex: 0 0 auto; margin-left: -16px; width: min(calc(100cqi - clamp(390px, calc(26vw + 58px), 600px) + 16px), calc((100svh - var(--entete-h) - var(--telegraphe-h) - 92px) * 1.7436), 1600px); display: flex; flex-direction: column; gap: 12px; }
/* écran très bas : le héros peut dépasser un écran plutôt que d'écraser la scène */
@media (max-height: 679px) and (min-width: 1024px) { .heros-scene { width: min(calc(100cqi - clamp(390px, calc(26vw + 58px), 600px) + 16px), 1600px); } }
/* typographie qui s'adapte à la hauteur : tout le texte tient dans le premier écran */
@media (min-width: 1024px) {
  .heros .heros-surtitre { font-size: 13px; letter-spacing: 0; font-stretch: 92%; gap: 4px 8px; }
  .heros .heros-titre .marquee { margin-top: clamp(16px, 2.6svh, 26px); }
  .heros .heros-logo { font-size: min(clamp(36px, calc((100cqi - 72px) / 6.15), 92px), 8.4svh); }
  .heros .heros-signature { margin-top: clamp(10px, 1.8svh, 18px); font-size: clamp(22px, min(2.9vw, 3.5svh), 40px); }
  .heros .heros-intro { margin-top: clamp(8px, 1.6svh, 16px); font-size: clamp(15px, 1.95svh, 18px); }
  .heros .heros-boutons { margin-top: clamp(12px, 2.4svh, 24px); }
  .heros .heros-prix { margin-top: clamp(10px, 2.2svh, 22px); font-size: clamp(13.5px, 1.7svh, 15px); }
  .heros .heros-prix strong { font-size: clamp(17px, 2.2svh, 21px); }
  .heros .heros-suite { margin-top: clamp(2px, 1svh, 10px); }
}
@media (min-width: 1024px) and (max-height: 920px) {
  .heros .heros-boutons { flex-wrap: nowrap; gap: 8px; }
  .heros .heros-boutons .btn-xl { min-height: 46px; font-size: 15.5px; font-stretch: 88%; padding: 0 15px; gap: 6px; white-space: nowrap; }
  .heros .heros-boutons .btn-xl svg { width: 18px; height: 18px; }
}
/* écran bas : la flèche « Pourquoi tout le monde y gagne » cède sa place (la bande de télégraphe est juste dessous) */
@media (min-width: 1024px) and (max-height: 820px) { .heros .heros-suite { display: none; } }
/* tablette et téléphone : le texte au-dessus, la scène entière en dessous */
@media (max-width: 1023px) {
  .heros { flex-direction: column; align-items: stretch; }
  .heros-texte { --texte-l: auto; flex: none; width: 100%; max-width: 760px; margin-inline: auto; }
  .heros-scene { width: min(100%, 1084px); margin-inline: auto; }
}
.heros-surtitre { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; color: var(--moutarde); }
.heros-signature { margin: 18px 0 0; font-weight: 900; font-stretch: 118%; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.08; color: #fff; text-shadow: 0 3px 0 #0C1D30; }
.heros-intro { margin: 16px 0 0; font-size: 18px; color: #E9DCC3; max-width: 54ch; }
.heros-boutons { margin-top: 24px; }
.heros-prix { margin: 22px 0 0; font-size: 15px; color: #E9DCC3; }
.heros-prix strong { font-size: 21px; color: var(--moutarde); }
.heros-compte { margin: 8px 0 0; font-size: 14px; color: #BFD0E0; min-height: 1.4em; }
.heros-suite { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 44px; color: var(--sable); font-weight: 800; font-size: 15px; text-decoration: none; border-bottom: 2px dashed rgba(232, 169, 58, .7); }
.heros-suite:hover { color: #fff; border-bottom-color: var(--moutarde); }
.heros-suite svg { animation: wgSuite 1.8s ease-in-out infinite; }
@keyframes wgSuite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* décor : étoiles qui pâlissent, lueur d'aube, soleil levant, guirlande, buttes en parallaxe, poussière */
.heros-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.heros-etoiles { position: absolute; inset: 0 0 45% 0; opacity: .75; background-image: radial-gradient(1.6px 1.6px at 20px 30px, #FFF8EC 50%, transparent 52%), radial-gradient(1.2px 1.2px at 90px 80px, #F3E5CC 50%, transparent 52%), radial-gradient(2px 2px at 160px 20px, #FFE3A0 50%, transparent 52%), radial-gradient(1.2px 1.2px at 230px 110px, #FFF8EC 50%, transparent 52%), radial-gradient(1.5px 1.5px at 300px 55px, #F3E5CC 50%, transparent 52%); background-size: 340px 140px; -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); animation: wgScintille 4.5s ease-in-out infinite alternate; }
@keyframes wgScintille { from { opacity: .45; } to { opacity: .85; } }
.heros-lueur { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 62% at 64% 100%, rgba(247, 176, 92, .78) 0%, rgba(214, 98, 62, .45) 30%, rgba(122, 79, 160, .18) 56%, transparent 74%); }
.heros-soleil { position: absolute; left: 66%; bottom: 20px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; background: radial-gradient(circle, #FFE7B0 0 20%, #FFB85C 30%, rgba(240, 130, 70, .45) 42%, rgba(240, 130, 70, .12) 58%, rgba(240, 130, 70, 0) 70%); animation: wgLever 9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes wgLever { from { transform: translateY(80px) scale(.92); opacity: .6; } to { transform: none; opacity: 1; } }
.heros-guirlande { position: absolute; top: 0; left: 0; width: 100%; height: 80px; }
.heros-guirlande .fil { fill: none; stroke: #091726; stroke-width: 2.5; }
.heros-guirlande .ampoule { fill: #FFE3A0; filter: drop-shadow(0 0 5px #FFC857); animation: wgAmpoule 2.4s ease-in-out infinite; }
.heros-guirlande .a1 { fill: #FFB4A8; animation-delay: -.8s; }
.heros-guirlande .a2 { fill: #FFD27A; animation-delay: -1.6s; }
@keyframes wgAmpoule { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.heros-plan { position: absolute; left: -4%; bottom: 0; width: 108%; will-change: transform; }
.heros-plan-loin { height: 230px; fill: #2C4E72; opacity: .95; }
.heros-plan-milieu { height: 175px; fill: #1B3956; }
.heros-plan-pres { height: 120px; fill: #0F2236; }
.heros-plan .eolienne { transform-box: fill-box; transform-origin: center; animation: wgTourne 7s linear infinite; }
@keyframes wgTourne { to { transform: rotate(360deg); } }
.heros-poussiere i { position: absolute; bottom: 40px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 227, 160, .55); animation: wgPoussiere 11s linear infinite; }
.heros-poussiere i:nth-child(1) { left: 6%; animation-delay: -1s; }
.heros-poussiere i:nth-child(2) { left: 14%; animation-delay: -6s; animation-duration: 14s; }
.heros-poussiere i:nth-child(3) { left: 23%; animation-delay: -3s; }
.heros-poussiere i:nth-child(4) { left: 31%; animation-delay: -9s; animation-duration: 13s; }
.heros-poussiere i:nth-child(5) { left: 40%; animation-delay: -4s; }
.heros-poussiere i:nth-child(6) { left: 49%; animation-delay: -7s; animation-duration: 15s; }
.heros-poussiere i:nth-child(7) { left: 57%; animation-delay: -2s; }
.heros-poussiere i:nth-child(8) { left: 64%; animation-delay: -10s; animation-duration: 12s; }
.heros-poussiere i:nth-child(9) { left: 72%; animation-delay: -5s; }
.heros-poussiere i:nth-child(10) { left: 80%; animation-delay: -8s; animation-duration: 16s; }
.heros-poussiere i:nth-child(11) { left: 88%; animation-delay: -3.5s; }
.heros-poussiere i:nth-child(12) { left: 95%; animation-delay: -11s; animation-duration: 14s; }
@keyframes wgPoussiere { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(60px, -320px); opacity: 0; } }
.heros-pause *, .heros-pause *::before, .heros-pause *::after { animation-play-state: paused !important; }

/* l'enseigne de saloon : panneau rouge, ampoules qui chassent, lettres qui s'allument */
.marquee { position: relative; display: inline-block; max-width: 100%; margin: 26px 0 4px; padding: 22px clamp(18px, 2.4vw, 34px) 16px; border-radius: 18px; background: linear-gradient(180deg, #C23A2E, #8E2433 78%); border: 4px solid #4E120E; box-shadow: inset 0 0 0 5px #B02F25, inset 0 0 0 8px #E8A93A, inset 0 0 0 11px #4E120E, 0 8px 0 #091726, 0 22px 44px rgba(0, 0, 0, .35); transform-origin: 50% -60px; animation: wgBalance 7s ease-in-out infinite; }
@keyframes wgBalance { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.marquee::before, .marquee::after { content: ''; position: absolute; top: -27px; width: 3px; height: 24px; background: repeating-linear-gradient(180deg, #C9B48F 0 5px, #6B5B4B 5px 7px); }
.marquee::before { left: 22%; }
.marquee::after { right: 22%; }
.marquee-fronton { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); white-space: nowrap; padding: 3px 14px; border-radius: 999px; background: var(--moutarde); color: var(--encre); border: 3px solid #4E120E; font: 900 12.5px/1.3 var(--texte); letter-spacing: 2px; text-transform: uppercase; }
.heros-logo { margin: 0; font-size: clamp(36px, calc((100cqi - 72px) / 6.15), 92px); line-height: .98; color: #FFF3D6; text-shadow: 0 0 14px rgba(255, 200, 87, .55), 0 4px 0 #4E120E; white-space: nowrap; }
.marquee-lettres > span { display: inline-block; }
.marquee.allumee .marquee-lettres > span { animation: wgAllume .9s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes wgAllume { 0% { opacity: .25; text-shadow: none; transform: translateY(6px); } 60% { opacity: 1; text-shadow: 0 0 26px #FFE3A0, 0 4px 0 #4E120E; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
.marquee-lettres > span.vacille { animation: wgVacille .7s steps(1) both; }
@keyframes wgVacille { 0% { opacity: 1; } 15% { opacity: .3; text-shadow: none; } 30% { opacity: 1; } 45% { opacity: .45; text-shadow: none; } 60%, 100% { opacity: 1; } }
.marquee-ampoules { position: absolute; inset: 9px; pointer-events: none; }
.marquee-ampoules i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #FFF3C4; box-shadow: 0 0 6px 2px #FFC857, 0 0 14px 2px rgba(255, 176, 32, .55); animation: wgChasse .9s steps(1) infinite; animation-delay: calc(var(--k) * -.3s); }
@keyframes wgChasse { 0% { background: #FFF3C4; box-shadow: 0 0 6px 2px #FFC857, 0 0 14px 2px rgba(255, 176, 32, .55); } 33.33%, 100% { background: #8A5A2E; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); } }

/* boutons : survol vivant, coup de tampon au clic */
.heros-boutons .btn { position: relative; overflow: hidden; }
.heros-boutons .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%); transform: translateX(-120%); }
.heros-boutons .btn:hover::after { transition: transform .7s ease; transform: translateX(120%); }
.heros-boutons .btn:hover { transform: translateY(-2px) rotate(-1deg); }
.heros-boutons .btn:hover .btn-chapeau { animation: wgChapeau .6s ease; }
@keyframes wgChapeau { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) rotate(-18deg); } }
.fete-tamponne { animation: wgTamponne .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes wgTamponne { 0% { transform: scale(.94); } 60% { transform: scale(1.04) rotate(-1deg); } 100% { transform: none; } }

@media (max-width: 720px) {
  .heros { padding-block: 44px 40px; gap: 16px; }
  .heros-guirlande { height: 56px; }
  .heros-plan-loin { height: 150px; }
  .heros-plan-milieu { height: 115px; }
  .heros-plan-pres { height: 78px; }
  .heros-soleil { width: 200px; height: 200px; margin-left: -100px; bottom: 10px; left: 70%; }
  .marquee { margin-top: 24px; border-width: 3px; }
  .marquee-fronton { font-size: 11px; letter-spacing: 1.4px; padding: 2px 10px; }
  .marquee-ampoules i { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .heros-intro { font-size: 17px; }
}

/* saynètes de la scène du héros : éclair de la photo de groupe, confettis */
.heros-eclair { position: absolute; inset: 0; z-index: 4; background: #FFF8EC; pointer-events: none; animation: wgEclair .6s ease-out both; }
@keyframes wgEclair { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
.heros-confetti { position: absolute; top: 0; z-index: 4; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }

/* bande de télégraphe */
.telegraphe { position: relative; z-index: 1; overflow: hidden; height: var(--telegraphe-h); display: flex; align-items: center; background: var(--papier); color: var(--encre); border-block: 3px solid var(--encre); font: 800 14px/1 var(--texte); letter-spacing: 1.6px; text-transform: uppercase; }
.telegraphe-piste { display: flex; width: max-content; animation: wgDefile 55s linear infinite; }
.telegraphe:hover .telegraphe-piste { animation-play-state: paused; }
.telegraphe-texte { flex: none; margin: 0; padding: 12px 28px 12px 0; white-space: nowrap; }
.telegraphe-texte b { display: inline-block; margin-right: 14px; padding: 4px 10px; border-radius: 4px; background: var(--bandana); color: #fff; font-family: var(--display); font-weight: 400; letter-spacing: 1px; }
.telegraphe-texte i { margin: 0 12px; font-style: normal; font-weight: 900; color: var(--brique); }
@keyframes wgDefile { to { transform: translateX(-50%); } }

/* ———————— scénettes 3D et affiches ———————— */
.scene-boite { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; }
.scene-heros { aspect-ratio: 20.16 / 11.562; border-radius: 0; }
/* le rectangle de référence : 1 / 1,26 de la largeur, 1 / 1,23 de la hauteur (proportions 16 / 9,4) */
.heros-cadre { position: absolute; left: 10.3175%; top: 6.5041%; width: 79.3651%; height: 81.3008%; pointer-events: none; }
/* bords adoucis (rien n'est censé y toucher : simple sécurité, jamais de coupure nette) */
.scene-heros .scene-affiche, .scene-heros .wg-scn-canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent); mask-composite: intersect; }
.scene-heros .wg-hint { bottom: 2.4%; }
.scene-heros .scene-jouer { bottom: 3%; }
/* téléphone : une scène plus haute, la rue passe en deux rangées (personnages plus grands, place pour les bulles) */
@media (max-width: 600px) {
  /* téléphone : la scène occupe toute la largeur de l'écran, les deux rangées de personnages y tiennent entières,
     les bouts du plateau s'effacent en douceur sur les bords */
  .heros-scene { width: calc(100% + 32px); max-width: none; margin-inline: -16px; }
  .scene-heros { aspect-ratio: 39 / 41; }
  .heros-cadre { left: 3%; width: 94%; top: 2.5%; height: 89.415%; }
  .scene-heros .scene-affiche, .scene-heros .wg-scn-canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .scene-heros .scene-etiquette { left: 16px; }
}
/* Passage affiche → 3D du héros : l'affiche est rendue au cadrage exact de la scène (js/fete/heros-cadrage.js).
   La 3D reste invisible tant que la rue n'est pas complète, puis apparaît en 0,5 s par-dessus l'affiche identique,
   qui s'efface ensuite : ni saut de taille, ni personnages de remplacement. Les bulles peuvent déborder la boîte. */
.scene-heros { overflow: visible; }
.scene-heros .scene-affiche { transition: opacity .2s ease .5s; }
.scene-heros .wg-scn-canvas { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.scene-heros.vivante .wg-scn-canvas { opacity: 1; pointer-events: auto; }
.scene-heros .wg-scn-overlay { opacity: 0; visibility: hidden; }
.scene-heros.vivante .wg-scn-overlay { opacity: 1; visibility: visible; transition: opacity .4s ease .35s; }
.scene-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s ease; pointer-events: none; }
.scene-boite.vivante .scene-affiche { opacity: 0; }
.scene-boite .wg-scn-canvas { position: absolute; inset: 0; }
.scene-boite .wg-scn-overlay { z-index: 2; }
.scene-etiquette { position: absolute; left: 10px; top: 10px; z-index: 3; border: 2px solid var(--encre); }
.scene-jouer { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; white-space: nowrap; }
.scene-boite.vivante .scene-jouer { display: none; }
.scene-note { position: absolute; left: 12px; right: 12px; bottom: 70px; z-index: 3; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(35, 27, 20, .78); color: var(--papier); font-size: 14px; text-align: center; }
.scene-boite .scene-fermer { position: absolute; right: 10px; top: 10px; z-index: 4; }
/* ——— scénettes des sections (Colporteur, scène collective, enquête, rodéo) ———
   « Agrandir le cadre, pas diminuer la scénette » : la zone de dessin (.scene-zone) a les proportions exactes de son
   affiche, et le diorama entier y tient avec de l'air (plateau et accessoires jamais rognés). La 3D est cadrée par
   .scene-cadre (même cadrage que l'affiche, rendue par ce rectangle) : aucun saut au passage. Le bouton « Voir en 3D »
   et l'indication « Clique sur les personnages » occupent une bande sous le plateau ; les bulles peuvent déborder. */
.scene-section { aspect-ratio: auto; overflow: visible; border-radius: 0; padding-bottom: 58px; }
.scene-section .scene-zone, .scene-section .scene-zone.wg-scn { position: relative; width: 100%; aspect-ratio: var(--zone-ar, 1.41); overflow: visible; }
.scene-section .scene-cadre { position: absolute; pointer-events: none; left: var(--cl); top: var(--ct); width: var(--cw); height: var(--ch); }
.scene-section .scene-affiche { transition: opacity .2s ease .5s; }
.scene-section .wg-scn-canvas { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.scene-section.vivante .wg-scn-canvas { opacity: 1; pointer-events: auto; }
.scene-section .wg-scn-overlay { opacity: 0; visibility: hidden; }
.scene-section.vivante .wg-scn-overlay { opacity: 1; visibility: visible; transition: opacity .4s ease .35s; }
.scene-section .scene-jouer { bottom: 6px; }
.scene-section .wg-hint { bottom: -50px; }
.scene-section .scene-note { bottom: 2px; }
/* cadrages mesurés (préréglage par préréglage) : à refaire avec les affiches si l'on change ces valeurs */
.scene-s-colporteur { --zone-ar: 1.5765; --cl: -12.332%; --ct: -21.618%; --cw: 124.665%; --ch: 122.836%; } /* la rue de nuit (préréglage « vedette ») */
.fiche-perso { background: var(--papier); color: var(--encre); border: var(--bord); border-radius: 18px; padding: 14px 16px; box-shadow: 4px 4px 0 var(--encre); display: flex; gap: 14px; align-items: flex-start; }
.fiche-perso img { flex: 0 0 auto; width: 70px; height: 120px; object-fit: contain; }
.fiche-perso h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; }
.fiche-perso p { margin: 4px 0 0; font-size: 15px; }
.fiche-perso .role { color: var(--brique); font-weight: 800; }
/* la fiche du héros : par-dessus le bas de la scène, le personnage en 3D sur toute sa hauteur, un bouton pour fermer */
#fiche-heros.fiche-perso { position: absolute; z-index: 6; right: 3%; bottom: 4%; width: min(480px, 94%); padding: 12px 46px 12px 12px; align-items: center; }
#fiche-heros .perso-3d { flex: 0 0 auto; width: 150px; margin: 0; }
#fiche-heros .fiche-heros-texte { flex: 1 1 auto; min-width: 0; }
.fiche-fermer { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--encre); background: var(--sable); color: var(--encre); font: 900 22px/1 var(--texte); cursor: pointer; }
.fiche-fermer:hover { background: var(--moutarde); }
@media (max-width: 600px) {
  #fiche-heros.fiche-perso { left: 8px; right: 8px; bottom: 8px; width: auto; }
  #fiche-heros .perso-3d { width: 112px; }
  #fiche-heros h3 { font-size: 21px; }
  #fiche-heros p { font-size: 14px; }
}

/* ———————— comment ça marche ———————— */
.etapes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.etapes h3 { margin: 16px 0 6px; font-size: 21px; font-weight: 900; }
.etapes p { margin: 0; color: var(--gris); }
.etape-num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; font-weight: 900; font-size: 25px; }

/* ———————— personnages ———————— */
.persos { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.persos-grille { flex: 1 1 380px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.perso-carte { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 10px 6px 12px; border-radius: 20px; border: 3px solid var(--encre); background: transparent; color: var(--encre); font-family: var(--texte); cursor: pointer; }
.perso-carte[aria-pressed="true"] { background: var(--papier); border-color: var(--bandana); }
.perso-carte:hover { background: rgba(255, 248, 236, .6); }
.perso-rond { width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--encre); overflow: hidden; display: block; }
.perso-rond img { display: block; width: 100%; height: 190%; object-fit: cover; object-position: 50% 0; }
.perso-nom { font-weight: 900; font-size: 15px; line-height: 1.15; text-align: center; }
.perso-role { font-size: 12.5px; color: var(--gris-2); text-align: center; line-height: 1.2; }
.perso-detail { flex: 1.3 1 440px; min-width: 0; background: var(--denim); color: var(--sable); border-radius: 28px; padding: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
/* le personnage en 3D : toute la hauteur de la fiche, du chapeau aux bottes ; l'affiche (même cadrage) attend qu'il soit posé */
.perso-3d { position: relative; flex: 0 0 auto; width: clamp(190px, 41%, 270px); aspect-ratio: 1 / 1.9; margin: 0 auto; }
.perso-3d .perso-affiche, .perso-3d .wg-scn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(#000 93%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(#000 93%, transparent); mask-composite: intersect; }
.perso-3d .perso-affiche, .perso-3d .wg-scn-canvas { opacity: 0; pointer-events: none; transition: none; }
/* une seule silhouette à la fois : on cache d'un coup, on n'apparaît en fondu que depuis le fond de la fiche */
.perso-3d[data-etat="affiche"] .perso-affiche { opacity: 1; }
.perso-3d[data-etat="3d"] .wg-scn-canvas { opacity: 1; pointer-events: auto; }
.perso-3d.fondu[data-etat="affiche"] .perso-affiche, .perso-3d.fondu[data-etat="3d"] .wg-scn-canvas { transition: opacity .22s ease; }
.perso-detail .infos { flex: 1 1 260px; min-width: 0; }
.perso-detail h3 { margin: 8px 0 2px; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.05; color: #fff; }
.perso-detail .role { margin: 0 0 12px; font-weight: 800; color: var(--moutarde); }
.perso-detail .tag { margin: 0 0 12px; font-style: italic; font-size: 19px; color: #fff; }
.perso-detail p { margin: 0 0 10px; font-size: 16px; color: #D6E1EC; }
.perso-detail strong { color: #fff; }
.presence { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #9FE0B5; }
.presence.inactif { color: #FFB4A8; }
/* Actif (vert) ou Inactif (rouge) sur chaque carte de personnage */
.perso-etat { padding: 2px 10px; font-size: 12px; }

/* ———————— carte ———————— */
.filtres { margin-bottom: 14px; }
.carte-mise { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.carte-boite { flex: 3 1 560px; min-width: 0; position: relative; border: var(--bord); border-radius: 22px; overflow: hidden; background: #F1E2C6; min-height: 380px; }
.carte-leaflet { position: absolute; inset: 0; }
.carte-attente { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; color: var(--gris); font-weight: 700; }
.carte-cote { flex: 1 1 280px; min-width: 0; }
.leaflet-container { font-family: var(--texte); }
.wg-pin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--encre); display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; box-shadow: 0 3px 0 rgba(35, 27, 20, .35); }
.wg-pin.parking { border-radius: 10px; background: var(--cactus); }
.wg-pin.partenaire { background: var(--denim); }
.wg-pin.nourriture { background: var(--moutarde); color: var(--encre); }
.wg-pin.mode { background: var(--papier); color: var(--encre); }
.wg-pin.curiosite { background: var(--prune); }
.wg-pin.service { background: #fff; color: var(--bandana); border-radius: 8px; }
.wg-pin.bon-coup { width: 44px; height: 44px; background: var(--moutarde); box-shadow: 0 0 0 4px rgba(232, 169, 58, .45), 0 3px 0 rgba(35, 27, 20, .35); }
.wg-pin.vedette { position: relative; width: 44px; height: 44px; box-shadow: 0 0 0 4px var(--moutarde), 0 0 14px 5px rgba(232, 169, 58, .55), 0 3px 0 rgba(35, 27, 20, .35); } /* commerce en vedette : article gratuit ou lot */
.wg-pin.vedette .pin-etoile { position: absolute; top: -9px; right: -9px; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--encre); background: var(--moutarde); display: flex; align-items: center; justify-content: center; }
.wg-pin.vedette .pin-etoile svg { width: 12px; height: 12px; }
.wg-pin.vedette .pin-etoile path { fill: var(--encre); }
.wg-pin.perso { overflow: hidden; background: var(--papier); width: 42px; height: 42px; }
.wg-pin.perso img { width: 100%; height: 200%; object-fit: cover; object-position: 50% 0; align-self: flex-start; }
.wg-scene-pin { position: relative; width: 48px; height: 48px; }
.wg-scene-pin .coeur { position: absolute; inset: 0; border-radius: 50%; background: var(--bandana); border: 3px solid var(--encre); display: flex; align-items: center; justify-content: center; }
.wg-scene-pin .onde { position: absolute; left: -46px; top: -46px; width: 140px; height: 140px; border-radius: 50%; background: var(--moutarde); opacity: .5; animation: wgOnde 2.4s ease-out infinite; pointer-events: none; }
.wg-scene-pin .onde.deux { background: var(--bandana); animation-delay: 1.2s; }
@keyframes wgOnde { 0% { transform: scale(.45); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
.leaflet-popup-content { font-size: 14px; line-height: 1.4; }
.leaflet-popup-content strong { font-size: 15px; }

/* ———————— l'application : la vraie application dans un téléphone dessiné en CSS (site/appli.js) ———————— */
.appli { position: relative; overflow-x: clip; } /* le soleil derrière le téléphone ne déborde jamais */
.appli-grille { display: grid; grid-template-columns: auto minmax(0, 620px); justify-content: center; gap: 56px; align-items: center; margin-top: 8px; }
/* vitrine de l'application : titre et chapeau centrés au-dessus du téléphone et de la visite */
.appli > .surtitre, .appli > .titre-xl { text-align: center; }
.appli > .chapeau { text-align: center; margin-inline: auto; }
.appli-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; }
/* soleil couchant derrière le téléphone */
.appli-scene::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 46%; width: 132%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(232, 169, 58, .2) 0 8deg, transparent 8deg 20deg), radial-gradient(circle, rgba(232, 169, 58, .35), transparent 68%);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%); }
.telephone { --k: .8; position: relative; z-index: 1; padding: 11px; border-radius: calc(55px * var(--k) + 11px);
  background: linear-gradient(150deg, #4C535D 0%, #1C1F24 20%, #2D3137 62%, #111316 100%);
  box-shadow: inset 0 0 0 1.5px #737B86, inset 0 0 0 4px #0A0B0D, 10px 14px 0 rgba(35, 27, 20, .9), 0 34px 60px -24px rgba(0, 0, 0, .6); }
.tel-bouton { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #22262B, #5F6670); }
.tel-action { left: -3px; top: 17%; height: 4.5%; }
.tel-volume-haut { left: -3px; top: 25%; height: 8%; }
.tel-volume-bas { left: -3px; top: 35%; height: 8%; }
.tel-marche { right: -3px; left: auto; top: 27%; height: 12%; background: linear-gradient(270deg, #22262B, #5F6670); }
.tel-ecran { position: relative; width: calc(390px * var(--k)); height: calc(844px * var(--k)); border-radius: calc(47px * var(--k)); overflow: hidden; background: var(--denim); isolation: isolate; }
.tel-statut { position: relative; height: calc(47px * var(--k)); display: grid; grid-template-columns: 1fr calc(130px * var(--k)) 1fr; align-items: center; background: var(--denim); color: #fff; font: 800 calc(15.5px * var(--k))/1 var(--texte); }
.tel-heure { justify-self: center; font-variant-numeric: tabular-nums; }
.tel-ilot { justify-self: center; width: calc(122px * var(--k)); height: calc(34px * var(--k)); border-radius: 999px; background: #000; }
.tel-icones { justify-self: center; display: flex; gap: calc(5px * var(--k)); align-items: center; }
.tel-icones svg { width: auto; height: calc(11px * var(--k)); fill: currentColor; color: #fff; }
.tel-app { position: relative; width: calc(390px * var(--k)); height: calc(775px * var(--k)); overflow: hidden; background: var(--sable); }
.tel-app iframe { position: absolute; left: 0; top: 0; width: 390px; height: 775px; border: 0; background: var(--sable); transform: scale(var(--k)); transform-origin: 0 0; }
.tel-attente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--gris); }
.tel-attente .display { font-size: calc(34px * var(--k)); color: var(--denim); }
.tel-bas { height: calc(22px * var(--k)); display: flex; align-items: flex-start; justify-content: center; background: var(--encre); }
.tel-barre { width: calc(134px * var(--k)); height: max(3px, calc(5px * var(--k))); border-radius: 3px; background: rgba(255, 255, 255, .88); }
.tel-ouvrir { display: none; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.tel-ouvrir:focus-visible { outline: 4px solid var(--moutarde); outline-offset: -4px; }
.appli-note { position: relative; z-index: 1; margin: 0; max-width: 34ch; text-align: center; color: var(--gris); }
.appli-visite { min-width: 0; max-width: 620px; }
.appli-visite-titre { margin: 0 0 12px; font: 400 26px/1.1 var(--display); color: var(--brique); }
.appli-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.appli-etape { position: relative; width: 100%; display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px 14px 12px; border-radius: 18px; border: 2px solid rgba(35, 27, 20, .22); background: rgba(255, 248, 236, .5); color: var(--encre); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.appli-etape:hover { border-color: var(--encre); background: var(--papier); }
.appli-etape[aria-current="true"] { border: 2px solid var(--encre); background: var(--papier); box-shadow: 5px 5px 0 var(--encre); }
.appli-ico { flex: 0 0 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; border: 2px solid var(--encre); background: var(--sable-2); color: var(--encre); }
.appli-etape[aria-current="true"] .appli-ico { background: var(--moutarde); }
.appli-etape-vedette .appli-ico, .appli-etape-vedette[aria-current="true"] .appli-ico { flex-basis: 56px; height: 56px; background: var(--bandana); color: #fff; }
.appli-etape-vedette .appli-ico svg { width: 30px; height: 30px; }
.appli-txt { min-width: 0; }
.appli-nom { display: block; font-weight: 900; font-size: 17.5px; line-height: 1.2; font-stretch: 108%; }
.appli-etape-vedette .appli-nom { font-size: 22px; }
.appli-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; vertical-align: 3px; border-radius: var(--r-pilule); background: var(--bandana); color: #fff; font: 900 11px/1.6 var(--texte); letter-spacing: .5px; text-transform: uppercase; }
.appli-legende { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--gris); }
.appli-legende-courante { display: none; }
.appli-progres { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--moutarde); transform: scaleX(0); transform-origin: 0 50%; }
.appli-auto .appli-etape[aria-current="true"] .appli-progres { animation: appliProgres var(--duree-etape, 6s) linear forwards; }
@keyframes appliProgres { to { transform: scaleX(1); } }
.appli-actions { margin-top: 18px; }
@media (max-width: 1100px) {
  .appli-grille { gap: 32px; }
  .telephone { --k: .7; }
}
/* Téléphone : le visiteur en a déjà un en main. Les écrans en boutons compacts, un aperçu réduit, non interactif
   (un toucher ouvre la vraie application), puis le bouton pour l'ouvrir. */
@media (max-width: 760px) {
  .appli-grille { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .appli-visite { display: contents; }
  .appli-visite-titre { order: 1; margin-top: 4px; font-size: 22px; }
  .appli-etapes { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .appli-legende-courante { order: 3; display: block; min-height: 4.3em; margin: 10px 2px 4px; font-size: 15px; line-height: 1.4; color: var(--gris); }
  .appli-scene { order: 4; padding: 0; margin-top: 6px; }
  .appli-actions { order: 5; }
  .appli-actions .btn-xl { flex: 1 1 100%; }
  .appli-etape { align-items: center; gap: 8px; padding: 8px 10px 10px 8px; border-radius: 14px; }
  .appli-etape[aria-current="true"] { box-shadow: 3px 3px 0 var(--encre); }
  .appli-etapes li { display: flex; }
  .appli-etapes li:first-child, .appli-etapes li:last-child { grid-column: 1 / -1; }
  .appli-ico, .appli-etape-vedette .appli-ico, .appli-etape-vedette[aria-current="true"] .appli-ico { flex-basis: 36px; height: 36px; border-radius: 10px; }
  .appli-ico svg, .appli-etape-vedette .appli-ico svg { width: 20px; height: 20px; }
  .appli-nom, .appli-etape-vedette .appli-nom { font-size: 14.5px; font-stretch: 96%; }
  .appli-etape .appli-legende, .appli-tag { display: none; }
  .telephone { --k: .6; }
  .tel-app iframe { pointer-events: none; }
  .tel-ouvrir { display: block; }
}

/* ———————— colporteur ———————— */
.colporteur { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.colporteur > * { min-width: 0; }
/* la scène, grande et entière (plateau, réverbère, baril, caisses, panneau), puis le texte en deux colonnes */
.scene-s-colporteur { width: min(100%, 1040px); margin: 0 auto; }
/* le canevas de la nuit déborde de l'affiche (ciel, côtés) : la poussée de caméra n'y coupe jamais le diorama */
.scene-section .scene-toile, .scene-section .scene-toile.wg-scn { position: absolute; inset: -12% -10% 0; overflow: visible; }
.scene-s-colporteur .scene-toile .wg-scn-canvas {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 4%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 4%);
  mask-composite: intersect;
}
.scene-s-colporteur .scene-toile .wg-hint { bottom: -50px; }
.colporteur-texte { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px 48px; align-items: start; }
@media (max-width: 860px) { .colporteur-texte { grid-template-columns: minmax(0, 1fr); } }
/* très grand écran : la scène et le texte côte à côte */
@media (min-width: 1700px) {
  .section.colporteur { max-width: 1640px; flex-direction: row; gap: 56px; }
  .scene-s-colporteur { flex: 0 0 960px; }
  .scene-s-colporteur .scene-toile, .scene-s-colporteur .scene-toile.wg-scn { inset: -12% -5% 0; } /* côte à côte : le canevas ne couvre jamais le texte */
  .colporteur-texte { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .scene-s-colporteur { width: calc(100% + 32px); max-width: none; margin-inline: -16px; }
  .scene-section .scene-toile, .scene-section .scene-toile.wg-scn { inset: -14% 0 0; } /* plein écran : les côtés coupent au bord de l'écran */
  .scene-s-colporteur .scene-toile .wg-scn-canvas { -webkit-mask-image: linear-gradient(transparent, #000 4%); mask-image: linear-gradient(transparent, #000 4%); }
  .scene-s-colporteur .wg-bubble { font-size: 13px; max-width: 180px; padding: 6px 10px 7px; border-width: 2.5px; box-shadow: 3px 3px 0 #231B14; }
  .scene-s-colporteur .wg-bubble b { font-size: 10px; }
  /* un peu plus de ciel au-dessus de la scène : les bulles de la poussée de caméra restent dans la bande */
  #colporteur > .section { padding-top: 80px; }
  /* « Revenir à l'image » descend dans la bande du bouton : jamais par-dessus les bulles */
  .scene-section .scene-fermer { top: auto; right: auto; bottom: 6px; left: 50%; transform: translateX(-50%); }
}
.titre-colporteur { margin: 8px 0 14px; font-size: clamp(36px, 5vw, 62px); line-height: 1.02; }
.etapes-colporteur { margin: 0 0 20px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; font-size: 16px; }
.etapes-colporteur li { display: flex; gap: 10px; align-items: flex-start; }
.etapes-colporteur .etape-texte { margin: 0; flex: 1 1 auto; min-width: 0; } /* le texte reste d'un seul tenant (exposant compris) */
.etapes-colporteur span { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #F5C46A; color: var(--encre); font-weight: 900; display: flex; align-items: center; justify-content: center; }
/* pendant que la scène 3D joue, l'étape en cours s'allume (les autres restent lisibles) */
.etapes-colporteur li { border-radius: 12px; padding: 4px 8px 4px 4px; margin: -4px -8px -4px -4px; transition: background-color .35s ease, opacity .35s ease, transform .35s ease; }
.etapes-colporteur.en-scene li { opacity: .72; }
.etapes-colporteur.en-scene li.etape-active { opacity: 1; background: rgba(245, 196, 106, .16); box-shadow: inset 0 0 0 1px rgba(245, 196, 106, .45); transform: translateX(3px); }
.etapes-colporteur li.etape-active span { background: #FFE19A; box-shadow: 0 0 0 4px rgba(245, 196, 106, .28), 0 0 18px rgba(255, 210, 120, .7); }
@media (prefers-reduced-motion: reduce) { .etapes-colporteur li { transition: none; } .etapes-colporteur.en-scene li.etape-active { transform: none; } }
html.mouvement-reduit .etapes-colporteur li { transition: none; }
html.mouvement-reduit .etapes-colporteur.en-scene li.etape-active { transform: none; }
.pastille { padding: 8px 14px; border-radius: var(--r-pilule); color: var(--encre); font-weight: 800; font-size: 15px; }

/* ———————— économies ———————— */
.economies { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.economies > .pile { flex: 1.5 1 440px; min-width: 0; }
.achat { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-radius: 18px; border: 3px solid var(--encre); background: var(--papier); color: var(--encre); text-align: left; font-family: var(--texte); cursor: pointer; width: 100%; }
.achat[aria-pressed="true"] { background: var(--cactus-clair); }
.achat .coche { flex: 0 0 30px; height: 30px; border-radius: 8px; border: 3px solid var(--encre); background: #fff; display: flex; align-items: center; justify-content: center; }
.achat[aria-pressed="true"] .coche { background: var(--cactus); }
.achat .txt { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.achat .txt strong { font-size: 17px; }
.achat .txt span { font-size: 14px; color: var(--gris-2); }
.achat .val { flex: 0 0 auto; font-size: 18px; font-weight: 900; color: var(--cactus); }
.economies-total { flex: 1 1 300px; min-width: 0; background: var(--cactus); color: #fff; border: var(--bord); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.total-montant { margin: 0; font-weight: 900; font-stretch: 115%; font-size: 62px; line-height: 1; }
.total-net { margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .18); font-weight: 800; font-size: 17px; }

/* ———————— enquêtes, scènes, rodéo ———————— */
/* Enquêtes du samedi : affiches de spectacle de saloon (1880), composées par sections.js (initEnquetes) */
.enquetes { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(280px, 1fr); gap: 26px; align-items: start; }
.affiches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.affiche-vide { grid-column: 1 / -1; margin: 0; color: #D5E1EC; }
.affiche { position: relative; min-width: 0; padding: 9px; color: var(--encre); border: 3px solid var(--encre); border-radius: 5px; box-shadow: 6px 8px 0 #0B1A2A;
  background:
    radial-gradient(circle at 17% 71%, rgba(150, 95, 40, .14) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 29%, rgba(150, 95, 40, .12) 0 3px, transparent 4px),
    radial-gradient(circle at 66% 90%, rgba(150, 95, 40, .1) 0 8px, transparent 9px),
    radial-gradient(circle at 9% 18%, rgba(150, 95, 40, .1) 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 42%, rgba(255, 250, 234, .9), rgba(255, 250, 234, 0) 64%),
    radial-gradient(ellipse at 0 0, rgba(139, 90, 43, .34), transparent 36%),
    radial-gradient(ellipse at 100% 0, rgba(139, 90, 43, .26), transparent 32%),
    radial-gradient(ellipse at 0 100%, rgba(139, 90, 43, .28), transparent 34%),
    radial-gradient(ellipse at 100% 100%, rgba(139, 90, 43, .36), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .28  0 0 0 0 .12  0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"),
    #EFDDB8; }
.affiche-attente .charge { height: 560px; border-radius: 3px; }
.affiche-cadre { position: relative; padding: 24px 20px 16px; border: 4px double rgba(35, 27, 20, .8); text-align: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(0 0)'%3E%3Cg fill='none' stroke='%23231B14' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 27V9Q3 3 9 3H27'/%3E%3Cpath d='M27 3c5 0 7.5 3 6.5 6s-5 3.2-6.2 1c-1-1.8.6-3 2-2.2'/%3E%3Cpath d='M3 27c0 5 3 7.5 6 6.5s3.2-5 1-6.2c-1.8-1-3 .6-2.2 2'/%3E%3Cpath d='M8 8l5 5'/%3E%3C/g%3E%3Cpath d='M15 10.5l2.5 2.5-2.5 2.5-2.5-2.5zM10.5 15l2.5 2.5-2.5 2.5-2.5-2.5z' fill='%23A12A21'/%3E%3C/g%3E%3C/svg%3E") top 3px left 3px / 40px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(48 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23231B14' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 27V9Q3 3 9 3H27'/%3E%3Cpath d='M27 3c5 0 7.5 3 6.5 6s-5 3.2-6.2 1c-1-1.8.6-3 2-2.2'/%3E%3Cpath d='M3 27c0 5 3 7.5 6 6.5s3.2-5 1-6.2c-1.8-1-3 .6-2.2 2'/%3E%3Cpath d='M8 8l5 5'/%3E%3C/g%3E%3Cpath d='M15 10.5l2.5 2.5-2.5 2.5-2.5-2.5zM10.5 15l2.5 2.5-2.5 2.5-2.5-2.5z' fill='%23A12A21'/%3E%3C/g%3E%3C/svg%3E") top 3px right 3px / 40px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(0 48) scale(1 -1)'%3E%3Cg fill='none' stroke='%23231B14' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 27V9Q3 3 9 3H27'/%3E%3Cpath d='M27 3c5 0 7.5 3 6.5 6s-5 3.2-6.2 1c-1-1.8.6-3 2-2.2'/%3E%3Cpath d='M3 27c0 5 3 7.5 6 6.5s3.2-5 1-6.2c-1.8-1-3 .6-2.2 2'/%3E%3Cpath d='M8 8l5 5'/%3E%3C/g%3E%3Cpath d='M15 10.5l2.5 2.5-2.5 2.5-2.5-2.5zM10.5 15l2.5 2.5-2.5 2.5-2.5-2.5z' fill='%23A12A21'/%3E%3C/g%3E%3C/svg%3E") bottom 3px left 3px / 40px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(48 48) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23231B14' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 27V9Q3 3 9 3H27'/%3E%3Cpath d='M27 3c5 0 7.5 3 6.5 6s-5 3.2-6.2 1c-1-1.8.6-3 2-2.2'/%3E%3Cpath d='M3 27c0 5 3 7.5 6 6.5s3.2-5 1-6.2c-1.8-1-3 .6-2.2 2'/%3E%3Cpath d='M8 8l5 5'/%3E%3C/g%3E%3Cpath d='M15 10.5l2.5 2.5-2.5 2.5-2.5-2.5zM10.5 15l2.5 2.5-2.5 2.5-2.5-2.5z' fill='%23A12A21'/%3E%3C/g%3E%3C/svg%3E") bottom 3px right 3px / 40px no-repeat; }
.affiche p, .affiche h3, .affiche h4 { margin: 0; }
.affiche-salle { font: 800 13px/1.3 var(--texte); font-stretch: 118%; letter-spacing: 1.6px; color: var(--brique); }
.affiche-salle::before, .affiche-salle::after { content: '★'; margin: 0 7px; color: var(--moutarde-ombre); }
.affiche-salle .marque { letter-spacing: inherit; }
.affiche-date { display: inline-block; margin: 12px 0 10px !important; padding: 6px 26px 5px; background: var(--bandana); color: #FFF4DC; font: 900 12.5px/1.25 var(--texte); font-stretch: 80%; letter-spacing: 2.2px; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); }
.affiche-titre { font: 400 clamp(26px, 2.25vw, 32px)/1.06 var(--display); letter-spacing: .5px; color: var(--encre); text-wrap: balance; text-shadow: 1px 1px 0 rgba(255, 250, 234, .9); }
.affiche-actes { margin-top: 7px !important; font: 800 12px/1.3 var(--texte); font-stretch: 115%; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gris); }
.affiche-filet { display: flex; align-items: center; gap: 10px; margin: 13px 2px !important; color: var(--brique); font-size: 13px; line-height: 1; }
.affiche-filet::before, .affiche-filet::after { content: ''; flex: 1 1 auto; height: 3px; border-top: 1.5px solid rgba(35, 27, 20, .6); border-bottom: 1px solid rgba(35, 27, 20, .35); }
.affiche-rubrique { margin-bottom: 7px !important; font: 400 16px/1.2 var(--display); letter-spacing: 1.6px; color: var(--brique); }
.affiche-texte { margin: 0 auto 8px !important; max-width: 36ch; font-size: 14.5px; line-height: 1.45; color: #3B2E22; }
.affiche-argument { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.affiche-argument::first-letter { float: left; margin: 4px 7px 0 0; font: 400 2.5em/.8 var(--display); color: var(--bandana); }
.affiche-distribution { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
.affiche-distribution li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.affiche-portrait { display: block; width: 54px; height: 54px; margin-bottom: 4px; border-radius: 50%; overflow: hidden; border: 2px solid var(--encre); background: radial-gradient(circle at 50% 35%, #F7D9A0, #D9A453); box-shadow: 0 0 0 3px #F3E4C4, 0 0 0 4.5px rgba(35, 27, 20, .45); }
.affiche-portrait img { display: block; width: 100%; height: 190%; object-fit: cover; object-position: 50% 0; filter: sepia(.22) contrast(1.04); }
.affiche-nom { font: 800 12.5px/1.15 var(--texte); font-stretch: 92%; overflow-wrap: anywhere; }
.affiche-role { font: 600 10.5px/1.2 var(--texte); font-stretch: 88%; letter-spacing: .3px; color: var(--gris); overflow-wrap: anywhere; }
.affiche-suspects, .affiche-decors { font-size: 13.5px !important; }
.affiche-suspects strong, .affiche-decors strong { font-weight: 900; font-stretch: 110%; letter-spacing: 1px; text-transform: uppercase; font-size: 11.5px; color: var(--brique); }
.affiche-notes { font: 700 11px/1.5 var(--texte); font-stretch: 88%; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gris); }
.affiche-bandeau { margin: 9px -9px -9px !important; padding: 10px 12px 9px; border-radius: 0 0 2px 2px; background: var(--encre); color: #F5C46A; text-align: center; font: 900 12px/1.3 var(--texte); font-stretch: 118%; letter-spacing: 2.4px; text-transform: uppercase;  text-wrap: balance;}
.affiche-tampon { position: absolute; z-index: 2; top: -13px; right: 16px; padding: 3px 12px 2px; border: 3px double var(--brique); border-radius: 6px; background: rgba(255, 246, 228, .92); color: var(--brique); font: 900 15px/1.2 var(--texte); font-stretch: 118%; letter-spacing: 3px; transform: rotate(7deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
/* Deuxième affiche de l'accueil : « L'Appel de la rivière », affiche de Far West corrompue par la Confrérie.
   Papier verdâtre et déchiré, sceau en filigrane, tentacules derrière (ils ne dépassent que dans les interstices et
   sous l'affiche), bave qui dégouline du bas, lueur par-dessous, brume, lanterne. Décor aria-hidden, CSS et SVG
   seulement ; animé quand l'affiche est à l'écran (.aq-vu), immobile en mouvement réduit. Tout public. */
#enquetes { overflow-x: clip; } /* les tentacules ne créent jamais de défilement horizontal */
.affiche.affiche-quete { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; margin-bottom: 84px; isolation: isolate; color: #1C2A1F; }
.affiche-quete .aq-ombre { position: relative; z-index: 2; filter: drop-shadow(6px 8px 0 #06140D) drop-shadow(0 0 20px rgba(111, 211, 92, .3)); }
.affiche-quete .aq-papier { position: relative; padding: 9px; border: 3px solid #12382A; border-radius: 4px;
  background:
    radial-gradient(circle at 18% 24%, transparent 0 32px, rgba(46, 80, 42, .17) 34px, rgba(46, 80, 42, .05) 39px, transparent 44px),
    radial-gradient(circle at 80% 58%, transparent 0 46px, rgba(36, 70, 38, .15) 48px, rgba(36, 70, 38, .05) 54px, transparent 60px),
    radial-gradient(circle at 34% 78%, transparent 0 22px, rgba(46, 80, 42, .14) 24px, transparent 29px),
    radial-gradient(circle at 63% 13%, rgba(70, 92, 40, .3) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 64%, rgba(70, 92, 40, .26) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 88% 31%, rgba(70, 92, 40, .26) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 46% 92%, rgba(70, 92, 40, .24) 0 1.8px, transparent 2.8px),
    radial-gradient(ellipse at 88% 92%, rgba(24, 66, 40, .32), transparent 38%),
    radial-gradient(ellipse at 6% 42%, rgba(24, 66, 40, .2), transparent 26%),
    radial-gradient(ellipse at 0 0, rgba(8, 30, 18, .4), transparent 30%),
    radial-gradient(ellipse at 100% 0, rgba(8, 30, 18, .34), transparent 28%),
    radial-gradient(ellipse at 0 100%, rgba(8, 30, 18, .42), transparent 32%),
    radial-gradient(ellipse at 100% 100%, rgba(8, 30, 18, .46), transparent 34%),
    radial-gradient(ellipse at 50% 108%, rgba(140, 225, 110, .3), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .3  0 0 0 0 .14  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #D0D3AC, #BCC59A 70%, #AEB98C); }
/* sceau en filigrane, comme embossé dans le papier */
.affiche-quete .aq-papier::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 47%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23F4F7E2' stroke-opacity='.42' stroke-width='3' transform='translate(-1.2 -1.2)'%3E%3Ccircle cx='100' cy='100' r='86'/%3E%3Ccircle cx='100' cy='100' r='76' stroke-dasharray='3 9'/%3E%3Cpath d='M100 100c0-9 9-15 18-12s12 15 6 24-21 12-30 6-15-21-9-33 24-21 39-18 27 18 24 33-15 30-33 33-36-6-45-21-9-36 3-51'/%3E%3Cpath d='M40 60l21 12M150 48l-15 18M144 156l-15-18'/%3E%3C/g%3E%3Cg stroke='%230B2A1B' stroke-opacity='.16' stroke-width='3' transform='translate(1.2 1.2)'%3E%3Ccircle cx='100' cy='100' r='86'/%3E%3Ccircle cx='100' cy='100' r='76' stroke-dasharray='3 9'/%3E%3Cpath d='M100 100c0-9 9-15 18-12s12 15 6 24-21 12-30 6-15-21-9-33 24-21 39-18 27 18 24 33-15 30-33 33-36-6-45-21-9-36 3-51'/%3E%3Cpath d='M40 60l21 12M150 48l-15 18M144 156l-15-18'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.affiche-quete .aq-papier > * { position: relative; z-index: 1; }
.affiche-quete .affiche-cadre { border-color: rgba(14, 56, 40, .78); }
.affiche-quete .affiche-salle { color: #0F4A3A; }
.affiche-quete .affiche-salle::before, .affiche-quete .affiche-salle::after { color: #2E6B4F; }
.affiche-quete .affiche-date { background: #74140F; color: #F6E8CB; }
.affiche-quete .affiche-titre { color: #0D2A1F; font-size: clamp(27px, 2.3vw, 33px); text-shadow: 1px 1px 0 rgba(236, 244, 214, .75), 0 0 16px rgba(111, 211, 92, .4); }
.affiche-quete .affiche-actes, .affiche-quete .affiche-notes { color: #2C3B30; }
.affiche-quete .affiche-filet, .affiche-quete .affiche-rubrique { color: #0F4A3A; }
.affiche-quete .affiche-filet::before, .affiche-quete .affiche-filet::after { border-top-color: rgba(14, 56, 40, .65); border-bottom-color: rgba(14, 56, 40, .35); }
.affiche-quete .affiche-texte { color: #1A281D; }
.affiche-quete .affiche-argument::first-letter { color: #0E5A43; text-shadow: 0 0 8px rgba(111, 211, 92, .55); }
.affiche-quete .affiche-decors strong { color: #0F4A3A; }
.affiche-quete .affiche-portrait { border-color: #0E2E22; background: radial-gradient(circle at 50% 35%, #A8C293, #4E6B45); box-shadow: 0 0 0 3px #C9CFA8, 0 0 0 4.5px rgba(14, 46, 34, .6), 0 0 10px rgba(111, 211, 92, .4); }
.affiche-quete .affiche-portrait img { filter: sepia(.28) hue-rotate(28deg) saturate(.85) contrast(1.04); }
.affiche-quete .affiche-nom { color: #1A281D; }
.affiche-quete .affiche-role { color: #36463A; }
.affiche-reserve { display: block; width: max-content; max-width: 100%; margin: 0 auto 12px !important; padding: 5px 14px; border: 1.5px solid #0E2E22; border-radius: 3px; background: rgba(14, 46, 34, .08); color: #0E2E22; font: 900 11.5px/1.3 var(--texte); font-stretch: 110%; letter-spacing: 1.8px; text-transform: uppercase; text-wrap: balance; text-align: center; }
/* appel : une planche marquée au fer, deux clous, lueur verte */
.affiche-quete .affiche-cta { display: flex; align-items: center; justify-content: center; gap: 12px; width: max-content; max-width: 100%; min-height: 50px; margin: 2px auto 8px; padding: 0 20px;
  border-radius: 6px 10px 7px 9px / 9px 6px 10px 7px; color: #CFF7BE; font: 400 19px/1.05 var(--display); letter-spacing: .4px; text-decoration: none; text-shadow: 0 0 8px rgba(123, 227, 106, .9), 0 1px 0 #000;
  background: repeating-linear-gradient(177deg, transparent 0 6px, rgba(0, 0, 0, .13) 6px 7px), linear-gradient(180deg, #5E3E24, #3B2715 55%, #2A1B0E);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .25), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 4px 0 #1A1009, 0 0 18px rgba(111, 211, 92, .45); transform: rotate(-1.4deg); transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.affiche-quete .affiche-cta:hover, .affiche-quete .affiche-cta:focus-visible { color: #fff; transform: rotate(0) scale(1.04); box-shadow: inset 0 1px 0 rgba(255, 220, 170, .25), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 4px 0 #1A1009, 0 0 30px rgba(123, 227, 106, .8); }
.affiche-quete .affiche-cta:focus-visible { outline: 3px solid #7BE36A; outline-offset: 4px; }
.aq-clou { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E0D8C8, #7A7062 60%, #2B2620); box-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.affiche-quete .affiche-bandeau { position: relative; padding-bottom: 15px; background: #040806; color: #A6F58F; border-top: 1px solid rgba(123, 227, 106, .35); text-shadow: 0 0 6px rgba(123, 227, 106, .9), 0 0 14px rgba(123, 227, 106, .45); }

/* tentacules : ils vivent derrière l'affiche (sa base est cachée par le bord), glissent du centre vers l'extérieur en se
   déroulant quand l'affiche arrive à l'écran, ondulent (la pointe plus que la base), s'étirent au survol, rentrent
   quand on s'en va. Chaque articulation : translation le long du segment, puis rotation (pose) ; dedans, l'ondulation. */
.affiche-quete { --k: 1; }
.aq-tent { position: absolute; z-index: 1; width: 0; height: 0; pointer-events: none; opacity: 0;
  transform: translate(var(--cx), var(--cy)) scale(var(--k)); transition: transform 1.7s cubic-bezier(.22, .8, .25, 1), opacity .5s ease;
  filter: drop-shadow(0 0 2.5px rgba(123, 227, 106, .45)) drop-shadow(0 7px 6px rgba(0, 0, 0, .55)); }
.aq-tent-svg { display: block; overflow: visible; }
.affiche-reserve span { display: block; }
.affiche-quete.aq-vu .aq-tent { opacity: 1; transform: scale(var(--k)); }
.affiche-quete.aq-vu:hover .aq-tent, .affiche-quete.aq-vu:focus-within .aq-tent { transform: translate(var(--tx), var(--ty)) scale(var(--k)); transition-duration: .9s; }
.aq-jt, .aq-sw { transform-box: view-box; transform-origin: 0 0; }
.aq-jt { transform: translate(var(--l), 0) rotate(var(--rc)); transition: transform 1.6s cubic-bezier(.3, .7, .25, 1) var(--d); }
.affiche-quete.aq-vu .aq-jt { transform: translate(var(--l), 0) rotate(var(--r)); }
.affiche-quete.aq-vu:hover .aq-jt, .affiche-quete.aq-vu:focus-within .aq-jt { transform: translate(var(--l), 0) rotate(var(--rh)); transition-duration: .9s; transition-delay: calc(var(--d) / 2); }
.aq-sw { animation: aqOndule 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s); }
@keyframes aqOndule { from { transform: rotate(calc(var(--amp) * -1)); } to { transform: rotate(var(--amp)); } }
@media (max-width: 640px) { .affiche-quete { --k: .7; } }

/* bave : vert de bile, sombre et gluant. La nappe s'affaisse en poches ; les coulures s'étirent, hésitent, puis lâchent
   une goutte retenue un instant par un fil visqueux qui casse. Lueur faible et maladive. */
.aq-bave { position: absolute; z-index: 3; left: 0; top: 100%; width: 100%; height: 0; pointer-events: none; }
.aq-bande-boite { position: absolute; left: 0; top: 0; width: 100%; } /* posée et dessinée par ajusterBave() à la largeur exacte de l'affiche */
.aq-bande-boite svg { display: block; width: 100%; filter: drop-shadow(0 0 3px rgba(84, 128, 28, .35)); }
.aq-bande-ombre { position: absolute; left: 6px; top: 8px; width: 100%; } /* même ombre dure que l'affiche : la bave fait partie de sa silhouette */
.aq-bande-ombre svg { display: block; width: 100%; }
.aq-goutte { position: absolute; left: var(--x, 50%); top: var(--y0, 8px); width: var(--larg, 16px); height: var(--long); margin-left: calc(var(--larg, 16px) / -2); transform-origin: 50% 0; animation: aqEtireLent var(--dur, 12s) ease-in-out infinite; animation-delay: var(--del, 0s); }
.aq-goutte.tombe { animation-name: aqEtire; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
.aq-goutte svg { display: block; width: 100%; height: 100%; }
.aq-goutte, .aq-chute { filter: drop-shadow(0 0 3px rgba(84, 128, 28, .35)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
@keyframes aqEtireLent { 0%, 100% { transform: scaleY(.93); } 50% { transform: scaleY(1.06); } }
@keyframes aqEtire { 0% { transform: scaleY(.9); } 40% { transform: scaleY(.98); } 56% { transform: scaleY(1.01); } 62% { transform: scaleY(1.03); } 70% { transform: scaleY(1.16); } 72.5% { transform: scaleY(.88); } 78% { transform: scaleY(.93); } 100% { transform: scaleY(.9); } }
.aq-chute { position: absolute; left: var(--x, 50%); top: calc(var(--y0, 8px) + var(--long) * 1.16 - 6px); width: 9px; height: 11px; margin-left: -4.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, #F2FFD9 0 1.1px, #7FA52A 1.9px, #4F7F1F 3.4px, #1A2B0D 100%); animation: aqChute var(--dur, 12s) linear infinite; animation-delay: var(--del, 0s); }
@keyframes aqChute { 0%, 69% { opacity: 0; transform: translateY(0) scale(.6, .7); } 70% { opacity: 1; transform: translateY(0) scale(1, 1.15); } 73% { transform: translateY(4px) scale(.95, 1.2); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 84% { opacity: .95; transform: translateY(40px) scale(.9, 1.25); } 88%, 100% { opacity: 0; transform: translateY(48px) scale(.7, .9); } }
.aq-fil { position: absolute; left: var(--x, 50%); top: calc(var(--y0, 8px) + var(--long) * 1.16 - 4px); width: 2px; height: 26px; margin-left: -1px; border-radius: 1px; opacity: 0; transform-origin: 50% 0;
  background: linear-gradient(#4F7F1F, rgba(79, 127, 31, .55) 70%, rgba(79, 127, 31, 0)); animation: aqFil var(--dur, 12s) linear infinite; animation-delay: var(--del, 0s); }
@keyframes aqFil { 0%, 69% { opacity: 0; transform: scaleY(0); } 70% { opacity: .95; transform: scaleY(.12); } 75.5% { opacity: .9; transform: scale(.6, .62); } 76.5% { opacity: 0; transform: scale(.4, .7); } 100% { opacity: 0; transform: scaleY(0); } }
.aq-coulee { position: absolute; z-index: 3; top: 6px; width: 14px; height: 46px; pointer-events: none; filter: drop-shadow(0 0 2px rgba(84, 128, 28, .35)) drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); transform-origin: 50% 0; animation: aqEtireLent 14s ease-in-out infinite; }
.aq-coulee svg { display: block; width: 100%; height: 100%; }
.aq-coulee-g { left: 6px; } /* elles suintent du bord, juste sous l'arête du haut : jamais au-dessus de l'affiche */
.aq-coulee-d { right: 46px; animation-delay: -5s; }

/* lumière : lueur verdâtre par-dessous, brume au pied, poussières ; lanterne accrochée au coin */
.aq-lueur { position: absolute; z-index: 0; left: 0; right: 0; bottom: -78px; height: 72%; pointer-events: none; background: radial-gradient(ellipse 62% 56% at 50% 100%, rgba(120, 172, 50, .48), rgba(110, 160, 45, .12) 56%, transparent 76%); filter: blur(6px); animation: aqLueur 6s ease-in-out infinite alternate; }
@keyframes aqLueur { from { opacity: .65; } to { opacity: 1; } }
.aq-brume { position: absolute; z-index: 1; left: -6%; right: -6%; bottom: -72px; height: 96px; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 60%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 60% at 50% 60%, #000 45%, transparent 100%); }
.aq-nappe { position: absolute; bottom: 0; left: -30%; width: 160%; height: 64px; background: radial-gradient(ellipse 30% 60% at 25% 70%, rgba(205, 242, 195, .34), transparent 70%), radial-gradient(ellipse 34% 55% at 70% 65%, rgba(160, 230, 150, .3), transparent 70%); filter: blur(6px); animation: aqNappe 16s ease-in-out infinite alternate; }
.aq-nappe.b { bottom: 12px; opacity: .7; animation-duration: 23s; animation-direction: alternate-reverse; }
@keyframes aqNappe { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.aq-poussiere { position: absolute; bottom: 8px; width: 4px; height: 4px; border-radius: 50%; background: #C8FFB0; box-shadow: 0 0 8px 2px rgba(123, 227, 106, .8); opacity: 0; animation: aqPoussiere calc(7s + var(--i) * 1.6s) ease-in-out infinite; animation-delay: calc(var(--i) * -2.1s); }
@keyframes aqPoussiere { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .9; } 80% { opacity: .45; } 100% { opacity: 0; transform: translate(14px, -66px); } }
.aq-lanterne { position: absolute; z-index: 5; top: -18px; right: 14px; width: 30px; height: 56px; pointer-events: none; transform-origin: 50% 0; animation: aqBalance 4.8s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px rgba(255, 196, 96, .45)); }
.aq-lanterne svg { display: block; width: 100%; height: 100%; }
.aq-flamme { transform-box: fill-box; transform-origin: 50% 90%; animation: aqFlamme 1.7s ease-in-out infinite alternate; }
@keyframes aqBalance { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes aqFlamme { 0% { transform: scale(1, 1); opacity: 1; } 40% { transform: scale(.9, 1.1); } 70% { transform: scale(1.05, .93); opacity: .82; } 100% { transform: scale(.95, 1.05); opacity: 1; } }

/* hors écran : tout s'arrête ; mouvement réduit : tout est à sa place, immobile */
.affiche-quete:not(.aq-vu) :is(.aq-sw, .aq-goutte, .aq-chute, .aq-fil, .aq-coulee, .aq-lanterne, .aq-flamme, .aq-lueur, .aq-nappe, .aq-poussiere) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .affiche-quete :is(.aq-sw, .aq-goutte, .aq-chute, .aq-fil, .aq-coulee, .aq-lanterne, .aq-flamme, .aq-lueur, .aq-nappe, .aq-poussiere) { animation: none !important; }
  .affiche-quete .aq-tent { opacity: 1 !important; transform: scale(var(--k)) !important; transition: none !important; }
  .affiche-quete .aq-jt { transform: translate(var(--l), 0) rotate(var(--r)) !important; transition: none !important; }
  .affiche-quete .aq-chute, .affiche-quete .aq-fil, .affiche-quete .aq-poussiere { display: none; }
  .affiche-quete .affiche-cta { transition: none; }
}
html.mouvement-reduit .affiche-quete :is(.aq-sw, .aq-goutte, .aq-chute, .aq-fil, .aq-coulee, .aq-lanterne, .aq-flamme, .aq-lueur, .aq-nappe, .aq-poussiere) { animation: none !important; }
html.mouvement-reduit .affiche-quete .aq-tent { opacity: 1 !important; transform: scale(var(--k)) !important; transition: none !important; }
html.mouvement-reduit .affiche-quete .aq-jt { transform: translate(var(--l), 0) rotate(var(--r)) !important; transition: none !important; }
html.mouvement-reduit .affiche-quete :is(.aq-chute, .aq-fil, .aq-poussiere) { display: none; }
@media (max-width: 640px) { .affiche.affiche-quete { margin-bottom: 104px; } .affiche-quete .affiche-cta { font-size: 18px; } }
@media (max-width: 1100px) { .enquetes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .affiches { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .affiche-cadre { padding: 22px 14px 14px; }
  .affiche-titre { font-size: 27px; }
  .affiche-bandeau { font-stretch: 100%; letter-spacing: 1.2px; font-size: 11.5px; }
}
.pastille-c { padding: 5px 10px; border-radius: var(--r-pilule); background: var(--papier); border: 2px solid var(--encre); font-weight: 800; }
.scenes-jour { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.scenes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.scenes-liste li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(243, 229, 204, .1); border: 2px solid rgba(243, 229, 204, .3); }
.scenes-liste li.vif { border-color: var(--moutarde); }
.scenes-liste .heure { flex: 0 0 64px; font-weight: 900; font-size: 17px; }
.scenes-liste .titre { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.scenes-liste li { flex-wrap: wrap; row-gap: 6px; }
.scenes-liste .statut { flex: 0 0 auto; white-space: nowrap; }
.scenes-liste li:has(.scene-corps) { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; column-gap: 12px; }
.scenes-liste li:has(.scene-corps) .heure { white-space: nowrap; }
.scenes-liste .scene-corps { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@media (max-width: 560px) {
  .scenes-liste li:has(.scene-corps) { grid-template-columns: 66px minmax(0, 1fr); column-gap: 10px; }
  .scenes-liste li:has(.scene-corps) .statut { grid-column: 2; justify-self: start; }
}
.scenes-liste .scene-corps .titre { flex: none; line-height: 1.3; }
.bande-denim .scenes-liste .genre { box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.chapeau-clair { color: #D5E1EC; max-width: 72ch; }
/* ce qui peut arriver en ville : enquêtes, duels, danse, animations */
.genres-legende { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.genre-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; padding: 14px 16px; border-radius: 18px; background: var(--sable); color: var(--encre); border: var(--bord); box-shadow: 4px 4px 0 #0B1A2A; }
.genre-carte .genre-ico { grid-row: 1 / span 2; flex: none; width: 46px; height: 46px; border-width: 3px; box-shadow: 0 3px 0 rgba(35, 27, 20, .25); }
.genre-carte strong { font-weight: 900; font-size: 16.5px; line-height: 1.15; align-self: end; }
.genre-carte > span:last-child { font-size: 14px; line-height: 1.35; color: var(--gris); }
@media (max-width: 1000px) { .genres-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .genres-legende { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .genre-carte { padding: 12px 14px; }
  .genre-carte .genre-ico { width: 40px; height: 40px; }
}
.bande-denim .statut.a_venir { border-color: var(--sable); color: var(--sable); }

/* ———————— bons coups et classement ———————— */
.bons { display: flex; flex-wrap: wrap; gap: 20px; }
.bons > .pile { flex: 1.3 1 420px; min-width: 0; }
.bon { display: flex; gap: 18px; align-items: flex-start; background: var(--papier); border: var(--bord); border-radius: 22px; padding: 16px 18px 16px 16px; box-shadow: 4px 4px 0 var(--encre); }
.bon-corps { flex: 1 1 auto; min-width: 0; }
/* tuile illustrée (.bon-ico, base.css) : légèrement de travers, comme une affiche épinglée */
.bon .bon-ico { transform: rotate(-3deg); }
.bon:nth-child(even) .bon-ico { transform: rotate(3deg); }
.bon:hover .bon-ico-dessin svg { transform: scale(1.08) rotate(-5deg); }
.bon .cat { margin: 2px 0 0; font-size: 12.5px; font-weight: 800; color: var(--brique); text-transform: uppercase; letter-spacing: .3px; }
.bon-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 4px 0 3px; }
.bon .titre { margin: 0; font-weight: 900; font-size: 19px; line-height: 1.2; font-stretch: 105%; }
.bon-prix { padding: 1px 10px; border-radius: 8px; background: var(--cactus); color: #fff; font: 900 17px/1.4 var(--texte); transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--encre); }
.bon .meta { margin: 0; font-size: 14px; color: var(--gris-2); }
.bon-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 560px) {
  /* téléphone : les boutons prennent toute la largeur de la carte, sous la tuile et le texte */
  .bon { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 14px; padding: 14px; }
  .bon-corps { display: contents; }
  .bon .bon-ico { grid-row: 1 / span 3; align-self: start; }
  .bon-corps > * { grid-column: 2; }
  .bon-corps > .bon-actions, .bon-corps > .bon-partage { grid-column: 1 / -1; }
  .bon .bon-ico { flex-basis: 76px; width: 76px; height: 76px; border-radius: 18px; }
  .bon .bon-ico-dessin svg { width: 62px; height: 62px; }
  .bon .bon-ico-photo .bon-ico-dessin { width: 36px; height: 36px; }
  .bon .bon-ico-photo .bon-ico-dessin svg { width: 30px; height: 30px; }
  .bon .titre { font-size: 17.5px; }
}
.classement { flex: 1 1 320px; min-width: 0; }
.classement-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.classement-liste li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--sable); }
.classement-liste li:first-child { background: #F5D58E; }
.classement-liste .rang { flex: 0 0 26px; font-weight: 900; }
.classement-liste .pseudo { flex: 1 1 auto; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vide { color: var(--gris); font-size: 15px; background: transparent !important; padding: 4px 0 !important; }

/* ———————— tarifs ———————— */
.decompte { margin: 0 0 22px; font-weight: 800; font-size: 18px; color: var(--denim); }
/* Deux billets d'affiche : en-tête de couleur, prix géant en Rye, talon perforé avec ce que comprend l'insigne. */
.tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.05fr); gap: 34px 26px; align-items: stretch; padding-top: 14px; }
.tarif { --tete: var(--denim); --accent: var(--encre); position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--papier); color: var(--encre); border: var(--bord); border-radius: 26px; box-shadow: 6px 6px 0 var(--encre); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease, filter .3s ease; }
.tarif-prevente { --tete: var(--bandana); --accent: var(--bandana); transform: translateY(-10px); box-shadow: 10px 12px 0 var(--encre); }
.tarif p { margin: 0; }
.tarif-tete { padding: 20px 22px 16px; border-radius: 23px 23px 0 0; border-bottom: var(--bord); background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .08) 0 10px, transparent 10px 20px), var(--tete); color: #fff; text-align: center; }
.tarif .tarif-nom { font: 400 clamp(27px, 2.3vw, 33px)/1.1 var(--display); letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.tarif-etoile { display: inline-block; color: var(--moutarde); font: 900 .62em/1 var(--texte); vertical-align: .28em; }
.tarif-sous { margin-top: 5px !important; font: 800 12px var(--texte); letter-spacing: 1.8px; text-transform: uppercase; opacity: .88; }
.tarif-corps { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 20px 24px 22px; }
.tarif-prevente .tarif-corps { background: repeating-conic-gradient(from -90deg at 0 100%, rgba(232, 169, 58, .16) 0 5deg, transparent 5deg 11deg); }
.tarif .tarif-prix { margin: 2px 0 4px; font: 400 clamp(76px, 6.2vw, 100px)/1 var(--display); letter-spacing: 1px; color: var(--accent); text-shadow: 4px 4px 0 rgba(35, 27, 20, .14); white-space: nowrap; }
.tarif-unite { font-weight: 800; font-size: 15px; color: var(--gris); }
.tarif-quand { margin-top: 12px !important; padding: 10px 12px; border-radius: 12px; background: var(--sable); font-size: 15.5px; line-height: 1.4; }
.tarif-actuel { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px !important; padding: 4px 12px; border-radius: var(--r-pilule); background: var(--encre); color: var(--moutarde); font: 900 12.5px var(--texte); letter-spacing: .6px; text-transform: uppercase; }
.tarif-actuel::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: wgVivant 1.2s ease-in-out infinite; }
/* talon perforé : pointillés et deux encoches de billet */
.tarif-talon { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; border-top: 3px dashed rgba(35, 27, 20, .45); border-radius: 0 0 23px 23px; background: #FBF1DE; }
.tarif-talon::before, .tarif-talon::after { content: ''; position: absolute; top: -17px; width: 31px; height: 31px; border-radius: 50%; background: var(--sable-2); border: var(--bord); }
.tarif-talon::before { left: -18px; clip-path: inset(-3px -3px -3px 50%); }
.tarif-talon::after { right: -18px; clip-path: inset(-3px 50% -3px -3px); }
.tarif-inclus-titre { font: 900 12.5px var(--texte); letter-spacing: .9px; text-transform: uppercase; color: var(--gris-2); }
.tarif-inclus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tarif-inclus li { position: relative; padding-left: 34px; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.tarif-inclus li::before { content: ''; position: absolute; left: 0; top: -2px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid var(--encre); background: var(--cactus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; }
.tarif-action { margin-top: auto; flex-direction: column; gap: 1px; min-height: 58px; padding: 7px 18px; text-align: center; line-height: 1.1; }
.tarif-action span { font-size: 17px; }
.tarif-action small { font: 700 13px var(--texte); opacity: .92; }
.tarif-ruban { position: absolute; z-index: 2; top: -19px; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 6px 16px; border-radius: var(--r-pilule); border: var(--bord); background: var(--moutarde); color: var(--encre); font: 900 13.5px var(--texte); letter-spacing: .7px; text-transform: uppercase; white-space: nowrap; box-shadow: 3px 3px 0 var(--encre); }
/* le tampon « Prévente! » de la fête (ambiance.js) se pose à droite du prix, jamais sur le bouton */
#tarifs .tarif .fete-tampon { top: 118px; bottom: auto; right: -14px; font-size: 17px; }
/* après la prévente, la carte du tarif régulier prend la vedette */
.tarifs[data-tier="regulier"] .tarif-prevente { transform: none; box-shadow: 5px 5px 0 var(--encre); filter: saturate(.45); }
.tarifs[data-tier="regulier"] .tarif-prevente .tarif-ruban { display: none; }
.tarifs[data-tier="regulier"] .tarif-regulier { transform: translateY(-10px); box-shadow: 10px 12px 0 var(--encre); }
.tarif-conditions { min-width: 0; align-self: start; gap: 10px; padding: 22px 22px 20px; border-radius: 22px; border: 2px dashed rgba(35, 27, 20, .45); background: rgba(255, 248, 236, .55); font-size: 15px; }
.tarif-conditions-titre { margin: 0; font: 400 23px/1.15 var(--display); }
.tarif-conditions ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
@media (max-width: 1100px) {
  .tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarif-conditions { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .tarifs { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tarif-prevente, .tarifs[data-tier="regulier"] .tarif-regulier { transform: none; box-shadow: 7px 8px 0 var(--encre); }
  .tarif-corps, .tarif-talon { padding-left: 20px; padding-right: 20px; }
  #tarifs .tarif .fete-tampon { top: 118px; right: 10px; font-size: 16px; }
}

/* ———————— portes d'entrée ———————— */
/* Trois cartes de même hauteur : chaque carte occupe les 5 rangées de la grille (étiquette, titre, présentation,
   formulaire, suite) et les partage avec ses voisines (sous-grille) : titres, formulaires et boutons s'alignent. */
.portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; column-gap: 20px; row-gap: 0; align-items: stretch; }
.porte { min-width: 0; grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 12px; padding: 22px; }
.porte > * { min-width: 0; }
.porte-corps { display: flex; flex-direction: column; min-width: 0; }
.porte-corps > form { flex: 1 1 auto; }
.porte-corps > form > button[type="submit"] { margin-top: auto; }
.porte-suite { align-self: end; }
.porte-etiquette { justify-self: start; }
@media (max-width: 1000px) {
  .portes { display: flex; flex-direction: column; gap: 20px; }
  .porte { display: flex; flex-direction: column; gap: 12px; }
  .porte-suite { align-self: auto; }
}
.porte h3 { margin: 0; font-size: 25px; font-weight: 900; }
.porte p { margin: 0; }
.porte-etiquette { align-self: flex-start; padding: 4px 10px; border-radius: var(--r-pilule); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .3px; }
.compte-inline { border: 2px dashed var(--gris-2); border-radius: 14px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.compte-inline legend { font-weight: 900; font-size: 15px; padding: 0 6px; }
.bascule { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 700; font-size: 15px; }
.bascule label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.bascule input { width: 20px; height: 20px; accent-color: var(--cactus); }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pin-carte { height: 200px; border: 2px solid var(--encre); border-radius: 12px; overflow: hidden; background: #F1E2C6; }
.liste-attente { border-top: 2px dashed var(--sable-2); padding-top: 10px; }
.liste-attente summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.liste-attente form { margin-top: 8px; }
.ok-carte { background: var(--cactus-clair); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ok-carte h4 { margin: 0; font-size: 19px; color: #1F5A37; }
.ok-carte p { margin: 0; font-size: 15px; }

/* ———————— pied de page : la nuit, la guirlande, les feux d'artifice ———————— */
.pied { background: var(--encre); color: #E9DCC3; }
.pied a { color: var(--sable); }
.pied-grille { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; padding-block: 44px; }
.pied-grille > * { flex: 1 1 240px; min-width: 0; }
.pied-credit { margin: 0; padding: 14px 16px 22px; border-top: 1px solid rgba(243, 229, 204, .14); text-align: center; font-size: 13.5px; color: #BFAE95; }
.pied-credit a { color: var(--sable); font-weight: 800; }
.pied-nuit { position: relative; isolation: isolate; height: clamp(440px, 74vh, 780px); overflow: hidden; color: var(--sable); background: linear-gradient(180deg, #E4CFD3 0%, #B9A1BE 9%, #7A68A0 20%, #4A3F72 34%, #262B55 52%, #1A2142 74%, #161B33 90%, var(--encre) 100%); }
.pied-etoiles { position: absolute; inset: 14% 0 30% 0; background-image: radial-gradient(1.6px 1.6px at 30px 40px, #FFF8EC 50%, transparent 52%), radial-gradient(1.2px 1.2px at 120px 90px, #F3E5CC 50%, transparent 52%), radial-gradient(2px 2px at 210px 30px, #FFE3A0 50%, transparent 52%), radial-gradient(1.3px 1.3px at 280px 120px, #FFF8EC 50%, transparent 52%), radial-gradient(1.6px 1.6px at 360px 70px, #F3E5CC 50%, transparent 52%); background-size: 400px 160px; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); animation: wgScintille 3.8s ease-in-out infinite alternate; }
.pied-lune { position: absolute; top: 22%; right: 11%; width: 58px; height: 58px; border-radius: 50%; box-shadow: inset -14px 6px 0 0 #FFF3D6; filter: drop-shadow(0 0 14px rgba(255, 243, 214, .5)); transform: rotate(-20deg); }
.pied-feux { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.pied-guirlande { position: absolute; top: 9%; left: 0; width: 100%; height: 110px; z-index: 2; }
.pied-guirlande .fil { fill: none; stroke: #120E18; stroke-width: 2.5; }
.pied-guirlande .ampoule { fill: #FFE3A0; filter: drop-shadow(0 0 7px #FFC857); animation: wgAmpoule 2s ease-in-out infinite; }
.pied-guirlande .a1 { fill: #FF9A8A; animation-delay: -.7s; }
.pied-guirlande .a2 { fill: #9ED6F5; animation-delay: -1.4s; }
.pied-nuit-texte { position: absolute; left: 50%; top: 40%; z-index: 3; transform: translate(-50%, -50%); width: min(92%, 760px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pied-slogan { margin: 0; font-size: clamp(30px, 4.4vw, 62px); line-height: 1.05; color: #FFE9BE; text-shadow: 0 0 18px rgba(255, 200, 87, .55), 0 3px 0 #120E18; }
.pied-feu-bouton { cursor: pointer; }
.pied-feu-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.pied-son { min-height: 44px; padding: 8px 16px; border: 2px solid rgba(255, 233, 190, .7); border-radius: 999px; background: rgba(18, 14, 24, .35); color: #FFE9BE; font: 800 15px/1 var(--texte); cursor: pointer; }
.pied-son[aria-pressed="true"] { background: rgba(255, 200, 87, .2); border-color: #FFC857; }
.pied-son:focus-visible { outline: 3px solid #FFC857; outline-offset: 3px; }
/* toile plein écran des feux d'artifice : par-dessus la page, sans bloquer les clics */
.feux-ecran { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; }
.pied-ville { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; z-index: 2; fill: var(--encre); overflow: visible; }
.pied-ville .fenetre { fill: #FFC857; opacity: .9; }
.pied-ville .fenetre.f1 { animation: wgFenetre 7s steps(1) infinite; }
.pied-ville .fenetre.f2 { fill: #FF9A5A; animation: wgFenetre 11s steps(1) infinite -4s; }
@keyframes wgFenetre { 0%, 70% { opacity: .9; } 71%, 85% { opacity: .15; } 86%, 100% { opacity: .9; } }
.pied-ville .eolienne-pied { transform-box: fill-box; transform-origin: center; animation: wgTourne 9s linear infinite; }
@media (max-width: 720px) {
  .pied-nuit { height: clamp(380px, 68vh, 580px); }
  .pied-ville { height: 92px; }
  .pied-nuit-texte { top: 44%; }
  .pied-guirlande { height: 70px; top: 4%; }
  .pied-lune { top: 10%; right: 8%; width: 40px; height: 40px; box-shadow: inset -10px 4px 0 0 #FFF3D6; }
}

@media (max-width: 560px) {
  .section { padding-block: 52px 36px; }
  .persos-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .perso-rond { width: 64px; height: 64px; }
  .perso-3d { width: 60%; }
  .perso-detail { padding: 18px; }
  .bulle { margin-bottom: 90px; font-size: 15px; }
  .tarif .tarif-prix { font-size: 78px; }
  .total-montant { font-size: 52px; }
  .scene-jouer { bottom: 10px; }
  .carte-boite { min-height: 340px; }
  .deux { grid-template-columns: 1fr; }
  .heros-boutons .btn { flex: 1 1 100%; }
  .entete-actions .btn { flex: 1 1 0; min-height: 42px; padding: 0 10px; font-size: 14px; font-stretch: 85%; white-space: nowrap; }
  .perso-carte { padding-inline: 4px; }
  .perso-nom { font-size: 14px; font-stretch: 88%; overflow-wrap: anywhere; }
  .perso-role { font-size: 12px; overflow-wrap: anywhere; }
}

/* ——— formulaires : états ——— */
.porte .erreur[data-pour] { font-weight: 700; font-size: 13px; color: var(--brique); }
.porte .erreur[data-pour]:empty { display: none; }
[aria-invalid="true"] { border-color: var(--brique) !important; box-shadow: 0 0 0 2px var(--rose-pale); }
.porte form[aria-busy="true"] { opacity: .85; }

/* ——— page des conditions (brouillons) ——— */
.legal { max-width: 860px; }
.legal h2 { font-size: clamp(26px, 4vw, 34px); font-weight: 900; margin: 8px 0 12px; line-height: 1.15; }
.legal h3 { font-size: 19px; font-weight: 900; margin: 22px 0 6px; }
.legal p, .legal li { max-width: 66ch; overflow-wrap: anywhere; }
.legal ul, .legal ol { padding-left: 1.3em; margin: 6px 0; }
.legal li { margin: 4px 0; }
.legal-brouillon { background: var(--rose-pale); border: var(--bord); border-radius: 16px; padding: 14px 16px; margin: 16px 0 20px; }
.legal-brouillon p { margin: 0; }
.legal-sommaire { padding: 16px 18px; margin-bottom: 12px; }
.legal-sommaire ol { margin: 0; }
.legal-sommaire a { display: inline-block; padding: 6px 0; font-weight: 700; }
.legal-article { border-top: 3px dashed var(--sable-2); padding-top: 24px; margin-top: 28px; scroll-margin-top: 16px; }
.legal-article > .badge { margin: 0; }
.legal-article:target h2 { text-decoration: underline; text-decoration-color: var(--moutarde); text-underline-offset: 6px; }
.legal-maj { margin: 6px 0 0; font-weight: 700; color: var(--gris); }
.legal-sommaire-titre { margin: 0 0 8px; font-weight: 900; }
.legal-sommaire li .muted { display: block; font-size: 14px; margin: -4px 0 4px; }
.legal-sommaire li { padding: 3px 0; }
.legal-sommaire li > a { vertical-align: top; padding: 0; }
.legal h3 .badge, .legal-brouillon .badge { margin-left: 2px; position: relative; top: -2px; }
.legal h3[id] { scroll-margin-top: 16px; }
.legal code { font-size: .9em; background: var(--sable); border-radius: 4px; padding: 1px 5px; }

/* ——— Questions fréquentes (#questions) : accordéons lisibles sans JavaScript, texte visible pour les moteurs */
.faq-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.faq-item { background: var(--papier); border: var(--bord); border-radius: 18px; box-shadow: 3px 3px 0 var(--encre); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; min-height: 48px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ''; flex: none; width: 12px; height: 12px; margin-left: auto; border-right: 3px solid var(--brique); border-bottom: 3px solid var(--brique); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item > summary h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.faq-item > summary:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 3px; border-radius: 14px; }
.faq-item > p { margin: 0; padding: 0 18px 18px; color: var(--gris); line-height: 1.55; }
.faq-item a { color: var(--brique); font-weight: 700; }
@media (max-width: 760px) { .faq-liste { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .faq-item > summary::after { transition: none; } }
.insecable { white-space: nowrap; }
.pied-contact { margin: 0; }
.pied-contact a { font-weight: 800; }