/* ==========================================================================
   LE BRUIT QUI COURT — Trattoria italienne à La Louvière
   Feuille de style commune — encode la charte graphique (voir charte-graphique.html)
   ========================================================================== */

/* ---------- Tokens de la charte ---------- */
:root {
  /* Couleurs primaires */
  --aubergine: #602166;
  --aubergine-dark: #451549;
  --aubergine-tint: #F1E7F3;
  --orange: #F0782D;
  --orange-dark: #C95A10;
  --orange-tint: #FDEBDC;

  /* Couleurs d'accent (à petites doses) */
  --basilic: #33C41F;
  --basilic-dark: #1F7A10;
  --basilic-vif: #7ADF3E;   /* sur fond sombre uniquement */
  --basilic-tint: #E4F7DF;
  --ciel: #60C0F0;
  --ciel-dark: #196E9E;
  --ciel-tint: #E3F3FC;
  --framboise: #DE1C59;
  --framboise-dark: #B01243;
  --framboise-tint: #FCE4EC;

  /* Neutres */
  --prune-noir: #260B2B;    /* fond sombre de marque (hero, footer) */
  --prune-noir-2: #38123E;
  --fond: #FFFFFF;          /* fond de page */
  --brume: #F6F2F9;         /* fond de section alterné, violet très pâle */
  --blanc: #FFFFFF;
  --encre: #2B2135;         /* texte courant */
  --gris: #6E6579;
  --trait: #EAE2F0;         /* filets, bordures discrètes */

  /* Typographies */
  --font-display: 'Chewy', 'Comic Sans MS', cursive;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Bradley Hand', cursive;

  /* Formes & ombres */
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(43, 33, 53, .1);
  --shadow-strong: 0 18px 50px rgba(43, 33, 53, .2);

  /* Gabarit — hauteurs du header sticky et du bandeau (pour caler le hero sur l'écran) */
  --header-h: 82px;
  --ticker-h: 53px;
}
@media (max-width: 480px) { :root { --header-h: 74px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
/* height:auto est OBLIGATOIRE dès qu'on écrit width/height dans le HTML :
   sans lui, une image bridée par max-width garde la hauteur de l'attribut
   et se retrouve étirée. Les attributs réservent la place, la CSS décide. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--aubergine); }
a:hover { color: var(--orange-dark); }
::selection { background: var(--orange-tint); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
p { margin: 0 0 1em; }

.container { width: min(1140px, 92%); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-alt { background: var(--brume); }

/* Étiquette de section (petit label coloré au-dessus des titres) */
.section-label {
  display: inline-block;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: .6rem;
}
.section-label.vert { color: var(--basilic-dark); }
/* Sur le hero sombre, on garde le label discret (lavande) plutôt que coloré */
.hero .section-label { color: #C9B9D2; }
.section-label.violet { color: var(--aubergine); }
.section-label.rose { color: var(--framboise); }
.section-label.bleu { color: var(--ciel-dark); }

/* Lettres multicolores façon logo (appliqué par main.js sur .rainbow) */
.rainbow .l0 { color: var(--orange); }
.rainbow .l1 { color: var(--ciel); }
.rainbow .l2 { color: var(--framboise); }
.rainbow .l3 { color: var(--aubergine); }
.rainbow .l4 { color: var(--basilic); }
.rainbow .l5 { color: var(--orange-dark); }

/* Mot souligné au feutre */
.marker {
  background: linear-gradient(transparent 62%, rgba(240, 120, 45, .45) 62%);
  padding: 0 .1em;
  border-radius: 4px;
}

/* Écriture manuscrite d'accompagnement */
.hand {
  font-family: var(--font-hand);
  font-size: 1.5em;
  color: var(--aubergine);
  line-height: 1.2;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  border: 2.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--orange);
  color: var(--blanc);
  box-shadow: 0 6px 18px rgba(240, 120, 45, .4);
}
.btn-primary:hover { background: var(--orange-dark); color: var(--blanc); transform: translateY(-2px) rotate(-.5deg); }
.btn-outline {
  border-color: var(--aubergine);
  color: var(--aubergine);
  background: transparent;
}
.btn-outline:hover { background: var(--aubergine); color: var(--blanc); transform: translateY(-2px) rotate(.5deg); }
.btn-light {
  background: var(--blanc);
  color: var(--aubergine);
  box-shadow: var(--shadow);
}
.btn-light:hover { color: var(--orange-dark); transform: translateY(-2px); }
.btn-ghost-light {
  border-color: rgba(255,255,255,.7);
  color: var(--blanc);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: var(--blanc); }
/* Bouton « à venir » : présent mais visiblement non cliquable */
.btn-soon {
  border-style: dashed;
  border-color: var(--trait);
  color: var(--gris);
  background: var(--brume);
  cursor: default;
  pointer-events: none;
}
.btn-soon small { font-weight: 700; opacity: .8; }

/* ---------- Badge autocollant (« 26 ans déjà ») ---------- */
.sticker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--prune-noir);
  color: var(--blanc);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-strong);
  line-height: 1.05;
  border: 3px solid var(--blanc);
}
.sticker .num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--basilic-vif);
}
.sticker .txt {
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blanc);
}

