/* ==========================================================================
   ESPACE SOPHIA — Programmation · styles des blocs (design system v3)
   Le plugin porte SES styles pour fonctionner avec n'importe quel thème.
   Chaque valeur a un secours ; le thème Espace Sophia fournit les mêmes
   variables et les classes globales (.btn, .kicker, .arrow-link).
   ========================================================================== */

:root{
  --es-noir:#10131F;
  --es-navy:#16284F;
  --es-blue:#244C8A;
  --es-green:#3DA45A;
  --es-green-bright:#4CB85F;
  --es-green-deep:#2E7E48;
  --es-ink:#141828;
  --es-ink-soft:#5A6076;
  --es-paper:#FFFFFF;
  --es-line:rgba(20,24,40,.12);
  --es-line-dark:rgba(255,255,255,.14);
  --es-white-soft:rgba(255,255,255,.78);
  --es-radius:10px;
  --es-radius-sm:6px;
  --es-shadow:0 24px 60px -32px rgba(16,19,31,.4);
  --es-font-display:'Anton',impact,sans-serif;
  --es-font-body:'Inter',system-ui,sans-serif;
}

/* ----- Titres de mois (bloc « Événements à venir » groupé) ----- */
.month{
  font-family:var(--es-font-display);font-weight:400;font-size:15px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--es-ink-soft);
  margin:56px 0 22px;display:flex;align-items:center;gap:18px;
}
.month::after{content:"";height:1px;background:var(--es-line);flex:1}
.month:first-child{margin-top:0}

/* ----- Badges d'état de vente — l'urgence honnête ----- */
.etat{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--es-font-body);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;padding:7px 12px;border-radius:4px;
}
.etat-nouveau{background:var(--es-green-deep)}
.etat-dernieres{background:#B3402F}
.etat-supplementaire{background:var(--es-blue)}
.etat-complet{background:#3A3F52}

/* ----- La note de musique — secours quand l'affiche manque ----- */
.event-img .fallback,.affiche-img .fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.3);
}
.event-img .fallback svg{width:44px;height:44px}
.affiche-img .fallback svg{width:64px;height:64px}

/* --------------------------------------------------------------------------
   « À L'AFFICHE » — le prochain spectacle, en grand (carte sombre)
   -------------------------------------------------------------------------- */
.affiche{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:#182137;
  border:1px solid var(--es-line-dark);
  border-radius:var(--es-radius);overflow:hidden;
  box-shadow:var(--es-shadow);
}
/* L'affiche est montrée en entier, jamais recadrée : le titre du spectacle est
   imprimé sur le pourtour de l'image, et « cover » lui coupait la tête. Les
   quelques pixels de marge autour retombent sur le bleu de la carte — ça donne
   une affiche encadrée plutôt qu'une image tronquée. */
.affiche-img{position:relative;min-height:285px;overflow:hidden;background:linear-gradient(140deg,var(--es-navy),var(--es-noir))}
.affiche-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px}
.affiche-body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.affiche-body h2,.affiche-body h3{
  font-family:var(--es-font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.04;
  font-size:clamp(28px,3.4vw,46px);color:#fff;margin:0;
}
.affiche-body .kicker{color:var(--es-green-bright)}
.affiche-date{
  font-family:var(--es-font-display);font-size:16px;letter-spacing:.05em;
  color:var(--es-green-bright);text-transform:uppercase;margin:0;
}
.affiche-extrait{font-size:15px;color:var(--es-white-soft);max-width:460px;margin:0}
.affiche .event-pied{margin-top:8px}
.affiche .btn{align-self:flex-start}

/* ----- « Et ensuite » : liste compacte des prochains (fond sombre) ----- */
.next-list{list-style:none;margin:8px 0 0;padding:0}
.next-list li{border-top:1px solid var(--es-line-dark)}
.next-list li:last-child{border-bottom:1px solid var(--es-line-dark)}
.next-row{
  display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:center;
  padding:18px 6px;transition:background .2s ease;
  text-decoration:none;color:inherit;
}
a.next-row:hover{background:rgba(255,255,255,.04)}
.next-row .d{
  font-family:var(--es-font-display);font-size:15px;letter-spacing:.05em;
  color:var(--es-green-bright);text-transform:uppercase;
}
.next-row .t{font-weight:600;font-size:16px;color:#fff}
.next-row .t small{display:block;font-weight:400;font-size:13px;color:var(--es-white-soft)}
.next-row .arrow-link{justify-self:end}
.next-row .complet{
  justify-self:end;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--es-white-soft);
  border:1px solid var(--es-line-dark);border-radius:4px;padding:6px 10px;
}

/* --------------------------------------------------------------------------
   CARTES D'ÉVÉNEMENT — version claire (page Événements)
   -------------------------------------------------------------------------- */
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.event{
  position:relative;
  background:var(--es-paper);
  border:1px solid var(--es-line);
  border-radius:var(--es-radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.event:hover{transform:translateY(-5px);box-shadow:var(--es-shadow);border-color:rgba(61,164,90,.45)}
.event-img{
  /* 5/4 plutôt que 3/2 : les affiches de la maison font environ 940 x 788,
     et un cadre en 3/2 leur mangeait un cinquième de la hauteur — assez pour
     décapiter « COLDPLAY ». En 5/4 il ne se perd que quelques pixels. */
  position:relative;aspect-ratio:5/4;overflow:hidden;
  background:linear-gradient(140deg,var(--es-navy),var(--es-noir));
}
.event-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.event:hover .event-img img{transform:scale(1.04)}
.event-cat{
  position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,.92);
  color:var(--es-green-deep);
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:6px 11px;border-radius:4px;
}
.event-date{
  position:absolute;left:0;bottom:0;
  background:var(--es-green);color:#fff;
  font-family:var(--es-font-display);font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;
  padding:8px 16px;border-top-right-radius:var(--es-radius-sm);
}
.event-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.event-body h3{
  font-family:var(--es-font-display);font-weight:400;text-transform:uppercase;
  font-size:22px;letter-spacing:.02em;line-height:1.1;margin:0;
}
.event-body p{font-size:14.5px;color:var(--es-ink-soft);flex:1;margin:0}
.event-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.event-prix{font-weight:700;font-size:14px}
.event-complet{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--es-ink-soft);border:1px solid var(--es-line);border-radius:4px;padding:6px 10px;
}
.event-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--es-green-deep);text-decoration:none;
}
.event-link svg{width:15px;height:15px;transition:transform .2s ease}
.event-link:hover svg{transform:translateX(4px)}

