/* ==========================================================================
   Bar do Aldo — feuille de style
   --------------------------------------------------------------------------
   Direction : « Copacabana After Dark ».

   Le site vit dans le noir. Ce n'est pas une préférence graphique : le bar
   ouvre à 17 h 30 et ferme au milieu de la nuit, et son badge est déjà noir et
   orange. Un fond clair aurait menti sur l'endroit.

   Trois choses portent l'identité :
     — le noir chaud du fond, jamais un gris neutre ;
     — l'orange du badge, employé seul et franc, sans dégradé ;
     — la calçada portuguesa, le trottoir en vagues de Copacabana, qui ponctue
       les sections. C'est le graphisme le plus reconnaissable du quartier ;
       il est dessiné en SVG dans les pages, donc net à toute taille.

   Le site assume un seul monde visuel, sombre : il n'y a pas de version
   claire. Toutes les couleurs sont donc posées explicitement — le fond du
   body compris, sinon la page emprunterait celui de son hôte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Les jetons
   -------------------------------------------------------------------------- */

:root {
  /* Le noir tire vers le brun : c'est la couleur du bois du comptoir vu de
     nuit, pas celle d'un écran éteint. */
  --fond:        #0B0A09;
  --fond-2:      #16120F;
  --fond-3:      #1F1A15;
  --trait:       #332A22;
  --trait-clair: #4A3D31;

  --encre:       #F3ECE1;
  --encre-douce: #C4B8AA;
  --sourdine:    #9A8D7F;

  --orange:      #F26522;
  --orange-vif:  #FF7A3D;
  --ambre:       #F5C518;

  --ok:          #7BB661;

  --titre:  "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --script: "Yellowtail", cursive;
  --texte:  "Barlow", "Helvetica Neue", Arial, sans-serif;
  --etroit: "Barlow Condensed", "Barlow", Arial, sans-serif;

  --large:   1240px;
  --etroite: 720px;

  --marge:  clamp(20px, 5vw, 64px);
  --entete: 74px;
}

/* --------------------------------------------------------------------------
   2. Remise à zéro et ossature
   -------------------------------------------------------------------------- */

/* « Caché » veut dire caché. L'attribut « hidden » du navigateur n'est qu'un
   display:none sans spécificité : toute règle qui pose un display l'emporte
   sur lui. Le site s'en sert pour escamoter des sections entières (les
   promotions quand il n'y en a aucune, les soirées passées quand la liste est
   vide) ; sans cette règle, une de ces sections resterait visible et vide le
   jour où on lui donnerait un display. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;   /* Aucun défilement « aimanté » : la page suit le
                              geste, elle ne le corrige pas. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
}

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--marge);
}

.enveloppe--etroite { max-width: var(--etroite); }

/* Visible seulement pour les lecteurs d'écran. */
.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(46px, 9vw, 108px); }
h2 { font-size: clamp(32px, 5.5vw, 62px); }
h3 { font-size: clamp(20px, 2.6vw, 28px); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* L'étiquette qui coiffe chaque section. Elle nomme la section en petites
   capitales espacées ; c'est le seul endroit où l'orange sert de texte. */
.oeil {
  font-family: var(--etroit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
  display: block;
}

/* Le script du logo, employé au compte-gouttes : une respiration entre deux
   blocs de capitales, jamais un paragraphe entier. */
.script {
  font-family: var(--script);
  text-transform: none;
  letter-spacing: 0;
  color: var(--orange);
  font-size: .78em;
  line-height: 1.1;
}

.plomb {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--encre-douce);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--etroit);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 24px;
  border: 2px solid var(--orange);
  border-radius: 999px;
  background: var(--orange);
  color: #100C08;
  cursor: pointer;
  transition: background .14s linear, border-color .14s linear, color .14s linear;
}
.bouton:hover { background: var(--orange-vif); border-color: var(--orange-vif); }

.bouton--fantome {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait-clair);
}
.bouton--fantome:hover {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange);
}

.bouton--wa { background: var(--ok); border-color: var(--ok); }
.bouton--wa:hover { background: #8CC873; border-color: #8CC873; }

/* Le logo WhatsApp était bien passé au bouton, mais un SVG sans dimensions
   dans un conteneur flex se replie à zéro : il était là, invisible. */
.bouton svg { width: 19px; height: 19px; flex: none; }

/* --------------------------------------------------------------------------
   5. L'en-tête
   -------------------------------------------------------------------------- */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--entete);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .18s linear, border-color .18s linear;
  border-bottom: 1px solid transparent;
}
/* Dès qu'on quitte le héros, l'en-tête se pose sur un fond opaque : sans ça,
   le logo blanc disparaîtrait sur la première photo claire de la carte. */
