/* =========================================================
   LE FAR DU MIN — feuille de style (v3)
   Vanilla CSS. Palette conforme à la charte graphique v1.0 :
   bordeaux dominant, crème en respiration, or en accent (~10 %).
   Typographies : Abril Fatface · Cormorant Garamond · Oswald · Barlow Condensed.
   ========================================================= */

/* =========================================================
   POLICES — auto-hébergées (aucune requête vers un tiers)
   Les 4 familles de la charte, licence OFL : voir les fichiers
   assets/fonts/LICENSE-*.txt. Sous-ensemble « latin » (suffisant
   pour le français) ; « latin-ext » ajouté pour le texte courant,
   qui affiche des contenus saisis dans le back-office.
   ========================================================= */
@font-face{ font-family:'Abril Fatface'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/abril-fatface-latin-400-normal.woff2') format('woff2'); }

@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url('../assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:600; font-display:swap;
  src:url('../assets/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2'); }
/* Poids droit (non-italique) ajouté uniquement pour le titre du popup
   d'ouverture (.image-popup-modal__title), reconstruit en CSS depuis
   l'ancienne image assets/images/openPopup.webp. */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }

@font-face{ font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/oswald-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/oswald-latin-500-normal.woff2') format('woff2'); }

@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* =========================================================
   DESIGN TOKENS — Charte graphique Le FAR du MIN v1.0
   Bordeaux dominant · crème en respiration · or en accent (~10 %).
   Règle d'or : or clair sur bordeaux, or sur crème.
   Jamais d'or sur or, jamais de bordeaux sur encre.
   ========================================================= */
:root{
  /* ---- Fonds & texte ---- */
  --creme:            #F5EFE6;
  --creme-60:         rgba(245,239,230,.62);
  --creme-30:         rgba(245,239,230,.24);
  --creme-12:         rgba(245,239,230,.12);
  /* Crème doré — écart assumé à la charte (un seul crème) : sert au bandeau
     défilant pour qu'il se détache du crème des sections claires voisines. */
  --creme-dore:       #EDE4D3;

  --encre:            #33302E;
  --encre-70:         rgba(51,48,46,.72);
  --encre-45:         rgba(51,48,46,.48);
  --encre-18:         rgba(51,48,46,.14);
  --encre-08:         rgba(51,48,46,.07);

  /* ---- Bordeaux ---- */
  --bordeaux:         #6E1B2B;
  --bordeaux-profond: #4A121D;

  /* ---- Or : deux tons selon le fond ---- */
  --or:               #A8792E;  /* sur crème : filets, ornements, aplats */
  --or-clair:         #C89B4A;  /* sur bordeaux : lettrages, prix, icônes */
  --or-lien:          #8A6220;  /* liens en texte courant sur crème — voir rapport lot 4 */

  /* ---- Signalétique — hors charte, voir le rapport du lot 1 ----
     La charte ne prévoit aucune couleur de statut : ces trois
     valeurs sont réaccordées à la gamme, sans en faire partie. */
  --vert:             #4F6138;  /* texte de confirmation sur crème */
  --vert-clair:       #93A06A;  /* pastille « ouvert » sur voile sombre */
  --bordeaux-clair:   #B05A68;  /* pastille « fermé » sur voile sombre */

  /* ---- Typographies — 4 familles, 4 rôles (charte §04) ---- */
  --font-display: 'Abril Fatface', Georgia, serif;          /* titres, grands numéros, prix */
  --font-serif:   'Cormorant Garamond', Georgia, serif;     /* italiques : sous-titres, citations */
  --font-label:   'Oswald', 'Arial Narrow', Arial, sans-serif;         /* capitales espacées */
  --font-body:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; /* texte courant */

  --track-label:  .4em;  /* lettrages espacés — charte : 0,4 à 0,6 em */
  --track-btn:    2px;   /* boutons — charte, section web */

  /* ---- Divers ---- */
  --wrap: 1220px;
  --radius: 6px;
  --ease: cubic-bezier(.22,.7,.24,1);
}

/* ---------- Règles typographiques globales ----------
   Abril Fatface n'a ni italique ni graisse alternative, Oswald et
   Barlow Condensed n'ont pas d'italique : tout italique de la page
   est donc rendu en Cormorant Garamond, la seule famille italique
   de la charte. font-synthesis:none interdit au navigateur de
   fabriquer de faux gras / faux italiques. */
/* Les liens ne sont soulignés qu'au survol (charte) : on rétablit le
   soulignement au focus clavier, sans quoi la navigation au Tab est aveugle. */
a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }

em, i{ font-family:var(--font-serif); font-style:italic; font-weight:500; }
b, strong{ font-weight:600; }

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
@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;
  overflow-x:hidden;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.62;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg use{ fill:none; stroke:currentColor; }
svg{ flex-shrink:0; }
symbol path, symbol circle, symbol rect{
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
/* La cloche est tracée dans son propre repère (69 x 44), avec l'épaisseur
   relevée dans la charte : elle échappe à l'épaisseur générique ci-dessus. */
#icon-cloche path, #icon-cloche circle{ stroke-width:2.2029; }
#icon-cloche circle{ fill:currentColor; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:400;
  background:var(--encre); color:var(--creme); padding:.8rem 1.2rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Grain texture (toute la page) ---------- */
.grain{
  position:fixed; inset:0; z-index:250; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Curseur personnalisé (desktop uniquement) ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; z-index:260;
  width:10px; height:10px; border-radius:50%;
  background:var(--or);
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  transition:width .25s var(--ease), height .25s var(--ease), background-color .2s ease;
  display:none;
}
html.has-fine-pointer .cursor-dot{ display:block; }
.cursor-dot__label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  white-space:nowrap; font-family:var(--font-label); font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--creme); opacity:0; transition:opacity .2s ease;
}
.cursor-dot.is-big{ width:64px; height:64px; background:var(--or-clair); }
.cursor-dot.is-big .cursor-dot__label{ opacity:1; color:var(--bordeaux-profond); }
html.has-fine-pointer.cursor-active *{ cursor:none !important; }

