/* ===========================================================
   Cartagena · Streetfood & Salsa — feuille de styles
   -----------------------------------------------------------
   Deux mondes :
     - le MIDI : la picada chilienne — enseigne peinte (capitales
       + script), ardoise, étiquette de prix fluo, tampon 40 ans ;
     - le SOIR : la pochette de salsa des années 70 sur fond tabac —
       serif ronde, vinyle, soirées en face A / face B.

   Un monde se pose avec  data-monde="midi" | "soir"  sur <html>
   ou sur n'importe quel bloc. Tout ce qui change d'un monde à
   l'autre passe par des variables (§1) : un bloc prend toujours le
   monde de son plus proche ancêtre, même imbriqué dans l'autre.

   Ce qui est RÉPÉTÉ sur plusieurs pages vit ici ; ce qui est propre
   à une page vit dans le <style> de cette page.

   Sommaire
     0.  Polices (hébergées ici) et couleurs de base
     1.  Les deux mondes (jetons)
     2.  Base
     3.  Mise en page
     4.  Titres et textes
     5.  Boutons
     6.  Menu
     7.  Pied de page
     8.  En-tête de page
     9.  Objets du midi : étiquette fluo, ardoise
     10. Objets du soir : disque (pochette + vinyle), faces et pistes
     11. Clichés (galerie et aperçu)
     12. Encadrés
     13. Photos, placeholders, « à compléter »
     14. Responsive
     15. Mouvement réduit, bouton pause
   =========================================================== */

/* ---------- 0. Polices et couleurs de base ----------
   Les polices sont servies par le site (dossier polices/, sous-ensemble
   latin de Google Fonts) : aucune requête vers un tiers, donc aucune
   adresse IP transmise — ce que disent les mentions légales.
   Fraunces : graisses 800–900 et axe SOFT figé à 100, le seul utilisé.

   Chaque police a sa doublure : une police du système recalée
   (size-adjust, ascent-override…) sur les mesures de la vraie, pour
   que le texte ne saute pas quand elle arrive. Valeurs calculées avec
   fontTools sur une phrase de la page d'accueil.                    */
@font-face { font-family: 'Alfa Slab One';    src: url("polices/alfa-slab-one.woff2") format("woff2");    font-weight: 400;     font-display: swap; }
@font-face { font-family: 'Anton';            src: url("polices/anton.woff2") format("woff2");            font-weight: 400;     font-display: swap; }
@font-face { font-family: 'Fraunces';         src: url("polices/fraunces.woff2") format("woff2");         font-weight: 800 900; font-display: swap; }
@font-face { font-family: 'Libre Franklin';   src: url("polices/libre-franklin.woff2") format("woff2");   font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url("polices/permanent-marker.woff2") format("woff2"); font-weight: 400;     font-display: swap; }
@font-face { font-family: 'Yellowtail';       src: url("polices/yellowtail.woff2") format("woff2");       font-weight: 400;     font-display: swap; }

