/* =========================================================================
   ASSYA EXPRESS — Design system
   Palette Brand Book : bordeaux #7A1F2B · or #C49A3A · crème #F6F1E7 · anthracite #23211E
   Langage visuel : moderne et dynamique (héros immersif, titres bold, pills, profondeur)
   Rassine Agency — 2026
   ========================================================================= */

/* ============================== TOKENS ============================== */
:root {
  --bordeaux:      #7A1F2B;
  --bordeaux-vif:  #9B3040;
  --bordeaux-nuit: #4E1119;
  --or:            #C49A3A;
  --or-clair:      #E0B75A;
  --or-vif:        #F0C868;
  --creme:         #F6F1E7;
  --anthracite:    #23211E;

  --fond:      #FFFDF9;
  --surface:   #FFFFFF;
  --surface-2: #F6F1E7;
  --texte:     #23211E;
  --texte-2:   #736A5E;
  --bordure:   #EDE4D3;
  --titre:     #23211E;
  --accent:    #9B6E14;

  --ombre-s:  0 1px 2px rgba(35,33,30,.04), 0 4px 12px -6px rgba(35,33,30,.10);
  --ombre-m:  0 2px 6px rgba(35,33,30,.05), 0 16px 32px -18px rgba(78,17,25,.28);
  --ombre-l:  0 4px 12px rgba(35,33,30,.07), 0 30px 60px -28px rgba(78,17,25,.42);
  --ombre-or: 0 12px 28px -12px rgba(196,154,58,.55);

  --ok:     #3F6B4A;
  --alerte: #B3620F;

  --titres: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --corps:  "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:  "Lora", Georgia, serif;

  --r:      16px;
  --r-s:    10px;
  --pill:   100px;
  --max:    1180px;
  --gouttiere: 22px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:      #15100E;
    --surface:   #1F1815;
    --surface-2: #2A211D;
    --texte:     #F3ECE1;
    --texte-2:   #A99C8D;
    --bordure:   #362C26;
    --titre:     #F3ECE1;
    --accent:    #E0B75A;
    --creme:     #221A17;
    --ombre-s:   0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
    --ombre-m:   0 2px 6px rgba(0,0,0,.45), 0 16px 32px -18px rgba(0,0,0,.8);
    --ombre-l:   0 4px 12px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.9);
    --ok:        #7FB08C;
    --alerte:    #E0A15C;
  }
}
:root[data-theme="dark"] {
  --fond:      #15100E;
  --surface:   #1F1815;
  --surface-2: #2A211D;
  --texte:     #F3ECE1;
  --texte-2:   #A99C8D;
  --bordure:   #362C26;
  --titre:     #F3ECE1;
  --accent:    #E0B75A;
  --creme:     #221A17;
  --ombre-s:   0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
  --ombre-m:   0 2px 6px rgba(0,0,0,.45), 0 16px 32px -18px rgba(0,0,0,.8);
  --ombre-l:   0 4px 12px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.9);
  --ok:        #7FB08C;
  --alerte:    #E0A15C;
}

/* ============================== BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titres);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--titre);
}
h1 { font-weight: 800; letter-spacing: -.035em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

img, svg, canvas { max-width: 100%; }
img { height: auto; display: block; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 6px;
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--bordeaux); color: #fff;
  padding: 14px 22px; border-radius: 0 0 var(--r-s) 0; z-index: 200;
}
.saut-contenu:focus { left: 0; }

/* ============================== UTILITAIRES ============================== */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }
.sec  { padding: 92px 0; }
.sec--serre { padding: 62px 0; }
.sec--creme { background: var(--creme); }

.surtitre {
  font-family: var(--corps);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.filet {
  width: 58px; height: 4px; border: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--or), var(--or-vif));
  margin: 20px 0 0;
}

.sec-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-bottom: 44px;
}
.sec-tete h2 { font-size: clamp(30px, 4.4vw, 46px); margin-top: 12px; }
.sec-tete p  { color: var(--texte-2); margin: 14px 0 0; max-width: 58ch; font-size: 16.5px; }

.prix { font-variant-numeric: tabular-nums; }
.centre { text-align: center; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================== BOUTONS ============================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--corps);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 16px 30px;
  border-radius: var(--pill);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--or { background: var(--or); color: #2B1A0C; box-shadow: var(--ombre-or); }
.btn--or:hover { background: var(--or-vif); box-shadow: 0 16px 34px -12px rgba(196,154,58,.7); }

.btn--bordeaux { background: var(--bordeaux); color: #fff; box-shadow: 0 12px 26px -12px rgba(122,31,43,.6); }
.btn--bordeaux:hover { background: var(--bordeaux-vif); box-shadow: 0 16px 32px -12px rgba(122,31,43,.75); }

.btn--fantome { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(8px); }
.btn--fantome:hover { background: rgba(255,255,255,.22); border-color: #fff; }

.btn--contour { background: transparent; color: var(--titre); border-color: var(--bordure); }
.btn--contour:hover { border-color: var(--or); background: var(--surface-2); }

.lien-souligne {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--accent);
  text-decoration: none; background: none; border: 0; padding: 0;
  cursor: pointer; font-family: var(--corps);
  position: relative;
}
.lien-souligne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: currentColor; border-radius: 2px;
  transform: scaleX(1); transform-origin: left; transition: transform .25s ease;
}
.lien-souligne:hover::after { transform: scaleX(.35); }

/* ============================== EN-TÊTE ============================== */
.entete::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--or) 18%, var(--or-vif) 50%, var(--or) 82%, transparent);
  opacity: .9;
}
.entete {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s;
}
.entete__in {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gouttiere);
  height: 84px;
  display: flex; align-items: center; gap: 28px;
  transition: height .3s ease;
}
.entete--pose {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--bordure), 0 10px 30px -22px rgba(35,33,30,.5);
}
.entete--pose .entete__in { height: 70px; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo img { width: auto; height: 46px; transition: height .3s ease; }
.entete--pose .logo img { height: 40px; }
.logo__mot {
  font-family: var(--corps); font-size: 10px; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--or-clair);
  border-left: 1px solid rgba(255,255,255,.28);
  padding-left: 12px; line-height: 1.2;
}
.entete--pose .logo__mot { color: var(--accent); border-left-color: var(--bordure); }

/* Deux versions du logo : blanche sur le héros, sombre une fois l'en-tête posé */
.logo__clair { display: none; }
.entete--pose .logo__clair  { display: block; }
.entete--pose .logo__sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entete--pose .logo__clair  { display: none; }
  :root:not([data-theme="light"]) .entete--pose .logo__sombre { display: block; }
}
:root[data-theme="dark"] .entete--pose .logo__clair  { display: none; }
:root[data-theme="dark"] .entete--pose .logo__sombre { display: block; }
.pied__logo .logo__clair  { display: none; }
.pied__logo .logo__sombre { display: block; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  padding: 9px 15px; border-radius: var(--pill);
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav a[aria-current="page"] { color: var(--or-vif); }
.entete--pose .nav a { color: var(--texte-2); }
.entete--pose .nav a:hover { color: var(--texte); background: var(--surface-2); }
.entete--pose .nav a[aria-current="page"] { color: var(--bordeaux); background: color-mix(in srgb, var(--bordeaux) 10%, transparent); }
:root[data-theme="dark"] .entete--pose .nav a[aria-current="page"] { color: var(--or-vif); }

.entete__cta { flex: none; padding: 12px 24px; font-size: 14.5px; }

.burger {
  display: none; width: 46px; height: 46px; margin-left: auto;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  border-radius: 14px; cursor: pointer; position: relative;
  backdrop-filter: blur(8px);
}
.entete--pose .burger { background: var(--surface-2); border-color: var(--bordure); }
.burger span {
  position: absolute; left: 13px; width: 20px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform .25s ease, opacity .2s ease, background .3s;
}
.entete--pose .burger span { background: var(--texte); }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.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); }

.voile {
  position: fixed; inset: 0; background: rgba(21,16,14,.6);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; z-index: 70;
}
.voile.ouvert { opacity: 1; visibility: visible; }

.tiroir {
  position: fixed; top: 0; right: 0;
  width: min(340px, 88vw); height: 100dvh;
  background: var(--surface);
  padding: 92px 26px 30px;
  display: flex; flex-direction: column; gap: 2px;
  transform: translateX(102%);
  transition: transform .34s cubic-bezier(.3,.85,.35,1);
  z-index: 80; overflow-y: auto;
  box-shadow: -20px 0 60px -30px rgba(0,0,0,.6);
}
.tiroir.ouvert { transform: none; }
.tiroir a {
  font-size: 17px; font-weight: 500; text-decoration: none; color: var(--texte);
  padding: 15px 14px; border-radius: var(--r-s);
  transition: background .2s, color .2s;
}
.tiroir a:hover { background: var(--surface-2); }
.tiroir a[aria-current="page"] { color: var(--bordeaux); background: color-mix(in srgb, var(--bordeaux) 9%, transparent); }
:root[data-theme="dark"] .tiroir a[aria-current="page"] { color: var(--or-vif); }
.tiroir .btn { margin-top: 24px; justify-content: center; }
.tiroir__fermer {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; background: var(--surface-2);
  border: 0; border-radius: 14px; color: var(--texte);
  font-size: 18px; cursor: pointer; line-height: 1;
}

