/* ════════════════════════════════════════════════════════════════════════════
   Le Grille-Pain du coin — feuille de style unique, sans dépendance.

   DIRECTION ARTISTIQUE. Toute l'identité est déjà sur leur enseigne, au 900 de
   la 105e Avenue : un grille-pain BLEU VIF (#03BAFE, échantillonné sur la
   photo) qui tient deux rôties JAUNES (#F0BE07) et porte des espadrilles
   noires, le tout cerné d'un trait bleu nuit sur fond blanc. Rien à inventer :
   la page reprend ces trois couleurs et rien d'autre.

   LE BLEU EST FROID, LE PAIN EST CHAUD. C'est toute la tension du projet. Le
   fond n'est donc pas blanc mais CRÈME DE MIE (#FBF7F0), et le jaune des
   rôties sert de contrepoids chaud chaque fois que le bleu domine — sur les
   fonds sombres, dans les surtitres, sous les titres de section.

   Le bleu de l'enseigne est trop lumineux pour porter du texte blanc. Il est
   donc approfondi en #0B86C2 pour tout ce qui est cliquable, et réservé pur
   (#03BAFE) aux aplats, aux filets et à la mascotte.

   Titres en Fraunces — une serif à empattements souples, un peu rustique, qui
   a la densité d'une croûte ; texte en Outfit, une géométrique proche du
   lettrage peint de l'enseigne.

   Langage de formes : LE RECTANGLE ARRONDI. Le corps du grille-pain, la mie
   d'une miche tranchée, une rôtie : tout ici est un carré aux angles adoucis,
   jamais un cercle. D'où un rayon franc mais contenu (--r : 26px) et des
   photos qui gardent leurs quatre coins.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0E2A38;               /* bleu nuit : le trait de contour de l'enseigne */
  --ink-soft: #16384A;
  --paper: #FBF7F0;             /* crème de mie */
  --cream: #F2E9D9;             /* croûte claire */
  --card: #ffffff;
  --line: #E6DCCB;
  --text: #1C2F3A;
  --muted: #6B7A84;
  --crust: #0B86C2;             /* le bleu de l'enseigne, approfondi pour porter du texte */
  --crust-deep: #076A9C;
  --crust-soft: #DFF4FE;
  --leaf: #7E9AA8;              /* bleu-gris doux, pour les catégories */
  --linen: #F0BE07;             /* le jaune des rôties : la contrepartie chaude */
  --petal: #9FD9F5;             /* bleu clair, pour les aplats légers */
  --on-dark: #F7F3EA;
  --on-dark-muted: #A9BDC8;
  --shadow: 0 1px 2px rgba(14, 42, 56, .05), 0 12px 30px -18px rgba(14, 42, 56, .26);
  --shadow-lg: 0 2px 8px rgba(14, 42, 56, .08), 0 34px 74px -36px rgba(14, 42, 56, .38);
  --r: 26px;
  --r-sm: 14px;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Outfit", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --t: 300ms cubic-bezier(.22, 1, .36, 1);   /* la durée de toutes les micro-interactions */
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 17px/1.65 var(--sans); font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* height:auto est indispensable : les attributs width/height du HTML (posés pour réserver la place et
   éviter le saut de mise en page) sont des indications de présentation qui l'emportent sur aspect-ratio
   tant que la hauteur n'est pas « auto ». Sans cette ligne, chaque vignette s'affiche à sa hauteur native. */
img { max-width: 100%; display: block; height: auto }
/* Plusieurs blocs (promo, bandeau, exceptions d'horaire) sont masqués par l'attribut hidden et
   possèdent par ailleurs un display : sans cette règle, le display de la classe l'emporte et un
   bloc vide reste visible. */
[hidden] { display: none !important }
a { color: inherit }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance }
h1 { font-size: clamp(42px, 7.2vw, 78px) }
h2 { font-size: clamp(30px, 4.4vw, 50px) }
h3 { font-family: var(--sans); font-size: 19px; font-weight: 800; letter-spacing: -.016em }
h1 em, h2 em { font-style: normal; color: var(--crust) }
p { margin: 0 }
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--pad) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--on-dark); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; z-index: 100 }
.skip:focus { left: 0 }
:focus-visible { outline: 3px solid var(--crust); outline-offset: 3px; border-radius: 6px }