@font-face { font-family: 'Alfa Slab repli';      src: local("Georgia");                                      size-adjust: 113.9%; ascent-override: 90.9%;  descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces repli';       src: local("Georgia Bold"), local("Georgia-Bold");           font-weight: 800 900; ascent-override: 98.2%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: 'Anton repli';          src: local("Impact");                                       size-adjust: 95.6%;  ascent-override: 123%;   descent-override: 34.4%; line-gap-override: 0%; }
@font-face { font-family: 'Libre Franklin repli'; src: local("Arial"), local("ArialMT");                       font-weight: 400 500; ascent-override: 96.4%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: 'Libre Franklin repli'; src: local("Arial Bold"), local("Arial-BoldMT");             font-weight: 600 700; ascent-override: 96.4%; descent-override: 24.6%; line-gap-override: 0%; }

:root {
  --largeur:   1280px;
  --gouttiere: 28px;
  --entete:    90px;   /* hauteur du menu collant + une marge : les ancres s'arrêtent dessous */

  --police-texte:    'Libre Franklin', 'Libre Franklin repli', Arial, sans-serif;
  --police-enseigne: 'Alfa Slab One', 'Alfa Slab repli', Georgia, serif;
  --police-pochette: 'Fraunces', 'Fraunces repli', Georgia, serif;
  --police-affiche:  'Anton', 'Anton repli', Impact, sans-serif;
  --police-script:   'Yellowtail', cursive;
  --police-marqueur: 'Permanent Marker', cursive;

  /* Couleurs de base des objets (ardoise, pochette, étoile, vinyle),
     identiques dans les deux mondes. Les jetons des mondes (§1) gardent
     leurs hexadécimaux : tests/contrastes.test.js les lit tels quels. */
  --tabac:          #1F130C;
  --tabac-nuit:     #120B07;
  --creme-pochette: #F6E7D2;
  --jaune-pochette: #FFC247;
  --rouge-pochette: #D8402B;
  --encre-picada:   #221814;
  --creme-picada:   #F6ECDB;
  --rouge-enseigne: #D8432B;
  --rouge-panneau:  #CC3F27;
  --moutarde:       #F2B632;
  --ardoise:        #1F3A2B;
  --bois:           #8A5A32;
  --fluo:           #FFE81A;
  --rouge-prix:     #C8281A;
  --sillon:         #141010;
  --sillon-clair:   #201B19;
}

/* ---------- 1. Les deux mondes (jetons) ----------
   Les couples texte / fond sont vérifiés par
   tests/contrastes.test.js : garder des hexadécimaux à 6 chiffres. */

[data-monde="midi"] {
  color-scheme: light;
  --selection-fond:  #F2B632;
  --selection-texte: #221814;
  --fond:          #F6ECDB;
  --fond-2:        #FFFAF0;
  --encre:         #221814;
  --doux:          #6A584B;
  --filet:         #221814;
  --filet-fin:     rgba(34,24,20,.18);
  --accent:        #D8432B;
  --accent-texte:  #B8341F;
  --vif:           #F2B632;
  --vif-texte:     var(--accent-texte);
  --vert:          #3F6E2A;
  --btn-fond:      #CC3F27;
  --btn-texte:     #FFFFFF;
  --btn-bord:      #221814;
  --btn-ombre:     #221814;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  --lueur: none;

  --titre-police:     var(--police-enseigne);
  --titre-graisse:    400;
  --titre-axes:       normal;
  --titre-casse:      uppercase;
  --titre-espace:     0;
  --titre-interligne: .95;
  --titre-ombre:      .05em .05em 0 var(--accent);
  --em-police:        var(--police-script);
  --em-graisse:       400;
  --em-taille:        1.2em;
  --em-couleur:       var(--vert);
  --em-inclinaison:   -3deg;
  --em-retrait:       .15em;
  --etiquette-police: var(--police-enseigne);
  --etiquette-espace: .02em;
  --accroche-police:  var(--police-script);
  --accroche-taille:  2.125rem;
  --accroche-casse:   none;
  --accroche-espace:  0;
  --accroche-couleur: var(--accent);
  --accroche-inclinaison: -4deg;

  --cliche-bord:           #FFFDF6;
  --cliche-marge:          10px;
  --cliche-ombre:          0 10px 24px rgba(34,24,20,.18);
  --cliche-inclinaison:    1;
  --cliche-legende-police: var(--police-script);
  --cliche-legende-taille: 1.25rem;
  --cliche-legende-casse:  none;
  --cliche-legende-espace: 0;
  --cliche-legende-fond:   #FFFDF6;
  --cliche-legende-texte:  #221814;
}

[data-monde="soir"] {
  color-scheme: dark;   /* barres de défilement et contrôles du navigateur en sombre */
  --selection-fond:  #FFC247;
  --selection-texte: #1F130C;
  --fond:          #1F130C;
  --fond-2:        #2A1A12;
  --encre:         #F6E7D2;
  --doux:          #CDB39A;
  --filet:         #F6E7D2;
  --filet-fin:     rgba(246,231,210,.18);
  --accent:        #D8402B;
  --accent-texte:  #EE5A36;
  --vif:           #FFC247;
  --vif-texte:     var(--vif);
  --btn-fond:      #FFC247;
  --btn-texte:     #1F130C;
  --btn-bord:      #FFC247;
  --btn-ombre:     #D8402B;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  --lueur: radial-gradient(60% 55% at 72% 50%, rgba(238,90,54,.38), transparent 70%),
           radial-gradient(40% 40% at 20% 90%, rgba(255,194,71,.14), transparent 70%);

  --titre-police:     var(--police-pochette);
  --titre-graisse:    900;
  --titre-axes:       'SOFT' 100, 'opsz' 144;
  --titre-casse:      none;
  --titre-espace:     -.035em;
  --titre-interligne: .9;
  --titre-ombre:      none;
  --em-police:        var(--police-pochette);
  --em-graisse:       900;
  --em-taille:        1em;
  --em-couleur:       var(--vif);
  --em-inclinaison:   0deg;
  --em-retrait:       0;
  --etiquette-police: var(--police-affiche);
  --etiquette-espace: .08em;
  --accroche-police:  var(--police-affiche);
  --accroche-taille:  1.0625rem;
  --accroche-casse:   uppercase;
  --accroche-espace:  .2em;
  --accroche-couleur: var(--vif);
  --accroche-inclinaison: 0deg;

  --cliche-bord:           transparent;
  --cliche-marge:          0px;
  --cliche-ombre:          10px 12px 0 rgba(0,0,0,.35);
  --cliche-inclinaison:    0;
  --cliche-legende-police: var(--police-affiche);
  --cliche-legende-taille: .875rem;
  --cliche-legende-casse:  uppercase;
  --cliche-legende-espace: .12em;
  --cliche-legende-fond:   #120B07;
  --cliche-legende-texte:  #FFC247;
}

[data-monde] {
  background-color: var(--fond);
  background-image: var(--grain);
  color: var(--encre);
  transition: background-color .45s ease, color .45s ease;
}

/* Contenu propre à un monde — sur l'accueil seulement, où la bascule
   agit sur <html>. L'autre monde est retiré de l'affichage ET de
   l'arbre d'accessibilité. */
html[data-monde="midi"] .pour-soir,
html[data-monde="soir"] .pour-midi { display: none !important; }

/* ---------- 2. Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-padding : une ancre (#dates, #mentions) ou un élément qui prend
   le focus au clavier ne s'arrête jamais sous le menu collant. */
html { scroll-behavior: smooth; scroll-padding-top: var(--entete); }

body {
  font-family: var(--police-texte);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection-fond); color: var(--selection-texte); text-shadow: none; }