/* ---------- Reveal au scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--font-label);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--bordeaux-profond);
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:''; width:34px; height:2px; background:var(--or);
}
.eyebrow--creme{ color:var(--or-clair); }
.eyebrow--creme::before{ background:var(--or-clair); }

.section__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem, 1.15rem + 2.7vw, 3.1rem);
  line-height:1.1;
  letter-spacing:0;
  color:var(--bordeaux);
  margin:0 0 1.2rem;
  max-width:16ch;
}
.section__title em{ font-style:italic; font-weight:500; color:var(--or); }
.section__title--creme em{ color:var(--or-clair); }
.section__title--creme{ color:var(--creme); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:1.1rem; letter-spacing:.02em;
  text-decoration:none;
  color:var(--or-lien);
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:gap .2s var(--ease);
}
.link-arrow:hover{ gap:.75rem; border-bottom-color:currentColor; }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-label); font-weight:500; font-size:.88rem;
  letter-spacing:var(--track-btn); text-transform:uppercase;
  padding:.95rem 2.1rem;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid var(--or-clair);
  transition:transform .25s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
  will-change:transform;
}
/* Principal — aplat or clair, texte bordeaux profond (charte, section web).
   Au survol la relation s'inverse : fond bordeaux profond, texte or clair. */
.btn--solid,
.btn--encre{ background:var(--or-clair); border-color:var(--or-clair); color:var(--bordeaux-profond); }
.btn--solid:hover,
.btn--encre:hover{ background:var(--bordeaux-profond); border-color:var(--bordeaux-profond); color:var(--or-clair); }
/* Secondaire — contour or clair sur fond bordeaux ou sur photo */
.btn--outline{ background:transparent; color:var(--or-clair); border-color:var(--or-clair); }
.btn--outline:hover{ background:var(--or-clair); color:var(--bordeaux-profond); border-color:var(--or-clair); }
/* Statique — aplat or clair figé : aucun changement de style au survol,
   seul l'effet magnet (translate) reste actif. Utilisé sur les CTA du hero. */
.btn--static,
.btn--static:hover,
.btn--static:focus-visible{
  background:var(--or-clair); border-color:var(--or-clair); color:var(--bordeaux-profond);
}

/* Icône principale de la charte, en ouverture de la section Carte. */
.carte__cloche{
  display:block; width:70px; height:auto; margin:0 0 1.8rem;
  color:var(--or-clair);
}
@media (max-width: 600px){ .carte__cloche{ width:58px; margin-bottom:1.6rem; } }

/* ---------- Filet or de séparation ----------
   Les fonds clairs sont tous au même crème : ce filet centré aux 2/3
   redonne le rythme entre deux sections consécutives (charte : filet or). */
.concept::before,
.infos::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(66%, 760px); height:1px; background:var(--or); opacity:.45;
}
/* Même principe, en or clair : "Le rythme du marché" et "Les soirées" sont
   toutes les deux en bordeaux et se suivent directement (carte masquée). */
.soirees-section::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(66%, 760px); height:1px; background:var(--or-clair); opacity:.45;
}

/* ---------- Marquee (bandeau défilant) ---------- */
.marquee{
  overflow:hidden;
  background:var(--bordeaux-profond);
  color:var(--creme);
  border-top:1px solid var(--creme-12);
  border-bottom:1px solid var(--creme-12);
  padding:.9rem 0;
}
.marquee__track{
  display:flex; width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee__item{
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:1.4rem; letter-spacing:.01em;
  padding:0 1.6rem; white-space:nowrap;
}
.marquee__item svg{ color:var(--or-clair); width:14px; height:14px; }
.marquee--warm{ background:var(--creme-dore); color:var(--bordeaux); border-color:var(--or); }
.marquee--warm .marquee__item svg{ color:var(--or); }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:150;
  background:rgba(245,239,230,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--encre-18);
  transition:transform .35s var(--ease), box-shadow .2s ease;
}
.site-header.header--hidden{ transform:translateY(-100%); }
.site-header__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:1.05rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; color:var(--bordeaux); }
.brand__word{ display:flex; flex-direction:column; line-height:1; }
/* Proportions du logo relevées dans la charte : « le » et « du » à 0,577
   de la capitale, le A doré à 1,423. Le lockup complet (BRASSERIE / cloche /
   nom / TOULOUSE) vit dans assets/logo/ et dans l'image de partage. */
.brand__name{
  font-family:var(--font-display); font-weight:400; font-size:1.5rem;
  letter-spacing:0; text-transform:none; line-height:1.1; white-space:nowrap;
}
.brand__name i{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:.577em; }
.brand__a{ color:var(--or); font-size:1.423em; line-height:0; }
.brand__tag{
  font-family:var(--font-label); font-weight:400; font-size:.58rem; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--bordeaux); opacity:.85; margin-top:.35rem;
}

