/* Bar Laitier — Belle Étoile · Tableau-menu (1920×1080) */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Inter', 'Open Sans', sans-serif;
  color: #E0E8FF;
  background: #0A0E2B;
  overflow: hidden;
}

/* ---------- Ciel bleu nuit profond → violet (« Cosmic Chic ») ---------- */
/* Fond plus sombre que la v1 : les cartes opaques ressortent, le texte est net.
   On garde le dégradé bleu→violet + halos, juste plus profonds (cf. prefs OP : étoiles gardées). */
body.display {
  position: relative;
  background:
    radial-gradient(ellipse 85% 60% at 50% -5%, rgba(120,140,235,0.30) 0%, rgba(120,140,235,0) 60%),
    radial-gradient(ellipse 65% 55% at 88% 105%, rgba(150,90,205,0.28) 0%, rgba(150,90,205,0) 60%),
    linear-gradient(160deg, #0A0E2B 0%, #131A45 38%, #1E1E5A 64%, #2D2168 86%, #160F3C 100%);
}

/* Couches d'étoiles = IMAGES PNG (rendu universel, même sur Hi Browser/TV qui
   ne savent pas faire les étoiles en CSS). 2 couches superposées dont l'opacité
   est animée en décalé → scintillement doux. PNG générés par gen_stars_png.py. */
body.display::before,
body.display::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
body.display::before {
  background-image: url("images/stars-a.png");
  opacity: 1;
  animation: twinkle-a 3.4s ease-in-out infinite;
}
body.display::after {
  background-image: url("images/stars-b.png");
  opacity: 0.95;
  animation: twinkle-b 4.8s ease-in-out infinite;
}
@keyframes twinkle-a {
  0%, 100% { opacity: 1;    }
  40%      { opacity: 0.25; }
  70%      { opacity: 0.75; }
}
@keyframes twinkle-b {
  0%, 100% { opacity: 0.9;  }
  35%      { opacity: 0.35; }
  60%      { opacity: 1;    }
}

/* ---------- Ciel étoilé (couche partagée, derrière les slides) ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Nébuleuse violette : nuages flous superposés */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  mix-blend-mode: screen;
}
.nebula-1 {
  width: 62vw; height: 50vw;
  left: -12vw; top: -16vw;
  background: radial-gradient(circle, rgba(165,90,240,0.80) 0%, rgba(110,55,190,0.42) 45%, transparent 72%);
  animation: drift 26s ease-in-out infinite;
}
.nebula-2 {
  width: 56vw; height: 46vw;
  right: -14vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(215,100,225,0.70) 0%, rgba(135,60,200,0.34) 50%, transparent 74%);
  animation: drift 32s ease-in-out infinite reverse;
}
.nebula-3 {
  width: 46vw; height: 38vw;
  left: 28vw; top: 26vw;
  background: radial-gradient(circle, rgba(125,100,245,0.45) 0%, transparent 70%);
  animation: drift 40s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: 0.9; }
  50%      { transform: translate(2vw, 1.5vw) scale(1.08); opacity: 1; }
}

/* Champ d'étoiles box-shadow (stars.css) DÉSACTIVÉ : buggé sur Hi Browser.
   Remplacé par les couches PNG (body.display::before/::after). */
.starfield { display: none; }

