/* ==========================================================================
   Microbrasserie du Taureau — feuille de style
   Palette et lettrage repris des étiquettes de canettes.
   ========================================================================== */

/* Animer un angle demande de le déclarer : sans cela, la transition sur
   --tour serait ignorée et le cadre paraîtrait d'un coup. */
@property --tour{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

:root{
  /* Couleurs de marque */
  --noir:        #17140F;   /* noir du médaillon */
  --noir-2:      #221D17;
  --creme:       #F5EFE2;   /* fond de page */
  --creme-2:     #EFE6D4;   /* crème des étiquettes */
  --cuivre:      #A9825C;   /* banderole */
  --or:          #D8B27B;   /* filet gravé */
  --encre:       #2A241C;   /* texte courant */
  --encre-doux:  #6B6053;
  --ligne:       #DED3BE;
  --pin:         #3A4438;   /* vert forêt sourd */
  --stout:       #0E0C09;   /* le fond le plus profond : la stout dans le verre */
  --fut:         #1C1813;   /* le chêne du fût, un cran plus clair que la stout */
  --mout:        #C98F3F;   /* l'ambré du moût : la couleur qui appelle l'action */
  --houblon:     #7A8B5A;   /* le vert du cône de houblon */
  --mousse:      #F3ECDD;   /* le blanc cassé du col de mousse */

  /* Typographie */
  --titre: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --texte: "Vollkorn", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Mesures */
  --largeur: 1200px;
  --marge: clamp(1.1rem, 4vw, 2.5rem);
  --rayon: 3px;
  /* Deux rayons, deux usages : --rayon pour les petits éléments (boutons,
     champs, puces), qui gardent l'angle vif de l'étiquette gravée, et
     --rayon-panneau pour les grandes surfaces, qui gagnent à s'arrondir. */
  --rayon-panneau: 18px;
  --ombre: 0 1px 2px rgba(23,20,15,.06), 0 8px 28px rgba(23,20,15,.08);
}

*,*::before,*::after{ box-sizing:border-box; }

/* --- Icônes ---------------------------------------------------------------
   Un seul dessin au trait par idée, posé par assets/js/icones.js. Toujours
   décoratives : le libellé texte reste à côté, jamais remplacé. */
.ic{ width:1.1em; height:1.1em; flex:0 0 auto; stroke-width:1.5; }
.ic--grand{ width:1.5em; height:1.5em; }

/* --- Barres de défilement -------------------------------------------------
   Le gris du système n'appartient à aucune des deux palettes du site. On le
   remplace par le cuivre de la banderole, sur une piste transparente : la
   barre se pose sur le fond du bloc au lieu de lui coller une bande grise. */
*{ scrollbar-width:thin; scrollbar-color:rgba(169,130,92,.55) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(169,130,92,.55);
  border:3px solid transparent; background-clip:padding-box; border-radius:100px;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--cuivre); background-clip:padding-box; }
*::-webkit-scrollbar-corner{ background:transparent; }

/* Plusieurs blocs sont masqués par l'attribut « hidden » alors qu'ils portent
   un display:grid ou display:flex — qui l'emporterait sur la règle du
   navigateur. On rétablit la priorité de « hidden ». */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--texte);
  font-size:clamp(1rem,.97rem + .18vw,1.08rem);
  line-height:1.65;
  overflow-x:hidden;
  /* Vollkorn utilise des chiffres elzéviriens par défaut : le 1 se confond
     alors avec un I. On force les chiffres alignés partout. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--titre);
  font-weight:700;
  line-height:.95;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2.6rem,8vw,5.6rem); }
h2{ font-size:clamp(2rem,4.6vw,3.4rem); }
h3{ font-size:clamp(1.35rem,2.2vw,1.7rem); }
h4{ font-size:1.1rem; }
h1 em, h2 em{ display:block; font-style:italic; font-family:var(--texte); font-weight:400; text-transform:none;
  font-size:.42em; line-height:1.2; letter-spacing:0; color:var(--or); margin-top:.5em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.enveloppe{ width:min(100% - (var(--marge) * 2), var(--largeur)); margin-inline:auto; }

.surtitre{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--encre-doux); margin:0 0 1rem;
}

/* --- Banderole : le ruban à encoches des étiquettes ---------------------- */
.banderole{
  display:inline-block; position:relative;
  background:var(--cuivre); color:var(--creme-2);
  font-family:var(--titre); font-size:clamp(.95rem,1.5vw,1.15rem);
  text-transform:uppercase; letter-spacing:.12em;
  padding:.42em 1.5em .38em; line-height:1.25;
  clip-path:polygon(0 0,100% 0,calc(100% - .9em) 50%,100% 100%,0 100%,.9em 50%);
  padding-inline:2.2em;
}
.banderole--sombre{ background:var(--or); color:var(--noir); }

/* --- Boutons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--titre); text-transform:uppercase; letter-spacing:.09em;
  font-size:1.02rem; line-height:1;
  padding:.95em 1.7em; border:1px solid var(--noir); border-radius:var(--rayon);
  background:var(--noir); color:var(--creme-2);
  text-decoration:none; cursor:pointer;
  /* Relief : une ombre portée qui pose le bouton sur la page, et un filet
     clair sur l'arête du haut — la lumière qui frappe un objet en saillie.
     Au survol il monte un peu et son ombre s'allonge, comme s'il se
     soulevait ; au clic il s'enfonce et l'ombre se resserre. */
  box-shadow:
    inset 0 1px 0 rgba(245,239,226,.14),
    0 3px 8px rgba(0,0,0,.28);
  transition:transform .18s ease, background-color .18s ease, color .18s ease,
             border-color .18s ease, box-shadow .18s ease;
}
.btn:hover{
  transform:translateY(-2px); background:var(--cuivre); border-color:var(--cuivre);
  box-shadow:
    inset 0 1px 0 rgba(245,239,226,.2),
    0 8px 18px rgba(0,0,0,.36);
}
.btn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.3),
    0 1px 3px rgba(0,0,0,.22);
}
/* Le bouton clair porte une ombre plus douce : sur fond crème, l'ombre franche
   des boutons sombres se lirait comme une salissure. */
.btn--clair{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 3px 8px rgba(23,20,15,.22);
}
.btn--clair:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 8px 18px rgba(23,20,15,.3);
}
@media (prefers-reduced-motion:reduce){
  .btn, .btn:hover, .btn:active{ transform:none; }
}
.btn--clair{ background:var(--or); border-color:var(--or); color:var(--noir); }
.btn--clair:hover{ background:var(--creme-2); border-color:var(--creme-2); color:var(--noir); }
.btn--fantome{ background:transparent; border-color:var(--noir); color:var(--noir); }
.btn--fantome:hover{ background:var(--noir); color:var(--creme-2); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--cuivre); outline-offset:3px;
}

/* --- En-tête ------------------------------------------------------------- */
.entete{
  position:sticky; top:0; z-index:60;
  background:rgba(23,20,15,.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(216,178,123,.22);
}
.entete__interieur{
  display:flex; align-items:center; gap:1.5rem;
  min-height:74px; padding-block:.55rem;
}
.marque{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--creme-2); flex:0 0 auto; }
.marque img{ width:46px; height:46px; object-fit:contain; }
.marque span{ display:flex; flex-direction:column; line-height:1.1; }
.marque b{ font-family:var(--titre); font-size:1.32rem; text-transform:uppercase; letter-spacing:.03em; }
.marque span span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--or); }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.nav a{
  font-family:var(--titre); text-transform:uppercase; letter-spacing:.08em;
  font-size:1.02rem; color:var(--creme-2); text-decoration:none;
  padding:.55em .85em; border-radius:var(--rayon); opacity:.82;
  transition:opacity .15s ease, background-color .15s ease;
}
.nav a:hover{ opacity:1; background:rgba(216,178,123,.12); }
.nav a[aria-current="page"]{ opacity:1; color:var(--or); }

/* Hors de la barre de navigation (le pied de page s'en sert aussi), la
   pastille garde sa mesure propre ; dans la barre, elle suit celle qu'elle
   partage avec « Espace client ». */
.pastille{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--creme-2); border:1px solid rgba(216,178,123,.35);
  padding:.4em .8em; border-radius:100px; white-space:nowrap;
}
.pastille::before{ content:""; width:7px; height:7px; border-radius:50%; background:#7FB069; }
.pastille[data-etat="ferme"]::before{ background:#C0705F; }

.entete__reseaux{ display:flex; align-items:center; gap:.4rem; margin-left:.5rem; }
/* Les icônes se tiennent à côté des deux pastilles : à 18px dans un rond de
   34px sans contour, elles paraissaient flotter et s'effacer. Même hauteur
   que les pastilles, même contour, icône un peu plus grande. */
/* .nav a impose son rayon de 3px aux liens de la barre : on vise donc
   .nav .entete__reseau, plus spécifique, sinon les ronds sortent carrés. */
.entete__reseau,
.nav .entete__reseau{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.15rem; height:2.15rem; padding:0; border-radius:50%;
  color:var(--creme-2); opacity:.9;
  border:1px solid rgba(216,178,123,.28);
  transition:opacity .15s ease, background-color .15s ease, border-color .15s ease;
}
/* flex:none — sans lui, le conteneur inline-flex comprime le SVG et l'icône
   sort écrasée (4px de large pour 19 de haut). */
.entete__reseau svg{ flex:none; width:19px; height:19px; }
.entete__reseau:hover{
  opacity:1; color:var(--or);
  border-color:var(--or); background:rgba(216,178,123,.12);
}

.burger{
  display:none; margin-left:auto;
  background:none; border:1px solid rgba(216,178,123,.35); border-radius:var(--rayon);
  color:var(--creme-2); font-family:var(--titre); text-transform:uppercase;
  letter-spacing:.1em; font-size:.95rem; padding:.6em 1em; cursor:pointer;
}
@media (max-width:940px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:74px 0 auto; flex-direction:column; align-items:stretch;
    background:var(--noir); padding:1rem var(--marge) 1.6rem; gap:0;
    border-bottom:1px solid rgba(216,178,123,.22);
    transform:translateY(-130%); transition:transform .25s ease; margin-left:0;
  }
  .nav[data-ouvert="true"]{ transform:translateY(0); }
  .nav a{ padding:.85em .2em; font-size:1.25rem; border-bottom:1px solid rgba(216,178,123,.12); }
  .nav .pastille{ margin-top:1rem; align-self:flex-start; }
}

/* --- Sections ------------------------------------------------------------ */
.section{ padding-block:clamp(3.2rem,7vw,6rem); }
.section--noir{ background:var(--noir); color:var(--creme-2); }
/* Le bloc « Nous trouver » respirait deux fois trop : la photo et le tableau
   d'heures sont courts, et l'air au-dessus comme au-dessous les détachait du
   reste de la page. Moitié moins, sans supprimer la respiration. La classe est
   propre à ce bloc — .section sert à tout le site. */
.section--nous-trouver{ padding-block:clamp(1.6rem,3.5vw,3rem); }
/* Heures, photo, promo. La photo se serre contre les heures pour dégager la
   colonne de droite, où tient un encart au format vertical. */
.nous-trouver{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  /* Les largeurs sont choisies pour que la photo (paysage, 1800x1501) et
     l'affiche (portrait, 934x1400) tombent d'elles-mêmes à la même hauteur :
     ni l'une ni l'autre n'est étirée, donc aucune n'est rognée. Forcer la
     photo à la hauteur de l'affiche la coupait de ses deux côtés. */
  .nous-trouver{ grid-template-columns:1fr 1.15fr .62fr; align-items:center; }
}
.nous-trouver__photo img{ border-radius:3px; width:100%; height:auto; display:block; }
/* Encart promo. L'affiche garde ses propres proportions : lui imposer un 9/16
   rognait les affiches d'un autre format — le titre de celle du moment y
   perdait ses deux bouts. Le cadre 9/16 ne sert plus que de gabarit quand il
   n'y a pas d'image à montrer. */
.promo-verticale{
  position:relative; overflow:hidden; border-radius:3px;
  background:var(--noir-2);
  border:1px solid rgba(216,178,123,.22);
  display:block;
}
/* Hauteur libre : l'affiche se montre en entier, à ses proportions. On ne
   rogne pas une promo pour l'ajuster à une case. */
.promo-verticale img,
.promo-verticale video{ width:100%; height:auto; display:block; }
/* Sans promo configurée, la colonne garde sa place : mieux vaut voir
   l'emplacement qu'une page qui se recompose selon ce qui est rempli. */
.promo-verticale--vide{
  aspect-ratio:9/16; height:auto;
  display:grid; place-items:center; text-align:center; padding:1rem;
  border-style:dashed; color:#8C8375;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
}
.section--noir h1,.section--noir h2,.section--noir h3{ color:var(--creme-2); }
.section--noir p{ color:#B8AC98; }
.section--pin{ background:var(--pin); color:#D6DCD2; }
.section--pin h2{ color:var(--creme-2); }

/* Section à fond vidéo. Le voile reste dense : le texte est centré au milieu
   de l'image et la vidéo a des zones claires. */
.section--video{ position:relative; isolation:isolate; background:var(--noir); color:#D6DCD2; }
.section--video h2{ color:var(--creme-2); }
.section__fond{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.section__fond video{ width:100%; height:100%; object-fit:cover; }
.section__fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,20,15,.84) 0%, rgba(23,20,15,.7) 50%, rgba(23,20,15,.88) 100%);
}

.entete-section{ margin-bottom:clamp(2rem,4vw,3rem); max-width:62ch; }
.entete-section p{ margin-top:1.1rem; }

.grille{ display:grid; gap:clamp(1.2rem,2.4vw,2rem); }
.grille--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.grille--3{ grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); }
.grille--4{ grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); }

/* --- Présentation du propriétaire (accueil) ------------------------------
   La photo occupe tout le bloc en arrière-plan, bord à bord comme le bloc
   restaurant ; le texte est superposé à droite sur un voile sombre pour
   rester lisible quelle que soit l'image. */
/* Hauteur réduite d'environ 5 % (16/6.3 → 16/6.0) : le bloc prenait plus de
   place qu'il n'en demandait, mais couper les 8 % prévus serrait le cadre de
   trop près sur la tête. Le plancher suit la même proportion. */
.proprio{ position:relative; display:grid; overflow:hidden; aspect-ratio:16/6; min-height:240px; }
.proprio__photo{ position:absolute; inset:0; }
/* Le cadrage descend sous le centre : un bloc court recadre autant en haut
   qu'en bas, et c'est en haut que l'air manque — au-dessus de la tête. */
.proprio__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; }
.proprio__texte{
  position:relative; z-index:1; max-width:60ch; justify-self:center; align-self:center;
  margin:2rem 2rem 2rem 50%; padding:1.6rem 1.8rem;
  /* Coins arrondis et relief : la boîte se pose sur la photo au lieu d'y être
     découpée. Le filet clair du haut joue la lumière rasante, l'ombre portée
     la décolle du fond. */
  border-radius:var(--rayon-panneau);
  background:linear-gradient(100deg, rgba(20,16,12,.35) 0%, rgba(20,16,12,.78) 45%, rgba(20,16,12,.78) 100%);
  box-shadow:
    inset 0 1px 0 rgba(245,239,226,.1),
    0 16px 38px rgba(0,0,0,.45);
  color:#fff;
  opacity:0; transform:translateX(64px); transition:opacity .7s ease, transform .7s ease;
}
.proprio__texte[data-vu="true"]{ opacity:1; transform:none; }
.proprio__texte h2{ margin:0; font-size:clamp(1.7rem,3.2vw,2.5rem); text-wrap:balance; }
.proprio__role{ color:var(--cuivre); font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-top:.4rem; }
.proprio__texte p:last-child{ margin-top:1.1rem; line-height:1.65; }

/* Cadre qui se dessine tout autour du bloc, une fois le glissement terminé.

   Il était fait de quatre traits droits collés aux bords, qui s'étiraient
   l'un après l'autre : leurs angles restaient vifs et contredisaient les
   coins arrondis de la boîte. C'est maintenant une bordure d'un seul tenant,
   arrondie comme elle, qui se révèle en tournant — le tracé se découvre dans
   le sens horaire à partir du coin haut-gauche.

   Le tracé : un rectangle arrondi en SVG, dessiné par stroke-dasharray. Le
   trait fait le tour du contour, coins compris, ce qu'aucun assemblage de
   quatre barres droites ne peut faire. */
.proprio__texte .proprio__cadre{
  position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; overflow:visible;
}
.proprio__texte .proprio__cadre i{ display:none; }
.proprio__texte .proprio__cadre::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  border:3px solid var(--cuivre);
  /* Le cadre se dévoile par un balayage conique : là où le masque est opaque,
     la bordure paraît. Un seul calque, donc aucune composition de masques —
     celle-ci n'est pas rendue de la même façon selon les navigateurs. */
  -webkit-mask:conic-gradient(from -45deg, #000 var(--tour, 0deg), transparent 0);
  mask:conic-gradient(from -45deg, #000 var(--tour, 0deg), transparent 0);
}
.proprio__texte[data-vu="true"] .proprio__cadre::before{
  --tour:360deg;
  transition:--tour 1.28s ease .55s;
}
@media (prefers-reduced-motion:reduce){
  .proprio__texte{ opacity:1; transform:none; transition:none; }
  .proprio__texte .proprio__cadre::before{ --tour:360deg; transition:none; }
}

/* --- Héros --------------------------------------------------------------- */
.heros{ position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end; background:var(--noir); }
.heros__fond{ position:absolute; inset:0; overflow:hidden; }
.heros__fond img, .heros__fond video{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.heros__fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,20,15,.72) 0%,rgba(23,20,15,.35) 38%,rgba(23,20,15,.88) 100%);
}
.heros__contenu{ position:relative; width:100%; padding-block:clamp(3rem,8vw,5.5rem); color:var(--creme-2); }
body[data-page="bieres"] .heros__contenu{ padding-block:clamp(2.2rem,5vw,3.4rem); }
.heros__contenu h1{ color:var(--creme-2); max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.4); }
.heros__accroche{ max-width:56ch; font-size:clamp(1.05rem,1.5vw,1.22rem); color:#E4DBC9; }
.heros__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }

/* Deux cornes en très pâle derrière le contenu du héros : le clin d'œil au
   taureau se sent sans se voir, et n'entre pas en concurrence avec le logo. */
.heros--marque .heros__contenu::before{
  content:""; position:absolute; inset:auto 0 6%; margin-inline:auto;
  width:min(78%,880px); height:min(30vh,260px); pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 100% at 0% 100%, rgba(216,178,123,.16), transparent 62%),
    radial-gradient(60% 100% at 100% 100%, rgba(216,178,123,.16), transparent 62%);
  mask-image:linear-gradient(180deg, transparent, #000 40%, transparent);
}

/* --- Héros « marque » : le logo au centre, sur la vidéo ------------------- */
/* Le logo est presque entièrement noir : sur le ciel clair du timelapse il
   disparaîtrait. Un voile plus dense au centre le décolle du fond, sans
   éteindre les couleurs chaudes du couchant sur les bords. */
.heros--marque{ align-items:center; min-height:min(92vh,880px); }
.heros--marque .heros__fond::after{
  background:
    radial-gradient(68% 58% at 50% 44%, rgba(9,7,5,.62) 0%, rgba(9,7,5,.34) 68%, rgba(9,7,5,.2) 100%),
    linear-gradient(180deg,rgba(23,20,15,.58) 0%,rgba(23,20,15,.3) 42%,rgba(23,20,15,.92) 100%);
}
.heros__pile{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(.7rem,1.6vw,1.1rem);
}
.heros__logo{
  width:min(66vw, clamp(170px,21vw,290px)); height:auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.6));
}
/* Le nom de la brasserie est déjà dans le logo : le titre sert de signature,
   pas de redite — on l'allège pour ne pas concurrencer la marque. */
.heros--marque .heros__contenu h1{
  max-width:22ch; margin:0;
  font-size:clamp(1.9rem,4.2vw,3.2rem);
}
.heros--marque .heros__accroche{ margin-inline:auto; }
.heros--marque .heros__actions{ justify-content:center; margin-top:.5rem; }
.heros--marque .surtitre{ color:var(--or); margin:0; }

/* Sur un écran peu haut (portable 13-14"), la pile complète repousse les
   boutons sous la ligne de flottaison : on resserre le logo et les espaces
   pour que l'appel à l'action reste visible sans défiler. */
@media (max-height:820px){
  .heros--marque .heros__contenu{ padding-block:clamp(1.4rem,3vw,2.2rem); }
  .heros__pile{ gap:clamp(.45rem,1.1vw,.8rem); }
  .heros__logo{ width:min(46vw, clamp(130px,15vw,200px)); }
  .heros--marque .heros__contenu h1{ font-size:clamp(1.6rem,3.2vw,2.5rem); }
  .heros--marque .heros__accroche{ font-size:clamp(.98rem,1.2vw,1.08rem); }
}