@media (max-width: 960px) {
  .nav, .entete .entete__cta { display: none; }
  .burger { display: block; }
  .entete__in { height: 72px; }
  .entete--pose .entete__in { height: 64px; }
  .logo img { height: 40px; }
}

/* ============================== HÉROS ============================== */
.heros {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.heros__fond {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center;
  filter: saturate(1.12) contrast(1.04);
  transform: scale(1.06);
  animation: panoramique 26s ease-in-out infinite alternate;
}
@keyframes panoramique {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.16) translate3d(-1.5%,-1.5%,0); }
}
@media (prefers-reduced-motion: reduce) { .heros__fond { animation: none; } }

/* ---------- Heros de la page commander ----------
   L'image est un vrai 21:9 (2400 x 1018). Deux precautions.
   1. Le conteneur est bien plus haut que l'image en proportion : `cover` agrandit
      l'image pour remplir la hauteur et rogne les cotes. On plafonne donc la hauteur
      par la largeur pour rester proche du format d'origine.
   2. Le zoom lent du heros standard rogne encore 6 a 16 % : inutile ici, l'image est
      deja cadree. On le coupe.
   L'image est composee pour un titre centre : mur bordeaux calme au centre, sacs et
   plateau a gauche, bocaux et lanterne a droite, comptoir le long du bord bas. On garde
   donc le bas du cadre, ou se trouve le comptoir. */
.heros--comptoir { min-height: min(78svh, 50vw); }
.heros--comptoir .heros__fond {
  transform: none;
  animation: none;
  background-position: center 68%;
}
/* Le centre de l'image est deja sombre et calme : le voile peut s'alleger,
   les cuivres et la lanterne ressortent. */
.heros--comptoir .heros__voile {
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(18,13,12,.50), transparent 76%),
    linear-gradient(180deg,
      rgba(18,13,12,.74) 0%,     /* la frise en stuc clair passe sous l'en-tete : */
      rgba(18,13,12,.30) 15%,    /* on assombrit cette bande, sinon le menu s'y noie */
      rgba(60,13,20,.10) 42%,
      rgba(60,13,20,.18) 66%,
      rgba(18,13,12,.56) 100%);
}
@media (max-width: 860px) {
  .heros--comptoir { min-height: 0; }
  .heros--comptoir .heros__fond { background-position: center 72%; }
}

.heros__voile {
  position: absolute; inset: 0; z-index: -2;
  background:
    /* on concentre l'ombre derriere le bloc de texte */
    radial-gradient(64% 56% at 50% 45%, rgba(18,13,12,.66), transparent 78%),
    /* et on garde juste ce qu'il faut en haut pour l'en-tete, en bas pour la jonction */
    linear-gradient(180deg, rgba(18,13,12,.52) 0%, rgba(60,13,20,.24) 38%, rgba(60,13,20,.30) 62%, rgba(18,13,12,.72) 100%);
}
.heros__zellige { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .08; }

.heros__in {
  max-width: 940px; margin: 0 auto;
  padding: 112px var(--gouttiere) 88px;
  display: flex; flex-direction: column; align-items: center;
}

.pastille-verre {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(18,13,12,.44);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--pill);
  padding: 9px 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}
.pastille-verre__pt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--or-vif);
  box-shadow: 0 0 0 4px rgba(240,200,104,.25);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(240,200,104,.25); } 50% { box-shadow: 0 0 0 9px rgba(240,200,104,0); } }

.heros h1 {
  font-size: clamp(36px, 5.6vw, 68px);
  line-height: 1.05;
  color: #fff;
  margin: 26px 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 6px 34px rgba(0,0,0,.4);
}
.heros h1 em {
  font-style: normal;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 16px rgba(0,0,0,.4));
  background: linear-gradient(100deg, var(--or-vif), #F7DFA0 55%, var(--or-clair));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.heros .filet { margin: 26px auto 0; }
.heros__intro {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.35);
  max-width: 56ch; margin: 24px auto 32px;
  font-size: clamp(16px, 1.6vw, 19px);
}
.heros__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.heros__preuves {
  display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center;
  margin: 34px 0 0; font-size: 13.5px; color: #fff;
}
.heros__preuves span {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(18,13,12,.42);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--pill);
  padding: 7px 16px;
  backdrop-filter: blur(6px);
}
.heros__preuves b { color: #fff; font-weight: 700; }

.heros__descente {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--pill);
}
.heros__descente::after {
  content: ""; position: absolute; left: 50%; margin-left: -2px; top: 8px;
  width: 4px; height: 8px; border-radius: 2px; background: var(--or-vif);
  animation: descend 2s ease-in-out infinite;
}
@keyframes descend { 0% { top: 8px; opacity: 0; } 30% { opacity: 1; } 100% { top: 24px; opacity: 0; } }
@media (max-width: 960px) { .heros__descente { display: none; } }

@media (max-width: 420px) {
  .heros__preuves span { font-size: 12px; padding: 6px 11px; }
  .heros .filet { margin-top: 20px; }
}

/* Fondu du heros vers la section suivante */
.heros--fondu::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--fond) 55%, transparent) 45%, var(--fond));
}
.heros--fondu .heros__in { position: relative; z-index: 2; }

/* Héros court des pages intérieures */
.heros--court { min-height: 84svh; }
.heros--court .heros__in { padding: 108px var(--gouttiere) 64px; max-width: 840px; }
.heros--court h1 { font-size: clamp(31px, 4.8vw, 52px); }
.heros--court .heros__intro { margin-bottom: 28px; max-width: 54ch; }
.heros--court .heros__intro:last-child { margin-bottom: 0; }
.heros--court .heros__preuves { margin-top: 24px; }
/* Pages legales : pas de CTA, un heros plus ramasse */
.heros--fondu:not(:has(.heros__actions)) { min-height: 62svh; }

/* ============================== BANDEAU DÉFILANT ============================== */
.marquee {
  background: linear-gradient(90deg, var(--or), var(--or-vif) 50%, var(--or));
  color: #2B1A0C;
  overflow: hidden; padding: 15px 0; position: relative;
}
.marquee__piste { display: flex; width: max-content; animation: defile 34s linear infinite; }
.marquee:hover .marquee__piste { animation-play-state: paused; }
.marquee__jeu { display: flex; align-items: center; flex: none; }
.marquee__item {
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; padding: 0 2px;
}
.marquee__point { width: 6px; height: 6px; border-radius: 50%; background: rgba(43,26,12,.45); margin: 0 26px; flex: none; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__piste { animation: none; } }