/* Surtitre : pastille pleine + petites capitales. Le marqueur de toute la page. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .20em; text-transform: uppercase; color: var(--leaf); margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--crust); flex: none }

/* ── Écran d'ouverture ────────────────────────────────────────────────────── */
.splash { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--paper); animation: splashOut .5s ease 1.5s forwards }
.splash__mark {
  display: block; animation: splashIn .8s cubic-bezier(.22, 1, .36, 1) both;
}
.splash__mark img { display: block; width: clamp(130px, 34vw, 200px); height: auto }
@keyframes splashIn { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
@keyframes splashOut { to { opacity: 0; visibility: hidden } }

/* ── Bandeau d'annonce ────────────────────────────────────────────────────── */
.announce { background: var(--ink); color: var(--on-dark); font-size: 14.5px; font-weight: 500 }
.announce .wrap { padding-block: 11px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.announce a { color: var(--linen); text-underline-offset: 3px }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 244, .82); backdrop-filter: blur(14px); transition: box-shadow var(--t), background var(--t) }
.top.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 16px 30px -28px rgba(43, 33, 29, .5); background: rgba(251, 248, 244, .95) }
.top__row { display: flex; align-items: center; gap: 20px; min-height: 76px }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; transition: transform var(--t) }
.brand:hover { transform: translateY(-1px) }
.brand__name { font-family: var(--serif); font-weight: 400; font-size: 27px; letter-spacing: -.012em; color: var(--ink); line-height: 1 }
.brand__name small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 6px }
.brand--foot .brand__name { color: var(--on-dark) }
.brand--foot .brand__name small { color: var(--on-dark-muted) }
.brand--foot .brand__name { font-size: 30px }

/* La mascotte de l'enseigne, posée devant le nom. Elle porte à elle seule la
   reconnaissance de la marque : à Shawinigan-Sud, le grille-pain bleu en
   espadrilles est plus connu que le nom écrit. */
.brand__mark { width: 44px; height: 44px; flex: none; display: block }
.brand--foot .brand__mark { width: 40px; height: 40px }
@media (max-width: 560px) {
  .brand__mark { width: 36px; height: 36px }
  .brand__name { font-size: 21px }
  /* « Boulangerie · Shawinigan-Sud » passait sur deux lignes sous 400 px : on resserre
     l'interlettrage plutôt que de raccourcir le sous-titre. */
  .brand__name small { font-size: 9px; letter-spacing: .12em; white-space: nowrap }
}

/* L'étiquette d'une catégorie du comptoir : « Longue fermentation », « Spécialité ». */
.carte__tag {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--linen);
  border: 1px solid rgba(240, 190, 7, .42); border-radius: 999px; padding: 4px 10px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px) }
.nav a { position: relative; text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--text); padding: 6px 0; transition: color var(--t) }
/* Le trait qui s'étire sous le lien : l'une des deux seules animations de survol de la navigation. */
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--crust); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t) }
.nav a:hover { color: var(--crust) }
.nav a:hover::after { transform: scaleX(1) }
.nav__cta { background: var(--ink); color: var(--on-dark) !important; border-radius: 999px; padding: 11px 22px !important; transition: background var(--t), transform var(--t), box-shadow var(--t) }
.nav__cta::after { display: none }
.nav__cta:hover { background: var(--crust); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(194, 48, 90, .9) }
.nav__cta:active { transform: translateY(0) scale(.97) }

.burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; padding: 0; place-items: center; gap: 4px; transition: background var(--t) }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t), opacity var(--t) }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn--crust { background: var(--crust); color: #fff; box-shadow: 0 10px 24px -16px rgba(155, 61, 43, .95) }
.btn--crust:hover { background: var(--crust-deep); transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(155, 61, 43, .95) }
.btn--ink { background: var(--ink); color: var(--on-dark) }
.btn--ink:hover { background: var(--ink-soft); transform: translateY(-2px) }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(43, 33, 29, .26) }
.btn--ghost:hover { border-color: var(--ink); background: rgba(43, 33, 29, .05); transform: translateY(-2px) }
.btn--lg { padding: 17px 34px; font-size: 17px }
.btn:active { transform: translateY(0) scale(.97) }
.btn:disabled { opacity: .55; cursor: default; transform: none }