/* Lien d'évitement : premier arrêt du clavier, invisible jusque-là. */
.evitement {
  position: absolute;
  z-index: 60;
  left: var(--gouttiere);
  top: 10px;
  transform: translateY(-160%);
  background: var(--encre);
  color: var(--fond);
  font-size: .875rem;
  font-weight: 700;
  padding: 12px 18px;
  text-decoration: none;
}
.evitement:focus { transform: none; }

/* Le focus arrive sur <main> par le lien d'évitement : pas d'anneau autour de toute la page. */
main:focus { outline: none; }

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

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem;
  background: var(--fond-2);
  border: 1px solid var(--filet-fin);
  padding: 2px 6px;
}

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

/* Un lien au fil d'un texte se distingue autrement que par sa couleur
   (WCAG 1.4.1) : souligné. Boutons, menu et pistes, qui ne sont pas du
   texte courant, n'en ont pas. Repris de la passe accessibilité du 17/09. */
p a:not(.btn), li a:not(.btn):not(.nav-lien) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3. Mise en page ---------- */
.enveloppe {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-inline: var(--gouttiere);
  width: 100%;
}

.section      { padding-block: 88px; }
.section--fin { padding-block: 56px; }
.filet-haut   { border-top: 2px solid var(--filet); }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* ---------- 4. Titres et textes ----------
   Le midi : capitales d'enseigne, ombre dure rouge, second mot en
   script vert avocat. Le soir : serif ronde et grasse, second mot
   en jaune. Le « second mot » est un <em> : <h2>Debout à Santiago,
   <em>assis à Bruxelles.</em></h2>                                */
