/*
Theme Name: Au nom du maire
Theme URI: https://aunomdumaire.com/
Author: Au nom du maire
Description: Thème sur mesure pour « Au nom du maire » : scène de théâtre en page d'accueil, cinq onglets d'entrée, carte de France interactive des villages filmés, programme conférence/spectacle et console de saisie intégrée. Palette rouge, noir et or.
Version: 9.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: au-nom-du-maire
Tags: one-page, custom-colors, custom-menu, theatre
*/

/* ==========================================================================
   AU NOM DU MAIRE — rouge, noir et or
   Palette, typographie et mises en page du thème.
   ========================================================================== */

:root{
  --noir:#0A0708;
  --noir-2:#120C0E;
  --noir-3:#1A1113;
  --rouge-fond:#7E0C1A;
  --rouge:#E4142B;            /* écarlate */
  --rouge-clair:#FF4650;
  --rouge-sombre:#5A0812;

  --or-ombre:#6E5313;         /* or poli : c'est la succession des tons */
  --or:#C09A34;               /* qui fait le métal, pas la teinte seule  */
  --or-eclat:#F2E4B4;
  --or-clair:#DCC076;

  --ivoire:#F3ECE0;
  --texte:rgba(243,236,224,.7);
  --filet:rgba(192,154,52,.4);

  --metal:linear-gradient(152deg,
    var(--or-ombre) 0%, #B08A2A 15%, var(--or-eclat) 32%,
    #D2AE41 45%, #9C7A1E 61%, #E0C86E 79%, var(--or-ombre) 100%);
  --metal-h:linear-gradient(90deg,
    var(--or-ombre) 0%, #A9832A 12%, var(--or-eclat) 26%, #C6A238 40%,
    #8E6E1B 55%, var(--or-eclat) 72%, #B08A2A 86%, var(--or-ombre) 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--noir); color:var(--ivoire);
  font-family:"Pacifico",cursive;
  font-size:clamp(15px,1.05vw + 11px,18px); line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.marque,.bouton,.onglet__titre,.programme__choix button,.carte__zone,
.tournee__jour,.revue__source,.stylo__nom,.vignette__nom,.mois__lieu,
.page__tarif,.etal__prix,.prix,.manifeste__lignes,.villages-liste > summary,
h1,h2,h3,h4{font-family:"Pacifico",cursive; font-weight:400; line-height:1.45; margin:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--or); outline-offset:4px; border-radius:2px}

.enveloppe{width:min(1180px,90%); margin-inline:auto}
.section{padding:clamp(56px,7.2vw,104px) 0}
.filet{height:1px; background:linear-gradient(90deg,transparent,var(--filet) 22%,var(--filet) 78%,transparent)}

.titre-section{
  font-size:clamp(1.5rem,3.2vw,2.6rem);
  line-height:1.35; padding-bottom:.14em;
  max-width:26ch; margin-inline:auto; text-align:center;
}
.chapo{color:var(--texte); max-width:66ch; margin:1.1em auto 0; text-align:center}

/* ---------- bouton ---------- */
.bouton{
  display:inline-block; text-decoration:none;
  padding:.82em 1.9em; border-radius:2px;
  font-size:.92rem; letter-spacing:.03em;
  color:var(--noir); background:var(--metal-h);
  box-shadow:0 10px 26px -14px rgba(242,228,180,.8);
  transition:transform .25s ease, box-shadow .25s ease;
}
.bouton:hover{transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(192,154,52,1)}
.bouton--creux{
  background:none; color:var(--or-clair);
  box-shadow:inset 0 0 0 1px rgba(192,154,52,.5);
}
.bouton--creux:hover{box-shadow:inset 0 0 0 1px var(--or)}

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
.entete{
  position:sticky; top:0; z-index:60;
  background:rgba(10,7,8,.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet);
}
.entete__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 0; flex-wrap:wrap;
}
.marque{
  font-family:"Pacifico",cursive; font-size:clamp(1rem,1.6vw,1.22rem);
  letter-spacing:.09em; color:var(--or-clair); text-decoration:none; white-space:nowrap;
}
.menu{display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); list-style:none; margin:0; padding:0; flex-wrap:wrap}
.menu a{
  text-decoration:none; font-size:.88rem; color:rgba(243,236,224,.66);
  padding:4px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.menu a:hover{color:var(--or-clair); border-color:var(--or)}
.menu .bouton{padding:.62em 1.45em; color:var(--noir); border-bottom:none}
.menu .bouton:hover{border-color:transparent}

/* ==========================================================================
   LA SCÈNE
   ========================================================================== */
.scene{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(430px,68vh,620px);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(#080506 0%, #140D0F 58%, #1C1215 100%);
}
.scene__fond{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(85% 52% at 50% 96%, rgba(242,228,180,.15), transparent 68%);
}

/* le plateau, planches noires vernies */
.plateau{
  position:absolute; left:-30%; right:-30%; bottom:0; z-index:2; height:27%;
  transform:perspective(320px) rotateX(59deg); transform-origin:bottom center;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(90deg,#24151A 0 44px,#100A0C 44px 47px);
}
.plateau__nez{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:clamp(9px,1.4vw,16px);
  background:linear-gradient(to bottom,#2A181C,#0A0506);
  box-shadow:0 -1px 0 rgba(192,154,52,.45);
}

/* les rideaux */
.rideau{
  position:absolute; top:0; bottom:0; z-index:6;
  width:clamp(44px,10vw,168px);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.04) 34%, rgba(0,0,0,.58)),
    repeating-linear-gradient(90deg,
      var(--rouge-sombre) 0 7px,
      var(--rouge) 17px 29px,
      var(--rouge-clair) 33px 38px,
      var(--rouge) 45px 57px,
      var(--rouge-fond) 63px 70px,
      var(--rouge-sombre) 78px 86px);
  background-size:auto, 86px 100%;
}
.rideau::after{                     /* le galon : une torsade d'or */
  content:""; position:absolute; top:0; bottom:0; right:0; width:clamp(4px,.55vw,8px);
  background:repeating-linear-gradient(155deg, rgba(0,0,0,.4) 0 2px, transparent 2px 5px), var(--metal);
  box-shadow:-2px 0 7px rgba(0,0,0,.6);
}
.rideau--gauche{left:0; box-shadow:16px 0 46px rgba(0,0,0,.7); border-right:1px solid rgba(192,154,52,.35)}
.rideau--droit{right:0; transform:scaleX(-1); box-shadow:16px 0 46px rgba(0,0,0,.7); border-right:1px solid rgba(192,154,52,.35)}

/* la cantonnière et son galon doré */
.cantonniere{
  position:absolute; top:0; left:0; right:0; z-index:7;
  height:clamp(38px,6.5vw,80px);
  background:
    linear-gradient(to bottom, var(--rouge-sombre), var(--rouge) 62%, var(--rouge-fond)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 4px, transparent 4px 32px);
  box-shadow:0 12px 36px rgba(0,0,0,.65);
}
.cantonniere::before{               /* galon supérieur */
  content:""; position:absolute; left:0; right:0; top:clamp(6px,1vw,13px);
  height:clamp(3px,.45vw,6px); background:var(--metal-h); opacity:.95;
}
.franges{                           /* la ligne de pompons dorés */
  position:absolute; left:0; right:0; z-index:8; height:9px; pointer-events:none;
  top:calc(clamp(38px,6.5vw,80px) + 17px);
  background:radial-gradient(circle 3.4px at 20px 3.4px,
    var(--or-eclat) 0 2.1px, var(--or) 2.2px 3.2px, transparent 3.4px);
  background-size:40px 9px; background-repeat:repeat-x; opacity:.9;
}
.cantonniere::after{
  content:""; position:absolute; left:0; right:0; bottom:-22px; height:24px;
  background:linear-gradient(to bottom,#661119,#3F0A10);
  -webkit-mask-image:radial-gradient(circle 22px at 22px 0, #000 0 21px, transparent 22px);
  mask-image:radial-gradient(circle 22px at 22px 0, #000 0 21px, transparent 22px);
  -webkit-mask-size:44px 24px; mask-size:44px 24px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
}

/* les quatre onglets */
.acces{
  position:relative; z-index:4; width:100%; margin:auto auto 0;
  /* la marge latérale suit la largeur des rideaux pour ne jamais passer dessous */
  padding-block:calc(clamp(38px,6.5vw,80px) + clamp(28px,3.5vw,48px)) clamp(30px,4.6vh,58px);
  padding-inline:calc(clamp(44px,10vw,168px) + clamp(10px,2.2vw,46px));
}
.acces ul{
  list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:clamp(11px,1.6vw,22px);
}
.acces li{position:relative; display:flex; flex:1 1 158px; max-width:232px}
.acces li::before{                 /* la poursuite */
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; bottom:-16%; transform:translateX(-50%);
  width:250%; height:860px;
  background:linear-gradient(to bottom,
    rgba(242,228,180,0) 0%, rgba(242,228,180,.06) 34%,
    rgba(242,228,180,.16) 76%, rgba(242,228,180,.26) 100%);
  clip-path:polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  filter:blur(28px); mix-blend-mode:screen; opacity:.8;
  transition:opacity .35s ease;
  animation:feu 1s ease-out backwards; animation-delay:calc(var(--i) * .14s);
}
.acces li::after{                  /* la flaque de lumière sur les planches */
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; bottom:-34px; transform:translateX(-50%); width:140%; height:88px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(242,228,180,.42), rgba(242,228,180,0) 70%);
  mix-blend-mode:screen;
  animation:feu 1s ease-out backwards; animation-delay:calc(var(--i) * .14s);
}
.onglet{
  display:block; position:relative; width:100%;
  min-height:clamp(196px,23vw,268px);
  padding:clamp(3px,.35vw,5px); border-radius:3px; text-decoration:none;
  background:var(--metal);
  box-shadow:0 9px 10px -7px rgba(0,0,0,.95), 0 26px 32px -18px rgba(0,0,0,.9);
  transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
  animation:entree .8s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay:calc(var(--i) * .14s + .08s);
}
.onglet::after{                     /* filet d'or intérieur */
  content:""; position:absolute; inset:clamp(7px,.9vw,12px); border-radius:1px;
  box-shadow:0 0 0 1px rgba(242,228,180,.32); pointer-events:none;
}
.onglet__face{
  position:relative; height:100%; min-height:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(9px,1.3vh,15px); padding:clamp(11px,1.4vw,20px);
  text-align:center; overflow:hidden; border-radius:1px;
  background:
    radial-gradient(72% 46% at 50% 0%, rgba(242,228,180,.16), transparent 72%),
    linear-gradient(#140C0E,#0B0708);
  box-shadow:inset 0 0 0 1px rgba(192,154,52,.32), inset 0 14px 26px -14px rgba(0,0,0,.9);
}
.onglet svg{
  width:clamp(25px,2.4vw,33px); height:clamp(25px,2.4vw,33px); flex:none;
  stroke:var(--or-eclat); fill:none; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9;
}
.onglet__titre{
  font-family:"Pacifico",cursive; font-weight:500;
  font-size:clamp(1.1rem,1.75vw,1.5rem); line-height:1.12;
  text-wrap:balance; color:var(--or-clair);
}
.onglet__note{
  font-size:clamp(.72rem,.88vw,.84rem); line-height:1.45; text-wrap:balance;
  color:rgba(243,236,224,.56); max-width:22ch;
}
.onglet:hover,.onglet:focus-visible{
  transform:translateY(-9px);
  box-shadow:0 18px 16px -12px rgba(0,0,0,.8), 0 38px 38px -18px rgba(0,0,0,.95);
}
.acces li:hover::before,.acces li:focus-within::before{opacity:1}
.onglet:focus-visible{outline:2px solid var(--or); outline-offset:5px}

.scene__grain{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes feu{from{opacity:0}}
@keyframes entree{from{opacity:0; transform:translateY(24px)}}

/* ==========================================================================
   MANIFESTE
   ========================================================================== */
.manifeste{text-align:center; background:var(--noir)}

.manifeste__lignes{
  max-width:38ch;
  margin:clamp(36px,5vw,56px) auto 0; max-width:34ch;
  display:grid; gap:.45em;
  font-family:"Pacifico",cursive;
  font-size:clamp(1.05rem,2vw,1.45rem); line-height:1.4;
  color:rgba(243,236,224,.82);
}
.manifeste__lignes span:last-child{color:var(--or-clair)}
.manifeste__sceau{
  width:64px; height:1px; margin:clamp(34px,4vw,48px) auto 0;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
}

/* ==========================================================================
   GRILLES DE VIDÉOS
   ========================================================================== */
.grille{
  list-style:none; margin:clamp(34px,4.5vw,56px) 0 0; padding:0;
  display:grid; gap:clamp(14px,1.8vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.vignette{display:block; text-decoration:none}
.vignette__cadre{
  display:block;                     /* sans cela, un span vide s'aplatit */
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:2px;
  background:var(--noir-3); box-shadow:inset 0 0 0 1px var(--filet);
  transition:box-shadow .3s ease;
}
.vignette__cadre img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) contrast(1.05) brightness(.82);
  transition:transform .5s cubic-bezier(.2,.8,.25,1), filter .35s ease;
}
.vignette__lecture{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top, rgba(10,7,8,.75), rgba(10,7,8,0) 55%);
}
.vignette__lecture span{
  width:46px; height:46px; border-radius:50%;
  background:rgba(155,27,37,.9); box-shadow:0 0 0 1px rgba(242,228,180,.7);
  display:grid; place-items:center;
  transition:transform .3s ease, background .3s ease;
}
.vignette__lecture span::before{
  content:""; width:0; height:0; margin-left:3px;
  border-left:12px solid var(--or-clair);
  border-top:7.5px solid transparent; border-bottom:7.5px solid transparent;
}
.vignette:hover .vignette__cadre{box-shadow:inset 0 0 0 1px var(--or)}
.vignette:hover img{transform:scale(1.05); filter:saturate(.95) contrast(1.05) brightness(1)}
.vignette:hover .vignette__lecture span{transform:scale(1.1); background:var(--rouge-clair)}
.vignette__nom{
  display:flex; align-items:baseline; gap:.5em;
  margin-top:.75em; font-family:"Pacifico",cursive; font-size:1.02rem;
}
.vignette__dept{font-family:inherit; font-size:.78rem; color:var(--or); letter-spacing:.04em}

/* bandeau actualité */
.actu{
  margin-top:clamp(30px,4vw,44px);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:20px 24px; border-radius:2px;
  background:linear-gradient(90deg,rgba(72,12,17,.6),rgba(18,12,14,.4));
  box-shadow:inset 0 0 0 1px var(--filet);
}
.actu p{margin:0; color:var(--texte); font-size:.95rem}
.actu strong{color:var(--ivoire); font-weight:600}

/* ==========================================================================
   LES MÉDIAS EN PARLENT
   ========================================================================== */
.revue{list-style:none; margin:clamp(34px,4.5vw,56px) 0 0; padding:0; display:grid; gap:14px}
.revue__item{
  display:grid; align-items:center; gap:clamp(16px,2.4vw,34px);
  grid-template-columns:minmax(90px,150px) 1fr auto;
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  border-radius:2px;
  background:linear-gradient(90deg,rgba(72,12,17,.62),rgba(18,12,14,.35));
  box-shadow:inset 0 0 0 1px var(--filet);
  transition:box-shadow .3s ease;
}
.revue__item:hover{box-shadow:inset 0 0 0 1px var(--or)}
.revue__source--logo{display:flex; align-items:center; justify-content:center}
.revue__source--logo img{
  width:100%; max-width:120px; height:auto; max-height:76px;
  object-fit:contain; border-radius:4px;
}
.revue__source{
  text-align:center;
  font-family:"Pacifico",cursive; font-size:clamp(1.35rem,2.6vw,2rem);
  color:var(--or-clair); line-height:1;
}
.revue__item h3{font-size:1.12rem; color:var(--ivoire)}
.revue__item p{margin:.35em 0 0; color:var(--texte); font-size:.94rem; max-width:56ch}
.revue__genre{
  display:block; margin-bottom:.35em; font-size:.76rem;
  letter-spacing:.06em; color:var(--or);
}
@media (max-width:720px){
  .revue__item{grid-template-columns:1fr; text-align:left}
  .revue__source{text-align:left}
  .revue__item .bouton{justify-self:start}
}

/* ==========================================================================
   À L'AFFICHE
   ========================================================================== */
.affiche{background:var(--noir-2)}
.affiche__duo{
  margin-top:clamp(34px,4.5vw,56px);
  display:grid; gap:clamp(18px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.carte{
  border-radius:2px; overflow:hidden; background:var(--noir);
  box-shadow:inset 0 0 0 1px var(--filet);
  display:flex; flex-direction:column;
}
.carte img{aspect-ratio:16/11; object-fit:cover; filter:saturate(.8) brightness(.86)}
.carte__corps{padding:clamp(22px,2.6vw,34px); flex:1; display:flex; flex-direction:column}
.carte h3{font-size:clamp(1.3rem,2.2vw,1.75rem); color:var(--or-clair)}
.carte p{margin-top:.9em; color:var(--texte); font-size:.97rem}
.carte .bouton{align-self:flex-start; margin-top:auto}

.projet .titre-section{color:var(--or-clair)}
.projet .chapo{color:rgba(243,236,224,.88)}

/* ==========================================================================
   LE PROJET
   ========================================================================== */
.projet{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(155,27,37,.55), transparent 62%),
    linear-gradient(var(--rouge-sombre),#2A070B);
  border-block:1px solid rgba(192,154,52,.35);
  text-align:center;
}


.projet__cle{
  margin-top:1.6em; font-family:"Pacifico",cursive;
  font-size:clamp(1.05rem,1.9vw,1.35rem); color:var(--or-clair);
}

/* ==========================================================================
   VILLAGE DU MOIS
   ========================================================================== */
.mois{background:var(--noir-2)}
.mois__bloc{
  display:grid; gap:clamp(24px,3.5vw,52px); align-items:center;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
}
.mois__ecran{
  display:block; position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:2px;
  box-shadow:0 0 0 1px var(--or), 0 0 0 7px rgba(155,27,37,.35), 0 30px 60px -30px #000;
}
.mois__ecran img{width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.88); transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.mois__ecran:hover img{transform:scale(1.04)}
.mois h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.mois__lieu{color:var(--or-clair)}
.mois p{margin-top:1em; color:var(--texte)}
.mois .bouton{margin-top:1.4em}
@media (max-width:820px){ .mois__bloc{grid-template-columns:1fr} }

/* ==========================================================================
   BOUTIQUE
   ========================================================================== */
.boutique{
  text-align:center;
  background:linear-gradient(var(--noir),#150D0F);
  border-top:1px solid var(--filet);
}


.boutique .bouton{margin-top:2em}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pied{background:#070405; border-top:1px solid var(--filet); padding:clamp(48px,6vw,80px) 0 34px}
.pied__haut{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:start}
.pied h3{font-size:1.15rem; color:var(--or-clair); margin-bottom:.7em}
.pied a{color:var(--texte); text-decoration:none}
.pied a:hover{color:var(--or-clair)}
.pied ul{list-style:none; margin:0; padding:0; display:grid; gap:.5em; font-size:.92rem}
.pied__bas{
  margin-top:clamp(34px,4vw,54px); padding-top:22px; border-top:1px solid rgba(192,154,52,.16);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:rgba(243,236,224,.42);
}

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */
.page-titre{padding:clamp(60px,8vw,110px) 0 0}
.page-contenu{padding:clamp(28px,4vw,48px) 0 clamp(64px,9vw,120px); max-width:70ch}
.page-contenu a{color:var(--or-clair)}

/* ==========================================================================
   ÉCRANS ÉTROITS
   ========================================================================== */
/* dès que les cinq panneaux ne tiennent plus sur une ligne, on remplace les
   poursuites individuelles par un lavis général, sinon les faisceaux se croisent */
@media (max-width:1180px) and (min-width:660px){
  .acces li{flex:1 1 calc(33.333% - 15px); max-width:calc(33.333% - 15px)}
}
@media (max-width:1180px){
  .scene__fond{
    background:
      radial-gradient(78% 46% at 50% -6%, rgba(242,228,180,.2), transparent 70%),
      radial-gradient(96% 40% at 50% 100%, rgba(242,228,180,.2), transparent 72%);
  }
  .acces li::before,.acces li::after{display:none}
}
@media (max-width:659px){
  .scene{min-height:clamp(420px,62vh,545px)}
  .acces{padding-block:calc(clamp(38px,6.5vw,80px) + clamp(28px,3vw,40px)) clamp(22px,3.2vh,40px)}
  .acces ul{gap:12px}
  .acces li{flex:1 1 calc(50% - 6px); max-width:calc(50% - 6px)}
  .onglet{min-height:clamp(150px,36vw,190px)}
  .plateau{height:25%}
}
@media (max-width:520px){
  body{font-size:16px}
  .rideau{width:32px}
  .acces{padding-inline:42px}
  .acces li{flex:1 1 calc(50% - 6px); max-width:calc(50% - 6px)}
  /* la légende reste : c'est elle qui dit ce que le panneau contient */
  .onglet__note{font-size:.72rem; max-width:18ch}
  .onglet{min-height:172px}
  .entete__in{justify-content:center; padding:10px 0; gap:10px}
  .menu{gap:14px; justify-content:center}
  .menu a{font-size:.8rem}
  .menu .bouton{padding:.5em 1.15em}
  .grille{grid-template-columns:repeat(2,1fr); gap:11px}
  .vignette__nom{font-size:.9rem; flex-wrap:wrap; gap:.35em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}
/* ==========================================================================
   LA CARTE DES VILLAGES
   ========================================================================== */
.carte{margin-top:clamp(30px,4vw,50px)}

.carte__barre{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-bottom:clamp(18px,2.4vw,28px);
}
.carte__zone{
  font:inherit; font-size:.82rem; line-height:1.2;
  padding:.46em 1em; border:0; border-radius:2px; cursor:pointer;
  color:rgba(243,236,224,.62); background:none;
  box-shadow:inset 0 0 0 1px rgba(192,154,52,.22);
  transition:color .25s, box-shadow .25s, background .25s;
}
.carte__zone:hover{color:var(--or-clair); box-shadow:inset 0 0 0 1px var(--or)}
.carte__zone.est-actif{
  background:var(--metal-h);
  color:var(--noir); box-shadow:none;
}

.carte__cadre{
  position:relative; overflow:hidden; border-radius:2px;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(155,27,37,.16), transparent 70%),
    linear-gradient(#0D0809,#150D0F);
  box-shadow:inset 0 0 0 1px var(--filet), 0 40px 70px -50px #000;
}
.carte__zoom{
  position:relative; transform-origin:0 0;
  transform:scale(var(--z,1)) translate(var(--tx,0%),var(--ty,0%));
  transition:transform .85s cubic-bezier(.2,.8,.25,1);
}
.carte__svg{display:block; width:100%; height:auto}

.dep{
  fill:#150E11; stroke:rgba(192,154,52,.2); stroke-width:.7;
  cursor:pointer; transition:fill .3s ease, stroke .3s ease;
}
.dep--film{fill:#2B1218}
.dep:hover{fill:#3D171E; stroke:var(--or)}
.dep--hors{fill:#0C0708; stroke:rgba(192,154,52,.07); pointer-events:none}

/* ---------- le stylo ---------- */
.carte__stylos{position:absolute; inset:0}
.stylo{
  position:absolute; padding:0; border:0; background:none; cursor:pointer;
  line-height:0; --taille:clamp(54px,6vw,90px);
  transform:translate(-50%,-100%) scale(var(--iz,1));
  transform-origin:50% 100%;
  transition:left .6s cubic-bezier(.2,.8,.25,1), top .6s cubic-bezier(.2,.8,.25,1),
             transform .6s cubic-bezier(.2,.8,.25,1), opacity .4s ease;
  animation:planter .5s cubic-bezier(.2,.9,.3,1.2) backwards;
  animation-delay:calc(var(--i) * .035s);
}
@keyframes planter{from{opacity:0; transform:translate(-50%,-160%) scale(var(--iz,1))}}
.stylo__objet{
  height:var(--taille); width:auto; display:block;
  transition:transform .3s cubic-bezier(.2,.8,.25,1), filter .3s ease;
  transform-origin:50% 100%;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.7));
  transition:filter .3s ease;
}
.stylo__ombre{fill:rgba(0,0,0,.5)}
.stylo:hover,.stylo:focus-visible,.stylo.est-ouvert{z-index:40}
.stylo:hover .stylo__objet,.stylo.est-ouvert .stylo__objet{
  transform:scale(1.85);     /* on approche : la gravure devient lisible */
  filter:drop-shadow(0 0 9px rgba(242,228,180,.75)) drop-shadow(0 6px 6px rgba(0,0,0,.7));
}
.stylo__gravure{
  fill:var(--or-eclat); opacity:.95;
  font-family:Georgia,"Times New Roman",serif; font-weight:700;
  paint-order:stroke; stroke:rgba(58,6,12,.55); stroke-width:.5;
}
.stylo--hors{opacity:0; pointer-events:none}
.stylo:focus-visible{outline:none}
.stylo:focus-visible .stylo__objet{filter:drop-shadow(0 0 10px var(--or))}

/* ---------- la fiche du village ---------- */
.stylo__fiche{
  position:absolute; left:50%; bottom:calc(100% - 4px);
  width:196px; padding:8px 8px 11px; border-radius:2px;
  background:linear-gradient(#160E11,#0A0607);
  box-shadow:0 0 0 1px var(--or), 0 22px 44px -20px #000;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(calc(-50% + var(--dx,0px)),calc(8px + var(--dy,0px)));
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  text-align:center; line-height:1.4; z-index:5;
}
.stylo--sous .stylo__fiche{
  bottom:auto; top:calc(100% - 2px);
  transform:translate(calc(-50% + var(--dx,0px)),calc(-8px + var(--dy,0px)));
}
.stylo:hover .stylo__fiche,
.stylo:focus-visible .stylo__fiche,
.stylo.est-ouvert .stylo__fiche{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px));
}
.stylo__fiche img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:1px; filter:saturate(.82) brightness(.9);
}
.stylo__texte{
  display:flex; align-items:baseline; justify-content:center; gap:.45em;
  margin-top:9px; min-height:1.3em;
}
.stylo__nom{
  font-family:"Pacifico",cursive; font-size:.95rem;
  color:var(--or-clair); white-space:nowrap;
}
.stylo__dep{font-size:.7rem; color:var(--or); opacity:.85}
.stylo__action{
  display:block; margin-top:5px; font-size:.7rem; letter-spacing:.03em;
  color:rgba(243,236,224,.5);
}

/* ---------- la griffe de l'élu, écrite à la plume ---------- */
.griffe{
  position:relative; display:block; width:100%; max-width:var(--g,168px);
  margin:8px auto 0; padding-bottom:calc(var(--g,168px) * .09);
}
.griffe__mots{
  display:block; text-align:center; white-space:nowrap;
  font-family:"Pacifico",cursive;
  font-size:calc(var(--g,168px) * .105); line-height:1.6;
  color:var(--or-eclat);
  clip-path:inset(0 100% 0 0);
}
.griffe__paraphe{display:block; width:100%; height:auto; margin-top:-.35em; overflow:visible}
.griffe__soulignement{
  fill:none; stroke:var(--rouge-clair); stroke-linecap:round;
  stroke-width:5; stroke-dasharray:1; stroke-dashoffset:1;
}
.griffe__geste{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:2;
}
.plume{offset-rotate:0deg; offset-distance:0%; opacity:0}

/* on écrit : au survol d'un stylo, ou à l'arrivée du livre dans l'écran */
.stylo:hover .griffe__mots, .stylo:focus-visible .griffe__mots,
.stylo.est-ouvert .griffe__mots, .livre.ecrit .griffe__mots{
  animation:ecriture 2s cubic-bezier(.36,.06,.5,.96) .2s forwards;
}
.stylo:hover .griffe__soulignement, .stylo:focus-visible .griffe__soulignement,
.stylo.est-ouvert .griffe__soulignement, .livre.ecrit .griffe__soulignement{
  animation:signer .75s ease-out 2.55s forwards;
}
.stylo:hover .plume--mots, .stylo:focus-visible .plume--mots,
.stylo.est-ouvert .plume--mots, .livre.ecrit .plume--mots{
  animation:suit 2s cubic-bezier(.36,.06,.5,.96) .2s forwards;
}
.stylo:hover .plume--soul, .stylo:focus-visible .plume--soul,
.stylo.est-ouvert .plume--soul, .livre.ecrit .plume--soul{
  animation:suit .75s ease-out 2.55s forwards;
}
@keyframes ecriture{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 -3% 0 0)}
}
@keyframes signer{to{stroke-dashoffset:0}}
@keyframes suit{
  0%  {offset-distance:0%;   opacity:0}
  4%  {opacity:1}
  94% {opacity:1}
  100%{offset-distance:100%; opacity:0}
}

/* la même griffe, posée comme un sceau sous le manifeste */
.griffe--sceau{--g:min(360px,80vw); margin:clamp(22px,2.8vw,34px) auto 0}
.griffe--sceau .griffe__mots{clip-path:inset(0 -3% 0 0)}
.griffe--sceau .griffe__soulignement{stroke-dashoffset:0}
.griffe--sceau .griffe__geste{display:none}
.griffe--page{--g:290px}
@media (max-width:1000px){.griffe--page{--g:215px}}
@media (max-width:520px){.griffe--page{--g:185px}}

/* ==========================================================================
   LE PROGRAMME : conférence au recto, spectacle au verso
   ========================================================================== */
.programme{background:var(--noir-2)}
.programme__intro{text-align:center}


.programme__choix{
  display:flex; justify-content:center; gap:10px;
  margin:clamp(28px,3.4vw,44px) 0 clamp(22px,2.6vw,32px);
}
.programme__choix button{
  font:inherit; font-size:.9rem; padding:.6em 1.6em; cursor:pointer;
  border:0; border-radius:2px; color:rgba(243,236,224,.65); background:none;
  box-shadow:inset 0 0 0 1px rgba(192,154,52,.3);
  transition:color .25s, background .25s, box-shadow .25s;
}
.programme__choix button:hover{color:var(--or-clair); box-shadow:inset 0 0 0 1px var(--or)}
.programme__choix button.est-actif{
  background:var(--metal-h); color:var(--noir); box-shadow:none;
}

.programme__scene{perspective:2600px; max-width:980px; margin-inline:auto}
.programme__feuille{
  position:relative; transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.62,.02,.36,1);
  min-height:clamp(470px,47vw,600px);
}
.programme__feuille.est-retournee{transform:rotateY(180deg)}

/* ---------- la reliure ---------- */
.livre__face{
  position:absolute; inset:0; backface-visibility:hidden;
  padding:clamp(9px,1.3vw,17px);
  border-radius:5px 9px 9px 5px;
  background:
    linear-gradient(150deg,#6A0C16,#320509 52%,#520A11),
    repeating-linear-gradient(46deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px);
  box-shadow:
    0 0 0 1px var(--or-ombre),
    0 0 0 3px rgba(0,0,0,.6),
    0 46px 80px -38px #000;
}
.livre__face--verso{transform:rotateY(180deg)}
.livre__face::before{                 /* filet doré poussé sur le cuir */
  content:""; position:absolute; inset:clamp(4px,.6vw,8px); border-radius:4px;
  box-shadow:0 0 0 1px rgba(242,228,180,.55); pointer-events:none; z-index:4;
}

/* ---------- les deux pages ---------- */
.livre__spread{
  position:relative; height:100%; display:grid; grid-template-columns:1fr 1fr;
  border-radius:2px; overflow:hidden;
  background:linear-gradient(90deg,
    #E7DBC1 0%, #FAF4E6 4%, #FFFDF6 30%, #F3E9D4 48%,
    #DCCDAF 50%, #F3E9D4 52%, #FFFDF6 70%, #FAF4E6 96%, #E7DBC1 100%);
  box-shadow:inset 0 0 34px rgba(96,66,24,.2);
}
.livre__spread::after{                /* le creux de la reliure */
  content:""; position:absolute; top:0; bottom:0; left:50%; width:52px;
  transform:translateX(-50%); pointer-events:none; z-index:3;
  background:linear-gradient(90deg,
    rgba(96,66,24,0) 0%, rgba(96,66,24,.2) 36%, rgba(96,66,24,.34) 50%,
    rgba(96,66,24,.2) 64%, rgba(96,66,24,0) 100%);
}
.page{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(18px,2.4vw,34px) clamp(16px,2.4vw,34px);
  color:#38200F; overflow:auto;
}
.page__filet{                          /* le cadre doré de la page */
  position:absolute; inset:clamp(11px,1.5vw,20px); pointer-events:none;
  box-shadow:0 0 0 1px rgba(168,129,31,.45), inset 0 0 0 4px rgba(168,129,31,.14);
}
.page h3{font-size:clamp(1.25rem,2.4vw,2rem); color:#7E0C1A; line-height:1.4}
.page h4{
  font-family:inherit; font-size:clamp(.86rem,1.3vw,1.02rem);
  color:#8A6A2A; margin:.45em 0 0;
}
.page p{margin:1em 0 0; font-size:clamp(.82rem,1.05vw,.96rem);
  line-height:1.75; color:#4A3220; max-width:40ch}
.page__pour{font-size:clamp(.7rem,.9vw,.8rem) !important; color:#8A6A2A !important}
.page__tarif{
  margin-top:1.1em !important; padding-top:.9em; width:min(300px,100%);
  border-top:1px solid rgba(168,129,31,.45);
  font-size:clamp(.95rem,1.5vw,1.15rem) !important; color:#38200F !important;
}
.page__tarif small{display:block; font-size:.68em; color:#7A5C33; margin-top:.35em}
.page .bouton{margin-top:1.2em; box-shadow:0 8px 18px -12px rgba(56,32,15,.8)}

.page--gauche{border-right:1px solid rgba(168,129,31,.2)}
.page__marque{font-size:clamp(1.1rem,2vw,1.6rem) !important; color:#7E0C1A}
.page__sous{color:#8A6A2A !important; font-size:clamp(.74rem,.95vw,.85rem) !important}
.page__vers{
  margin-top:1.4em !important; font-size:clamp(.86rem,1.25vw,1.05rem) !important;
  color:#4A3220 !important; max-width:24ch;
}

/* ---------- la griffe écrite à la plume ---------- */
.signature-bloc{margin-top:auto; padding-top:clamp(10px,1.6vw,20px); width:100%}
.signature-bloc .griffe__mots{color:#7E0C1A}
.signature-bloc .griffe__soulignement{stroke:#C8102E}
.signature-bloc .plume{filter:drop-shadow(0 2px 3px rgba(56,32,15,.45))}

.programme__pied{text-align:center; margin-top:clamp(24px,3vw,38px); color:var(--texte)}

@media (max-width:820px){
  .programme__feuille{min-height:clamp(450px,90vw,540px)}
  .livre__spread{grid-template-columns:1fr}
  .livre__spread::after{display:none}
  .page--gauche{display:none}

}
@media (max-width:520px){
  .programme__feuille{min-height:490px}
  .page{padding:22px 18px}
}

@media (max-width:600px){

  /* sur petit écran la fiche ne peut pas tenir dans le cadre :
     le stylo ouvre directement le film, et la liste dépliante sous la
     carte donne les noms et les photos. */
  .stylo__fiche{display:none}
  .griffe{--g:150px}
  .stylo__nom{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .carte__zoom,.stylo{transition:none}
}

/* ==========================================================================
   LES DATES DE TOURNÉE
   ========================================================================== */
.dates{background:var(--noir)}
.tournee{list-style:none; margin:clamp(30px,4vw,50px) 0 0; padding:0; display:grid; gap:10px}
.tournee__ligne{
  display:grid; align-items:center; gap:clamp(14px,2.2vw,30px);
  grid-template-columns:minmax(140px,190px) 1fr auto auto;
  padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px); border-radius:2px;
  background:linear-gradient(90deg,rgba(72,12,17,.5),rgba(18,12,14,.3));
  box-shadow:inset 0 0 0 1px var(--filet);
  transition:box-shadow .3s ease;
}
.tournee__ligne:hover{box-shadow:inset 0 0 0 1px var(--or)}
.tournee__ligne--complet,.tournee__ligne--annule{opacity:.55}
.tournee__jour{font-family:"Pacifico",cursive; font-size:1.05rem; color:var(--or-clair)}
.tournee__jour small{display:block; font-family:inherit; font-size:.76rem; color:var(--texte)}
.tournee__lieu strong{display:block; font-size:1rem}
.tournee__lieu span{font-size:.86rem; color:var(--texte)}
.tournee__genre{font-size:.78rem; letter-spacing:.04em; color:var(--or)}
.tournee__mention{font-size:.82rem; color:var(--texte)}
@media (max-width:720px){
  .tournee__ligne{grid-template-columns:1fr auto; row-gap:8px}
  .tournee__genre{grid-column:1/-1}
}

/* ==========================================================================
   L'ÉTAL DE LA BOUTIQUE
   ========================================================================== */
.etal{
  list-style:none; margin:clamp(34px,4.5vw,56px) 0 0; padding:0; text-align:left;
  display:grid; gap:clamp(16px,2.2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.etal__article{
  display:flex; flex-direction:column; padding:0 0 clamp(20px,2.4vw,28px);
  border-radius:2px; overflow:hidden; background:var(--noir-2);
  box-shadow:inset 0 0 0 1px var(--filet);
}
.etal__article img{aspect-ratio:4/3; object-fit:cover; width:100%; filter:saturate(.85) brightness(.9)}
.etal__article h3{font-size:1.15rem; color:var(--or-clair); margin:clamp(16px,2vw,22px) clamp(16px,2vw,22px) 0}
.etal__article p{margin:.6em clamp(16px,2vw,22px) 0; font-size:.9rem; color:var(--texte)}
.etal__prix{
  margin:.9em clamp(16px,2vw,22px) 0; font-family:"Pacifico",cursive;
  font-size:1.25rem; color:var(--ivoire);
}
.etal__article .bouton{align-self:flex-start; margin:1.1em clamp(16px,2vw,22px) 0}


/* ==========================================================================
   QUAND UNE VIDÉO N'A PAS DE MINIATURE
   ========================================================================== */
.sans-image{
  position:relative;
  background:
    radial-gradient(70% 70% at 50% 38%, rgba(242,228,180,.15), transparent 70%),
    linear-gradient(150deg,#1E1216,#0A0607) !important;
}
.sans-image::after{
  content:""; position:absolute; inset:0; opacity:.62;
  background-repeat:no-repeat; background-position:center;
  background-size:clamp(26px,14%,48px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 110'%3E%3Crect x='13' y='4' width='18' height='62' rx='7' fill='%23C09A34'/%3E%3Crect x='12.2' y='60' width='19.6' height='5.4' fill='%23F2E4B4'/%3E%3Cpath d='M13 66h18c0 8-3 20-9 44-6-24-9-36-9-44z' fill='%23F2E4B4'/%3E%3Ccircle cx='22' cy='78' r='2.7' fill='%230A0607'/%3E%3C/svg%3E");
}
.stylo__image{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  overflow:hidden; border-radius:1px; background:#150D10;
}
.stylo__image img{width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) brightness(.9)}

/* ==========================================================================
   LES VILLAGES FRANÇAIS — la liste dépliante sous la carte
   ========================================================================== */
.villages-liste{
  margin-top:clamp(26px,3.4vw,44px); border-radius:3px;
  background:linear-gradient(90deg,rgba(126,12,26,.34),rgba(18,12,14,.28));
  box-shadow:inset 0 0 0 1px var(--filet);
}
.villages-liste > summary{
  display:flex; align-items:center; gap:.7em; cursor:pointer; list-style:none;
  padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);
  font-size:clamp(1rem,1.6vw,1.3rem); color:var(--or-clair);
}
.villages-liste > summary::-webkit-details-marker{display:none}
.villages-liste > summary::after{
  content:""; width:11px; height:11px; margin-left:auto; flex:none;
  border-right:2px solid var(--or); border-bottom:2px solid var(--or);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s ease;
}
.villages-liste[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.villages-liste > summary:hover{color:var(--or-eclat)}
.villages-liste > summary small{
  font-size:.62em; color:var(--texte); margin-left:.2em;
}
.villages-liste__corps{padding:0 clamp(18px,2.4vw,30px) clamp(22px,2.8vw,34px)}
.villages-liste .grille{margin-top:0}
@media (prefers-reduced-motion:reduce){.villages-liste > summary::after{transition:none}}

.page__demarche{
  margin-top:1.2em !important; padding-top:1em; width:min(340px,100%);
  border-top:1px solid rgba(168,129,31,.45);
  font-size:clamp(.76rem,.98vw,.88rem) !important; color:#7A5C33 !important;
}

/* ==========================================================================
   LA BOUTIQUE ET LA BILLETTERIE
   ========================================================================== */
.boutique-page{padding:clamp(40px,6vw,90px) 0 clamp(56px,8vw,110px)}
.boutique-page .woocommerce{max-width:100%}
.boutique-page h1.product_title,
.boutique-page .woocommerce-products-header__title{
  font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.35; color:var(--or-clair);
  text-align:left; margin-bottom:.3em;
}
.boutique-page .woocommerce-breadcrumb{font-size:.82rem; color:var(--texte); margin-bottom:1.6em}
.boutique-page .woocommerce-breadcrumb a{color:var(--or-clair); text-decoration:none}

/* la fiche */
.boutique-page div.product{
  display:grid; gap:clamp(24px,3.6vw,52px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start;
}
.boutique-page div.product .woocommerce-product-gallery{margin:0}
.boutique-page div.product .woocommerce-product-gallery img{border-radius:3px}
.boutique-page div.product .summary{margin:0}
.boutique-page div.product .entry-summary > *{max-width:56ch}
@media (max-width:820px){ .boutique-page div.product{grid-template-columns:1fr} }

.boutique-page .price,
.boutique-page .woocommerce-Price-amount{
  font-family:"Pacifico",cursive; font-size:clamp(1.3rem,2.2vw,1.8rem); color:var(--ivoire);
}
.boutique-page .price del{opacity:.45; font-size:.7em; margin-right:.4em}
.boutique-page .price ins{text-decoration:none; color:var(--rouge-clair)}
.boutique-page .woocommerce-product-details__short-description,
.boutique-page .woocommerce-Tabs-panel p{color:var(--texte)}
.boutique-page .stock.in-stock{color:#7BC47F; font-size:.9rem}
.boutique-page .stock.out-of-stock{color:var(--rouge-clair)}

/* les champs, quantités et boutons */
.boutique-page input[type=text],.boutique-page input[type=email],.boutique-page input[type=tel],
.boutique-page input[type=number],.boutique-page input[type=password],.boutique-page textarea,
.boutique-page select,.boutique-page .select2-container .select2-selection{
  background:#140C0F; color:var(--ivoire); border:1px solid rgba(192,154,52,.4);
  border-radius:3px; padding:.7em .9em; font:inherit; font-size:.95rem;
}
.boutique-page input:focus,.boutique-page textarea:focus,.boutique-page select:focus{
  outline:none; border-color:var(--or); box-shadow:0 0 0 3px rgba(192,154,52,.2);
}
.boutique-page label{color:var(--texte); font-size:.9rem}
.boutique-page .quantity input.qty{width:5.5em; text-align:center}

.boutique-page .button,
.boutique-page button.button,
.boutique-page a.button,
.boutique-page input.button,
.boutique-page .checkout-button,
.boutique-page #place_order{
  display:inline-block; border:0; cursor:pointer; text-decoration:none;
  font-family:"Pacifico",cursive; font-size:.95rem; line-height:1.6;
  padding:.7em 1.9em; border-radius:3px; color:var(--noir);
  background:var(--metal-h);
  box-shadow:0 10px 26px -14px rgba(242,228,180,.8);
  transition:transform .25s ease, filter .25s ease;
}
.boutique-page .button:hover,.boutique-page button.button:hover,
.boutique-page a.button:hover,.boutique-page #place_order:hover{
  transform:translateY(-2px); filter:brightness(1.08); color:var(--noir);
}
.boutique-page .button.alt,.boutique-page .checkout-button{font-size:1.05rem; padding:.85em 2.2em}

/* les messages */
.boutique-page .woocommerce-message,
.boutique-page .woocommerce-info,
.boutique-page .woocommerce-error{
  list-style:none; margin:0 0 1.8em; padding:1em 1.3em; border-radius:3px;
  background:linear-gradient(90deg,rgba(126,12,26,.4),rgba(18,12,14,.3));
  box-shadow:inset 0 0 0 1px var(--filet); color:var(--ivoire); font-size:.95rem;
}
.boutique-page .woocommerce-error{box-shadow:inset 0 0 0 1px var(--rouge-clair)}
.boutique-page .woocommerce-message .button,
.boutique-page .woocommerce-info .button{float:right; margin-left:1em}

/* panier et commande */
.boutique-page table.shop_table{
  width:100%; border:0; border-collapse:collapse; border-radius:3px; overflow:hidden;
  background:var(--noir-2); box-shadow:inset 0 0 0 1px var(--filet);
}
.boutique-page table.shop_table th{
  background:rgba(126,12,26,.3); color:var(--or-clair); font-weight:400;
  font-family:"Pacifico",cursive; padding:1em; text-align:left; font-size:.95rem;
}
.boutique-page table.shop_table td{padding:1em; border-top:1px solid rgba(192,154,52,.16); color:var(--texte)}
.boutique-page table.shop_table td a{color:var(--ivoire); text-decoration:none}
.boutique-page .cart_totals h2,.boutique-page #order_review_heading,
.boutique-page .woocommerce-billing-fields h3,.boutique-page .woocommerce-additional-fields h3{
  font-size:1.25rem; color:var(--or-clair); margin:1.6em 0 .8em;
}
.boutique-page .woocommerce-checkout .form-row{margin-bottom:1.1em}
.boutique-page .wc_payment_methods{list-style:none; margin:0 0 1.4em; padding:0}
.boutique-page .wc_payment_method label{color:var(--ivoire); font-size:.98rem}
.boutique-page .payment_box{
  background:rgba(20,12,15,.8); border-radius:3px; padding:1em 1.2em; margin-top:.6em;
  font-size:.9rem; color:var(--texte); box-shadow:inset 0 0 0 1px var(--filet);
}
.boutique-page .woocommerce-terms-and-conditions-wrapper{font-size:.88rem; color:var(--texte)}

/* la grille de la boutique */
.boutique-page ul.products{
  list-style:none; margin:clamp(28px,3.6vw,44px) 0 0; padding:0; display:grid;
  gap:clamp(16px,2.2vw,28px); grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
}
.boutique-page ul.products li.product{
  background:var(--noir-2); border-radius:3px; overflow:hidden; padding-bottom:1.2em;
  box-shadow:inset 0 0 0 1px var(--filet); text-align:center;
}
.boutique-page ul.products li.product a{text-decoration:none; color:inherit}
.boutique-page ul.products li.product img{width:100%; aspect-ratio:4/3; object-fit:cover}
.boutique-page ul.products li.product h2{
  font-size:1.05rem; color:var(--or-clair); margin:1em 1em 0; line-height:1.5;
}
.boutique-page ul.products li.product .price{display:block; margin:.6em 0 1em; font-size:1.15rem}
.boutique-page .woocommerce-result-count,.boutique-page .woocommerce-ordering{color:var(--texte); font-size:.9rem}

/* une billetterie sans galerie : la colonne de texte prend toute la place */
.boutique-page div.product.product-type-simple .woocommerce-product-gallery:empty{display:none}
.boutique-page div.product:has(.woocommerce-product-gallery:empty){grid-template-columns:minmax(0,1fr)}
.boutique-page div.product:has(.woocommerce-product-gallery:empty) .entry-summary{max-width:62ch}
.boutique-page .woocommerce-tabs:empty,
.boutique-page #reviews,
.boutique-page .woocommerce-Reviews{display:none}

/* ==========================================================================
   PANIER ET COMMANDE EN BLOCS
   WooCommerce propose deux moteurs : l'ancien en tableau, le nouveau en
   blocs. Celui-ci apporte ses propres couleurs, qu'il faut reprendre.
   ========================================================================== */
.boutique-page .wp-block-woocommerce-cart,
.boutique-page .wp-block-woocommerce-checkout{width:100%; max-width:none; margin:0}
.boutique-page .wc-block-cart,
.boutique-page .wc-block-checkout{color:var(--ivoire)}

.boutique-page .wc-block-cart{
  display:grid; align-items:start; gap:clamp(22px,3vw,46px);
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
}
.boutique-page .wc-block-checkout__main,
.boutique-page .wc-block-checkout__sidebar,
.boutique-page .wc-block-cart__main,
.boutique-page .wc-block-cart__sidebar{
  width:100%; max-width:none; padding:0; float:none; flex:none;
}
@media (max-width:860px){ .boutique-page .wc-block-cart{grid-template-columns:1fr} }

.boutique-page .wc-block-components-product-name,
.boutique-page .wc-block-components-product-price,
.boutique-page .wc-block-components-product-metadata,
.boutique-page .wc-block-components-totals-item__label,
.boutique-page .wc-block-components-totals-item__value,
.boutique-page .wc-block-components-order-summary-item__description,
.boutique-page .wc-block-components-title,
.boutique-page .wc-block-cart-items__header,
.boutique-page .wc-block-components-checkout-step__title,
.boutique-page .wc-block-components-quantity-selector input,
.boutique-page .wc-block-components-text-input input,
.boutique-page .wc-block-components-address-form label{color:var(--ivoire)}

.boutique-page .wc-block-components-product-name{text-decoration:none; font-size:1.02rem}
.boutique-page .wc-block-cart-items__header{
  color:var(--or-clair); font-family:"Pacifico",cursive;
  border-bottom:1px solid rgba(192,154,52,.3);
}
.boutique-page .wc-block-cart-item__wrap,
.boutique-page .wc-block-cart-items tr{border-bottom:1px solid rgba(192,154,52,.16)}
.boutique-page .wc-block-components-sidebar .wc-block-components-panel,
.boutique-page .wc-block-components-totals-wrapper,
.boutique-page .wc-block-components-order-summary{
  background:var(--noir-2); border-radius:3px; padding:1.1em 1.3em;
  box-shadow:inset 0 0 0 1px var(--filet); border:0;
}
.boutique-page .wc-block-components-totals-item__value{font-family:"Pacifico",cursive}

.boutique-page .wc-block-components-button,
.boutique-page .wc-block-cart__submit-button,
.boutique-page .wc-block-components-checkout-place-order-button{
  background:var(--metal-h) !important; color:var(--noir) !important;
  font-family:"Pacifico",cursive; font-size:1rem; border:0; border-radius:3px;
  padding:.85em 2em; box-shadow:0 10px 26px -14px rgba(242,228,180,.8);
}
.boutique-page .wc-block-components-button:hover{filter:brightness(1.08)}
.boutique-page .wc-block-components-quantity-selector,
.boutique-page .wc-block-components-text-input input,
.boutique-page .wc-block-components-textarea,
.boutique-page .wc-block-components-select__container{
  background:#140C0F; border:1px solid rgba(192,154,52,.4); border-radius:3px;
}
.boutique-page .wc-block-components-notice-banner{
  background:linear-gradient(90deg,rgba(126,12,26,.5),rgba(18,12,14,.35));
  border:0; box-shadow:inset 0 0 0 1px var(--rouge-clair); border-radius:3px;
  color:var(--ivoire); max-width:none;
}
.boutique-page .wc-block-components-notice-banner__content{color:var(--ivoire); font-size:.95rem}
.boutique-page .wc-block-components-panel__button{color:var(--or-clair)}

/* ==========================================================================
   REPRENDRE LA MAIN SUR LES STYLES DE WOOCOMMERCE
   Ses propres règles ont la même force que les miennes et passent parfois
   devant. Le sélecteur [class] leur donne le dessus une fois pour toutes.
   ========================================================================== */
.boutique-page[class] ul.products{
  list-style:none; margin:clamp(28px,3.6vw,44px) 0 0; padding:0;
  display:grid; gap:clamp(16px,2.2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
}
.boutique-page[class] ul.products::before,
.boutique-page[class] ul.products::after{content:none; display:none}
.boutique-page[class] ul.products li.product{
  width:auto; float:none; margin:0; clear:none; padding:0 0 1.3em;
  background:var(--noir-2); border-radius:3px; overflow:hidden; text-align:center;
  box-shadow:inset 0 0 0 1px var(--filet);
  transition:transform .25s ease, box-shadow .25s ease;
}
.boutique-page[class] ul.products li.product:hover{
  transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--or);
}
.boutique-page[class] ul.products li.product a img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:0;
}
.boutique-page[class] ul.products li.product .woocommerce-loop-product__title{
  font-family:"Pacifico",cursive; font-size:1.05rem; color:var(--or-clair);
  padding:1em 1em 0; margin:0; line-height:1.5;
}
.boutique-page[class] ul.products li.product .price{
  display:block; margin:.55em 0 1em; font-size:1.2rem; color:var(--ivoire);
}
.boutique-page[class] ul.products li.product .button{margin:0 1em; display:inline-block}
.boutique-page[class] .woocommerce-result-count{margin:0; color:var(--texte); font-size:.9rem}
.boutique-page[class] .woocommerce-ordering{margin:0}

/* ---------- le panier classique ---------- */
.boutique-page[class] table.shop_table{
  width:100%; border:0; border-collapse:separate; border-spacing:0;
  border-radius:3px; overflow:hidden; background:var(--noir-2);
  box-shadow:inset 0 0 0 1px var(--filet); color:var(--ivoire);
}
.boutique-page[class] table.shop_table th{
  background:rgba(126,12,26,.34); color:var(--or-clair); font-weight:400;
  font-family:"Pacifico",cursive; font-size:.98rem; padding:1em 1.1em; text-align:left; border:0;
}
.boutique-page[class] table.shop_table td{
  padding:1.1em; border:0; border-top:1px solid rgba(192,154,52,.18);
  color:var(--ivoire); font-size:.95rem; vertical-align:middle;
}
.boutique-page[class] table.shop_table td a{color:var(--ivoire); text-decoration:none}
.boutique-page[class] table.shop_table td a:hover{color:var(--or-clair)}
.boutique-page[class] table.shop_table img{width:64px; height:auto; border-radius:2px}
.boutique-page[class] .product-remove a.remove{
  color:var(--rouge-clair) !important; font-size:1.4rem; background:none !important;
}
.boutique-page[class] .cart_item .variation,
.boutique-page[class] .cart_item label{color:var(--texte); font-size:.85rem}
.boutique-page[class] .cart_item input[type=text],
.boutique-page[class] .cart_item input[type=number]{
  background:#140C0F; color:var(--ivoire); border:1px solid rgba(192,154,52,.45);
  border-radius:3px; padding:.5em .7em; max-width:16em;
}
.boutique-page[class] .cart-collaterals{margin-top:clamp(26px,3.4vw,44px)}
.boutique-page[class] .cart_totals{
  margin-left:auto; width:min(420px,100%);
  background:var(--noir-2); border-radius:3px; padding:1.2em 1.4em;
  box-shadow:inset 0 0 0 1px var(--filet);
}
.boutique-page[class] .cart_totals h2{font-size:1.2rem; color:var(--or-clair); margin:0 0 .7em}
.boutique-page[class] .cart_totals table.shop_table{box-shadow:none; background:none}
.boutique-page[class] .cart_totals th{background:none; padding:.7em 0; font-size:.95rem}
.boutique-page[class] .cart_totals td{padding:.7em 0; text-align:right}
.boutique-page[class] .coupon input[type=text]{
  background:#140C0F; color:var(--ivoire); border:1px solid rgba(192,154,52,.45);
  border-radius:3px; padding:.75em 1em; min-width:12em;
}
.boutique-page[class] .actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:1.1em}
.boutique-page[class] .coupon{display:flex; gap:10px; flex-wrap:wrap; margin:0}
.boutique-page[class] .wc-proceed-to-checkout{padding:1.2em 0 0}
.boutique-page[class] .checkout-button{display:block; text-align:center; width:100%}
@media (max-width:720px){
  .boutique-page[class] table.shop_table thead{display:none}
  .boutique-page[class] table.shop_table tr{display:block; padding:.6em 0}
  .boutique-page[class] table.shop_table td{display:flex; justify-content:space-between; gap:1em; border:0}
  .boutique-page[class] table.shop_table td::before{content:attr(data-title); color:var(--or-clair)}
  .boutique-page[class] .cart_totals{width:100%}
}

/* ==========================================================================
   LE PANIER : OR SUR NOIR, ET LES NOMS DE SPECTATEURS EN COLONNES
   Vingt champs les uns sous les autres rendaient la page interminable.
   Ils se rangent maintenant côte à côte, autant que la largeur le permet.
   ========================================================================== */
.boutique-page[class] .woocommerce,
.boutique-page[class] .woocommerce *{color:var(--ivoire)}
.boutique-page[class] .woocommerce a{color:var(--or-clair)}

.boutique-page[class] table.shop_table td.product-name{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  padding:1.2em 1.1em;
}
.boutique-page[class] table.shop_table td.product-name > a{
  flex:1 1 100%; font-family:"Pacifico",cursive; font-size:1.08rem;
  color:var(--or-clair); text-decoration:none; margin-bottom:.2em;
}
.boutique-page[class] table.shop_table td.product-name label{
  flex:0 0 auto; min-width:0; max-width:170px;
  font-size:.78rem; line-height:1.35; color:var(--or); text-align:right;
  margin:0; font-family:inherit;
}
.boutique-page[class] table.shop_table td.product-name input[type=text],
.boutique-page[class] table.shop_table td.product-name input[type=email],
.boutique-page[class] table.shop_table td.product-name select{
  flex:0 0 190px; max-width:190px; margin:0;
  background:#140C0F; color:var(--ivoire);
  border:1px solid rgba(192,154,52,.45); border-radius:3px;
  padding:.55em .7em; font-size:.9rem;
}
.boutique-page[class] table.shop_table td.product-name input:focus{
  border-color:var(--or); box-shadow:0 0 0 3px rgba(192,154,52,.22); outline:0;
}
.boutique-page[class] table.shop_table td.product-name br{display:none}

.boutique-page[class] table.shop_table th.product-name{width:auto}
.boutique-page[class] table.shop_table th.product-price,
.boutique-page[class] table.shop_table th.product-quantity,
.boutique-page[class] table.shop_table th.product-subtotal,
.boutique-page[class] table.shop_table td.product-price,
.boutique-page[class] table.shop_table td.product-quantity,
.boutique-page[class] table.shop_table td.product-subtotal{
  width:1%; white-space:nowrap; text-align:right; vertical-align:top; padding-top:1.6em;
}
.boutique-page[class] table.shop_table td.product-subtotal,
.boutique-page[class] table.shop_table td.product-price{
  font-family:"Pacifico",cursive; font-size:1.05rem; color:var(--ivoire);
}
.boutique-page[class] table.shop_table td.product-thumbnail{width:1%; padding-top:1.6em}
.boutique-page[class] table.shop_table td.product-remove{width:1%; padding-top:1.6em; text-align:center}
.boutique-page[class] .quantity input.qty{
  width:4.6em; text-align:center; background:#140C0F; color:var(--ivoire);
  border:1px solid rgba(192,154,52,.45); border-radius:3px; padding:.5em;
}

/* le bloc du total, et les boutons */
.boutique-page[class] .cart_totals h2,
.boutique-page[class] .cart-collaterals h2{
  font-family:"Pacifico",cursive; color:var(--or-clair);
}
.boutique-page[class] .cart_totals th,
.boutique-page[class] .cart_totals td,
.boutique-page[class] .order-total .amount{color:var(--ivoire)}
.boutique-page[class] .order-total th,
.boutique-page[class] .order-total .amount{font-family:"Pacifico",cursive; font-size:1.15rem}
.boutique-page[class] .wc-proceed-to-checkout a.checkout-button,
.boutique-page[class] a.button.alt,
.boutique-page[class] button.button.alt,
.boutique-page[class] input.button.alt,
.boutique-page[class] #place_order{
  background:var(--metal-h) !important; color:var(--noir) !important;
  border:0; font-family:"Pacifico",cursive; font-size:1.05rem;
  padding:.9em 2em; border-radius:3px; text-shadow:none;
  box-shadow:0 10px 26px -14px rgba(242,228,180,.85);
}
.boutique-page[class] button[name="update_cart"],
.boutique-page[class] button[name="apply_coupon"]{
  background:none !important; color:var(--or-clair) !important;
  font-family:"Pacifico",cursive; border:0; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(192,154,52,.55); padding:.7em 1.5em;
}
.boutique-page[class] button[name="update_cart"]:hover,
.boutique-page[class] button[name="apply_coupon"]:hover{
  box-shadow:inset 0 0 0 1px var(--or) !important;
}
.boutique-page[class] .coupon input#coupon_code{min-width:11em}

@media (max-width:900px){
  .boutique-page[class] table.shop_table td.product-name label{
    flex:1 1 100%; max-width:none; text-align:left;
  }
  .boutique-page[class] table.shop_table td.product-name input[type=text]{
    flex:1 1 100%; max-width:none;
  }
}

/* ==========================================================================
   PANIER : ON IMPOSE, WOOCOMMERCE CHARGEANT PARFOIS SES STYLES APRÈS
   ========================================================================== */
body .boutique-page table.shop_table td.product-name{
  display:flex !important; flex-wrap:wrap !important;
  align-items:center !important; gap:8px 18px !important;
  vertical-align:top !important;
}
body .boutique-page table.shop_table td.product-name > a{
  flex:1 1 100% !important; font-family:"Pacifico",cursive !important;
  font-size:1.08rem !important; color:#F0E0AE !important; text-decoration:none !important;
}
body .boutique-page table.shop_table td.product-name label{
  flex:0 0 auto !important; max-width:170px !important; text-align:right !important;
  font-size:.78rem !important; line-height:1.35 !important; color:#C09A34 !important;
  margin:0 !important; display:inline-block !important;
}
body .boutique-page table.shop_table td.product-name input[type=text],
body .boutique-page table.shop_table td.product-name input[type=email],
body .boutique-page table.shop_table td.product-name select{
  flex:0 0 190px !important; max-width:190px !important; width:190px !important;
  margin:0 !important; background:#140C0F !important; color:#F3ECE0 !important;
  border:1px solid rgba(192,154,52,.45) !important; border-radius:3px !important;
  padding:.55em .7em !important; font-size:.9rem !important; box-shadow:none !important;
}
body .boutique-page table.shop_table td.product-name br{display:none !important}

body .boutique-page table.shop_table td.product-remove,
body .boutique-page table.shop_table td.product-thumbnail,
body .boutique-page table.shop_table td.product-price,
body .boutique-page table.shop_table td.product-quantity,
body .boutique-page table.shop_table td.product-subtotal{
  vertical-align:top !important; padding-top:1.7em !important;
}
body .boutique-page table.shop_table td.product-price,
body .boutique-page table.shop_table td.product-subtotal{
  color:#F3ECE0 !important; font-family:"Pacifico",cursive !important; text-align:right !important;
}
body .boutique-page table.shop_table th{color:#F0E0AE !important}
body .boutique-page table.shop_table td,
body .boutique-page .cart_totals th,
body .boutique-page .cart_totals td{color:#F3ECE0 !important}
body .boutique-page .quantity input.qty{
  background:#140C0F !important; color:#F3ECE0 !important;
  border:1px solid rgba(192,154,52,.45) !important; width:4.6em !important; text-align:center !important;
}
@media (max-width:900px){
  body .boutique-page table.shop_table td.product-name label,
  body .boutique-page table.shop_table td.product-name input[type=text]{
    flex:1 1 100% !important; max-width:none !important; width:auto !important; text-align:left !important;
  }
}

/* la même chose si le gabarit change un jour : on vise aussi le body */
body.anm-boutique main{padding:clamp(40px,6vw,90px) 0 clamp(56px,8vw,110px)}
body.anm-boutique .page-contenu{max-width:none}

/* le choix de la quantité, dans la grille de la boutique */
.boutique-page[class] .anm-achat-rapide{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  justify-content:center; margin:0 1em;
}
.boutique-page[class] .anm-achat-rapide .quantity input.qty{
  width:4.4em; text-align:center; background:#140C0F; color:var(--ivoire);
  border:1px solid rgba(192,154,52,.45); border-radius:3px; padding:.55em .3em;
  font-size:.95rem;
}
.boutique-page[class] .anm-achat-rapide .button{margin:0; flex:1 1 auto; min-width:9em}

/* ==========================================================================
   LA FICHE D'UNE BILLETTERIE
   L'affiche prend toute la hauteur de la colonne de droite, et le titre
   se lit en trois temps : la nature, la ville, la date.
   ========================================================================== */
.boutique-page[class] div.product{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:stretch;
}
.boutique-page[class] div.product .woocommerce-product-gallery{
  width:100%; margin:0; float:none;
}
.boutique-page[class] div.product .woocommerce-product-gallery__wrapper{margin:0}
.boutique-page[class] div.product .woocommerce-product-gallery img{
  width:100%; height:auto; border-radius:3px;
  box-shadow:0 0 0 1px rgba(192,154,52,.45), 0 30px 60px -34px #000;
}
.boutique-page[class] div.product .summary,
.boutique-page[class] div.product .entry-summary{
  width:100%; margin:0; float:none;
  display:flex; flex-direction:column; justify-content:center;
}

.boutique-page[class] .fiche__genre{
  margin:0 0 .3em; font-size:clamp(.78rem,1vw,.92rem);
  letter-spacing:.06em; color:var(--or); font-family:inherit;
}
.boutique-page[class] h1.fiche__ville{
  margin:0; font-family:"Pacifico",cursive; line-height:1.15;
  font-size:clamp(2rem,4.4vw,3.4rem); color:var(--or-clair);
  text-wrap:balance; padding-bottom:.06em;
}
.boutique-page[class] .fiche__date{
  margin:.35em 0 0; font-family:"Pacifico",cursive;
  font-size:clamp(1.05rem,1.9vw,1.5rem); color:var(--ivoire);
}
.boutique-page[class] div.product .fiche__date + .price{
  margin-top:1.1em; padding-top:1.1em; display:block;
  border-top:1px solid rgba(192,154,52,.3);
}
.boutique-page[class] div.product .woocommerce-product-details__short-description{
  margin-top:.7em; font-size:1rem; color:var(--texte);
}
@media (max-width:820px){
  .boutique-page[class] div.product{grid-template-columns:1fr}
  .boutique-page[class] div.product .summary{margin-top:1.6em}
}

/* la salle, à la même hauteur que la date et dans le même or */
.boutique-page[class] div.product .woocommerce-product-details__short-description,
.boutique-page[class] div.product .woocommerce-product-details__short-description p{
  margin:.3em 0 0; font-family:"Pacifico",cursive;
  font-size:clamp(1.05rem,1.9vw,1.5rem); line-height:1.35;
  color:var(--or-clair);
}

/* ---------- le plan d'accès ---------- */
.anm-plan{
  margin:clamp(40px,5vw,72px) 0 0; padding-top:clamp(30px,4vw,50px);
  border-top:1px solid var(--filet); text-align:center;
}
.anm-plan h2{
  font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--or-clair); margin:0;
}
.anm-plan__adresse{
  margin:.7em 0 0; color:var(--texte); font-size:1rem;
}
.anm-plan__carte{
  position:relative; margin:clamp(20px,2.6vw,32px) auto 0;
  aspect-ratio:16/8; width:100%; overflow:hidden; border-radius:3px;
  box-shadow:0 0 0 1px var(--or), 0 0 0 6px rgba(228,20,43,.3), 0 30px 60px -34px #000;
}
.anm-plan__carte iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:saturate(.85) contrast(1.03);
}
.anm-plan .bouton{margin-top:clamp(18px,2.2vw,28px)}
@media (max-width:700px){ .anm-plan__carte{aspect-ratio:4/3} }

/* ==========================================================================
   LES PHRASES TIENNENT SUR UNE LIGNE TANT QUE LA PLACE LE PERMET
   La largeur suit le texte au lieu d'être coupée à une mesure fixe.
   ========================================================================== */
.titre-section{
  max-width:100%; width:fit-content; margin-inline:auto;
  font-size:clamp(1.4rem,2.9vw,2.45rem);
}
.chapo{
  max-width:100%; width:fit-content; margin:1.1em auto 0; text-align:center;
}
.chapo--suite{margin-top:.5em}
.manifeste__lignes{max-width:100%; gap:.5em}
.manifeste__lignes span{width:fit-content; max-width:100%; margin-inline:auto}
.mois p,.projet__cle,.programme__pied{width:fit-content; max-width:100%; margin-inline:auto}
.mois__bloc p{margin-inline:0}

/* ---------- la fiche sur la page de gauche du livre ---------- */
.page__fiche{
  list-style:none; margin:clamp(16px,2vw,26px) 0 0; padding:0;
  display:grid; gap:.55em; width:100%; max-width:30ch;
}
.page__fiche li{
  position:relative; padding:.5em .2em .5em 1.4em;
  font-size:clamp(.8rem,1.05vw,.94rem); line-height:1.5;
  color:#4A3220; text-align:left;
  border-bottom:1px solid rgba(168,129,31,.28);
}
.page__fiche li:last-child{border-bottom:0}
.page__fiche li::before{
  content:""; position:absolute; left:.2em; top:1.05em;
  width:6px; height:6px; border-radius:50%; background:#A8811F;
}
@media (max-width:520px){ .page__fiche{max-width:none} }

/* les pages de texte : titres et listes lisibles */
.page-contenu h2{
  margin:1.8em 0 .5em; font-size:clamp(1.1rem,1.9vw,1.45rem); color:var(--or-clair);
}
.page-contenu p{margin:0 0 1em; color:var(--texte)}
.page-contenu ul{margin:0 0 1.4em; padding-left:1.3em; color:var(--texte)}
.page-contenu li{margin-bottom:.45em}
.page-contenu a{color:var(--or-clair)}

/* la phrase du village du mois tient sur une ligne : on lui donne
   la place et une taille calée sur la largeur de la colonne */
.mois__bloc{grid-template-columns:minmax(0,1.12fr) minmax(0,1.05fr)}
.mois__bloc p{
  width:auto; max-width:none; margin:1em 0 0;
  font-size:clamp(.8rem,1.05vw,.98rem); line-height:1.6;
}
@media (max-width:820px){
  .mois__bloc{grid-template-columns:1fr}
  .mois__bloc p{font-size:.95rem}
}

/* l'affiche ou le film, sur la page de gauche du livre */
.page__visuel{
  display:block; position:relative; width:100%; max-width:340px;
  margin:clamp(14px,2vw,24px) auto 0; border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(168,129,31,.7), 0 0 0 5px rgba(126,12,26,.16),
             0 22px 44px -26px rgba(56,32,15,.7);
}
.page__visuel img{width:100%; height:auto; display:block}
.page__visuel--film{cursor:pointer}
.page__lecture{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top, rgba(56,32,15,.5), rgba(56,32,15,0) 55%);
}
.page__lecture > span{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(200,16,46,.92); box-shadow:0 0 0 1px rgba(242,228,180,.85);
  transition:transform .3s ease;
}
.page__lecture > span::before{
  content:""; width:0; height:0; margin-left:3px;
  border-left:12px solid #F2E4B4;
  border-top:7.5px solid transparent; border-bottom:7.5px solid transparent;
}
.page__visuel--film:hover .page__lecture > span{transform:scale(1.12)}

/* ==========================================================================
   UNE IMAGE EN FOND DES CADRES DE LA SCÈNE
   ========================================================================== */
.onglet__fond{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.onglet__fond img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;   /* remplit le cadre, sans déformer */
}
.onglet--fond .onglet__face::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,7,8,.55), rgba(10,7,8,.2) 38%, rgba(10,7,8,.82));
}
.onglet__face > svg,
.onglet__face > .onglet__titre,
.onglet__face > .onglet__note{position:relative; z-index:2}
.onglet--fond .onglet__titre,
.onglet--fond .onglet__note{text-shadow:0 2px 10px rgba(10,7,8,.9)}

/* ==========================================================================
   L'AFFICHE OCCUPE TOUTE LA PLACE DISPONIBLE SUR LA PAGE
   Elle grandit jusqu'aux bords sans jamais être recadrée ni déformée :
   une affiche coupée ne veut plus rien dire.
   ========================================================================== */
.page--gauche{justify-content:flex-start}
.page__visuel{
  flex:1 1 auto; min-height:0; width:100%; max-width:100%;
  display:flex; align-items:center; justify-content:center;
  margin:clamp(12px,1.6vw,22px) 0;
  background:none; border-radius:0; box-shadow:none; overflow:visible;
}
.page__visuel img{
  width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain; border-radius:2px;
  box-shadow:0 0 0 1px rgba(168,129,31,.7), 0 0 0 5px rgba(126,12,26,.16),
             0 22px 44px -26px rgba(56,32,15,.7);
}
.page__visuel--film .page__lecture{
  position:absolute; inset:0; display:grid; place-items:center; background:none;
}
.page__visuel--film{position:relative}
@media (max-width:820px){
  .page__visuel{min-height:220px}
}

/* le découpage qui révèle les mots ne doit pas manger les jambages du g */
.griffe__mots{
  clip-path:inset(-30% -4% -35% 0);
  padding-bottom:.12em; line-height:1.75; overflow:visible;
}
@keyframes ecriture{
  from{clip-path:inset(-30% 100% -35% 0)}
  to{clip-path:inset(-30% -4% -35% 0)}
}
.griffe--sceau .griffe__mots{clip-path:inset(-30% -4% -35% 0)}
.stylo:hover .griffe__mots, .stylo:focus-visible .griffe__mots,
.stylo.est-ouvert .griffe__mots, .livre.ecrit .griffe__mots{
  animation:ecriture 2s cubic-bezier(.36,.06,.5,.96) .2s forwards;
}


/* ==========================================================================
   LE PLAN D'ACCÈS, DANS LA COLONNE DE RÉSERVATION
   Sous le bouton et les moyens de paiement, à hauteur de l'affiche.
   ========================================================================== */
.boutique-page[class] .anm-plan{
  margin:clamp(24px,3vw,38px) 0 0; padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--filet); text-align:left; width:100%;
}
.boutique-page[class] .anm-plan h2{
  font-size:clamp(1rem,1.5vw,1.25rem); color:var(--or-clair); margin:0;
}
.boutique-page[class] .anm-plan__adresse{
  margin:.5em 0 0; font-size:.92rem; color:var(--texte);
}
.boutique-page[class] .anm-plan__carte{
  aspect-ratio:16/10; margin:clamp(14px,1.8vw,20px) 0 0;
  box-shadow:0 0 0 1px var(--or), 0 0 0 4px rgba(228,20,43,.26), 0 22px 44px -28px #000;
}
.boutique-page[class] .anm-plan .bouton{
  margin-top:clamp(12px,1.6vw,18px); font-size:.88rem; padding:.6em 1.4em;
}
@media (max-width:820px){
  .boutique-page[class] .anm-plan__carte{aspect-ratio:4/3}
}

/* ==========================================================================
   LA BANDE-ANNONCE
   ========================================================================== */
.annonce{background:var(--noir-2)}
.annonces{
  list-style:none; margin:clamp(30px,4vw,50px) 0 0; padding:0;
  display:grid; gap:clamp(18px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.annonce__item{
  display:flex; flex-direction:column; padding:0 0 clamp(18px,2.2vw,26px);
  border-radius:3px; overflow:hidden; background:var(--noir);
  box-shadow:inset 0 0 0 1px var(--filet);
}
.annonce__ecran{
  display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(150deg,#1E1216,#0A0607);
}
.annonce__ecran img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.85) brightness(.9); transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
a.annonce__ecran:hover img{transform:scale(1.04); filter:saturate(1) brightness(1)}
.annonce__item h3{
  margin:clamp(16px,2vw,22px) clamp(16px,2vw,22px) 0;
  font-size:1.15rem; color:var(--or-clair); line-height:1.45;
}
.annonce__item p{
  margin:.5em clamp(16px,2vw,22px) 0; font-size:.92rem; color:var(--texte);
}
.annonce__son{
  width:calc(100% - 2 * clamp(16px,2vw,22px));
  margin:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px) 0;
  height:42px; border-radius:30px;
  background:#140C0F; box-shadow:inset 0 0 0 1px rgba(192,154,52,.45);
  color-scheme:dark;
}
.annonce__son::-webkit-media-controls-panel{background:#140C0F}

/* ==========================================================================
   L'AGENDA : TOUT EN PLUS GRAND
   ========================================================================== */
.tournee__ligne{
  gap:clamp(18px,2.6vw,38px);
  padding:clamp(20px,2.6vw,32px) clamp(22px,2.8vw,36px);
  grid-template-columns:minmax(170px,230px) 1fr auto auto;
}
.tournee__jour{font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.3}
.tournee__jour small{font-size:clamp(.86rem,1.1vw,.98rem); margin-top:.25em}
.tournee__lieu strong{font-size:clamp(1.15rem,1.85vw,1.55rem); line-height:1.35}
.tournee__lieu span{font-size:clamp(.95rem,1.25vw,1.1rem); margin-top:.2em; display:block}
.tournee__genre{font-size:clamp(.9rem,1.15vw,1.05rem)}
.tournee__mention{font-size:clamp(.9rem,1.15vw,1.05rem)}
.tournee__ligne .bouton{font-size:clamp(.95rem,1.25vw,1.12rem); padding:.85em 2.1em}
@media (max-width:720px){
  .tournee__ligne{grid-template-columns:1fr auto; row-gap:10px}
  .tournee__jour{font-size:1.15rem}
  .tournee__lieu strong{font-size:1.1rem}
}

/* la mention « Prochainement », sous le chapô d'une rubrique à venir */
.bientot{
  width:fit-content; max-width:100%; margin:1.4em auto 0;
  padding:.45em 1.6em; border-radius:30px;
  font-family:"Pacifico",cursive; font-size:clamp(.92rem,1.2vw,1.1rem);
  color:var(--or-eclat); letter-spacing:.02em;
  background:linear-gradient(90deg,rgba(126,12,26,.42),rgba(20,12,15,.3));
  box-shadow:inset 0 0 0 1px rgba(192,154,52,.5);
}

/* ==========================================================================
   ANNONCE EN HAUT DE LA BOUTIQUE
   Réglée depuis la console. Vide, le bloc n'existe pas.
   ========================================================================== */
.boutique-annonce{
  margin:0 0 clamp(28px,4vw,44px);
  padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,32px);
  border:1px solid var(--filet);
  background:linear-gradient(180deg,rgba(126,12,26,.22),transparent);
  text-align:center;
}
.boutique-annonce h2{font-size:clamp(1.2rem,2.4vw,1.8rem); color:var(--or-clair); margin:0}
.boutique-annonce p{margin:.6em 0 0; color:var(--texte)}
.boutique-annonce h2 + p{margin-top:.5em}

/* ==========================================================================
   LA CAMÉRA ET LE MICRO, AU-DESSUS DES COULISSES
   ========================================================================== */
.signes{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(34px,6vw,72px); margin:0 0 .85em; color:var(--or-clair);
}
.signes svg{width:clamp(30px,3.6vw,44px); height:auto; display:block}

/* Les places restantes, sous le lieu de chaque date */
.tournee__places{
  display:block; margin-top:.35em; font-style:normal;
  font-size:clamp(.88rem,1.1vw,1rem); color:var(--or-clair);
}

/* ==========================================================================
   LE PETIT PANIER À CÔTÉ DU BOUTON DE RÉSERVATION
   ========================================================================== */
.panier-indicateur{
  display:inline-flex; align-items:center; gap:.3em; margin-left:14px;
  color:var(--or-clair); text-decoration:none; vertical-align:middle;
}
.panier-indicateur svg{width:28px; height:28px; display:block}
.panier-indicateur:hover{color:var(--or-eclat)}
.panier-indicateur__nombre{
  min-width:1.7em; height:1.7em; padding:0 .45em; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--rouge); color:#fff;
  font-family:"Nunito Sans",system-ui,sans-serif; font-size:.8rem; font-weight:700; line-height:1;
}

/* Le panier se met à jour tout seul : bouton de mise à jour et croix inutiles */
.anm-cache{display:none !important}
.woocommerce-cart-form .product-remove{display:none}

/* L'ouverture des portes, sous le nom du billet dans le panier */
.panier-portes{display:block; margin-top:.5em; max-width:52ch; font-size:.85em; line-height:1.55; color:var(--or-clair)}

/* L'affiche de la représentation, à gauche du billet dans le panier */
.woocommerce-cart-form .product-thumbnail{display:table-cell; vertical-align:top}
.panier-affiche{display:block; width:clamp(58px,7vw,88px); height:auto; max-width:none;
  border:1px solid var(--filet); box-shadow:0 4px 14px rgba(0,0,0,.45)}

/* ==========================================================================
   LES MESSAGES DE WOOCOMMERCE
   WooCommerce pose sa coche (ou son point d'exclamation) en position absolue
   à gauche du message. Sans marge pour elle, elle mordait sur le premier mot :
   c'est le « V » qui chevauchait « Spectacle » sur les téléphones.
   ========================================================================== */
.boutique-page .woocommerce-message,
.boutique-page .woocommerce-info,
.boutique-page .woocommerce-error{position:relative; padding-left:3.2em; padding-right:3.2em}
.boutique-page .woocommerce-message::before,
.boutique-page .woocommerce-info::before,
.boutique-page .woocommerce-error::before{left:1.1em}

@media (max-width:640px){
  .boutique-page .woocommerce-message,
  .boutique-page .woocommerce-info,
  .boutique-page .woocommerce-error{padding-right:1.1em; text-align:left}
  /* le bouton ne flotte plus à côté du texte : il passe dessous */
  .boutique-page .woocommerce-message .button,
  .boutique-page .woocommerce-info .button{float:none; display:block; width:fit-content; margin:.8em 0 0}
}

/* ==========================================================================
   LE PANIER, SUITE
   ========================================================================== */
/* Le mot « Produit » ne sert à rien : l'en-tête se tait, la colonne reste. */
body .boutique-page .woocommerce-cart-form table.shop_table thead th.product-name{visibility:hidden}

@media (max-width:768px){
  /* WooCommerce masque les images du panier sur téléphone : on garde l'affiche */
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-thumbnail{
    display:block !important; text-align:right !important; padding-top:1em !important; width:auto !important;
  }
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-thumbnail::before{display:none !important}
  body .boutique-page .woocommerce-cart-form .panier-affiche{margin-left:auto; width:86px}

  /* Plus d'étiquette « Produit : » devant le nom du billet */
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-name::before{display:none !important}

  /* Le nom du billet, l'accueil et les noms des spectateurs, alignés à droite */
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-name,
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-name *:not(input){text-align:right !important}
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-name label{display:block}
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-name input:not([type="hidden"]){
    display:block; margin-left:auto !important; margin-right:0 !important;
  }
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-name div,
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-name p{
    justify-content:flex-end; align-items:flex-end; margin-left:auto;
  }
}

/* ==========================================================================
   LE PANIER, TROISIÈME PASSE
   ========================================================================== */
/* La croix de suppression : sur téléphone, WooCommerce réaffichait toutes les
   cases du tableau et passait par-dessus la règle précédente. */
body .boutique-page .woocommerce-cart-form table.shop_table th.product-remove,
body .boutique-page .woocommerce-cart-form table.shop_table td.product-remove{display:none !important}

/* L'affiche sur ordinateur : la colonne et l'image sont imposées, quoi que
   puissent dire les feuilles de style de WooCommerce ou des extensions. */
@media (min-width:769px){
  body .boutique-page .woocommerce-cart-form table.shop_table th.product-thumbnail,
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-thumbnail{
    display:table-cell !important; width:100px !important; min-width:100px;
  }
  body .boutique-page .woocommerce-cart-form table.shop_table td.product-thumbnail img{
    display:block !important; width:86px !important; height:auto !important; max-width:none !important;
    visibility:visible !important; opacity:1 !important;
  }
}

/* Un nom de spectateur oublié : le champ s'entoure de rouge */
body .boutique-page .woocommerce-cart-form input.anm-nom-manquant{
  border-color:var(--rouge-clair) !important;
  box-shadow:0 0 0 2px rgba(255,70,80,.35) !important;
}
.anm-alerte-noms{margin-bottom:1.2em}

/* « Retour au panier » : texte sombre sur l'or, comme les autres boutons */
body .boutique-page a.button.wc-backward{color:var(--noir) !important}

/* Pendant l'envoi du panier, le bouton patiente et ne se laisse pas recliquer */
.checkout-button.anm-attente{opacity:.7; pointer-events:none; cursor:progress}

/* ==========================================================================
   LES PODCASTS
   ========================================================================== */
.podcasts{list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; gap:clamp(16px,2vw,24px)}
.podcast{
  display:grid; gap:clamp(14px,2vw,22px); align-items:start;
  grid-template-columns:clamp(88px,11vw,132px) 1fr;
  padding:clamp(14px,2vw,20px); border:1px solid var(--filet);
  background:linear-gradient(180deg,rgba(26,17,19,.85),rgba(10,7,8,.85));
}
.podcast__pochette img{width:100%; height:auto; display:block; border:1px solid var(--filet)}
.podcast__titre{font-size:clamp(1.05rem,2vw,1.35rem); color:var(--or-clair); margin:0}
.podcast__texte{margin:.5em 0 0; font-size:.94rem; color:var(--texte)}
.podcast__son{width:100%; margin-top:.9em; display:block; border-radius:3px}
.podcast__lien{display:inline-block; margin-top:.9em; color:var(--or-clair)}
.podcast:not(:has(.podcast__pochette)){grid-template-columns:1fr}
@media (max-width:640px){
  .podcast{grid-template-columns:1fr}
  .podcast__pochette img{max-width:150px}
}