/* ==========================================================================
   Yassa Bar — « Affiche de nuit »
   Nocturne chaleureux / affiche néo-rétro de bar afro-lounge.
   Bandes pleine largeur alternées, carte-menu papier sur média plein écran,
   barre d'action fixe en bas, pied de page en ticket d'addition.
   Bootstrap natif uniquement : ciblage par data-attributes, éléments, pseudo-éléments.
   ========================================================================== */

:root {
  --y-night: #170c10;
  --y-night-2: #24131a;
  --y-night-3: #33202a;
  --y-orange: #f37d4d;
  --y-orange-deep: #d9592a;
  --y-saffron: #f2b544;
  --y-cream: #f5e9d7;
  --y-paper: #fbf4e8;
  --y-palm: #1f5c45;
  --y-hibiscus: #c2364f;
  --y-ink: #2a1a1f;
  --y-display: 'Shrikhand', 'Georgia', serif;
  --y-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --y-mono: 'Courier Prime', 'Courier New', monospace;
  --y-ease: cubic-bezier(0.2, 0.9, 0.1, 1);
  --y-bar-h: 4.25rem;

  --bs-body-font-family: var(--y-body);
  --bs-body-bg: var(--y-night);
  --bs-body-color: var(--y-cream);
  --bs-primary: var(--y-orange);
  --bs-primary-rgb: 243, 125, 77;
  --bs-warning: var(--y-saffron);
  --bs-warning-rgb: 242, 181, 68;
  --bs-dark: var(--y-night);
  --bs-dark-rgb: 23, 12, 16;
  --bs-link-color: var(--y-saffron);
  --bs-link-color-rgb: 242, 181, 68;
  --bs-link-hover-color: var(--y-orange);
  --bs-link-hover-color-rgb: 243, 125, 77;
  --bs-border-radius: 0.5rem;
  --bs-emphasis-color: var(--y-paper);
}