.entete.est-posee {
  background: rgba(11, 10, 9, .96);
  border-bottom-color: var(--trait);
}

.entete__interieur {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.marque img { width: 46px; height: 46px; object-fit: contain; }
.marque__mot {
  font-family: var(--titre);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
}
.marque__mot span { color: var(--orange); }

.nav { display: flex; align-items: center; gap: 4px; }

.nav a {
  font-family: var(--etroit);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 2px;
  color: var(--encre);
  transition: color .12s linear, background .12s linear;
}
.nav a:hover { color: var(--orange); }
.nav a[aria-current="page"] { color: var(--orange); }

/* Le sélecteur de langue. Deux codes côte à côte plutôt qu'un menu
   déroulant : il n'y a que deux langues, autant les montrer toutes les deux. */
.langues {
  display: flex;
  align-items: center;
  border: 1px solid var(--trait-clair);
  border-radius: 2px;
  overflow: hidden;
  flex: none;
}
.langues button {
  font-family: var(--etroit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 11px;
  border: none;
  background: transparent;
  color: var(--sourdine);
  cursor: pointer;
  transition: background .12s linear, color .12s linear;
}
.langues button:hover { color: var(--encre); }
.langues button[aria-pressed="true"] {
  background: var(--orange);
  color: #100C08;
}

/* Le bouton du menu sur téléphone. */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--trait-clair);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex: none;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 20px; height: 2px;
  background: var(--encre);
  transition: transform .16s linear, opacity .16s linear;
}
.hamburger span { top: 21px; }
.hamburger span::before { left: 0; top: -6px; }
.hamburger span::after  { left: 0; top:  6px; }

.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Le panneau de navigation en plein écran. */
.tiroir-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--fond);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--entete) var(--marge) var(--marge);
  transform: translateY(-100%);
  transition: transform .22s ease-out;
  visibility: hidden;
}
.tiroir-nav.est-ouvert { transform: translateY(0); visibility: visible; }
.tiroir-nav a {
  font-family: var(--titre);
  font-size: clamp(30px, 8vw, 52px);
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--trait);
}
.tiroir-nav a:hover { color: var(--orange); }

@media (max-width: 940px) {
  .nav { display: none; }
  .hamburger { display: block; }
}

/* --------------------------------------------------------------------------
   6. Le héros
   -------------------------------------------------------------------------- */

.heros {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--fond);
}

.heros__fond {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Deux voiles superposés : un dégradé vers le bas pour que le texte tienne, et
   un voile orange très léger qui réchauffe la vidéo et la raccorde au badge. */
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(11,10,9,.72) 0%, rgba(11,10,9,.28) 38%, rgba(11,10,9,.94) 100%),
    linear-gradient(to top right, rgba(242,101,34,.18), transparent 55%);
}

.heros__contenu {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(40px, 8vh, 90px);
  padding-top: calc(var(--entete) + 40px);
}

.heros__badge {
  width: clamp(96px, 15vw, 150px);
  margin-bottom: 26px;
}

.heros h1 { margin-bottom: 20px; }

.heros__sous {
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--encre-douce);
  max-width: 46ch;
  margin-bottom: 32px;
}

.heros__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* La bande défilante en bas du héros. Elle reprend mot pour mot le tour du
   badge — c'est la même phrase, elle tourne juste dans l'autre sens. */
.bandeau {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  background: rgba(11,10,9,.7);
  overflow: hidden;
  padding: 12px 0;
}
.bandeau__piste {
  display: flex;
  width: max-content;
  animation: defile 34s linear infinite;
}
.bandeau__piste span {
  font-family: var(--etroit);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 0 26px;
  white-space: nowrap;
}
.bandeau__piste span b { color: var(--orange); font-weight: 600; }

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   7. La vague de calçada
   -------------------------------------------------------------------------- */

.vague {
  display: block;
  width: 100%;
  height: 34px;
  color: var(--orange);
  opacity: .55;
}
/* Le décalage est posé par le script au fil du défilement, en 1:1 avec le
   geste : la vague avance quand la page avance, elle ne rattrape rien. */
.vague path { transition: none; }

/* --------------------------------------------------------------------------
   8. Les sections
   -------------------------------------------------------------------------- */

.section { padding: clamp(64px, 10vw, 128px) 0; }
.section--serree { padding: clamp(44px, 6vw, 78px) 0; }
.section--sombre { background: var(--fond-2); }