.heros__barre{ background:var(--noir-2); color:var(--creme-2); border-bottom:1px solid rgba(216,178,123,.18); }
.heros__barre .enveloppe{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem 2.6rem; align-items:center;
  padding-block:1rem; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.heros__barre b{ color:var(--or); font-weight:500; }

/* ==========================================================================
   Bande d'accueil — trois zones, une seule coulée
   Pas de cadres ni de gouttières : les zones se touchent d'un bord à l'autre
   de l'écran et ne se distinguent que par leur couleur. La pub (photo) et
   l'encart (vert forêt) occupent la colonne de gauche ; l'intro, la plus
   claire, garde la droite pour la lecture.
   ========================================================================== */
.section-bande{ padding:0; }
/* Du triptyque au duo-resto, la page reste sur le noir du héros : ce fond
   commun, avec un peu d'air (padding-block) entre les blocs, évite la bande
   claire qu'un simple margin-block sur fond de page --creme aurait exposée.
   Le bloc brasseurs, en dehors de cette enveloppe, referme sur son propre
   fond crème pour amorcer le reste, plus clair, de la page. */
/* Même filet doré translucide que sous le héros (.heros__barre), pour que
   toutes les jointures du haut de page se lisent comme une seule famille de
   séparateurs — un simple trait, pas un changement de fond. L'espacement
   entre les blocs reste resserré : c'est la ligne qui sépare, pas le vide. */
.accueil-bande-sombre{
  background:var(--noir-2);
  padding-block:.75rem;
  display:grid;
  gap:.75rem;
}
/* Plus de filet de 1px entre les bandes : il était deux fois plus fin et
   trois fois plus pâle que ceux du triptyque, si bien qu'il se lisait comme
   une rayure parasite plutôt que comme une séparation voulue. Les blocs se
   séparent par leur seul écart. */
.accueil-bande-sombre .section-bande + .section-bande{ padding-top:.75rem; }
.bande-trio{ display:grid; grid-template-columns:1fr; }

@media (min-width:900px){
  .bande-trio{
    grid-template-columns:.95fr 1.05fr;
    grid-template-areas:"pub intro" "vedette intro";
    /* C'est l'affiche qui commande la hauteur du bloc, et la colonne de
       gauche qui s'y ajuste — l'inverse de ce qui se faisait avant.

       Auparavant la rangée du bas était en « minmax(0,1fr) » : la colonne de
       gauche ne pouvait pas pousser, mais elle imposait quand même un
       plafond, et le flyer se retrouvait plus court que le format de son
       affiche. D'où la bande noire sous l'image et le rognage.

       En « auto auto », les deux rangées prennent la hauteur de leur
       contenu ; le flyer, lui, tient sa hauteur de son aspect-ratio et se
       trouve être le plus grand des deux — c'est donc lui qui étire la
       rangée, et la pub comme l'encart se répartissent la même hauteur. */
    grid-template-rows:auto auto;
    /* Les deux zones de gauche remplissent toute la hauteur du bloc : sans
       cela, l'encart s'arrêtait à la hauteur de son texte et laissait une
       bande noire vide sous lui, jusqu'au bas du flyer. */
    align-items:stretch;
  }
  .bande-trio__intro  { grid-area:intro; }
  .bande-trio__pub    { grid-area:pub; }
  .bande-trio__vedette{ grid-area:vedette; }
  /* Encart éteint : la pub couvre les deux rangées, mais reste calée en haut
     et garde son format bandeau. Étirée sur toute la colonne, elle serait
     rognée à quelques canettes. */
  .bande-trio[data-vedette="non"]{ grid-template-areas:"pub intro" "pub intro"; }
  .bande-trio[data-vedette="non"] .pub-gamme{ align-self:start; }
}

/* Zone de lecture, sur le même noir que le héros et le bandeau : le
   rembourrage reste généreux pour que le texte ne colle pas au bord de
   l'écran sur grand moniteur. */
.bande-trio__intro{
  background:var(--noir-2);
  color:var(--creme-2);
  padding:clamp(1.6rem,3.5vw,3rem);
}
.bande-trio__intro h1,.bande-trio__intro h2,.bande-trio__intro h3{ color:var(--creme-2); }
.bande-trio__intro p{ color:#B8AC98; }

/* Filet d'or à la jointure des zones, comme le trait gravé des étiquettes.
   Un cheveu d'un pixel s'y perdait : le trait est monté à 3px, assez franc
   pour se lire comme une séparation voulue. */
@media (min-width:900px){
  /* Le même filet partout où deux zones se touchent : celui qui sépare la
     colonne de gauche du flyer, et celui qui partage cette colonne en deux.
     Ils faisaient 3px à 55% contre 1px à 25% — quatre fois plus fin et deux
     fois plus pâle pour une jointure de même nature. */
  .bande-trio__intro{ border-left:3px solid rgba(216,178,123,.55); }
  /* Le filet qui sépare la pub de l'encart, et ceux qui ferment la colonne de
     gauche en haut et en bas : la zone est ainsi ceinturée comme le flyer,
     au lieu de se perdre dans le noir de la bande. */
  .bande-trio__vedette{
    border-top:3px solid rgba(216,178,123,.55);
    border-bottom:3px solid rgba(216,178,123,.55);
  }
  .bande-trio__pub{ border-top:3px solid rgba(216,178,123,.55); }
  /* Le filet encadre le FLYER, et non le triptyque entier : ceinturer tout le
     bloc traçait deux longues horizontales en travers de la page (une par
     bande), qui alourdissaient la mise en page sans rien découper d'utile.
     Les deux zones de gauche gardent leur découpe par les seules jointures
     intérieures — le filet vertical et celui qui les sépare. */
  /* Le flyer est ceinturé sur ses quatre côtés — il avait le filet de gauche
     (la jointure avec la colonne voisine), il lui manquait les trois autres.
     Le cadre se referme donc autour de l'affiche seule. */
  #carrousel-flyers{
    border:3px solid rgba(216,178,123,.55);
    box-sizing:border-box;
  }
}
@media (max-width:899px){
  .bande-trio > * + *{ border-top:1px solid rgba(216,178,123,.35); }
}

/* Bloc à une seule zone (ex. Bienvenue tout seul) : pas de colonne voisine,
   donc pas de grid-areas ni de filet gauche à hériter du triptyque. */
@media (min-width:900px){
  .bande-trio--simple{ grid-template-columns:1fr; grid-template-areas:none; }
  .bande-trio--simple .bande-trio__intro{ border-left:none; }
}

/* --- Le bloc 2 s'efface, la fenêtre promo balaie vers sa place -----------
   Le bloc 2 (Bienvenue) et le bloc 3 (triptyque) partagent le même espace,
   à la hauteur du bloc 3 (#bloc2-bloc3, le plus grand des deux). Le bloc 3
   (pub gamme, encart vedette, fenêtre promo) est dans le flux normal — c'est
   donc lui qui donne sa hauteur au bloc. Le bloc 2 recouvre initialement
   tout cet espace en superposition (#bloc2-recouvrement, position:absolute,
   plein cadre) et s'efface en fondu (--recouvrement, de 1 à 0) à mesure que
   la fenêtre promo balaie de la gauche vers sa position normale à droite
   (#carrousel-flyers, translateX de -100% à 0 — donc son propre format,
   pas agrandi) : une fois le fondu terminé, la pub gamme et l'encart
   vedette du bloc 3, déjà en place en dessous depuis le début, sont
   entièrement révélés.

   La progression est pilotée par la molette, prise en main à l'approche du
   bloc (voir animerBalayagePromo() dans site.js) : la page bute au centre
   de l'écran, s'y immobilise le temps du balayage, puis repart. Remonter
   rejoue tout à l'envers et fait réapparaître le bloc 2. */
/* L'effet ne s'active qu'à partir de 900px (le même seuil que la mise en
   page à trois zones, voir .bande-trio plus bas) : en dessous, le bloc 3
   empile ses trois zones et devient beaucoup plus haut que le bloc 2 — les
   superposer y mélangerait leurs textes en un fouillis illisible. Sous ce
   seuil, le bloc 2 reprend donc simplement sa place normale dans le flux,
   juste avant le bloc 3, sans balayage ni fondu (voir aussi
   animerBalayagePromo() dans site.js, qui ne s'exécute pas non plus dans ce
   cas). */
@media (min-width:900px){
  #bloc2-bloc3{ position:relative; }
  .bloc2-recouvrement{
    --recouvrement:1;
    position:absolute; inset:0; z-index:4;
    opacity:var(--recouvrement);
    background:var(--noir-2);
    /* Le fondu porte sur un calque plein cadre chargé de photos : sans
       cette promotion, chaque image du balayage repeint tout le sous-arbre
       au lieu de se contenter d'en changer l'opacité. */
    will-change:opacity;
  }
  /* La fenêtre promo doit rester au-dessus du recouvrement pour balayer
     visiblement par-dessus le bloc 2, et --entree pilote son entrée comme
     ailleurs sur le site. */
  #carrousel-flyers{
    --entree:-1;
    position:relative; z-index:5;
    /* 100vw (pas 100%) : le point de départ doit être hors de l'écran EN
       ENTIER, pas seulement à gauche de sa propre colonne — sur un écran
       large, un simple 100% de sa largeur à lui la laisserait encore
       partiellement visible dans le cadre. Un déplacement de sa propre
       largeur en vw est toujours plus grand que la distance qui le sépare
       du bord gauche de l'écran, donc toujours hors champ à --entree:-1. */
    transform:translateX(calc(var(--entree) * 100vw));
    will-change:transform;
  }
}
@media (max-width:899px){
  /* Le bloc 2 (Bienvenue) doit précéder le bloc 3 dans la page, mais il
     vient après lui dans le HTML (nécessaire pour que la fenêtre promo,
     entre les deux, puisse balayer par-dessus lui à partir de 900px) : ce
     display:flex + order remet le bloc 2 en premier visuellement, sans
     toucher au balisage. */
  #bloc2-bloc3{ display:flex; flex-direction:column; }
  .bloc2-recouvrement{ position:static; order:-1; }
}
@media (prefers-reduced-motion:reduce){
  .bloc2-recouvrement{ display:none; }
  #carrousel-flyers{ transform:none; }
}

/* --- Louer la salle --------------------------------------------------------
   Deux colonnes : ce que la salle offre à gauche, la demande à droite. Le
   formulaire est encadré comme un panneau — c'est lui l'action de la page. */
.location{
  display:grid; gap:clamp(1.8rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .location{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}
.location__points{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.location__points li{
  display:grid; gap:.15rem;
  padding-left:1.1rem; border-left:3px solid rgba(216,178,123,.5);
}
.location__points b{ font-family:var(--titre); font-size:1.02rem; letter-spacing:.02em; }
.location__points span{ color:var(--encre-doux); font-size:.94rem; line-height:1.55; }
.section--noir .location__points span{ color:#9C9280; }
.location__joindre{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--ligne); }
.location__joindre h3{ margin:0 0 .8rem; font-size:1.05rem; }
.location__liens{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0; }

.location__demande{
  border:3px solid rgba(216,178,123,.55);
  border-radius:var(--rayon-panneau);
  background:#FFFDF8;
  padding:clamp(1.3rem,3vw,2.1rem);
  box-shadow:0 16px 38px rgba(23,20,15,.14);
}
.location__demande h2{ margin:0 0 .4rem; }
.location__aide{ color:var(--encre-doux); margin:0 0 1.3rem; font-size:.94rem; }
.location__form{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.location__form .champ--large{ grid-column:1/-1; }
.location__form .btn{ grid-column:1/-1; justify-self:start; margin-top:.4rem; }
.location__form .champ > span{ color:var(--encre-doux); }
.location__form input, .location__form select, .location__form textarea{
  font:inherit; font-size:.96rem; padding:.6em .75em;
  border:1px solid var(--ligne); border-radius:var(--rayon);
  background:#fff; color:var(--encre); width:100%;
}
.location__form textarea{ resize:vertical; line-height:1.55; }
.location__form input:focus, .location__form select:focus, .location__form textarea:focus{
  border-color:var(--cuivre); outline:none;
}
.location__erreur{
  grid-column:1/-1; margin:0; color:#A6402E; font-size:.9rem;
}

/* --- Offres d'emploi -------------------------------------------------------
   Une carte par ouverture, dans le même langage que les panneaux du site :
   filet doré et coins arrondis. */
.emplois{ display:grid; gap:1.1rem; }
.emploi{
  border:1px solid rgba(216,178,123,.28);
  border-radius:var(--rayon-panneau);
  background:#FFFDF8;
  padding:clamp(1.2rem,2.4vw,1.8rem);
}
.section--noir .emploi{ background:var(--noir-2); border-color:rgba(216,178,123,.32); }
.emploi__tete{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:baseline;
  justify-content:space-between; margin-bottom:.6rem;
}
.emploi__tete h3{ margin:0; font-size:clamp(1.15rem,2.2vw,1.45rem); }
.emploi__type{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cuivre);
  background:rgba(216,178,123,.16); padding:.35em .8em; border-radius:100px;
  white-space:nowrap;
}
.emploi__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0 0 .7rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.04em;
  color:var(--encre-doux);
}
.section--noir .emploi__meta{ color:#9C9280; }
.emploi__texte{ margin:0; line-height:1.65; max-width:70ch; }
.emplois__vide{
  border:1px dashed rgba(216,178,123,.35); border-radius:var(--rayon-panneau);
  padding:clamp(1.4rem,3vw,2.2rem); margin:0;
  color:var(--encre-doux); max-width:66ch;
}
/* Le bloc « Comment postuler » ferme la page : on ne laisse jamais quelqu'un
   devant une liste sans lui dire quoi faire ensuite. */
.emploi-joindre{
  margin-top:2.2rem; padding-top:1.8rem;
  border-top:3px solid rgba(216,178,123,.55);
}
.emploi-joindre h3{ margin:0 0 .6rem; }
.emploi-joindre p{ margin:0 0 .9rem; max-width:60ch; }
.emploi-joindre__liens{ display:flex; flex-wrap:wrap; gap:.7rem; }
.emploi-joindre__adresse{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.04em;
  color:var(--encre-doux);
}

/* Une ligne de fermeture dans le portail : la date, sa raison, et de quoi la
   retirer. */
.ferie{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  padding:.5rem 0; border-bottom:1px solid rgba(216,178,123,.12);
}
.ferie:last-child{ border-bottom:0; }
.ferie__date{ flex:0 0 165px; }
.ferie__note{ flex:1 1 200px; min-width:0; }
.ferie input{
  font:inherit; font-size:.92rem; padding:.45em .6em; border-radius:var(--rayon);
  border:1px solid rgba(216,178,123,.28); background:var(--stout); color:var(--creme-2);
}
.ferie input:focus{ border-color:var(--mout); outline:none; }

/* --- Fermetures annoncées sous l'horaire ---------------------------------
   Une courte liste de dates, discrète : elle complète l'horaire sans lui
   voler la vedette. Elle ne paraît que s'il y a quelque chose à annoncer
   dans les deux mois qui viennent (voir monterFeries dans site.js). */
.feries{
  /* Resserré : la liste vient juste sous l'horaire, et le bouton juste sous
     elle. Les marges généreuses d'origine ouvraient un vide entre les trois,
     et le bas du bloc paraissait à moitié rempli. */
  margin-top:.9rem; padding-top:.8rem;
  border-top:1px solid rgba(216,178,123,.22);
  display:grid; gap:.25rem; max-width:420px;
}
.feries__titre{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--or); margin:0 0 .2rem;
}
.feries__ligne{
  display:flex; gap:.7rem; align-items:baseline;
  margin:0; font-size:.9rem; color:#B8AC98;
}
.feries__date{ color:var(--creme-2); white-space:nowrap; }
.feries__note{ color:#B8AC98; }

/* --- Séparateurs de chapitre --------------------------------------------
   Un trait doré qui traverse la page, son motif au centre : la pinte avant le
   comptoir, le taureau avant la présentation du brasseur, la guitare avant
   « À l'affiche ». Ils donnent à l'accueil un rythme de chapitres, au lieu
   d'un empilement de sections qui se touchent.

   L'image est détourée (fond transparent) : elle se pose donc aussi bien sur
   le noir de la bande sombre que sur la crème du bloc des brasseurs. */
.separateur{
  display:flex; justify-content:center; align-items:center;
  /* Aucun rembourrage : le séparateur EST la respiration entre deux blocs.
     Lui ajouter de l'air au-dessus et en dessous creusait une bande vide, et
     le motif se retrouvait à flotter au lieu de faire la jointure. */
  padding:0;
  pointer-events:none;
  /* Toujours sur le fond sombre du site : une bande crème derrière le motif
     cassait la continuité des teintes d'un bloc à l'autre. */
  background:var(--noir-2);
}
.separateur img{
  display:block; height:auto;
  /* Les trois fichiers sont normalisés à la source : même largeur de filets,
     même marge autour du motif. C'est donc la LARGEUR qu'on règle ici, et une
     seule valeur suffit — les trois pèsent alors pareil dans la page, quelle
     que soit la forme du dessin. Régler la hauteur donnait au contraire une
     guitare minuscule et un taureau démesuré, puisque leurs proportions
     diffèrent.

     Aucun rembourrage : c'est le dessin lui-même qui occupe la bande, et lui
     seul qui fait la respiration entre deux blocs. */
  width:clamp(76px, 6.5vw, 103px); height:auto; max-width:40vw;
  /* Le trait est fin : à pleine opacité il tirait l'œil plus que les blocs
     qu'il sépare. */
  opacity:.85;
}
@media (max-width:700px){
  .separateur img{ width:min(76px, 34vw); }
}

/* Le fond d'un séparateur est celui du bloc qu'il annonce : la jointure
   disparaît alors complètement, au lieu de se voir comme une bande d'une
   autre teinte posée entre deux sections. Sans cette classe, il porte le brun
   de la bande sombre (--noir-2), qui est le fond des blocs du haut. */
.separateur--sombre{ background:var(--noir); }


/* --- Zone : carrousel de flyers vedette ---------------------------------- */
/* La fenêtre prend le ratio du flyer lui-même (proche de 5:4, le format le
   plus courant pour ces affiches) : « cover » remplit alors le cadre sans
   quasiment rien recadrer, et sans bandes noires sur les côtés. */
#carrousel-flyers.bande-trio__intro{ padding:0; background:var(--noir); }
/* La banderole est à cheval sur le bord supérieur du flyer : moitié sur
   l'affiche, moitié au-dessus, et son extrémité gauche déborde sur la colonne
   voisine. Posée à l'intérieur, elle couvrait le haut des affiches — donc de
   l'information : le titre du spectacle, la date. À cheval sur l'arête, elle
   annonce le bloc sans rien cacher, et le débordement l'accroche au triptyque
   entier plutôt qu'au seul flyer. */
.carrousel-flyers__titre{
  position:absolute; z-index:6; margin:0;
  /* -50% de sa propre hauteur : exactement à cheval sur l'arête. */
  top:0; transform:translateY(-50%);
  /* Négatif : elle sort du flyer et mord sur la colonne de gauche. */
  left:clamp(-3.5rem,-2.4vw,-1.6rem);
  pointer-events:none;
}
/* Sous 900px les zones s'empilent : le flyer occupe alors toute la largeur et
   il n'y a plus de colonne voisine sur laquelle mordre — un débordement à
   gauche sortirait de l'écran. La banderole rentre donc dans le cadre, tout
   en restant à cheval sur l'arête du haut. */
@media (max-width:899px){
  .carrousel-flyers__titre{ left:clamp(.8rem,3vw,1.4rem); }
}
/* Le cadre du flyer rogne ce qui le dépasse (overflow:hidden, pour que les
   affiches ne bavent pas) : la banderole vit donc en sœur de .flyer, dans la
   colonne, et non dedans (voir monterCarrouselFlyers dans site.js). */
#carrousel-flyers{ position:relative; overflow:visible; }
/* La moitié de la banderole qui dépasse doit avoir où se poser : sans cette
   réserve, elle passait sous le bandeau des heures juste au-dessus. */
@media (min-width:900px){
  #bloc2-bloc3{ padding-top:1.4rem; }
}
/* Le flyer occupe toute la colonne de droite : c'est lui qui dicte la hauteur
   du bloc entier. Son cadre a été aplati de 5/4 à 25/16 (-20% de hauteur pour
   une même largeur) parce que le bloc dépassait du haut et du bas de l'écran
   sur un moniteur peu haut, et qu'on ne pouvait donc pas le lire d'un coup
   d'œil. Les affiches sont recadrées un peu plus serré en hauteur ; c'est le
   prix de cette compression. */
.flyer{
  position:relative; overflow:hidden;
  aspect-ratio:25/16; height:auto; min-height:clamp(160px,17.6vw,240px);
}
/* Sur les écrans moyens, la colonne de gauche (pub + encart) reste plus haute
   que le flyer : son texte ne peut pas se comprimer davantage. Le flyer
   s'étire alors pour combler, plutôt que de laisser une bande noire sous
   l'affiche. Il y gagne en hauteur — c'est exactement ce qu'on cherche — au
   prix d'un cadre un peu plus haut que 25/16 sur ces largeurs-là. */
@media (min-width:900px){
  #carrousel-flyers{ display:flex; }
  #carrousel-flyers .flyer{ flex:1 1 auto; }
}
.flyer::before{
  content:""; position:absolute; z-index:2; inset:0 0 auto 0; height:32%;
  background:linear-gradient(to bottom, rgba(12,9,7,.72), rgba(12,9,7,0));
  pointer-events:none;
}
.flyer__scene{
  position:absolute; inset:0; opacity:0;
  transition:opacity .7s ease; pointer-events:none;
}
.flyer__scene[data-actif="true"]{ opacity:1; pointer-events:auto; }

/* --- Le reflet qui balaie l'affiche pendant sa glissée --------------------
   Une bande de lumière oblique, comme le reflet d'un néon sur du papier
   glacé quand on incline une affiche. Elle traverse le cadre à mesure que
   celui-ci entre en scène : sa position est pilotée par --entree, la même
   variable qui commande la glissée, donc le reflet suit exactement le geste
   au lieu de se jouer sur une durée à lui.

   --entree va de -1 (hors champ) à 0 (en place) : le reflet part donc de la
   gauche pour sortir par la droite juste avant l'arrêt. */
#carrousel-flyers .flyer::after{
  content:""; position:absolute; inset:0; z-index:4;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,.06) 45%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.06) 55%,
    transparent 62%);
  /* Parallaxe : le reflet glisse à CONTRESENS de l'affiche. Celle-ci entre
     par la gauche (--entree de -1 à 0) ; le reflet, lui, part de la droite et
     file vers la gauche. Les deux mouvements opposés donnent l'impression que
     la lumière vient d'ailleurs — qu'elle appartient à la pièce et non à
     l'affiche — et c'est exactement ce qui fait lire l'effet comme un reflet
     plutôt que comme une texture collée dessus.

     Le signe est inversé par rapport à la glissée : quand --entree croît de
     -1 vers 0, cette valeur décroît. */
  transform:translateX(calc(var(--entree, 0) * 220% + 110%));
  /* Fondu d'entrée puis de sortie : le reflet naît au début de la course,
     atteint sa pleine intensité au milieu, et s'éteint avant l'arrêt. Une
     apparition franche aurait trahi un calque ; le fondu la fait passer pour
     une lumière qui balaie. La courbe est un triangle : 0 aux deux bouts,
     1 au milieu — d'où la valeur absolue autour de -0,5. */
  opacity:calc((0.5 - abs(var(--entree, 0) + 0.5)) * 2.2);
}
/* Une fois l'affiche posée (--entree à 0), plus de reflet : il n'a de sens
   que pendant le mouvement. Et rien du tout si l'on demande moins d'animation. */
@media (prefers-reduced-motion:reduce){
  #carrousel-flyers .flyer::after{ display:none; }
}
/* Une affiche qui mène quelque part le dit : le curseur change, et le clavier
   peut l'atteindre (role="link" + tabindex, voir site.js). */