/* ── Héros ────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; color: var(--on-dark); overflow: hidden }
.hero__media { position: absolute; inset: -6% 0 0; z-index: -2 }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: saturate(1.03) }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 18% 85%, rgba(43, 33, 29, .93) 0%, rgba(43, 33, 29, .72) 42%, rgba(43, 33, 29, .20) 78%),
    linear-gradient(to top, rgba(43, 33, 29, .92), rgba(43, 33, 29, .34) 55%, rgba(43, 33, 29, .50));
}
.hero__inner { padding: clamp(96px, 16vh, 170px) var(--pad) clamp(72px, 12vh, 118px); max-width: 920px }
.hero .eyebrow { color: var(--linen) }
.hero .eyebrow::before { background: var(--petal) }
.hero h1 { color: #fff }
.hero h1 em { color: var(--linen) }
.hero__status {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .26);
  padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; backdrop-filter: blur(6px);
}
.hero__status .dot { width: 8px; height: 8px; border-radius: 50%; background: #8fd18a; box-shadow: 0 0 0 4px rgba(140, 163, 90, .22) }
.hero__status.is-closed .dot { background: var(--petal); box-shadow: 0 0 0 4px rgba(232, 160, 182, .22) }
.lede { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; color: rgba(251, 246, 241, .92); margin-top: 22px; max-width: 60ch }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45) }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: #fff }
.hero__proof { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 38px; font-size: 14.5px; color: rgba(251, 246, 241, .82) }
.hero__proof b { font-family: var(--serif); font-size: 23px; font-weight: 400; color: var(--petal); margin-right: 5px }
.hero__proof i { width: 5px; height: 5px; border-radius: 50%; background: rgba(251, 246, 241, .4) }

/* ── Promo ────────────────────────────────────────────────────────────────── */
.promo { background: var(--linen) }
.promo__row { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 34px }
.promo h2 { font-size: clamp(24px, 3vw, 32px) }
.promo p { color: var(--ink-soft); margin-top: 8px; max-width: 62ch }

/* ── L'ardoise ────────────────────────────────────────────────────────────── */
.slate { background: var(--cream); padding-block: clamp(64px, 10vw, 110px) }
.slate__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 64px); align-items: center }
.slate__photo { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg) }
.slate__photo figcaption { padding: 14px 20px 18px; font-size: 14px; color: var(--muted); text-align: center }
.slate__photo img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3 }
.section-head { max-width: 62ch }
.section-head h2 { margin-bottom: 0 }
.section-head__note { color: var(--muted); margin-top: 16px; font-size: 16.5px }
.board {
  margin-top: 30px; position: relative; border-radius: var(--r); padding: clamp(28px, 4vw, 42px);
  background: linear-gradient(168deg, #3a2a2f, #2b211d 72%);
  color: var(--on-dark); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(251, 246, 241, .10);
}
.board::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(251, 246, 241, .14); border-radius: calc(var(--r) - 14px); pointer-events: none }
.board__kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--linen) }
.board__dish { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1; margin-top: 12px; color: #fff }
.board__desc { color: var(--on-dark-muted); margin-top: 12px; max-width: 48ch }
.board__price { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--linen); margin-top: 18px }
.board__price:empty { display: none }
.board__note { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(251, 246, 241, .16); font-size: 14px; color: var(--on-dark-muted) }

/* ── Quatre promesses ─────────────────────────────────────────────────────── */
.values { padding-block: clamp(64px, 9vw, 104px) }
.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px }
.value { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px 32px; position: relative; overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
/* Lueur intérieure au survol : la carte se soulève et s'éclaire par le haut. */
.value::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--t); background: radial-gradient(90% 60% at 50% 0%, rgba(194, 48, 90, .10), transparent 70%) }
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(194, 48, 90, .32) }
.value:hover::after { opacity: 1 }
.value h3 { margin-bottom: 10px }
.value p { color: var(--muted); font-size: 16px }