.section__entete { margin-bottom: clamp(32px, 5vw, 56px); }
.section__entete h2 { margin-bottom: 14px; }

/* Le titre et son bouton « tout voir », sur la même ligne quand il y a la
   place, l'un sous l'autre sinon. */
.section__barre {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* --------------------------------------------------------------------------
   9. L'histoire de la maison
   -------------------------------------------------------------------------- */

.maison {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.maison__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--fond-3);
}
.maison__image img { width: 100%; height: 100%; object-fit: cover; }

/* Le millésime, posé à cheval sur le coin de la photo. */
.maison__annee {
  position: absolute;
  right: -6px; bottom: -14px;
  font-family: var(--titre);
  font-size: clamp(56px, 9vw, 112px);
  line-height: .8;
  color: var(--orange);
  letter-spacing: -.02em;
  pointer-events: none;
  text-shadow: 0 4px 24px rgba(11,10,9,.9);
}

@media (max-width: 820px) {
  .maison { grid-template-columns: 1fr; }
  .maison__annee { right: 4px; }
}

/* --------------------------------------------------------------------------
   10. La carte
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Le bloc en deux : les affiches à gauche, l'aperçu du cardápio à droite
   --------------------------------------------------------------------------
   L'aperçu était une grille de huit cartes photo qui tenait deux écrans de
   haut. Une carte de bar se lit comme une liste de prix : nom, points de
   conduite, prix. Les photos ne disparaissent pas pour autant — elles
   paraissent en grand au survol, dans le coin de l'écran.
   -------------------------------------------------------------------------- */

.duo { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .duo { grid-template-columns: .95fr 1.05fr; } }

/* --- Le carrousel d'affiches --------------------------------------------- */

.duo__carrousel {
  position: relative;
  overflow: hidden;
  background: var(--fond-3);
  aspect-ratio: 4 / 3;
}

.carrousel__piste {
  display: flex;
  height: 100%;
  transition: transform .5s ease;
}
@media (prefers-reduced-motion: reduce) { .carrousel__piste { transition: none; } }
/* En mode planche la page est figée pour la capture : une piste en cours de
   glissement donnerait une image différente à chaque prise. */
html.planche .carrousel__piste { transition: none; }

.carrousel__vue { position: relative; flex: 0 0 100%; height: 100%; }
.carrousel__vue img,
.carrousel__lien { display: block; width: 100%; height: 100%; }
.carrousel__vue img { object-fit: cover; }

.carrousel__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(16,12,8,.92) 0%, rgba(16,12,8,.45) 42%, rgba(16,12,8,0) 72%);
  pointer-events: none;
}
.carrousel__texte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 2.4vw, 28px);
  color: var(--encre);
}
.carrousel__texte h3 {
  font-family: var(--titre);
  font-size: clamp(22px, 2.6vw, 32px);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 6px;
}
.carrousel__texte p {
  font-size: 15px;
  line-height: 1.45;
  color: var(--encre-douce);
  max-width: 44ch;
}