.flyer__scene[data-flyer-evenement],
.flyer__scene[data-flyer-lien]{ cursor:pointer; }
.flyer__scene[data-flyer-evenement]:focus-visible,
.flyer__scene[data-flyer-lien]:focus-visible{
  outline:3px solid var(--or); outline-offset:-6px;
}
.flyer__scene img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
/* Un flyer carré (ex. la promo de location) rogné en « cover » dans le cadre
   5:4 perd le quart de sa hauteur : trop zoomé, il coupe des éléments
   composés pour tenir dans un carré. « contain » montre le visuel en entier,
   quitte à laisser une bande du fond du bloc de part et d'autre. */
.flyer__scene[data-ajustement="contenu"] img{ object-fit:contain; }
/* Une seule cellule qui couvre toute la scène : rangee/colonne positionnent
   le bouton dans ce cadre complet, pas dans une case d'une grille 3×3
   (sinon le bouton ne pourrait jamais atteindre le bas ou la droite). */
.flyer__grille{
  position:absolute; inset:0; z-index:3;
  padding:clamp(1rem,2.5vw,1.8rem);
  /* La grille couvre toute la scene : sans « pointer-events:none » elle
     intercepterait les clics destines a l'affiche et aux fleches. Seul le
     bouton de billetterie redevient cliquable. */
  pointer-events:none;
}
.flyer__grille .btn{ pointer-events:auto; }
.flyer__cellule{ display:flex; width:100%; height:100%; }
.flyer__cellule[data-rangee="haut"]{ align-items:flex-start; }
.flyer__cellule[data-rangee="milieu"]{ align-items:center; }
.flyer__cellule[data-rangee="bas"]{ align-items:flex-end; }
.flyer__cellule[data-colonne="gauche"]{ justify-content:flex-start; }
.flyer__cellule[data-colonne="centre"]{ justify-content:center; }
.flyer__cellule[data-colonne="droite"]{ justify-content:flex-end; }
.flyer__btn{ box-shadow:0 4px 18px rgba(12,9,7,.45); }
@media (prefers-reduced-motion:reduce){
  .flyer__scene{ transition:none; }
}

/* --- Zone : la pub de la gamme ------------------------------------------ */
/* Ratio proche de celui de la photo (2,36:1) : la rangée complète des onze
   canettes reste visible. Dans une zone haute, « cover » n'en montrait que
   trois ou quatre — ce qui rate le but d'une pub de toute la gamme. */
.pub-gamme{
  position:relative; display:block; overflow:hidden;
  text-decoration:none; color:var(--creme-2);
  /* Aplatie de 2,2:1 à 2,75:1 (-20% de hauteur) en même temps que le flyer,
     pour que la colonne de gauche se compresse d'autant et laisse à l'encart
     vedette une part comparable à avant. Plus panoramique, elle continue de
     montrer la rangée complète des onze canettes. */
  aspect-ratio:2.75/1; min-height:clamp(136px,13.6vw,184px);
}
.pub-gamme img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  transition:transform .6s ease;
}
/* Le texte se pose en haut, sur le plafond et les luminaires : c'est la seule
   zone vide de la photo. En bas, il masquait les canettes — donc le produit
   même que la pub doit montrer. */
.pub-gamme__voile{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,9,7,.9) 0%, rgba(12,9,7,.55) 42%, rgba(12,9,7,.1) 72%);
}
.pub-gamme__texte{
  position:relative; display:flex; flex-direction:column; gap:.25rem;
  height:100%; justify-content:flex-start;
  padding:clamp(1.2rem,2.4vw,1.9rem) clamp(1.6rem,3.5vw,3rem);
}
.pub-gamme__surtitre{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--or);
}
.pub-gamme__titre{
  font-family:var(--titre); text-transform:uppercase; font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1; color:var(--creme-2);
}
.pub-gamme .fleche{ margin-top:.3rem; }
.pub-gamme:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){
  .pub-gamme img, .pub-gamme:hover img{ transition:none; transform:none; }
}

/* --- Zone : l'encart en vedette ----------------------------------------- */
/* Vert forêt : une couleur franche donne du poids à l'encart même avec peu
   de texte — c'était le point faible de la version en cartes. */
.bande-trio__vedette{
  position:relative; display:flex; overflow:hidden;
  background:var(--pin); color:var(--creme-2);
}
/* Fines rayures diagonales, à peine perceptibles : l'aplat respire au lieu
   d'être une surface morte. */
.bande-trio__vedette::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(245,239,226,.05) 0 2px, transparent 2px 9px);
}
/* Le houblon de la marque en filigrane, débordant du coin : la zone verte
   hérite de la hauteur de la colonne d'intro et se retrouve vaste avec peu
   de texte. Plutôt qu'un aplat vide, un motif l'habite — et il s'efface de
   lui-même dès qu'une vraie affiche est déposée dans l'encart. */
.bande-trio__vedette::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-8%; bottom:-14%; width:min(78%, 340px); aspect-ratio:1;
  background:url("../../images/logo-taureau.webp") no-repeat center/contain;
  opacity:.07;
}
.bande-trio__vedette[data-avec-image="oui"]::before,
.bande-trio__vedette[data-avec-image="oui"]::after{ content:none; }
.vedette__fond{ position:absolute; inset:0; }
.vedette__fond img{ width:100%; height:100%; object-fit:cover; }
.vedette__fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,9,7,.5) 0%, rgba(12,9,7,.82) 100%);
}
.vedette__corps{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.5rem; width:100%;
  /* Rembourrage vertical allégé par rapport à l'horizontal : la case a
     perdu de la hauteur en même temps que le bloc, et le texte s'y faisait
     rogner. L'horizontal garde la valeur des zones voisines pour que les
     textes restent alignés d'une zone à l'autre. */
  padding:clamp(1.1rem,2.2vw,1.9rem) clamp(1.6rem,3.5vw,3rem);
  /* L'encart hérite de la hauteur restante de la colonne : on centre plutôt
     que de laisser le texte flotter en haut d'une grande case vide. */
  justify-content:center;
}
.vedette__etiquette{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--or);
}
.bande-trio__vedette h3{
  margin:0; color:var(--creme-2);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
}
.bande-trio__vedette p{ color:#D6DCD2; margin:0; }
.vedette__date{ font-family:var(--mono); font-size:.8rem; color:var(--or); }
/* Pas de margin-top:auto ici : il collerait le bouton en bas et creuserait
   un trou au milieu de l'encart, qui est déjà centré verticalement. */
.vedette__btn{ align-self:flex-start; margin-top:.7rem; }

/* --- Bienvenue ----------------------------------------------------------- */
/* Photos à gauche, texte à droite dès qu'il y a la place ; en pile, une
   colonne en dessous de l'autre, photos en premier comme en lecture. */
.bienvenue{ display:flex; flex-direction:column; gap:clamp(1.2rem,2.4vw,1.8rem); }
.bienvenue__photos{ flex:1 1 0; min-width:0; }
.bienvenue__texte{ flex:1 1 0; min-width:0; }
@media (min-width:700px){
  .bienvenue{ flex-direction:row; align-items:center; }
}
/* La fenêtre est plus étroite qu'avant : le titre pleine taille se cassait
   en deux lignes avec un « ! » esseulé. */
.bienvenue__texte h2{ font-size:clamp(1.5rem,2.4vw,2rem); text-wrap:balance; }
.bienvenue__texte p{ font-size:clamp(1rem,1.25vw,1.09rem); }
.bienvenue__accroche{ font-size:clamp(1.1rem,1.6vw,1.28rem) !important; line-height:1.45; color:var(--noir); }

/* --- Carrousel de la fenêtre d'intro ------------------------------------- */
/* Le ratio est fixé sur la scène : sans lui, deux photos de proportions
   différentes feraient sauter la hauteur du bloc à chaque diapositive. */
.carrousel__scene{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--rayon); background:var(--noir);
}
.carrousel__vue{
  position:absolute; inset:0; opacity:0;
  transition:opacity .7s ease; pointer-events:none;
}
.carrousel__vue[data-actif="true"]{ opacity:1; pointer-events:auto; }
.carrousel__vue img{ width:100%; height:100%; object-fit:cover; }
.carrousel__legende{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-doux); margin:.8rem 0 0;
}
.carrousel__fleche{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(245,239,226,.45); background:rgba(15,12,9,.55); color:var(--creme-2);
  font-size:1.5rem; line-height:1; display:grid; place-items:center;
  transition:background .16s ease, border-color .16s ease;
}
.carrousel__fleche:hover{ background:rgba(15,12,9,.8); border-color:var(--or); }
.carrousel__fleche--prec{ left:.7rem; }
.carrousel__fleche--suiv{ right:.7rem; }
.carrousel__points{
  position:absolute; left:0; right:0; bottom:.8rem; z-index:2;
  display:flex; justify-content:center; gap:.4rem;
}
.carrousel__point{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(245,239,226,.7); background:transparent;
  transition:background .16s ease;
}
.carrousel__point[aria-current="true"]{ background:var(--or); border-color:var(--or); }
.carrousel__fleche:focus-visible, .carrousel__point:focus-visible{
  outline:2px solid var(--or); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .carrousel__vue{ transition:none; }
}
/* --- Le bloc restaurant de l'accueil, en deux colonnes -------------------
   La photo occupe la gauche ; la carte, sur le même noir que le reste de ce
   haut de page (voir .accueil-bande-sombre), occupe la droite. Les styles de
   .plat y sont réassortis comme sur .section--noir : texte et bordures
   dorées plutôt que sombres sur clair. */
/* Le filet du bas ferme le bloc, dans le même gabarit que ceux du triptyque
   (3px, doré à .55) : la bande du haut de page se lit alors comme une suite
   de zones franchement découpées, du flyer jusqu'à la carte. */
.duo-resto{
  display:grid; grid-template-columns:1fr;
  border-bottom:3px solid rgba(216,178,123,.55);
}
/* La photo cède un peu de largeur à la carte, qui porte plus de texte. */
@media (min-width:900px){ .duo-resto{ grid-template-columns:.9fr 1.1fr; } }

/* Bloc raccourci en deux temps. Sa hauteur ne vient pas de ce plancher mais
   de la pile de droite : la carte ne montre plus que 2 plats vedette et 2
   rendez-vous (voir monterDuoResto dans site.js), et les espacements des deux
   colonnes sont resserrés. Le plancher suit (190-260px → 150-205px). */
.duo-resto__promo{
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(150px,19vw,205px);
  background-color:var(--noir); overflow:hidden;
}
.duo-resto__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Le voile est un vrai élément posé par-dessus la photo : un pseudo-élément en
   z-index négatif se serait glissé derrière le fond de son propre parent. */
.duo-resto__voile{
  position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(14,12,9,.2) 0%,rgba(14,12,9,.72) 52%,rgba(14,12,9,.94) 100%);
}
.duo-resto__texte{ position:relative; padding:clamp(.85rem,1.7vw,1.25rem); color:var(--creme-2); }
.duo-resto__texte h2{ color:var(--creme-2); margin:.5rem 0 .4rem; font-size:clamp(1.4rem,2.6vw,2.1rem); }
.duo-resto__texte p{ color:#C6BAA6; max-width:44ch; font-size:.92rem; }
.duo-resto__texte .btn{ margin-top:.4rem; }

.duo-resto__droite{
  background:var(--noir-2); color:var(--creme-2); padding:clamp(.85rem,1.7vw,1.25rem);
  display:flex; flex-direction:column; gap:clamp(.55rem,1.1vw,.85rem);
  /* Coin coupé en haut à gauche : le bloc s'emboîte dans la photo comme un
     coin d'étiquette relevé, au lieu de deux rectangles posés côte à côte. */
  clip-path:polygon(0 22px, 22px 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width:899px){ .duo-resto__droite{ clip-path:none; } }
.duo-resto__droite .surtitre{ color:var(--or); }
/* Deux colonnes de plats : la carte tient plus d'entrees sans que le bloc
   s'allonge. En dessous de 1100px la colonne devient trop etroite pour deux
   noms de plats et leur prix — on repasse a une seule. */
.duo-resto__carte .menu-liste{ grid-template-columns:1fr; gap:.5rem .9rem; }
@media (min-width:1100px){
  .duo-resto__carte .menu-liste{ grid-template-columns:1fr 1fr; }
}
/* .plat déborde de 1rem de chaque côté (margin:0 -1rem) pour que le fond du
   survol morde dans la marge — ce qui suppose une colonne unique. Ici la carte
   est sur deux colonnes : ce débordement faisait empiéter chaque plat, et son
   encadré de survol, sur la colonne voisine. On le supprime et on rend le
   rembourrage à l'intérieur de la case. */
.duo-resto__carte .plat{
  margin:0; padding:.5rem .6rem .4rem;
  border-bottom-color:rgba(216,178,123,.15);
}
/* L'outline du survol se pose à 3px du bord : sans marge de manœuvre, il
   chevauchait la colonne d'à côté. Un contour intérieur reste dans la case. */
.duo-resto__carte .plat--survole{ outline-offset:-1px; }
.duo-resto__carte .plat:hover{ background:rgba(216,178,123,.08); }
.duo-resto__carte .plat__nom{ font-size:.96rem; }
.duo-resto__carte .plat__points{ border-bottom-color:rgba(216,178,123,.3); }
.duo-resto__carte .plat__prix{ color:var(--or); background:rgba(216,178,123,.1); }
/* Pas de description dans cet apercu : six plats decrits rallongeaient le
   bloc autant que la pile de deux qu'on venait de raccourcir. Le nom et le
   prix suffisent a donner envie — le detail est sur la page du menu. */
.duo-resto__carte .plat__desc{ display:none; }
.duo-resto__deals ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem .9rem; }
@media (min-width:1100px){
  .duo-resto__deals ul{ grid-template-columns:1fr 1fr; }
}
.duo-resto__deals li{ display:flex; gap:.9rem; align-items:baseline; }
.duo-resto__jour{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--creme-2); background:var(--pin); padding:.3em .65em; border-radius:100px;
  flex:0 0 auto; min-width:7.5em; text-align:center;
}
.duo-resto__deal{ display:flex; flex-direction:column; line-height:1.3; }
.duo-resto__deal b{ font-family:var(--titre); text-transform:uppercase; letter-spacing:.03em; font-size:.98rem; }
.duo-resto__deal span{ font-size:.86rem; color:#B8AC98; }
.duo-resto__pied{ margin:auto 0 0; }
.duo-resto__pied .btn--fantome{ border-color:var(--creme-2); color:var(--creme-2); }
.duo-resto__pied .btn--fantome:hover{ background:var(--creme-2); color:var(--noir); }

/* --- Rappel de la gamme sur l'accueil ------------------------------------
   Toute la gamme alignee, comme des canettes glissees sur une longue table.
   Pas de texte : la canette elle-meme est le lien vers sa biere.

   Le fond reste noir tant que la photo de table n'est pas fournie. Pour
   l'installer : deposer le fichier dans site/images/ puis renseigner
   --table-fond ci-dessous (ex. url("images/table.jpg")) — le reste (cadrage,
   voile de lisibilite) est deja en place. */
.rappel-gamme{
  --table-fond:url("../../images/counter-top.jpg");
  position:relative; background:var(--noir);
  background-image:var(--table-fond);
  background-size:cover; background-position:center 48%; background-repeat:no-repeat;
  /* Le survol fait sortir l'apercu du bloc, en haut ou en bas selon la place :
     on ne peut pas rogner en vertical. « clip » en horizontal suffit a retenir
     les canettes pendant leur entree par la gauche. */
  overflow-x:clip; overflow-y:visible;
  /* Bloc agrandi pour degager davantage le dessus du comptoir sous les
     canettes, elles-memes grossies (voir .rappel-gamme__decoupe) : les
     canettes doivent sembler posees sur le bois, pas flotter devant. */
  padding-block:clamp(2.4rem,5.5vw,4.1rem);
}
/* Voile sombre : garde les canettes lisibles si la photo de table est claire.
   Sans image de fond, il ne se voit pas sur le noir. */
.rappel-gamme::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(12,9,7,.55), rgba(12,9,7,.15));
}
.rappel-gamme__interieur{ position:relative; z-index:1; }
/* « space-between » donne l'ecart egal demande entre les onze canettes ; le
   gap n'est qu'un minimum de securite sur les largeurs serrees. */
.rappel-gamme__canettes{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(.25rem,.9vw,.7rem);
}
.rappel-gamme__canette{
  position:relative; display:block; flex:0 1 auto; line-height:0;
  /* Point de depart de l'entree : hors cadre a gauche. */
  transform:translateX(calc(-100vw - 100%)); opacity:0;
  /* Glissee plus posee (1,15 s) et decalage resserre (55 ms) : les canettes
     arrivent davantage ensemble, tout en gardant l'ordre gauche-droite.
     C'est le TEMPO de l'entrée, à ne pas confondre avec le moment où elle se
     déclenche : ce dernier se règle dans animerRappelGamme (site.js). */
  transition:transform 1.15s cubic-bezier(.17,.78,.32,1), opacity .35s ease;
  transition-delay:calc(var(--rang, 0) * 55ms);
}
.rappel-gamme.est-entre .rappel-gamme__canette{ transform:none; opacity:1; }
/* Toutes les canettes remplissent la hauteur de leur fichier, mais pas la
   largeur : trois d'entre elles (Matawin, Chute a Menard, St-Maurice) sont
   dans un cadre carre, les huit autres dans un cadre 2:3. A hauteur egale,
   leurs BOITES faisaient donc 108 px contre 72 px, et cette marge
   transparente en trop se lisait comme un ecart inegal entre les canettes.

   On garde la hauteur commune (les canettes gardent leur taille et leurs
   proportions reelles) et on rogne la marge laterale au ratio propre a chaque
   cadre, pose par --cadre : la boite epouse alors la canette, et le gap
   devient le seul ecart visible — donc identique partout. */
.rappel-gamme__decoupe{
  height:clamp(90px,11vw,211px);
  /* --cadre = largeur/hauteur du cadre du fichier, mesure au chargement par
     site.js. Tant qu'il n'est pas connu, le ratio 2:3 du plus grand nombre de
     fichiers sert de valeur d'attente. */
  width:calc(clamp(90px,11vw,211px) * var(--cadre, .667));
  display:block; object-fit:cover; object-position:center;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
  transition:transform .25s ease;
}
.rappel-gamme.est-pose .rappel-gamme__canette:hover .rappel-gamme__decoupe,
.rappel-gamme.est-pose .rappel-gamme__canette:focus-visible .rappel-gamme__decoupe{ transform:translateY(-6px); }

/* L'apercu : la photo de la biere sur son baril de chene. Il se place du cote
   ou il y a de la place a l'ecran — au-dessus de la canette quand le bloc est
   bas dans la fenetre, en dessous quand il est haut. Fixe au-dessus, il
   sortait de l'ecran et passait derriere la barre de navigation des que la
   rangee approchait du haut : on n'en voyait que le bas. Le cote est choisi
   au survol par site.js, qui pose data-cote sur la canette. */
