/* ==================================================================
   base.css — structure commune aux deux thèmes
   Les couleurs et polices viennent des variables définies par chaque
   thème (themes/<thème>/theme.css). Ici : mise en page, composants,
   accessibilité. Mobile d'abord.
   ================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:400 1.0625rem/1.7 var(--f-texte);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--accent);color:var(--fond);padding:.6rem 1rem;text-decoration:none;font-weight:600}
.evitement:focus{top:1rem}
.wrap{max-width:var(--max,1240px);margin-inline:auto;padding-inline:var(--gouttiere,clamp(16px,4vw,48px))}
h1,h2,h3{font-family:var(--f-titre);font-weight:var(--titre-poids,700);font-style:var(--titre-style,normal);text-transform:var(--titre-casse,none);line-height:var(--titre-interligne,1);letter-spacing:var(--titre-espacement,0);text-wrap:balance;margin:0}
p{margin:0 0 1em}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.4rem;border:1px solid var(--texte);background:transparent;color:var(--texte);
  text-decoration:none;cursor:pointer;font:600 .76rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;border-radius:var(--rayon,2px);
  position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--texte);transform:translateX(-101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:var(--fond)}.btn:hover::before{transform:none}
.btn.plein-btn{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.btn.plein-btn::before{background:var(--texte)}
.cta-ligne{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center}
.cta-texte{font:var(--titre-poids) clamp(1.4rem,3vw,2rem)/1.1 var(--f-titre);font-style:var(--titre-style);text-transform:var(--titre-casse);margin:0 1rem 0 0}

/* ---------- Bandeau des pages intérieures ---------- */
.bandeau{position:relative;padding-block:clamp(8rem,18vw,12rem) clamp(3rem,7vw,5rem);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--ligne)}
.bandeau::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--bandeau-image) center/cover;filter:var(--bandeau-filtre)}
.bandeau::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bandeau-voile)}
.bandeau-surtitre{display:flex;align-items:center;gap:.7rem;font:500 .78rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem;animation:monte .8s .1s both}
.bandeau-surtitre img{width:28px;height:auto}
.bandeau h1{font-size:clamp(2.6rem,7vw,5.6rem);max-width:18ch;animation:monte .9s .2s both}
.bandeau-intro{max-width:40rem;color:var(--texte-2);font-size:1.1rem;margin:1.4rem 0 0;animation:monte .9s .35s both}
@keyframes monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Sections ---------- */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section-alt{background:var(--surface)}
.titre-section{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:2rem}
.titre-annee{font-size:clamp(2.4rem,6vw,4rem);color:var(--accent);margin:2.5rem 0 1.4rem}
.titre-annee:first-child{margin-top:0}
.grille-2{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.grille-2>*{min-width:0}
@media (min-width:860px){.grille-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.vide{color:var(--texte-2);border:1px dashed var(--ligne);padding:2rem;text-align:center}
.vide p{margin:.3rem 0}
.note{color:var(--texte-2);font-size:.88rem;margin-top:1rem}
.cadre{margin:0;overflow:hidden}
.cadre img{width:100%;height:auto}

/* Apparition au défilement : l'élément reste lisible même si l'effet n'est pas supporté. */
@supports (animation-timeline: view()){
  .apparait{animation:apparait linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes apparait{from{opacity:.55;transform:translateY(40px)}to{opacity:1;transform:none}}
}

/* ---------- Texte riche ---------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,3.5vw,2.4rem);margin:0 0 1rem}
.prose h3{font-size:1.4rem;margin:1.8rem 0 .6rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose ul{padding-left:1.2rem}
.prose li{margin:.25em 0}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose blockquote{margin:1.5rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--accent);background:var(--surface);font-style:italic}
.prose blockquote p:last-child{margin:0}
.prose strong{color:var(--texte)}
.prose-large{max-width:78ch}
.citation{margin:1.5rem 0 0;font:var(--citation-font,italic 400 1.5rem/1.4 var(--f-titre));color:var(--texte)}

/* ---------- Cartes (actus) ---------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.2rem}
.carte{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--ligne);text-decoration:none;min-width:0;transition:border-color .3s,transform .35s}
.carte:hover{border-color:var(--accent);transform:translateY(-3px)}
.carte-visuel{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.carte-visuel img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.carte:hover .carte-visuel img{transform:scale(1.06)}
.carte-defaut{filter:grayscale(1) brightness(.5)}
.carte-corps{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem}
.carte-date{display:flex;align-items:center;gap:.5rem;font:500 .74rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
.carte-date img{width:24px;height:auto}
.carte h3{font-size:1.45rem;line-height:1.08}
.carte p{margin:0;color:var(--texte-2);font-size:.95rem}

/* ---------- Dates de concert ---------- */
.dates{display:grid;gap:1rem}
.date-ligne{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--ligne);transition:border-color .3s,transform .3s}
.date-ligne:hover{border-color:var(--accent)}
.date-bloc{display:grid;place-content:center;text-align:center;padding:1rem .4rem;border-right:2px dashed var(--ligne);position:relative}
.date-bloc .j{font:var(--titre-poids) 2.6rem/.9 var(--f-titre);color:var(--accent)}
.date-bloc .m,.date-bloc .a{font:500 .72rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
.date-infos{padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.25rem;min-width:0}
.date-groupe{font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.date-infos h3{font-size:1.5rem;line-height:1.05}
.date-lieu{color:var(--texte-2);font-size:.95rem}
.date-lien{grid-column:1/-1;border-top:1px solid var(--ligne);padding:.8rem 1.3rem;text-decoration:none;font:500 .75rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media (min-width:700px){
  .date-ligne{grid-template-columns:6.5rem minmax(0,1fr) auto}
  .date-lien{grid-column:auto;border-top:0;border-left:1px solid var(--ligne);display:flex;align-items:center;padding:0 1.6rem}
}
.dates-passees .date-ligne{opacity:.75}
.archives summary{cursor:pointer;font:500 .8rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);margin-bottom:1.2rem}

/* ---------- Groupes ---------- */
.fiches-groupes{display:grid;gap:clamp(3rem,7vw,6rem)}
.fiche-groupe{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:860px){
  .fiche-groupe{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .fiche-groupe:nth-child(even) .fiche-visuel{order:2}
}
.fiche-visuel{overflow:hidden;background:var(--surface);aspect-ratio:4/5;max-height:620px}
.fiche-visuel img{width:100%;height:100%;object-fit:cover}
.fiche-role{font:500 .78rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.fiche-groupe h2{font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:1.2rem;overflow-wrap:anywhere}
.liens-externes{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-direction:column}
.liens-externes a{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--ligne);text-decoration:none;transition:color .3s,padding .3s}
.liens-externes a:hover{color:var(--accent);padding-left:.5rem}

/* ---------- Médias ---------- */
.sous-nav{position:sticky;top:var(--hauteur-entete,64px);z-index:20;background:var(--fond-translucide);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
.sous-nav .wrap{display:flex;gap:1.6rem;overflow-x:auto;padding-block:.9rem}
.sous-nav a{text-decoration:none;font:500 .78rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-2);white-space:nowrap}
.sous-nav a:hover{color:var(--accent)}
#videos,#audio,#galerie{scroll-margin-top:130px}
.videos-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:1.2rem}

.video{position:relative}
.video-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;border:0;padding:0;cursor:pointer;color:#fff;text-decoration:none}
.video-btn img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .5s}
.video-btn:hover img{transform:scale(1.05);filter:brightness(.75)}
.video-play{position:absolute;left:50%;top:45%;translate:-50% -50%;width:clamp(64px,8vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--sur-accent);transition:transform .3s}
.video-play::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--accent);animation:onde 2.2s infinite}
.video-btn:hover .video-play{transform:scale(1.08)}
@keyframes onde{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}
.video-legende{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.3rem;text-align:left;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.video-legende strong{display:block;font:var(--titre-poids) clamp(1.2rem,2.4vw,1.8rem)/1.05 var(--f-titre);font-style:var(--titre-style);text-transform:var(--titre-casse)}
.video-groupe{font:500 .7rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.video-externe{position:absolute;top:1rem;right:1rem;font:500 .7rem var(--f-mono);letter-spacing:.12em;background:rgba(0,0,0,.6);padding:.35rem .6rem}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.en-lecture .video-btn{visibility:hidden}

/* Lecteur audio */
.lecteur{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:860px){.lecteur{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.lecteur-platine{background:var(--surface);border:1px solid var(--ligne);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.lecteur-spectre{width:100%;height:140px}
.lecteur-titre strong{display:block;font:var(--titre-poids) 1.8rem/1.05 var(--f-titre);font-style:var(--titre-style);text-transform:var(--titre-casse)}
.lecteur-titre span{color:var(--texte-2);font-size:.92rem}
.lecteur-commandes{display:flex;align-items:center;gap:1rem}
.lecteur-play{flex:none;width:60px;height:60px;border-radius:50%;border:0;background:var(--accent);color:var(--sur-accent);display:grid;place-items:center;cursor:pointer;transition:transform .2s}
.lecteur-play:hover{transform:scale(1.06)}
.lecteur.joue .lecteur-play{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-halo)}100%{box-shadow:0 0 0 18px transparent}}
.lecteur-barre{flex:1;height:6px;background:var(--ligne);position:relative;cursor:pointer;min-width:0;border-radius:3px}
.lecteur-barre i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:3px}
.lecteur-temps{font:500 .8rem var(--f-mono);color:var(--texte-2);font-variant-numeric:tabular-nums;min-width:5ch;text-align:right}
.lecteur-pistes{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.lecteur-pistes li{border-bottom:1px solid var(--ligne)}
.lecteur-pistes button{width:100%;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.05rem .3rem;background:none;border:0;text-align:left;cursor:pointer;transition:background .25s,padding .25s}
.lecteur-pistes button:hover{background:var(--surface);padding-left:.9rem}
.lecteur-pistes .no{font:500 .8rem var(--f-mono);color:var(--texte-2)}
.lecteur-pistes .t{font:var(--titre-poids) 1.3rem/1.1 var(--f-titre);font-style:var(--titre-style);text-transform:var(--titre-casse)}
.lecteur-pistes .cat{font:500 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
.lecteur-pistes button[aria-pressed="true"] .t{color:var(--accent)}

/* Galerie + visionneuse */
.galerie-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media (min-width:700px){.galerie-grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
.galerie-item{position:relative;aspect-ratio:1;overflow:hidden;background:var(--surface);display:block}
.galerie-item:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.galerie-item img{width:100%;height:100%;object-fit:cover;filter:var(--galerie-filtre,none);transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .6s}
.galerie-item:hover img{transform:scale(1.07);filter:none}
.galerie-legende{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem;font-size:.82rem;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity .3s}
.galerie-item:hover .galerie-legende,.galerie-item:focus-visible .galerie-legende{opacity:1}
.visionneuse{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.visionneuse::backdrop{background:rgba(0,0,0,.92)}
.visionneuse figure{margin:0;height:100%;display:grid;place-items:center;grid-template-rows:1fr auto;padding:4rem 1rem 1.5rem}
.visionneuse img{max-height:82vh;width:auto;object-fit:contain}
.visionneuse figcaption{text-align:center;padding-top:.8rem;color:#ddd}
.visionneuse button{position:absolute;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.3);color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.vis-fermer{top:1rem;right:1rem}.vis-prec{left:1rem;top:50%}.vis-suiv{right:1rem;top:50%}

/* ---------- Prestations ---------- */
.occasions{list-style:none;padding:0;margin:0}
.occasions li{font:var(--titre-poids) clamp(2rem,5vw,3.6rem)/1.08 var(--f-titre);font-style:var(--titre-style);text-transform:var(--titre-casse);color:transparent;-webkit-text-stroke:1px var(--texte-2);transition:color .35s,-webkit-text-stroke-color .35s,transform .35s}
.occasions li:hover{color:var(--accent);-webkit-text-stroke-color:var(--accent);transform:translateX(10px)}

/* ---------- Formulaires publics ---------- */
.form-contact{display:grid;grid-template-columns:1fr;gap:1.1rem 1.4rem;background:var(--surface);border:1px solid var(--ligne);padding:clamp(1.2rem,3vw,2rem)}
@media (min-width:620px){.form-contact{grid-template-columns:1fr 1fr}}
.form-contact .plein{grid-column:1/-1}
.champ{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.champ label{font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
.facultatif{text-transform:none;letter-spacing:0;opacity:.7}
.champ input,.champ select,.champ textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ligne-forte);padding:.6rem 0;border-radius:0;transition:border-color .3s}
.champ select option{background:var(--surface);color:var(--texte)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--accent)}
.champ textarea{resize:vertical;min-height:130px}
.pot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.envoi{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.rgpd{margin:0;font-size:.82rem;color:var(--texte-2)}
.rgpd a{color:inherit}
.flashs{display:grid;gap:.6rem;margin-bottom:1.2rem}
.flash{margin:0;padding:.9rem 1.1rem;border-left:3px solid var(--accent);background:var(--surface-2)}
.flash-erreur{border-color:#e5484d}
.contact-cote{align-self:start}
.retour{margin-top:2.5rem}
.article{max-width:900px}
.article-visuel{margin-bottom:2rem}
.article .video{margin-top:2rem}

/* Galerie d'un article : grille régulière, sans grande vignette */
.galerie-article{margin-top:2rem;grid-template-columns:repeat(auto-fill,minmax(min(45%,180px),1fr))}
.galerie-article .galerie-item:nth-child(7n+1){grid-column:auto;grid-row:auto}
.galerie-article:has(.galerie-item:only-child){grid-template-columns:1fr}
.galerie-article .galerie-item:only-child{aspect-ratio:16/10}

/* ---------- Partage d'un article ---------- */
.partage{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--ligne)}
.partage-titre{font:500 .75rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-2);margin-bottom:.8rem}
.partage-boutons{display:flex;flex-wrap:wrap;gap:.5rem}
.partage-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border:1px solid var(--ligne-forte);background:transparent;color:var(--texte);border-radius:99px;
  font:500 .85rem/1 var(--f-texte);text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.partage-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.partage-natif{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.partage-natif:hover{color:var(--sur-accent);filter:brightness(1.1)}
.partage-note{opacity:.75;font-size:.78rem}
.partage-info{margin:.7rem 0 0;font-size:.85rem;color:var(--accent);min-height:1.2em}

/* ---------- Pied de page commun ---------- */
.pied{border-top:1px solid var(--ligne);padding-block:3rem 2rem;color:var(--texte-2);font-size:.9rem}
.pied-grille{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:760px){.pied-grille{grid-template-columns:1.4fr 1fr 1fr}}
.pied h2{font-size:1.3rem;color:var(--texte);margin-bottom:.8rem}
.pied ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.pied a{text-decoration:none}.pied a:hover{color:var(--accent)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--ligne);margin-top:2.5rem;padding-top:1.5rem;font-size:.8rem}

/* Bandeau d'aperçu (administrateur) */
.bandeau-apercu{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:200;background:#ffd166;color:#111;font:600 .75rem/1.2 var(--f-mono);padding:.6rem 1rem;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.5);text-align:center}
.bandeau-apercu a{color:#111}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}