.carrousel__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(16,12,8,.55);
  color: var(--encre);
  cursor: pointer;
  transition: background .14s linear, border-color .14s linear;
}
.carrousel__fleche:hover { background: var(--orange); border-color: var(--orange); color: #100C08; }
.carrousel__fleche svg { width: 20px; height: 20px; }
.carrousel__fleche--prec { left: 12px; }
.carrousel__fleche--suiv { right: 12px; }

.carrousel__points {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.carrousel__point {
  width: 8px; height: 8px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .14s linear, border-color .14s linear;
}
.carrousel__point[aria-current="true"] { background: var(--orange); border-color: var(--orange); }

/* --- L'aperçu du cardápio ------------------------------------------------ */

.duo__carte {
  background: var(--fond-3);
  padding: clamp(22px, 2.8vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  /* Coin coupé en haut à gauche : le panneau s'emboîte dans l'affiche comme
     un coin d'étiquette relevé, plutôt que deux rectangles côte à côte. */
  clip-path: polygon(0 22px, 22px 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 899px) { .duo__carte { clip-path: none; } }

.entrees { display: grid; grid-template-columns: 1fr; gap: 2px; }

.entree {
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--trait);
  border-radius: 2px;
  transition: background-color .2s ease;
}
.entree:hover { background: rgba(242,101,34,.08); }
.entree:focus-visible { outline: 2px solid var(--orange); outline-offset: -1px; }
.entree--survolee { outline: 2px solid var(--orange); outline-offset: -1px; }

.entree__titre { display: flex; align-items: baseline; gap: 10px; }
.entree__nom {
  font-family: var(--titre);
  font-size: 17px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.1;
}
/* Les points de conduite : un trait pointillé qui prend toute la place libre
   entre le nom et le prix, remonté sur la ligne de base. */
.entree__points {
  flex: 1;
  border-bottom: 1px dotted var(--trait-clair);
  transform: translateY(-.28em);
}
.entree__prix {
  font-family: var(--etroit);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ambre);
  background: rgba(245,197,24,.10);
  padding: .15em .5em;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
/* La note de prix (« each · 4 for R$ 35 ») casserait la ligne à points : elle
   reste dans la carte complète, pas dans cet aperçu. */
.entree__prix small { display: none; }
/* La description part dans le HTML pour les moteurs, mais pas à l'écran. */
.entree__desc { display: none; }

/* --- La photo qui paraît au survol --------------------------------------- */

.apercu-entree {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  z-index: 60;
  width: min(300px, 34vw);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--trait-clair);
  border-radius: 2px;
  background: var(--fond-3);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.apercu-entree--visible { opacity: 1; transform: none; }
.apercu-entree__img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .apercu-entree { transition: none; } }
/* Sur un téléphone il n'y a pas de survol, et le panneau masquerait la page. */
@media (max-width: 640px) { .apercu-entree { display: none; } }

/* La carte complète : des lignes, pas des cartes. Une carte de bar se lit
   comme une liste de prix, pas comme une galerie. */
.carte-section { margin-bottom: clamp(44px, 6vw, 72px); }

.carte-section__titre {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--orange);
  margin-bottom: 6px;
}
.carte-section__note {
  color: var(--sourdine);
  font-size: 15.5px;
  margin: 12px 0 22px;
}

.ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--trait);
}
.ligne:last-child { border-bottom: none; }