/* Amas des Pléiades — désormais intégré dans le PNG (stars-a.png), CSS désactivé */
.constellation {
  display: none;
  position: absolute;
  top: 0.8vh; right: 3vw;
  width: 12vw; height: 12vw;
}
.constellation-glow {
  position: absolute; inset: -25%;
  background: radial-gradient(circle, rgba(130,160,255,0.40) 0%, rgba(130,160,255,0.12) 40%, rgba(130,160,255,0) 66%);
  filter: blur(14px);
}
.constellation-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.constellation-lines polyline {
  fill: none;
  stroke: rgba(180,200,255,0.35);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.star-7 {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(0.5vw * var(--s));
  height: calc(0.5vw * var(--s));
  margin: calc(-0.25vw * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #d8e3ff 55%, rgba(180,200,255,0) 100%);
  box-shadow: 0 0 calc(0.7vw * var(--s)) rgba(170,195,255,0.95),
              0 0 calc(1.4vw * var(--s)) rgba(130,160,255,0.55);
  animation: sparkle 3s ease-in-out infinite;
}
.star-7:nth-child(4) { animation-delay: 0.4s; }
.star-7:nth-child(5) { animation-delay: 0.9s; }
.star-7:nth-child(6) { animation-delay: 1.3s; }
.star-7:nth-child(7) { animation-delay: 0.7s; }
.star-7:nth-child(8) { animation-delay: 1.7s; }
.star-7:nth-child(9) { animation-delay: 2.1s; }
@keyframes sparkle {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.78); }
}

/* ---------- Étoile filante (spawn aléatoire via JS) ---------- */
.shooting-star {
  position: fixed;
  top: var(--y); left: var(--x);
  width: 0.22vw; height: 0.22vw;
  z-index: 3;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0.5vw 0.12vw rgba(255,255,255,0.95),
              0 0 1.2vw 0.3vw rgba(170,195,255,0.6);
  pointer-events: none;
  animation: shoot var(--dur, 1.2s) ease-in forwards;
}
.shooting-star::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 13vw; height: 0.16vw;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(180,200,255,0.5) 28%, rgba(180,200,255,0) 100%);
  border-radius: 0.16vw;
}
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(var(--angle)) translateX(-6vw); }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--dist, 62vw)); }
}

/* ---------- Diaporama (fondu enchaîné) ---------- */
.slide {
  --cols: 4;
  --scale: 1;
  --maxw: 100%;
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 2.2s ease-in-out;   /* fondu doux et lent */
  pointer-events: none;
}
.slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.board {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  padding: 0.5vw 2.6vw 0.6vw;   /* marge latérale : place pour les photos qui débordent à droite */
  display: flex;
  flex-direction: column;
}

/* ---------- En-tête ---------- */
/* En-tête COMPACT : brand sur une ligne, catégorie = vraie étiquette du menu */
.board-header {
  text-align: center;
  margin-bottom: 0.3vw;
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.8vw;
}
.board-kicker {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18vw;
  font-size: 0.7vw;
  color: #cdd7ff;
  opacity: 0.7;
}
.board-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2.1vw;
  letter-spacing: 0.02vw;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(150,180,255,0.45), 0 2px 8px rgba(0,0,0,0.6);
}
.board-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35vw;
  letter-spacing: 0.14vw;
  color: #FFE7A0;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255,231,160,0.35), 0 2px 6px rgba(0,0,0,0.6);
}
.board-subtitle::before { content: "✦ "; font-size: 0.6em; vertical-align: middle; opacity: 0.8; }
.board-subtitle::after  { content: " ✦"; font-size: 0.6em; vertical-align: middle; opacity: 0.8; }

/* ---------- Grille (multi-colonnes, anti-débordement) ---------- */
.grid {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  justify-content: center;
  gap: 1vw;
  overflow: visible;        /* laisse les grandes photos déborder sur les côtés */
}

/* Écrans peu chargés : centrer verticalement le bloc */
body.page-molles .grid,
body.page-dures .grid,
body.page-sorbets .grid { align-content: center; }

/* ---------- Carte (voile DOUX, sans cadre — fond estompé qui se fond au ciel) ---------- */
/* Pas de boîte rigide (retour OP) : un halo sombre radial qui s'évanouit vers les bords,
   sans bordure ni ombre nette. Assez de fond pour lire, sans « cadre » visible. */
.card {
  position: relative;
  display: block;
  padding: 0.7vw 1.1vw 1vw;
  border: none;
  border-radius: 1.4vw;
  /* voile vignette TRÈS doux, se fond dans le ciel — pas un panneau */
  background:
    radial-gradient(130% 120% at 50% 45%,
      rgba(7,10,32,0.48) 0%,
      rgba(7,10,32,0.34) 50%,
      rgba(7,10,32,0.12) 78%,
      rgba(7,10,32,0.0) 100%);
}