/* Grain d'affiche sur toute la page */
body {
  font-size: 1.0625rem;
  line-height: 1.65;
  padding-bottom: calc(var(--y-bar-h) + env(safe-area-inset-bottom, 0px));
  background-color: var(--y-night);
}
body > main { overflow-x: clip; }
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1040;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .h4, .h6 {
  font-family: var(--y-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.05;
}
h3.h6 {
  font-family: var(--y-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--y-saffron);
  margin-bottom: 0.35rem;
}
::selection { background: var(--y-orange); color: var(--y-night); }
a, .btn, button, [role='button'] { cursor: pointer; }
:focus-visible { outline: 3px solid var(--y-saffron); outline-offset: 3px; }

/* ---------- Boutons ---------- */
.btn {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--y-ease), box-shadow 0.25s var(--y-ease), background-color 0.2s, color 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary {
  --bs-btn-bg: var(--y-orange);
  --bs-btn-border-color: var(--y-orange);
  --bs-btn-color: var(--y-night);
  --bs-btn-hover-bg: var(--y-saffron);
  --bs-btn-hover-border-color: var(--y-saffron);
  --bs-btn-hover-color: var(--y-night);
  --bs-btn-active-bg: var(--y-orange-deep);
  --bs-btn-active-border-color: var(--y-orange-deep);
  box-shadow: 0 0 0 0 rgba(243, 125, 77, 0);
}
.btn-primary:hover { box-shadow: 0 0 1.5rem rgba(243, 125, 77, 0.55); transform: translateY(-2px); }
.btn-dark {
  --bs-btn-bg: var(--y-night);
  --bs-btn-border-color: var(--y-night);
  --bs-btn-color: var(--y-cream);
  --bs-btn-hover-bg: var(--y-night-3);
  --bs-btn-hover-border-color: var(--y-night-3);
  --bs-btn-hover-color: var(--y-saffron);
}
.btn-dark:hover { transform: translateY(-2px); }
.btn-outline-dark {
  --bs-btn-color: var(--y-ink);
  --bs-btn-border-color: var(--y-ink);
  --bs-btn-hover-bg: var(--y-ink);
  --bs-btn-hover-border-color: var(--y-ink);
  --bs-btn-hover-color: var(--y-saffron);
}
.btn-outline-light {
  --bs-btn-color: var(--y-cream);
  --bs-btn-border-color: rgba(245, 233, 215, 0.45);
  --bs-btn-hover-bg: var(--y-cream);
  --bs-btn-hover-color: var(--y-night);
  backdrop-filter: blur(6px);
}
.btn-warning { --bs-btn-bg: var(--y-saffron); --bs-btn-border-color: var(--y-saffron); --bs-btn-color: var(--y-night); }

/* ---------- Enseigne (logo en haut) ---------- */
[data-zone='enseigne'] { z-index: 5; }
.navbar-brand {
  font-family: var(--y-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--y-saffron);
  line-height: 1;
  text-shadow: 0 0 0.6rem rgba(242, 181, 68, 0.55), 0 0 1.8rem rgba(243, 125, 77, 0.45);
  transform: rotate(-4deg);
  display: inline-block;
}
.navbar-brand span + span { color: var(--y-orange); }
.navbar-brand:hover { color: var(--y-paper); }

/* ---------- Barre d'action fixe en bas ---------- */
[data-zone='barre'] {
  z-index: 1030;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  padding-top: 0.5rem;
  pointer-events: none;
}
[data-zone='barre'] .nav {
  pointer-events: auto;
  background: rgba(23, 12, 16, 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(242, 181, 68, 0.28);
  border-radius: 1.25rem;
  box-shadow: 0 -0.25rem 2rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 0.3rem;
  max-width: 54rem;
  margin-inline: auto;
}
[data-zone='barre'] .nav-link {
  color: var(--y-cream);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.2rem;
  border-radius: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
[data-zone='barre'] .nav-link .bi { font-size: 1.15rem; line-height: 1; }
[data-zone='barre'] .nav-link:hover { color: var(--y-saffron); background: rgba(245, 233, 215, 0.07); }
[data-zone='barre'] .nav-link.active {
  background: var(--y-orange);
  color: var(--y-night);
  box-shadow: 0 0 1.2rem rgba(243, 125, 77, 0.5);
}
@media (min-width: 768px) {
  [data-zone='barre'] .nav-link { font-size: 0.92rem; padding: 0.7rem 0.75rem; }
  [data-zone='barre'] .nav-link .bi { font-size: 1rem; }
}

/* ---------- Affiche (hero plein écran) ---------- */
[data-zone='affiche'] {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--y-night);
}
[data-zone='affiche']::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60rem 30rem at 15% 85%, rgba(243, 125, 77, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(23, 12, 16, 0.55) 0%, rgba(23, 12, 16, 0.15) 35%, rgba(23, 12, 16, 0.92) 100%);
}
/* soleil rétro à fentes, derrière la carte-menu */
[data-zone='affiche']::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: min(70vw, 34rem);
  aspect-ratio: 1;
  right: 3vw;
  top: 14vh;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--y-saffron) 10%, var(--y-orange) 55%, var(--y-hibiscus) 100%);
  opacity: 0.5;
  mix-blend-mode: screen;
  mask: linear-gradient(180deg, #000 0 42%, transparent 42% 46%, #000 46% 56%, transparent 56% 61%, #000 61% 69%, transparent 69% 75%, #000 75% 81%, transparent 81% 88%, #000 88% 92%, transparent 92%);
  -webkit-mask: linear-gradient(180deg, #000 0 42%, transparent 42% 46%, #000 46% 56%, transparent 56% 61%, #000 61% 69%, transparent 69% 75%, #000 75% 81%, transparent 81% 88%, #000 88% 92%, transparent 92%);
}
[data-zone='affiche'] .container { z-index: 2; padding-top: 7rem !important; padding-bottom: calc(var(--y-bar-h) + 3rem) !important; }
[data-zone='affiche'] h1 {
  font-size: clamp(3.1rem, 10vw, 8.5rem);
  color: var(--y-paper);
  line-height: 0.92;
  text-shadow: 0 0.3rem 0 var(--y-orange-deep), 0 0 2.5rem rgba(243, 125, 77, 0.45);
  transform: rotate(-3deg);
  transform-origin: left bottom;
}
[data-zone='affiche'] h1 span + span {
  color: var(--y-saffron);
  font-size: 0.62em;
  margin-top: 0.15em;
  animation: y-neon 6s steps(1) infinite;
}
@keyframes y-neon {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.35; }
  94% { opacity: 1; }
  96% { opacity: 0.5; }
  97% { opacity: 1; }
}
/* carte-menu papier superposée */
[data-menu] {
  background: var(--y-paper);
  color: var(--y-ink);
  box-shadow: 0.75rem 0.75rem 0 var(--y-orange), 0 2rem 4rem rgba(0, 0, 0, 0.5);
  transform: rotate(1.5deg);
  font-size: 1.05rem;
}
[data-menu]::before {
  content: '';
  position: absolute;
  inset: 0.6rem;
  border: 2px solid var(--y-ink);
  outline: 1px solid var(--y-ink);
  outline-offset: -6px;
  pointer-events: none;
}
[data-menu]::after {
  content: '✦ ✦ ✦';
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--y-ink);
  color: var(--y-saffron);
  font-family: var(--y-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 0.25rem 0.9rem;
  white-space: nowrap;
}
[data-menu] .card-body { position: relative; z-index: 1; }