/* ============================== BARRE PRATIQUE ============================== */
.pratique { background: var(--anthracite); color: #C9BFAF; font-size: 14px; }
.pratique__in {
  max-width: var(--max); margin: 0 auto;
  padding: 17px var(--gouttiere);
  display: flex; gap: 14px 36px; flex-wrap: wrap; align-items: center;
}
.pratique b { color: #fff; font-weight: 600; }
.pastille-etat {
  width: 8px; height: 8px; border-radius: 50%; background: #6FA97E;
  display: inline-block; margin-right: 9px;
  box-shadow: 0 0 0 4px rgba(111,169,126,.22);
}
.pastille-etat[data-etat="ferme"] { background: #C4794F; box-shadow: 0 0 0 4px rgba(196,121,79,.22); }

/* ============================== ÉTAPES ============================== */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.etape {
  background: var(--surface);
  border-radius: var(--r);
  padding: 34px 30px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--ombre-s);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.etape:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.etape__num {
  width: 52px; height: 52px; border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-vif));
  color: var(--or-vif);
  font-size: 22px; font-weight: 800; line-height: 1;
  box-shadow: 0 10px 22px -10px rgba(122,31,43,.6);
}
.etape h3 { font-size: 21px; }
.etape p { margin: 0; font-size: 15px; color: var(--texte-2); }
@media (max-width: 820px) { .etapes { grid-template-columns: 1fr; } }

/* ============================== GRILLES ET VIGNETTES ============================== */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.vignette {
  background: var(--surface);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-s);
  text-decoration: none; color: inherit;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
}
.vignette:hover { transform: translateY(-8px); box-shadow: var(--ombre-l); }
.vignette__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); position: relative; }
.vignette__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.vignette:hover .vignette__photo img { transform: scale(1.08); }
.vignette__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(21,16,14,.42));
  opacity: 0; transition: opacity .3s;
}
.vignette:hover .vignette__photo::after { opacity: 1; }
.vignette__corps { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.vignette h3 { font-size: 21px; }
.vignette p { margin: 0; font-size: 14.5px; color: var(--texte-2); line-height: 1.55; }
.vignette__pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.vignette__pied { flex-wrap: wrap; }
.vignette__pied .prix { font-size: 22px; font-weight: 700; color: var(--bordeaux); white-space: nowrap; }
:root[data-theme="dark"] .vignette__pied .prix { color: var(--or-vif); }

.etiquette {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(21,16,14,.72);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--pill);
}
.etiquette--or { background: var(--or); color: #2B1A0C; }

/* ============================== BLOC SPLIT ============================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split--inverse > *:first-child { order: 2; }
.split h2 { font-size: clamp(28px, 4vw, 42px); margin: 14px 0 20px; }
.split p { color: var(--texte-2); font-size: 16.5px; }
.split__media {
  position: relative;
  padding: 13px;
  border-radius: 5px;
  background: linear-gradient(150deg, #FBF7EE, var(--creme) 60%, #EFE7D6);
  box-shadow: 0 1px 2px rgba(35,33,30,.10), 0 30px 64px -32px rgba(78,17,25,.5);
}
.split__media::before {
  content: ""; position: absolute; inset: 7px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(196,154,58,.5); border-radius: 3px;
}
.split__media img {
  border-radius: 2px; aspect-ratio: 4/3;
}
:root[data-theme="dark"] .split__media { background: linear-gradient(150deg, #2E2420, #241C19 60%, #1E1714); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .split__media { background: linear-gradient(150deg, #2E2420, #241C19 60%, #1E1714); }
}
.split__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.3,1); }
.split__media { overflow: hidden; }
.split__media:hover img { transform: scale(1.05); }
.citation {
  font-family: var(--serif); font-size: 21px; font-style: italic;
  color: var(--titre);
  border-left: 4px solid var(--or); border-radius: 2px;
  padding-left: 22px; margin: 28px 0 0; line-height: 1.5;
}
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--inverse > *:first-child { order: 0; }
}

/* ============================== CARTE / MENU ============================== */
.carte-nav {
  position: sticky; top: 70px; z-index: 50;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}
.carte-nav__in {
  max-width: var(--max); margin: 0 auto;
  padding: 14px var(--gouttiere);
  display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none;
}
.carte-nav__in::-webkit-scrollbar { display: none; }
.puce {
  font-family: var(--corps); font-size: 14px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--bordure); color: var(--texte-2);
  border-radius: var(--pill); padding: 10px 20px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: all .2s;
}
.puce:hover { border-color: var(--or); color: var(--texte); transform: translateY(-2px); }
.puce[aria-current="true"] {
  background: var(--bordeaux); border-color: var(--bordeaux); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(122,31,43,.7);
}
@media (max-width: 960px) { .carte-nav { top: 64px; } }

.gamme { margin-bottom: 68px; scroll-margin-top: 160px; }
.gamme__tete { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.gamme__tete h2 { font-size: clamp(26px, 3.6vw, 36px); }
.gamme__tete .filet { flex: 1; margin: 0; height: 2px; background: var(--bordure); border-radius: 2px; }
.gamme__note { color: var(--texte-2); font-size: 15px; margin: 0 0 28px; }

.plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plat {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 20px;
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--r-s);
  box-shadow: var(--ombre-s);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.plat:hover { transform: translateX(5px); box-shadow: var(--ombre-m); }
.plat__nom { font-size: 18px; font-weight: 600; color: var(--titre); margin: 0; letter-spacing: -.015em; }
.plat__prix { font-size: 19px; font-weight: 700; color: var(--bordeaux); white-space: nowrap; }
:root[data-theme="dark"] .plat__prix { color: var(--or-vif); }
.plat__desc { grid-column: 1 / -1; margin: 5px 0 0; font-size: 14.5px; color: var(--texte-2); max-width: 66ch; }
.plat__tags { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--or) 14%, transparent);
  border-radius: var(--pill); padding: 5px 12px;
}
.tag--plein { background: var(--bordeaux); color: #fff; }

/* ---------- Notes editoriales : du texte cadre par un filet, pas une boite ---------- */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; }
.note { position: relative; padding-left: 26px; }
.note::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--or), color-mix(in srgb, var(--or) 12%, transparent));
  border-radius: 2px;
}
.note h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.note p { margin: 0; font-size: 16px; color: var(--texte-2); line-height: 1.7; max-width: 46ch; }
a.note { display: block; color: inherit; transition: transform .22s cubic-bezier(.2,.8,.3,1); }
a.note:hover { transform: translateX(4px); }
a.note:hover h3 { color: var(--bordeaux); }
:root[data-theme="dark"] a.note:hover h3 { color: var(--or-vif); }
.note strong { color: var(--texte); font-weight: 600; }

/* ============================== ENCARTS ============================== */
.encart {
  background: var(--surface);
  border-radius: var(--r);
  padding: 26px 26px 28px;
  box-shadow: var(--ombre-s);
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.encart::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--or), var(--or-vif));
}
.encart:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); }
.encart h3 { font-size: 19px; margin-bottom: 9px; }
.encart p { font-size: 14.5px; color: var(--texte-2); margin: 0; }
.encart--alerte::before { background: var(--alerte); }

.bandeau-info {
  background: color-mix(in srgb, var(--or) 13%, var(--surface));
  border-radius: var(--r);
  padding: 20px 24px; font-size: 15px; color: var(--texte);
  display: flex; gap: 14px; align-items: flex-start;
  box-shadow: var(--ombre-s);
}
.bandeau-info strong { color: var(--bordeaux); font-weight: 700; }
:root[data-theme="dark"] .bandeau-info strong { color: var(--or-vif); }

/* ============================== CARTOUCHES ============================== */
.cartouche {
  background: var(--surface);
  border-radius: var(--r);
  padding: 32px;
  box-shadow: var(--ombre-m);
}
.cartouche h3 { font-size: 22px; margin-bottom: 18px; }
.cartouche dl { margin: 0; }
.ligne-info {
  display: grid; grid-template-columns: 128px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--bordure); font-size: 15px;
}
.ligne-info:last-child { border-bottom: none; }
.ligne-info dt { color: var(--texte-2); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-top: 4px; }
.ligne-info dd { margin: 0; }
.ligne-info a { color: var(--accent); font-weight: 500; }
@media (max-width: 540px) { .ligne-info { grid-template-columns: 1fr; gap: 3px; } }

.horaires { list-style: none; margin: 0; padding: 0; }
.horaires li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border-radius: var(--r-s); font-size: 15px;
}
.horaires li[data-aujourdhui="true"] {
  background: color-mix(in srgb, var(--or) 16%, transparent);
  color: var(--titre); font-weight: 700;
}
.horaires .ferme { color: var(--texte-2); }

.carte-plan { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16/11; background: var(--surface-2); box-shadow: var(--ombre-l); }
.carte-plan iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================== FORMULAIRE ============================== */
.form { display: grid; gap: 18px; }
.form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form__duo { grid-template-columns: 1fr; } }
.champ { display: grid; gap: 7px; }
.champ label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.champ input, .champ select, .champ textarea {
  font-family: var(--corps); font-size: 15px; color: var(--texte);
  background: var(--surface-2); border: 1.5px solid transparent;
  border-radius: var(--r-s); padding: 14px 16px; width: 100%;
  transition: border-color .2s, background .2s;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or); background: var(--surface); outline: none; }