/* ── La carte ─────────────────────────────────────────────────────────────── */
.menus { background: var(--ink); color: var(--on-dark); padding-block: clamp(70px, 10vw, 118px); border-radius: var(--r) var(--r) 0 0 }
.menus .eyebrow { color: var(--linen) }
.menus .eyebrow::before { background: var(--petal) }
.menus h2 { color: #fff }
.menus h2 em { color: var(--linen) }
.menus .section-head { margin-inline: auto; text-align: center }
.menus .section-head .eyebrow { justify-content: center }
.menus .section-head__note { color: var(--on-dark-muted) }

.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 38px 0 44px }
.tab { font: 600 15px/1 var(--sans); padding: 13px 26px; border-radius: 999px; border: 1px solid rgba(251, 246, 241, .24); background: transparent; color: var(--on-dark); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t) }
.tab:hover { border-color: var(--linen); transform: translateY(-2px) }
.tab:active { transform: translateY(0) scale(.97) }
.tab.is-active { background: var(--linen); color: var(--ink); border-color: var(--linen) }
.menu-panel[hidden] { display: none }
.carte__intro { text-align: center; color: var(--on-dark-muted); max-width: 62ch; margin: 0 auto 36px; font-size: 17px }
.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 4vw, 54px) }
.carte__col { min-width: 0 }
.carte__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: #fff; padding-bottom: 14px; border-bottom: 1px solid rgba(251, 246, 241, .2); margin-bottom: 6px }
.tag { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--linen); padding: 5px 11px; border-radius: 999px }
.carte__secnote { color: var(--on-dark-muted); font-size: 15px; margin: 10px 0 0 }
.dishes { list-style: none; margin: 0; padding: 0 }
.dishes li { display: flex; gap: 18px; align-items: baseline; justify-content: space-between; padding: 17px 14px 17px 14px; margin-inline: -14px; border-bottom: 1px dotted rgba(251, 246, 241, .22); border-radius: var(--r-sm); transition: background var(--t) }
.dishes li:hover { background: rgba(251, 246, 241, .055) }
.dish { display: block; min-width: 0 }
.dish b { font-family: var(--serif); font-weight: 600; font-size: 19px; color: #fff; display: block; letter-spacing: -.01em }
.dish small { display: block; color: var(--on-dark-muted); font-size: 14.5px; line-height: 1.5; margin-top: 5px }
.dish small:empty { display: none }
.price { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--linen); white-space: nowrap; font-variant-numeric: tabular-nums; transition: transform var(--t) }
.dishes li:hover .price { transform: translateX(-3px) }
.price:empty { display: none }
.carte__photo { margin: 28px 0 0; border-radius: var(--r); overflow: hidden; background: rgba(251, 246, 241, .06) }
.carte__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.carte__photo figcaption { padding: 13px 18px 16px; font-size: 14px; color: var(--on-dark-muted) }
.carte__subnote { margin: -6px 0 22px; font-size: 14px; line-height: 1.55; color: var(--muted); font-style: italic }
.carte__note { text-align: center; color: var(--on-dark-muted); font-size: 15px; margin-top: 40px }
.carte__note a { color: var(--linen) }

/* ── La maison ────────────────────────────────────────────────────────────── */
.split { padding-block: clamp(70px, 10vw, 118px) }
.split .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center }
.split__media { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg) }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.split__p { color: var(--muted); margin-top: 18px; font-size: 16.5px }
.timeline { list-style: none; counter-reset: s; margin: 34px 0 0; padding: 0; display: grid; gap: 14px }
.timeline li { counter-increment: s; position: relative; padding: 18px 20px 18px 62px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); transition: transform var(--t), box-shadow var(--t) }
.timeline li::before {
  content: counter(s); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--crust); color: #fff; font: 700 14px/1 var(--sans);
}
.timeline li:hover { transform: translateX(4px); box-shadow: var(--shadow) }
.timeline b { display: block; font-size: 16.5px }
.timeline span { display: block; color: var(--muted); font-size: 15px; margin-top: 3px }