/* ---------- Bandes défilantes ---------- */
[data-defile] {
  font-family: var(--y-display);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1.2;
  border-block: 2px solid var(--y-night);
}
[data-defile] > div { width: max-content; animation: y-defile 38s linear infinite; }
[data-defile='orange'] { background: var(--y-orange); color: var(--y-night); transform: rotate(-1.2deg); margin-block: -0.6rem; position: relative; z-index: 2; }
[data-defile='saffron'] { background: var(--y-saffron); color: var(--y-night); }
[data-defile='saffron'] > div { animation-direction: reverse; animation-duration: 30s; }
[data-defile='night'] { background: var(--y-night); color: transparent; -webkit-text-stroke: 1.5px var(--y-orange); border-color: var(--y-orange); }
@keyframes y-defile { to { transform: translateX(-50%); } }

/* ---------- Bande crème : recette ---------- */
[data-zone='recette'] {
  background:
    radial-gradient(circle at 1px 1px, rgba(42, 26, 31, 0.12) 1px, transparent 0) 0 0 / 1.1rem 1.1rem,
    var(--y-cream);
  color: var(--y-ink);
  --bs-body-color: var(--y-ink);
}
[data-zone='recette'] h2 {
  font-size: clamp(2.3rem, 5vw, 4rem);
  color: var(--y-hibiscus);
}
[data-zone='recette'] .lead::first-letter {
  font-family: var(--y-display);
  float: left;
  font-size: 4.2rem;
  line-height: 0.85;
  padding: 0.35rem 0.6rem 0 0;
  color: var(--y-orange-deep);
}
[data-zone='recette'] .lead { font-size: 1.18rem; }
[data-assiettes] img {
  aspect-ratio: 1;
  object-fit: cover;
  border: 0.55rem solid var(--y-paper);
  box-shadow: 0 0 0 2px var(--y-ink), 0.6rem 0.8rem 0 rgba(42, 26, 31, 0.18);
}
[data-assiettes] .col:nth-child(2) { transform: translateY(2.5rem); }
[data-assiettes] .col:nth-child(4) { transform: translateY(2.5rem); }

/* ---------- Bande nuit : la carte ---------- */
[data-zone='ardoise'] {
  background:
    repeating-linear-gradient(90deg, rgba(245, 233, 215, 0.025) 0 1px, transparent 1px 5rem),
    var(--y-night-2);
  counter-reset: plat;
  padding-top: 4.5rem !important;
}
[data-zone='ardoise'] .card {
  background: var(--y-night);
  color: var(--y-cream);
  border-radius: 12rem 12rem 0.5rem 0.5rem;
  outline: 2px solid var(--y-orange);
  outline-offset: -0.6rem;
  box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.2), 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
  transition: transform 0.4s var(--y-ease), box-shadow 0.4s var(--y-ease), outline-color 0.3s;
  counter-increment: plat;
}
[data-zone='ardoise'] .card-img-top {
  aspect-ratio: 3 / 4;
  border-radius: 12rem 12rem 0 0;
  filter: saturate(1.1) contrast(1.05);
  transition: transform 0.6s var(--y-ease), filter 0.4s;
}
[data-zone='ardoise'] .card::before {
  content: counter(plat, decimal-leading-zero);
  position: absolute;
  z-index: 1;
  top: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--y-mono);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--y-night);
  background: var(--y-saffron);
  padding: 0.2rem 0.7rem;
  border-radius: 2rem;
}
[data-zone='ardoise'] .card-body { padding: 1.5rem 1.6rem 1.8rem; }
[data-zone='ardoise'] .card .h4 { color: var(--y-paper); font-size: 1.45rem; }
[data-zone='ardoise'] .card .bi { color: var(--y-orange); transition: transform 0.3s var(--y-ease); }
[data-zone='ardoise'] .card:hover {
  transform: translateY(-0.5rem) rotate(-0.6deg);
  outline-color: var(--y-saffron);
  box-shadow: 0 0 2.5rem rgba(243, 125, 77, 0.45), 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}