/* ---------- Header / navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.brand img { height: 60px; width: auto; }
@media (max-width: 480px) { .brand img { height: 52px; } }
.main-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav a {
  font-weight: 800;
  font-size: .98rem;
  text-decoration: none;
  color: var(--encre);
  padding: .5rem .8rem;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.main-nav a:hover { background: var(--aubergine-tint); color: var(--aubergine); }
.main-nav a.active { color: var(--orange-dark); position: relative; }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .15rem;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
}
.nav-phone { margin-left: .5rem; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.7rem;
  color: var(--aubergine);
  cursor: pointer;
  padding: .3rem .5rem;
}

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    z-index: 120;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    background: var(--blanc);
    border-bottom: 2px solid var(--trait);
    padding: .6rem 4% 1rem;
    display: none;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: .85rem 1rem; border-radius: 12px; }
  .main-nav a.active { background: var(--aubergine-tint); }
  .main-nav a.active::after { display: none; }
  .nav-phone { margin: .6rem 0 0; justify-content: center; }
}

/* ---------- Bandeau défilant « le bruit qui court » ---------- */
.ticker {
  overflow: hidden;
  background: var(--orange);
  padding: .7rem 0;
  white-space: nowrap;
}
.ticker-track {
  display: inline-block;
  animation: ticker 30s linear infinite;
}
.ticker span {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 1.2rem;
  color: var(--blanc);
}
.ticker span:nth-child(4n+1) { color: var(--prune-noir); }
.ticker span:nth-child(4n+2) { color: var(--blanc); }
.ticker span:nth-child(4n+3) { color: var(--aubergine-dark); }
.ticker span:nth-child(4n+4) { color: var(--blanc); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Séparateur ondulé ---------- */
.wave { display: block; width: 100%; height: 42px; }
/* La vague fait déjà la transition : on colle la section suivante au bandeau */
.wave + .section { padding-top: clamp(1.4rem, 3.5vw, 2.6rem); }

/* ---------- Cartes ---------- */
.card {
  background: var(--blanc);
  border: 1.5px solid var(--trait);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8rem;
}

/* Photos penchées façon polaroid */
.tilt {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-strong);
  border: 6px solid var(--blanc);
}
.tilt-l { transform: rotate(-2.5deg); }
.tilt-r { transform: rotate(2.5deg); }

/* ---------- La carte du restaurant (panneaux clairs) ---------- */
.menu-board {
  background: var(--blanc);
  border: 1.5px solid var(--trait);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow);
}
.menu-section-title {
  font-family: var(--font-display);
  color: var(--aubergine);
  font-size: 1.7rem;
  margin: 0 0 .3rem;
  letter-spacing: .03em;
  position: relative;
  padding-bottom: .45rem;
}
.menu-section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 52px; height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--orange), var(--framboise));
}
.menu-note {
  color: var(--orange-dark);
  font-weight: 700;
  font-size: .92rem;
}
.menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1.5px dashed var(--trait);
  font-weight: 700;
}
.menu-item:last-child { border-bottom: none; }
.menu-item .name { flex: 1; }
.menu-item .name small { display: block; color: var(--gris); font-weight: 600; font-size: .88rem; }
.menu-item .dots { display: none; }
.menu-item .price {
  background: var(--orange-tint);
  color: var(--orange-dark);
  font-weight: 800;
  font-size: .95rem;
  padding: .18rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.menu-item.star .price { background: var(--framboise-tint); color: var(--framboise-dark); }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: start;
}
.menu-block { break-inside: avoid; margin-bottom: 1.6rem; }
.incontournables-title {
  font-family: var(--font-display);
  color: var(--framboise);
  font-size: 2rem;
}
.menu-footnote { color: var(--gris); font-size: .92rem; }