.ligne__nom {
  font-family: var(--etroit);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre);
}
.ligne__desc {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 15.5px;
  color: var(--sourdine);
  max-width: 62ch;
}
.ligne__prix {
  font-family: var(--etroit);
  font-size: 21px;
  font-weight: 600;
  color: var(--ambre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.ligne__prix small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.ligne--epuise .ligne__nom,
.ligne--epuise .ligne__prix { color: var(--trait-clair); }

/* --------------------------------------------------------------------------
   11. Les spectacles
   -------------------------------------------------------------------------- */

.shows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.show {
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .14s linear;
}
.show:hover { border-color: var(--orange); }

.show__affiche {
  aspect-ratio: 4 / 5;
  background: var(--fond-3);
  position: relative;
  overflow: hidden;
}
.show__affiche img { width: 100%; height: 100%; object-fit: cover; }

/* La date, en pastille sur le coin de l'affiche. */
.show__date {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--orange);
  color: #100C08;
  font-family: var(--etroit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 2px;
}
.show__date--bientot { background: var(--ambre); }

.show__corps { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.show__artiste { font-family: var(--titre); font-size: 24px; text-transform: uppercase; line-height: 1.02; }
.show__genre {
  font-family: var(--etroit);
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}
.show__desc { font-size: 15.5px; color: var(--sourdine); flex: 1; }
.show__pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--trait);
  font-family: var(--etroit);
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.show__couvert { color: var(--ambre); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Quand il n'y a rien à l'affiche, on le dit franchement plutôt que de
   laisser un trou. */
.vide {
  border: 1px dashed var(--trait-clair);
  border-radius: 2px;
  padding: clamp(32px, 6vw, 56px);
  text-align: center;
  color: var(--sourdine);
  font-size: 17px;
  max-width: 60ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   13. Horaires et adresse
   -------------------------------------------------------------------------- */

/* Les trois colonnes partent de la même ligne et se terminent ensemble.
   Auparavant chacune flottait à sa propre hauteur : la pastille « ouvert »
   démarrait au-dessus de l'adresse, l'encart promo dépassait des deux côtés,
   et la colonne du milieu s'arrêtait aux boutons pendant que les horaires
   descendaient sept lignes plus bas. */
/* Deux rangées : le titre en haut à gauche, les deux colonnes de contenu en
   dessous, et l'encart promo à droite qui traverse les deux — il monte donc au
   sommet du bloc, à la hauteur du titre. */
.trouver {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
.trouver__entete { grid-column: 1 / -1; }
@media (max-width: 820px) { .trouver { grid-template-columns: 1fr; } }

/* Chaque colonne empile son contenu avec un pas régulier, plutôt que des
   marges posées élément par élément qui se cumulaient ou s'annulaient. */
.trouver > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* Empilées sur téléphone, les trois colonnes deviennent trois blocs qui se
   suivent : sans ce trait, l'adresse collait à la dernière fermeture et les
   deux se lisaient comme un seul paragraphe. */
@media (max-width: 820px) {
  .trouver > * + * { padding-top: 26px; border-top: 1px solid var(--trait); }
  /* Le titre n'est pas un bloc de contenu : pas de trait sous lui. */
  .trouver__entete + * { padding-top: 0; border-top: none; }
}

/* La colonne des horaires : la pastille, puis le tableau, puis les
   fermetures annoncées. Le tableau prend toute la largeur de la colonne pour
   que ses heures s'alignent sur le bord droit de celle-ci. */
.trouver .horaire { max-width: none; margin: 0; }

/* L'adresse tient en trois lignes courtes ; les horaires en font sept. Plutôt
   que de laisser les boutons flotter juste sous l'adresse (un trou dessous) ou
   de les pousser tout en bas du bloc (un trou plus grand encore, puisque
   l'encart promo est la plus haute des trois colonnes), on leur donne un
   retrait fixe : ils se posent à quelques lignes de l'adresse, à hauteur du
   milieu du tableau d'horaires. */
@media (min-width: 821px) {
  #adresse .liens-contact { margin-top: 4px; }
}

.horaire { width: 100%; border-collapse: collapse; max-width: 420px; }
.horaire td {
  padding: 5px 0;
  border-bottom: 1px solid var(--trait);
  font-family: var(--etroit);
  font-size: 15px;
  letter-spacing: .04em;
}
.horaire tr:last-child td { border-bottom: none; }
.horaire td:first-child { text-transform: uppercase; color: var(--encre-douce); }
.horaire td:last-child {
  text-align: right;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.horaire tr.est-aujourdhui td { color: var(--orange); font-weight: 600; }

/* La pastille « ouvert / fermé », calculée à l'heure de Rio. */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--etroit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--trait-clair);
  color: var(--sourdine);
}
.etat::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.etat--ouvert { color: var(--ok); border-color: rgba(123,182,97,.5); }
.etat--ferme  { color: var(--sourdine); }

/* La pastille et son avis forment un couple : l'avis se met à la ligne sous
   elle, aligné à gauche comme tout le reste de la colonne. */
#etat-ouverture { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* « Closed tomorrow — Christmas ». En orange : c'est la seule ligne du bloc
   qui contredit le tableau juste en dessous, elle doit se voir. */
.etat__avis {
  font-family: var(--etroit);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--orange);
}

/* --------------------------------------------------------------------------
   Les fermetures annoncées
   --------------------------------------------------------------------------
   Sous le tableau des horaires : les dates des deux mois qui viennent où le
   bar sera fermé alors que la grille dit le contraire. Chaque ligne aligne
   la date à gauche et sa raison à droite, comme le tableau au-dessus, pour
   que les deux se lisent d'un seul mouvement.
   -------------------------------------------------------------------------- */

.fermetures { width: 100%; }
.fermetures[hidden] { display: none; }

.fermetures__titre {
  font-family: var(--etroit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}

.fermetures__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 1px solid var(--trait);
  font-family: var(--etroit);
  font-size: 15px;
  letter-spacing: .04em;
}
.fermetures__ligne:last-child { border-bottom: none; }

.fermetures__date {
  color: var(--encre);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fermetures__note { color: var(--sourdine); text-align: right; }

/* Sur la page Menu le bloc n'a pas de colonne où se ranger : on l'encadre
   pour qu'il se distingue de la carte qui le suit, et on le borne en largeur
   pour qu'il ne traverse pas la page. */
.fermetures--carte {
  max-width: 520px;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: 18px 20px;
  border: 1px solid var(--trait);
  border-left: 2px solid var(--orange);
  background: var(--fond-2);
}

.adresse { font-size: 16px; line-height: 1.55; margin-bottom: 0; }
.adresse strong { display: block; font-size: 19px; font-weight: 600; margin-bottom: 2px; }

.liens-contact { display: flex; flex-wrap: wrap; gap: 12px; }

/* Le téléphone et l'Instagram, sous les boutons. Même graphie que le tableau
   d'horaires en face — étiquette à gauche, valeur alignée à droite — pour que
   les deux colonnes se lisent comme une seule grille. */
.coordonnees { width: 100%; max-width: 340px; }
.coordonnees__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 1px solid var(--trait);
  font-family: var(--etroit);
  font-size: 15px;
  letter-spacing: .04em;
}
.coordonnees__ligne:last-child { border-bottom: none; }
.coordonnees dt, .coordonnees dd { min-width: 0; overflow-wrap: anywhere; }
.coordonnees dt { text-transform: uppercase; color: var(--encre-douce); }
.coordonnees dd { margin: 0; text-align: right; }
.coordonnees a { color: var(--encre); text-decoration: none; }
.coordonnees a:hover { color: var(--orange); }

.note-horaire {
  max-width: 340px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sourdine);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   14. Le pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--fond-2);
  border-top: 1px solid var(--trait);
  padding: clamp(48px, 7vw, 80px) 0 32px;
}
.pied__haut {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .pied__haut { grid-template-columns: 1fr; text-align: left; }
}

/* Le badge tourne lentement, sans fin. C'est un sceau : il tourne comme un
   sous-verre qu'on fait pivoter sur la table. */
.pied__badge {
  width: 108px; height: 108px;
  animation: tourne 44s linear infinite;
}
@keyframes tourne {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pied__liens { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied__liens a {
  font-family: var(--etroit);
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-douce);
}
.pied__liens a:hover { color: var(--orange); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--trait);
  font-size: 14.5px;
  color: var(--sourdine);
}
.pied__bas a { text-decoration: none; }
.pied__bas a:hover { color: var(--orange); }

/* --------------------------------------------------------------------------
   15. Le bouton WhatsApp flottant
   -------------------------------------------------------------------------- */

.wa-flottant {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 50;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ok);
  color: #0B0A09;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  transition: transform .14s ease-out;
}
.wa-flottant:hover { transform: scale(1.06); }
.wa-flottant svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   16. Les apparitions au défilement
   -------------------------------------------------------------------------- */