[data-zone='ardoise'] .card:hover .card-img-top { transform: scale(1.06); }
[data-zone='ardoise'] .card:hover .bi { transform: translate(0.2rem, -0.2rem); }

/* ---------- Bande orange : flyers Instagram ---------- */
[data-zone='flyers'] {
  background:
    radial-gradient(40rem 20rem at 90% 0%, rgba(242, 181, 68, 0.55), transparent 60%),
    var(--y-orange);
  color: var(--y-night);
}
[data-zone='flyers'] h2 { font-size: clamp(2.2rem, 5vw, 4rem); color: var(--y-night); }
[data-mur] { column-gap: 1.5rem; columns: 1; }
@media (min-width: 768px) { [data-mur] { columns: 2; } }
@media (min-width: 1200px) { [data-mur] { columns: 3; } }
[data-mur] .card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-top: 0.6rem;
  background: var(--y-paper);
  color: var(--y-ink);
  box-shadow: 0.4rem 0.4rem 0 var(--y-night);
  transition: transform 0.3s var(--y-ease), box-shadow 0.3s var(--y-ease);
}
[data-mur] .card:nth-child(3n + 1) { transform: rotate(-0.8deg); }
[data-mur] .card:nth-child(3n + 2) { transform: rotate(0.6deg); }
[data-mur] .card:hover { transform: rotate(0) translateY(-0.3rem); box-shadow: 0.7rem 0.7rem 0 var(--y-night); }
/* punaise */
[data-mur] .card::before {
  content: '';
  position: absolute;
  top: -0.45rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -0.45rem;
  border-radius: 50%;
  background: var(--y-hibiscus);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.3);
}
[data-mur] .card-text { white-space: pre-line; font-size: 0.95rem; line-height: 1.6; }
[data-mur] .badge { font-family: var(--y-mono); letter-spacing: 0.08em; font-weight: 700; }
[data-mur] .bi-heart-fill { color: var(--y-hibiscus); }
[data-mur] .bi-chat-fill { color: var(--y-palm); }
[data-mur] a { color: var(--y-orange-deep); }

/* ---------- Bande nuit : comptoir / contact ---------- */
[data-zone='comptoir'] {
  background:
    radial-gradient(50rem 25rem at 0% 100%, rgba(31, 92, 69, 0.45), transparent 60%),
    var(--y-night);
}
[data-zone='comptoir'] h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--y-paper); }
[data-zone='comptoir'] h2 span + span { color: var(--y-orange); }
[data-zone='comptoir'] .form-label { font-family: var(--y-mono); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; color: var(--y-saffron); }
[data-zone='comptoir'] .form-control {
  background: transparent;
  color: var(--y-paper);
  border: 0;
  border-bottom: 2px solid rgba(245, 233, 215, 0.35);
  border-radius: 0;
  padding-inline: 0;
  transition: border-color 0.2s;
}
[data-zone='comptoir'] .form-control:focus { box-shadow: none; border-bottom-color: var(--y-orange); }
[data-zone='comptoir'] .form-check-input { background-color: transparent; border-color: var(--y-saffron); }
[data-zone='comptoir'] .form-check-input:checked { background-color: var(--y-orange); border-color: var(--y-orange); }
[data-zone='comptoir'] .form-check-label { color: rgba(245, 233, 215, 0.78); }
[data-ardoise] {
  background: var(--y-night-2);
  color: var(--y-cream);
  border-top: 0.4rem solid var(--y-saffron) !important;
  box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.2), 0 2rem 3rem rgba(0, 0, 0, 0.4);
}
[data-ardoise] .card-img-top { aspect-ratio: 16 / 9; border-radius: 0; filter: sepia(0.25) saturate(1.2); }
[data-ardoise] .list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--y-cream); --bs-list-group-border-color: rgba(245, 233, 215, 0.12); }
[data-ardoise] .list-group-item { padding: 1.1rem 1.5rem; }
[data-ardoise] a { color: var(--y-paper); text-decoration-color: var(--y-orange); text-underline-offset: 0.25em; }
[data-ardoise] a:hover { color: var(--y-orange); }