/* ---------- Avis ---------- */
.review-card {
  background: var(--blanc);
  border: 1.5px solid var(--trait);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.review-card .stars { color: var(--orange); letter-spacing: .15em; font-size: 1.05rem; }
.review-card blockquote { margin: 0; font-style: italic; color: var(--encre); }
.review-card .who { font-weight: 800; }
.review-card .meta { color: var(--gris); font-size: .85rem; }
.review-card .src {
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 800;
  padding: .2rem .7rem;
  border-radius: 999px;
}
.src.thefork { background: var(--basilic-tint); color: #157347; }
.src.tripadvisor { background: var(--ciel-tint); color: var(--ciel-dark); }

.score-card {
  border-radius: var(--radius);
  color: var(--blanc);
  padding: 1.8rem;
  box-shadow: var(--shadow-strong);
}
.score-card .big { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.score-card .big small { font-size: 1.4rem; opacity: .85; }
.score-thefork { background: linear-gradient(135deg, #1F9E57, #157347); }
.score-tripadvisor { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }

.rating-bar { margin: .6rem 0; }
.rating-bar .label { display: flex; justify-content: space-between; font-weight: 800; font-size: .95rem; }
.rating-bar .track { height: 10px; border-radius: 999px; background: var(--brume); overflow: hidden; }
.rating-bar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--basilic), var(--basilic-dark)); }

/* ---------- Galerie ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.gallery-grid a {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1;
  position: relative;
}
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-grid a:hover img { transform: scale(1.06) rotate(.5deg); }

/* Aperçu galerie sur l'accueil : 8 photos = 4 colonnes (2 rangées pleines) */
.gallery-preview { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .gallery-preview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .gallery-preview { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(38, 11, 43, .94);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-height: 78vh;
  max-width: 92vw;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-strong);
}
.lightbox .caption { color: var(--blanc); font-weight: 700; text-align: center; }
.lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, .14);
  color: var(--blanc);
  border: none;
  font-size: 1.6rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.lightbox button:hover { background: var(--orange); }
.lightbox .lb-close { top: 1.2rem; right: 1.2rem; }
.lightbox .lb-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ---------- Infos pratiques (bloc sombre) ---------- */
.info-board {
  background: var(--prune-noir);
  color: #EDE4F0;
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-strong);
}
.info-board h3 { color: var(--basilic-vif); }
.info-board ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.info-board li { display: flex; gap: .7rem; align-items: baseline; }
.info-board .ico { color: var(--orange); }
.info-board a { color: var(--ciel); text-decoration: none; }
.info-board a:hover { color: var(--orange); }
.info-board .note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(237, 228, 240, .2);
  color: #BFAECB;
  font-size: .9rem;
}