/* Photo = élément « désir ». TOUTES les photos vivent dans une ZONE HAUTE
   uniforme (jamais dans le tableau) → aucun chevauchement avec le texte ET
   en-têtes FORMAT/PRIX alignés d'une carte à l'autre. La variété vient de la
   position horizontale (gauche / centre / droite), de la taille et de l'inclinaison. */
/* zone haute réservée sur TOUTES les cartes → titres + tableaux alignés,
   qu'il y ait une photo ou non */
.card { padding-top: calc(8vw * var(--scale)); }
.card-photo {
  position: absolute;
  top: 0;
  left: 2%;
  right: 2%;
  height: calc(7.5vw * var(--scale));   /* zone bornée : le bas reste AU-DESSUS du titre */
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}
.card-photo img {
  object-fit: contain;
  display: block;
  max-width: 60%;
  max-height: 112%;                     /* léger débord vers le haut seulement */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5)) brightness(1.08);
  transform-origin: bottom center;
}

/* Ancrage horizontal varié selon photo_pos (gauche / centre / droite) */
.card--pleft  .card-photo { justify-content: flex-start; }
.card--ptop   .card-photo { justify-content: center; }
.card--pright .card-photo { justify-content: flex-end; }

/* Inclinaison + taille légèrement variées pour un rendu organique */
.card--pleft  .card-photo img { transform: rotate(4deg);  max-width: 58%; }
.card--ptop   .card-photo img { transform: rotate(-3deg); max-width: 64%; }
.card--pright .card-photo img { transform: rotate(-5deg); max-width: 58%; }

/* — Photo EN BAS : items groupés en haut, photo sous le contenu — */
.card--pbottom { padding-top: calc(1vw * var(--scale)); padding-bottom: calc(8vw * var(--scale)); }
.card--pbottom .card-photo {
  top: auto;
  bottom: calc(0.3vw * var(--scale));
  height: calc(7.4vw * var(--scale));
  align-items: flex-start;
  justify-content: center;
}
.card--pbottom .card-photo img { transform: rotate(-4deg); max-width: 60%; }

/* — Sans photo : carte compacte, pas de zone haute réservée — */
.card--pnone { padding-top: calc(1.2vw * var(--scale)); }

.card-photo--ph { display: flex; align-items: center; justify-content: center; }
.card-photo-ph { font-size: calc(3vw * var(--scale)); line-height: 1; }

.card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: calc(1.7vw * var(--scale));
  letter-spacing: 0.01vw;
  color: #ffffff;
  line-height: 1.02;
  margin-bottom: 0.35vw;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 3px 14px rgba(0,0,0,0.7);
}

.card-table { display: flex; flex-direction: column; }

.card-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 0.4vw;
  padding: calc(0.34vw * var(--scale)) 0;
  font-size: calc(1.5vw * var(--scale));
  align-items: baseline;
  border-bottom: 1px solid rgba(180,195,255,0.12);
}
.card-row:last-child { border-bottom: none; }
.card-row--head { border-bottom: none; padding-bottom: 0; }

/* 3 colonnes (Trempage) · 4 colonnes (Trempage + Enrobage) */
.card-table:has(.card-col:nth-child(3)) .card-row { grid-template-columns: 2fr 1fr 1fr; }
.card-table:has(.card-col:nth-child(4)) .card-row { grid-template-columns: 1.7fr 1fr 1fr 1fr; }