.nav-toggle{ display:flex; padding:.4rem; }
.primary-nav{
  display:flex; align-items:center; gap:2rem;
  font-family:var(--font-label); font-weight:500; font-size:1.05rem;
  letter-spacing:.03em; text-transform:none;
}
.primary-nav a{ text-decoration:none; position:relative; padding:.2rem 0; }
.primary-nav a:not(.primary-nav__cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--bordeaux); transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease);
}
.primary-nav a:not(.primary-nav__cta):hover::after,
.primary-nav a.is-active::after{ transform:scaleX(1); }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw, 340px);
    background:var(--creme); border-left:1px solid var(--encre-18);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:5.5rem 1.9rem 2rem;
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    font-size:1.15rem;
  }
  .primary-nav.is-open{ transform:translateX(0); }
  .primary-nav a{ width:100%; padding:.85rem 0; border-bottom:1px solid var(--encre-18); }
  .primary-nav__cta{ margin-top:.9rem; text-align:center; border-bottom:2px solid var(--encre) !important; }
}
@media (min-width: 901px){ .nav-toggle{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:94vh;
  display:flex; align-items:center;
  color:var(--creme);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:-6% 0 0; z-index:0; will-change:transform; }
.hero__media img, .hero__media video{ width:100%; height:106%; object-fit:cover; }
/* Vidéo légèrement assombrie : les rushs (inox, vestes blanches) sont bien
   plus clairs/contrastés que l'ancienne image fixe et diluaient le texte
   crème. Cf. charte : « voile bordeaux » sur les visuels du hero. */
.hero__media video{ filter:brightness(.82) saturate(.92); }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(74,18,29,.62) 0%, rgba(74,18,29,.38) 38%, rgba(74,18,29,.12) 62%, rgba(74,18,29,0) 82%),
    linear-gradient(180deg, rgba(74,18,29,.34) 0%, rgba(74,18,29,.16) 30%, rgba(74,18,29,.24) 60%, rgba(74,18,29,.58) 100%);
}
.hero__inner{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto; width:100%;
  padding:8rem 1.5rem 3.4rem;
}
.hero__eyebrow{
  font-family:var(--font-label); font-weight:400; font-size:.74rem;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--or-clair);
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.5rem;
  text-shadow:0 1px 8px rgba(20,7,10,.4);
  opacity:0; transform:translateY(14px);
  animation:heroIn .8s var(--ease) .1s forwards;
}
.hero__eyebrow::before{ content:''; width:34px; height:2px; background:var(--or-clair); }
.hero__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.3rem, 1.25rem + 5vw, 4.7rem);
  line-height:1.04; letter-spacing:-.005em;
  max-width:17ch;
  margin:0 0 1.5rem;
  text-shadow:0 4px 24px rgba(20,7,10,.5), 0 1px 4px rgba(20,7,10,.4);
}
.hero__title span{
  display:block; overflow:hidden;
}
.hero__title span b{
  display:block; font-weight:400;
  opacity:0; transform:translateY(100%);
  animation:heroIn .9s var(--ease) forwards;
}
.hero__title span:nth-child(2) b{ animation-delay:.18s; }
.hero__title em{ font-style:italic; font-weight:500; color:var(--or-clair); }
.hero__lede{
  font-family:var(--font-body);
  font-size:clamp(1.24rem, 1.1rem + .4vw, 1.46rem);
  color:var(--creme-60);
  max-width:44ch; margin:0 0 2.4rem;
  text-shadow:0 1px 10px rgba(20,7,10,.4);
  opacity:0; transform:translateY(14px);
  animation:heroIn .8s var(--ease) .4s forwards;
}
.hero__actions{
  display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem;
  opacity:0; transform:translateY(14px);
  animation:heroIn .8s var(--ease) .52s forwards;
}
.hero__facts{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
  padding-top:1.8rem; border-top:1px solid var(--creme-30);
  opacity:0; transform:translateY(14px);
  animation:heroIn .8s var(--ease) .64s forwards;
}
.hero__facts li{
  display:flex; align-items:center; gap:.6rem;
  font-weight:500; font-size:1.05rem; letter-spacing:.02em;
  color:var(--creme-60);
}
.hero__facts svg{ color:var(--or-clair); }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

.hero__status{
  position:absolute; top:1.4rem; right:1.5rem; z-index:2;
  display:flex; align-items:center; gap:.5rem;
  background:rgba(51,48,46,.72);
  border:1px solid var(--creme-30);
  color:var(--creme);
  font-weight:500; font-size:.96rem; letter-spacing:.02em;
  padding:.5rem 1rem;
  border-radius:999px;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.hero__status::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--creme-30);
}
.hero__status.is-open::before{ background:var(--vert-clair); box-shadow:0 0 0 3px rgba(147,160,106,.28); }
.hero__status.is-closed::before{ background:var(--bordeaux-clair); }
.hero__status.is-soon::before{ background:var(--or-clair); box-shadow:0 0 0 3px rgba(200,155,74,.28); }

.scroll-cue{
  position:absolute; right:1.5rem; bottom:1.6rem; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--creme-60); font-family:var(--font-label); font-size:.66rem; letter-spacing:var(--track-label); text-transform:uppercase;
}
.scroll-cue__line{ width:1px; height:34px; background:var(--creme-30); position:relative; overflow:hidden; }
.scroll-cue__line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--or-clair); animation:scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; } }
@media (max-width: 640px){
  .hero__status{ position:static; margin:0 1.5rem 1.2rem; align-self:flex-start; }
  .hero{ flex-direction:column; justify-content:center; }
  .scroll-cue{ display:none; }
}

/* ---------- Sections (generic rhythm) ---------- */
.section{ padding:6.5rem 1.5rem; position:relative; }
.section__inner{ max-width:var(--wrap); margin:0 auto; position:relative; }

/* ---------- Manifeste (asymétrique, grande citation) ---------- */
.manifesto{ background:var(--creme); overflow:hidden; }
.manifesto__inner{
  display:grid; grid-template-columns:7fr 5fr; gap:3rem; align-items:center;
}
.manifesto__quote-wrap{ position:relative; }
.manifesto__glyph{
  position:absolute; top:-4.5rem; left:-1.6rem; z-index:0;
  font-family:var(--font-display); font-weight:400; font-size:11rem;
  color:var(--bordeaux); opacity:.1; line-height:1; pointer-events:none;
  user-select:none;
}
.manifesto__quote{
  position:relative; z-index:1;
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:clamp(1.7rem, 1.15rem + 2.1vw, 2.9rem);
  line-height:1.25; color:var(--encre);
}
.manifesto__rule{ width:64px; height:1px; background:var(--or); margin:2rem 0; }
.manifesto__sub{ font-size:1.26rem; color:var(--encre-70); max-width:48ch; }
.manifesto__media{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  transform:rotate(2.5deg);
  box-shadow:14px 18px 0 var(--encre-08);
}
.manifesto__media img{ width:100%; height:100%; object-fit:cover; }
.manifesto__media:hover img{ filter:none; }
/* Voile bordeaux 12 % (charte : 10 à 15 %) — remplace les filtres sépia
   hérités de l'ancienne palette. z-index 1 : il passe sous les pastilles. */