/* ============================== JALONS : le fil du temps ============================== */
.jalons { position: relative; display: grid; gap: 0; }
/* Le fil d'or qui relie les dates */
.jalons::before {
  content: ""; position: absolute; left: 141px; top: 22px; bottom: 22px; width: 1px;
  background: linear-gradient(180deg,
    transparent, color-mix(in srgb, var(--or) 55%, transparent) 8%,
    color-mix(in srgb, var(--or) 55%, transparent) 92%, transparent);
}
.jalon {
  position: relative;
  display: grid; grid-template-columns: 170px 1fr; gap: 44px;
  padding: 34px 0;
  align-items: start;
}
.jalon + .jalon { border-top: 1px solid var(--bordure); }
.jalon__marge { display: flex; flex-direction: column; gap: 7px; position: relative; }
/* La perle sur le fil */
.jalon__marge::after {
  content: ""; position: absolute; right: -33px; top: 13px;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--fond); border: 1.5px solid var(--or);
  transition: background .25s, transform .25s;
}
.sec--creme .jalon__marge::after { background: var(--creme); }
.jalon:hover .jalon__marge::after { background: var(--or); transform: rotate(45deg) scale(1.15); }
.jalon__an {
  font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.035em;
  background: linear-gradient(120deg, var(--or), var(--bordeaux-vif));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:root[data-theme="dark"] .jalon__an { background: linear-gradient(120deg, var(--or-vif), var(--or)); -webkit-background-clip: text; background-clip: text; }
.jalon__lieu {
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texte-2);
}
.jalon__texte h3 { font-size: 22px; margin-bottom: 10px; }
.jalon__texte p { margin: 0; color: var(--texte-2); font-size: 16px; line-height: 1.75; max-width: 62ch; }
.jalon__note {
  margin-top: 16px !important;
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--titre) !important;
  border-left: 2px solid var(--or); padding-left: 18px; line-height: 1.55;
}
@media (max-width: 820px) {
  .jalons::before { left: 5px; }
  .jalon { grid-template-columns: 1fr; gap: 12px; padding: 28px 0 28px 30px; }
  .jalon__marge { flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .jalon__marge::after { right: auto; left: -30px; top: 10px; }
  .jalon__an { font-size: 28px; }
  .jalon__texte p { font-size: 15.5px; }
  .jalon__note { font-size: 16px; padding-left: 14px; }
}

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; text-align: center; }
.chiffre__val { font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -.03em; color: var(--bordeaux); line-height: 1; }
:root[data-theme="dark"] .chiffre__val { color: var(--or-vif); }
.chiffre__lab { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); margin-top: 11px; }

/* ============================== COMPTEURS ============================== */
.compteurs {
  background:
    linear-gradient(135deg, rgba(78,17,25,.82), rgba(122,31,43,.7) 55%, rgba(142,40,55,.78)),
    url("/images/texture-bordeaux.webp") no-repeat center / cover,
    var(--bordeaux);
  color: #fff; position: relative; overflow: hidden;
}
.compteurs::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 130% at 50% 0%, rgba(240,200,104,.2), transparent 62%);
}
.compteurs__in {
  max-width: var(--max); margin: 0 auto;
  padding: 68px var(--gouttiere);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 34px; text-align: center; position: relative; z-index: 1;
}
.compteur__val {
  font-size: clamp(38px, 5.6vw, 58px); font-weight: 800; letter-spacing: -.04em;
  color: var(--or-vif); line-height: 1; font-variant-numeric: tabular-nums;
}
.compteur__lab { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-top: 13px; }

/* ============================== AVIS ============================== */
.avis__entete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.avis__google {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border-radius: var(--pill);
  padding: 12px 22px; box-shadow: var(--ombre-m);
}
.avis__note { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--titre); line-height: 1; }
.avis__etoiles { display: flex; gap: 2px; }
.avis__compte { font-size: 13px; color: var(--texte-2); font-weight: 500; }

.avis__piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 12px; scrollbar-width: none;
}
.avis__piste::-webkit-scrollbar { display: none; }
.avis__carte {
  scroll-snap-align: start;
  background: var(--surface); border-radius: var(--r);
  padding: 28px; box-shadow: var(--ombre-s);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.avis__carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.avis__tete { display: flex; align-items: center; gap: 13px; }
.avis__pastille {
  width: 46px; height: 46px; border-radius: 16px;
  background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-vif));
  color: var(--or-vif); display: grid; place-items: center;
  font-size: 18px; font-weight: 700; flex: none;
}
.avis__auteur { font-weight: 600; font-size: 15px; }
.avis__source { font-size: 12.5px; color: var(--texte-2); }
.avis__texte { font-size: 15.5px; color: var(--texte); line-height: 1.65; margin: 0; }

.avis__puces { display: flex; gap: 9px; justify-content: center; margin-top: 26px; }
.avis__puce {
  width: 9px; height: 9px; border-radius: var(--pill); border: 0;
  background: var(--bordure); cursor: pointer; padding: 0;
  transition: background .25s, width .25s;
}
.avis__puce[aria-current="true"] { background: var(--or); width: 28px; }

/* ============================== RÉSEAUX ============================== */
.reseaux { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.reseaux a {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 26px; border-radius: var(--pill);
  background: var(--surface); box-shadow: var(--ombre-s);
  text-decoration: none; font-size: 15px; font-weight: 500;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, color .22s;
}
.reseaux a:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); color: var(--bordeaux); }
:root[data-theme="dark"] .reseaux a:hover { color: var(--or-vif); }

/* ============================== LETTRE ============================== */
.lettre {
  background: linear-gradient(135deg, var(--bordeaux-nuit), var(--bordeaux) 60%, var(--bordeaux-vif));
  color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
.lettre::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 90% at 12% 8%, rgba(240,200,104,.26), transparent 62%),
    radial-gradient(55% 90% at 92% 95%, rgba(240,200,104,.18), transparent 62%);
}
.lettre__in { max-width: 720px; margin: 0 auto; padding: 84px var(--gouttiere); text-align: center; }
.lettre h2 { color: #fff; font-size: clamp(30px, 4.4vw, 44px); margin: 20px 0 14px; }
.lettre p { color: rgba(255,255,255,.85); margin: 0 0 30px; font-size: 16.5px; }
.lettre__badge {
  display: inline-block;
  background: var(--or-vif); color: #2B1A0C;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 20px; border-radius: var(--pill);
  box-shadow: var(--ombre-or);
}
.lettre__form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lettre__form input {
  flex: 1 1 280px; font-family: var(--corps); font-size: 15px;
  padding: 16px 22px; border-radius: var(--pill);
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.2); color: #fff;
}
.lettre__form input::placeholder { color: rgba(255,255,255,.6); }
.lettre__form input:focus { border-color: var(--or-vif); outline: none; background: rgba(0,0,0,.32); }
.lettre__legal { font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 20px; }

/* ============================== ENSEIGNES ============================== */
.enseignes { display: flex; align-items: center; justify-content: center; gap: 46px; flex-wrap: wrap; }
.enseignes img {
  height: 34px; width: auto; opacity: .45; filter: grayscale(1);
  transition: opacity .25s, filter .25s, transform .25s;
}
.enseignes img:hover { opacity: 1; filter: none; transform: scale(1.06); }
:root[data-theme="dark"] .enseignes img { filter: grayscale(1) invert(1) brightness(1.7); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .enseignes img { filter: grayscale(1) invert(1) brightness(1.7); }
}

/* ============================== PROSE ============================== */
.prose { max-width: 76ch; }
.prose h2 { font-size: 28px; margin: 52px 0 14px; }
.prose h3 { font-size: 20px; margin: 32px 0 10px; }
.prose p, .prose li { color: var(--texte-2); font-size: 16px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 1em; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--texte); font-weight: 600; }
.prose a { color: var(--accent); font-weight: 500; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--bordure); }
.prose th { color: var(--titre); font-weight: 700; background: var(--surface-2); }
.prose td { color: var(--texte-2); }

.a-completer {
  background: color-mix(in srgb, var(--alerte) 12%, transparent);
  border-radius: var(--r-s);
  padding: 16px 20px; font-size: 14.5px; color: var(--alerte);
  margin: 16px 0; font-weight: 500;
}