.map-embed {
  border: 0;
  width: 100%;
  height: 340px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--prune-noir);
  color: #D9CCE0;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding: 3.2rem 0 2.2rem;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #A990B8;
  font-size: 1.25rem;
  margin: 0 0 .9rem;
}
.site-footer a { color: #B9A6C6; text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.footer-logo { background: var(--blanc); border-radius: 12px; padding: .5rem .9rem; display: inline-block; }
.footer-logo img { height: 52px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; padding: 0; list-style: none; margin: 1rem 0 0; }
.footer-bottom {
  border-top: 1px solid rgba(217, 204, 224, .18);
  padding: 1.1rem 0;
  font-size: .85rem;
  text-align: center;
  color: #A98FB3;
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(38rem 24rem at 85% -10%, rgba(240, 120, 45, .22), transparent 60%),
    radial-gradient(30rem 20rem at -8% 110%, rgba(96, 192, 240, .16), transparent 60%),
    linear-gradient(135deg, var(--prune-noir) 0%, var(--prune-noir-2) 55%, var(--aubergine-dark) 100%);
  color: #EDE4F0;
  overflow: hidden;
  position: relative;
  /* Le hero remplit l'écran pour que le bandeau arrive pile en bas au chargement */
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h) - var(--ticker-h));
  min-height: calc(100svh - var(--header-h) - var(--ticker-h));
}
.hero-inner {
  /* garde la largeur max du conteneur (1140px) et se centre horizontalement */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 3rem;
  padding: clamp(1.2rem, 3vw, 2rem) 0;
}
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }
.hero h1 { color: var(--blanc); margin-bottom: .35em; }
.hero .lead { font-size: 1.12rem; color: #DCCDE2; max-width: 34rem; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.hero-badges .chip {
  font-weight: 800;
  font-size: .85rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .25);
}
.hero-collage { position: relative; min-height: 340px; }
.hero-collage img {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 6px solid var(--blanc);
  box-shadow: var(--shadow-strong);
}
.hero-collage img:nth-child(1) { top: 0; left: 0; transform: rotate(-4deg); z-index: 2; }
.hero-collage img:nth-child(2) { top: 26%; right: 0; transform: rotate(3deg); z-index: 3; }
.hero-collage img:nth-child(3) { bottom: 0; left: 8%; transform: rotate(-1.5deg); z-index: 1; }
@media (max-width: 900px) {
  .hero-inner { gap: 1.8rem; }
  .hero-collage { min-height: 300px; }
}
@media (max-width: 600px) {
  /* Hero mobile : le pli affiche le texte jusqu'à la phrase générée.
     L'image et le bandeau se révèlent au scroll, juste en dessous.
     Hauteur flexible : la phrase peut passer sur deux lignes sans rien casser. */
  /* Image cachée, révélée au scroll : le texte se pose en bas du pli (la phrase
     le termine), l'image + le bandeau passent juste en dessous, avec un air ÉGAL
     au-dessus (gap de la grille) et en dessous (marge basse du collage).
     Le « vide » incompressible (peu de texte) est repoussé en haut, sous le header. */
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 4.5rem; padding: 0; }
  .hero-inner > div:first-child {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.6rem 0;
  }
  /* Le label et le titre restent groupés (une seule « ligne » de la répartition) */
  .hero-head { display: flex; flex-direction: column; }
  .hero h1 { margin-bottom: 0; font-size: clamp(2.9rem, 8.5vw, 3.5rem); }
  .hero .lead { font-size: 1rem; }
  .hero .hero-actions { flex-wrap: nowrap; gap: .6rem; margin-top: 1.1rem; }
  .hero .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: .72rem .5rem; font-size: .92rem; white-space: nowrap; }
  .hero .hero-badges { margin-top: 1rem; }
  .hero .rumeur { margin-top: 1rem; }
  /* Le collage 3 photos → une seule photo, sous le pli. Air au-dessus = gap de
     la grille ; air en dessous (avant le bandeau) = cette marge basse. */
  .hero-collage { min-height: 0; margin: 0 0 4.5rem; }
  .hero-collage img { position: static; width: 100%; aspect-ratio: 16 / 10; transform: none; border-width: 5px; }
  .hero-collage img:nth-child(2), .hero-collage img:nth-child(3) { display: none; }
  .hero-collage .sticker { right: 5%; bottom: -14px; z-index: 4; }
  /* Bandeau cohérent sur mobile : sommet ET bas plats (on masque l'onde) */
  .wave { display: none; }
  .wave + .section { padding-top: clamp(2rem, 6vw, 2.6rem); }
}
@media (max-width: 600px) and (max-height: 750px) {
  /* Petits écrans courts (ex. iPhone SE, 360×740) : on resserre le contenu,
     en gardant l'air autour de l'image équilibré (gap = marge basse). */
  .hero-inner { gap: 2.6rem; }
  .hero-collage { margin-bottom: 2.6rem; }
  .hero h1 { font-size: 2.2rem; }
  .hero .lead { font-size: .94rem; }
  .hero .hero-actions { margin-top: .8rem; }
  .hero .hero-actions .btn { padding: .6rem .5rem; }
  .hero .hero-badges { margin-top: .7rem; gap: .4rem; }
  .hero .hero-badges .chip { font-size: .78rem; padding: .26rem .68rem; }
  .hero .rumeur { margin-top: .7rem; }
}