.manifesto__media::after,
.concept-row__media::after,
.soirees__media::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(110,27,43,.12);
  transition:opacity .5s ease;
}
.concept-row__media:hover::after,
.soirees__media:hover::after,
.manifesto__media:hover::after{ opacity:.35; }

.manifesto__stamp{
  position:absolute; bottom:-14px; left:-14px; z-index:2;
  background:var(--or-clair); color:var(--bordeaux-profond);
  font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.5rem;
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-10deg);
  line-height:1.05;
}
@media (max-width: 860px){
  .manifesto__inner{ grid-template-columns:1fr; }
  .manifesto__media{ max-width:280px; margin:0 auto; }
  .manifesto__glyph{ font-size:7rem; top:-3rem; left:-.6rem; }
}

/* ---------- Concept : rangées éditoriales asymétriques ---------- */
.concept{ background:var(--creme); }
.concept-row{
  display:grid; grid-template-columns:5fr 7fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  padding:4rem 0;
  border-bottom:1px dashed var(--encre-18);
}
.concept-row:first-of-type{ padding-top:0; }
.concept-row:last-of-type{ border-bottom:0; padding-bottom:0; }
.concept-row:nth-of-type(even){ grid-template-columns:7fr 5fr; }
.concept-row:nth-of-type(even) .concept-row__media{ order:2; }
.concept-row:nth-of-type(odd) .concept-row__media{ transform:rotate(-2.2deg); }
.concept-row:nth-of-type(even) .concept-row__media{ transform:rotate(2deg); }
.concept-row__media{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius);
  box-shadow:10px 12px 0 var(--encre-08);
  transition:transform .4s var(--ease);
}
.concept-row__media:hover{ transform:rotate(0deg) scale(1.015) !important; }
.concept-row__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.concept-row__media:hover img{ transform:scale(1.06); }
.concept-row__content{ position:relative; }
.concept-row__num{
  position:absolute; top:-3.2rem; left:-.3rem;
  font-family:var(--font-display); font-weight:400; font-size:5.5rem;
  color:var(--bordeaux); opacity:.12; line-height:1; pointer-events:none;
}
.concept-row__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem, 1.05rem + .95vw, 1.85rem);
  margin:0 0 .9rem; position:relative;
}
.concept-row__text{ color:var(--encre-70); font-size:1.26rem; max-width:44ch; position:relative; }
@media (max-width: 760px){
  .concept-row, .concept-row:nth-of-type(even){ grid-template-columns:1fr; }
  .concept-row:nth-of-type(even) .concept-row__media{ order:0; }
  .concept-row__num{ font-size:3.6rem; top:-2rem; }
}

/* ---------- Rythme du jour ---------- */
.timeline-section{ background:var(--bordeaux); }
.timeline{
  display:grid; gap:0;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--creme-30);
  border-left:1px solid var(--creme-30);
}
.timeline__item{
  position:relative;
  padding:2.4rem 1.8rem;
  border-right:1px solid var(--creme-30);
  border-bottom:1px solid var(--creme-30);
  transition:background-color .25s ease;
}
.timeline__item:hover{ background:rgba(200,155,74,.10); }
.timeline__time{
  font-family:var(--font-display); font-weight:400; font-size:2.1rem;
  color:var(--or-clair);
  display:block; margin-bottom:.8rem;
  transition:transform .3s var(--ease);
}
.timeline__item:hover .timeline__time{ transform:translateX(4px); }
.timeline__item h3{ font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.2rem; margin-bottom:.5rem; color:var(--creme); }
.timeline__item p{ color:var(--creme-60); font-size:1.1rem; }
@media (max-width: 760px){ .timeline{ grid-template-columns:1fr 1fr; } }
@media (max-width: 460px){ .timeline{ grid-template-columns:1fr; } }

/* ---------- La Carte ---------- */
.carte{ background:var(--bordeaux); color:var(--creme); position:relative; }
.carte .section__inner{ position:relative; }
.carte__banner{
  position:relative; height:280px; border-radius:var(--radius);
  overflow:hidden; margin-bottom:3rem;
}
.carte__banner img{ width:100%; height:100%; object-fit:cover; }
.carte__banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(74,18,29,.88), rgba(74,18,29,.10));
}
.carte__banner-text{
  position:absolute; left:2rem; bottom:1.6rem; z-index:1;
  font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:1.7rem; color:var(--creme);
}
.carte__intro{ color:var(--creme-60); max-width:56ch; margin-bottom:2.4rem; font-size:1.26rem; }

/* Onglets */
.carte-tabs{
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-bottom:2.6rem; border-bottom:1px solid var(--creme-30);
  padding-bottom:0;
}
.carte-tab{
  position:relative;
  font-family:var(--font-label); font-weight:500; font-size:.86rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--creme-60);
  padding:.9rem 1.1rem;
  transition:color .2s ease;
}
.carte-tab::after{
  content:''; position:absolute; left:1.1rem; right:1.1rem; bottom:-1px; height:2px;
  background:var(--or-clair); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.carte-tab:hover{ color:var(--creme); }
.carte-tab.is-active{ color:var(--creme); }
.carte-tab.is-active::after{ transform:scaleX(1); }

.carte-pane{ display:none; }
.carte-pane.is-active{ display:block; animation:paneIn .4s var(--ease); }
@keyframes paneIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

.carte__loading{ color:var(--creme-60); font-family:var(--font-serif); font-style:italic; }
.carte__error{ color:var(--creme); }
.carte__retry{ color:var(--or-clair); text-decoration:none; font-weight:600; margin-left:.4rem; }
.carte__retry:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Signature dishes */
.signature-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:1.8rem;
}
.signature-card{
  position:relative;
  background:var(--bordeaux-profond);
  border:1px solid var(--creme-30);
  border-left:3px solid var(--or-clair);
  border-radius:var(--radius);
  padding:1.3rem 1.3rem 1.5rem;
  transition:transform .3s var(--ease);
}
.signature-card:hover{ transform:translateY(-6px); }