/* ============================== PIED ============================== */
.pied { background: var(--anthracite); color: #A29889; font-size: 14.5px; }
.pied__in {
  max-width: var(--max); margin: 0 auto;
  padding: 68px var(--gouttiere) 40px;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px;
}
.pied h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or-vif); margin: 0 0 18px;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pied a { color: #C9BFAF; text-decoration: none; transition: color .2s; }
.pied a:hover { color: var(--or-vif); }
.pied p { margin: 0 0 10px; line-height: 1.7; }
.pied__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pied__logo img { height: 48px; width: auto; }
.pied__logo .logo__mot { color: var(--or-vif); border-left-color: #3A3430; }
.pied__reseaux { display: flex; gap: 11px; margin-top: 20px; }
.pied__reseaux a {
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(255,255,255,.07);
  display: grid; place-items: center;
  transition: background .2s, color .2s, transform .2s;
}
.pied__reseaux a:hover { background: var(--or); color: #2B1A0C; transform: translateY(-3px); }
.pied__bas {
  border-top: 1px solid #35302B; padding: 22px var(--gouttiere);
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: #6E655C;
}
.pied__bas a { color: #8A8078; }
.pied__mention { font-size: 12.5px; color: #6E655C; line-height: 1.7; max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere) 30px; }
@media (max-width: 900px) { .pied__in { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 580px) { .pied__in { grid-template-columns: 1fr; } }

/* ============================== CTA MOBILE ============================== */
.cta-mobile {
  display: none; position: fixed; left: 14px; right: 14px; bottom: 14px;
  z-index: 55; justify-content: center;
  box-shadow: 0 14px 34px -12px rgba(122,31,43,.85);
}
@media (max-width: 960px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .sec  { padding: 66px 0; }
  .sec--serre { padding: 46px 0; }
  .sec-tete { margin-bottom: 30px; }
  .split { gap: 28px; }
  .gamme { margin-bottom: 48px; }
  .notes { gap: 34px; }
  .compteurs__in { padding: 52px var(--gouttiere); gap: 28px; }
  .lettre__in { padding: 62px var(--gouttiere); }
  .rappel { padding: 44px 22px; }
  .pied__in { padding: 52px var(--gouttiere) 30px; }
}

/* ============================== APPARITION ============================== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.rv.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   COMMANDE PAR WHATSAPP — bulle flottante + panneau de pre-qualification
   ========================================================================= */
:root { --wa: #25D366; --wa-fonce: #1EBE5A; --wa-nuit: #075E54; }

.wa-bulle {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--wa); border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.6), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.wa-bulle:hover { transform: scale(1.07); box-shadow: 0 16px 38px -8px rgba(37,211,102,.75); }
.wa-bulle svg { width: 32px; height: 32px; fill: #fff; }
.wa-bulle::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--wa); opacity: .55;
  animation: onde 2.6s ease-out infinite;
}
@keyframes onde { 0% { transform: scale(.9); opacity: .6; } 70%,100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-bulle::after { animation: none; } }

.wa-bulle__pastille {
  position: absolute; top: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bordeaux); color: #fff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--fond);
}

.wa-panneau {
  position: fixed; right: 20px; bottom: 94px; z-index: 91;
  width: min(360px, calc(100vw - 40px));
  max-height: calc(100dvh - 130px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1), visibility .3s;
}
.wa-panneau.ouvert { opacity: 1; visibility: visible; transform: none; }

.wa-tete {
  flex: none;
  background: var(--wa-nuit); color: #fff;
  padding: 15px 18px; display: flex; align-items: center; gap: 13px;
}
.wa-tete__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; flex: none;
  overflow: hidden; padding: 5px;
}
.wa-tete__avatar img { width: 100%; height: auto; object-fit: contain; }
.wa-tete__nom { font-weight: 600; font-size: 15px; line-height: 1.3; }
.wa-tete__etat { font-size: 12px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 6px; }
.wa-tete__etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6FE39A; }
.wa-fermer {
  margin-left: auto; width: 32px; height: 32px; flex: none;
  background: rgba(255,255,255,.14); border: 0; border-radius: 50%;
  color: #fff; font-size: 15px; cursor: pointer; line-height: 1;
}

.wa-corps {
  padding: 16px; background: var(--surface-2);
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.wa-bulle-msg {
  background: var(--surface); border-radius: 4px 16px 16px 16px;
  padding: 13px 15px; font-size: 14px; line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); margin-bottom: 5px;
}
.wa-bulle-msg strong { color: var(--bordeaux); }
:root[data-theme="dark"] .wa-bulle-msg strong { color: var(--or-vif); }
.wa-heure { font-size: 11px; color: var(--texte-2); margin: 0 0 13px 4px; }

.wa-choix { display: grid; gap: 7px; }
.wa-choix button,
.wa-choix a {
  text-align: left; font-family: var(--corps); font-size: 14px; font-weight: 500;
  text-decoration: none;
  background: var(--surface); color: var(--texte);
  border: 1.5px solid var(--bordure); border-radius: 13px;
  padding: 11px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: border-color .18s, transform .18s, background .18s;
}
.wa-choix button:hover,
.wa-choix a:hover { border-color: var(--wa); transform: translateX(3px); background: var(--surface); }
.wa-choix button span[aria-hidden],
.wa-choix a span[aria-hidden] { font-size: 17px; }

/* Le parcours de commande sur le site prime sur les raccourcis de conversation. */
.wa-choix .wa-choix__site {
  border-color: color-mix(in srgb, var(--bordeaux) 42%, transparent);
  background: color-mix(in srgb, var(--bordeaux) 7%, var(--surface));
  font-weight: 700;
}
.wa-choix .wa-choix__site:hover { border-color: var(--bordeaux); }
.wa-choix .wa-choix__site small {
  display: block; font-weight: 500; font-size: 12px;
  color: var(--texte-2); margin-top: 2px; line-height: 1.35;
}
.wa-choix__ou {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-2); margin: 3px 0 1px;
}
.wa-choix__ou::before, .wa-choix__ou::after {
  content: ""; flex: 1; height: 1px; background: var(--bordure);
}

.wa-pied { flex: none; padding: 14px 16px 18px; background: var(--surface-2); box-shadow: 0 -8px 16px -12px rgba(0,0,0,.25); }
.wa-pied .btn { width: 100%; justify-content: center; background: var(--wa); color: #fff; box-shadow: none; }
.wa-pied .btn:hover { background: var(--wa-fonce); }
.wa-note { font-size: 11.5px; color: var(--texte-2); text-align: center; margin: 12px 0 0; line-height: 1.5; }

@media (max-width: 960px) {
  .wa-bulle { bottom: 84px; right: 16px; width: 56px; height: 56px; }
  .wa-bulle svg { width: 29px; height: 29px; }
  .wa-panneau { right: 16px; left: 16px; bottom: 150px; width: auto; }
}

/* Le CTA collant mobile devient le bouton WhatsApp */
.cta-mobile--wa { background: var(--wa); color: #fff; box-shadow: 0 14px 34px -12px rgba(37,211,102,.85); }
.cta-mobile--wa:hover { background: var(--wa-fonce); }

/* =========================================================================
   BOUTONS FLOTTANTS : appeler le magasin + WhatsApp
   ========================================================================= */
.flottants {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 13px; align-items: flex-end;
}
.wa-bulle { position: relative; right: auto; bottom: auto; }

.appel-bulle {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bordeaux); color: #fff;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(122,31,43,.65), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s;
}
.appel-bulle:hover { transform: scale(1.07); background: var(--bordeaux-vif); }
.appel-bulle svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; }

/* Étiquette au survol, à gauche de la pastille */
.flottant__etiq {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--anthracite); color: #fff;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--pill);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--ombre-m);
}
.appel-bulle:hover .flottant__etiq,
.wa-bulle:hover .flottant__etiq { opacity: 1; transform: translateY(-50%); }

/* Barre collante mobile : deux actions côte à côte */
.barre-mobile {
  display: none;
  position: fixed; left: 14px; right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 55; gap: 8px;
  transform: translateY(calc(100% + 24px));
  opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.85,.3,1), opacity .24s ease;
}
.barre-mobile.visible { transform: none; opacity: 1; pointer-events: auto; }
.barre-mobile .btn { padding: 0; font-size: 14.5px; height: 52px; border: 0; }
.barre-mobile .btn--appel {
  flex: none; width: 52px; justify-content: center;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--bordeaux);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px -8px rgba(35,33,30,.45), inset 0 0 0 1px var(--bordure);
}
.barre-mobile .btn--appel svg { width: 21px; height: 21px; }
:root[data-theme="dark"] .barre-mobile .btn--appel { color: var(--or-vif); }
.barre-mobile .btn--wa {
  flex: 1; justify-content: center; gap: 9px;
  background: var(--wa); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(37,211,102,.75);
}
.barre-mobile .btn--wa svg { width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 960px) {
  .flottants { display: none; }
  .barre-mobile { display: flex; }
  .wa-panneau { right: 12px; left: 12px; bottom: 84px; width: auto; }
}

/* Rappel du téléphone dans le panneau WhatsApp */
.wa-appel {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-size: 13.5px; color: var(--texte-2);
}
.wa-appel a { color: var(--bordeaux); font-weight: 700; text-decoration: none; }
:root[data-theme="dark"] .wa-appel a { color: var(--or-vif); }
.wa-appel a:hover { text-decoration: underline; }

/* =========================================================================
   CONVERSION : bouton de commande par plat, coups de coeur
   ========================================================================= */
.plat { grid-template-columns: 1fr auto auto; align-items: center; }
.plat__cmd {
  grid-row: 1; grid-column: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--corps); font-size: 13px; font-weight: 600;
  background: transparent; color: var(--bordeaux);
  border: 1.5px solid color-mix(in srgb, var(--bordeaux) 30%, transparent);
  border-radius: var(--pill);
  padding: 8px 16px; margin-left: 16px; cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.plat__cmd svg { width: 15px; height: 15px; fill: currentColor; }
