/* =========================================================
   SO & SO — Anglet · Système de marque partagé
   Utilisé par : site, charte, menu, flyer, autocollants.
   Toute modif de couleur/typo se fait ICI, et nulle part ailleurs.
   ========================================================= */
@import url('fonts/fonts.css');   /* polices auto-hébergées : aucun appel à Google (RGPD) */

:root{
  /* — Couleurs — */
  --asphalte:#0B0A0D;      /* fond principal : le parking à 1h du mat */
  --bitume:#17151B;        /* surfaces, cartes */
  --gris-nuit:#2A2730;     /* filets, bordures */
  --tube:#FFF4E6;          /* blanc chaud des néons éteints / texte */
  --rouge:#FF2E4D;         /* ROUGE NÉON — couleur signature */
  --sodium:#FFC53D;        /* JAUNE SODIUM — lampadaires du drive, prix */
  --glace:#3DF0FF;         /* CYAN GLACE — accent rare (boissons, nuit) */

  --glow-rouge:0 0 .04em #fff,0 0 .12em var(--rouge),0 0 .35em var(--rouge),0 0 .9em rgba(255,46,77,.55);
  --glow-sodium:0 0 .04em #fff,0 0 .12em var(--sodium),0 0 .4em rgba(255,197,61,.6);
  --glow-glace:0 0 .04em #fff,0 0 .12em var(--glace),0 0 .4em rgba(61,240,255,.55);

  /* — Typo — */
  --f-titre:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  /* — Géométrie — */
  --tilt:-4deg;            /* L'ANGLE SO&SO : bandeaux, stickers, titres penchés */
}

/* ---------- LOGO ---------- */
.logo{font-family:var(--f-titre);font-weight:900;line-height:.82;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:.02em;color:var(--tube);text-transform:uppercase;white-space:nowrap}
.logo .amp{color:transparent;-webkit-text-stroke:.045em var(--rouge);
  text-shadow:var(--glow-rouge);font-size:1.12em;transform:translateY(.02em) rotate(var(--tilt));display:inline-block;margin:0 .02em}
.logo.mono .amp{-webkit-text-stroke-color:currentColor;text-shadow:none}
.logo.clair{color:var(--asphalte)}
.logo.clair .amp{text-shadow:none}

/* ---------- TEXTE NÉON ---------- */
.neon{color:var(--tube);text-shadow:var(--glow-rouge)}
.neon-sodium{color:#FFF3D1;text-shadow:var(--glow-sodium)}
.neon-glace{color:#E9FDFF;text-shadow:var(--glow-glace)}
.tube{color:transparent;-webkit-text-stroke:2px var(--rouge);text-shadow:var(--glow-rouge)}

/* ---------- BANDEAU (marquee) ---------- */
.bandeau{background:var(--rouge);color:var(--asphalte);font-family:var(--f-titre);font-weight:900;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;transform:rotate(var(--tilt));
  letter-spacing:.02em;display:flex}
.bandeau.sodium{background:var(--sodium)}
.bandeau span{padding:0 .4em}
.bandeau .star{color:var(--tube)}

/* ---------- STICKER PRIX ---------- */
.sticker{display:inline-grid;place-items:center;aspect-ratio:1;border-radius:50%;
  background:var(--sodium);color:var(--asphalte);font-family:var(--f-titre);font-weight:900;
  transform:rotate(var(--tilt));box-shadow:0 0 0 .08em var(--asphalte),0 0 0 .16em var(--sodium);line-height:.85;text-align:center}
.sticker small{display:block;font-family:var(--f-mono);font-weight:800;font-size:.3em;letter-spacing:.04em;margin-top:.15em}
.sticker.rouge{background:var(--rouge);color:var(--tube);box-shadow:0 0 0 .08em var(--asphalte),0 0 0 .16em var(--rouge)}

/* ---------- TICKET (style ticket de drive) ---------- */
.ticket{font-family:var(--f-mono);color:var(--tube)}
.ticket .ligne{display:flex;align-items:baseline;gap:.5em}
.ticket .ligne .pts{flex:1;border-bottom:2px dotted var(--gris-nuit);transform:translateY(-.25em)}
.ticket .prix{color:var(--sodium);font-weight:800}