.card-col {
  color: #E8EEFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7);
}
/* En-têtes de colonnes : lisibles de loin (contraste WCAG + taille relevée, cf. Gemini 1.2) */
.card-col--head {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08vw;
  font-size: calc(1.05vw * var(--scale));
  color: #9FB3FF;
}
.card-col--format { font-weight: 400; color: #E0E8FF; }
/* Prix DOMINANTS, teinte PERLÉE / nacrée (préférence OP — pas l'or de Gemini) */
.card-col--prix {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: calc(1.85vw * var(--scale));
  text-align: right;
  white-space: nowrap;
  color: #FBFAF4;
  -webkit-text-fill-color: #FBFAF4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.7);
}

/* Liste de saveurs (cartes sans prix : trempage, variétés) */
.card-list-title {
  margin-top: 0.3vw;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08vw;
  font-size: calc(1.05vw * var(--scale));
  color: #9FB3FF;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.card-list {
  columns: 2;
  column-gap: 1.4vw;
  list-style: none;
  margin-top: 0.3vw;
  font-size: calc(1.42vw * var(--scale));
  line-height: 1.45;
  color: #E0E8FF;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.card-list li {
  padding: calc(0.22vw * var(--scale)) 0;
  break-inside: avoid;
}
.card-list li::before { content: "✦ "; color: #FF99BB; font-size: 0.74em; vertical-align: middle; }

/* Badge « placeholder » provisoire */
.card-ph {
  margin-top: 0.4vw;
  padding: 0.25vw 0.6vw;
  display: inline-block;
  border: 1px dashed rgba(245,207,106,0.75);
  border-radius: 0.35vw;
  font-size: calc(0.8vw * var(--scale));
  letter-spacing: 0.04vw;
  color: #f5cf6a;
  background: rgba(245,207,106,0.08);
}

/* Petite description sous un item précis (ex: « Trempage 1$ et enrobage gratuit ») */
.item-desc {
  font-size: calc(0.82vw * var(--scale));
  color: #B7C4F0;
  font-style: italic;
  margin: calc(-0.1vw * var(--scale)) 0 calc(0.2vw * var(--scale));
  padding-left: 0.3vw;
}
/* mention alignée à droite (ex: « sur contenant » sous les colonnes trempage/enrobage) */
.item-desc--right { text-align: right; padding-left: 0; padding-right: 0.2vw; }

/* Bloc d'options détaillées (ex: coulis de sundae par catégorie) */
.card-options {
  margin-top: 0.45vw;
  font-size: calc(0.98vw * var(--scale));
  line-height: 1.42;
  color: #D7DEFF;
}
.card-options .opt { margin: calc(0.14vw * var(--scale)) 0; }
.card-options .opt-label { color: #9FB3FF; font-weight: 700; }

/* Filet ondulé sous l'en-tête */
.wave {
  height: 0.5vw;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'><path d='M0,4 Q15,0 30,4 T60,4' stroke='%23f0c860' stroke-width='1.4' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-size: 3.4vw 0.5vw;
  margin: 0.1vw 0 0.25vw 0;
  opacity: 0.85;
}

.card-note {
  margin-top: 0.45vw;
  padding: 0.45vw 0.75vw;
  background: rgba(8, 10, 30, 0.55);
  border-left: 3px solid rgba(255,153,187,0.65);
  border-radius: 0.35vw;
  font-size: calc(1.02vw * var(--scale));
  line-height: 1.35;
  color: #C7D2FF;
  font-style: italic;
  white-space: pre-line;   /* permet les notes sur plusieurs lignes (\n) */
}

/* ---------- Page d'accueil (liste des écrans) ---------- */
.screen-nav {
  display: flex;
  gap: 2vw;
  margin-top: 3vw;
}
.screen-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20vw;
  height: 14vw;
  border-radius: 1vw;
  background: linear-gradient(180deg, rgba(18,30,66,0.72), rgba(10,18,42,0.82));
  border: 1px solid rgba(160,185,255,0.22);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  color: #f5f0e4;
  text-decoration: none;
  font-size: 1.7vw;
  font-weight: 600;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
}
.screen-link span {
  font-family: 'Allura', cursive;
  font-size: 3.2vw;
  color: #f0c860;
  margin-bottom: 0.4vw;
}
.screen-link:hover {
  transform: translateY(-0.4vw);
  border-color: rgba(240,200,96,0.7);
}