/* Contour qui se dessine au survol (même principe que .infos-contact / .menu-card) */
.signature-card::before,
.signature-card::after{
  content:''; position:absolute; width:0; height:0;
  border:2px solid transparent; border-radius:var(--radius);
  pointer-events:none;
}
.signature-card::before{
  top:-2px; left:-2px;
  border-top-color:var(--or-clair); border-right-color:var(--or-clair);
  opacity:0;
  transition:height .22s ease-in .44s, width .22s ease-in .66s, opacity 0s linear .88s;
}
.signature-card::after{
  bottom:-2px; right:-2px;
  border-bottom-color:var(--or-clair); border-left-color:var(--or-clair);
  opacity:0;
  transition:height .22s ease-in, width .22s ease-in .22s, opacity 0s linear .44s;
}
.signature-card:hover::before,
.signature-card:hover::after{
  width:calc(100% + 4px); height:calc(100% + 4px);
  opacity:1;
}
.signature-card:hover::before{
  transition:width .22s ease-out, height .22s ease-out .22s, opacity 0s linear 0s;
}
.signature-card:hover::after{
  transition:width .22s ease-out .44s, height .22s ease-out .66s, opacity 0s linear .44s;
}
.signature-card__frame{
  width:100%; aspect-ratio:4/3; border-radius:4px;
  background:var(--bordeaux);
  border:1px solid var(--creme-30);
  display:flex; align-items:center; justify-content:center;
  color:var(--creme-30);
  margin-bottom:1.1rem; overflow:hidden;
}
.signature-card__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.signature-card:hover .signature-card__frame img{ transform:scale(1.08); }
.signature-card__stamp{
  position:absolute; top:-10px; right:-8px;
  background:var(--or-clair); color:var(--bordeaux-profond);
  font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.15rem;
  padding:.3rem .8rem;
  border-radius:999px;
  display:flex; align-items:center; gap:.35rem;
  transform:rotate(6deg);
}
.signature-card__stamp svg{ width:12px; height:12px; }
.signature-card h4{ font-family:var(--font-body); font-weight:600; font-size:1.42rem; line-height:1.2; margin:0 0 .5rem; }
.signature-card p{ color:var(--creme-60); font-size:1.1rem; margin-bottom:1rem; }
.signature-card__price{ font-family:var(--font-display); font-weight:400; color:var(--or-clair); font-size:1.35rem; }

/* Formules */
.menu-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1.6rem;
}
.menu-card{
  position:relative;
  /* Même surface que .signature-card et .carte-cat : sans fond, les ors de
     la carte tombaient à 4,44 sur le bordeaux de la section (AA demande 4,5). */
  background:var(--bordeaux-profond);
  border:1px solid var(--creme-30);
  border-left:3px solid var(--or-clair);
  border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.6rem;
  transition:transform .3s var(--ease);
}
.menu-card:hover{ transform:translateY(-4px); }

/* Contour qui se dessine au survol (même principe que .infos-contact) :
   deux pseudo-éléments, chacun deux côtés, décalés dans le temps pour tracer
   le rectangle côté par côté. Entrée définie dans :hover, sortie dans la base
   avec les délais inversés pour retracer le même chemin en sens inverse. */
.menu-card::before,
.menu-card::after{
  content:''; position:absolute; width:0; height:0;
  border:2px solid transparent; border-radius:var(--radius);
  pointer-events:none;
}
.menu-card::before{
  top:-2px; left:-2px;
  border-top-color:var(--or-clair); border-right-color:var(--or-clair);
  opacity:0;
  transition:height .22s ease-in .44s, width .22s ease-in .66s, opacity 0s linear .88s;
}
.menu-card::after{
  bottom:-2px; right:-2px;
  border-bottom-color:var(--or-clair); border-left-color:var(--or-clair);
  opacity:0;
  transition:height .22s ease-in, width .22s ease-in .22s, opacity 0s linear .44s;
}
.menu-card:hover::before,
.menu-card:hover::after{
  width:calc(100% + 4px); height:calc(100% + 4px);
  opacity:1;
}
.menu-card:hover::before{
  transition:width .22s ease-out, height .22s ease-out .22s, opacity 0s linear 0s;
}
.menu-card:hover::after{
  transition:width .22s ease-out .44s, height .22s ease-out .66s, opacity 0s linear .44s;
}
.menu-card__head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:1.1rem; gap:.6rem;
  padding-bottom:.9rem; border-bottom:1px dashed var(--creme-30);
}
.menu-card__head h4{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; }
.menu-card__price{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; color:var(--or-clair); white-space:nowrap; }
.menu-card__cat{ margin-bottom:.9rem; }
.menu-card__cat:last-child{ margin-bottom:0; }
.menu-card__cat-label{
  display:block; color:var(--or-clair); font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.05rem;
  letter-spacing:0; text-transform:none;
  text-decoration:underline; text-decoration-color:rgba(200,155,74,.45); text-underline-offset:.25em;
  margin-bottom:.4rem;
}
.menu-card__cat-items{ font-size:1.06rem; color:var(--creme-60); margin:0; }
.menu-card__cat .dish-name{ transition:color .2s ease; }
.menu-card__cat em{ font-weight:500; color:var(--creme-60); }
.menu-card:hover .menu-card__cat .dish-name{ color:var(--creme); }

