/* Galeries photo — Moustier en fête.
   Index en mur d'affiches, page événement en sections empilées. */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/anton-400-latin.woff2) format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/bebas-neue-400-latin.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/archivo-400-800-latin.woff2) format('woff2')}

:root{
  --jaune:#f6c800;
  --marine:#002468;
  --rouge:#c1121f;
  --creme:#fffdf5;
  --encre:#14161b;
  --trait:rgba(0,36,104,.16);
  --doux:rgba(0,36,104,.62);
  --gouttiere:14px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--creme);color:var(--encre);font-family:'Archivo',system-ui,sans-serif;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:2px}

/* ---------- bandeau ---------- */
.bandeau{background:var(--jaune);border-bottom:4px solid var(--encre)}
.bandeau-inner{max-width:1180px;margin:0 auto;padding:18px 20px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.marque{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:clamp(22px,4vw,30px);letter-spacing:.5px;line-height:1;text-decoration:none}
.marque span{color:var(--rouge)}
.fil{margin-left:auto;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--marine)}
.fil a{color:inherit}

/* ---------- entête de page ---------- */
.entete{max-width:1180px;margin:0 auto;padding:40px 20px 0}
.entete h1{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.95;font-size:clamp(34px,7vw,64px);color:var(--marine)}
.entete .chapo{margin-top:12px;max-width:62ch;color:var(--doux);font-size:17px}
.entete .meta{margin-top:10px;font-family:'Bebas Neue',Impact,sans-serif;font-size:20px;letter-spacing:3px;color:var(--rouge)}
.retour{display:inline-block;margin-bottom:18px;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--rouge);text-decoration:none}
.retour:hover{text-decoration:underline}

/* ---------- mur d'affiches ---------- */
.mur{max-width:1180px;margin:0 auto;padding:28px 20px 60px;display:grid;
     grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:22px}