/* Sobre et court : le bloc monte de quelques pixels en arrivant dans le cadre.
   Pas de rebond, pas de retard — sinon on lit avant que ce soit arrivé. */
.parait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .34s ease-out, transform .34s ease-out;
}
.parait.est-la { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .parait { opacity: 1; transform: none; transition: none; }
  .bandeau__piste, .pied__badge { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   17. Le mode « planche »
   --------------------------------------------------------------------------
   Une capture d'écran ne défile pas : les blocs qui attendent le défilement
   pour paraître resteraient invisibles, et le héros plein écran repousserait
   tout le reste hors du cadre. En ajoutant ?planche=1 à l'adresse, on obtient
   la page entière, tout de suite, à hauteur réelle. Cela ne sert qu'à la
   vérification visuelle avant publication ; un visiteur ne tombe jamais
   dessus.
   -------------------------------------------------------------------------- */

html.planche .parait { opacity: 1; transform: none; transition: none; }
html.planche .heros { min-height: 620px; }
html.planche .bandeau__piste,
html.planche .pied__badge { animation: none; }

/* Le message « rien à l'affiche » vit dans la grille des spectacles : sans
   cette ligne il n'occuperait qu'une colonne et flotterait à gauche. */
.shows .vide, .duo .vide { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   18. L'espace client
   -------------------------------------------------------------------------- */

/* La « porte » : connexion et inscription. Un seul panneau centré, étroit —
   personne ne remplit un formulaire sur toute la largeur d'un écran. */
.porte {
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 56px) 0;
}
.porte__panneau {
  width: 100%;
  max-width: 440px;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: clamp(24px, 4vw, 40px);
}
.porte__panneau h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 10px; }
.porte__intro { color: var(--sourdine); font-size: 15.5px; margin-bottom: 24px; }
.porte__bascule {
  margin-top: 20px;
  font-size: 15px;
  color: var(--sourdine);
  text-align: center;
}
.porte__panneau .bouton { width: 100%; justify-content: center; }
.porte__panneau .bouton--fantome { margin-top: 14px; }

.lien {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Les champs. L'étiquette est au-dessus, jamais dans le champ : un libellé
   qui disparaît dès qu'on écrit oblige à se souvenir de ce qu'on remplit. */
.champ { display: block; margin-bottom: 16px; }
.champ > span {
  display: block;
  font-family: var(--etroit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 6px;
}
.champ input,
.champ select {
  width: 100%;
  font-family: var(--texte);
  font-size: 16px;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--trait-clair);
  border-radius: 2px;
  padding: 11px 13px;
}
.champ input:focus, .champ select:focus { border-color: var(--orange); outline: none; }
.champ input[type="file"] { padding: 9px 11px; color: var(--sourdine); }

.case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--encre-douce);
  cursor: pointer;
}
.case input { margin-top: 4px; accent-color: var(--orange); flex: none; }