.event.is-past .event-img img{filter:grayscale(.5) brightness(.85)}
.event.is-past .event-date{background:var(--es-ink-soft)}

/* ----- État vide ----- */
.event-vide{
  background:#F6F6F3;border:1px dashed var(--es-line);border-radius:var(--es-radius);
  padding:32px;text-align:center;color:var(--es-ink-soft);
}
.event-vide p{margin:0}
.event-vide a{color:var(--es-green-deep);font-weight:600}

/* --------------------------------------------------------------------------
   MUR DES ARTISTES
   -------------------------------------------------------------------------- */
/* Les filtres sont le PREMIER élément que le bloc produit : c'est donc eux qui
   reçoivent l'écart entre blocs du thème (souvent 32 px, beaucoup trop ici —
   les filtres appartiennent visuellement au paragraphe d'intro). Un sélecteur
   de classe l'emporte sur le :where() du thème : on fixe l'écart nous-mêmes. */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.filters a{
  font-family:var(--es-font-body);font-weight:700;font-size:12.5px;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  padding:10px 20px;border-radius:99px;cursor:pointer;
  border:1px solid var(--es-line);background:var(--es-paper);color:var(--es-ink-soft);
  transition:.2s;
}
.filters a:hover{border-color:var(--es-green);color:var(--es-green-deep)}
.filters a[aria-current="true"]{background:var(--es-green);color:#fff;border-color:var(--es-green)}
.wall-meta{font-size:13.5px;color:var(--es-ink-soft);margin:10px 0 28px}
/* Sans filtres, c'est cette ligne qui hérite de l'écart du thème — même règle.
   Avec filtres, elle les suit de près. */
.filters + .wall-meta{margin-top:6px}

.wall{
  /* La mosaïque : des colonnes, et les affiches qui s'y empilent en gardant
     leurs proportions. Pas de recadrage — une affiche verticale reste une
     affiche verticale, un bandeau reste un bandeau. */
  columns:var(--wall-cols,4);
  column-gap:16px;
}
.artist{
  position:relative;break-inside:avoid;margin:0 0 16px;
  border-radius:var(--es-radius);overflow:hidden;
  background:var(--es-navy);display:block;isolation:isolate;
  box-shadow:0 14px 34px -26px rgba(16,19,31,.55);
  transition:transform .35s ease,box-shadow .35s ease;
}
.artist img{display:block;width:100%;height:auto;transition:transform .6s ease,filter .35s ease}

/* Le voile et le texte : cachés au repos, révélés au survol. */
.artist-body{
  position:absolute;inset:auto 0 0 0;padding:18px 16px 16px;
  background:linear-gradient(180deg,rgba(16,19,31,0) 0%,rgba(16,19,31,.55) 40%,rgba(16,19,31,.94) 100%);
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease;
}
.artist-body h3{
  font-family:var(--es-font-display);font-weight:400;text-transform:uppercase;
  font-size:18px;letter-spacing:.02em;color:#fff;margin:0;line-height:1.12;
  text-wrap:balance;
}
.artist-body .meta{font-size:12.5px;color:rgba(255,255,255,.78);margin:4px 0 0}
.artist-body .genre{
  display:inline-block;margin-top:7px;
  font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--es-green-bright);
}

/* Le survol — seulement là où un vrai curseur existe. */
@media(hover:hover){
  .artist:hover{transform:translateY(-4px);box-shadow:var(--es-shadow)}
  .artist:hover img{transform:scale(1.045)}
  .artist:hover .artist-body,
  .artist:focus-within .artist-body{opacity:1;transform:none}
}
/* Sur écran tactile il n'y a pas de survol : on montre le nom en permanence. */
@media(hover:none){
  .artist-body{opacity:1;transform:none}
}