/* Carte détaillée */
.carte-list{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.carte-cat{
  min-width:0;
  background:var(--bordeaux-profond);
  border:1px solid var(--creme-30);
  border-radius:var(--radius);
  padding:1.7rem 1.7rem 1.5rem;
}
.carte-cat__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:1.2rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--creme-30);
}
.carte-cat__head h3{
  font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.5rem;
  letter-spacing:0; text-transform:none;
  color:var(--or-clair);
}
.carte-cat__count{
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--creme-60); white-space:nowrap;
}
.dish-row{
  display:grid; grid-template-columns:1fr auto; column-gap:1.2rem; row-gap:.35rem;
  align-items:baseline;
  min-width:0;
  padding:.85rem 1rem;
  margin:0 -1rem;
  border-radius:2px;
  border-bottom:1px solid var(--creme-30);
  transition:background-color .2s ease;
}
.carte-cat .dish-row:first-of-type{ padding-top:0; }
.dish-row:last-child{ border-bottom:0; padding-bottom:0; }
.dish-row:hover{ background:rgba(200,155,74,.10); }
.dish-row__name{
  grid-column:1; font-family:var(--font-body); font-weight:600; font-size:1.22rem;
}
.dish-row__price{
  grid-column:2; align-self:start;
  font-family:var(--font-display); font-weight:400; font-size:1.1rem; white-space:nowrap;
  color:var(--or-clair); font-variant-numeric:tabular-nums;
}
.dish-row__desc{
  grid-column:1 / -1;
  color:var(--creme-60); font-size:1.08rem; line-height:1.5;
}
.carte__empty{ color:var(--creme-60); font-family:var(--font-serif); font-style:italic; }

/* ---------- Soirées à thème ---------- */
.soirees-section{ background:var(--bordeaux); overflow:hidden; }
.soirees__layout{
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.soirees__media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  transform:rotate(-2.5deg);
  box-shadow:14px 18px 0 var(--encre-08);
  transition:transform .4s var(--ease);
}
.soirees__media:hover{ transform:rotate(0deg) scale(1.015); }
.soirees__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.soirees__media:hover img{ transform:scale(1.06); }
.soirees__stamp{
  position:absolute; bottom:-14px; right:-14px; z-index:2;
  background:var(--or-clair); color:var(--bordeaux-profond);
  font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.35rem;
  width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(8deg); line-height:1.05;
}
.soirees__content{ position:relative; }
.soirees__text{ font-size:1.28rem; color:var(--creme-60); max-width:52ch; margin-bottom:2.2rem; }
.soirees__note{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-size:1.05rem; color:var(--creme-60);
  background:var(--creme-12); border-radius:999px;
  padding:.6rem 1.1rem; margin:0 0 2rem;
}
.soirees__note svg{ color:var(--or-clair); flex-shrink:0; }
.soirees__actions{ display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; }
.soirees__ig{ color:var(--or-clair); border-bottom-color:rgba(200,155,74,.45); }
.soirees__ig svg{ margin-right:-.1rem; }
@media (max-width: 860px){
  .soirees__layout{ grid-template-columns:1fr; }
  .soirees__media{ max-width:320px; margin:0 auto; }
}

/* ---------- Privatisation ----------
   Fond crème : suit .soirees-section (bordeaux), donc pas de filet d'entrée
   nécessaire (alternance naturelle). Même gabarit que .soirees__layout
   (image + colonne de texte), avec la photo à gauche. */
.privatisation{ background:var(--creme); }
.privatisation__lede{ font-size:1.26rem; color:var(--encre-70); max-width:56ch; margin:0 0 1rem; }
.privatisation__types{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:1.3rem; color:var(--bordeaux); max-width:52ch; margin:0 0 1.4rem;
}

.privatisation__layout{
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.privatisation__media-col{ position:relative; }
.privatisation__media-col .section__title{ max-width:none; }
.privatisation__media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  transform:rotate(2deg);
  box-shadow:14px 18px 0 var(--encre-08);
  transition:transform .4s var(--ease);
}
.privatisation__media:hover{ transform:rotate(0deg) scale(1.015); }
.privatisation__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.privatisation__media:hover img{ transform:scale(1.06); }
.privatisation__content{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-end;
}
.privatisation__text{ color:var(--encre-70); font-size:1.15rem; line-height:1.6; margin:0 0 .8rem; }
.privatisation__text:last-child{ margin-bottom:0; }
@media (max-width: 860px){
  .privatisation__layout{ grid-template-columns:1fr; }
  .privatisation__media-col{ order:-1; }
  .privatisation__media{ max-width:320px; margin:0 auto; }
  .privatisation__content{ align-items:flex-start; }
}

/* ---------- Infos pratiques ---------- */
.infos{ background:var(--creme); }
.infos-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.6rem;
  margin-bottom:2.4rem;
}
.infos-card{
  position:relative;
  padding:2.1rem 1.9rem;
  background:var(--creme);
  border:1px solid var(--encre-18);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.infos-card:hover{ transform:translateY(-6px); box-shadow:0 16px 28px -18px var(--encre-18); }
.infos-card svg{ color:var(--bordeaux); margin-bottom:1rem; transition:transform .3s var(--ease); }
.infos-card:hover svg{ transform:rotate(-8deg) scale(1.1); }
.infos-card h3{ font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.4rem; color:var(--bordeaux); margin-bottom:.7rem; }
.infos-card p{ color:var(--encre-70); font-size:1.15rem; line-height:1.6; }
.infos-card a{ color:var(--or-lien); text-decoration:none; font-weight:600; }
.infos-card a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.infos-card .link-arrow{ margin-top:1rem; }

.infos-card__badge{
  display:inline-flex; align-items:center; margin-top:1.1rem;
  font-family:var(--font-label); font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--encre-70); background:var(--encre-08);
  border-radius:999px; padding:.4rem .9rem;
}

/* ---------- Réservation + Contact (intégré à Infos pratiques) ----------
   Deux cadres INDÉPENDANTS et de largeur égale, côte à côte (empilés sous
   820px) : .infos-reservation (placeholder) à gauche,
   .infos-contact (formulaire, cadre plein avec effet de survol) à droite.
   Contrairement à une ancienne version, ce ne sont plus deux colonnes
   partageant un seul cadre commun. */
.infos-booking{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.8rem;
  margin-top:3.4rem;
}
@media (max-width:820px){ .infos-booking{ grid-template-columns:1fr; gap:2.2rem; } }

