/* ═════ ACCUEIL — Atelier pur : crème, vert, or ; scène cartographique ═════ */
.pg-home{--sun:#FFC83D;--w:1240px}
.scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Scène d'ouverture */
.hero,.hero-stage{--T:16s}.hero{position:relative;overflow:hidden;padding:28px 0 72px;isolation:isolate}
.hero>.scene{z-index:-1}
.hero-in{position:relative;text-align:center}
.hero h1{font:700 clamp(2.75rem,8.2vw,4.9rem)/.96 var(--ff-d);font-variation-settings:'opsz' 144;letter-spacing:-.022em;word-spacing:.06em;color:var(--ink);text-wrap:balance}
.hero h1 span{display:block}
.hero h1 .g{color:var(--accent)}
.hero .lead{max-width:56ch;margin:16px auto 0;font-size:clamp(1.05rem,2.4vw,1.28rem);color:var(--muted)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.btn.sun{--btn-bg:var(--sun);--btn-ink:#1B4332}

.stage{position:relative;margin:36px auto 0;width:100%;max-width:1120px;text-align:left}
.route{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.route-d{display:none}
.route .trail{fill:none;stroke:var(--accent);stroke-opacity:.5;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 12}
.route .walked{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.route .wp circle{fill:var(--accent);stroke:#FDFAF2;stroke-width:3}
.route .wp text{fill:#fff;font:700 16px var(--ff-s)}
.route .wp.fin circle{fill:var(--sun);stroke:var(--accent-ink);stroke-width:3}
.route .pop{transform-box:fill-box;transform-origin:center}
.route .walker{fill:var(--sun);stroke:var(--accent-ink);stroke-width:3;offset-distance:100%;offset-rotate:0deg}
@keyframes draw{0%{stroke-dashoffset:1;opacity:1}62%{stroke-dashoffset:0;opacity:1}93%{stroke-dashoffset:0;opacity:1}99%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes walk{0%{offset-distance:0%;opacity:1}62%{offset-distance:100%;opacity:1}66%,100%{offset-distance:100%;opacity:0}}
.route .walked{animation:draw var(--T) linear infinite}
.route .walker{animation:walk var(--T) linear infinite}
.route-d .walker{offset-path:path("M60 250C150 330 60 430 200 500C330 590 470 590 560 520C650 450 700 400 790 470C870 535 930 600 985 545")}@keyframes hero-d-pop1{0%,0.0%{transform:scale(0)}2.5%{transform:scale(1.35)}5.0%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-d .wp1 .pop{animation:hero-d-pop1 var(--T) linear infinite}@keyframes hero-d-pop2{0%,16.7%{transform:scale(0)}19.2%{transform:scale(1.35)}21.7%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-d .wp2 .pop{animation:hero-d-pop2 var(--T) linear infinite}@keyframes hero-d-pop3{0%,32.2%{transform:scale(0)}34.7%{transform:scale(1.35)}37.2%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-d .wp3 .pop{animation:hero-d-pop3 var(--T) linear infinite}@keyframes hero-d-pop4{0%,47.1%{transform:scale(0)}49.6%{transform:scale(1.35)}52.1%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-d .wp4 .pop{animation:hero-d-pop4 var(--T) linear infinite}@keyframes hero-d-pop5{0%,62.0%{transform:scale(0)}64.5%{transform:scale(1.35)}67.0%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-d .wp5 .pop{animation:hero-d-pop5 var(--T) linear infinite}
.route-m .walker{offset-path:path("M22 300C70 380 14 440 90 490C150 535 190 470 215 540")}@keyframes hero-m-pop1{0%,0.0%{transform:scale(0)}2.5%{transform:scale(1.35)}5.0%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-m .wp1 .pop{animation:hero-m-pop1 var(--T) linear infinite}@keyframes hero-m-pop2{0%,18.6%{transform:scale(0)}21.1%{transform:scale(1.35)}23.6%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-m .wp2 .pop{animation:hero-m-pop2 var(--T) linear infinite}@keyframes hero-m-pop3{0%,37.2%{transform:scale(0)}39.7%{transform:scale(1.35)}42.2%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-m .wp3 .pop{animation:hero-m-pop3 var(--T) linear infinite}@keyframes hero-m-pop4{0%,62.0%{transform:scale(0)}64.5%{transform:scale(1.35)}67.0%,93%{transform:scale(1)}98%,100%{transform:scale(0)}}.route-m .wp4 .pop{animation:hero-m-pop4 var(--T) linear infinite}

.stage-win{position:relative;z-index:1;width:100%}
.loupe{z-index:3}
.stage-win img{aspect-ratio:1150/810}
.loupe{display:none}
.stage-ph{position:absolute;z-index:4;right:2%;bottom:-36px;width:44%;max-width:210px}
.stage-ph img{position:absolute;inset:0;opacity:0}
.stage-ph img:first-child{position:relative;opacity:1}
@keyframes scr1{0%,22%{opacity:1}28%,94%{opacity:0}100%{opacity:1}}
@keyframes scr2{0%,22%{opacity:0}28%,47%{opacity:1}53%,100%{opacity:0}}
@keyframes scr3{0%,47%{opacity:0}53%,72%{opacity:1}78%,100%{opacity:0}}
@keyframes scr4{0%,72%{opacity:0}78%,94%{opacity:1}100%{opacity:0}}
.stage-ph .s1{animation:scr1 var(--T) linear infinite}
.stage-ph .s2{animation:scr2 var(--T) linear infinite}
.stage-ph .s3{animation:scr3 var(--T) linear infinite}
.stage-ph .s4{animation:scr4 var(--T) linear infinite}

.ribbon{background:var(--accent-ink);color:#F7F1E3}
.ribbon ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 32px;padding-block:14px}
.ribbon li{display:flex;align-items:center;gap:10px;min-height:32px;font-weight:600;font-size:.95rem}
.ribbon .ic{color:var(--sun)}

/* Les quatre portes */
.pick{padding:88px 0 64px}
.pick h2,.trio h2,.quetes h2,.saison h2,.modes h2,.univers h2,.sitepro h2,.offre h2{font:700 clamp(2.2rem,5.4vw,4rem)/1 var(--ff-d);font-variation-settings:'opsz' 144;letter-spacing:-.03em;text-wrap:balance}
.pick-lead,.modes-lead{margin-top:14px;color:var(--muted);max-width:52ch;font-size:1.1rem}
.doors{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;min-height:410px;padding:26px 24px;border-radius:26px;overflow:hidden;text-decoration:none;isolation:isolate;transition:transform .35s var(--ease),flex .55s var(--ease),box-shadow .35s}
.door h3{max-width:12em;position:relative;z-index:2}
.door p{max-width:28ch;position:relative;z-index:2;font-size:1.02rem}
.door .go{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;margin-top:6px}
.door .go .ic{transition:transform .25s var(--ease)}
.door:hover .go .ic,.door:focus-visible .go .ic{transform:translateX(6px)}
.d-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.d-art img{position:absolute;top:calc(100% - 150px);filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.door:focus-visible{outline-offset:4px}

.d-part{background:#FFC83D;color:#24160F;box-shadow:0 5px 0 #24160F;border:2.5px solid #24160F}
.d-part h3{font:900 clamp(2.2rem,5vw,3.2rem)/.95 var(--ff-d);font-variation-settings:'opsz' 144;letter-spacing:-.03em}
.d-part .d-art img{width:190px;right:6%;transform:rotate(9deg);transition:transform .5s var(--ease)}
.d-part:hover .d-art img{transform:rotate(3deg) translateY(-14px)}
.d-part i{position:absolute;border-radius:50%}
/* Portes empilées (< 900 px) : le cercle ne descend pas sous 50 px de la porte (le texte « soirée » commence à ~66 px à 390 px) ; dès 900 px il passe dans la bande libre (voir plus bas). */
.d-part .c1{width:120px;height:120px;background:#FF6A4D;right:-50px;top:-70px}
.d-part .c2{width:34px;height:34px;background:#fff;border:2.5px solid #24160F;right:12%;top:36%}
.d-part .c3{width:56px;height:56px;background:#FFB8C8;border:2.5px solid #24160F;left:8%;bottom:34px}
.d-part .c4{width:18px;height:18px;background:#24160F;right:14%;top:44%}

.d-tour{background:#16362C;color:#F1EBDA}
.d-tour::before{content:"";position:absolute;inset:0;z-index:0;background:repeating-radial-gradient(ellipse 130% 100% at 85% 105%,transparent 0 16px,rgba(241,235,218,.11) 16px 17px)}
.d-tour h3{font:300 clamp(1.9rem,4.2vw,2.7rem)/1.02 var(--ff-d);font-variation-settings:'opsz' 144;letter-spacing:-.02em}
.d-tour .d-art img{width:190px;right:8%}
.d-tour .go{color:#E9C98A}

.d-ent{background:#150B33;color:#F4F0FF}
.d-ent h3{font:900 clamp(2rem,4.6vw,2.9rem)/.92 var(--ff-s);font-variation-settings:'opsz' 32;letter-spacing:-.055em}
.d-ent .d-art img{width:380px;max-width:none;right:-90px;top:calc(100% - 130px);transform:rotate(-6deg);border-radius:14px;transition:transform .5s var(--ease)}
.d-ent:hover .d-art img{transform:rotate(-2deg) translateY(-10px)}
.d-ent .bar{position:absolute;left:-10%;height:14px;width:130%;transform:rotate(-8deg)}
.d-ent .b1{background:#FFB020;top:62%}.d-ent .b2{background:#FF4D94;top:68%;opacity:.9}.d-ent .b3{background:#38E1D0;top:74%;opacity:.8}
.d-ent p{color:#D9D2F5}
.d-ent .go{color:#FFB020}

.d-asso{background:#DDEBD3;color:#1B4332}
.d-asso::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(60,110,140,.13) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(60,110,140,.13) 1px,transparent 1px) 0 0/22px 22px}
.d-asso h3{font:600 clamp(2rem,4.4vw,2.8rem)/1.04 var(--ff-d);font-variation-settings:'opsz' 72;letter-spacing:-.015em}
.d-asso .d-art img{width:190px;right:8%;transform:rotate(-4deg)}
.d-asso i{position:absolute;border-radius:50%}
.d-asso .g1{width:40px;height:40px;background:#F6B7A0;right:14%;top:22px}
.d-asso .g2{width:28px;height:28px;background:#9DCBE0;right:30%;top:60px}
.d-asso .g3{width:34px;height:34px;background:#F4D779;left:10%;bottom:40px}
/* Téléphones étroits (< 400 px, 17/10/2026) : le texte occupe presque toute la largeur de la porte (« une » de « Une association, une école… »,
   la flèche de « Préparer mon aventure »). Les cercles posés près du texte (c2, c4, g1, g2) sont retirés ; c1 (coin) et c3, g3 (bas, derrière le
   téléphone) restent. */
@media(max-width:399px){.d-part .c2,.d-part .c4,.d-asso .g1,.d-asso .g2{display:none}}

/* Trois gestes */
.trio{padding:88px 0 40px}
.trio-grid{display:grid;gap:56px;margin-top:48px;counter-reset:s}
.trio-grid li{counter-increment:s;position:relative}
.trio-grid li::before{content:counter(s);position:absolute;z-index:2;top:-16px;left:-6px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font:700 1.15rem var(--ff-d);box-shadow:0 0 0 4px var(--bg)}
.trio-grid h3{font:700 1.9rem/1.1 var(--ff-d);margin:22px 0 8px;letter-spacing:-.02em}
.trio-grid p{color:var(--muted);max-width:36ch}
.t2 .ph{width:min(58%,220px);margin-inline:auto}

/* Bande des modes */
.modes{padding:72px 0 88px}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 16px 24px 16px;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.strip article{flex:0 0 min(78vw,270px);scroll-snap-align:start;padding:18px 18px 22px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.m-ph{height:300px;overflow:hidden;border-radius:14px;background:#E9E1CB;padding:18px 34px 0}
.m-ph img{width:100%;transition:transform .5s var(--ease)}
.strip article:hover .m-ph img{transform:translateY(-14px)}
.strip h3{margin-top:16px;font:700 1.25rem/1.15 var(--ff-d)}
.strip p{margin-top:6px;color:var(--muted);font-size:.96rem}

/* Finale */
.finale{position:relative;overflow:hidden;isolation:isolate;background:var(--accent-ink);color:#F7F1E3;padding:88px 0;text-align:center}
.finale .scene{z-index:-1}
.finale h2{font:700 clamp(2rem,5vw,3.6rem)/1.02 var(--ff-d);letter-spacing:-.03em;max-width:18ch;margin-inline:auto;text-wrap:balance}
.finale p{max-width:52ch;margin:18px auto 0;color:#DCE6DD;font-size:1.1rem}
.pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0 28px}
.pills li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid rgba(247,241,227,.5);font-weight:600}

@media(min-width:900px){
  .route-d{display:block}.route-m{display:none}
  .stage{aspect-ratio:1120/640}
  .stage-win{width:76%}
  .stage-win img{aspect-ratio:1700/834}
  .loupe{display:block;position:absolute;z-index:3;left:3%;top:33%;width:40%;margin:0;background:#fff;border-radius:16px;border:3px solid var(--accent);box-shadow:0 26px 50px -14px rgba(20,30,25,.45);overflow:hidden}
  .loupe figcaption{padding:8px 14px 10px;font-weight:700;font-size:.9rem;color:var(--accent-ink);background:#EAF1E6}
  .stage-ph{right:3%;top:-30px;bottom:auto;width:23%;max-width:none}
  .hero{padding-bottom:96px}
  .hero .lead{max-width:none}
  .doors{flex-direction:row;height:640px}
  .door{flex:1;min-height:0;padding:32px 28px}
  .doors:hover .door,.doors:focus-within .door{flex:.8}
  .doors .door:hover,.doors .door:focus-visible{flex:1.75}
  .d-art img{top:calc(100% - 210px)}
  .d-part .d-art img{width:230px}
  .d-tour .d-art img{width:230px}
  .d-ent .d-art img{width:520px;right:-170px;top:calc(100% - 190px)}
  .d-asso .d-art img{width:230px}
  /* Cercles décoratifs (les <i> de .d-art, pas des pseudo-éléments) : en colonnes de ~300 px, ceux du haut passaient sous la fin de « particulier »,
     de « EVJF ou » et de « association, ». Ils descendent dans la bande libre entre le lien d'action (≤ 300 px de haut) et le haut du téléphone
     (640 - 210 = 430 px) : les portes ont ici une hauteur fixe de 640 px. Le blanc et le point sombre de .d-part (c2, c4) étaient déjà dégagés. */
  .d-part .c1{top:330px;right:-40px}
  .d-asso .g1{top:340px;right:14%}
  .d-asso .g2{top:388px;right:28%}
  .trio-grid{grid-template-columns:1.2fr .8fr 1.2fr;gap:44px;align-items:start}
  .t2{margin-top:70px}.t3{margin-top:140px}
  .strip{padding-inline:max(16px,calc((100vw - 1240px)/2 + 16px));scroll-padding-inline:max(16px,calc((100vw - 1240px)/2 + 16px))}
}
@media(prefers-reduced-motion:reduce){
  .route .walker{display:none}
  .doors:hover .door,.doors:focus-within .door{flex:1}
  .doors .door:hover,.doors .door:focus-visible{flex:1}
}

/* Premier écran d'un ordinateur (≥ 900 px de large) : l'éditeur et le téléphone tiennent en entier
   dans la hauteur visible (vérifié à 1440×900 et 1280×720) — le bloc éditeur se dimensionne sur la hauteur restante. */
@media(min-width:900px){
  .hero{padding-top:20px;padding-bottom:56px}
  .hero h1{font-size:clamp(2.75rem,min(8.2vw,7.6vh),4.9rem)}
  .hero .lead{margin-top:10px}
  .hero .cta{margin-top:16px}
  .stage{margin-top:28px;max-width:min(1120px,max(640px,calc((100vh - 440px)*2.04)))}
}

/* ── Soutien à l'éditeur (#soutenir) ──
   Masqué par défaut (attribut hidden) : landing.js ne le révèle que si le paiement est configuré.
   Couleurs = jetons uniquement (--accent, --accent-ink, --on-accent, --line, --focus) : la saison
   Octobre Rose les redéfinit (public/css/saison-octobre-rose.css), rien de codé en dur à retoucher.
   Contrastes (fond --bg #F7F1E3 / carte --surface #FDFAF2) : texte --muted 5,9:1 ; erreur #A4231B 6,6:1 ;
   bouton choisi --accent-ink + blanc ≥ 10:1 (rose saison #8E1149 : 8,9:1). */
.soutien{padding:72px 0 80px}
.soutien[hidden],.sout-form[hidden]{display:none}
.sout-card{--w:760px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 20px 32px;text-align:center;box-shadow:0 18px 40px -28px rgba(20,30,25,.35)}
.sout-kick{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.sout-kick .ic{width:1.5em;height:1.5em}
.soutien h2{margin-top:12px;font:700 clamp(1.7rem,4.2vw,2.6rem)/1.08 var(--ff-d);font-variation-settings:'opsz' 144;letter-spacing:-.02em;text-wrap:balance}
.sout-lead{max-width:60ch;margin:16px auto 0;color:var(--muted);font-size:1.02rem;line-height:1.65}
.sout-form{margin-top:28px}
.sout-amounts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sout-amt{flex:1 1 88px;max-width:132px;min-height:48px;padding:0 16px;border-radius:99px;border:1.5px solid rgba(31,42,36,.32);border-color:color-mix(in srgb,var(--accent-ink) 35%,transparent);background:var(--bg);color:var(--ink);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
@media(hover:hover){.sout-amt:hover{border-color:var(--accent);transform:translateY(-1px)}}
.sout-amt:active{transform:translateY(0)}
.sout-amt[aria-pressed="true"]{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.sout-custom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-top:20px}
.sout-custom label{font-weight:600}
.sout-field{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:12px;border:1.5px solid rgba(31,42,36,.32);border-color:color-mix(in srgb,var(--accent-ink) 35%,transparent);background:#fff;transition:border-color .18s var(--ease)}
.sout-field:focus-within{border-color:var(--focus);outline:3px solid var(--focus);outline-offset:2px}
.sout-field input{width:6.5rem;min-height:44px;border:0;padding:0;background:transparent;color:var(--ink);font:600 1rem/1 var(--ff-s);font-variant-numeric:tabular-nums;text-align:right}
.sout-field input:focus{outline:none}
.sout-field input::placeholder{color:#6B746E}
.sout-field:has(input[aria-invalid="true"]){border-color:#A4231B}
.sout-field span{font-weight:700;color:var(--muted)}
.sout-bounds{flex-basis:100%;font-size:.9rem;color:var(--muted)}
.sout-go{margin-top:24px;min-width:min(100%,260px)}
.sout-go[aria-busy="true"]{cursor:progress}
.sout-msg{min-height:1.6em;margin:16px auto 0;max-width:60ch;font-size:.98rem;line-height:1.6}
.sout-msg:empty{margin-top:0}
.sout-msg.is-err{color:#A4231B;font-weight:600}
.sout-msg.is-ok{color:var(--accent-ink);font-weight:700;font-size:1.08rem}
.sout-fine{max-width:62ch;margin:20px auto 0;padding-top:20px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.6;color:var(--muted)}
.sout-fine strong{color:var(--ink)}
@media(min-width:600px){
  .sout-card{padding:56px 48px 40px}
  .sout-amt{flex:0 0 auto;min-width:96px}
  .sout-bounds{flex-basis:auto}
}
@media(prefers-reduced-motion:reduce){.sout-amt:hover{transform:none}}

/* ═════ Des quêtes à jouer (11/10/2026) : 3 à 6 cartes tirées de la liste de l'appli ═════
   Mobile : bande qui défile (la carte suivante dépasse, on sait qu'il y en a d'autres) ; dès 640 px : grille. La photo est celle de
   la QUÊTE, 16:9, son crédit SOUS l'image ; sans photo, une tuile de la couleur du mode. Le lien du titre couvre toute la carte. */
.quetes{padding:88px 0 40px}
.quetes-lead{margin-top:14px;color:var(--muted);max-width:52ch;font-size:1.1rem}
.qlist{display:flex;gap:14px;margin-top:32px;padding:4px 2px 20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.qcard{position:relative;flex:0 0 min(84%,340px);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 3px rgba(20,30,25,.06);transition:transform .3s var(--ease),box-shadow .3s}
.q-fig{position:relative;margin:0;border-bottom:1px solid var(--line)}
.q-media{aspect-ratio:16/9;background:#E9E2CF;overflow:hidden}
.q-media img{width:100%;height:100%;object-fit:cover}
.qph{display:grid;place-items:center;width:100%;height:100%;color:#fff}
.qph .ic{width:44px;height:44px;stroke-width:1.5;opacity:.92}
.qph-out{background:linear-gradient(135deg,#2D6A4F,#1B4332)}
.qph-in{background:linear-gradient(135deg,#B4763D,#6B4423)}
.qph-wq{background:linear-gradient(135deg,#B26B00,#6B4000)}
/* Crédit photo EN SURIMPRESSION en bas de l'image (17/10/2026) : plus de ligne réservée sous l'image (bande vide de 46 px sur les cartes sans crédit) ;
   l'image a toujours la même hauteur, donc les titres d'une rangée restent alignés. Texte blanc sur un dégradé sombre : pire cas (photo blanche) 6,2:1 au
   niveau de la première ligne du texte, davantage plus bas. Sans crédit : rien. */
.q-credit{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;padding:22px 12px 6px;font-size:.72rem;line-height:1.4;color:#fff;text-align:right;overflow-wrap:anywhere;background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.62) calc(100% - 22px),rgba(0,0,0,0) 100%)}
.q-credit-none{display:none}
.q-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 18px;flex:1}
.q-mode{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--accent-ink)}
.q-mode .ic{width:1.1em;height:1.1em}
.q-name{font:700 1.2rem/1.2 var(--ff-d);font-variation-settings:'opsz' 36;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.q-link{text-decoration:none}
.q-link::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--r-lg)}
.q-link:focus-visible{outline:none}
.q-link:focus-visible::after{outline:3px solid var(--focus);outline-offset:3px}
.q-meta{font-size:.9rem;color:var(--muted)}
.q-org{font-size:.85rem;color:var(--muted);margin-top:auto;padding-top:6px;overflow-wrap:anywhere}
.quetes-all{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 28px}
/* Lien discret vers le catalogue : l'inscription est le bouton, pas ce lien (16/10/2026) */
.quetes-more{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600;text-underline-offset:4px;text-decoration-thickness:2px}
.quetes-more:hover{text-decoration-thickness:3px}
@media(hover:hover){.qcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(20,30,25,.3)}}
@media(min-width:640px){.qlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding-inline:0}.qcard{flex:none}}
@media(min-width:960px){.qlist{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media(prefers-reduced-motion:reduce){.qcard{transition:none}.qcard:hover{transform:none}}

/* ═════ Saison suivante (16/10/2026) : ce qui sert à l'organisateur quand l'événement revient ═════
   Mobile d'abord : une colonne ; dès 640 px deux colonnes, dès 1 100 px quatre. Jetons de la page seulement (la saison Octobre Rose les
   redéfinit). Contrastes : texte --muted sur --surface 5,9:1 ; icône --accent-ink sur la pastille. Aucun mouvement. */
.saison{padding:56px 0 24px}
.saison-lead{margin-top:14px;color:var(--muted);max-width:52ch;font-size:1.1rem}
.saison-grid{display:grid;gap:14px;margin-top:32px}
.sa-card{display:flex;flex-direction:column;gap:10px;padding:24px 22px 26px;border-radius:var(--r-lg);background:var(--surface);border:1.5px solid var(--line)}
.sa-card>.ic{box-sizing:content-box;width:26px;height:26px;padding:11px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent-ink);align-self:flex-start}
.sa-card h3{font:700 1.3rem/1.2 var(--ff-d);font-variation-settings:'opsz' 36;letter-spacing:-.01em;text-wrap:balance}
.sa-card p{color:var(--muted);line-height:1.55}
.saison-pro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:18px;padding:18px 24px;border-radius:20px;border:1.5px solid var(--ink);background:var(--surface);line-height:1.5}
.saison-pro span{max-width:70ch}
.saison-pro strong{font-weight:700}
.saison-pro .go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px}
.saison-pro .go .ic{transition:transform .25s var(--ease)}
.saison-pro .go:hover .ic,.saison-pro .go:focus-visible .ic{transform:translateX(5px)}
.saison + .sitepro{padding-top:56px}
@media(min-width:640px){.saison-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(min-width:900px){.saison{padding:72px 0 24px}}
@media(min-width:1100px){.saison-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Début des textes aligné d'une carte à l'autre (16/10/2026) : le titre de « Plusieurs personnes sur le même espace » tient sur 3 lignes dès que les
   cartes sont en colonnes, les trois autres sur 2 ; les paragraphes ne commençaient pas à la même hauteur. Chaque carte occupe 3 lignes de la grille
   (pictogramme, titre, texte) en SOUS-GRILLE : une rangée de cartes partage ses hauteurs de lignes, quel que soit le nombre de lignes de chaque titre.
   Sans sous-grille (navigateur ancien) : la carte flex d'avant, inchangée. Aucun `gap` dans la sous-grille (l'écart parent/sous-grille est le cas
   fragile) : les espacements sont des marges (10 px entre pictogramme, titre et texte) et `--g` entre les cartes, repris par une marge négative
   sous la grille pour que le bloc « Pour les professionnels » reste à la même distance qu'avant. */
@supports (grid-template-rows:subgrid){
  .saison-grid{--g:14px;gap:0 var(--g);margin-bottom:calc(var(--g) * -1)}
  .sa-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0;align-content:start;margin-bottom:var(--g)}
  .sa-card>.ic{justify-self:start}
  .sa-card h3{margin-top:10px}
  .sa-card p{margin-top:10px}
}
@media(min-width:640px){@supports (grid-template-rows:subgrid){.saison-grid{--g:18px}}}
@media(prefers-reduced-motion:reduce){.saison-pro .go .ic{transition:none}.saison-pro .go:hover .ic,.saison-pro .go:focus-visible .ic{transform:none}}

/* ═════ Rythme vertical entre rubriques de l'accueil (16/10/2026) ═════
   Les cinq rubriques « trio, quêtes, saison, site, offre » s'espaçaient de 80 à 152 px selon que le bas de l'une et le haut de la suivante
   s'additionnaient (trio→quêtes 128, quêtes→saison 96/112, saison→site 80, site→offre 152). Une seule échelle : l'espace entre deux rubriques est
   --rub (72 px, 96 px dès 900 px), porté par le HAUT de la rubrique qui suit ; le bas des quatre premières est à 0. Le haut du trio (88 px, après le
   ruban) ne change pas ; l'offre → « Vous êtes… » suit la même échelle (bas de l'offre à 0, haut de .pick = --rub). `.sitepro` et `.offre` sont partagées avec d'autres pages : tout est
   scopé à `.pg-home`. En fin de fichier, après `.saison + .sitepro` et les paliers de `.saison`, pour l'emporter à spécificité égale. */
.pg-home{--rub:72px}
@media(min-width:900px){.pg-home{--rub:96px}}
.pg-home .trio{padding-bottom:0}
.pg-home .quetes,.pg-home .saison,.pg-home .sitepro,.pg-home .offre{padding-top:var(--rub)}
.pg-home .quetes,.pg-home .saison,.pg-home .sitepro{padding-bottom:0}
/* Même écart entre l'offre et « Vous êtes… » (#public) : il valait 168 à 184 px (bas de l'offre 80/96 + haut de .pick 88). */
.pg-home .offre{padding-bottom:0}
.pg-home .pick{padding-top:var(--rub)}