/* Une entrée sans photo : une plaque sobre, à la bonne hauteur. */
.artist.is-placeholder{
  background:#F6F6F3;border:1px dashed rgba(20,24,40,.25);box-shadow:none;
  min-height:190px;
}
.artist.is-placeholder .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(20,24,40,.18);
}
.artist.is-placeholder .ph svg{width:36px;height:36px}
.artist.is-placeholder .artist-body{position:static;opacity:1;transform:none;background:none;padding:16px}
.artist.is-placeholder h3{color:var(--es-ink);font-family:var(--es-font-body);font-weight:600;font-size:14.5px;text-transform:none}
.artist.is-placeholder .meta{color:var(--es-ink-soft)}

/* --------------------------------------------------------------------------
   « A l'affiche » — hauteur sur ordinateur
   Demande de William (4 sept. 2026) : la carte prenait trop de place sur grand
   ecran. On resserre le rembourrage, les interlignes et le titre, et on limite
   l'extrait a deux lignes pour que les trois diapositives fassent la meme
   hauteur. Rien ne change sur telephone : la carte y passe deja en colonne.
   -------------------------------------------------------------------------- */
@media(min-width:1021px){
  .affiche-body{padding:clamp(20px,2.4vw,32px);gap:10px}
  .affiche-body h2,.affiche-body h3{font-size:clamp(24px,2.5vw,34px)}
  .affiche-date{font-size:14.5px}
  .affiche-extrait{
    font-size:14.5px;line-height:1.5;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .affiche .event-pied{margin-top:4px}
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:1020px){
  .affiche{grid-template-columns:1fr}
  .affiche-img{min-height:260px}
}
@media(max-width:1020px){
  .wall{columns:3}
}
@media(max-width:820px){
  .wall{columns:2;column-gap:12px}
  .artist{margin-bottom:12px}
  .artist-body{padding:14px 12px 12px}
  .artist-body h3{font-size:15px}
  .next-row{grid-template-columns:1fr;gap:6px;padding:16px 4px}
  .next-row .arrow-link,.next-row .complet{justify-self:start}
}

@media(max-width:430px){
  .wall{columns:1}
}

/* --------------------------------------------------------------------------
   LE DIAPORAMA « À L'AFFICHE » — les trois prochains spectacles
   Sans JavaScript, les diapositives restent simplement empilées : rien ne
   disparaît. C'est `.est-anime` (posé par front.js) qui les superpose.
   -------------------------------------------------------------------------- */
.affiche-diaporama{position:relative}
.affiche-diaporama .affiche-diapo + .affiche-diapo{margin-top:18px}

.affiche-diaporama.est-anime .affiche-scene{display:grid}
.affiche-diaporama.est-anime .affiche-diapo{
  grid-area:1/1;margin-top:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s;
}
.affiche-diaporama.est-anime .affiche-diapo.est-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;
  transition:opacity .5s ease,transform .5s ease,visibility 0s;
}

/* ----- La barre de commande -----
   Les couleurs héritent de la section (currentColor) : la même barre reste
   lisible sur le fond sombre de l'accueil comme sur un fond clair, sans
   sélecteur fragile du genre :not(.on-dark). Ne pas remettre de couleur en
   dur ici. */
.affiche-nav{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:22px;color:inherit;
}
.affiche-nav[hidden]{display:none}
.affiche-fl{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:transparent;border:1.5px solid currentColor;
  color:inherit;opacity:.45;padding:0;
  transition:opacity .2s,background .2s,border-color .2s,color .2s,transform .2s;
}
.affiche-fl svg{width:19px;height:19px}
.affiche-fl:hover{
  opacity:1;background:var(--es-green);border-color:var(--es-green);
  color:#fff;transform:translateY(-1px);
}
.affiche-fl:focus-visible{outline:2px solid var(--es-green);outline-offset:3px;opacity:1}

.affiche-points{display:flex;align-items:center;gap:9px}
.affiche-point{
  width:32px;height:22px;padding:0;border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:inherit;
}
.affiche-point span{
  display:block;width:26px;height:4px;border-radius:4px;
  background:currentColor;opacity:.32;
  transition:opacity .25s,width .25s,background .25s;
}
.affiche-point:hover span{opacity:.6}
.affiche-point.est-active span{background:var(--es-green);opacity:1;width:32px}
.affiche-point:focus-visible{outline:2px solid var(--es-green);outline-offset:2px;border-radius:4px}

@media(max-width:600px){
  .affiche-nav{gap:12px;margin-top:18px}
  .affiche-fl{width:38px;height:38px}
  .affiche-point{width:26px}
  .affiche-point span{width:20px}
  .affiche-point.est-active span{width:26px}
}
@media(prefers-reduced-motion:reduce){
  .affiche-diaporama.est-anime .affiche-diapo{transition:opacity .01s}
  .affiche-fl{transition:none}
}