.plat__cmd:hover { background: var(--wa); border-color: var(--wa); color: #fff; transform: translateY(-1px); }
:root[data-theme="dark"] .plat__cmd { color: var(--or-vif); border-color: color-mix(in srgb, var(--or-vif) 34%, transparent); }
:root[data-theme="dark"] .plat__cmd:hover { color: #fff; }
@media (max-width: 620px) {
  .plat { grid-template-columns: 1fr auto; }
  .plat__cmd { grid-row: auto; grid-column: 1 / -1; margin: 12px 0 0; justify-content: center; }
}

/* Coups de coeur en tete de carte */
.coups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 22px;
}
.coup {
  background: var(--surface); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--ombre-s); display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
}
.coup:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.coup__photo { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.coup__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.coup:hover .coup__photo img { transform: scale(1.07); }
.coup__corps { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.coup h3 { font-size: 19px; }
.coup p { margin: 0; font-size: 13.5px; color: var(--texte-2); line-height: 1.5; }
.coup__pied { display: grid; gap: 12px; margin-top: auto; padding-top: 16px; }
.coup__prix { font-size: 21px; font-weight: 700; color: var(--bordeaux); white-space: nowrap; }
:root[data-theme="dark"] .coup__prix { color: var(--or-vif); }
.coup__cmd {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--corps); font-size: 13.5px; font-weight: 600;
  background: var(--wa); color: #fff; border: 0;
  border-radius: var(--pill); padding: 10px 18px; cursor: pointer;
  transition: background .18s, transform .18s;
}
.coup__cmd svg { width: 16px; height: 16px; fill: currentColor; }
.coup__cmd:hover { background: var(--wa-fonce); transform: translateY(-1px); }

/* Bandeau d'appel a l'action en fin de section */
.rappel {
  background: linear-gradient(135deg, var(--bordeaux-nuit), var(--bordeaux) 60%, var(--bordeaux-vif));
  border-radius: 24px; color: #fff;
  padding: 44px 40px; text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
}
.rappel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 100% at 15% 0%, rgba(240,200,104,.24), transparent 62%);
}
.rappel h2 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 12px; }
.rappel p { color: rgba(255,255,255,.85); margin: 0 auto 26px; max-width: 52ch; }
.rappel .heros__actions { justify-content: center; }

/* =========================================================================
   SIGNATURE ORIENTALE : icones dessinees, frises, separateur zellige
   ========================================================================= */

/* ---------- Frise de garanties : pas de cartes, des traits et des icones ---------- */
.frise {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid color-mix(in srgb, var(--or) 34%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 34%, transparent);
}
.frise__item {
  padding: 40px 30px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  position: relative;
}
.frise__item + .frise__item::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: color-mix(in srgb, var(--or) 30%, transparent);
}
.frise__ico { width: 58px; height: 58px; color: var(--or); }
.frise__ico svg { width: 100%; height: 100%; display: block; }
.frise h3 { font-size: 17px; letter-spacing: -.015em; }
.frise p { margin: 0; font-size: 14px; color: var(--texte-2); line-height: 1.55; max-width: 30ch; }
.frise a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; }
@media (max-width: 900px) {
  .frise { grid-template-columns: repeat(2, 1fr); }
  .frise__item:nth-child(3)::before, .frise__item:nth-child(2n+1)::before { display: none; }
  .frise__item:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--or) 22%, transparent); }
}
@media (max-width: 560px) {
  .frise { grid-template-columns: 1fr; }
  .frise__item::before { display: none !important; }
  .frise__item + .frise__item { border-top: 1px solid color-mix(in srgb, var(--or) 22%, transparent); }
}

/* ---------- Icones au trait : elles se dessinent a l'apparition ---------- */
.ico-trait { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-plein { fill: currentColor; stroke: none; }
.rv.vu .ico-trait {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: tracer 1.5s cubic-bezier(.35,.8,.4,1) forwards;
}
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* Vapeur qui monte au-dessus du tajine */
.vapeur { animation: monte 3.2s ease-in-out infinite; transform-origin: center bottom; }
.vapeur--2 { animation-delay: .5s; }
.vapeur--3 { animation-delay: 1s; }
@keyframes monte {
  0%   { opacity: 0; transform: translateY(3px) scaleY(.85); }
  35%  { opacity: .95; }
  100% { opacity: 0; transform: translateY(-5px) scaleY(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .vapeur { animation: none; opacity: .8; }
  .rv.vu .ico-trait { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Etapes illustrees (remplace les cartes) ---------- */
.chemin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.chemin--3 { grid-template-columns: repeat(3, 1fr); }
.chemin--3::before { left: 16%; right: 16%; }
.chemin::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 46px; height: 1px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--or) 55%, transparent) 0 7px, transparent 7px 15px);
}
.chemin__etape {
  position: relative; padding: 0 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.chemin__rond {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--fond);
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  display: grid; place-items: center;
  color: var(--or); position: relative; z-index: 1;
  transition: border-color .3s, transform .3s cubic-bezier(.2,.8,.3,1);
}
.sec--creme .chemin__rond { background: var(--creme); }
.chemin__etape:hover .chemin__rond { border-color: var(--or); transform: translateY(-4px); }
.chemin__rond svg { width: 46px; height: 46px; }
.chemin__num {
  position: absolute; top: -4px; right: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bordeaux); color: var(--or-vif);
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.chemin h3 { font-size: 18px; margin-top: 4px; }
.chemin p { margin: 0; font-size: 14px; color: var(--texte-2); line-height: 1.55; }
@media (max-width: 900px) {
  .chemin { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .chemin::before { display: none; }
}
@media (max-width: 520px) { .chemin { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Separateur zellige ---------- */
/* Transition entre deux sections : frise de stuc sculpte, photographiee.
   La tuile est en miroir, donc la repetition ne laisse aucun raccord visible. */
.zellige-sep {
  position: relative;
  height: 142px;
  background: url("/images/frise-stuc.webp") center / auto 100% repeat-x, #63151F url("/images/texture-bordeaux.webp") center / cover;
}
/* Ombres douces aux jonctions : la frise s'encastre au lieu d'etre posee dessus */
.zellige-sep::before, .zellige-sep::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22px; pointer-events: none;
}
.zellige-sep::before { top: 0;    background: linear-gradient(rgba(0,0,0,.45), transparent); }
.zellige-sep::after  { bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.45)); }
@media (max-width: 760px) { .zellige-sep { height: 92px; } }

/* ---------- Filet decoratif sous les titres de section ---------- */

/* =========================================================================
   TRAME ZELLIGE ET MATIERES
   ========================================================================= */

/* ---------- Trame zellige au fond des sections creme ---------- */
.sec--creme { background: var(--creme); }

/* ---------- Moucharabieh : claustra ajoure ---------- */

/* ---------- Second separateur : entrelacs ---------- */

/* ---------- Coins ornementes ---------- */

/* ---------- Puces losange ---------- */
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--or);
}

/* ---------- Filet double sous la barre pratique ---------- */
.pratique { border-bottom: 1px solid rgba(240,200,104,.22); }

/* ---------- Etoile de fond derriere les compteurs ---------- */
.compteurs__in { position: relative; }

/* ---------- Panneau WhatsApp : liseré or ---------- */
.wa-panneau { border: 1px solid rgba(240,200,104,.28); }
.wa-tete { border-bottom: 2px solid rgba(240,200,104,.4); }

/* =========================================================================
   PANNEAU ORNE : arcades mauresques, trame zellige, cadre a double filet
   Remplace le simple degrade des bandeaux bordeaux.
   ========================================================================= */
.rappel, .lettre {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    var(--fond-panneau, none) no-repeat center / cover,
    url("/images/texture-bordeaux.webp") no-repeat center / cover,
    linear-gradient(157deg, #5E1621 0%, #7A1F2B 48%, #8E2837 100%);
}

/* Voile pose sur le fond photo, quand il y en a un.
   S'active en donnant --fond-panneau: url(...) au bloc. */
.rappel[style*="--fond-panneau"], .lettre[style*="--fond-panneau"] { background-blend-mode: normal; }
.rappel[style*="--fond-panneau"]::after,
.lettre[style*="--fond-panneau"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 90% at 50% 50%, rgba(60,13,20,.78), transparent 72%),
    linear-gradient(157deg, rgba(94,22,33,.66), rgba(122,31,43,.5) 48%, rgba(60,13,20,.8));
}
.rappel::after, .lettre::after { content: none; }

/* Cadre a double filet, avec losanges aux angles */
.rappel::before, .lettre::before {
  content: ""; position: absolute; inset: 20px; z-index: 0; pointer-events: none;
  border: 1px solid rgba(240,200,104,.22);
  border-radius: 10px;
}

.rappel > *, .lettre > * { position: relative; z-index: 1; }