/* ── Galerie ──────────────────────────────────────────────────────────────── */
.features { background: var(--cream); padding-block: clamp(64px, 9vw, 104px) }
.section-head--row { display: flex; gap: 28px; align-items: end; justify-content: space-between; flex-wrap: wrap; max-width: none; margin-bottom: 36px }
.features__note { color: var(--muted); max-width: 40ch; font-size: 16px }
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px }
.feature { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform var(--t), box-shadow var(--t) }
.feature img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; transition: transform 600ms cubic-bezier(.22, 1, .36, 1) }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg) }
.feature:hover img { transform: scale(1.05) }
.feature figcaption { padding: 20px 22px 24px }
.feature b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 400 }
.feature span { display: block; color: var(--muted); font-size: 15px; margin-top: 5px }

/* ── Bandeau façade ───────────────────────────────────────────────────────── */
.banner { position: relative; isolation: isolate; color: var(--on-dark); overflow: hidden }
.banner__media { position: absolute; inset: 0; z-index: -2 }
.banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38% }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(43, 33, 29, .94) 12%, rgba(43, 33, 29, .74) 52%, rgba(43, 33, 29, .36)) }
.banner__content { padding-block: clamp(70px, 11vw, 124px); max-width: 720px }
.banner .eyebrow { color: var(--linen) }
.banner .eyebrow::before { background: var(--petal) }
.banner h2 { color: #fff }
.banner h2 em { color: var(--linen) }
.banner p { color: rgba(251, 246, 241, .88); margin-top: 16px; max-width: 54ch }
.banner__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px }
.banner .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45) }
.banner .btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: #fff }

/* ── Avis ─────────────────────────────────────────────────────────────────── */
.reviews { padding-block: clamp(64px, 9vw, 104px) }
.reviews__head { text-align: center; max-width: 720px; margin: 0 auto 40px }
.reviews__head .eyebrow { justify-content: center }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px }
.review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; position: relative; transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
.review::before { content: "“"; position: absolute; top: 6px; right: 24px; font-family: var(--serif); font-size: 76px; line-height: 1; color: var(--crust); opacity: .16 }
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(194, 48, 90, .3) }
.review p { font-size: 16.5px; line-height: 1.6 }
.review footer { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--leaf) }
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px }
.chip { background: var(--linen); border-radius: 999px; padding: 10px 20px; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: transform var(--t) }
.chip:hover { transform: translateY(-2px) }
.chip b { font-family: var(--serif); font-weight: 400; font-size: 20px; margin-right: 5px }
.chips__note { background: transparent; color: var(--muted); font-weight: 400 }

/* ── Réservation ──────────────────────────────────────────────────────────── */
.booking { background: var(--ink); color: var(--on-dark); padding-block: clamp(70px, 10vw, 118px) }
.booking__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 64px); align-items: start }
.booking .eyebrow { color: var(--linen) }
.booking .eyebrow::before { background: var(--petal) }
.booking h2 { color: #fff }
.booking h2 em { color: var(--linen) }
.booking__text > p { color: var(--on-dark-muted); margin-top: 18px; max-width: 48ch }
.booking__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px }
.booking__points li { padding-left: 26px; position: relative }
.booking__points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--crust) }
.booking__points b { display: block; font-size: 16.5px; color: #fff }
.booking__points span { display: block; color: var(--on-dark-muted); font-size: 15px; margin-top: 2px }
.booking__phone { margin-top: 26px; font-size: 16px; color: var(--on-dark-muted) }
.booking__phone a { font-family: var(--serif); font-size: 25px; font-weight: 400; color: var(--linen); text-decoration: none; margin-left: 6px; transition: color var(--t) }
.booking__phone a:hover { color: #fff }

.booking__form { background: var(--card); color: var(--text); border-radius: var(--r); padding: clamp(26px, 3.6vw, 38px); box-shadow: var(--shadow-lg) }
.field { margin-bottom: 16px }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px }
.field__opt { font-weight: 400; color: var(--muted) }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.5 var(--sans); color: var(--text);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field textarea { resize: vertical; min-height: 86px }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--crust); background: var(--card); box-shadow: 0 0 0 4px var(--crust-soft) }
.field--hp { position: absolute; left: -9999px }
.booking__legal { font-size: 13.5px; color: var(--muted); margin: 6px 0 18px }
.booking__form .btn { width: 100% }
.booking__msg { margin-top: 14px; font-size: 15px; font-weight: 600; min-height: 1.2em }
.booking__msg.ok { color: var(--leaf) }
.booking__msg.err { color: var(--crust) }