/* ---------- Touches sur mesure ---------- */

/* La mascotte qui court : barre de progression de lecture, l'aubergine avance avec le scroll */
.scroll-runner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0;
  z-index: 300;
  pointer-events: none;
}
.scroll-runner .runner-track {
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--framboise), var(--aubergine));
  border-radius: 0 4px 4px 0;
  transition: width .08s linear;
}
.scroll-runner .runner-mark {
  position: absolute;
  top: -4px;
  left: 0;
  height: 30px;
  width: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgba(38, 11, 43, .35));
  animation: runner-bob .5s ease-in-out infinite alternate;
}
@keyframes runner-bob { from { transform: translateX(-50%) rotate(-6deg); } to { transform: translateX(-50%) rotate(8deg) translateY(2px); } }

/* Bulle « le bruit court que… » (machine à écrire) */
.rumeur {
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  background: rgba(255, 255, 255, .08);
  border: 1.5px dashed rgba(255, 255, 255, .35);
  border-radius: 18px 18px 18px 4px;
  padding: .6rem 1.1rem;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: #F0E6F4;
  min-height: 2.6rem;
}
.rumeur .rumeur-label { color: var(--basilic-vif); font-weight: 600; }
.rumeur .caret {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--orange);
  transform: translateY(.2em);
  animation: caret-blink .8s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Sticker qui gigote au survol */
.sticker:hover { animation: wiggle .45s ease-in-out; }
@keyframes wiggle {
  25% { transform: rotate(-8deg) scale(1.06); }
  60% { transform: rotate(0deg) scale(1.03); }
  100% { transform: rotate(-4deg); }
}

/* Collage du hero : les photos réagissent doucement à la souris (JS pose --px/--py) */
.hero-collage img { will-change: transform; }

/* Le bandeau s'arrête quand on le survole (le bruit s'écoute) */
.ticker:hover .ticker-track { animation-play-state: paused; }

