/* Le Phare, bar à cocktails. Style "Néon".
   Tout se joue en lumière : l'enseigne s'allume, le faisceau tourne, les
   fiches de recettes s'éclairent une à une. Rien ne se déplace vraiment. */

@font-face {
  font-family: 'Monoton';
  src: url('../fonts/monoton-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne Variable';
  src: url('../fonts/syne-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nuit: #0E0D12;
  --nuit-haut: #15131C;
  --rose: #FF4FA3;
  --cyan: #4FE3FF;
  --ambre: #FFB547;
  --brume: #E4DEEE;
  --brume-72: rgba(228, 222, 238, .72);
  --brume-42: rgba(228, 222, 238, .42);
  --brume-14: rgba(228, 222, 238, .14);
  --tube: cubic-bezier(.2, .8, .25, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--brume);
  font-family: 'Syne Variable', 'Syne', system-ui, sans-serif;
  font-size: clamp(1rem, .94rem + .3vw, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--rose); color: var(--nuit); }

.shell { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }

/* Le halo du curseur passe par-dessus et éclaire ce qu'il approche. */
.halo {
  position: fixed;
  z-index: 6;
  top: 0; left: 0;
  width: 42rem; height: 42rem;
  margin: -21rem 0 0 -21rem;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle closest-side,
    rgba(255, 79, 163, .3) 0%, rgba(79, 227, 255, .12) 42%, transparent 72%);
  transition: opacity .6s var(--tube);
}
.halo.allume { opacity: 1; }

/* ── Enseigne ─────────────────────────────────────────────────────────── */

.enseigne {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--ecran, 100svh);
  padding: 7rem 1.25rem 6rem;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, var(--nuit-haut), var(--nuit) 72%);
}

/* Le faisceau du phare : une aiguille de lumière qui balaie la nuit. */
.faisceau {
  position: absolute;
  top: 42%; left: 50%;
  width: 190vmax; height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(79, 227, 255, .13) 0deg, transparent 13deg,
    transparent 180deg, rgba(255, 181, 71, .07) 188deg, transparent 198deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 18%, rgba(0,0,0,.5) 48%, transparent 76%);
  mask-image: radial-gradient(circle closest-side, #000 18%, rgba(0,0,0,.5) 48%, transparent 76%);
  animation: balayer 14s linear infinite;
}
@keyframes balayer { to { transform: rotate(360deg); } }

.enseigne-bloc { position: relative; z-index: 1; }

.marque {
  margin: 0;
  font-family: 'Monoton', 'Syne Variable', sans-serif;
  font-size: clamp(3.4rem, 15vw, 11rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: #FFF2F8;
  text-shadow:
    0 0 6px rgba(255, 255, 255, .7),
    0 0 18px var(--rose),
    0 0 52px rgba(255, 79, 163, .85),
    0 0 110px rgba(255, 79, 163, .5);
}
/* Deux ratés avant que le tube ne tienne : c'est un vrai néon qui s'allume. */
.js .marque { animation: amorcer 2.1s steps(1, end) both; }
@keyframes amorcer {
    0% { opacity: .06; text-shadow: none; }
   12% { opacity: 1; }
   17% { opacity: .08; text-shadow: none; }
   31% { opacity: 1; }
   36% { opacity: .1; text-shadow: none; }
   44% { opacity: 1; }
  100% { opacity: 1; }
}

.sous-marque {
  margin: 1.6rem 0 0;
  font-size: clamp(.8rem, 2.2vw, 1rem);
  font-weight: 600;
  letter-spacing: .44em;
  text-indent: .44em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(79, 227, 255, .9), 0 0 44px rgba(79, 227, 255, .45);
}
.js .sous-marque { animation: apparaitre 1s var(--tube) 1.9s both; }

.ouverture {
  margin: 2.6rem 0 0;
  color: var(--brume-72);
  font-size: .95rem;
  letter-spacing: .06em;
}
.js .ouverture { animation: apparaitre 1s var(--tube) 2.2s both; }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }

.descendre {
  position: absolute;
  bottom: 5.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--brume-42);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
}
.descendre:hover, .descendre:focus-visible { color: var(--cyan); }

/* ── Sections ─────────────────────────────────────────────────────────── */

section { padding-block: clamp(4rem, 11vh, 8rem); }

