/* ==========================================================================
   O'Relais — design system V1 (architecture évolutive)
   Anthracite / ivoire / cuivre / bois.

   Échelle z-index documentée (pour ajout futur sans collision) :
     10  éléments élevés dans le flux (cards hover, etc.)
     90  barre d'action mobile (sticky bottom)
     99  panneau de navigation mobile
     100 header sticky
     150 widget assistant IA (voir .assistant-widget)
     200 lightbox
   ========================================================================== */

:root{
  /* Identité Le Synapse : chaleur restaurant (ivoire/cuivre/bois) + technologie
     MB Synapse (bleu nuit profond, bleu électrique utilisé avec parcimonie). */
  --anthracite: #1b2130;
  --anthracite-2: #262d42;
  --bleu-nuit: #0f1730;
  --bleu-electrique: #2563eb;
  --bleu-electrique-dark: #1e3a8a;
  --ivoire: #faf3e7;
  --ivoire-2: #f2e8d8;
  --cuivre: #c1622d;
  --cuivre-dark: #9c4a1f;
  --cuivre-light: #e08a4f;
  --bois: #8a5a3b;
  --text-main: #201d1a;
  --text-soft: #675e57;
  --text-on-dark: #f2e8d8;
  --text-on-dark-soft: #c6cbe0;
  --border: #e6d9c3;
  --radius-l: 22px;
  --radius-m: 14px;
  --radius-s: 8px;
  --shadow: 0 18px 40px -18px rgba(43,38,34,.35);
  --shadow-soft: 0 10px 24px -14px rgba(43,38,34,.28);
  --container: 1220px;
  --header-h: 76px;
  --z-raised: 10;
  --z-mobile-bar: 90;
  --z-mobile-nav: 99;
  --z-header: 100;
  --z-future-widget: 150; /* réservé — futur widget IA / réservation */
  --z-lightbox: 200;
  font-size: 16px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--ivoire);
  color: var(--text-main);
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.has-mobile-bar{ padding-bottom: 70px; }
@media (min-width: 768px){ body.has-mobile-bar{ padding-bottom: 0; } }

h1, h2, h3, h4{
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--anthracite);
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 600;
}
h1{ font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; color: var(--text-soft); }
a{ color: var(--cuivre-dark); text-decoration: none; }
a:hover{ color: var(--cuivre); }
img{ max-width: 100%; display: block; }
ul{ padding-left: 1.2em; color: var(--text-soft); }
li{ margin-bottom: .4em; }
:focus-visible{ outline: 3px solid var(--cuivre); outline-offset: 2px; }