h1, h2, .titre {
  font-family: var(--titre-police);
  font-weight: var(--titre-graisse);
  font-variation-settings: var(--titre-axes);
  text-transform: var(--titre-casse);
  letter-spacing: var(--titre-espace);
  line-height: var(--titre-interligne);
  text-shadow: var(--titre-ombre);
}
h1 em, h2 em, .titre em {
  display: block;
  width: fit-content;
  font-family: var(--em-police);
  font-weight: var(--em-graisse);
  font-style: normal;
  font-size: var(--em-taille);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  color: var(--em-couleur);
  text-shadow: none;
  padding-left: var(--em-retrait);
  transform: rotate(var(--em-inclinaison));
  transform-origin: left center;
}
h3 {
  font-family: var(--titre-police);
  font-weight: var(--titre-graisse);
  font-variation-settings: var(--titre-axes);
  line-height: 1.15;
}

.page-titre { font-size: clamp(2.5rem, 7vw, 6rem); }
.h2         { font-size: clamp(1.875rem, 4.4vw, 3.625rem); }
.h2--moyen  { font-size: clamp(1.625rem, 3.4vw, 2.5rem); }

.surtitre {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vif-texte);
  margin-bottom: 14px;
}

.chapeau {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--doux);
  max-width: 600px;
  margin-top: 20px;
}

.intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--doux);
  max-width: 560px;
  margin-top: 14px;
}

.accroche {
  display: inline-block;
  font-family: var(--accroche-police);
  font-size: var(--accroche-taille);
  text-transform: var(--accroche-casse);
  letter-spacing: var(--accroche-espace);
  color: var(--accroche-couleur);
  line-height: 1.2;
  transform: rotate(var(--accroche-inclinaison));
  transform-origin: left center;
}

.section-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.section-tete > div { max-width: 660px; }
.section-tete--centre { justify-content: center; text-align: center; }
.section-tete--centre em { margin-inline: auto; }
.section-tete--centre .intro { margin-inline: auto; }

/* ---------- 5. Boutons ----------
   Carrés, ombre dure décalée : l'affiche, pas l'application. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 .9375rem/1 var(--police-texte);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  padding: 16px 26px;
  background: var(--btn-fond);
  color: var(--btn-texte);
  border: 2px solid var(--btn-bord);
  box-shadow: 5px 5px 0 var(--btn-ombre);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--btn-ombre); }
.btn:active { transform: translate(2px, 2px);   box-shadow: 3px 3px 0 var(--btn-ombre); }

.btn--contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
  box-shadow: none;
}
.btn--contour:hover  { box-shadow: 5px 5px 0 var(--encre); }
.btn--contour:active { box-shadow: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
}

/* ---------- 6. Menu ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--fond);
  background-image: var(--grain);
  border-bottom: 2px solid var(--filet);
  transition: background-color .45s ease;
}

.nav {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 14px var(--gouttiere);
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-logo { display: block; line-height: 0; flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; }

.nav-liens {
  display: flex;
  gap: 26px;
  list-style: none;
  align-items: center;
  margin-left: auto;
}

.nav-lien {
  position: relative;
  text-decoration: none;
  color: var(--encre);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: 6px;
  white-space: nowrap;
}
.nav-lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-lien:hover::after,
.nav-lien.est-actif::after { transform: scaleX(1); }

.nav-reserver {
  text-decoration: none;
  color: var(--encre);
  border: 2px solid var(--encre);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 16px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav-reserver:hover { background: var(--encre); color: var(--fond); }

/* Au doigt, chaque commande du menu fait au moins 44 px de haut.
   À la souris, le menu garde sa finesse. */