/* ── Nous trouver ─────────────────────────────────────────────────────────── */
.contact { padding-block: clamp(64px, 9vw, 104px) }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 60px); align-items: start }
.contact__lede { color: var(--muted); margin-top: 16px; max-width: 46ch }
.contact__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px }
.contact__list li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px dotted var(--line) }
.contact__list b { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.contact__list a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); transition: color var(--t), border-color var(--t) }
.contact__list a:hover { color: var(--crust); border-color: var(--crust) }
.hours { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 16px }
.hours th, .hours td { text-align: left; padding: 11px 0; border-bottom: 1px dotted var(--line); font-weight: 400 }
.hours td { text-align: right; font-variant-numeric: tabular-nums }
.hours td.closed { color: var(--muted) }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--crust) }
.hours__exc { list-style: none; margin: 16px 0 0; padding: 14px 18px; background: var(--crust-soft); border-radius: var(--r-sm); font-size: 14.5px; display: grid; gap: 6px }
.contact__note { margin-top: 20px; font-size: 15px; color: var(--muted) }
.contact__map { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); min-height: 420px; height: 100% }
.contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: var(--on-dark); padding-top: clamp(56px, 8vw, 88px) }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px }
.foot__brand p { color: var(--on-dark-muted); font-size: 15.5px; margin-top: 18px; max-width: 34ch }
.foot h3 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--linen); margin-bottom: 14px }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; color: var(--on-dark-muted) }
.foot a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--t) }
.foot a:hover { color: #fff }
.foot__bar { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 64px); padding-block: 24px; border-top: 1px solid rgba(251, 246, 241, .14); font-size: 13.5px; color: var(--on-dark-muted) }
.foot__credit a { color: var(--linen) }

/* ── Couche d'animation (anim.js) ─────────────────────────────────────────── */
.js-anim [data-reveal]:not([data-revealed]) { opacity: 0 }
.js-anim [data-reveal-group]:not([data-revealed]) > * { opacity: 0 }
.w { display: inline-block; overflow: hidden; vertical-align: top }
.w > span { display: inline-block; will-change: transform }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important }
  .splash { display: none }
  .js-anim [data-reveal]:not([data-revealed]), .js-anim [data-reveal-group]:not([data-revealed]) > * { opacity: 1 }
}

/* ── Adaptation ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .slate__grid, .split .wrap, .booking__grid, .contact__grid { grid-template-columns: 1fr }
  .foot__grid { grid-template-columns: 1fr 1fr }
  .contact__map { min-height: 320px }
  .contact__map iframe { min-height: 320px }
}
@media (max-width: 760px) {
  .burger { display: grid }
  .nav {
    position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px var(--pad) 24px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t);
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto }
  .nav a { padding: 15px 0; border-bottom: 1px dotted var(--line); font-size: 17px }
  .nav a::after { display: none }
  .nav__cta { text-align: center; margin-top: 16px; border-bottom: 0 }
  .foot__grid { grid-template-columns: 1fr }
  .dishes li { flex-direction: column; gap: 6px }
  .price { align-self: flex-start }
  .contact__list li { grid-template-columns: 1fr; gap: 2px }
  .hours td { text-align: left }
  .hero__proof { gap: 10px }
  /* Sur deux lignes, une pastille centrée verticalement flotte au milieu du surtitre : on la cale en haut. */
  .eyebrow { align-items: flex-start }
  .eyebrow::before { margin-top: 5px }
}