.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.visually-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link{ position: absolute; left: 12px; top: -60px; background: var(--cuivre); color: #fff; padding: 10px 16px; border-radius: var(--radius-s); z-index: 210; transition: top .2s ease; }
.skip-link:focus{ top: 12px; color: #fff; }

/* ---------- Buttons / CTA group (composant réutilisable) ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  letter-spacing: .04em; text-transform: uppercase; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  line-height: 1;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--cuivre); color: #fff; }
.btn-primary:hover{ background: var(--cuivre-dark); color: #fff; }
.btn-secondary{ background: transparent; color: var(--ivoire); border-color: var(--ivoire); }
.btn-secondary:hover{ background: var(--ivoire); color: var(--anthracite); }
.btn-outline{ background: transparent; color: var(--anthracite); border-color: var(--anthracite); }
.btn-outline:hover{ background: var(--anthracite); color: var(--ivoire); }
.btn-block{ width: 100%; }

/* .cta-group : rempli dynamiquement par components.js à partir de site.json.
   Flexbox = accepte nativement un CTA supplémentaire (ex. "Réserver une table")
   sans aucune modification de structure ou de CSS. */
.cta-group{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Header ---------- */
.site-header{ position: sticky; top: 0; z-index: var(--z-header); background: var(--anthracite); border-bottom: 1px solid rgba(242,232,216,.12); }
.header-inner{ display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.logo{ font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.6rem; color: var(--ivoire); letter-spacing: .01em; }
.logo span{ color: var(--cuivre-light); font-style: normal; }

.main-nav{ display: none; }
.main-nav ul{ display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a{ color: var(--text-on-dark-soft); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px 0; position: relative; white-space: nowrap; }
.main-nav a.btn{ padding: 8px 18px; white-space: nowrap; }
.main-nav a.btn::after{ display: none; }
.main-nav a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--cuivre); transition: right .2s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--ivoire); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right: 0; }

.header-actions{ display: flex; align-items: center; gap: 14px; }
.header-phone{ display: none; align-items: center; gap: 8px; color: var(--ivoire); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.header-phone svg{ width: 18px; height: 18px; stroke: var(--cuivre-light); flex-shrink: 0; }

.hamburger{ display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: transparent; border: 1px solid rgba(242,232,216,.3); border-radius: var(--radius-s); cursor: pointer; padding: 0; align-items: center; }
.hamburger span{ width: 20px; height: 2px; background: var(--ivoire); display: block; transition: transform .25s ease, opacity .25s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{ position: fixed; inset: var(--header-h) 0 0 0; background: var(--anthracite); transform: translateX(100%); transition: transform .3s ease; z-index: var(--z-mobile-nav); overflow-y: auto; padding: 28px 24px 40px; }
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav ul{ list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; }
.mobile-nav a{ display: block; padding: 16px 4px; color: var(--ivoire); font-family: 'Fraunces', serif; font-size: 1.4rem; border-bottom: 1px solid rgba(242,232,216,.12); }
.mobile-nav .header-phone{ display: flex; margin-bottom: 18px; font-size: 1.1rem; }

@media (min-width: 960px){
  .main-nav{ display: block; }
  .header-phone{ display: flex; }
  .hamburger{ display: none; }
  .mobile-nav{ display: none; }
}

/* ---------- Sticky mobile action bar (composant réutilisable) ---------- */
/* Rempli par components.js à partir de site.json (cta.mobileBar*). Flexbox
   avec flex:1 par item : passer de 2 à 3 boutons (ajout futur "Réserver")
   ne demande aucune modification de ce bloc. */
.mobile-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobile-bar); display: flex; background: var(--anthracite); border-top: 1px solid rgba(242,232,216,.15); box-shadow: 0 -10px 24px -12px rgba(0,0,0,.4); }
.mobile-bar a{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 10px; color: var(--ivoire); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; border-right: 1px solid rgba(242,232,216,.15); }
.mobile-bar a:last-child{ border-right: 0; }
.mobile-bar a.is-primary{ background: var(--cuivre); color: #fff; }
.mobile-bar svg{ width: 17px; height: 17px; flex-shrink: 0; }
@media (min-width: 768px){ .mobile-bar{ display: none; } }

/* ---------- Hero ---------- */
.hero{ position: relative; min-height: 640px; max-height: 800px; height: 88vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,14,.15) 0%, rgba(20,17,14,.35) 45%, rgba(20,17,14,.92) 100%); }
.hero-content{ position: relative; z-index: 1; padding: 0 24px 56px; width: 100%; max-width: var(--container); margin: 0 auto; }
.hero-eyebrow{ display: inline-block; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--cuivre-light); margin-bottom: 14px; }
.hero h1{ color: #fff; margin-bottom: .15em; font-size: clamp(2.6rem, 7vw, 4.6rem); }
.hero-subtitle{ font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--ivoire); margin-bottom: 18px; }
.hero-tagline{ color: var(--text-on-dark-soft); font-size: 1.05rem; margin-bottom: 30px; max-width: 46ch; }
.hero-ctas{ margin-bottom: 8px; }
.hero-itinerary{ display: inline-flex; align-items: center; gap: 6px; color: var(--ivoire); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; margin-top: 18px; }
/* Le CTA "reservation" (cta.heroReservation) est rendu par components.js
   uniquement si enabled:true dans site.json — aucune structure à changer. */
