/* 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{max-width:1440px;margin:0 auto;padding:1rem 1.25rem 4rem}
.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 : une grande affiche puis une rangee, avec fleches */
.une-piste{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
.une-piste::-webkit-scrollbar{display:none}
.une-piste .carte-sortie{flex:0 0 9.2rem;scroll-snap-align:start}
.une-piste .carte-une{flex-basis:min(15rem,62vw)}
.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) */
.carte-sortie{display:flex;flex-direction:column;gap:.18rem;color:var(--ink);text-decoration:none;min-width:0}
.carte-affiche{display:block;aspect-ratio:4/5;border-radius:.6rem;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:.6rem}
.carte-lieu{font-size:.76rem;color:var(--muted);margin-top:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carte-titre{font-size:.95rem;line-height:1.2;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte-quand{font-size:.78rem;color:var(--muted)}
.carte-sortie[hidden]{display:none}

/* ---- a venir : filtres en pilules et grille */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem}
.filtres label{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted)}
.filtres select{appearance:none;-webkit-appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a0a0aa' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .8rem center;color:var(--ink);border:1px solid var(--line);border-radius:3rem;padding:.5rem 2rem .5rem 1rem;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.filtres select:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem}
.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:11rem}.une-piste .carte-une{flex-basis:17rem}
  .grille{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:2rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){.carte-affiche img,.fleches button{transition:none}.carte-sortie:hover .carte-affiche img{transform:none}}