.infos-reservation{
  position:relative;
  display:flex; flex-direction:column;
  padding:1.9rem 2.2rem;
  background:var(--creme); border:1px solid var(--encre-18); border-radius:var(--radius);
  transition:transform .3s var(--ease);
}
.infos-reservation:hover{ transform:translateY(-3px); }
.infos-reservation .eyebrow{ margin-bottom:.7rem; }
.infos-reservation h3{
  font-family:var(--font-display); font-weight:400; font-size:1.6rem; line-height:1.2; color:var(--bordeaux);
  margin-bottom:.6rem;
}
.infos-reservation p:not(.eyebrow){ color:var(--encre-70); font-size:1.15rem; max-width:36ch; }

.infos-contact{
  position:relative;
  padding:1.9rem 2.2rem;
  background:var(--creme); border:1px solid var(--encre-18); border-radius:var(--radius);
  transition:transform .3s var(--ease);
}
.infos-contact:hover{ transform:translateY(-3px); }
.infos-contact .eyebrow{ margin-bottom:.7rem; }
.infos-contact h3{
  font-family:var(--font-display); font-weight:400; font-size:1.6rem; line-height:1.2; color:var(--bordeaux);
  margin-bottom:.6rem;
}
.infos-contact p:not(.eyebrow){ color:var(--encre-70); font-size:1.15rem; max-width:36ch; }
.infos-contact .contact-form{ margin-top:1.1rem; }

/* Contour qui se dessine au survol : deux pseudo-éléments, chacun deux côtés.
   Entrée (haut → droite → bas → gauche) définie dans le bloc :hover ; sortie
   définie dans le bloc de base avec les délais exactement inversés, pour que
   le retrait retrace le même chemin en sens inverse (gauche → bas → droite → haut). */
.infos-contact::before,
.infos-contact::after,
.infos-reservation::before,
.infos-reservation::after{
  content:''; position:absolute; width:0; height:0;
  border:2px solid transparent; border-radius:var(--radius);
  pointer-events:none;
}
.infos-contact::before,
.infos-reservation::before{
  top:-2px; left:-2px;
  border-top-color:var(--bordeaux); border-right-color:var(--bordeaux);
  /* au repos : invisible (évite le point résiduel du coin à largeur/hauteur 0).
     sortie : droite se retire, puis haut, puis on masque une fois revenu à 0. */
  opacity:0;
  transition:height .22s ease-in .44s, width .22s ease-in .66s, opacity 0s linear .88s;
}
.infos-contact::after,
.infos-reservation::after{
  bottom:-2px; right:-2px;
  border-bottom-color:var(--bordeaux); border-left-color:var(--bordeaux);
  /* sortie : gauche se retire en premier, puis bas, masqué dès que revenu à 0
     (à .44s — pas .88s : sinon le coin reste visible pendant que ::before
     continue de se rétracter). */
  opacity:0;
  transition:height .22s ease-in, width .22s ease-in .22s, opacity 0s linear .44s;
}
.infos-contact:hover::before,
.infos-contact:hover::after,
.infos-reservation:hover::before,
.infos-reservation:hover::after{
  width:calc(100% + 4px); height:calc(100% + 4px);
  opacity:1;
}
.infos-contact:hover::before,
.infos-reservation:hover::before{
  /* entrée : haut se dessine, puis droite */
  transition:width .22s ease-out, height .22s ease-out .22s, opacity 0s linear 0s;
}
.infos-contact:hover::after,
.infos-reservation:hover::after{
  /* entrée : bas se dessine, puis gauche — l'opacité n'apparaît qu'au moment
     où ce côté commence réellement à se dessiner (.44s), pas avant. */
  transition:width .22s ease-out .44s, height .22s ease-out .66s, opacity 0s linear .44s;
}
/* Tracé terminé puis sortie du survol : le contour s'efface d'un coup
   (classe posée par main.js) au lieu de retracer le chemin à l'envers.
   Une sortie en cours de tracé conserve le retrait animé ci-dessus. */
.infos-reservation.is-outline-instant::before,
.infos-reservation.is-outline-instant::after,
.infos-contact.is-outline-instant::before,
.infos-contact.is-outline-instant::after{ transition:none; }

@media (max-width:820px){
  .infos-reservation,
  .infos-contact{ padding:1.5rem; }
}

/* Placeholder — futur système de réservation en ligne */
.infos-contact__placeholder{
  flex:1; margin-top:1.2rem; min-height:110px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; text-align:center;
  border:1.5px dashed var(--encre-18); border-radius:var(--radius);
  padding:1.4rem 1.5rem;
}
.infos-contact__placeholder svg{ color:var(--encre-45); }
.infos-contact__placeholder p{
  max-width:26ch; font-size:1.06rem; font-weight:500;
  letter-spacing:.02em; color:var(--encre-45);
}

.contact-form{ display:flex; flex-direction:column; gap:1rem; }
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .contact-form__row{ grid-template-columns:1fr; } }

.contact-form__field{ display:flex; flex-direction:column; gap:.35rem; }
.contact-form__field label{
  font-family:var(--font-label); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--encre-70);
}
.contact-form__optional{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--encre-70); }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea{
  font-family:var(--font-body); font-size:1.15rem; color:var(--encre);
  background:var(--creme); border:1px solid var(--encre-18); border-radius:var(--radius);
  padding:.65rem 1rem; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form__field textarea{ resize:vertical; min-height:90px; }
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus{
  outline:none; border-color:var(--bordeaux);
  box-shadow:0 0 0 3px rgba(110,27,43,.14);
}
.contact-form__field input:invalid:not(:placeholder-shown),
.contact-form__field.has-error input,
.contact-form__field.has-error select,
.contact-form__field.has-error textarea{ border-color:var(--bordeaux); }

.contact-form__footer{ display:flex; align-items:center; justify-content:flex-end; gap:1.2rem; flex-wrap:wrap; margin-top:.4rem; }
.contact-form__status{ font-size:1.06rem; font-weight:500; }
.contact-form__status.is-success{ color:var(--vert); }
.contact-form__status.is-error{ color:var(--bordeaux); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bordeaux-profond); color:var(--creme-60); }
.site-footer__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:3.6rem 1.5rem 2.6rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.2rem;
}
.site-footer__brand{ display:flex; align-items:center; color:var(--creme); }
.site-footer__brand .brand__a{ color:var(--or-clair); }
.site-footer__brand .brand__tag{ color:var(--creme); opacity:.6; }
.site-footer__social{ display:flex; gap:1.1rem; }
.site-footer__social a{ display:flex; opacity:.8; transition:opacity .2s ease, transform .2s var(--ease); }
.site-footer__social a:hover{ opacity:1; color:var(--or-clair); transform:translateY(-3px); }
.site-footer__copy{ font-size:.92rem; color:var(--creme-60); margin-top:.7rem; }
.site-footer__diamond{ color:var(--or-clair); font-size:.6em; vertical-align:.2em; margin:0 .5em; }
.site-footer__copy a{ color:var(--or-clair); text-decoration:none; }
.site-footer__copy a:hover{ text-decoration:underline; text-underline-offset:3px; }