.titre-section {
  margin: 0 0 .6rem;
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.titre-section em { font-style: normal; color: var(--rose); }
.chapo { max-width: 46ch; margin: 0 0 3rem; color: var(--brume-72); }

/* ── Fiches de recettes ───────────────────────────────────────────────── */

.recettes { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 56rem) {
  .recettes { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
  /* Une colonne décalée : on lit en zigzag, pas en tableau. */
  .recettes > li:nth-child(even) { transform: translateY(3.5rem); }
}

.fiche {
  position: relative;
  height: 100%;
  padding: 1.6rem 1.7rem 1.4rem;
  border: 1px solid var(--brume-14);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), transparent 60%);
}
/* Le tube : il s'amorce quand la fiche entre dans l'écran. */
.fiche::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 3px;
  pointer-events: none;
  border: 1px solid var(--teinte, var(--rose));
  opacity: 0;
  box-shadow: 0 0 10px var(--teinte, var(--rose)), inset 0 0 14px rgba(255, 79, 163, .14);
}
.js .vu .fiche::after { animation: amorcer-tube 1.3s steps(1, end) var(--retard, 0ms) forwards; }
html:not(.js) .fiche::after { opacity: .85; }
@keyframes amorcer-tube {
    0% { opacity: 0; }
   22% { opacity: .9; }
   30% { opacity: 0; }
   48% { opacity: .9; }
   56% { opacity: .15; }
  100% { opacity: .85; }
}

.fiche-haut { display: flex; align-items: baseline; gap: .9rem; }
.fiche-num {
  font-family: 'Monoton', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--teinte, var(--rose));
}
.fiche-nom {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
}
.fiche-prix { margin-left: auto; font-weight: 700; color: var(--ambre); }

.doses { margin: 1.1rem 0 0; display: grid; gap: .45rem; }
.dose {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: .92rem;
  color: var(--brume-72);
}
.dose dt { flex: 1; }
.dose dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--cyan);
}
.fiche-note {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--brume-14);
  font-size: .88rem;
  color: var(--brume-42);
}

/* ── Soirées ──────────────────────────────────────────────────────────── */

.soirees { margin: 0; padding: 0; list-style: none; }
.soiree {
  display: grid;
  gap: .25rem 1.5rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--brume-14);
}
@media (min-width: 44rem) {
  .soiree { grid-template-columns: 11rem 1fr auto; align-items: baseline; }
}
.soiree:last-child { border-bottom: 1px solid var(--brume-14); }
.soiree-quand {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.soiree-quoi { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.soiree-prix { color: var(--brume-72); font-size: .92rem; }

/* ── Venir ────────────────────────────────────────────────────────────── */

.venir-grille { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .venir-grille { grid-template-columns: 1fr 1fr; } }
.venir p { margin: 0 0 1rem; color: var(--brume-72); }
.venir strong { color: var(--brume); font-weight: 700; }
.venir a { color: var(--ambre); text-underline-offset: .25em; }
.venir a:hover, .venir a:focus-visible { color: var(--cyan); }

.tube-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: .9rem 2rem;
  border: 1px solid var(--rose);
  border-radius: 999px;
  color: #FFF2F8;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(255, 79, 163, .5), inset 0 0 12px rgba(255, 79, 163, .2);
  transition: box-shadow .4s var(--tube), background-color .4s var(--tube);
}
.tube-btn:hover, .tube-btn:focus-visible {
  background: rgba(255, 79, 163, .16);
  box-shadow: 0 0 22px rgba(255, 79, 163, .85), inset 0 0 20px rgba(255, 79, 163, .3);
}
.tube-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.pied {
  padding: 2.5rem 0 9rem;
  border-top: 1px solid var(--brume-14);
  color: var(--brume-42);
  font-size: .85rem;
}

/* ── Révélation ───────────────────────────────────────────────────────── */

.js .rv { opacity: 0; animation: secours .8s var(--tube) 2.6s forwards; }
.js .rv.vu { opacity: 1; animation: none; transition: opacity 1s var(--tube) var(--retard, 0ms); }
@keyframes secours { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.vu { opacity: 1; animation: none; transition: none; }
  .js .marque, .js .sous-marque, .js .ouverture { animation: none; opacity: 1; }
  .faisceau { animation: none; }
  .js .vu .fiche::after { animation: none; opacity: .85; }
  .halo { display: none; }
}

/* ── Bandeau Webot ────────────────────────────────────────────────────────
   Identique sur toutes les démos, volontairement neutre pour rester lisible
   quel que soit le style derrière. Police système : elle ne compte pas dans
   les deux familles de la démo. */

.webot-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 10;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(16, 16, 18, .92);
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
@supports (backdrop-filter: blur(8px)) {
  .webot-bar { background: rgba(16, 16, 18, .78); backdrop-filter: blur(10px); }
}
.webot-bar p { margin: 0; color: rgba(255, 255, 255, .78); }
.webot-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 1px;
  white-space: nowrap;
}
.webot-bar a:hover { border-bottom-color: #fff; }
.webot-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 34rem) {
  .webot-bar { top: .75rem; bottom: auto; gap: .75rem; padding: .5rem .9rem; font-size: .75rem; }
}