.rappel { border-radius: 24px; padding: 60px 46px; text-align: center; }
.rappel h2 { color: #fff; }
.rappel p  { color: rgba(255,255,255,.88); }

@media (max-width: 700px) {
  .rappel { padding: 44px 24px; }
  .rappel::before, .lettre::before { inset: 14px; }
}

/* =========================================================================
   MATIERE DES SECTIONS
   Tadelakt photographie, posé sous chaque section. Pas de motif : de la
   texture. Voile de la couleur de fond par-dessus pour rester discret.
   ========================================================================= */
.sec, .sec--serre, .compteurs__in {
  background-image:
    linear-gradient(rgba(255,253,249,.80), rgba(255,253,249,.80)),
    url("/images/texture-creme.webp");
  background-size: cover;
  background-position: center;
}
.sec--creme {
  background-color: var(--creme);
  background-image:
    linear-gradient(rgba(246,241,231,.46), rgba(246,241,231,.46)),
    url("/images/texture-creme.webp");
  background-size: cover;
  background-position: center;
}
.pied {
  background-image:
    linear-gradient(rgba(35,33,30,.90), rgba(35,33,30,.90)),
    url("/images/texture-sombre.webp");
  background-size: cover;
  background-position: center;
}
.compteurs__in { background-image: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sec,
  :root:not([data-theme="light"]) .sec--serre {
    background-image:
      linear-gradient(rgba(21,16,14,.84), rgba(21,16,14,.84)),
      url("/images/texture-sombre.webp");
  }
  :root:not([data-theme="light"]) .sec--creme {
    background-image:
      linear-gradient(rgba(34,26,23,.62), rgba(34,26,23,.62)),
      url("/images/texture-sombre.webp");
  }
}
:root[data-theme="dark"] .sec,
:root[data-theme="dark"] .sec--serre {
  background-image:
    linear-gradient(rgba(21,16,14,.84), rgba(21,16,14,.84)),
    url("/images/texture-sombre.webp");
}
:root[data-theme="dark"] .sec--creme {
  background-image:
    linear-gradient(rgba(34,26,23,.62), rgba(34,26,23,.62)),
    url("/images/texture-sombre.webp");
}

/* =========================================================================
   CADRE PHOTO — inspire des affiches encadrees du mur de la boutique :
   passe-partout creme, filet or, plaque de laiton gravee.
   ========================================================================= */
.cadre-photo {
  position: relative;
  margin: 0;
  padding: 14px;
  background: linear-gradient(150deg, #FBF7EE, var(--creme) 60%, #EFE7D6);
  border-radius: 5px;
  box-shadow:
    0 1px 2px rgba(35,33,30,.10),
    0 30px 64px -32px rgba(78,17,25,.55);
}
.cadre-photo::before {
  content: ""; position: absolute; inset: 8px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(196,154,58,.5);
  border-radius: 3px;
}
.cadre-photo img {
  display: block; width: 100%; height: auto;
  border-radius: 2px;
  transition: transform .8s cubic-bezier(.2,.8,.3,1);
}
.cadre-photo:hover img { transform: scale(1.02); }
.cadre-photo__vue { overflow: hidden; border-radius: 2px; }

.cadre-photo__plaque {
  position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
  z-index: 3; white-space: nowrap;
  background: linear-gradient(158deg, #E7C275, #C49A3A 46%, #A07C28);
  color: #3A2408;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 22px; border-radius: 3px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
@media (max-width: 620px) {
  .cadre-photo { padding: 10px; }
  .cadre-photo::before { inset: 5px; }
  .cadre-photo__plaque { font-size: 9.5px; letter-spacing: .1em; padding: 7px 14px; white-space: normal; text-align: center; }
}
:root[data-theme="dark"] .cadre-photo { background: linear-gradient(150deg, #2E2420, #241C19 60%, #1E1714); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cadre-photo { background: linear-gradient(150deg, #2E2420, #241C19 60%, #1E1714); }
}

/* =========================================================================
   BLOC EDITORIAL : titre tenu a gauche, texte en colonnes a droite
   ========================================================================= */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.editorial__tete { position: sticky; top: 128px; }
.editorial__tete h2 { font-size: clamp(28px, 3.6vw, 40px); margin-top: 12px; }
.editorial__accroche {
  margin: 26px 0 0; font-size: 17.5px; color: var(--texte);
  max-width: 34ch; line-height: 1.6;
}
.editorial__corps p { color: var(--texte-2); font-size: 16.5px; line-height: 1.78; margin: 0 0 22px; }
.editorial__corps p:last-child { margin-bottom: 0; }
.editorial__corps p:first-child::first-letter {
  float: left; line-height: .82; margin: 6px 12px 0 0;
  font-size: 62px; font-weight: 700; color: var(--bordeaux);
}
:root[data-theme="dark"] .editorial__corps p:first-child::first-letter { color: var(--or-vif); }
@media (max-width: 940px) {
  .editorial { grid-template-columns: 1fr; gap: 32px; }
  .editorial__tete { position: static; }
  .editorial__accroche { max-width: none; }
}

/* Zone de livraison : les villes en pastilles */
.zone {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--bordure);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
}
.zone__titre {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texte-2); flex: none;
}
.zone__villes { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; }
.zone__villes li {
  font-size: 13.5px; font-weight: 500; color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--pill);
  padding: 7px 16px; background: var(--surface);
  transition: border-color .2s, transform .2s;
}
.zone__villes li:hover { border-color: var(--or); transform: translateY(-2px); }

/* =========================================================================
   ACCESSIBILITE TACTILE
   Sur mobile et tablette, toute cible cliquable atteint 44 px de haut.
   On etend la zone de touche sans toucher au rendu.
   ========================================================================= */
@media (max-width: 1024px) {
  .lien-souligne, .pied a, .avis__puce, .plat__cmd, .zone__villes li {
    position: relative;
  }
  .lien-souligne::before,
  .pied ul a::before,
  .avis__puce::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
  .avis__puce::after { width: 44px; height: 44px; }
  .wa-fermer { width: 40px; height: 40px; }
  .wa-choix button, .wa-choix a { min-height: 48px; }
  .tiroir a { min-height: 48px; display: flex; align-items: center; }
  .carte-nav .puce { min-height: 42px; display: inline-flex; align-items: center; }
  .pied ul { gap: 4px; }
  .pied ul li { padding: 7px 0; }
}

/* Ecrans tres larges : on evite que la frise et les textures s'etirent */
@media (min-width: 1600px) {
  :root { --max: 1280px; }
  .zellige-sep { height: 156px; }
}

/* Telephone en paysage : le heros ne doit pas manger tout l'ecran */
@media (min-width: 961px) and (max-height: 860px) {
  .heros--court { min-height: 0; }
  .heros--court .heros__in { padding: 100px var(--gouttiere) 56px; }
  .heros--court h1 { font-size: clamp(30px, 4.2vw, 44px); }
  .heros--court .heros__intro { font-size: 16px; margin-bottom: 24px; }
  .heros__in { padding: 104px var(--gouttiere) 76px; }
  .heros h1 { font-size: clamp(32px, 4.4vw, 52px); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .heros { min-height: 0; }
  .heros__in { padding: 104px var(--gouttiere) 72px; }
  .heros h1 { font-size: clamp(28px, 5vw, 40px); }
  .heros__descente { display: none; }
}

/* =========================================================================
   DIAPORAMA DES DATES CLES
   Defilement horizontal avec accroche, fleches, pastilles et clavier.
   ========================================================================= */
.diapo { position: relative; }
.diapo__piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: var(--r);
}
.diapo__piste::-webkit-scrollbar { display: none; }

.diapo__vue { scroll-snap-align: center; padding: 4px; }
.diapo__carte {
  display: grid; grid-template-columns: 44% 1fr;
  background: var(--surface);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--ombre-m);
  min-height: 400px;
}
.diapo__photo { position: relative; overflow: hidden; background: var(--surface-2); }
.diapo__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.8,.3,1);
}
.diapo__vue:hover .diapo__photo img { transform: scale(1.04); }
/* Un voile chaud pour lier la photo a la charte */
.diapo__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(122,31,43,.18), transparent 55%);
}
.diapo__contenu {
  padding: 42px 44px;
  display: flex; flex-direction: column; gap: 20px;
  justify-content: center;
}
.diapo__marge { display: flex; flex-direction: column; gap: 8px; }
.diapo__an {
  font-size: clamp(40px, 4.6vw, 56px); font-weight: 800; line-height: .95; letter-spacing: -.045em;
  background: linear-gradient(120deg, var(--or), var(--bordeaux-vif));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:root[data-theme="dark"] .diapo__an { background: linear-gradient(120deg, var(--or-vif), var(--or)); -webkit-background-clip: text; background-clip: text; }
.diapo__lieu {
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--texte-2);
}
.diapo__chiffre {
  margin-top: 8px; align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--accent);
  background: color-mix(in srgb, var(--or) 13%, transparent);
  border-radius: var(--pill); padding: 7px 15px;
}
.diapo__texte h3 { font-size: clamp(21px, 2.3vw, 26px); margin-bottom: 12px; }
.diapo__texte p { margin: 0; color: var(--texte-2); font-size: 16px; line-height: 1.72; }
.diapo__cite {
  margin-top: 20px !important;
  font-family: var(--serif); font-style: italic; font-size: 17.5px;
  color: var(--titre) !important;
  border-left: 2px solid var(--or); padding-left: 20px; line-height: 1.6;
}
.diapo__cite small {
  display: block; margin-top: 9px;
  font-family: var(--corps); font-style: normal; font-size: 11.5px;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--texte-2);
}