.back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  width:46px; height:46px; border-radius:50%;
  background:var(--bordeaux); color:var(--creme);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.85);
  transition:opacity .25s ease, transform .25s var(--ease), visibility .25s, background-color .2s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.back-to-top:hover{ background:var(--bordeaux-profond); transform:translateY(-3px) scale(1.05); }
/* Au-dessus des fonds bordeaux (section Carte, pied de page) : or clair sur
   bordeaux profond, la seule paire lisible de la charte ici (contraste 5,9). */
.back-to-top.is-on-dark{ background:var(--or-clair); color:var(--bordeaux-profond); }
.back-to-top.is-on-dark:hover{ background:var(--or); color:var(--creme); }

/* ---------- Popup d'alerte ---------- */
.alert-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(51,48,46,.62);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.alert-modal{
  position:relative;
  max-width:460px; width:100%;
  background:var(--creme);
  border:1px solid var(--encre-18);
  border-top:4px solid var(--bordeaux);
  border-radius:var(--radius);
  padding:2.4rem 2.2rem 2rem;
  text-align:center;
  animation:popIn .35s var(--ease);
}
@keyframes popIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.alert-modal__eyebrow{
  font-family:var(--font-label); font-size:.7rem; font-weight:400; letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--bordeaux); margin-bottom:1rem;
}
.alert-modal__message{
  font-family:var(--font-serif); font-size:1.75rem; font-style:italic; font-weight:600;
  color:var(--encre); line-height:1.4; margin-bottom:1.8rem;
}
.alert-modal__close{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-label); font-weight:500; font-size:.85rem; letter-spacing:var(--track-btn); text-transform:uppercase;
  border:2px solid var(--encre); color:var(--encre);
  padding:.75rem 1.7rem; border-radius:var(--radius);
  transition:background-color .2s ease, color .2s ease;
}
.alert-modal__close:hover{ background:var(--encre); color:var(--creme); }
.alert-modal__x{
  position:absolute; top:.9rem; right:.9rem;
  display:flex; padding:.4rem; color:var(--encre-45);
}
.alert-modal__x:hover{ color:var(--encre); }

/* ---------- Popup image (à l'ouverture) ---------- */
.image-popup-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(51,48,46,.62);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fadeIn .25s ease;
}
.image-popup-modal{
  position:relative;
  width:100%; max-width:400px;
  background-color:var(--bordeaux);
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  overflow:hidden;
  animation:popIn .35s var(--ease);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:2.4rem 1.8rem 2.2rem;
}
/* Reconstruction en HTML/CSS de l'ancienne image assets/images/openPopup.webp
   (bandeau « bientôt disponible ») : mêmes tokens de couleur, même lockup de
   logo que le reste du site (cloche + brand__word), plus léger et modifiable
   sans repasser par un export image. */
.image-popup-modal__eyebrow{
  font-family:var(--font-label); font-weight:400; font-size:.72rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--or-clair); margin:0 0 1.3rem; padding-left:var(--track-label);
}
.image-popup-modal__cloche{
  width:26%; min-width:88px; max-width:150px; height:auto;
  color:var(--or-clair); margin-bottom:1.3rem;
}
.image-popup-modal__logo{ margin:0 0 1.9rem; }
.image-popup-modal__logo .brand__name{
  font-size:clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem); color:var(--creme);
}
.image-popup-modal__logo .brand__a{ color:var(--or-clair); }
.image-popup-modal__title{
  font-family:var(--font-serif); font-style:normal; font-weight:600;
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.5rem, 1rem + 2.6vw, 2.05rem); line-height:1.18;
  color:var(--creme); max-width:16ch; margin:0 0 2rem;
}
.image-popup-modal__date{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:clamp(1.1rem, .95rem + .8vw, 1.35rem);
  color:var(--or-clair); margin:0; max-width:24ch;
}
.image-popup-modal__countdown{
  display:none; /* masqué pour l'instant — logique/JS conservés, voir main.js */
  align-items:flex-start; justify-content:center;
  gap:.55rem; margin:1.7rem 0 0;
}
.countdown__unit{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  min-width:2.5rem;
}
.countdown__value{
  font-family:var(--font-display); font-size:clamp(1.25rem, .95rem + 1.3vw, 1.6rem);
  line-height:1; color:var(--or-clair);
}
.countdown__label{
  font-family:var(--font-label); font-weight:400; font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--creme-60);
}
.countdown__sep{
  font-family:var(--font-display); font-size:clamp(1.25rem, .95rem + 1.3vw, 1.6rem);
  line-height:1; color:var(--creme-30); padding-top:.05em;
}
.image-popup-modal__x{
  position:absolute; top:.7rem; right:.7rem; z-index:1;
  display:flex; padding:.5rem;
  color:var(--creme);
  background:rgba(51,48,46,.55);
  border-radius:50%;
  transition:background-color .2s ease;
}
.image-popup-modal__x:hover{ background:rgba(51,48,46,.85); }
[hidden]{ display:none !important; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 600px){
  .section{ padding:4.4rem 1.2rem; }
  .hero__inner{ padding:7rem 1.2rem 3.2rem; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .concept-row{ padding:2.8rem 0; }
  .manifesto__glyph{ display:none; }
}