.rappel-gamme__apercu{
  position:absolute; z-index:5; bottom:100%; left:50%; transform:translateX(-50%);
  width:clamp(150px,17vw,205px); margin-bottom:.7rem;
  background:var(--noir-2); border:1px solid var(--capsule,var(--or));
  border-radius:var(--rayon); overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.rappel-gamme__apercu img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.rappel-gamme__nom{
  display:block; padding:.5rem .6rem; line-height:1.2;
  font-family:var(--titre); font-size:1rem; text-transform:uppercase;
  color:var(--creme-2); text-align:center;
}
/* L'apercu ne s'ouvre qu'une fois toutes les canettes posees (.est-pose,
   ajoute a la fin de l'animation) : pendant la glissee, survoler une canette
   en mouvement ne declenche rien. */
.rappel-gamme.est-pose .rappel-gamme__canette:hover .rappel-gamme__apercu,
.rappel-gamme.est-pose .rappel-gamme__canette:focus-visible .rappel-gamme__apercu{
  opacity:1; visibility:visible;
}
/* Sous la canette : l'autre cote, quand le haut manque de place. */
.rappel-gamme__canette[data-cote="bas"] .rappel-gamme__apercu{
  bottom:auto; top:100%; margin-bottom:0; margin-top:.7rem;
}
/* Aux extremites, l'apercu se cale sur le bord plutot que de deborder. */
.rappel-gamme__canette:first-child .rappel-gamme__apercu{ left:0; transform:none; }
.rappel-gamme__canette:last-child .rappel-gamme__apercu{ left:auto; right:0; transform:none; }

/* Telephone : les onze canettes ne tiennent pas cote a cote a taille lisible,
   la rangee defile donc du doigt. Pas de survol : le toucher ouvre la biere. */
@media (max-width:719px){
  .rappel-gamme__canettes{
    justify-content:flex-start; gap:1rem;
    overflow-x:auto; scroll-snap-type:x proximity;
    padding-bottom:.5rem; scrollbar-width:none;
  }
  .rappel-gamme__canettes::-webkit-scrollbar{ display:none; }
  /* flex:0 0 auto : sans quoi les canettes se compriment pour tenir dans la
     largeur et la rangee ne defile jamais. */
  .rappel-gamme__canette{ scroll-snap-align:center; flex:0 0 auto; }
  .rappel-gamme__decoupe{ height:166px; }
}
@media (hover:none){
  .rappel-gamme__apercu{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .rappel-gamme__canette{
    transform:none; opacity:1; transition:none; transition-delay:0s;
  }
  .rappel-gamme__decoupe{ transition:none; }
  .rappel-gamme.est-pose .rappel-gamme__canette:hover .rappel-gamme__decoupe,
  .rappel-gamme.est-pose .rappel-gamme__canette:focus-visible .rappel-gamme__decoupe{ transform:none; }
}

/* --- Cartes de bières ---------------------------------------------------- */
.carte-biere{
  position:relative; display:flex; flex-direction:column; text-align:left;
  background:#FFFDF8; border:1px solid var(--ligne); border-radius:var(--rayon);
  overflow:hidden; cursor:pointer; padding:0; font:inherit; color:inherit;
  box-shadow:var(--ombre); transition:transform .2s ease, box-shadow .2s ease;
}
.carte-biere:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(23,20,15,.14); }
.carte-biere__bandeau{ height:6px; background:var(--capsule,var(--cuivre)); }
.carte-biere__photo{ background:#F1EADC; }
.carte-biere__photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.carte-biere__corps{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.carte-biere__nom{ font-family:var(--titre); font-size:1.34rem; text-transform:uppercase; line-height:1; }
.carte-biere__style{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--capsule,var(--cuivre)); filter:brightness(.82);
}
.carte-biere__note{ font-size:.93rem; color:var(--encre-doux); margin-top:.4rem; }
.carte-biere__pied{
  margin-top:auto; padding-top:.9rem; display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--encre-doux);
}
.etiquette-rupture{
  position:absolute; top:.8rem; right:.8rem; background:var(--noir); color:var(--creme-2);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.35em .7em; border-radius:2px;
}

/* ==========================================================================
   Bannières de la page des bières
   Une bande pleine largeur par bière, dans la couleur de sa capsule, avec la
   canette détourée (traitement « découpe »). Le traitement « typo » prend le
   relais pour une bière encore sans photo.
   ========================================================================== */
.gamme{ --sur-bande:#F5EFE2; }

.bandeau-biere{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(1.5rem,2.8vw,2.2rem);
  color:var(--sur-bande);
  /* Arriver depuis le comptoir de l'accueil posait la bière à 80px du haut,
     donc collée sous la bannière. On vise le centre de l'écran. Cette valeur
     sert de repli (les bandeaux ne font pas tous la même hauteur) ; c'est
     poserSurAncre() dans site.js qui centre au pixel près en mesurant le
     bandeau réel. Le max() garde la bière sous la bannière sur écran court. */
  scroll-margin-top:max(80px, calc((100vh - 380px) / 2));
}
.bandeau-biere--clair{ --sur-bande:#1A1509; }

/* Chaque image de fonds/ est une seule scène (voiliers, parasols, planches…),
   pas un motif à tuiler : une seule occurrence, centrée, sans répétition.
   Les bandes n'ont pas toutes la même taille (le texte de chaque bière fait
   varier la hauteur, la largeur dépend de l'écran) : seul « cover » garantit
   dans tous les cas de couvrir tout le cadre sans jamais laisser de bord vide
   d'un côté — un calage fixe sur la largeur ou la hauteur (essayé plus tôt)
   donne un résultat différent, et parfois incomplet, d'une bière à l'autre.
   Le zoom que « cover » choisit dépend du plus contraignant des deux côtés ;
   on ne peut pas le réduire sans rouvrir ce problème. Ce qu'on contrôle,
   c'est l'ampleur du débord : il agrandit .bandeau-biere__fond (donc la boîte
   que « cover » doit remplir) au-delà de la bande visible, ce qui donne de la
   place au mouvement de parallaxe sans jamais découvrir un bord — plus le
   débord est généreux, plus la scène recule visuellement. */
.bandeau-biere__fond{
  position:absolute; left:0; right:0; top:-25%; bottom:-25%; z-index:0;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  opacity:.26; pointer-events:none;
  transform:translateY(calc(var(--defile) * -18%));
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .bandeau-biere__fond{ transform:none; }
}

.bandeau-biere__grille{
  position:relative; z-index:2;
  display:grid; gap:clamp(1.2rem,3vw,2.4rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .bandeau-biere__grille{ grid-template-columns:1.02fr .98fr; }
  .bandeau-biere--inverse .bandeau-biere__visuel{ order:-1; }
}

/* La bande horizontale reprend le bandeau de couleur qui ceinture chaque
   canette : c'est le trait de dessin commun à toute la gamme. */
.bandeau-biere__ceinture{
  position:absolute; inset:36% 0 auto; height:26%; z-index:1;
  background:var(--capsule); opacity:.18; pointer-events:none;
}

.bandeau-biere__texte h2{
  font-family:var(--titre); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:.9; margin:.7rem 0 .4rem;
  text-wrap:balance; color:inherit;
}
.bandeau-biere__desc{ max-width:44ch; font-size:clamp(.98rem,1.2vw,1.06rem); opacity:.94; }
.bandeau-biere .chiffres{
  display:flex; flex-wrap:wrap; gap:1.7rem; margin-top:1.1rem;
  padding:.85rem 0 0; border-block:0; border-top:1px solid;
  border-color:color-mix(in srgb, currentColor 30%, transparent);
}
.bandeau-biere .chiffres dd{ font-size:1.7rem; color:inherit; }
.bandeau-biere .chiffres dt{ color:inherit; opacity:.72; }
.bandeau-biere .banderole{ background:var(--cuivre); color:var(--creme-2); }
.bandeau-biere--clair .banderole{ background:var(--noir); color:var(--creme-2); }

/* Fond commun aux bannières colorées : la capsule, éclaircie en haut à droite
   et assombrie en bas. Partir du noir donnait des bandes kaki et ternes.
   Un seul dégradé radial à arrêts pleinement opaques (jamais de fondu vers
   le mot-clé "transparent" : ses canaux de couleur sont implicitement noirs,
   donc l'interpolation traverse une bande visiblement plus sombre avant que
   l'alpha n'atteigne 0 — c'est ce qui créait la ligne de changement visible). */
.bandeau-biere--decoupe,
.bandeau-biere--typo{
  background: radial-gradient(130% 90% at 72% 15%,
    color-mix(in srgb, var(--capsule) 60%, #fff) 0%,
    var(--capsule) 45%,
    color-mix(in srgb, var(--capsule) 55%, #0B0710) 100%);
}
/* Sur une capsule claire, le texte passe au noir : la bande doit alors monter
   vers la lumière et non plonger vers le noir, sinon le bas devient illisible. */
.bandeau-biere--clair.bandeau-biere--decoupe,
.bandeau-biere--clair.bandeau-biere--typo{
  background: radial-gradient(130% 90% at 72% 15%,
    color-mix(in srgb, var(--capsule) 70%, #fff) 0%,
    color-mix(in srgb, var(--capsule) 90%, #fff) 45%,
    var(--capsule) 100%);
}

/* --- Traitement « découpe » : la canette détourée sur un aplat ------------ */
/* Boîte de taille fixe : la canette est mise à l'échelle par object-fit:contain,
   donc toutes les bières rendent à la même hauteur/largeur, quel que soit le
   ratio de la photo source. */
.pose{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:clamp(230px,26vw,340px); width:100%;
}
.pose img{
  position:relative; z-index:2;
  max-width:100%; max-height:clamp(230px,26vw,340px);
  width:auto; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 22px rgba(11,7,16,.4));
}

/* --- Traitement « typo » : pour une bière encore sans photo --------------- */
.bandeau-biere--typo .bandeau-biere__grille{
  grid-template-columns:1fr; justify-items:center; text-align:center;
}
.bandeau-biere--typo .bandeau-biere__texte{ max-width:56ch; }
.bandeau-biere--typo .chiffres{ justify-content:center; }
.marque-absente{
  display:inline-block; margin-top:1.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px dashed color-mix(in srgb, currentColor 45%, transparent);
  padding:.6em 1.1em; border-radius:2px; opacity:.8;
}

/* --- Animation liée au défilement (cartes de la gamme) -------------------- */
/* --progreso est calculé en JS (voir animerGamme() dans site.js) à partir de
   la position de chaque carte dans la fenêtre, puis lissé avec une inertie
   asymétrique : la canette arrive vite en défilant vers le bas, mais traîne
   et s'amortit avant de repartir quand on remonte. Seul le visuel (canette)
   s'anime : le texte reste toujours pleinement visible et immobile. La
   canette glisse depuis le côté où elle se trouve déjà (droite sur un
   bandeau normal, gauche sur un bandeau --inverse). */
.bandeau-biere{ --progreso:0; --defile:0; --glissement:clamp(220px, 26vw, 420px); }
.bandeau-biere__visuel > *{
  opacity:var(--progreso);
  transform:translateX(calc((1 - var(--progreso)) * var(--glissement)));
  will-change:transform, opacity;
}
.bandeau-biere--inverse .bandeau-biere__visuel > *{
  transform:translateX(calc((1 - var(--progreso)) * var(--glissement) * -1));
}
@media (prefers-reduced-motion:reduce){
  .bandeau-biere__visuel > *{ opacity:1; transform:none; }
}

/* --- Index de couleurs collant -------------------------------------------- */
.index-gamme{
  position:sticky; top:74px; z-index:40;
  background:rgba(23,20,15,.96); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(216,178,123,.2);
}
.index-gamme ul{
  display:flex; gap:.4rem; margin:0; padding:.7rem 0; list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.index-gamme ul::-webkit-scrollbar{ display:none; }
.index-gamme a{
  display:flex; align-items:center; gap:.5em; white-space:nowrap;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:#B8AC98; text-decoration:none; padding:.45em .8em; border-radius:100px;
  border:1px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.index-gamme a::before{
  content:""; width:11px; height:11px; border-radius:50%;
  background:var(--capsule); flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(245,239,226,.25);
}
.index-gamme a:hover{ color:var(--creme-2); border-color:rgba(216,178,123,.35); }
.index-gamme a[aria-current="true"]{ color:var(--creme-2); border-color:var(--or); }

/* --- Filtres ------------------------------------------------------------- */
.filtres{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filtres button{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.6em 1.1em; border:1px solid var(--ligne); background:transparent;
  border-radius:100px; cursor:pointer; color:var(--encre-doux);
  transition:all .16s ease;
}
.filtres button:hover{ border-color:var(--cuivre); color:var(--noir); }
.filtres button[aria-pressed="true"]{ background:var(--noir); border-color:var(--noir); color:var(--creme-2); }

/* --- Tiroir (fiche de bière) --------------------------------------------- */
.tiroir{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(23,20,15,.55); backdrop-filter:blur(3px);
}
.tiroir[data-ouvert="true"]{ display:block; }
.tiroir__panneau{
  position:absolute; top:0; right:0; bottom:0; width:min(560px,100%);
  background:var(--creme); overflow-y:auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.3);
  animation:glisse .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes glisse{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.tiroir__fermer{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(245,239,226,.4); background:rgba(23,20,15,.55);
  color:var(--creme-2); font-size:1.3rem; line-height:1;
}
.tiroir__entete{ position:relative; background:var(--noir); }
.tiroir__entete img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.tiroir__bandeau{ height:8px; background:var(--capsule,var(--cuivre)); }
.tiroir__corps{ padding:clamp(1.4rem,4vw,2.2rem); }
.tiroir__corps h2{ margin-bottom:.3rem; }
.tiroir__style{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--capsule,var(--cuivre)); filter:brightness(.8); margin-bottom:1.4rem;
}
.chiffres{ display:flex; flex-wrap:wrap; gap:1.6rem; padding:1.1rem 0; border-block:1px solid var(--ligne); margin-bottom:1.5rem; }
.chiffres div{ display:flex; flex-direction:column; gap:.2rem; }
.chiffres dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-doux); }
.chiffres dd{ margin:0; font-family:var(--titre); font-size:1.6rem; line-height:1; }
.jauge{ margin-bottom:1.6rem; }
.jauge__etiquette{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-doux); margin-bottom:.4rem; }
.jauge__piste{ height:6px; background:var(--ligne); border-radius:100px; overflow:hidden; }
.jauge__valeur{ height:100%; background:var(--capsule,var(--cuivre)); border-radius:100px; }
.tiroir h4{ font-size:.95rem; letter-spacing:.1em; color:var(--cuivre); margin:1.6rem 0 .5rem; }

/* --- En souvenir : les albums des dernières soirées -----------------------
   Cinq fenêtres sur une rangée, chacune une soirée. La photo est la porte
   d'entrée : le titre ne vient qu'en surimpression, en bas, pour ne pas la
   couvrir. */
.souvenirs{
  display:grid; gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(5,1fr);
}
@media (max-width:1100px){ .souvenirs{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .souvenirs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .souvenirs{ grid-template-columns:1fr; } }

.souvenir{
  position:relative; display:block; padding:0; overflow:hidden; cursor:pointer;
  aspect-ratio:3/4; border:1px solid rgba(216,178,123,.22); border-radius:var(--rayon);
  background:var(--noir); color:var(--creme-2); text-align:left;
  transition:transform .2s ease, border-color .2s ease;
}
.souvenir:hover{ transform:translateY(-3px); border-color:var(--or); }
.souvenir__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .4s ease;
}
.souvenir:hover .souvenir__photo{ transform:scale(1.05); }
.souvenir__voile{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,12,9,.92) 0%, rgba(14,12,9,.45) 45%, rgba(14,12,9,.1) 100%);
}
.souvenir__texte{
  position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:.15rem;
  padding:clamp(.7rem,1.4vw,1rem);
}
.souvenir__titre{
  font-family:var(--titre); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(.92rem,1.3vw,1.05rem); line-height:1.15;
}
.souvenir__date{ font-size:.8rem; color:#C6BAA6; }
.souvenir__compte{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--or); margin-top:.2rem;
}

/* L'album par-dessus la page : la photo d'abord, les miniatures dessous. */
.album{
  position:fixed; inset:0; z-index:95; display:none;
  background:rgba(14,12,9,.82); backdrop-filter:blur(3px);
}
.album[data-ouvert="true"]{ display:grid; place-items:center; padding:clamp(.8rem,3vw,2rem); }
.album__panneau{
  position:relative; width:min(880px,100%); max-height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--noir-2); color:var(--creme-2);
  border:1px solid rgba(216,178,123,.28); border-radius:var(--rayon);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:album-entre .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes album-entre{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.album__fermer{
  position:absolute; top:.8rem; right:.8rem; z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(245,239,226,.4); background:rgba(23,20,15,.65);
  color:var(--creme-2); font-size:1.3rem; line-height:1;
}
.album__scene{ background:var(--stout); }
.album__photo{
  width:100%; max-height:min(58vh,520px); object-fit:contain; display:block;
}
.album__corps{ padding:clamp(1rem,2.4vw,1.6rem); overflow-y:auto; }
.album__corps h2{ color:var(--creme-2); margin:0 0 .2rem; font-size:clamp(1.2rem,2.4vw,1.7rem); }
.album__date{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--or); margin:0;
}
.album__legende{ color:#B8AC98; font-size:.9rem; margin:.6rem 0 0; min-height:1.2em; }

/* Huit miniatures visibles (--vues) ; au-delà la bande défile, et les flèches
   avancent d'une bande complète. */
.album__bande{ display:flex; align-items:center; gap:.4rem; margin-top:1rem; }
.album__miniatures{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--vues) - 1) * .4rem) / var(--vues));
  gap:.4rem; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:thin; padding-bottom:.3rem;
}
.album__mini{
  padding:0; cursor:pointer; overflow:hidden; aspect-ratio:1/1;
  border:1px solid rgba(216,178,123,.25); border-radius:2px; background:var(--noir);
  opacity:.6; transition:opacity .15s ease, border-color .15s ease;
}
.album__mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.album__mini:hover{ opacity:1; }
.album__mini[aria-current="true"]{ opacity:1; border-color:var(--or); }
.album__fleche{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(216,178,123,.35); background:rgba(23,20,15,.6);
  color:var(--creme-2); font-size:1.1rem; line-height:1;
}
.album__fleche:hover{ border-color:var(--or); }
@media (max-width:700px){
  .album__miniatures{ grid-auto-columns:calc((100% - 3 * .4rem) / 4); }
}
@media (prefers-reduced-motion:reduce){
  .souvenir, .souvenir__photo, .album__panneau{ transition:none; animation:none; }
  .album__miniatures{ scroll-behavior:auto; }
}

/* --- À l'affiche et En souvenir, côte à côte -------------------------------
   Les deux blocs partageaient chacun une bande noire pleine hauteur ; ils
   tiennent maintenant sur une seule, en deux colonnes : le calendrier à
   gauche, les albums à droite. Tout y est resserré — sections moins hautes,
   entêtes plus courtes, fiches d'événement et vignettes réduites — pour que
   l'ensemble se lise sans défiler.

   La colonne des souvenirs porte l'attribut hidden tant qu'aucune soirée
   passée n'a de photo ; la grille passe alors à une seule colonne. */
.section--agenda{ padding-block:clamp(2.2rem,4.5vw,3.4rem); }

.agenda-duo{
  display:grid; gap:clamp(1.6rem,3vw,3rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  /* « stretch » et non « start » : les deux colonnes prennent la même hauteur,
     ce qui aligne leurs boutons sur une seule ligne et donne à l'encadré des
     souvenirs la même assise que la liste voisine. */
  align-items:stretch;
}
/* Sans souvenirs, la colonne restante prend toute la largeur. */
.agenda-duo:has(#colonne-souvenirs[hidden]){ grid-template-columns:minmax(0,1fr); }
.agenda-duo__col{
  min-width:0;
  /* Les deux colonnes deviennent des colonnes verticales : leur contenu
     s'empile, et le lien du bas est poussé au ras du plancher (margin-top
     auto). Sans cela, les deux boutons flottaient chacun à la hauteur de leur
     propre contenu — c'est ce qui déséquilibrait le bloc. */
  display:flex; flex-direction:column;
}
/* La colonne « En souvenir » est posée dans un encadré, au même gabarit de
   filet que le triptyque du haut de page (3px, doré à .55), sur un fond un
   cran plus clair que la section : les albums se lisent alors comme un
   panneau à part, et non comme une seconde liste posée à côté de la
   première. */
.agenda-duo__col--encadre{
  border:3px solid rgba(216,178,123,.55);
  background:var(--noir-2);
  padding:clamp(1.1rem,2.2vw,1.8rem);
  /* Coins franchement arrondis : le panneau se lit comme une carte posée sur
     la page, et non comme un rectangle tracé dedans. C'est --rayon-panneau,
     réservé aux grandes surfaces ; les petits éléments gardent les 3 px
     anguleux de l'étiquette gravée. */
  border-radius:var(--rayon-panneau);
  /* Le relief : une ombre portée qui décolle la carte du fond, et un filet
     clair sur l'arête du haut, comme une lumière rasante. Sans lui, le cadre
     restait un tracé plat sur une surface plate. */
  box-shadow:
    inset 0 1px 0 rgba(245,239,226,.08),
    0 18px 40px rgba(0,0,0,.45);
}
@media (max-width:899px){
  .agenda-duo__col--encadre{ padding:clamp(1rem,4vw,1.4rem); }
}

/* Entête resserrée : la banderole et une seule ligne d'explication. */
.entete-duo{ margin-bottom:1.2rem; max-width:46ch; }
.entete-duo p{ margin-top:.6rem; font-size:.86rem; line-height:1.45; }

/* Poussé au bas de sa colonne : les deux boutons se retrouvent alors sur la
   même ligne, quelle que soit la hauteur des listes au-dessus d'eux. */
.agenda-duo__lien{ margin-top:auto; padding-top:1.3rem; margin-bottom:0; }
.btn--petit{ font-size:.86rem; padding:.7em 1.25em; }

/* Fiches d'événement compactes : la pastille de date rétrécit, l'interligne
   se resserre et la description se limite à deux lignes. */
.agenda-duo .evenement{
  gap:.9rem; padding:.9rem 0; grid-template-columns:auto 1fr;
}
.agenda-duo .evenement--album{ grid-template-columns:auto 1fr auto; }
.agenda-duo .date-bloc{ width:60px; padding:.45rem .3rem; }
.agenda-duo .date-bloc .mois{ font-size:.58rem; letter-spacing:.12em; }
.agenda-duo .date-bloc .jour{ font-size:1.55rem; }
.agenda-duo .date-bloc .annee{ font-size:.55rem; }
.agenda-duo .evenement__corps h3{ font-size:1.02rem; margin-bottom:.25rem; }
.agenda-duo .evenement__meta{
  font-size:.66rem; gap:.25rem .8rem; margin-bottom:.35rem;
}
.agenda-duo .evenement__corps p{
  font-size:.84rem; line-height:1.45; max-width:52ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.agenda-duo .evenement__album{ width:clamp(58px,7vw,74px); }

/* Vignettes de souvenirs réduites : deux rangées de trois plutôt qu'une
   rangée de cinq pleine largeur, et un format plus carré qui prend moins de
   hauteur que le 3/4 d'origine. */
.agenda-duo .souvenirs{ grid-template-columns:repeat(3,1fr); gap:.5rem; }
.agenda-duo .souvenir{ aspect-ratio:4/5; }
.agenda-duo .souvenir__texte{ padding:.5rem .55rem; gap:.1rem; }
.agenda-duo .souvenir__titre{ font-size:.8rem; line-height:1.1; }
.agenda-duo .souvenir__date{ font-size:.66rem; }
.agenda-duo .souvenir__compte{ font-size:.56rem; letter-spacing:.1em; }

/* Sous 900px les deux colonnes s'empilent : le calendrier d'abord, les
   souvenirs ensuite, dans l'ordre du HTML. */
@media (max-width:900px){
  .agenda-duo{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
}
@media (max-width:560px){
  .agenda-duo .evenement, .agenda-duo .evenement--album{ grid-template-columns:1fr; }
  .agenda-duo .souvenirs{ grid-template-columns:repeat(2,1fr); }
}

/* --- Événements ---------------------------------------------------------- */
.evenement{
  display:grid; gap:1.4rem; align-items:start;
  grid-template-columns:auto 1fr; padding:1.8rem 0; border-top:1px solid var(--ligne);
}
.evenement:last-child{ border-bottom:1px solid var(--ligne); }
.date-bloc{
  width:88px; text-align:center; border:1px solid var(--ligne); border-radius:var(--rayon);
  background:#FFFDF8; padding:.7rem .4rem; flex:0 0 auto;
}
.date-bloc .mois{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cuivre); }
.date-bloc .jour{ font-family:var(--titre); font-size:2.4rem; line-height:1; }
.date-bloc .annee{ font-family:var(--mono); font-size:.64rem; color:var(--encre-doux); letter-spacing:.1em; }
.evenement__corps h3{ margin-bottom:.4rem; }
.evenement__meta{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-doux); margin-bottom:.7rem; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
}
.evenement__meta span{ display:inline-flex; align-items:center; gap:.45em; }
.evenement__meta .ic{ color:var(--cuivre); }
.evenement__corps p{ max-width:62ch; }
.section--noir .evenement{ border-color:rgba(216,178,123,.22); }
.section--noir .date-bloc{ background:transparent; border-color:rgba(216,178,123,.3); }
.section--noir .date-bloc .jour{ color:var(--creme-2); }

/* Soirée passée dont on a gardé des photos : sa couverture ouvre l'album. */
.evenement--album{ grid-template-columns:auto 1fr auto; }
.evenement__album{
  position:relative; display:block; padding:0; cursor:pointer; overflow:hidden;
  width:clamp(96px,14vw,140px); aspect-ratio:3/4;
  border:1px solid var(--ligne); border-radius:var(--rayon); background:var(--noir);
  transition:transform .2s ease, border-color .2s ease;
}
.evenement__album:hover{ transform:translateY(-2px); border-color:var(--cuivre); }
.evenement__album img{ width:100%; height:100%; object-fit:cover; display:block; }
.evenement__albumCompte{
  position:absolute; inset:auto 0 0 0; padding:.35em .5em;
  background:linear-gradient(to top, rgba(14,12,9,.9), rgba(14,12,9,0));
  color:var(--creme-2); font-family:var(--mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.section--noir .evenement__album{ border-color:rgba(216,178,123,.3); }
.section--noir .evenement__album:hover{ border-color:var(--or); }

@media (max-width:560px){
  .evenement{ grid-template-columns:1fr; }
  .evenement--album{ grid-template-columns:1fr; }
  .date-bloc{ width:auto; display:inline-block; }
}

.archives{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.archive{ border:1px solid var(--ligne); border-radius:var(--rayon); overflow:hidden; background:#FFFDF8; }
.archive img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.archive__corps{ padding:1rem 1.1rem 1.2rem; }
.archive__corps h4{ margin-bottom:.3rem; text-transform:none; font-family:var(--titre);
  text-transform:uppercase; font-size:1.05rem; }
.archive__corps p{ font-size:.9rem; color:var(--encre-doux); }

/* --- Menu -------------------------------------------------------------
   Ambiance carte de pub/taverne : chaque section devient une planche encadrée
   (bordure épaisse, filet doré, texture fine) plutôt qu'une simple liste
   imprimée. */
.menu-section{
  margin-bottom:clamp(2rem,4vw,3rem);
  padding:clamp(1.4rem,3vw,2.2rem);
  background:
    repeating-linear-gradient(0deg, rgba(23,20,15,.025) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #FFFDF8 0%, var(--creme-2) 100%);
  border:3px solid var(--noir);
  border-radius:var(--rayon);
  box-shadow:var(--ombre), inset 0 0 0 1px rgba(216,178,123,.35);
}
.menu-section__entete{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.8rem 1.4rem;
  border-bottom:3px double var(--cuivre); padding-bottom:.7rem; margin-bottom:1.6rem;
}
.menu-section__entete h2{ margin:0; }
/* L'icône de la section, à gauche du titre. align-self la recale sur la
   ligne de base du titre, que l'entête aligne sur baseline. */
.menu-section__icone{
  width:30px; height:30px; flex:0 0 auto; align-self:center;
  color:var(--cuivre); stroke-width:1.4;
}
.section--noir .menu-section__icone{ color:var(--or); }
img.menu-section__icone{ object-fit:contain; }
.section--noir img.menu-section__icone{ filter:brightness(0) invert(.84); }
@media (max-width:600px){ .menu-section__icone{ width:24px; height:24px; } }
.menu-section__prix{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--creme-2); background:var(--cuivre); padding:.4em .9em; border-radius:2px; margin-left:auto;
  border:1px solid var(--noir); box-shadow:0 2px 0 var(--noir);
}
.menu-section__intro{ color:var(--encre-doux); margin:-.6rem 0 1.6rem; max-width:62ch; }
.menu-liste{ display:grid; gap:1.1rem 2.6rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.plat{
  display:flex; flex-direction:column; gap:.25rem;
  padding:.9rem 1rem; margin:0 -1rem;
  border-bottom:1px solid rgba(23,20,15,.12);
  border-radius:2px;
  transition:background-color .2s ease;
}
.plat:last-child{ border-bottom:none; }
.plat:hover{ background:rgba(169,130,92,.08); }
.plat__titre{ display:flex; align-items:baseline; gap:.6rem; }
.plat__nom{
  font-family:var(--titre); font-size:1.16rem; text-transform:uppercase;
  letter-spacing:.04em; font-weight:700;
  text-shadow:0 1px 0 rgba(255,253,248,.5);
}
.plat__points{ flex:1; border-bottom:1px dotted var(--ligne); transform:translateY(-.28em); }
.plat__prix{
  font-family:var(--mono); font-size:.9rem; color:var(--cuivre); white-space:nowrap;
  background:rgba(169,130,92,.12); padding:.15em .5em; border-radius:2px;
}
.plat__desc{ font-size:.93rem; color:var(--encre-doux); line-height:1.5; }
.menu-simple{ display:grid; gap:.5rem .5rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); }
.menu-simple li{
  list-style:none; font-family:var(--titre); text-transform:uppercase; font-size:1.08rem;
  letter-spacing:.04em; padding:.45rem .2rem; border-bottom:1px dotted var(--ligne);
}
.menu-simple{ margin:0; padding:0; }
.menu-section__note{
  font-size:.9rem; color:var(--encre-doux); font-style:italic;
  border-top:1px solid var(--ligne); padding-top:1.5rem; margin-top:1rem;
}

/* Deux colonnes de sections, comme une carte ouverte sur la table. Chaque
   section reste entière dans sa colonne : une liste de plats coupée en deux
   par un saut de colonne est illisible. */
.menu-cartes{ columns:2; column-gap:clamp(2rem,4vw,3.2rem); }
.menu-cartes .menu-section{ break-inside:avoid; display:inline-block; width:100%; }
.menu-cartes .menu-liste{ grid-template-columns:1fr; gap:.9rem; }
@media (max-width:820px){ .menu-cartes{ columns:1; } }

/* En-tête de carte : la banderole, puis l'intro, avant les sections. */
.carte-entete{ margin-bottom:clamp(2rem,4vw,3rem); }
.carte-intro{ margin-top:1.2rem; max-width:62ch; font-size:1.08rem; }

/* Mention : « Le midi », « Nouveauté ». Petite étiquette cousue au nom. */
.plat__mention{
  display:inline-block; margin-left:.6em; vertical-align:.16em;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cuivre); border:1px solid var(--ligne); border-radius:2px; padding:.25em .6em;
}

/* La carte du bar est sur fond noir : les filets et les gris s'inversent. */
.section--noir .menu-section{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, var(--fut) 0%, var(--stout) 100%);
  border-color:var(--or);
  box-shadow:var(--ombre), inset 0 0 0 1px rgba(216,178,123,.25);
}
.section--noir .menu-section__entete{ border-bottom-color:var(--or); }
.section--noir .plat{ border-bottom-color:rgba(216,178,123,.15); }
.section--noir .plat:hover{ background:rgba(216,178,123,.08); }
/* L'ombre claire de .plat__nom est faite pour le papier crème de la page Menu.
   Sur le noir, une ombre blanche décalée d'un pixel sous un texte clair donne
   l'impression que chaque nom est imprimé deux fois : on la retire. */
.section--noir .plat__nom,
.duo-resto__carte .plat__nom{ text-shadow:none; }
.section--noir .plat__points{ border-bottom-color:rgba(216,178,123,.3); }
.section--noir .menu-section__prix{ border-color:var(--or); box-shadow:0 2px 0 var(--noir); }
.section--noir .plat__prix{ color:var(--or); background:rgba(216,178,123,.1); }
.section--noir .plat__desc, .section--noir .menu-section__intro,
.section--noir .menu-section__note{ color:#B8AC98; }
.section--noir .plat__mention{ color:var(--or); border-color:rgba(216,178,123,.35); }
.section--noir .menu-simple li{ border-bottom-color:rgba(216,178,123,.22); }

/* --- Aperçu au survol des plats -------------------------------------------
   Encadré immédiat au survol ; après un court délai (voir site.js), la photo
   du plat apparaît dans un panneau fixe en bas à droite de l'écran. */
.plat--survole{ outline:2px solid var(--cuivre); outline-offset:3px; border-radius:2px; }
.section--noir .plat--survole{ outline-color:var(--or); }

.apercu-plat{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:60;
  width:min(300px, 34vw); aspect-ratio:1/1;
  border:3px solid var(--noir); border-radius:var(--rayon);
  box-shadow:var(--ombre);
  background:var(--creme-2);
  overflow:hidden;
  opacity:0; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.apercu-plat--visible{ opacity:1; transform:translateY(0); }
.apercu-plat__img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce){
  .apercu-plat{ transition:none; }
}
@media (max-width:640px){
  .apercu-plat{ display:none; }
}

/* --- Horaire ------------------------------------------------------------- */
.horaire{ border-collapse:collapse; width:100%; font-family:var(--mono); font-size:.88rem; }
.horaire td{ padding:.55rem 0; border-bottom:1px dotted rgba(216,178,123,.28); }
.horaire td:last-child{ text-align:right; white-space:nowrap; }
.horaire tr[data-aujourdhui="true"]{ color:var(--or); }
.horaire tr[data-aujourdhui="true"] td:first-child::before{ content:"▸ "; }
.section:not(.section--noir) .horaire td{ border-color:var(--ligne); }
.section:not(.section--noir) .horaire tr[data-aujourdhui="true"]{ color:var(--cuivre); }

.coordonnees{ margin-top:1.4rem; display:grid; gap:1.1rem; }
.coordonnees div{ display:flex; flex-direction:column; gap:.2rem; }
.coordonnees dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--or); }
.coordonnees dd{ margin:0; font-size:1.05rem; }
.coordonnees a{ color:var(--creme-2); }

/* --- Promotions ---------------------------------------------------------- */
.promo{
  border:1px solid var(--ligne); border-radius:var(--rayon); background:#FFFDF8;
  padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.5rem;
  box-shadow:var(--ombre); position:relative; overflow:hidden;
}
.promo::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--cuivre); }
.promo__etiquette{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cuivre);
}
.promo h3{ margin:0; }
.promo__periode{ font-family:var(--mono); font-size:.78rem; color:var(--encre-doux); margin-top:auto; padding-top:.8rem; }

/* --- Fenêtre promotionnelle ---------------------------------------------- */
.fenetre{
  position:fixed; inset:0; z-index:100; display:none; place-items:center;
  background:rgba(23,20,15,.6); backdrop-filter:blur(4px); padding:var(--marge);
}
.fenetre[data-ouvert="true"]{ display:grid; }
.fenetre__boite{
  width:min(560px,100%); background:var(--creme); border-radius:var(--rayon);
  overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4); position:relative;
  animation:monte .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes monte{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.fenetre__boite img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.fenetre__corps{ padding:clamp(1.5rem,4vw,2.2rem); }
.fenetre__fermer{
  position:absolute; top:.9rem; right:.9rem; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(245,239,226,.45); background:rgba(23,20,15,.6); color:var(--creme-2);
  font-size:1.2rem; cursor:pointer; line-height:1;
}

/* --- Pied de page -------------------------------------------------------- */
.pied{ background:var(--noir); color:#9C9384; padding-block:clamp(2.6rem,5vw,4rem) 2rem; }
.pied a{ color:var(--creme-2); text-decoration:none; }
.pied a:hover{ text-decoration:underline; }
.pied__grille{ display:grid; gap:2rem clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.pied h4{ color:var(--or); font-size:.82rem; letter-spacing:.16em; margin-bottom:1rem; font-family:var(--mono); }
.pied ul{ margin:0; padding:0; list-style:none; display:grid; gap:.5rem; font-size:.95rem; }
.pied li{ display:flex; align-items:flex-start; gap:.55em; }
.pied li a{ display:inline-flex; align-items:center; gap:.55em; }
.pied li .ic{ color:var(--or); margin-top:.15em; }
.pied__icone-reseau{ display:inline-flex; vertical-align:-.3em; margin-right:.5em; }
.pied__bas{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid rgba(216,178,123,.18);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-size:.82rem; font-family:var(--mono); letter-spacing:.04em;
}
/* Accès au portail de gestion : volontairement discret — c'est un outil du
   propriétaire, pas une page pour les visiteurs. */
/* Sélecteur porté à la même spécificité que « .pied a » ci-dessus, sinon la
   couleur crème générale des liens du pied l'emporte et le lien n'est plus
   discret du tout. */
.pied a.pied__gestion{ color:#6B6355; text-decoration:none; }
.pied a.pied__gestion:hover{ color:var(--or); text-decoration:none; }
.avis-legal{ font-size:.8rem; line-height:1.6; color:#7C7466; max-width:62ch; margin-top:1.2rem; }

/* --- Révélation au défilement -------------------------------------------- */
.revele{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.revele[data-vu="true"]{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .revele{ opacity:1; transform:none; } }

.vide{
  border:1px dashed var(--ligne); border-radius:var(--rayon); padding:2.4rem;
  text-align:center; color:var(--encre-doux); font-style:italic;
}
.section--noir .vide{ border-color:rgba(216,178,123,.28); }

/* ==========================================================================
   Portail de gestion
   --------------------------------------------------------------------------
   Le portail est sombre comme la salle après la fermeture, et il est bâti sur
   trois plans qu'on distingue au premier coup d'œil : la latérale en stout,
   l'index des fiches en noir voilé, l'éditeur en chêne de fût. Sans cet écart
   de valeurs, les trois colonnes se lisaient comme une seule surface.
   ========================================================================== */
/* --- L'arrondi du portail -------------------------------------------------
   Ces valeurs ne valent que dans le portail : le site public garde les
   siennes. L'arrondi y est proportionné à la boîte qu'il borde plutôt que
   constant — sur un champ d'une ligne (40 px de haut) un rayon franc se voit
   et paraît voulu, tandis que le même rayon sur un grand panneau se perd et
   ne lit plus que comme un coin mou. D'où l'ordre inverse de l'intuition :
   franc sur les petites boîtes, discret sur les grandes. */
body.admin{
  --rayon: 14px;         /* champs d'une ligne, boutons, petites boîtes */
  --rayon-zone: 10px;    /* zones de texte : le texte ne frôle pas le coin */
  --rayon-panneau: 13px; /* panneaux, cartes, grandes surfaces */
  background:var(--stout); color:var(--creme-2); overflow-x:hidden;
  /* Grain très léger, comme le papier d'une étiquette. */
  background-image:repeating-linear-gradient(135deg,
    rgba(245,239,226,.018) 0 1px, transparent 1px 3px);
}

/* --- Motif de capsule -----------------------------------------------------
   Vingt-et-un crans, comme une vraie capsule de bière : le dégradé conique
   dessine la denture, le disque central porte la couleur de la bière. */
.capsule{
  position:relative; border-radius:50%; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, var(--pastille,var(--or)) 0 58%, transparent 58%),
    conic-gradient(from 0deg, var(--cuivre) 0 8.57deg, var(--or) 8.57deg 17.14deg);
  box-shadow:inset 0 0 0 1px rgba(14,12,9,.45);
}

.connexion{
  min-height:100dvh; display:grid; place-items:center; padding:var(--marge);
  /* Deux cornes en filigrane derrière la boîte de connexion : le seul taureau
     du portail, assez pâle pour ne pas concurrencer le formulaire. */
  background:
    radial-gradient(ellipse at 50% 38%, rgba(169,130,92,.14), transparent 62%),
    var(--stout);
}
.connexion form{
  width:min(400px,100%); background:var(--noir);
  border:1px solid rgba(216,178,123,.22);
  padding:clamp(1.8rem,4vw,2.6rem);
  /* Coin d'étiquette relevé, plutôt qu'un rectangle de plus. Le dégradé pose
     le filet de la diagonale : la bordure, elle, s'arrête à la coupe. */
  background-image:linear-gradient(225deg, rgba(216,178,123,.45) 19px, transparent 19px);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.champ{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.7rem; }
.champ > span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or); }
.champ input, .champ textarea, .champ select{
  font:inherit; font-size:.94rem; padding:.5em .7em; border-radius:var(--rayon);
  border:1px solid rgba(216,178,123,.28); background:var(--stout); color:var(--creme-2);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.champ input:focus, .champ textarea:focus, .champ select:focus{
  border-color:var(--mout); box-shadow:0 0 0 3px rgba(201,143,63,.16);
}
.champ textarea{
  min-height:76px; resize:vertical; line-height:1.5;
  border-radius:var(--rayon-zone,var(--rayon));
}
/* Un champ de saisie ne s'étire pas sur toute la largeur d'un grand écran :
   au-delà d'une certaine longueur on ne sait plus quelle étiquette va avec
   quel champ, et une ligne de texte de 1200 px se relit mal. Les champs qui
   contiennent vraiment du texte long (« champ--large ») gardent la largeur. */
.champ input, .champ select{ max-width:34rem; }
.champ--large input, .champ--large select, .champ textarea{ max-width:none; }
.champ--large{ grid-column:1/-1; }

/* Le portail tient dans la fenêtre : c'est l'index et l'éditeur qui défilent,
   chacun de son côté, jamais la page. Sans hauteur fixe ici, les deux colonnes
   ne peuvent pas se donner leur propre barre de défilement. */
.admin-coquille{ display:grid; grid-template-columns:230px 1fr; height:100dvh; overflow:hidden; }
.admin-lateral{
  background:var(--stout); border-right:1px solid rgba(216,178,123,.14);
  padding:1.2rem .8rem; display:flex; flex-direction:column; height:100dvh;
  overflow-y:auto; overflow-x:hidden;
}
/* La latérale est une colonne de navigation : sa barre de défilement longeait
   l'éditeur sur toute la hauteur, comme un filet qui ne dit rien. Elle défile
   toujours, mais sans barre. */
.admin-lateral{ scrollbar-width:none; }
.admin-lateral::-webkit-scrollbar{ width:0; height:0; }
.admin-lateral .marque{ padding-inline:.4rem; }
.admin-lateral .outils .mini{ justify-content:center; }
.admin-onglets{ display:flex; flex-direction:column; gap:.15rem; margin-top:1.3rem; }
.admin-onglets button{
  display:flex; align-items:center; gap:.6rem; position:relative;
  text-align:left; font:inherit; font-size:.9rem; padding:.42em .7em; cursor:pointer;
  background:none; border:0; color:#9C9280;
  transition:background-color .16s ease, color .16s ease;
}
.admin-onglets button .ic{ color:var(--cuivre); transition:color .16s ease; }
.admin-onglets button:hover{ background:rgba(216,178,123,.08); color:var(--creme-2); }
/* L'onglet ouvert est une poignée de robinet : sa pointe entre dans la colonne
   de droite et sa hampe cuivrée reste collée au bord. */
.admin-onglets button[aria-selected="true"]{
  background:linear-gradient(90deg,var(--cuivre),#8E6B48);
  color:var(--mousse); margin-right:-.8rem; padding-right:1.4rem;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.admin-onglets button[aria-selected="true"]::before{
  content:""; position:absolute; left:-.8rem; top:0; bottom:0; width:4px; background:var(--or);
}
.admin-onglets button[aria-selected="true"] .ic{ color:var(--mousse); }
/* Intertitre de groupe : les dix onglets à plat ne disaient pas où chercher.
   Le cône de houblon en puce les rattache au métier. */
.admin-onglets__groupe{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--houblon); padding:.8rem .7em .3em; margin:0;
}
.admin-onglets__groupe::before{
  content:""; width:7px; height:10px; flex:0 0 auto;
  background:var(--houblon); opacity:.75;
  clip-path:polygon(50% 0, 100% 34%, 82% 100%, 18% 100%, 0 34%);
}
.admin-onglets__groupe:first-child{ padding-top:0; }

/* Colonne de droite : en-tête figé, contenu défilant, barre d'état en pied. */
.admin-principal{
  display:grid; grid-template-rows:auto 1fr auto;
  min-width:0; min-height:0; height:100dvh; background:var(--fut);
}
.admin-titre{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,2.4vw,1.8rem);
  border-bottom:1px solid rgba(216,178,123,.18);
  background:linear-gradient(180deg,rgba(0,0,0,.28),transparent);
}
.admin-titre h2{
  margin:0; font-size:1.7rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:.6rem;
}
.admin-titre h2 .ic{ color:var(--or); }
.panneaux{ min-height:0; overflow:hidden; display:flex; }
.panneau{ flex:1; min-width:0; min-height:0; }

/* --- Patron maître-détail -------------------------------------------------
   Index compact à gauche, éditeur à droite. Une seule fiche est ouverte à la
   fois : c'est ce qui remplace l'empilement de toutes les fiches dépliées, où
   les onze bières faisaient à elles seules cent vingt champs à faire défiler. */
.md{ display:grid; grid-template-columns:280px 1fr; height:100%; min-height:0; }
.md__index{
  display:flex; flex-direction:column; min-height:0;
  border-right:1px solid rgba(216,178,123,.14); background:rgba(0,0,0,.3);
}
.md__chercher{ padding:.7rem .8rem; border-bottom:1px solid rgba(216,178,123,.12); position:relative; }
.md__chercher::before{
  /* La loupe, dessinée au trait : un rond et une queue. */
  content:""; position:absolute; left:1.35rem; top:50%; width:11px; height:11px;
  margin-top:-6px; border:1.5px solid var(--cuivre); border-radius:50%; pointer-events:none;
}
.md__chercher::after{
  content:""; position:absolute; left:2.15rem; top:50%; width:6px; height:1.5px;
  margin-top:3px; background:var(--cuivre); transform:rotate(45deg); pointer-events:none;
}
.md__chercher input{
  width:100%; font:inherit; font-size:.86rem; padding:.5em .8em .5em 2.5em; border-radius:100px;
  border:1px solid rgba(216,178,123,.28); background:var(--stout); color:var(--creme-2);
}
.md__chercher input:focus{ border-color:var(--mout); outline:none; box-shadow:0 0 0 3px rgba(201,143,63,.14); }
.md__liste{ list-style:none; margin:0; padding:.5rem .4rem; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; display:grid; gap:.15rem; align-content:start; }
.md__ligne{
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  font:inherit; font-size:.88rem; cursor:pointer; color:#A79C89;
  background:none; border:0; border-radius:100px 4px 4px 100px; padding:.45em .7em;
  transition:background-color .16s ease, color .16s ease;
}
.md__ligne:hover{ background:rgba(216,178,123,.09); color:var(--creme-2); }
.md__ligne[aria-current="true"]{
  background:linear-gradient(90deg,rgba(201,143,63,.9),rgba(169,130,92,.5));
  color:var(--mousse);
}
/* --- Les boutons posés sur une ligne d'index ------------------------------
   Le crayon ouvre les réglages de la fiche, l'œil la retire du site sans
   l'effacer. Ils restent discrets — la liste doit d'abord se lire — et
   n'apparaissent qu'au survol, sauf sur la ligne ouverte et sur une fiche
   masquée, où l'œil barré est une information à voir tout de suite. */
/* La liste est une grille : sans min-width:0, l'élément prend la largeur de son
   contenu et déborde de la colonne, emportant les boutons hors de l'écran. */
.md__item{ position:relative; min-width:0; }
/* Une section « liste » n'affiche que des noms : elle se comporte assez
   différemment pour mériter une marque, un liseré vert le long de la ligne. */
/* Le liseré vert des sections en liste a été retiré : la distinction entre
   une section en liste et une section en plats se lit maintenant à l'icône,
   et toutes les lignes de l'index se présentent de la même façon. */

/* Une section masquée s'assombrit : on doit voir d'un coup d'œil, en parcourant
   la liste, ce qui ne paraît pas sur le site. */
.md__item--eteint .md__ligne{ color:#6E6659; }
.md__item--eteint .md__ligne .md__meta{ color:#5C5549; }
.md__item--eteint .md__pastille{ opacity:.35; }
.md__item--eteint .md__ligne:not([aria-current="true"]){ background:rgba(0,0,0,.22); }
.md__item--eteint .md__ligne[aria-current="true"]{
  background:linear-gradient(90deg,rgba(201,143,63,.4),rgba(169,130,92,.22));
  color:#8B8172;
}
.md__item > .md__ligne{ box-sizing:border-box; }
.md__item .md__ligne{ padding-right:6.4em; }
/* Le titre et la ligne du dessous se coupent proprement plutôt que de passer
   sous les boutons. */
.md__item .md__ligne > span{ min-width:0; }
.md__item .md__titre,
.md__item .md__meta{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md__actions{
  position:absolute; top:50%; right:.35em; transform:translateY(-50%);
  display:flex; gap:.1em; z-index:1;
}
.md__action{
  display:grid; place-items:center; width:22px; height:22px; padding:0;
  background:none; border:0; border-radius:var(--rayon); cursor:pointer;
  color:#A79C89; opacity:0; transition:opacity .16s ease, background-color .16s ease, color .16s ease;
}
/* Une flèche au bout de la liste reste en place, en sourdine : la faire
   disparaître ferait sauter les autres boutons d'une ligne à l'autre. */
.md__action[disabled]{ cursor:default; opacity:0; }
.md__item:hover .md__action[disabled],
.md__ligne[aria-current="true"] ~ .md__actions .md__action[disabled]{ opacity:.22; }
.md__action[disabled]:hover{ background:none; color:#A79C89; }
.md__action svg{ width:15px; height:15px; }
.md__action:hover{ background:rgba(216,178,123,.18); color:var(--creme-2); }
.md__item:hover .md__action,
.md__ligne[aria-current="true"] ~ .md__actions .md__action,
.md__action:focus-visible,
.md__action--actif{ opacity:1; }
/* Sur la ligne ouverte, le fond est doré : il faut de l'encre foncée. */
.md__ligne[aria-current="true"] ~ .md__actions .md__action{ color:var(--mousse); }
.md__ligne[aria-current="true"] ~ .md__actions .md__action:hover{ background:rgba(23,20,15,.14); }

.md__pastille{
  width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, var(--pastille,rgba(216,178,123,.5)) 0 58%, transparent 58%),
    conic-gradient(from 0deg, var(--cuivre) 0 8.57deg, var(--or) 8.57deg 17.14deg);
  box-shadow:inset 0 0 0 1px rgba(14,12,9,.5);
}
/* --- La grille de choix d'une icône de section ---------------------------
   Les dessins se choisissent d'un clic, sans liste déroulante : on reconnaît
   une icône bien plus vite qu'on ne lit son nom. */
.champ--icone{ display:grid; gap:.5rem; }
/* La mention de format se lit sur toute la largeur du champ : dans une
   colonne étroite elle se cassait en six lignes. */
.champ--icone .champ__format{ max-width:100%; width:auto; }
.champ--icone .champ__boutons{ justify-content:start; }
.grille-icones{
  display:grid; gap:.35rem;
  grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
  padding:.5rem;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(216,178,123,.14);
  border-radius:var(--rayon-panneau);
}
.grille-icones__choix{
  display:grid; place-items:center;
  aspect-ratio:1; padding:.4rem;
  background:transparent; border:1px solid transparent;
  border-radius:var(--rayon);
  color:#C8BCA6; cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.grille-icones__choix:hover{ background:rgba(216,178,123,.12); color:var(--or); }
.grille-icones__choix:focus-visible{ outline:2px solid var(--or); outline-offset:1px; }
.grille-icones__choix.est-choisi{
  background:rgba(201,143,63,.22);
  border-color:var(--mout);
  color:var(--or);
}
.grille-icones__choix .ic{ width:22px; height:22px; }
/* Une icône importée est une image : elle ne prend pas la couleur du texte,
   on l'éclaircit donc pour qu'elle ne soit pas noire sur fond sombre. */
.ic--importee{ width:22px; height:22px; object-fit:contain; filter:brightness(0) invert(.86); }
.est-choisi .ic--importee{ filter:brightness(0) invert(1); }

/* La puce d'une section dans l'index : une icône plutôt qu'un disque teinté. */
.md__pastille--icone{
  width:22px; height:22px; flex:0 0 auto;
  display:grid; place-items:center;
  background:none; box-shadow:none; border-radius:0;
  color:var(--or);
}
.md__pastille--icone .ic{ width:20px; height:20px; }
.md__pastille--photo{ width:28px; height:28px; border-radius:var(--rayon-zone,3px); object-fit:cover; background:none; box-shadow:none; }
.md__ligne span{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.md__titre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md__meta{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.md__vide{ padding:1.4rem .8rem; color:#8C8375; font-size:.86rem; font-style:italic; }
.md__pied{ padding:.6rem .7rem; border-top:1px solid rgba(216,178,123,.12); display:flex; gap:.4rem; }
.md__pied .mini{ flex:1; justify-content:center; }

.md--simple{ grid-template-columns:1fr; }
/* Un panneau sans index (un formulaire seul) ne s'étale pas sur toute la
   largeur : au-delà d'une soixantaine de caractères, l'œil perd la ligne et
   les grands vides à droite donnent l'impression d'une page inachevée. */
.md--simple .md__editeur{ max-width:56rem; }


/* Une entrée de menu par ligne : nom, prix, description et le retrait. */
.entree-menu{
  display:grid; gap:.4rem .8rem; align-items:end;
  grid-template-columns:minmax(130px,1fr) 80px minmax(180px,2fr) auto;
  padding-bottom:.5rem; margin-bottom:.5rem;
  border-bottom:1px dotted rgba(216,178,123,.16);
}
.entree-menu .champ{ margin-bottom:0; }
.entree-menu textarea{ min-height:0; }
/* Une section « liste » n'a qu'un nom : inutile de réserver les colonnes du
   prix et de la description. */
.entree-menu--liste{ grid-template-columns:1fr auto; }
/* Sur un écran de portable, les quatre colonnes ne tiennent plus dans la
   colonne de l'éditeur : la description passe sur sa propre ligne. */
@media (max-width:1250px){
  .entree-menu{ grid-template-columns:1fr 80px auto; }
  /* Le bouton reste sur la première ligne, à droite du prix : posé après la
     description, il s'étirait sur toute la largeur et gonflait chaque entrée. */
  .entree-menu .champ:nth-child(3){ grid-column:1/-1; grid-row:2; }
  .entree-menu > button{ grid-column:3; grid-row:1; }
  .entree-menu--liste > button{ grid-column:2; }
}
.entree-menu > button{ justify-self:end; align-self:end; }

/* --- Les entrées d'une carte de menu, en cartes ---------------------------
   Une section de menu affichait ses plats en lignes de champs : avec dix-huit
   entrées, on parcourait un mur de formulaires sans jamais voir la carte. Ici
   chaque plat est une petite carte — photo, nom, prix — et le clic ouvre la
   fenêtre où tout se modifie. */
.plats{
  display:grid; gap:.9rem;
  /* ~3 cartes par rangée dans la largeur de l'éditeur : assez grandes pour
     que la photo se lise, assez étroites pour qu'un écran large en montre
     quatre plutôt que d'étirer trois cartes démesurées. */
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
/* Une section « liste » (shooters, cocktails classiques) n'a ni photo ni prix :
   des cartes pleine taille y feraient deux écrans de cadres vides. */
/* Sur un écran de portable, la colonne de l'éditeur tombe sous 500 px : à
   230 px de large minimum, les cartes s'y rangeraient une par une, ce qui
   rallonge la page plus encore que l'ancienne liste. */
@media (max-width:1250px){
  .plats{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
}
.plats--liste{
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.6rem;
  /* Sans cela, une carte seule sur la dernière rangée s'étire sur toute la
     hauteur laissée libre par la grille. */
  align-items:start;
}

.carte-plat{
  display:flex; flex-direction:column; gap:.5rem;
  padding:0 0 .7rem; overflow:hidden;
  text-align:left; font:inherit; color:inherit;
  /* Le portail est sombre : une carte crème y faisait une tache blanche à fort
     contraste, alors que tout le reste de l'éditeur est en chêne de fût. Les
     cartes reprennent donc la surface de travail, et c'est l'ambré du moût —
     la couleur qui appelle l'action, celle du bouton « Ajouter » — qui les
     signale au survol plutôt qu'un aplat clair. */
  background:var(--fut); border:1px solid rgba(216,178,123,.16); border-radius:var(--rayon-panneau);
  cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.carte-plat:hover,
.carte-plat:focus-visible{
  background:#221D16;
  border-color:var(--mout); box-shadow:0 6px 18px rgba(0,0,0,.4);
  transform:translateY(-2px);
}
.carte-plat--liste{ padding:.6rem .7rem; }
/* Une entrée mise de côté reste visible ici — c'est ce qui permet de la
   remettre à la carte en novembre — mais se lit tout de suite comme retirée. */
.carte-plat--cache{ opacity:.55; }

.carte-plat__photo{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  background:rgba(216,178,123,.08);
}
.carte-plat__photo--detouree{ object-fit:contain; background:#fff; }
/* Une entrée sans photo n'occupe pas la place d'une photo : garder le format
   4/3 dessinait un grand rectangle brun vide, et une carte de six entrées
   sans image devenait un mur de vide. Le cadre se réduit à une bande qui
   signale l'emplacement libre sans le réserver en entier. */
.carte-plat__photo--vide{
  display:grid; place-items:center; color:rgba(216,178,123,.3);
  aspect-ratio:auto; min-height:64px;
  border-bottom:1px dashed rgba(216,178,123,.14);
}
.carte-plat__photo--vide svg{ width:22px; height:22px; }
.carte-plat__photo--vide svg{ width:30px; height:30px; }

.carte-plat__corps{
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:0 .7rem;
}
.carte-plat--liste .carte-plat__corps{ padding:0; }
.carte-plat__nom{
  font-family:var(--titre); font-size:.9rem; line-height:1.25;
  color:var(--mousse); overflow-wrap:anywhere;
}
.carte-plat__prix{ font-size:.82rem; color:var(--mout); white-space:nowrap; }

.carte-plat__etiquettes{ display:flex; flex-wrap:wrap; gap:.3rem; padding:0 .7rem; }
.carte-plat--liste .carte-plat__etiquettes{ padding:0; }
.carte-plat__etiquette{
  padding:.12em .5em; border-radius:99px;
  background:rgba(201,143,63,.16); color:var(--or);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
}

.carte-plat--ajout{
  align-items:center; justify-content:center; gap:.4rem;
  min-height:130px; padding:.7rem;
  background:none; border-style:dashed; border-color:rgba(201,143,63,.4);
  color:var(--mout); text-align:center;
}
.carte-plat--ajout:hover,
.carte-plat--ajout:focus-visible{
  background:rgba(201,143,63,.1); border-color:var(--mout); color:var(--mousse);
}
/* En liste, les cartes sont de simples lignes de texte : la carte d'ajout doit
   se ranger au même gabarit, sinon elle domine la grille. */
.plats--liste .carte-plat--ajout{
  min-height:0; padding:.6rem .7rem; gap:.35rem;
  flex-direction:row; align-items:center; justify-content:flex-start; text-align:left;
  /* Le même corps de texte et la même hauteur de ligne que .carte-plat__nom :
     l'icône, plus haute que le texte, gonflait la carte de quelques pixels et
     cassait l'alignement de la rangée. */
  font-size:.9rem; line-height:1.25;
}
.plats--liste .carte-plat--ajout svg{
  width:13px; height:13px; flex:0 0 auto; display:block;
}
.plats--liste .carte-plat--ajout > span{ line-height:1.25; }
.carte-plat--ajout svg{ width:18px; height:18px; }

/* --- La fenêtre d'une entrée de menu --------------------------------------
   Le portail est sombre, et ses champs sont taillés pour ça : encre claire sur
   fond de stout. Une fenêtre crème en aurait fait des boîtes noires posées sur
   du beige. Elle reprend donc le fût de l'éditeur qu'elle remplace — c'est la
   même surface de travail, simplement détachée. */
.fenetre-plat{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:1.5rem;
  background:rgba(8,7,5,.72); backdrop-filter:blur(3px);
  animation:fenetre-plat-fond .18s ease;
}
.fenetre-plat__boite{
  display:flex; flex-direction:column;
  width:100%; max-width:min(620px,92vw); max-height:88vh;
  background:var(--fut); color:var(--creme-2);
  border:1px solid rgba(216,178,123,.22); border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
  animation:fenetre-plat-boite .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes fenetre-plat-fond{ from{ opacity:0; } }
@keyframes fenetre-plat-boite{ from{ opacity:0; transform:translateY(8px) scale(.99); } }
.fenetre-plat__tete{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; border-bottom:1px solid rgba(216,178,123,.16);
  background:rgba(0,0,0,.22);
}
.fenetre-plat__tete h3{
  margin:0; font-size:1.15rem; overflow-wrap:anywhere;
  color:var(--mousse); text-transform:uppercase; letter-spacing:.03em;
}
.fenetre-plat__corps{ overflow-y:auto; padding:1.2rem; }
.fenetre-plat__pied{
  display:flex; justify-content:flex-end;
  padding:.8rem 1.2rem; border-top:1px solid rgba(216,178,123,.16);
  background:rgba(0,0,0,.22);
}
.md__editeur{ overflow-y:auto; min-height:0; padding:clamp(1rem,2.4vw,1.8rem); }
.md__retour{ display:none; }
/* Barre d'outils de la fiche ouverte : réordonner et supprimer vivent ici,
   pas sur chaque ligne de l'index, qui doit rester lisible d'un coup d'œil. */
.md__outils{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:1px solid rgba(216,178,123,.18);
}
.md__outils h3{ margin:0; font-size:1.25rem; margin-right:auto; color:var(--mousse); }
/* Un cône de houblon en filigrane derrière l'état vide : la colonne n'est pas
   cassée, elle attend juste qu'on choisisse une fiche. */
.md__rien{
  display:grid; place-items:center; height:100%; color:#8C8375; font-style:italic;
  text-align:center; padding:2rem; position:relative; isolation:isolate;
}
.md__rien::before{
  content:""; position:absolute; z-index:-1; width:min(46%,220px); aspect-ratio:3/4;
  background:var(--houblon); opacity:.07;
  clip-path:polygon(50% 0, 78% 14%, 100% 40%, 86% 62%, 96% 78%, 50% 100%, 4% 78%, 14% 62%, 0 40%, 22% 14%);
}

@media (max-width:900px){
  /* Une seule colonne : l'index sert de sommaire, l'éditeur le remplace. */
  .md{ grid-template-columns:1fr; }
  .md__index{ border-right:0; }
  .md[data-vue="editeur"] .md__index{ display:none; }
  .md[data-vue="index"] .md__editeur{ display:none; }
  .md__retour{ display:inline-flex; }
}

/* --- Sections repliables dans l'éditeur ---------------------------------- */
.repli{
  border:1px solid rgba(216,178,123,.18); margin-top:1rem;
  background:linear-gradient(225deg, rgba(216,178,123,.4) 13px, transparent 13px), rgba(0,0,0,.16);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.repli > summary{
  cursor:pointer; list-style:none; padding:.65em .9em;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or);
}
.repli > summary::-webkit-details-marker{ display:none; }
.repli > summary::before{ content:"▸ "; }
.repli[open] > summary::before{ content:"▾ "; }
.repli__corps{ padding:.2rem .9rem 1rem; }
/* object-fit:contain, et non cover : un aperçu sert à voir l'image entière.
   Une canette détourée est haute et étroite — cover remplissait le cadre 4/3
   en lui coupant le haut et le bas, on ne voyait qu'un morceau de canette. */
.vignette{
  width:100%; max-width:200px; aspect-ratio:4/3; object-fit:contain;
  border-radius:var(--rayon-zone,var(--rayon));
  border:1px solid rgba(216,178,123,.25); margin-top:.4rem; background:var(--stout);
}
/* Les boutons d'un champ photo se replient au lieu de déborder : ces champs
   servent aussi dans la grille des photos de soirée, à quatre colonnes
   étroites, où une rangée rigide passait par-dessus la colonne voisine. */
.champ__boutons{
  display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem;
}
.champ__boutons .mini{
  flex:1 1 auto; min-width:0; justify-content:center;
  padding-left:.5em; padding-right:.5em; font-size:.68rem; white-space:nowrap;
}
/* Le partage en parts égales ne vaut que dans les grilles étroites (les
   photos d'une soirée, la colonne des visuels d'une bière) : ailleurs, un
   bouton « Importer » large comme la page ne dit plus sur quoi il porte. */
.md--simple .champ__boutons,
.fenetre .champ__boutons{ justify-content:flex-start; }
.md--simple .champ__boutons .mini,
.fenetre .champ__boutons .mini{ flex:0 0 auto; }
/* Dans une grille, la vignette occupe la colonne : la brider à 200px la
   laissait flotter à gauche d'une case bien plus large. */
.champ--photo{ min-width:0; }
/* La dimension attendue, sous le champ : sans elle, on refabrique une image au
   jugé et le cadre du site la rogne. Elle tient sur une ligne discrète, mais
   les chiffres eux-mêmes ressortent. */
.champ__format{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:.68rem; line-height:1.45;
  letter-spacing:.02em; color:var(--encre-doux);
  /* La mention se lit d'un coup d'œil : elle prend la place disponible plutôt
     que de se casser en cinq lignes dans une colonne étroite. Le plafond en
     ch la garde lisible sur un très grand écran, où une ligne courant sur
     toute la largeur se relirait mal. */
  width:max-content; max-width:min(72ch, 100%);
}
.champ__format b{ color:var(--cuivre); font-weight:700; letter-spacing:.04em; }
.champ--photo .vignette,
/* La boîte « Aucune photo » ne s'étire pas : avec max-width:100% et son
   aspect-ratio 4/3, elle atteignait 500 px de haut sur un écran large pour
   dire qu'il n'y avait rien. Elle garde la taille d'une vignette, ce qu'elle
   annonce. Dans une colonne de visuels (fiche d'une bière), elle suit en
   revanche la largeur de la colonne, comme l'image qu'elle remplace. */
.champ--photo .vignette__vide{ max-width:280px; }
.fiche-media__visuel .vignette__vide{ max-width:none; }

/* Une image détourée se lit mal sur un aplat : le damier montre où s'arrête
   la canette et ce qui est transparent autour. */
.vignette--detouree{
  background:#fff;
  background-image:
    linear-gradient(45deg,#dcd6c8 25%,transparent 25%,transparent 75%,#dcd6c8 75%),
    linear-gradient(45deg,#dcd6c8 25%,transparent 25%,transparent 75%,#dcd6c8 75%);
  background-size:14px 14px; background-position:0 0,7px 7px;
}
/* La vignette est devenue le seul repère d'un champ photo — le chemin du
   fichier ne s'affiche plus. Quand il n'y a pas encore d'image, cette zone
   le dit, pour qu'un champ vide ne ressemble pas à un champ cassé. */
.vignette__vide{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:200px; aspect-ratio:4/3; margin-top:.4rem;
  border:1px dashed rgba(216,178,123,.28);
  border-radius:var(--rayon-zone,var(--rayon));
  background:var(--stout); color:#8C8375;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
}

/* --- Barre d'état : enregistré / à publier -------------------------------- */
/* « Enregistrer » n'écrit que dans ce navigateur ; publier est une seconde
   étape. Rien ne reliait les deux — cette barre dit toujours où on en est. */
.etat{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
  padding:.9rem clamp(1rem,2.4vw,1.8rem) .7rem;
  background:var(--noir); position:relative;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
}
/* Un filet net, sans le rang de bulles « col de mousse » qui courait ici :
   la barre doit se détacher du contenu, pas s'annoncer. */
.etat{ border-top:1px solid rgba(216,178,123,.18); }
.etat__voyant{ display:inline-flex; align-items:center; gap:.55em; color:#8C8375; }
.etat__voyant::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--houblon);
  box-shadow:0 0 0 3px rgba(122,139,90,.18);
  animation:bulle 2.6s ease-in-out infinite;
}
@keyframes bulle{
  0%,100%{ transform:translateY(1px); opacity:.75; }
  50%    { transform:translateY(-3px); opacity:1; }
}
.etat[data-etat="modifie"] .etat__voyant{ color:#E8C07A; }
.etat[data-etat="modifie"] .etat__voyant::before{ background:#E0A84A; box-shadow:0 0 0 3px rgba(224,168,74,.2); }
.etat[data-etat="apublier"] .etat__voyant{ color:#B8AC98; }
.etat[data-etat="apublier"] .etat__voyant::before{ background:var(--mout); box-shadow:0 0 0 3px rgba(201,143,63,.2); }
.etat .outils{ margin-left:auto; }

/* --- Tableau de l'horaire ------------------------------------------------- */
/* Sept jours pour deux chiffres chacun : une ligne suffit, une fiche par jour
   faisait défiler l'onglet sur sept écrans. */
.horaire-edit{ width:100%; border-collapse:collapse; max-width:400px; }
.horaire-edit td:not(:first-child), .horaire-edit th:not(:first-child){ width:7.5em; }
.horaire-edit th{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or); text-align:left; font-weight:400; padding:.3rem .5rem;
}
.horaire-edit td{ padding:.25rem .5rem; border-top:1px solid rgba(216,178,123,.12); }
.horaire-edit td:first-child{ font-size:.95rem; white-space:nowrap; }
.horaire-edit input{
  font:inherit; font-size:.92rem; width:6.5em; padding:.4em .5em; border-radius:var(--rayon);
  border:1px solid rgba(216,178,123,.28); background:var(--stout); color:var(--creme-2);
}
.horaire-edit tr[data-ferme="oui"] td:first-child{ color:#8C8375; }

/* --- Jauge d'espace de stockage ------------------------------------------ */
/* Les photos importées vivent en base64 dans localStorage : quelques affiches
   suffisent à saturer le quota, et l'échec ne se voit qu'au moment d'enregistrer.
   La jauge est un verre qui se remplit — le sujet est assez abstrait pour
   mériter une image concrète. */
.quota__piste{
  height:26px; background:rgba(0,0,0,.35); overflow:hidden; margin:.6rem 0 .4rem;
  border:1px solid rgba(216,178,123,.28);
  border-radius:3px 3px 10px 10px; position:relative;
}
.quota__valeur{
  height:100%; background:linear-gradient(180deg,#E0A84A,var(--mout) 40%,#8E6B48);
  position:relative; transition:width .3s ease;
}
/* Le col de mousse, posé au sommet du niveau. */
.quota__valeur::after{
  content:""; position:absolute; inset:0 0 auto; height:6px;
  background:var(--mousse); opacity:.85;
}
.quota[data-alerte="oui"] .quota__valeur{ background:linear-gradient(180deg,#E8A294,#C0392B); }

.outils{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mini{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.6em 1em; border-radius:var(--rayon); cursor:pointer;
  border:1px solid rgba(216,178,123,.32); background:transparent; color:var(--creme-2);
  text-decoration:none; transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.mini:hover{ background:rgba(216,178,123,.14); border-color:var(--or); }
.mini .ic{ color:var(--or); }
.mini--action{ background:var(--mout); border-color:var(--mout); color:var(--stout); font-weight:500; }
.mini--action:hover{ background:#E0A84A; border-color:#E0A84A; color:var(--stout); }
.mini--action .ic{ color:var(--stout); }
.mini--danger{ border-color:rgba(224,138,122,.5); color:#E8A294; }
.mini--danger:hover{ background:rgba(224,138,122,.14); border-color:#E8A294; }
.mini--danger .ic{ color:#E8A294; }
.mini[disabled]{ opacity:.35; cursor:default; }
.mini[disabled]:hover{ background:transparent; border-color:rgba(216,178,123,.32); }

/* Le filet de séparation : des grains d'orge alignés plutôt qu'un trait. */
.filet{
  border:0; height:5px; background:
    radial-gradient(ellipse 2.5px 1.6px at 3px 50%, rgba(216,178,123,.5) 0 100%, transparent 100%) repeat-x 0 0 / 9px 5px;
}

.fiche{
  border:1px solid rgba(216,178,123,.2);
  background:linear-gradient(225deg, rgba(216,178,123,.42) 15px, transparent 15px), var(--noir);
  padding:1rem 1.1rem; margin-bottom:.8rem;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.fiche__entete{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.fiche__entete h3{ margin:0; font-size:1.05rem; }
.fiche__grille{ display:grid; gap:.5rem .9rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }

/* --- Fiche à deux colonnes : le média à gauche, les réglages à droite -----
   La grille « auto-fit » ci-dessus range tous les champs au même gabarit, quel
   que soit leur poids : une affiche s'y retrouvait dans une colonne de 190 px,
   ses trois boutons repliés sur deux lignes, pendant qu'une large bande vide
   s'ouvrait à côté. Les fiches qui tournent autour d'une image posent donc
   l'image dans une vraie colonne, à sa taille, et alignent les champs en
   regard. */
.fiche-media{
  display:grid; gap:1.1rem 1.6rem;
  grid-template-columns:minmax(240px,320px) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){
  .fiche-media{ grid-template-columns:minmax(0,1fr); }
}
/* La colonne de l'affiche : l'aperçu occupe toute la largeur qu'on lui donne,
   et ses boutons tiennent sur une seule rangée sous lui. */
/* La colonne des visuels empile plusieurs aperçus (une bière en a trois :
   détourée, fond de bannière, photo carrée). Sans cet espacement, les
   vignettes se touchaient et on ne voyait plus où finissait l'une. */
.fiche-media__visuel{ display:grid; gap:1rem; align-content:start; }
.fiche-media__visuel .champ--photo{ margin:0; }
.fiche-media__visuel .vignette,
.fiche-media__visuel .vignette__vide{
  width:100%; max-width:none; height:auto;
}
.fiche-media__visuel .champ__boutons{ flex-wrap:wrap; }
.fiche-media__visuel .champ__format{ max-width:100%; width:auto; }

/* La colonne des réglages : une pile de champs, chacun sur toute la largeur,
   sauf ceux qui se lisent naturellement côte à côte (paires). */
.fiche-media__reglages{ display:grid; gap:.55rem .9rem; align-content:start; }
.fiche-media__paire{
  display:grid; gap:.55rem .9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
}
/* Un intertitre discret pour séparer deux groupes de réglages dans la même
   colonne, sans ouvrir un repli pour deux champs. */
.fiche-media__titre{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--or); margin:.6rem 0 -.1rem;
  padding-bottom:.35rem; border-bottom:1px solid rgba(216,178,123,.16);
}
.fiche-media__titre:first-child{ margin-top:0; }
.aide{
  color:#9C9280; font-size:.84rem; line-height:1.6; max-width:70ch; margin-bottom:1.2rem;
  border-left:3px solid var(--houblon); padding-left:.9rem;
}

.rotie{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%,140%);
  background:var(--cuivre); color:var(--mousse); padding:.8em 1.4em; border-radius:100px;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; z-index:120;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none;
}
.rotie[data-visible="true"]{ transform:translate(-50%,0); opacity:1; visibility:visible; }

@media (max-width:820px){
  /* La latérale redevient une bande d'onglets en haut ; c'est alors la page
     entière qui défile, donc on rend leur hauteur naturelle aux colonnes. */
  .admin-coquille{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:auto; min-height:100dvh; overflow:visible; }
  .admin-lateral{ height:auto; overflow:visible; }
  .admin-onglets{ flex-direction:row; flex-wrap:wrap; }
  .admin-onglets__groupe{ flex-basis:100%; padding:.7rem .2rem .2rem; }
  /* La poignée de robinet suppose une colonne : en bande horizontale, sa
     pointe rognerait le libellé du dernier onglet. */
  .admin-onglets button[aria-selected="true"]{
    clip-path:none; margin-right:0; padding-right:.7em; border-radius:var(--rayon);
  }
  .admin-onglets button[aria-selected="true"]::before{ display:none; }
  /* Sans min-width:0, une case de grille prend la largeur de son contenu le
     plus large — ici la paire de boutons de la barre d'état — et toute la page
     se met à défiler horizontalement. */
  .admin-lateral, .admin-principal, .panneaux, .panneau{ min-width:0; }
  .etat .outils{ margin-left:0; width:100%; }
  .etat .outils .mini{ flex:1; min-width:0; justify-content:center; }
  .admin-principal{ height:auto; min-height:0; }
  .panneaux{ overflow:visible; }
  .md{ height:auto; }
  .md__index, .md__editeur{ overflow:visible; }
  .md__liste{ max-height:none; }
  .etat{ position:sticky; bottom:0; z-index:10; }
}

/* ==========================================================================
   ESPACE CLIENT
   --------------------------------------------------------------------------
   Deux décors pour les mêmes composants : la page publique (compte.html) est
   sur le crème du site, le panneau de modération est dans le portail, sur le
   noir. Les règles de champs du portail (.champ) étant écrites pour le fond
   sombre, on les redresse ici uniquement à l'intérieur des cartes claires —
   le portail, lui, n'est pas touché.
   ========================================================================== */

/* --- Le lien d'en-tête ----------------------------------------------------
   Le lien de l'espace client s'ajoute à une rangée déjà pleine : sans ces
   deux réglages, il poussait les icônes de réseaux hors de l'écran sur les
   portables. On resserre le rembourrage des liens de navigation à partir de
   la largeur où la rangée devient juste, plutôt que de réduire la police. */
/* « Espace client » et l'état d'ouverture se tiennent côte à côte au bout de
   la barre : ce sont deux pastilles, elles doivent donc se ressembler. Elles
   partageaient la forme mais rien d'autre — 40px de haut contre 29, deux
   familles de caractères, et un rayon de 3px hérité de .nav a qui rendait
   l'une rectangulaire à côté d'une pilule. On aligne tout sur une seule
   mesure ; seule la pastille de couleur distingue encore l'état. */
/* .nav a impose sa police et son rayon aux liens de la barre : on vise donc
   .nav .nav__compte, plus spécifique, pour que les deux pastilles s'accordent
   vraiment au lieu d'hériter chacune la moitié de la mesure. */
.nav .nav__compte,
.nav .pastille,
.nav__compte,
.pastille.pastille{
  display:inline-flex; align-items:center; gap:.45em;
  height:2.15rem; padding:0 .9em; box-sizing:border-box;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap;
  border:1px solid rgba(216,178,123,.35);
  border-radius:100px !important;
}
.nav__compte{
  margin-left:.4rem; color:var(--creme-2); opacity:.9;
  border-color:rgba(216,178,123,.4);
}
.nav__compte:hover{ border-color:var(--or); opacity:1; }
.nav__compte .ic{ width:1em; height:1em; color:var(--or); }

@media (min-width:861px) and (max-width:1480px){
  .nav a{ padding:.55em .58em; font-size:.95rem; letter-spacing:.05em; }
  .nav__compte{ padding:.42em .7em !important; }
  .entete__reseaux{ margin-left:.25rem; }
}

/* --- L'invitation sur la page des événements ------------------------------ */
.invite-photos{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; padding:clamp(1.2rem,2.6vw,1.8rem);
  background:var(--creme); border:1px solid var(--ligne); border-radius:var(--rayon);
}
.invite-photos h3{ margin:0 0 .3rem; }
.invite-photos p{ margin:0; max-width:52ch; font-size:.94rem; color:var(--encre-doux); }

/* --- La page de l'espace client ------------------------------------------- */
.compte-entree .compte-boite{
  margin-top:clamp(1.6rem,3vw,2.2rem);
  width:min(460px,100%); background:var(--noir);
  border:1px solid rgba(216,178,123,.22); border-radius:var(--rayon);
  padding:clamp(1.4rem,3vw,2rem);
}
.compte-onglets{ display:flex; gap:.4rem; margin-bottom:1.4rem; }
.compte-onglets button{
  flex:1; font:inherit; font-family:var(--titre); font-size:.92rem;
  text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
  padding:.6em .4em; border-radius:var(--rayon);
  background:transparent; color:#B8AC98; border:1px solid rgba(216,178,123,.24);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.compte-onglets button:hover{ color:var(--creme-2); border-color:var(--or); }
.compte-onglets button[aria-selected="true"]{
  background:var(--or); border-color:var(--or); color:var(--noir);
}

.compte-tete{ padding-block:clamp(2.4rem,5vw,3.4rem); }
.compte-grille{
  display:grid; gap:clamp(1.2rem,2.5vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
.compte-carte{
  background:var(--creme-2); border:1px solid var(--ligne);
  border-radius:var(--rayon); padding:clamp(1.2rem,2.4vw,1.6rem);
}
.compte-carte h2{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.15rem; margin:0 0 1.1rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--ligne);
}
.compte-carte h2 .ic{ color:var(--cuivre); }

/* Les champs, redressés pour le fond clair. */
.compte-carte .champ > span{ color:var(--cuivre); }
.compte-carte .champ input,
.compte-carte .champ select{
  background:var(--creme); color:var(--encre); border-color:var(--ligne);
}
.compte-carte .champ input:disabled{ opacity:.6; cursor:not-allowed; }
.compte-carte .champ input:focus,
.compte-carte .champ select:focus{
  border-color:var(--cuivre); box-shadow:0 0 0 3px rgba(169,130,92,.16);
}
.champ__aide{ font-size:.78rem; color:var(--encre-doux); font-family:var(--texte); }
.compte-boite .champ__aide{ color:#8C8375; }

.compte-consentement{
  display:flex; gap:.65rem; align-items:flex-start;
  margin:1rem 0 .5rem; font-size:.88rem; line-height:1.45; cursor:pointer;
}
.compte-consentement input{ margin-top:.2rem; accent-color:var(--cuivre); flex:0 0 auto; }
.compte-boite .compte-consentement{ color:#B8AC98; }

.compte-note{ font-size:.8rem; color:#8C8375; margin:.2rem 0 .9rem; font-style:italic; }
.compte-erreur{ font-size:.88rem; color:#C4553F; margin:.4rem 0; min-height:1.2em; }
.compte-boite .compte-erreur{ color:#E08A7A; }
.compte-boite .btn{ width:100%; justify-content:center; }
.compte-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1rem; }
.compte-carte .mini{ border-color:var(--ligne); color:var(--encre-doux); }
.compte-carte .mini:hover{ border-color:var(--cuivre); color:var(--encre); background:transparent; }
.compte-carte .mini .ic{ color:inherit; }
.compte-carte .mini--danger{ border-color:rgba(196,85,63,.4); color:#C4553F; }
.compte-carte .mini--danger:hover{ background:rgba(196,85,63,.08); border-color:#C4553F; color:#C4553F; }

/* --- La zone de dépôt ------------------------------------------------------ */
.depot{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; cursor:pointer;
  padding:clamp(1.4rem,3.5vw,2.2rem); margin:.4rem 0 1rem;
  border:2px dashed var(--ligne); border-radius:var(--rayon);
  background:var(--creme); color:var(--encre-doux);
  transition:border-color .16s ease, background .16s ease;
}
.depot:hover, .depot:focus-visible, .depot[data-survol="true"]{
  border-color:var(--cuivre); background:rgba(169,130,92,.06);
}
.depot .ic{ width:2rem; height:2rem; color:var(--cuivre); }
.depot p{ margin:0; font-size:.9rem; }

.apercus{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:.8rem; }
.apercu{
  display:grid; grid-template-columns:64px 1fr auto; gap:.7rem; align-items:center;
  background:var(--creme); border:1px solid var(--ligne);
  border-radius:var(--rayon); padding:.5rem;
}
.apercu img{ width:64px; height:64px; object-fit:cover; border-radius:var(--rayon); }
.apercu input{
  font:inherit; font-size:.88rem; padding:.45em .6em;
  border:1px solid var(--ligne); border-radius:var(--rayon);
  background:var(--creme-2); color:var(--encre); min-width:0;
}
.apercu input:focus{ border-color:var(--cuivre); outline:none; }

/* --- Le suivi des envois --------------------------------------------------- */
.suivi{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.suivi__ligne{
  display:grid; grid-template-columns:56px 1fr auto auto; gap:.7rem; align-items:center;
  background:var(--creme); border:1px solid var(--ligne);
  border-radius:var(--rayon); padding:.5rem;
}
.suivi__vignette{ width:56px; height:56px; object-fit:cover; border-radius:var(--rayon); }
.suivi__texte{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.suivi__texte b{ font-size:.92rem; }
.suivi__texte span{ font-size:.82rem; color:var(--encre-doux); }
.suivi__motif{ font-style:italic; color:#C4553F !important; }

.etiquette-etat{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35em .7em; border-radius:100px; white-space:nowrap;
}
.etiquette-etat[data-etat="attente"]{ background:rgba(201,143,63,.16); color:#8A5F22; }
.etiquette-etat[data-etat="publiee"]{ background:rgba(122,139,90,.18); color:#4A5733; }
.etiquette-etat[data-etat="refusee"]{ background:rgba(196,85,63,.14); color:#C4553F; }

/* ==========================================================================
   MODÉRATION DANS LE PORTAIL — sur fond sombre
   ========================================================================== */
.admin-onglets button .compteur{
  margin-left:auto; font-family:var(--mono); font-size:.68rem;
  background:var(--mout); color:var(--stout);
  border-radius:100px; padding:.1em .55em; font-weight:600;
}
/* Les autres panneaux du portail sont des « maître-détail » qui gèrent leur
   propre défilement. Celui-ci est un panneau en flux simple : il lui faut donc
   son rembourrage et sa barre de défilement, sinon le contenu touche les bords
   et le bas de la liste devient inatteignable. */
#p-photosClients{
  overflow-y:auto; overflow-x:hidden;
  padding:clamp(1rem,2.4vw,1.8rem);
}

.moderation__groupe{ margin-bottom:1.8rem; max-width:100%; }
/* Le panneau du portail est déjà borné par sa colonne : sans min-width:0 sur
   le titre, un nom de soirée long poussait le bouton « Tout approuver »
   hors du cadre au lieu de le laisser passer à la ligne. */
.moderation__entete{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem 1rem; flex-wrap:wrap; margin-bottom:.9rem;
  padding-bottom:.5rem; border-bottom:1px solid rgba(216,178,123,.2);
}
.moderation__entete h3{
  margin:0; font-size:1.05rem; color:var(--creme-2);
  min-width:0; overflow-wrap:anywhere;
}
.moderation__entete .mini{ flex:0 0 auto; }
.moderation__grille{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.moderation__carte{
  margin:0; background:var(--fut); border:1px solid rgba(216,178,123,.2);
  border-radius:var(--rayon); overflow:hidden;
  display:flex; flex-direction:column;
}
.moderation__carte img{
  width:100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in;
  border-bottom:1px solid rgba(216,178,123,.2);
}
.moderation__carte figcaption{
  padding:.7rem; display:flex; flex-direction:column; gap:.35rem;
}
.moderation__carte figcaption b{ font-size:.9rem; color:var(--creme-2); }
.moderation__carte figcaption > span{ font-size:.78rem; color:#8C8375; }
.moderation__carte input{
  font:inherit; font-size:.84rem; padding:.4em .55em; width:100%;
  border:1px solid rgba(216,178,123,.28); border-radius:var(--rayon);
  background:var(--stout); color:var(--creme-2);
}
.moderation__carte input:focus{ border-color:var(--mout); outline:none; }
.moderation__gestes{ display:flex; gap:.4rem; margin-top:.25rem; }
.moderation__gestes .mini{ flex:1; justify-content:center; }
.moderation__carte[data-traitee="true"] img{ opacity:.72; }
.moderation__carte .etiquette-etat{ align-self:flex-start; }
.moderation__demo{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }

@media (max-width:640px){
  .suivi__ligne{ grid-template-columns:48px 1fr auto; }
  .suivi__vignette{ width:48px; height:48px; }
  .apercu{ grid-template-columns:48px 1fr auto; }
  .apercu img{ width:48px; height:48px; }
  .invite-photos{ flex-direction:column; align-items:flex-start; }
}

/* Les identifiants du compte de démonstration, à lire à l'écran pendant une
   présentation : en chasse fixe, assez gros pour être vus de loin. */
.demo-identifiants{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem;
  background:var(--stout); border:1px solid rgba(216,178,123,.22);
  border-radius:var(--rayon); padding:.75rem 1rem; margin:.2rem 0 .4rem;
}
.demo-identifiants > div{ display:flex; flex-direction:column; gap:.15rem; }
.demo-identifiants span{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--or);
}
.demo-identifiants b{
  font-family:var(--mono); font-size:.98rem; color:var(--creme-2); user-select:all;
}
.demo-etat{
  display:inline-flex; align-items:center; gap:.35em; margin-left:auto;
  font-family:var(--mono); font-size:.7rem !important; letter-spacing:.08em !important;
  text-transform:none !important; color:#8C8375 !important;
}
.demo-etat .ic{ color:var(--houblon); }

/* L'invitation au compte de démonstration, sous le formulaire de connexion.
   Volontairement discrète : c'est une aide de présentation, pas une offre
   faite au visiteur. Elle disparaît avec le compte de démonstration. */
.demo-invite{
  margin-top:1.4rem; padding-top:1.1rem;
  border-top:1px dashed rgba(216,178,123,.28);
  display:flex; flex-direction:column; gap:.55rem; align-items:flex-start;
}
.demo-invite p{ margin:0; font-size:.84rem; color:#8C8375; line-height:1.5; }
.demo-invite b{ color:var(--creme-2); font-weight:400; }
.demo-invite__ident{ display:flex; flex-wrap:wrap; gap:.5rem; }
.demo-invite__ident span{
  font-family:var(--mono); font-size:.82rem; color:var(--creme-2);
  background:var(--stout); border:1px solid rgba(216,178,123,.22);
  border-radius:var(--rayon); padding:.25em .6em; user-select:all;
}
.demo-invite .mini{ border-color:rgba(216,178,123,.35); color:var(--or); }
.demo-invite .mini:hover{ border-color:var(--or); background:rgba(216,178,123,.1); }

/* ==========================================================================
   ESPACE CLIENT — PHASE 2 : onglets, calendrier, billets
   ========================================================================== */

/* --- La barre d'onglets du tableau de bord -------------------------------- */
.compte-panneaux{ padding-top:clamp(1.6rem,3.5vw,2.4rem); }
.compte-onglets--large{
  gap:.5rem; margin-bottom:clamp(1.4rem,3vw,2.2rem);
  border-bottom:1px solid var(--ligne); padding-bottom:.9rem;
  flex-wrap:wrap;
}
.compte-onglets--large button{
  flex:0 1 auto; display:inline-flex; align-items:center; gap:.5em;
  background:transparent; color:var(--encre-doux); border-color:var(--ligne);
  padding:.6em 1em;
}
.compte-onglets--large button .ic{ width:1.05em; height:1.05em; }
.compte-onglets--large button:hover{ color:var(--encre); border-color:var(--cuivre); }
.compte-onglets--large button[aria-selected="true"]{
  background:var(--noir); border-color:var(--noir); color:var(--creme-2);
}
.compte-onglets__compte{
  font-family:var(--mono); font-size:.66rem; line-height:1;
  background:var(--cuivre); color:var(--creme-2);
  border-radius:100px; padding:.28em .5em;
}
.compte-onglets--large button[aria-selected="true"] .compte-onglets__compte{
  background:var(--or); color:var(--noir);
}

.compte-soustitre{
  display:flex; align-items:center; gap:.45em;
  font-size:1.05rem; margin:0 0 .3rem;
}
.compte-soustitre .ic{ color:var(--houblon); width:1em; height:1em; }
.aide-client{ font-size:.9rem; color:var(--encre-doux); margin:.2rem 0 1.1rem; max-width:62ch; }
.compte-carte--seule{ max-width:520px; }
.bloc-photos + .bloc-photos{ margin-top:2rem; }

/* --- Le calendrier des soirées -------------------------------------------- */
.calendrier{
  display:grid; gap:1rem; margin-bottom:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.calendrier__carte{
  display:grid; grid-template-columns:92px 1fr; gap:.9rem;
  background:var(--creme-2); border:1px solid var(--ligne);
  border-radius:var(--rayon); overflow:hidden;
}
.calendrier__carte[data-sienne="true"]{ border-color:var(--cuivre); }
.calendrier__affiche{
  width:92px; height:100%; min-height:150px; object-fit:cover;
  object-position:top center;   /* l'affiche porte son titre en haut */
  background:var(--noir);
}
.calendrier__affiche--vide{ display:grid; place-items:center; color:rgba(216,178,123,.4); }
.calendrier__affiche--vide .ic{ width:1.8rem; height:1.8rem; }
.calendrier__corps{
  display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;
  padding:.85rem .9rem .9rem 0;
}
.calendrier__corps h4{ margin:0; font-size:1.02rem; line-height:1.2; }
.calendrier__pastille{
  display:inline-flex; align-items:center; gap:.35em;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cuivre); border:1px solid rgba(169,130,92,.4);
  border-radius:100px; padding:.22em .6em;
}
.calendrier__pastille .ic{ width:.9em; height:.9em; }
.calendrier__date{ margin:0; font-size:.84rem; color:var(--encre-doux); }
.calendrier__etat{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.8rem; color:var(--encre-doux); font-style:italic;
}
.calendrier__etat[data-rempli="true"]{ color:#4A5733; font-style:normal; }
.calendrier__etat .ic{ width:.95em; height:.95em; }
.calendrier__corps .btn{ margin-top:auto; }

.repli--calendrier{ margin-top:1.2rem; }
.repli--calendrier > summary{ font-family:var(--titre); font-size:1rem; }

/* --- La fenêtre d'envoi ---------------------------------------------------- */
.fenetre-envoi{
  position:fixed; inset:0; z-index:150; display:none;
  background:rgba(15,12,9,.82); padding:clamp(.8rem,3vw,2rem);
}
.fenetre-envoi[data-ouvert="true"]{ display:grid; place-items:center; }
.fenetre-envoi__panneau{
  width:min(560px,100%); max-height:88vh; display:flex; flex-direction:column;
  background:var(--creme); border-radius:var(--rayon);
  box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden;
}
.fenetre-envoi__tete{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.2rem .9rem; border-bottom:1px solid var(--ligne);
}
.fenetre-envoi__tete h3{ margin:0; font-size:1.15rem; }
.fenetre-envoi__tete p{ margin:.2rem 0 0; font-size:.85rem; color:var(--encre-doux); }
.fenetre-envoi__fermer{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--ligne); color:var(--encre-doux);
  font-size:1rem; line-height:1;
}
.fenetre-envoi__fermer:hover{ border-color:var(--cuivre); color:var(--encre); }
.fenetre-envoi__corps{ padding:1.1rem 1.2rem; overflow-y:auto; }
.fenetre-envoi__corps .depot{ margin-top:0; }
.fenetre-envoi__pied{
  display:flex; justify-content:flex-end; gap:.7rem; align-items:center;
  padding:.9rem 1.2rem; border-top:1px solid var(--ligne); background:var(--creme-2);
}
.fenetre-envoi__pied .mini{ border-color:var(--ligne); color:var(--encre-doux); }
.fenetre-envoi__pied .mini:hover{ border-color:var(--cuivre); color:var(--encre); background:transparent; }

/* --- La galerie des photos publiées ---------------------------------------- */
.galerie-client{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.galerie-client__vignette{
  display:block; padding:0; cursor:pointer; text-align:left;
  background:var(--creme-2); border:1px solid var(--ligne);
  border-radius:var(--rayon); overflow:hidden;
}
.galerie-client__vignette:hover{ border-color:var(--cuivre); }
.galerie-client__vignette img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.galerie-client__vignette span{
  display:block; padding:.45rem .55rem; font-size:.78rem; color:var(--encre-doux);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- Les billets ------------------------------------------------------------ */
.billets{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.billet{
  display:grid; grid-template-columns:110px 1fr;
  background:var(--noir); color:var(--creme-2);
  border-radius:var(--rayon); overflow:hidden;
  /* Le cran de déchirure entre la souche et le corps du billet. */
  background-image:radial-gradient(circle at 110px 0, transparent 7px, transparent 7px);
}
.billet__visuel{ position:relative; background:var(--stout); }
.billet__visuel img{
  width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.9;
}
.billet__places{
  position:absolute; left:0; top:0; right:0;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-align:center;
  background:rgba(15,12,9,.82); color:var(--or); padding:.32em;
}
.billet__corps{ padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.3rem; }
.billet__corps h4{ margin:0; font-size:1.05rem; color:var(--creme-2); line-height:1.2; }
.billet__quand{ margin:0; font-size:.84rem; color:var(--or); }
.billet__lieu{
  margin:0; font-size:.8rem; color:#B8AC98;
  display:inline-flex; align-items:center; gap:.35em;
}
.billet__lieu .ic{ width:.9em; height:.9em; }
.billet__souche{
  margin-top:auto; padding-top:.7rem; border-top:1px dashed rgba(216,178,123,.35);
  display:flex; flex-direction:column; gap:.25rem;
}
.billet__codebarres{ width:100%; height:26px; fill:var(--creme-2); opacity:.85; }
.billet__numero{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:#8C8375;
}

.billets--passes{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.billet--passe{
  grid-template-columns:1fr; background:var(--creme-2); color:var(--encre);
  border:1px solid var(--ligne);
}
.billet--passe h4{ color:var(--encre); }
.billet--passe .billet__quand{ color:var(--encre-doux); font-size:.82rem; }
.billet--passe .compte-actions{ margin-top:.6rem; }
.billet--passe .mini{ border-color:var(--ligne); color:var(--encre-doux); }
.billet--passe .mini:hover{ border-color:var(--cuivre); color:var(--encre); background:transparent; }

@media (max-width:520px){
  .calendrier{ grid-template-columns:1fr; }
  .compte-onglets--large button span:not(.compte-onglets__compte){ font-size:.86rem; }
  .billet{ grid-template-columns:88px 1fr; }
}

/* Attribution d'un billet, dans le portail. */
.billet-attribution{
  display:grid; gap:.7rem; align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--stout); border:1px solid rgba(216,178,123,.2);
  border-radius:var(--rayon); padding:.9rem 1rem;
}
.billet-attribution .champ{ margin-bottom:0; }
.billet-attribution .mini{ justify-content:center; height:fit-content; }

/* --- Le poste de travail des événements -----------------------------------
   Deux volets qui se répondent : à gauche une liste qu'on fouille, à droite un
   calendrier où l'on situe. La fiche s'édite en fenêtre, pas en place — la
   colonne de droite appartient au calendrier. */
.ev{ display:grid; grid-template-columns:320px 1fr; height:100%; min-height:0; }
.ev__liste{
  display:flex; flex-direction:column; min-height:0;
  border-right:1px solid rgba(216,178,123,.14); background:rgba(0,0,0,.3);
}
/* La recherche est toujours là : c'est le geste qui sauve une longue liste,
   il ne doit pas attendre un seuil de fiches pour apparaître. */
.ev__chercher{ padding:.7rem .8rem; border-bottom:1px solid rgba(216,178,123,.12); position:relative; }
.ev__chercher::before{
  content:""; position:absolute; left:1.35rem; top:50%; width:11px; height:11px;
  margin-top:-6px; border:1.5px solid var(--cuivre); border-radius:50%; pointer-events:none;
}
.ev__chercher::after{
  content:""; position:absolute; left:2.15rem; top:50%; width:6px; height:1.5px;
  margin-top:3px; background:var(--cuivre); transform:rotate(45deg); pointer-events:none;
}
.ev__chercher input{
  width:100%; padding:.45rem .6rem .45rem 1.9rem; font:inherit; font-size:.88rem;
  color:var(--mousse); background:rgba(0,0,0,.3);
  border:1px solid rgba(216,178,123,.2); border-radius:5px;
}
.ev__chercher input:focus{ outline:none; border-color:var(--cuivre); }

.ev__filtres{ display:flex; gap:.3rem; padding:.6rem .8rem; border-bottom:1px solid rgba(216,178,123,.12); }
.ev__filtre{
  flex:1; padding:.34rem .3rem; font:inherit; font-size:.76rem; cursor:pointer;
  color:var(--encre-doux); background:transparent; border-radius:var(--rayon);
  border:1px solid rgba(216,178,123,.16);
}
.ev__filtre:hover{ color:var(--mousse); border-color:var(--cuivre); }
.ev__filtre--actif{ color:var(--fut); background:var(--or); border-color:var(--or); font-weight:600; }

/* La liste défile seule : le calendrier reste en place à côté. */
.ev__fiches{ flex:1; overflow-y:auto; margin:0; padding:.4rem; list-style:none; min-height:0; }
.ev__fiches--nue{ overflow:visible; padding:0; }
.ev__fiche > button{
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  padding:.45rem .5rem; font:inherit; color:var(--creme-2); cursor:pointer;
  background:transparent; border:0; border-radius:5px;
}
.ev__fiche > button:hover{ background:rgba(216,178,123,.09); }
.ev__fiche--vise > button{ background:rgba(216,178,123,.16); }
.ev__vignette{
  flex:none; width:38px; height:38px; object-fit:cover;
  border-radius:var(--rayon-zone,4px); background:rgba(216,178,123,.12);
}
.ev__vignette--vide{ border:1px dashed rgba(216,178,123,.3); }
.ev__fiche span{ min-width:0; }
.ev__titre{ display:block; font-size:.88rem; overflow-wrap:anywhere; }
.ev__meta{ display:block; font-size:.74rem; color:var(--encre-doux); margin-top:.1rem; }
/* Un événement passé s'efface un peu : il est là pour consultation, pas pour
   qu'on le prépare encore. */
.ev__fiche--passe .ev__vignette{ filter:grayscale(.55); opacity:.75; }
.ev__fiche--passe .ev__titre{ color:var(--encre-doux); }
.ev__jeton{
  flex:none; margin-left:auto; padding:.1rem .38rem; font-size:.65rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--encre-doux);
  border:1px solid rgba(216,178,123,.22); border-radius:var(--rayon-zone,3px);
}
.ev__vide{ padding:1.4rem .8rem; font-size:.85rem; color:var(--encre-doux); text-align:center; }
.ev__pied{ padding:.7rem .8rem; border-top:1px solid rgba(216,178,123,.12); }
.ev__pied .mini{ width:100%; justify-content:center; }

/* --- Le calendrier --------------------------------------------------------- */
.ev__calendrier{ display:flex; flex-direction:column; min-height:0; padding:1rem 1.2rem; }
.ev__mois{ display:flex; align-items:center; gap:.4rem; margin-bottom:.9rem; }
.ev__mois h3{
  flex:1; margin:0; font-size:1.1rem; text-align:center;
  color:var(--mousse); text-transform:uppercase; letter-spacing:.04em;
}
/* Le chevron du jeu d'icônes pointe déjà vers la gauche : « mois précédent »
   le garde tel quel, « suivant » fait demi-tour. */
.ev__mois [data-bond="1"] svg{ transform:rotate(180deg); }
#ev-aujourdhui{ font-size:.76rem; }

/* Sept colonnes égales, six rangées de hauteur identique : la grille reste
   calme quel que soit le jour le plus chargé du mois — les cases pleines
   disent « +2 » plutôt que de s'étirer. */
.ev__grille{
  flex:1; min-height:0; display:grid;
  grid-template-columns:repeat(7,1fr);
  /* Les rangées portent maintenant des affiches : on leur donne de quoi les
     montrer, tout en gardant six rangées d'égale hauteur. */
  grid-template-rows:auto repeat(6,minmax(84px,1fr));
  gap:1px; background:rgba(216,178,123,.14);
  border:1px solid rgba(216,178,123,.14); border-radius:var(--rayon-panneau); overflow:hidden;
}
.ev__entete{
  padding:.4rem 0; font-size:.7rem; text-align:center; text-transform:uppercase;
  letter-spacing:.06em; color:var(--encre-doux); background:rgba(0,0,0,.34);
}
.ev__case{
  display:flex; flex-direction:column; gap:.12rem; min-height:0;
  padding:.2rem; background:var(--fut); overflow:hidden;
}
.ev__case--hors{ background:rgba(0,0,0,.22); }
/* Les jours qui débordent du mois affiché s'effacent, puces comprises : sans
   cela, un événement du mois suivant se lit comme s'il appartenait à celui-ci. */
.ev__case--hors .ev__num{ opacity:.35; }
.ev__case--hors .ev__puce{ opacity:.45; }
.ev__case--aujourdhui{ box-shadow:inset 0 0 0 1px var(--cuivre); }
.ev__case--vise{ background:rgba(216,178,123,.1); }
/* Le numéro du jour est un bouton : cliquer une case vide crée un événement
   à cette date, ce qui est le geste naturel dans un calendrier. */
.ev__num{
  align-self:flex-start; padding:.05rem .3rem; font:inherit; font-size:.74rem;
  color:var(--encre-doux); background:transparent; border:0; border-radius:var(--rayon-zone,3px); cursor:pointer;
}
.ev__num:hover{ color:var(--fut); background:var(--or); }
/* Une case montre l'affiche du spectacle : dans un calendrier, l'image se
   reconnaît d'un coup d'œil là où un titre tronqué ne dit plus rien. Le nom
   reste posé en bandeau au bas de la vignette. */
.ev__puces{ position:relative; flex:1; min-height:0; }
.ev__puce{
  position:absolute; inset:0; display:block; padding:0; overflow:hidden;
  background:rgba(216,178,123,.1); border:0; border-radius:var(--rayon-zone,3px); cursor:pointer;
}
.ev__puce img{ width:100%; height:100%; object-fit:cover; display:block; }
.ev__puce__vide{
  display:block; width:100%; height:100%;
  background:repeating-linear-gradient(45deg,rgba(216,178,123,.1) 0 5px,transparent 5px 10px);
}
/* Le titre repose sur un dégradé plutôt que sur un bandeau plein : l'affiche
   reste lisible derrière lui. */
.ev__puce__nom{
  position:absolute; left:0; right:0; bottom:0; padding:.32rem .25rem .12rem;
  font-size:.6rem; line-height:1.15; text-align:left; color:var(--mousse);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(transparent,rgba(8,7,5,.9) 55%);
}
.ev__puce:hover{ box-shadow:inset 0 0 0 2px var(--or); }
.ev__puce--passe img{ filter:grayscale(.6); opacity:.72; }
.ev__puce--passe:hover img{ filter:grayscale(.2); opacity:1; }

/* Les points du carrousel, quand plusieurs affiches se relaient. */
.ev__points{
  position:absolute; right:.2rem; top:.2rem; z-index:1;
  display:flex; gap:.16rem; padding:.14rem .22rem;
  background:rgba(8,7,5,.6); border-radius:var(--rayon-panneau);
}
.ev__point{
  width:5px; height:5px; padding:0; cursor:pointer;
  background:rgba(239,230,212,.4); border:0; border-radius:50%;
}
.ev__point--actif{ background:var(--or); }
.ev__point:hover{ background:var(--mousse); }

/* Un jour chargé : le numéro porte son compte et ouvre la liste du jour. */
.ev__num--charge{ display:flex; align-items:center; gap:.22rem; }
.ev__num__compte{
  padding:0 .24rem; font-size:.6rem; font-weight:600;
  color:var(--fut); background:var(--or); border-radius:var(--rayon-panneau);
}

/* --- Le relevé d'un événement passé ---------------------------------------
   Ce qui a eu lieu est un fait : on l'affiche, on ne l'édite pas. */
.ev__fige{
  padding:.8rem; background:rgba(0,0,0,.24);
  border:1px solid rgba(216,178,123,.16); border-radius:6px;
}
.ev__fige__mot{
  display:flex; align-items:flex-start; gap:.45rem; margin:0 0 .7rem;
  font-size:.78rem; line-height:1.45; color:var(--encre-doux);
}
.ev__fige__mot svg{ flex:none; width:15px; height:15px; margin-top:.1rem; }
.ev__releve{ display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; margin:0; }
.ev__releve dt{ font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--encre-doux); }
.ev__releve dd{ margin:0; font-size:.88rem; color:var(--creme-2); overflow-wrap:anywhere; }
.ev__affiche{ margin-top:.8rem; }
.ev__affiche span{
  display:block; margin-bottom:.3rem; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--encre-doux);
}
/* Une affiche de spectacle est un portrait : la borner en largeur seule lui
   laisse 270 px de haut, et elle chasse la description hors de l'écran. On
   plafonne donc la hauteur, la largeur suit. */
.ev__affiche img{ max-width:180px; max-height:130px; width:auto; border-radius:4px; }

/* --- Une photo de soirée ---------------------------------------------------
   Ce bloc empruntait .entree-menu, une grille taillée pour un plat : quatre
   colonnes (nom, prix 80px, description, bouton) pour trois champs seulement.
   La légende tombait dans la colonne du prix et le bouton dans celle de la
   description. Trois colonnes à lui, et chaque chose retrouve sa place. */
.entree-photo{
  display:grid; gap:.4rem .8rem; align-items:end;
  grid-template-columns:minmax(120px,auto) minmax(160px,1fr) auto;
  padding-bottom:.5rem; margin-bottom:.5rem;
  border-bottom:1px dotted rgba(216,178,123,.16);
}
.entree-photo .champ{ margin-bottom:0; }
.entree-photo > button{ justify-self:end; align-self:end; }
@media (max-width:700px){
  .entree-photo{ grid-template-columns:1fr auto; }
}

/* Sous 1100 px, les deux volets ne tiennent plus côte à côte : le calendrier
   passe sous la liste plutôt que de s'écraser en colonnes illisibles. */
@media (max-width:1100px){
  .ev{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:auto; }
  .ev__liste{ border-right:0; border-bottom:1px solid rgba(216,178,123,.14); }
  .ev__fiches{ max-height:40vh; }
  .ev__grille{ min-height:420px; }
}

/* --- Réserver une place ----------------------------------------------------
   Même grammaire que l'album : une fenêtre posée sur la page, sur le noir du
   site. Une soirée gratuite se réserve aussi — la salle a une capacité, et
   savoir combien de monde vient change la préparation. */
.reserver{
  position:fixed; inset:0; z-index:96; display:none;
  background:rgba(14,12,9,.82); backdrop-filter:blur(3px);
}
.reserver[data-ouvert="true"]{ display:grid; place-items:center; padding:clamp(.8rem,3vw,2rem); }
.reserver__panneau{
  position:relative; width:min(460px,100%); max-height:100%; overflow-y:auto;
  padding:clamp(1.4rem,4vw,2rem);
  background:var(--noir-2); color:var(--creme-2);
  border:1px solid rgba(216,178,123,.28); border-radius:var(--rayon);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:album-entre .28s cubic-bezier(.2,.7,.3,1);
}
.reserver__fermer{
  position:absolute; top:.7rem; right:.7rem; width:2rem; height:2rem;
  display:grid; place-items:center; cursor:pointer; font-size:1rem;
  color:var(--creme-2); background:rgba(0,0,0,.4);
  border:1px solid rgba(216,178,123,.25); border-radius:50%;
}
.reserver__fermer:hover{ border-color:var(--or); color:var(--or); }

.reserver__tete{ margin-bottom:1.2rem; }
.reserver__tete h2{
  margin:.2rem 0 .4rem; font-size:clamp(1.3rem,3.4vw,1.7rem);
  text-transform:uppercase; letter-spacing:.02em; text-wrap:balance;
}
.reserver__quand{ margin:0; font-size:.9rem; color:var(--or); line-height:1.45; }

.reserver__form{ display:grid; gap:.75rem; }
.reserver__form .champ{ display:flex; flex-direction:column; gap:.25rem; margin:0; }
.reserver__form .champ > span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--creme-2); opacity:.75;
}
.reserver__form .champ i{ font-style:normal; opacity:.6; text-transform:none; letter-spacing:0; }
.reserver__form input,
.reserver__form select,
.reserver__form textarea{
  width:100%; padding:.55rem .7rem; font:inherit; font-size:.95rem;
  color:var(--creme-2); background:rgba(0,0,0,.35);
  border:1px solid rgba(216,178,123,.22); border-radius:4px;
}
.reserver__form textarea{ resize:vertical; min-height:2.6rem; }
.reserver__form input:focus,
.reserver__form select:focus,
.reserver__form textarea:focus{ outline:none; border-color:var(--or); }

/* Le total est le moment où le client décide : il se détache du formulaire. */
.reserver__total{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-top:.3rem; padding:.7rem .8rem;
  background:rgba(216,178,123,.1);
  border:1px solid rgba(216,178,123,.2); border-radius:4px;
}
.reserver__total span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; opacity:.75;
}
.reserver__total b{ font-family:var(--titre); font-size:1.3rem; color:var(--or); }

.reserver__mot{ margin:0; font-size:.82rem; line-height:1.5; color:var(--creme-2); opacity:.7; }
.reserver__erreur{
  margin:0; padding:.5rem .7rem; font-size:.85rem; color:#E8A08A;
  background:rgba(224,138,122,.1);
  border:1px solid rgba(224,138,122,.3); border-radius:4px;
}
.reserver__envoyer{ width:100%; justify-content:center; margin-top:.2rem; }

/* La confirmation prend la place du formulaire : le numéro est ce que le
   client doit retenir, donc il occupe le centre. */
.reserver__fait{ text-align:center; display:grid; gap:.8rem; }
.reserver__fait h2{
  margin:0; font-size:clamp(1.3rem,3.4vw,1.7rem);
  text-transform:uppercase; letter-spacing:.02em; text-wrap:balance;
}
.reserver__numero{
  display:grid; gap:.25rem; padding:1rem;
  background:rgba(216,178,123,.1);
  border:1px dashed rgba(216,178,123,.4); border-radius:4px;
}
.reserver__numero span{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.7;
}
.reserver__numero b{
  font-family:var(--mono); font-size:1.4rem; letter-spacing:.05em; color:var(--or);
}
.reserver__recap{ margin:0; font-size:.95rem; }

/* Le titre d'un événement à venir mène à sa réservation : il doit se
   reconnaître comme cliquable sans devenir un bouton. */
.evenement__titre{
  font:inherit; color:inherit; text-align:left; padding:0;
  background:none; border:0; cursor:pointer;
  border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease;
}
.evenement__titre:hover{ color:var(--or); border-bottom-color:var(--or); }
.evenement__titre:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }
/* Le bouton monte de 2 px au survol et son ombre s'allonge : sans cette
   réserve, le conteneur (qui rogne ce qui le dépasse) coupait le haut du
   bouton en plein mouvement. On compense la marge du haut pour que la mise
   en page ne bouge pas d'un pixel. */
.evenement__action{ margin:.5rem 0 0; padding:.4rem 0 .5rem; overflow:visible; }
.evenement__btn{ font-size:.85rem; padding:.5em 1.1em; }
.album__action{ margin:.6rem 0 0; }