.diapo__barre {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 28px;
}
.diapo__fleche {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--bordure); color: var(--titre);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--ombre-s);
  transition: border-color .2s, transform .2s, opacity .2s;
}
.diapo__fleche:hover:not(:disabled) { border-color: var(--or); transform: translateY(-2px); }
.diapo__fleche:disabled { opacity: .32; cursor: default; }
.diapo__fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diapo__puces { display: flex; gap: 9px; }
.diapo__puce {
  width: 9px; height: 9px; border: 0; border-radius: var(--pill); padding: 0;
  background: var(--bordure); cursor: pointer;
  transition: background .25s, width .25s;
}
.diapo__puce[aria-current="true"] { background: var(--or); width: 30px; }
.diapo__compteur { font-size: 13px; font-weight: 600; color: var(--texte-2); font-variant-numeric: tabular-nums; min-width: 54px; text-align: center; }

@media (max-width: 900px) {
  .diapo__carte { grid-template-columns: 1fr; min-height: 0; }
  .diapo__photo { aspect-ratio: 16/10; }
  .diapo__photo img { position: static; }
  .diapo__contenu { padding: 28px 24px 32px; gap: 16px; }
  .diapo__marge { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 12px; }
  .diapo__an { font-size: 40px; }
  .diapo__texte p { font-size: 15.5px; }
  .diapo__cite { font-size: 16px; padding-left: 15px; }
  .diapo__barre { gap: 14px; margin-top: 22px; }
}

/* =========================================================================
   COMPOSEUR DE COMMANDE
   ========================================================================= */
.commande { display: grid; grid-template-columns: 1fr 372px; gap: 48px; align-items: start; }

.cmd-gamme { margin-bottom: 40px; }
.cmd-gamme__tete { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.cmd-gamme__tete h2 { font-size: clamp(21px, 2.6vw, 26px); }
.cmd-gamme__tete hr { flex: 1; height: 1px; border: 0; background: var(--bordure); margin: 0; }

.cmd-plat {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
  padding: 15px 18px; border-radius: var(--r-s);
  background: var(--surface); box-shadow: var(--ombre-s);
  margin-bottom: 9px;
  transition: box-shadow .2s, transform .2s;
}
.cmd-plat[data-choisi="true"] { box-shadow: 0 0 0 1.5px var(--or), var(--ombre-s); }
.cmd-plat__nom { font-size: 15.5px; font-weight: 500; }
.cmd-plat__prix { font-size: 16px; font-weight: 700; color: var(--bordeaux); white-space: nowrap; }
:root[data-theme="dark"] .cmd-plat__prix { color: var(--or-vif); }

.pas { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border-radius: var(--pill); padding: 3px; }
.pas button {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--titre); font-size: 18px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .18s, color .18s;
}
.pas button:hover:not(:disabled) { background: var(--bordeaux); color: #fff; }
.pas button:disabled { opacity: .3; cursor: default; }
.pas output { min-width: 26px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Récapitulatif ---------- */
.recap {
  position: sticky; top: 118px;
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--ombre-m); overflow: hidden;
}
.recap__tete { background: var(--bordeaux); color: #fff; padding: 20px 24px; }
.recap__tete h2 { color: #fff; font-size: 19px; }
.recap__tete p { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,.78); }
.recap__corps { padding: 20px 24px 24px; }
.recap__lignes { list-style: none; margin: 0 0 16px; padding: 0; max-height: 260px; overflow-y: auto; }
.recap__lignes li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--bordure); font-size: 14.5px;
}
.recap__lignes li:last-child { border-bottom: 0; }
.recap__q { font-weight: 700; color: var(--accent); }
.recap__vide { color: var(--texte-2); font-size: 14.5px; text-align: center; padding: 22px 0; }
.recap__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; border-top: 2px solid var(--bordure); margin-bottom: 18px;
}
.recap__total span { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.recap__total strong { font-size: 26px; font-weight: 800; color: var(--bordeaux); letter-spacing: -.02em; }
:root[data-theme="dark"] .recap__total strong { color: var(--or-vif); }
.recap .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.recap .btn--wa { background: var(--wa); color: #fff; }
.recap .btn--wa:hover { background: var(--wa-fonce); }
.recap .btn--wa svg { width: 18px; height: 18px; fill: currentColor; }
.recap__note { font-size: 12px; color: var(--texte-2); text-align: center; line-height: 1.5; margin: 10px 0 0; }

/* ---------- Retrait et coordonnées ---------- */
.retrait { display: grid; gap: 16px; margin-bottom: 20px; }
.jours { display: flex; gap: 8px; flex-wrap: wrap; }
.jour {
  flex: 1 1 92px; font-family: var(--corps); font-size: 13px;
  background: var(--surface-2); border: 1.5px solid transparent; color: var(--texte);
  border-radius: var(--r-s); padding: 10px 8px; cursor: pointer; text-align: center; line-height: 1.35;
  transition: border-color .18s, background .18s;
}
.jour b { display: block; font-size: 14px; }
.jour[aria-pressed="true"] { border-color: var(--bordeaux); background: color-mix(in srgb, var(--bordeaux) 8%, transparent); }
:root[data-theme="dark"] .jour[aria-pressed="true"] { border-color: var(--or); background: color-mix(in srgb, var(--or) 12%, transparent); }

@media (max-width: 1020px) {
  .commande { grid-template-columns: 1fr; gap: 32px; }
  .recap { position: static; }
  /* Le pouce vient d'en bas : les envois doivent être hauts et pleine largeur. */
  .recap .btn { min-height: 54px; font-size: 15.5px; }
  .recap__corps { padding: 18px 18px 22px; }
  .recap__tete { padding: 17px 18px; }
  .recap__lignes { max-height: none; }
  /* Place pour la barre de panier, qui flotte au-dessus du bas de page. */
  .commande + *, .sec:has(.commande) { scroll-margin-top: 96px; }
}

@media (max-width: 560px) {
  /* Deux lignes au lieu de trois : 34 plats tiennent en un défilement raisonnable. */
  .cmd-plat {
    grid-template-columns: 1fr auto;
    gap: 2px 12px; padding: 12px 14px; margin-bottom: 7px;
  }
  .cmd-plat__nom  { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 1.35; }
  .cmd-plat__prix { grid-column: 1; grid-row: 2; font-size: 15px; }
  .cmd-plat .pas  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cmd-gamme { margin-bottom: 30px; }
  .cmd-gamme__tete { gap: 12px; margin-bottom: 13px; }
  .jour { flex: 1 1 84px; padding: 11px 6px; }
}

/* Barre de rappel du panier sur mobile */
.panier-flottant {
  display: none; position: fixed; left: 14px; right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 56;
  background: var(--bordeaux); color: #fff;
  border-radius: var(--pill); padding: 12px 16px 12px 20px;
  align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 14px 34px -12px rgba(122,31,43,.9);
  text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.panier-flottant b { font-size: 17px; font-weight: 800; }
.panier-flottant span { display: inline-flex; align-items: center; gap: 8px; }
.panier-flottant span:last-child::after {
  content: "→"; font-size: 16px; line-height: 1; transition: transform .2s;
}
.panier-flottant:active span:last-child::after { transform: translateX(3px); }
.panier-flottant__nb { font-size: 13px; opacity: .82; }

@media (max-width: 1020px) {
  .panier-flottant.visible { display: flex; animation: panier-entre .34s cubic-bezier(.2,.9,.3,1); }
  .panier-flottant { min-height: 56px; padding: 11px 18px 11px 20px; }
  /* La bulle WhatsApp s'écarte pour ne pas chevaucher la barre de panier. */
  body.a-panier .flottants { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .flottants { transition: bottom .28s cubic-bezier(.2,.9,.3,1); }
  /* Arrivé au récapitulatif, la barre a fait son travail : elle s'efface. */
  .panier-flottant.au-but { opacity: 0; pointer-events: none; transform: translateY(14px); }
  .panier-flottant { transition: opacity .24s, transform .24s; }
}
@keyframes panier-entre {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panier-flottant.visible { animation: none; }
}