@media (pointer: coarse) {
  .nav-lien, .nav-reserver { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-lien::after { bottom: 8px; }
}
/* « Réserver » est un appel. Sur un téléphone, le toucher compose le numéro ;
   sur un ordinateur, rien ne se passe d'utile : on y affiche donc le numéro. */
.nav-numero { display: none; }
@media (min-width: 1040px) and (hover: hover) and (pointer: fine) {
  .nav-numero { display: inline; }
}

/* ---------- 7. Pied de page ----------
   Toujours  data-monde="soir"  : sur chaque page, le soir ferme la marche. */
.site-footer { border-top: 2px solid var(--filet); }

.footer-grille {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 72px var(--gouttiere) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.footer-marque img { height: 58px; width: auto; max-width: 100%; }
.footer-marque p {
  color: var(--doux);
  font-size: .875rem;
  line-height: 1.6;
  margin-top: 18px;
  max-width: 260px;
}

/* Des h2 (le plan de la page ne saute pas de niveau), mais sans le traitement
   des grands titres : ni ombre, ni axes de police, ni interligne serré. */
.footer-titre {
  font-family: var(--etiquette-police);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 1.125rem;
  line-height: inherit;
  letter-spacing: var(--etiquette-espace);
  text-transform: uppercase;
  text-shadow: none;
  color: var(--vif-texte);
  margin-bottom: 14px;
}

.footer-bloc { font-size: .875rem; line-height: 1.7; color: var(--doux); }
.footer-bloc + .footer-bloc { margin-top: 14px; }
.footer-bloc strong { color: var(--encre); }
.footer-bloc a { color: var(--vif-texte); text-decoration: underline; text-underline-offset: 3px; }
.footer-bloc a:hover { text-decoration-thickness: 2px; }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 44px; height: 44px;
  border: 2px solid var(--filet);
  display: flex; align-items: center; justify-content: center;
  color: var(--encre);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.footer-social a:hover { background: var(--encre); color: var(--fond); }
.footer-social svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-reserver { margin-top: 22px; }

.footer-bas {
  border-top: 1px solid var(--filet-fin);
  padding: 22px var(--gouttiere);
  text-align: center;
  font-size: .75rem;
  line-height: 1.8;
  color: var(--doux);
}
.footer-bas a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.footer-bas a:hover { color: var(--vif-texte); }

/* ---------- 8. En-tête de page (les 4 pages du menu) ----------
   Court : sur une page intérieure, on vient chercher quelque chose. */
.page-tete {
  border-bottom: 2px solid var(--filet);
  padding-block: 64px 56px;
}

.fil { font-size: .8125rem; color: var(--doux); margin-bottom: 26px; }
.fil a { color: var(--encre); font-weight: 600; text-decoration: none; }
.fil a:hover { color: var(--vif-texte); }

/* ---------- 9. Objets du midi ---------- */

/* Étiquette de prix fluo en étoile, comme sur les marchés chiliens.
   Toujours aria-hidden : le prix est écrit ailleurs dans la page. */
.etoile {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.3));
  transform: rotate(9deg);
}
.etoile-forme {
  width: 156px;
  aspect-ratio: 1;
  background: var(--fluo);
  clip-path: polygon(50.0% 0.0%,56.9% 10.6%,67.1% 3.0%,70.0% 15.4%,82.1% 11.7%,80.6% 24.3%,93.3% 25.0%,87.6% 36.3%,99.2% 41.3%,90.0% 50.0%,99.2% 58.7%,87.6% 63.7%,93.3% 75.0%,80.6% 75.7%,82.1% 88.3%,70.0% 84.6%,67.1% 97.0%,56.9% 89.4%,50.0% 100.0%,43.1% 89.4%,32.9% 97.0%,30.0% 84.6%,17.9% 88.3%,19.4% 75.7%,6.7% 75.0%,12.4% 63.7%,0.8% 58.7%,10.0% 50.0%,0.8% 41.3%,12.4% 36.3%,6.7% 25.0%,19.4% 24.3%,17.9% 11.7%,30.0% 15.4%,32.9% 3.0%,43.1% 10.6%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-family: var(--police-marqueur);
}
.etoile-forme small { font-size: 1.0625rem; color: var(--encre-picada); }
.etoile-forme b { font-weight: 400; font-size: 2rem; color: var(--rouge-prix); margin-top: 4px; }
.etoile--petite .etoile-forme { width: 124px; }
.etoile--petite .etoile-forme small { font-size: .875rem; }
.etoile--petite .etoile-forme b { font-size: 1.75rem; }

/* L'ardoise : vert ardoise, cadre bois, capitales moutarde. */
.ardoise {
  --ardoise-texte: var(--creme-picada);
  background: var(--ardoise);
  color: var(--ardoise-texte);
  border: 10px solid var(--bois);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.3), 0 16px 36px rgba(0,0,0,.18);
  padding: 26px clamp(18px, 3vw, 34px) 22px;
}
.ardoise-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  border-bottom: 2px dashed rgba(246,236,219,.35);
  padding-bottom: 12px;
  margin-bottom: 6px;
}
.ardoise-titre {
  font-family: var(--police-enseigne);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--moutarde);
}
.ardoise-note { font-family: var(--police-script); font-size: 1.375rem; color: var(--ardoise-texte); }