/* ---------- Repères (bloc SEO, affiché en bas) ---------- */
[data-zone='reperes'] {
  background: var(--y-night-2);
  color: rgba(245, 233, 215, 0.7);
  border-top: 1px solid rgba(242, 181, 68, 0.2);
}
[data-zone='reperes'] strong { color: var(--y-saffron); font-weight: 600; }

/* ---------- Addition (pied de page ticket) ---------- */
[data-zone='addition'] {
  background:
    repeating-linear-gradient(45deg, rgba(243, 125, 77, 0.06) 0 1rem, transparent 1rem 2rem),
    var(--y-night);
  padding-bottom: 3rem;
}
[data-ticket] {
  max-width: 27rem;
  background: var(--y-paper);
  color: var(--y-ink);
  font-family: var(--y-mono);
  font-size: 0.95rem;
  position: relative;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
  --zz: radial-gradient(circle at 0.6rem 0, transparent 0.6rem, #000 0.62rem) 0 0 / 1.2rem 51% repeat-x,
        radial-gradient(circle at 0.6rem 100%, transparent 0.6rem, #000 0.62rem) 0 100% / 1.2rem 51% repeat-x;
  -webkit-mask: var(--zz);
  mask: var(--zz);
}
[data-ticket] .navbar-brand {
  color: var(--y-ink);
  text-shadow: none;
  transform: none;
  font-size: 2.2rem;
}
[data-ticket] a { color: var(--y-ink); text-decoration-color: var(--y-orange); text-underline-offset: 0.2em; }
[data-ticket] a:hover { color: var(--y-orange-deep); }
[data-ticket] .btn-dark { --bs-btn-bg: var(--y-ink); font-family: var(--y-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--y-paper); }
[data-ticket] dl { border-block: 2px dashed rgba(42, 26, 31, 0.45); padding-block: 1.2rem; }
[data-ticket] dt {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
}
[data-ticket] dt::after { content: ''; flex: 1; border-bottom: 2px dotted rgba(42, 26, 31, 0.45); }
[data-ticket] dd { margin: 0.35rem 0 1rem; }
[data-ticket] dd:last-child { margin-bottom: 0; }
[data-ticket] > p:last-child::after {
  content: '';
  display: block;
  height: 2.4rem;
  margin-top: 1.5rem;
  background: repeating-linear-gradient(90deg, var(--y-ink) 0 2px, transparent 2px 4px, var(--y-ink) 4px 7px, transparent 7px 9px, var(--y-ink) 9px 10px, transparent 10px 13px);
  opacity: 0.85;
}

/* ---------- Cookies ---------- */
[data-zone='cookies'] { z-index: 1035; bottom: calc(var(--y-bar-h) + 1rem + env(safe-area-inset-bottom, 0px)); }
[data-zone='cookies'] > div {
  background: var(--y-paper);
  color: var(--y-ink);
  box-shadow: 0.4rem 0.4rem 0 var(--y-orange), 0 1rem 2rem rgba(0, 0, 0, 0.4);
  max-width: 54rem;
}

/* ---------- 404 ---------- */
[data-zone='perdu'] .display-1 { font-family: var(--y-display); color: var(--y-orange); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  [data-menu] { transform: none; }
  [data-assiettes] { margin-bottom: 2.5rem; }
}
@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  [data-zone='affiche'] h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  [data-menu] { box-shadow: 0.45rem 0.45rem 0 var(--y-orange), 0 1.5rem 3rem rgba(0, 0, 0, 0.5); }
  [data-defile='orange'] { transform: none; margin-block: 0; }
  [data-zone='ardoise'] .card-img-top { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-defile] > div { transform: none; }
}