/* Toast « psst… » */
.psst {
  position: fixed;
  left: 1.2rem; bottom: 1.2rem;
  z-index: 250;
  max-width: 320px;
  background: var(--blanc);
  border: 1.5px solid var(--trait);
  border-radius: 20px 20px 20px 6px;
  box-shadow: var(--shadow-strong);
  padding: 1.1rem 1.2rem;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.psst.show { transform: none; opacity: 1; }
.psst .psst-hand { font-family: var(--font-hand); font-size: 1.4rem; color: var(--aubergine); display: block; margin-bottom: .3rem; }
.psst p { margin: 0 0 .8rem; font-size: .95rem; }
.psst .psst-close {
  position: absolute;
  top: .5rem; right: .7rem;
  background: none; border: none;
  font-size: 1rem; color: var(--gris);
  cursor: pointer;
}
@media (max-width: 600px) { .psst { left: 4%; right: 4%; max-width: none; } }

/* ---------- Animations d'apparition ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
}

/* ---------- En-tête de page (bandeau sombre de marque) ---------- */
.page-hero {
  background:
    radial-gradient(34rem 20rem at 88% -20%, rgba(240, 120, 45, .22), transparent 60%),
    radial-gradient(26rem 18rem at -6% 120%, rgba(96, 192, 240, .16), transparent 60%),
    linear-gradient(135deg, var(--prune-noir) 0%, var(--prune-noir-2) 60%, var(--aubergine-dark) 100%);
  color: #EDE4F0;
  padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(3.4rem, 7vw, 5rem);
  text-align: center;
  position: relative;
}
.page-hero h1 { color: var(--blanc); }
.page-hero .lead { color: #DCCDE2; max-width: 40rem; margin-inline: auto; }
.page-hero .section-label { color: var(--basilic-vif); }

/* ---------- Avis : scores en vedette (sur le bandeau sombre) ---------- */
.score-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  max-width: 760px;
  margin: 1.8rem auto 0;
}
@media (max-width: 620px) { .score-strip { grid-template-columns: 1fr; } }
.score-card {
  border-radius: var(--radius);
  color: var(--blanc);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-strong);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.score-card::after {
  content: "★★★★★";
  position: absolute;
  right: -.3rem; bottom: -1.2rem;
  font-size: 4.5rem;
  opacity: .12;
  letter-spacing: -.1em;
}
.score-card .src-name { letter-spacing: .16em; font-size: .8rem; font-weight: 800; opacity: .95; }
.score-card .big { font-family: var(--font-display); font-size: 3rem; line-height: 1; margin: .1rem 0; }
.score-card .big small { font-size: 1.4rem; opacity: .85; }
.score-card .count { font-size: .9rem; opacity: .9; margin: 0; }
.score-thefork { background: linear-gradient(135deg, #24B364, #147a45); }
.score-tripadvisor { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }

/* Jauges par critère, sur carte claire chevauchant le bandeau */
.rating-panel {
  max-width: 900px;
  margin: -2.4rem auto 0;
  position: relative;
  z-index: 2;
}
.rating-panel .grid-3 { gap: 1.2rem 2.5rem; }
.rating-bar { margin: .4rem 0; }
.rating-bar .label { display: flex; justify-content: space-between; font-weight: 800; font-size: .95rem; }
.rating-bar .label .val { color: var(--basilic-dark); }
.rating-bar .track { height: 12px; border-radius: 999px; background: var(--brume); overflow: hidden; }
.rating-bar .fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--basilic), var(--basilic-dark));
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Le mur des avis (notes épinglées) ---------- */
.review-wall {
  columns: 3 300px;
  column-gap: 1.5rem;
}
.review-wall .review-card {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  position: relative;
  border: none;
  box-shadow: var(--shadow);
}
.review-wall .review-card:nth-child(3n+1) { transform: rotate(-1.1deg); }
.review-wall .review-card:nth-child(3n+2) { transform: rotate(.8deg); }
.review-wall .review-card:nth-child(3n+3) { transform: rotate(-.5deg); }
.review-wall .review-card { transition: transform .2s ease, box-shadow .2s ease; }
.review-wall .review-card:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-strong); z-index: 2; }
/* punaise */
.review-wall .review-card::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 16px; height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9b62, var(--orange) 55%, var(--orange-dark));
  box-shadow: 0 2px 4px rgba(38, 11, 43, .3);
}
.review-wall .review-card:nth-child(4n+2)::before { background: radial-gradient(circle at 35% 30%, #7fd3f7, var(--ciel) 55%, var(--ciel-dark)); }
.review-wall .review-card:nth-child(4n+3)::before { background: radial-gradient(circle at 35% 30%, #ff6f96, var(--framboise) 55%, var(--framboise-dark)); }
.review-wall .review-card:nth-child(4n+4)::before { background: radial-gradient(circle at 35% 30%, #9be47f, var(--basilic) 55%, var(--basilic-dark)); }

/* Citation vedette */
.pull-quote {
  background: var(--aubergine);
  color: var(--blanc);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.2rem);
  box-shadow: var(--shadow-strong);
  position: relative;
  overflow: hidden;
}
.pull-quote::before {
  content: "\201C";
  font-family: var(--font-display);
  position: absolute;
  top: -1.5rem; left: 1rem;
  font-size: 9rem;
  color: rgba(255,255,255,.14);
  line-height: 1;
}
.pull-quote blockquote { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-style: italic; margin: 0 0 1rem; position: relative; }
.pull-quote .who { font-weight: 800; }
.pull-quote .who small { display: block; font-weight: 600; opacity: .8; }

/* ---------- Notre histoire : média animé + sticker ---------- */
.story-media { position: relative; margin: 0 0 1rem; }
.story-media video { width: 100%; height: auto; display: block; }
.story-media .story-sticker {
  position: absolute;
  left: -.6rem; bottom: -1.2rem;
  z-index: 2;
}
@media (max-width: 480px) {
  .story-media .story-sticker { left: .4rem; bottom: -1rem; transform: rotate(-4deg) scale(.85); }
}

/* ---------- Grilles utilitaires ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }

/* ── Cibles tactiles du pied de page ──────────────────────────────────────
   Ces liens faisaient 23 px de haut : en dessous du minimum de 24 px des
   règles d'accessibilité (WCAG 2.5.8), et trop petits pour un pouce. On
   leur donne de la hauteur sans toucher à la mise en page. */
.site-footer a {
  display: inline-block;
  padding-block: .35rem;
}

@media (max-width: 720px) {
  .site-footer a { padding-block: .55rem; }
  .footer-nav li { margin-block: .1rem; }
}

/* Téléphone et courriel : ce sont les liens qu'on tape le plus souvent sur
   le site d'un restaurant. On leur donne de la surface partout, même au fil
   du texte — un pouce ne vise pas comme une souris. */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-block;
  padding-block: .3rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Bandeau de consentement + carte en attente
   ──────────────────────────────────────────────────────────────────────────
   Le bandeau reprend le fond sombre de marque (--prune-noir), comme le hero
   et le pied de page : il fait partie du site, il n'est pas collé dessus.
   Titre en Chewy, bouton d'accord en orange, bouton de refus en blanc plein.

   Les deux boutons sont PLEINS et de même taille : refuser doit être aussi
   simple qu'accepter, sinon le consentement ne vaut rien. Pas de croix, pas
   de « continuer sans accepter » caché dans un coin.
   ══════════════════════════════════════════════════════════════════════════ */
.consentement {
  position: fixed;
  z-index: 290;              /* au-dessus de l'en-tête (100) et du menu (120),
                                sous la visionneuse de la galerie (300) */
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  margin-inline: auto;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 1.35rem 1.7rem;
  background: var(--prune-noir);
  border: 2px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  color: #E9DCEE;
  opacity: 0;
  transform: translateY(calc(100% + 1.5rem));
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
}
.consentement--visible { opacity: 1; transform: none; }

.consentement__corps { flex: 1; min-width: 0; }

.consentement__titre {
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--blanc);
}
.consentement__texte {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}
.consentement__texte strong { color: var(--basilic-vif); font-weight: 800; }

.consentement__actions {
  display: flex;
  flex-shrink: 0;
  gap: .8rem;
}
.consentement__actions .btn {
  padding: .75rem 1.5rem;
  font-size: .95rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .consentement {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    padding: 1.2rem 1.25rem;
  }
  .consentement__titre { font-size: 1.3rem; }
  /* Côte à côte et de largeur identique : aucun des deux choix n'est
     privilégié, et les deux restent atteignables au pouce. */
  .consentement__actions .btn { flex: 1 1 0; padding-inline: .7rem; }
}
@media (max-width: 380px) {
  .consentement__actions .btn { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .consentement { transition: none; transform: none; }
}

/* ---------- La carte tant qu'on n'a pas dit oui ---------- */
/* Même encombrement que la carte elle-même : rien ne saute quand on accepte. */
.map-shell { border-radius: var(--radius); }

.carte-attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  min-height: 340px;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 2px dashed var(--trait);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(96, 33, 102, .035) 0 11px, transparent 11px 22px),
    var(--brume);
}
.carte-attente__titre {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--aubergine);
}
.carte-attente__texte {
  margin: 0;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--gris);
}
.carte-attente__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
@media (max-width: 480px) {
  .carte-attente { min-height: 290px; padding: 1.7rem 1.1rem; }
  .carte-attente__actions .btn { width: 100%; }
}

/* ---------- Revenir sur son choix, depuis le pied de page ---------- */
.lien-cookies {
  appearance: none;
  border: 0;
  background: none;
  padding: .35rem .15rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lien-cookies:hover { color: var(--blanc); }

/* Le bloc « Psst… » se remplit lettre par lettre en JavaScript : il part
   vide et grandit, ce qui pousse le bas du hero. On lui réserve d'emblée
   la hauteur de deux lignes (mesuré : il passe de 59 à 94 px au
   téléphone). Rien ne bouge, et la phrase s'écrit dans la place prévue. */
.rumeur { min-height: 5.6rem; }
@media (min-width: 761px) { .rumeur { min-height: 3.4rem; } }