.ardoise-ligne {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(24px, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  padding: 14px 0;
}
.ardoise-ligne--vignette { grid-template-columns: 64px minmax(0, max-content) minmax(24px, 1fr) auto; }
.ardoise-vignette {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ardoise-texte);
}
.ardoise-nom {
  display: block;
  font-family: var(--police-enseigne);
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.ardoise-desc {
  display: block;
  font-size: .875rem;
  line-height: 1.45;
  color: rgba(246,236,219,.78);
  margin-top: 3px;
  max-width: 360px;
}
.ardoise-points {
  border-bottom: 3px dotted rgba(246,236,219,.35);
  transform: translateY(-6px);
}
.ardoise-prix {
  font-family: var(--police-enseigne);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  color: var(--moutarde);
  white-space: nowrap;
}
.ardoise .est-vide { color: rgba(246,236,219,.5); }

/* ---------- 10. Objets du soir ---------- */

/* La scène : la lumière chaude derrière le disque. Sa hauteur vient de
   l'extérieur (inset:0 ou height — PAS min-height, sinon Chrome compte
   0 pour cqh et la pochette disparaît) ; la pochette se règle sur elle
   (--pochette, en cqw/cqh) pour n'être jamais rognée, quelle que soit
   la largeur — tablette comprise. */
.scene {
  position: relative;
  overflow: hidden;
  background-image: var(--lueur);
  container-type: size;
  --pochette: min(60cqw, 80cqh);
}

/* Le disque : une pochette bichrome rouge, et le vinyle qui en sort.
   Toujours aria-hidden : c'est un décor. */
.disque {
  --decalage: clamp(16px, 3vw, 40px);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: var(--decalage);
}

.pochette {
  position: relative;
  z-index: 2;
  width: var(--pochette, 60%);
  aspect-ratio: 1;
  background: var(--rouge-pochette);
  overflow: hidden;
  box-shadow: 14px 18px 40px rgba(0,0,0,.45);
  container-type: inline-size;   /* ses textes suivent SA largeur (cqw), pas celle de l'écran */
}
.pochette img {
  position: absolute;
  left: 0; right: 0; top: 25%; bottom: 0;
  width: 100%; height: 75%;
  object-fit: cover;
  filter: grayscale(1) brightness(2.1) contrast(1.25);
  mix-blend-mode: multiply;
}
.pochette-tete {
  position: absolute;
  left: 4.5cqw; top: 3.5cqw; right: 4.5cqw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.pochette-tete b {
  display: block;
  font-family: var(--police-affiche);
  font-weight: 400;
  font-size: 11.5cqw;
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jaune-pochette);
}
.pochette-tete i {
  display: block;
  font-family: var(--police-script);
  font-style: normal;
  font-size: 6.3cqw;
  color: var(--creme-pochette);
  margin-top: -2px;
}
.pochette-badge {
  flex-shrink: 0;
  width: 16cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tabac);
  color: var(--jaune-pochette);
  border: 2px solid var(--jaune-pochette);
  display: grid;
  place-items: center;
  text-align: center;
  font: 400 3.4cqw/1.05 var(--police-affiche);
  letter-spacing: .08em;
}
.pochette-pied {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--tabac);
  color: var(--jaune-pochette);
  padding: 2.6cqw 4.5cqw;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pochette-pied b { font-weight: 400; font-size: 4.6cqw; white-space: nowrap; }
