/* En-tete et pied communs (marqueurs <!--ENTETE--> / <!--PIED-->), et la page « Explorer » (sombre comme celle de la video de reference). */

/* ---- en-tete : le bouton d'action ressort, les liens se montrent a partir de 700 px (voir site.css) */
.site-header nav .button{white-space:nowrap}

/* ---- pied de page commun */
.site-footer.pied{display:block;padding:3rem 1.25rem 2rem;max-width:1440px;margin:0 auto;color:var(--muted);font-size:.9rem}
.pied-colonnes{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
.pied-colonnes h2{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0 0 .8rem}
.pied-colonnes a{display:block;color:inherit;text-decoration:none;padding:.18rem 0}
.pied-colonnes a:hover,.pied-bas a:hover{color:var(--ink)}
.pied-bas{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center;margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.8rem}
@media (min-width:700px){.site-footer.pied{padding:4rem 3rem 2.2rem}.pied-colonnes{grid-template-columns:repeat(3,minmax(0,14rem))}}

/* ---- page Explorer : toujours sombre */
body.evenements{--bg:#0b0b0d;--ink:#f4f4f6;--muted:#a0a0aa;--surface:#17171b;--line:#26262c;--green:#1e8e58}
html:has(body.evenements){background:#0b0b0d}
body.evenements{background:radial-gradient(120% 32rem at 15% -8rem,rgba(30,142,88,.22),transparent 60%),#0b0b0d}
.evenements main{margin:0;padding:1rem 1.25rem 4rem}   /* memes marges que l'en-tete : le contenu va du logo au bouton du menu */
.entete-section{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin:2.2rem 0 1.1rem}
.entete-section h1,.entete-section h2{font-size:1.15rem;letter-spacing:-.03em;margin:0;font-weight:700}
.compte{color:var(--muted);font-weight:500;margin-left:.2rem}

/* ---- a la une : piste pleine largeur (d'un bord a l'autre de l'ecran), une position de focus a gauche du contenu */
.a-la-une{overflow-x:clip;overflow-y:visible;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}   /* clip en largeur seulement : les details sous la carte au focus ne sont pas coupes */
.a-la-une .entete-section{margin-left:0;margin-right:0}
.une-piste{display:flex;gap:.9rem;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 0 .4rem;will-change:transform;transition:transform .55s cubic-bezier(.19,1,.22,1)}
.une-piste:not(.js-une){overflow-x:auto;scrollbar-width:none;padding-left:calc(50vw - 50%)}   /* sans JavaScript : defilable a la main */
.une-piste::-webkit-scrollbar{display:none}
.une-piste:focus-visible{outline:3px solid var(--green);outline-offset:6px;border-radius:.6rem}
.une-piste .carte-sortie{flex:0 0 8.6rem;transition:flex-basis .55s cubic-bezier(.19,1,.22,1);user-select:none;-webkit-user-drag:none}
.une-piste .carte-sortie.est-focus{flex-basis:min(15.5rem,66vw)}
.une-piste .carte-sortie:not(.est-focus) .carte-details{display:none}
.une-piste .carte-affiche{align-self:flex-start;width:100%}
.une-piste img{-webkit-user-drag:none;pointer-events:none}
.fleches{display:flex;gap:.5rem}
.fleches button{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;transition:background .3s}
.fleches button:hover:not(:disabled){background:#26262c}
.fleches button:disabled{opacity:.35;cursor:default}

/* ---- une carte de sortie (a la une et grille), comme la reference : affiche 4:5 a coins de 4 px, puis organisateur (+ badge),
   titre en poids normal sur deux lignes, « prix · lieu » et « jour, heures » en petit gris */
.carte-sortie{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;min-width:0}
.carte-details{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1rem 0 0;min-width:0}
.carte-affiche{display:block;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--surface)}
.carte-affiche img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.carte-sortie:hover .carte-affiche img,.carte-sortie:focus-visible .carte-affiche img{transform:scale(1.04)}
.carte-sortie:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:4px}
.carte-lieu{display:flex;align-items:center;gap:.3rem;font-size:.75rem;line-height:1rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-verifie{flex:none;color:#8d8d97}
.carte-titre{font-size:1rem;line-height:1.5rem;font-weight:400;letter-spacing:-.01em;padding:.25rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte-quand{font-size:.75rem;line-height:1rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte-quand+.carte-quand{margin-top:-.05rem}
.carte-sortie[hidden]{display:none}
.une-piste .carte-affiche{border-radius:2px}

/* ---- a venir : barre collante (titre + filtres), filtres en pilules, grille 4 puis 5 colonnes, grands espaces entre rangees */
.entete-collante{position:sticky;top:0;z-index:5;background:#0b0b0d;padding:1rem 0 1.2rem;margin:1.2rem 0 .4rem}
.filtres{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;scrollbar-width:none;max-width:100%}
.filtres::-webkit-scrollbar{display:none}
.filtres select{appearance:none;-webkit-appearance:none;flex:none;height:2.25rem;field-sizing:content;text-align:center;background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--line);border-radius:3rem;padding:0 1rem;font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .3s,border-color .3s}
.filtres select:hover{background:rgba(255,255,255,.12)}
.filtres select.actif{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filtres select option{background:#17171b;color:#f4f4f6}
.filtres select:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.filtre{flex:none;display:inline-flex}
@media (max-width:699px){.filtres select{pointer-events:none;-webkit-tap-highlight-color:transparent}.filtres select:focus,.filtres select:focus-visible{outline:none}.filtre{-webkit-tap-highlight-color:transparent}}
/* Feuille montee du bas (filtres sur telephone), comme dans l'app. */
.feuille-ouverte{overflow:hidden}
.feuille{position:fixed;inset:0;z-index:60}
.feuille-fond{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
.feuille-corps{position:absolute;left:0;right:0;bottom:0;max-height:75vh;overflow-y:auto;overscroll-behavior:contain;background:#17171b;color:#f4f4f6;border-radius:1.25rem 1.25rem 0 0;padding:.6rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .25s cubic-bezier(.19,1,.22,1)}
.feuille.ouverte .feuille-fond{opacity:1}.feuille.ouverte .feuille-corps{transform:none}
.feuille-poignee{display:block;width:2.5rem;height:.3rem;border-radius:.2rem;background:rgba(255,255,255,.25);margin:0 auto .9rem}
.feuille-titre{margin:0 0 .4rem;font-size:1.05rem;font-weight:700}
.feuille-liste{list-style:none;margin:0;padding:0}
.feuille-liste button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.95rem .2rem;background:none;border:0;border-top:1px solid rgba(255,255,255,.08);color:inherit;font:inherit;font-size:1rem;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.feuille-liste button:focus{outline:none}
.feuille-liste button.choisie{font-weight:700}
.feuille-liste button.choisie::after{content:"✓";color:var(--lime)}
@media (min-width:700px){.feuille{display:none}}

.grille{display:grid;grid-template-columns:1fr;gap:1rem}
.grille .carte-sortie{flex-direction:row;gap:.75rem;align-items:flex-start}
.grille .carte-affiche{flex:none;width:7rem;height:8.75rem;aspect-ratio:auto}
.grille .carte-details{padding:0;gap:.25rem}
.grille .carte-lieu{display:none}
.vide{color:var(--muted);text-align:center;padding:3rem 0}
.vide button{background:none;border:0;color:var(--ink);text-decoration:underline;font:inherit;cursor:pointer}
@media (min-width:700px){
  .evenements main{padding:1.5rem 3rem 5rem}
  .une-piste .carte-sortie{flex-basis:11.5rem}.une-piste .carte-sortie.est-focus{flex-basis:19.5rem}.une-piste{gap:1.1rem}
  .grille{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.5rem;row-gap:6rem}
  .grille .carte-sortie{flex-direction:column;gap:0}
  .grille .carte-affiche{width:100%;height:auto;aspect-ratio:4/5}
  .grille .carte-details{padding:1rem 1rem 0 0}
  .grille .carte-lieu{display:flex}
}
@media (min-width:1536px){.grille{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.carte-affiche img,.fleches button,.une-piste .carte-sortie,.une-piste{transition:none}.carte-sortie:hover .carte-affiche img{transform:none}}

/* ---- page Vision : une longue lettre sur fond sombre (JCM-110), comme celle de la reference. Un bandeau d'ouverture, puis une colonne de texte
   en sections numerotees. Chaque paragraphe se revele en entrant dans l'ecran (sans JavaScript ou en mouvement reduit, tout est visible). */
body.vision{--bg:#0b0b0d;--ink:#f4f4f6;--muted:#a0a0aa;--surface:#17171b;--line:#26262c;--green:#1e8e58;background:#0b0b0d}
html:has(body.vision){background:#0b0b0d}
body.vision .site-header{position:absolute;top:0;left:0;right:0;z-index:5}   /* l'en-tete se pose sur le bandeau */
.vision-hero{position:relative;height:clamp(17rem,36vw,31rem);overflow:hidden;background:#07080a}
.vision-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.vision-voile{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,11,13,.6) 0,rgba(11,11,13,0) 30%,rgba(11,11,13,0) 55%,#0b0b0d 100%)}   /* l'en-tete reste lisible, le bas fond dans la page */
.vision-credit{position:absolute;z-index:2;left:1.25rem;bottom:.8rem;margin:0;font-size:.7rem;color:rgba(255,255,255,.62)}.vision-credit a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (min-width:700px){.vision-credit{left:3rem}}
.vision-arc{position:absolute;left:-8%;right:-8%;bottom:-62%;height:95%;border-radius:50%;border-top:2px solid rgba(74,222,128,.95);box-shadow:0 -14px 46px rgba(74,222,128,.4)}
.vision-texte{max-width:50rem;margin:0 auto;padding:2.6rem 1.25rem 5rem}
.vision-texte h1{margin:0 0 1.6rem;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.05em;line-height:1}
.vision-texte p,.vision-texte li{color:#c9c9d1;font-size:1.02rem;line-height:1.65;margin:0 0 1.25rem}
.vision-texte a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:.22em}
.vision-texte a:hover{text-decoration-color:var(--ink)}
.vision-texte .vision-phrase{margin:2.2rem 0 1.6rem;color:var(--ink);font-size:clamp(1.45rem,2.8vw,2rem);font-weight:600;line-height:1.2;letter-spacing:-.045em}.vision-phrase em{font-style:normal;color:#4ade80}   /* l'idee du site : la bonne position */
.vision-section{margin-top:2.6rem;padding-top:2.4rem;border-top:1px solid var(--line)}
.vision-section h2{display:flex;gap:.9rem;align-items:baseline;margin:0 0 1.5rem;font-size:clamp(1.25rem,2vw,1.5rem);font-weight:700;letter-spacing:-.04em;line-height:1.15}
.vision-section h2 span{flex:none;color:var(--muted);font-size:.9rem;font-weight:600;letter-spacing:0}
.vision-texte ul{margin:0 0 1.25rem;padding-left:1.3rem}.vision-texte li{margin:0 0 .45rem}
.vision-chapitres{display:grid;gap:1.6rem;margin:2rem 0 2.2rem}
.vision-chapitres article{padding:0}.vision-chapitres h3{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:var(--ink)}.vision-chapitres p{margin:0}
@media (min-width:700px){.vision-chapitres{grid-template-columns:repeat(3,1fr);gap:0}.vision-chapitres article{padding:0 1.5rem}.vision-chapitres article:first-child{padding-left:0}.vision-chapitres article+article{border-left:1px solid var(--line)}}
.vision-signature{margin-top:2.2rem;color:var(--muted)!important}.vision-signature strong{color:var(--ink);font-weight:600}
.apparition [data-apparition]{opacity:.22;transform:translateY(.7rem);transition:opacity .8s ease,transform .8s ease}
.apparition [data-apparition].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.apparition [data-apparition]{opacity:1;transform:none;transition:none}}