/* Les avis : une erreur, une confirmation, une note. */
.avis {
  border-left: 3px solid;
  padding: 11px 14px;
  margin-bottom: 20px;
  font-size: 15.5px;
  border-radius: 2px;
}
.avis--erreur { border-color: var(--orange); background: rgba(242,101,34,.1); color: var(--encre); }
.avis--ok     { border-color: var(--ok);     background: rgba(123,182,97,.1);  color: var(--encre); }
.avis--info   { border-color: var(--trait-clair); background: var(--fond-2);   color: var(--sourdine); }

/* Le tableau de bord. */
.tableau { max-width: 900px; margin: 0 auto; }
.tableau__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.tableau__entete h1 { font-size: clamp(32px, 6vw, 54px); }

.bloc {
  border-top: 1px solid var(--trait);
  padding-top: 28px;
  margin-top: 36px;
}
.bloc h2 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 20px; }

/* Un billet ressemble à un billet : une souche à gauche, le détail au milieu,
   le numéro à droite. */
.billets { display: grid; gap: 12px; }
.billet {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 16px 20px;
}
.billet__date {
  font-family: var(--etroit);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
  border-right: 1px dashed var(--trait-clair);
  padding-right: 20px;
  white-space: nowrap;
}
.billet__corps h3 { font-family: var(--titre); font-size: 21px; text-transform: uppercase; }
.billet__corps p { font-size: 14.5px; color: var(--sourdine); margin: 4px 0 0; }
.billet__no {
  font-family: var(--etroit);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sourdine);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .billet { grid-template-columns: 1fr; gap: 10px; }
  .billet__date { border-right: none; border-bottom: 1px dashed var(--trait-clair); padding: 0 0 10px; }
}

.envoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}
.envoi .champ { margin-bottom: 0; }
.envoi .bouton { justify-content: center; }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.vignette { margin: 0; border: 1px solid var(--trait); border-radius: 2px; overflow: hidden; }
.vignette img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.vignette figcaption {
  font-family: var(--etroit);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 10px;
  color: var(--sourdine);
  background: var(--fond-2);
}
.vignette--approuvee figcaption { color: var(--ok); }
.vignette--refusee img { opacity: .4; }

/* --------------------------------------------------------------------------
   19. La bande vidéo
   --------------------------------------------------------------------------
   Une bande étroite, pleine largeur, entre deux sections. Elle est basse
   exprès : à pleine hauteur elle couperait la page en deux et forcerait un
   défilement pour rien.
   -------------------------------------------------------------------------- */

.bande-video {
  height: clamp(180px, 26vw, 340px);
  overflow: hidden;
  background: var(--fond-3);
  position: relative;
}
.bande-video video { width: 100%; height: 100%; object-fit: cover; }
/* Un voile sombre pour que la bande reste un accent et non un projecteur. */
.bande-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,10,9,.55), rgba(11,10,9,.2), rgba(11,10,9,.55));
}

/* --------------------------------------------------------------------------
   20. Le trottoir de Copacabana en fond
   --------------------------------------------------------------------------
   La vraie calçada portuguesa, très assourdie, derrière la section « où nous
   trouver ». C'est le sol du quartier : il a sa place sous l'adresse, et
   nulle part ailleurs.
   -------------------------------------------------------------------------- */

/* Ce bloc respirait trop : beaucoup d'air au-dessus du titre, et un grand
   vide sous les horaires. On resserre le haut et le bas ici seulement — les
   autres sections gardent leur rythme. */
.section--calcada { padding: clamp(40px, 4.5vw, 60px) 0; }
.section--calcada .section__entete { margin-bottom: clamp(20px, 2.2vw, 28px); }

.section--calcada h2 { font-size: clamp(30px, 3.4vw, 42px); }

.section--calcada { position: relative; overflow: hidden; }

/* La photo couvre le bloc UNE SEULE FOIS. Elle a été cadrée comme un motif
   entier : la répéter en petites tuiles cassait ses vagues et donnait une
   mosaïque de mosaïques. `cover` la fait déborder plutôt que se répéter. */
.section--calcada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/textures/calcada.jpg") center / cover no-repeat;
  opacity: .05;
  z-index: 0;
  pointer-events: none;
}
/* Un dégradé la fait naître et mourir dans le fond de la page, pour qu'aucun
   bord franc ne trahisse l'image en haut ni en bas du bloc. */
.section--calcada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom,
    var(--fond) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, var(--fond) 100%);
  pointer-events: none;
}
.section--calcada > * { position: relative; z-index: 1; }