.pochette-pied span { font-size: 2.8cqw; }

/* 7/6 de la pochette, accroché à elle (il sort de son bord droit, quelle
   que soit la largeur de la scène), centré verticalement par la marge
   (la moitié de sa hauteur) : transform est réservé à la rotation.
   C'est un <button> : on pose le doigt dessus, il s'arrête (§15). */
.vinyle {
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: calc(var(--decalage, 0px) + var(--pochette, 60%) * .68);
  top: 50%;
  width: calc(var(--pochette, 60%) * 7 / 6);
  aspect-ratio: 1;
  margin-top: calc(var(--pochette, 60%) * -7 / 12);
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, var(--sillon) 0 2px, var(--sillon-clair) 2px 3.5px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  animation: tourne 7s linear infinite;
}
.vinyle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.1) 12%, transparent 18% 55%, rgba(255,255,255,.08) 60%, transparent 66%);
}
.vinyle-etiquette {
  position: relative;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rouge-pochette);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vinyle-etiquette b {
  font-family: var(--police-pochette);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  line-height: .9;
}
.vinyle-etiquette span {
  font: 700 clamp(.4375rem, .8vw, .5625rem) var(--police-texte);
  letter-spacing: .2em;
}
.vinyle-etiquette::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sillon);
  top: 50%; left: 50%;
  margin: -4.5px;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Faces et pistes : les soirées comme le dos d'un disque.
   Même balisage en dur dans les pages et dans events.js. */
.faces { display: flex; flex-direction: column; gap: 10px; }
.face-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  border-bottom: 2px solid var(--filet);
  padding: 14px 0 8px;
}
.face-nom {
  font-family: var(--police-affiche);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vif-texte);
}
.face-jours {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--doux);
}
.piste {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--filet-fin);
  color: inherit;
  text-decoration: none;
}
a.piste:hover .piste-titre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.piste-num {
  font-family: var(--police-pochette);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: 1.75rem;
  color: var(--accent-texte);
}
.piste-titre {
  display: block;
  font-family: var(--police-pochette);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  line-height: 1.2;
}
.piste-sous { display: block; font-size: .875rem; color: var(--doux); margin-top: 3px; }
/* Infos pratiques venues d'Odoo (tenue, âge, note d'entrée) : seulement dans events.js. */
.piste-infos { display: block; font-size: .8125rem; color: var(--doux); margin-top: 2px; }
.piste-quand {
  font-family: var(--police-affiche);
  font-size: 1.0625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--filet);
  padding: 6px 12px;
  white-space: nowrap;
}

/* ---------- 11. Clichés ----------
   Le midi : tirage à bord crème, un peu de travers, comme punaisé
   derrière le comptoir. Le soir : carré net, ombre dure, bande de
   légende sombre. Tout passe par les jetons --cliche-* (§1).        */
.cliche {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--cliche-bord);
  padding: var(--cliche-marge);
  box-shadow: var(--cliche-ombre);
  transform: rotate(calc(var(--cliche-inclinaison) * var(--r, 0deg)));
}
.cliche:nth-child(3n+1) { --r: -1.6deg; }
.cliche:nth-child(3n+2) { --r: 1.2deg; }
.cliche:nth-child(3n)   { --r: -.6deg; }
.cliche img {
  width: 100%;
  height: auto;          /* sinon l'attribut height du <img> l'emporte sur aspect-ratio */
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
}
.cliche figcaption {
  background: var(--cliche-legende-fond);
  color: var(--cliche-legende-texte);
  font-family: var(--cliche-legende-police);
  font-size: var(--cliche-legende-taille);
  text-transform: var(--cliche-legende-casse);
  letter-spacing: var(--cliche-legende-espace);
  line-height: 1.2;
  padding: 8px 6px 2px;
}
[data-monde="soir"] .cliche figcaption { padding: 10px 14px; }