.btn-reservation{ background: var(--bois); color: #fff; }
.btn-reservation:hover{ background: #6e4429; color: #fff; }

/* ---------- Sections ---------- */
section{ padding: 88px 0; }
.section-alt{ background: var(--ivoire-2); }
.section-dark{ background: var(--anthracite); color: var(--text-on-dark); }
.section-dark h2, .section-dark h3{ color: var(--ivoire); }
.section-dark p{ color: var(--text-on-dark-soft); }
.section-head{ max-width: 640px; margin: 0 0 48px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow{ display: block; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--cuivre-dark); margin-bottom: 10px; }
.section-dark .eyebrow{ color: var(--cuivre-light); }

/* ---------- Univers cards (composant réutilisable, rendu depuis site.json) ---------- */
/* Image en haut (hauteur fixe) + contenu en flux normal en dessous : la
   hauteur de carte s'adapte à la longueur du texte (pas de superposition
   qui pourrait rogner un intitulé long comme "Charcuteries & Fromages"). */
.univers-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.univers-card{ display: flex; flex-direction: column; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-soft); background: var(--ivoire); }
.univers-card-media{ aspect-ratio: 4/3; overflow: hidden; }
.univers-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.univers-card:hover img{ transform: scale(1.06); }
.univers-card-body{ padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.univers-card-emoji{ font-size: 1.4rem; display: block; margin-bottom: 6px; }
.univers-card-body h3{ color: var(--anthracite); margin-bottom: 8px; font-size: 1.15rem; }
.univers-card-body p{ color: var(--text-soft); margin: 0; font-size: .88rem; }
@media (min-width: 620px){ .univers-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ .univers-grid{ grid-template-columns: repeat(5, 1fr); } .univers-card-body{ padding: 18px 16px 20px; } }

/* ---------- Expérience (editorial) ---------- */
.editorial-block{ display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; margin-bottom: 60px; }
.editorial-block:last-child{ margin-bottom: 0; }
.editorial-media{ border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
.editorial-media img{ width: 100%; height: 100%; object-fit: cover; }
.editorial-text{ max-width: 52ch; }
@media (min-width: 860px){
  .editorial-block{ grid-template-columns: 1.1fr 1fr; gap: 60px; }
  .editorial-block.reverse .editorial-media{ order: 2; }
  .editorial-block.reverse .editorial-text{ order: 1; }
}

/* ---------- Galerie ---------- */
.gallery-filters{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.gallery-filter{ background: var(--ivoire-2); border: 1px solid var(--border); color: var(--text-main); font-size: .85rem; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.gallery-filter:hover{ background: var(--border); }
.gallery-filter.is-active{ background: var(--cuivre); border-color: var(--cuivre); color: #fff; }
.gallery-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gallery-item{ border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--radius-m); overflow: hidden; position: relative; aspect-ratio: 1/1; display: block; width: 100%; }
.gallery-item[hidden]{ display: none; }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img{ transform: scale(1.08); }
.gallery-item .zoom-hint{ position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(43,38,34,.55); display: flex; align-items: center; justify-content: center; }
.gallery-item .zoom-hint svg{ width: 14px; height: 14px; stroke: #fff; }
.gallery-empty{ text-align: center; color: var(--text-soft); padding: 40px 0; display: none; }
.gallery-empty.is-visible{ display: block; }
@media (min-width: 620px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }

.lightbox{ position: fixed; inset: 0; background: rgba(20,17,14,.94); z-index: var(--z-lightbox); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.is-open{ display: flex; }
.lightbox-figure{ max-width: min(92vw, 1100px); max-height: 88vh; margin: 0; text-align: center; }
.lightbox-figure img{ max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: var(--radius-s); }
.lightbox-figure figcaption{ color: var(--text-on-dark-soft); margin-top: 14px; font-size: .9rem; }
.lightbox-close, .lightbox-prev, .lightbox-next{ position: absolute; background: rgba(242,232,216,.1); border: 1px solid rgba(242,232,216,.3); color: #fff; border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: var(--cuivre); border-color: var(--cuivre); }
.lightbox-close{ top: 18px; right: 18px; }
.lightbox-prev{ left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; }
@media (max-width: 620px){ .lightbox-prev{ left: 6px; } .lightbox-next{ right: 6px; } .lightbox-close{ top: 10px; right: 10px; } }

/* ---------- Pourquoi venir ---------- */
.why-grid{ display: grid; grid-template-columns: 1fr; gap: 24px; }
.why-card{ background: var(--ivoire); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 28px; }
.why-card h3{ margin-bottom: 8px; color: var(--cuivre-dark); }
@media (min-width: 720px){ .why-grid{ grid-template-columns: repeat(4, 1fr); } }

/* ---------- Avis (composant réutilisable) ---------- */
.avis-grid{ display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 40px; }
.avis-card{ background: var(--ivoire-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 28px; position: relative; }
.avis-card .quote-mark{ font-family: 'Fraunces', serif; font-size: 3rem; color: var(--cuivre); line-height: 1; display: block; margin-bottom: 6px; }
.avis-card p{ color: var(--text-main); font-style: italic; margin-bottom: 12px; }
.avis-card .avis-meta{ color: var(--text-soft); font-size: .85rem; font-style: normal; }
.avis-placeholder{ opacity: .7; }
.avis-note{ border: 1px dashed var(--bois); border-radius: var(--radius-m); padding: 18px 22px; color: var(--text-soft); font-size: .9rem; margin-bottom: 40px; background: rgba(138,90,59,.06); }
@media (min-width: 760px){ .avis-grid{ grid-template-columns: repeat(3, 1fr); } }

/* ---------- Infos pratiques / CTA final ---------- */
.infos-grid{ display: grid; gap: 16px; max-width: 640px; margin: 0 auto; justify-items: center; text-align: center; }
.cta-final{ text-align: center; }
.cta-final .cta-group{ justify-content: center; margin-top: 26px; }

/* ---------- Contact ---------- */
.contact-layout{ display: grid; grid-template-columns: 1fr; gap: 40px; }
.contact-card{ background: var(--anthracite); color: var(--text-on-dark); border-radius: var(--radius-l); padding: 40px; box-shadow: var(--shadow); }
.contact-card h2{ color: var(--ivoire); }
.contact-list{ list-style: none; padding: 0; margin: 0 0 30px; }
.contact-list li{ display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(242,232,216,.14); color: var(--text-on-dark-soft); }
.contact-list li:last-child{ border-bottom: none; }
.contact-list svg{ width: 22px; height: 22px; stroke: var(--cuivre-light); flex-shrink: 0; margin-top: 2px; }
.contact-list a{ color: var(--ivoire); font-weight: 600; }
.contact-list strong{ display: block; color: var(--ivoire); font-weight: 600; margin-bottom: 2px; }
.map-frame{ border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--border); min-height: 360px; }
.map-frame iframe{ width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
@media (min-width: 960px){ .contact-layout{ grid-template-columns: .85fr 1.15fr; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--anthracite); color: var(--text-on-dark-soft); padding: 64px 0 0; }
.footer-grid{ display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid rgba(242,232,216,.12); }
.footer-brand .logo{ margin-bottom: 12px; }
.footer-brand p{ color: var(--text-on-dark-soft); max-width: 32ch; }
.footer-col h4{ color: var(--ivoire); font-size: 1rem; margin-bottom: 14px; font-family: 'Work Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.footer-col ul{ list-style: none; padding: 0; margin: 0; }
.footer-col li{ margin-bottom: 10px; }
.footer-col a{ color: var(--text-on-dark-soft); }
.footer-col a:hover{ color: var(--cuivre-light); }
.footer-bottom{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 22px 0; font-size: .82rem; }
.footer-legal{ display: flex; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
@media (min-width: 720px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.page-intro{ padding: 56px 0 0; }
.page-intro .eyebrow{ margin-bottom: 12px; }
.page-intro p{ max-width: 60ch; font-size: 1.05rem; }
.lead{ font-size: 1.15rem; color: var(--text-main); }

/* ---------- Assistant O'Relais (widget IA, mode démonstration) ---------- */
.assistant-widget{ position: fixed; right: 20px; bottom: 20px; z-index: var(--z-future-widget); font-family: 'Work Sans', sans-serif; }
body.has-mobile-bar .assistant-widget{ bottom: 90px; }
@media (min-width: 768px){ .assistant-widget{ bottom: 24px; } body.has-mobile-bar .assistant-widget{ bottom: 24px; } }

.assistant-toggle{ width: 58px; height: 58px; border-radius: 50%; background: var(--cuivre); color: #fff; border: none; box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.assistant-toggle:hover{ background: var(--cuivre-dark); }
.assistant-toggle svg{ width: 24px; height: 24px; position: absolute; transition: opacity .15s ease, transform .15s ease; }
.assistant-icon-close{ opacity: 0; transform: scale(.6); }
.assistant-widget.is-open .assistant-icon-chat{ opacity: 0; transform: scale(.6); }
.assistant-widget.is-open .assistant-icon-close{ opacity: 1; transform: scale(1); }

.assistant-panel{ position: absolute; right: 0; bottom: 72px; width: min(340px, calc(100vw - 40px)); height: min(480px, 70vh); background: var(--ivoire); border-radius: var(--radius-l); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .18s ease; border: 1px solid var(--border); }
.assistant-panel.is-open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.assistant-header{ background: var(--anthracite); color: var(--ivoire); padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; }
.assistant-badge{ background: var(--cuivre); color: #fff; font-family: 'Work Sans', sans-serif; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; }
.assistant-messages{ flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.assistant-msg{ max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.45; white-space: pre-line; }
.assistant-msg-bot{ background: var(--ivoire-2); color: var(--text-main); border-bottom-left-radius: 4px; align-self: flex-start; }
.assistant-msg-user{ background: var(--cuivre); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.assistant-cta{ align-self: flex-start; background: var(--anthracite); color: var(--ivoire); font-size: .82rem; font-weight: 600; padding: 9px 16px; border-radius: 999px; }
.assistant-suggestions{ display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.assistant-chip{ background: var(--ivoire-2); border: 1px solid var(--border); color: var(--text-main); font-size: .76rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.assistant-chip:hover{ background: var(--border); }
.assistant-form{ display: flex; border-top: 1px solid var(--border); }
.assistant-form input{ flex: 1; border: none; padding: 12px 14px; font-family: inherit; font-size: .88rem; background: transparent; color: var(--text-main); }
.assistant-form input:focus{ outline: none; }
.assistant-form button{ background: var(--cuivre); color: #fff; border: none; width: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.assistant-form button:hover{ background: var(--cuivre-dark); }
.assistant-form svg{ width: 16px; height: 16px; }

.hero-assistant-hint{ display: inline-flex; align-items: center; gap: 6px; color: var(--text-on-dark-soft); font-size: .85rem; background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 4px; }
.hero-assistant-hint:hover{ color: var(--ivoire); }

/* ---------- Événements (public) ---------- */
.events-grid{ display: grid; grid-template-columns: 1fr; gap: 26px; }
.event-card{ background: var(--ivoire); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; }
.event-card-media{ aspect-ratio: 16/9; overflow: hidden; position: relative; }
.event-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.event-card-tag{ position: absolute; top: 14px; left: 14px; background: var(--anthracite); color: var(--ivoire); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; }
.event-card-body{ padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.event-card-date{ color: var(--cuivre-dark); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.event-card-body h3{ margin-bottom: 8px; }
.event-card-body p{ flex: 1; }
.event-card-meta{ display: flex; gap: 16px; font-size: .82rem; color: var(--text-soft); margin-top: 10px; }
@media (min-width: 720px){ .events-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Réservation (wizard) ---------- */
.res-wizard{ max-width: 640px; margin: 0 auto; }
.res-progress{ display: flex; gap: 8px; margin-bottom: 40px; }
.res-progress-step{ flex: 1; height: 4px; border-radius: 4px; background: var(--border); }
.res-progress-step.is-active, .res-progress-step.is-done{ background: var(--cuivre); }
.res-step{ display: none; }
.res-step.is-active{ display: block; animation: resFade .25s ease; }
@keyframes resFade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
.res-step h2{ margin-bottom: 6px; }
.res-step-hint{ color: var(--text-soft); margin-bottom: 24px; }

.people-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.people-btn{ padding: 18px 0; border-radius: var(--radius-m); border: 2px solid var(--border); background: var(--ivoire); font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--anthracite); cursor: pointer; }
.people-btn:hover{ border-color: var(--cuivre); }
.people-btn.is-selected{ border-color: var(--cuivre); background: var(--cuivre); color: #fff; }

.calendar{ background: var(--ivoire); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 20px; margin-bottom: 28px; }
.calendar-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-head strong{ font-family: 'Fraunces', serif; font-size: 1.1rem; text-transform: capitalize; }
.calendar-nav{ background: var(--ivoire-2); border: 1px solid var(--border); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.calendar-nav:disabled{ opacity: .35; cursor: not-allowed; }
.calendar-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.calendar-dow{ font-size: .72rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; padding-bottom: 6px; }
.calendar-day{ aspect-ratio: 1; border-radius: 10px; border: none; background: transparent; font-size: .88rem; color: var(--text-main); cursor: pointer; }
.calendar-day:hover:not(:disabled):not(.is-selected){ background: var(--ivoire-2); }
.calendar-day.is-selected{ background: var(--cuivre); color: #fff; font-weight: 700; }
.calendar-day:disabled{ color: var(--border); cursor: not-allowed; text-decoration: line-through; }
.calendar-day.is-empty{ visibility: hidden; }
.calendar-legend{ margin-top: 14px; font-size: .8rem; color: var(--text-soft); }

.slots-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.slot-btn{ padding: 13px 0; border-radius: var(--radius-s); border: 2px solid var(--border); background: var(--ivoire); font-weight: 600; color: var(--anthracite); cursor: pointer; }
.slot-btn:hover{ border-color: var(--cuivre); }
.slot-btn.is-selected{ border-color: var(--cuivre); background: var(--cuivre); color: #fff; }
.slots-group-label{ font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin: 0 0 10px; }

.res-form{ display: grid; gap: 18px; margin-bottom: 28px; }
.res-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.res-field{ display: flex; flex-direction: column; gap: 6px; }
.res-field label{ font-size: .82rem; font-weight: 600; color: var(--text-main); }
.res-field input, .res-field textarea{ border: 1px solid var(--border); border-radius: var(--radius-s); padding: 12px 14px; font-family: inherit; font-size: .92rem; background: var(--ivoire); color: var(--text-main); }
.res-field input:focus, .res-field textarea:focus{ outline: 2px solid var(--cuivre); border-color: var(--cuivre); }
.res-field textarea{ resize: vertical; min-height: 80px; }

.res-summary{ background: var(--ivoire-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 24px; margin-bottom: 28px; }
.res-summary dl{ display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.res-summary dt{ color: var(--text-soft); font-size: .85rem; }
.res-summary dd{ margin: 0; font-weight: 600; color: var(--anthracite); }

.res-actions{ display: flex; justify-content: space-between; gap: 12px; }
.res-actions .btn-outline{ border-color: var(--border); color: var(--text-soft); }

.res-success{ text-align: center; padding: 20px 0; }
.res-success-icon{ width: 72px; height: 72px; border-radius: 50%; background: var(--cuivre); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.res-success-icon svg{ width: 34px; height: 34px; }

@media (max-width: 520px){ .people-grid{ grid-template-columns: repeat(4, 1fr); } .slots-grid{ grid-template-columns: repeat(2, 1fr); } .res-form-row{ grid-template-columns: 1fr; } }

/* ---------- Sélecteur commercial MB Synapse (solutions / badge d'offre) ---------- */
.mbs-footer-note{ background: var(--bleu-nuit); color: var(--text-on-dark-soft); font-size: .82rem; padding: 16px 0; text-align: center; }
.mbs-footer-note a{ color: var(--bleu-electrique); font-weight: 600; }
.mbs-footer-note a:hover{ color: #7fa2ff; }
.mbs-trigger{ background: none; border: 1px solid var(--border); color: var(--text-soft); font-size: .78rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.mbs-trigger:hover{ border-color: var(--bleu-electrique); color: var(--bleu-electrique); }
.mbs-tier-badge{ display: inline-flex; align-items: center; gap: 6px; background: rgba(37,99,235,.1); border: 1px solid var(--bleu-electrique); color: var(--bleu-electrique-dark); font-size: .82rem; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.mbs-tier-badge:hover{ background: var(--bleu-electrique); color: #fff; }

.mbs-overlay{ position: fixed; inset: 0; background: rgba(15,23,48,.6); z-index: 500; display: none; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.mbs-overlay.is-open{ display: flex; }
.mbs-card{ background: var(--ivoire); border-radius: var(--radius-l); max-width: 420px; width: 100%; padding: 34px; position: relative; box-shadow: var(--shadow); }
.mbs-card-wide{ max-width: 920px; }
.mbs-close{ position: absolute; top: 16px; right: 16px; background: var(--ivoire-2); border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; line-height: 1; color: var(--text-soft); }
.mbs-eyebrow{ display: block; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; color: var(--bleu-electrique-dark); margin-bottom: 8px; }
.mbs-card h2{ margin-bottom: 14px; }
.mbs-lead{ color: var(--text-soft); margin-bottom: 24px; }
.mbs-tiers{ display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; }
.mbs-tier{ position: relative; border: 1px solid var(--border); border-radius: var(--radius-m); padding: 22px; background: var(--ivoire-2); }
.mbs-tier.is-current{ border-color: var(--bleu-electrique); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.mbs-tier.is-recommended{ border-color: var(--cuivre); box-shadow: 0 0 0 2px rgba(193,98,45,.18); }
.mbs-recommended{ position: absolute; top: -11px; left: 22px; background: var(--cuivre); color: #fff; font-size: .66rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.mbs-tier h3{ margin-bottom: 4px; font-size: 1.15rem; }
.mbs-current{ font-size: .68rem; background: var(--bleu-electrique); color: #fff; padding: 2px 9px; border-radius: 999px; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; }
.mbs-price{ color: var(--cuivre-dark); font-weight: 700; margin-bottom: 12px; }
.mbs-tier ul{ list-style: none; padding: 0; margin: 0 0 18px; }
.mbs-tier li{ padding: 5px 0 5px 20px; position: relative; font-size: .88rem; color: var(--text-main); }
.mbs-tier li::before{ content: "✓"; position: absolute; left: 0; color: var(--cuivre); font-weight: 700; }
.mbs-compare-link{ text-align: center; margin: 0; }
@media (min-width: 780px){ .mbs-tiers{ grid-template-columns: repeat(3, 1fr); } }

/* ---------- Bandeau de contexte démo (niveau BUSINESS) — repère visuel, distinct du bouton .mbs-tier-badge ---------- */
.demo-context-bar{ background: var(--bleu-nuit); border-bottom: 1px solid rgba(242,232,216,.12); }
.demo-context-bar-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; padding: 9px 0; text-align: center; }
.demo-context-bar-text{ margin: 0; font-size: .78rem; color: var(--text-on-dark-soft); }
.demo-context-bar-label{ font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark); margin-right: 8px; }
.demo-context-bar-link{ font-size: .78rem; font-weight: 600; color: var(--bleu-electrique); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.demo-context-bar-link:hover{ color: #7fa2ff; }