.carte{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.affiche{aspect-ratio:5/7;background:var(--accent);border:3px solid var(--encre);
         display:flex;flex-direction:column;justify-content:center;align-items:center;
         gap:2px;padding:18px 14px;text-align:center;color:var(--sur-accent);
         position:relative;overflow:hidden}
.affiche::after{content:'';position:absolute;inset:8px;border:1px solid currentColor;opacity:.35;pointer-events:none}
.aff-titre{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:clamp(17px,2.1vw,22px);line-height:1.05}
.aff-annee{font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(56px,8vw,84px);line-height:.85;letter-spacing:4px;margin-top:6px}
.aff-date{font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.8}
.aff-nb{margin-top:10px;font-weight:700;font-size:12px;letter-spacing:1px;opacity:.85}
.carte-pied{margin-top:10px;font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--rouge)}
a.carte:hover .affiche,a.carte:focus-visible .affiche{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--encre)}
a.carte .affiche{transition:transform .12s,box-shadow .12s}
.carte.absente .affiche{background:#e3e1d8;color:#6a6f7d;border-color:#b6b4ab;box-shadow:none}
.carte.absente .carte-pied{color:var(--doux)}

/* ---------- sections de la galerie ---------- */
.section{max-width:1180px;margin:0 auto;padding:0 20px;scroll-margin-top:24px}
.section+.section{margin-top:52px}
.section h2{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
            font-size:clamp(24px,4vw,38px);color:var(--marine);line-height:1.05}
.section .compte{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:2px;color:var(--rouge);margin-left:10px}
.section .desc{margin-top:6px;max-width:62ch;color:var(--doux)}
.section .barre{width:64px;height:6px;background:var(--jaune);border:2px solid var(--encre);margin-top:14px}

.grille{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:var(--gouttiere)}
.vign{position:relative;padding:0;border:none;background:var(--trait);cursor:zoom-in;
      aspect-ratio:4/3;overflow:hidden;border-radius:3px}
.vign img{width:100%;height:100%;object-fit:cover}
.vign:hover img{transform:scale(1.04)}
.vign img{transition:transform .18s}
/* Le clamp se pose sur un span interne : sur la boîte absolue elle-même,
   display:-webkit-box est neutralisé et le texte est coupé net au lieu
   d'être suivi de points de suspension. */
.vign .leg{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;text-align:left;
           font-size:12px;line-height:1.3;color:#fff;
           background:linear-gradient(transparent,rgba(0,0,0,.72))}
.vign .leg span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- lightbox ---------- */
dialog.boite{border:none;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100dvh;background:rgba(10,12,18,.96);color:#fff}
dialog.boite::backdrop{background:rgba(10,12,18,.9)}
.boite-corps{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:68px 76px 10px}
.boite-scene{min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.boite-scene img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.boite-scene video{max-width:100%;max-height:100%;width:auto;height:auto;background:#000}
.boite-scene [hidden]{display:none}
.boite-pied{padding:12px 8px 6px;text-align:center;max-width:70ch;margin:0 auto}
.boite-legende{font-size:15px}
.boite-legende:empty{display:none}
.boite-credit{margin-top:4px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.boite-rang{margin-top:6px;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:2px;font-size:15px;color:var(--jaune)}
.boite button{position:absolute;background:rgba(255,253,245,.12);color:#fff;border:2px solid rgba(255,253,245,.5);
              width:52px;height:52px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1}
.boite button:hover{background:var(--rouge);border-color:var(--rouge)}
.b-prec{left:10px;top:calc(50% - 26px)}
.b-suiv{right:10px;top:calc(50% - 26px)}
.b-fermer{right:10px;top:10px}
.b-diapo{right:72px;top:10px;font-size:17px}
.b-diapo[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune);color:var(--encre)}
.b-diapo[aria-pressed="true"]:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.boite button[disabled]{opacity:.25;cursor:default}
body.fige{overflow:hidden}

/* ---------- pied ---------- */
footer.pied{margin-top:70px;border-top:4px solid var(--encre);background:var(--jaune)}
.pied-inner{max-width:1180px;margin:0 auto;padding:24px 20px 30px;font-size:13px;color:var(--marine)}
.pied-inner p+p{margin-top:6px}
.mentions{opacity:.75}

@media (max-width:640px){
  .boite-corps{padding:60px 8px 8px}
  .boite button{width:44px;height:44px}
  .b-prec{left:4px}
  .b-suiv{right:4px}
  .b-diapo{right:62px}
}
@media (max-width:420px){
  :root{--gouttiere:8px}
  .mur{gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
  .grille{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- index vide ---------- */
/* La grille du mur est en colonnes de 210 px : sans grid-column, le message
   se retrouverait coincé dans une seule colonne. */
.rien{grid-column:1/-1;max-width:62ch;border-left:6px solid var(--jaune);
      padding:2px 0 2px 20px;color:var(--doux)}
.rien h2{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
         font-size:22px;color:var(--marine);margin-bottom:10px}
.rien p+p{margin-top:10px}
.rien code{display:inline-block;background:rgba(0,36,104,.08);padding:3px 8px;
           border-radius:4px;font-size:13.5px;
           font-family:ui-monospace,Menlo,monospace;color:var(--encre)}

/* ---------- vidéos ---------- */
.vign-video .lire{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
                  border-radius:50%;background:rgba(10,12,18,.62);border:2px solid rgba(255,253,245,.85);
                  pointer-events:none}
.vign-video .lire::after{content:'';position:absolute;left:17px;top:12px;border-style:solid;
                         border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fffdf5}
.vign-video .duree{position:absolute;right:6px;top:6px;padding:1px 7px;border-radius:3px;
                   background:rgba(10,12,18,.72);color:#fffdf5;font-family:'Bebas Neue',Impact,sans-serif;
                   font-size:14px;letter-spacing:1px;font-variant-numeric:tabular-nums}
.vign-video:hover .lire{background:var(--rouge);border-color:var(--rouge)}