/* ---------- 12. Encadrés ---------- */
.encadre {
  border: 2px solid var(--filet);
  background: var(--fond-2);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
}
.encadre > div:first-child { max-width: 600px; }
.encadre-titre {
  font-family: var(--etiquette-police);
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: var(--etiquette-espace);
}
.encadre p:not(.encadre-titre) { color: var(--doux); font-size: .9375rem; line-height: 1.6; margin-top: 8px; }

/* ---------- 13. Photos, placeholders, « à compléter » ---------- */
/* Le format est tenu par le conteneur, jamais par l'image.
   Ne pas retirer height:auto : les attributs width/height du <img>
   l'emporteraient sur aspect-ratio et étireraient la photo. */
.photo { width: 100%; height: auto; object-fit: cover; object-position: center; display: block; }
.photo--43    { aspect-ratio: 4 / 3; }
.photo--plein { height: 100%; }

/* Placeholders — pour ajouter une tuile avant d'avoir la photo. */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .75rem;
  letter-spacing: .08em;
  border: 2px dashed currentColor;
}
.ph--clair  { background: repeating-linear-gradient(135deg, #FFFAF0 0 12px, #F6ECDB 12px 24px); color: #6A584B; }
.ph--sombre { background: repeating-linear-gradient(135deg, #2A1A12 0 12px, #1F130C 12px 24px); color: #CDB39A; }
.ph--plein  { height: 100%; width: 100%; }

/* « À compléter » — marque le contenu provisoire pour qu'il ne
   puisse jamais passer pour une vraie donnée. */
.a-completer {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--doux);
  border: 1px dashed currentColor;
  padding: 3px 8px;
}

/* ---------- 14. Responsive ----------
   Menu : la marque et « Réserver » tiennent la première ligne,
   les liens passent dessous, centrés.                          */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; gap: 12px; padding-bottom: 10px; }
  .nav-logo     { order: 1; }
  .nav-logo img { height: 38px; }
  .nav-reserver { order: 2; margin-left: auto; }
  .nav-liens {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    row-gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--filet-fin);
  }
  .section { padding-block: 64px; }
  :root { --entete: 130px; }   /* le menu passe sur deux lignes */
}
@media (max-width: 860px) and (pointer: coarse) {
  /* Les liens font déjà 44 px de haut : l'air autour devient inutile. */
  .nav { padding-bottom: 0; }
  .nav-liens { padding-top: 0; row-gap: 0; }
}

@media (max-width: 620px) {
  :root { --gouttiere: 16px; }
  .page-tete { padding-block: 44px 40px; }
  .section-tete { margin-bottom: 28px; }
  .btn { width: 100%; white-space: normal; text-align: center; }
  .actions .btn { width: auto; flex: 1 1 auto; }
  .ardoise-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .ardoise-ligne--vignette { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .ardoise-vignette { width: 52px; height: 52px; }
  .ardoise-points { display: none; }
  .piste { grid-template-columns: 44px 1fr; gap: 6px 14px; }
  .piste-quand { grid-column: 2; justify-self: start; font-size: .9375rem; }
  .scene { --pochette: min(70cqw, 80cqh); }
  .etoile-forme { width: 124px; }
  .etoile-forme small { font-size: .875rem; }
  .etoile-forme b { font-size: 1.75rem; }
}

/* ---------- 15. Mouvement réduit, bouton pause ----------
   Tout ce qui bouge seul plus de cinq secondes (le vinyle, le bandeau)
   s'arrête au choix du visiteur (WCAG 2.2.2) : un toucher sur le vinyle
   ou le bouton du bandeau pose  data-mouvement="arrete"  sur <html>
   (mouvement.js), et le choix vaut pour toute la visite.
   Avec « réduire les animations » dans le système, rien ne bouge. */
html[data-mouvement="arrete"] .vinyle,
html[data-mouvement="arrete"] .defile-piste { animation-play-state: paused; }

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