/* Une soirée sans affiche : le badge de la maison sur l'ardoise du bar. */
.show__affiche--repli {
  display: grid;
  place-items: center;
  background: url("../../images/textures/ardoise.jpg") center/cover, var(--fond-3);
}
.show__affiche--repli .show__badge {
  width: 58%;
  height: auto;
  opacity: .85;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.6));
}

/* --------------------------------------------------------------------------
   21. La bannière vidéo d'une page intérieure
   --------------------------------------------------------------------------
   Plus basse que le héros de l'accueil : c'est une page intérieure, elle ne
   doit pas redemander un plein écran avant de montrer son contenu. Assez
   haute quand même pour qu'on voie la salle et pas seulement un bandeau.
   -------------------------------------------------------------------------- */

.banniere-video {
  position: relative;
  min-height: clamp(320px, 46vh, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fond-2);
}
.banniere-video__fond {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.banniere-video__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(11,10,9,.78) 0%, rgba(11,10,9,.34) 45%, rgba(11,10,9,.95) 100%);
}
.banniere-video__contenu {
  position: relative;
  width: 100%;
  padding: calc(var(--entete) + 32px) 0 clamp(28px, 5vh, 52px);
}
.banniere-video h1 { font-size: clamp(38px, 7.5vw, 84px); }

html.planche .banniere-video { min-height: 340px; }

/* --------------------------------------------------------------------------
   22. L'encart promotionnel vertical
   --------------------------------------------------------------------------
   Une colonne au format story, à côté des horaires et de l'adresse. Les trois
   tiennent sur une ligne au large ; en dessous de 1100 px l'encart passe sous
   les deux autres plutôt que de les écraser, et il cesse d'imposer sa
   hauteur.
   -------------------------------------------------------------------------- */

@media (min-width: 821px) and (max-width: 1099px) {
  /* Trois colonnes ici aussi, mais plus serrées : l'encart monte au sommet à
     côté du titre, comme au large. Rangé sous l'adresse, il laissait un vide
     à sa gauche aussi grand que lui. */
  .trouver {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) 180px;
    grid-template-rows: auto 1fr;
    row-gap: 20px;
  }
  .trouver__entete { grid-column: 1 / 3; grid-row: 1; }
  .trouver__heures { grid-column: 1; grid-row: 2; }
  #adresse         { grid-column: 2; grid-row: 2; }
  #promo-verticale { grid-column: 3; grid-row: 1 / -1; align-self: start; }
  #promo-verticale .promo-vert { width: 180px; }
  #adresse::before {
    content: "";
    display: block;
    height: var(--h-pastille, 31px);
  }
}

@media (min-width: 1100px) {
  .trouver {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 200px;
    grid-template-rows: auto 1fr;
    row-gap: clamp(18px, 2vw, 26px);
  }
  .trouver__entete   { grid-column: 1 / 3; grid-row: 1; }
  .trouver__heures   { grid-column: 1; grid-row: 2; }
  #adresse           { grid-column: 2; grid-row: 2; }
  /* Le sommet du bloc, sur les deux rangées. L'encart se cale en haut plutôt
     que de s'étirer : sinon l'affiche s'allonge et se fait recadrer. */
  #promo-verticale   { grid-column: 3; grid-row: 1 / -1; align-self: start; }

  /* La colonne de droite démarre au niveau de LUNDI, pas au-dessus. Plutôt
     qu'un retrait calculé en dur — qui se décale dès que la pastille grandit,
     par exemple quand un avis de fermeture s'y ajoute — la colonne se cale sur
     la hauteur réelle de la pastille d'en face. */
  #adresse::before {
    content: "";
    display: block;
    height: var(--h-pastille, 31px);
  }
}

.promo-vert {
  display: block;
  width: 100%;
  text-decoration: none;
  border: 1px solid var(--trait);
  border-radius: 2px;
  overflow: hidden;
  background: var(--fond-2);
  transition: border-color .14s linear, transform .14s ease-out;
  max-width: 200px;
}
a.promo-vert:hover { border-color: var(--orange); transform: translateY(-3px); }

.promo-vert__media {
  aspect-ratio: 9 / 16;
  background: var(--fond-3);
  overflow: hidden;
}
.promo-vert__media video,
.promo-vert__media img { width: 100%; height: 100%; object-fit: cover; }

.promo-vert__corps { padding: 12px 14px 14px; }
.promo-vert__corps h3 {
  font-family: var(--titre);
  font-size: 19px;
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 5px;
}
.promo-vert__corps p { font-size: 13.5px; line-height: 1.4; color: var(--sourdine); }