/* =====================================================================
   COMME LÀ-BAS — feuille de style publique
   Charte dérivée de _ref/charte-devanture.jpeg (vert bouteille nuit,
   lettrage or rétroéclairé, rosaces 8 branches, lanternes ajourées).

   Aucun framework, aucun build, aucun CDN. Tout est self-hosté.
   Les ratios de contraste cités sont MESURÉS par scripts/contraste.php.
   ===================================================================== */

/* ============================ 1. POLICES ============================
   Self-hostées dans /assets/fonts. Licences SIL OFL (fichiers joints).
   font-display: swap -> le texte est lisible avant l'arrivée de la police. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Rakkas : le lettrage de l'enseigne. Serif a ductus oriental, attaques et
   terminaisons en pointe -- c'est la lettre doree de la devanture. SIL OFL.
   Un seul graisse (400) : elle est deja dense, on ne la fausse pas. */
@font-face { font-family:'Rakkas'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/rakkas-400-latin.woff2') format('woff2'); }

/* Marhey : LE lettrage de l'enseigne de la devanture (revision Ed 19/08).
   Ductus oriental, terminaisons en pointe, courbes ouvertes -- c'est la lettre
   doree du fronton. Fichier VARIABLE (400..700). SIL OFL, self-hoste. */
@font-face { font-family:'Marhey'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/assets/fonts/marhey-variable-latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Marhey'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/assets/fonts/marhey-variable-latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Jost : fichier VARIABLE (un seul fichier pour 100..900). */
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/jost-variable-latin.woff2') format('woff2-variations');
}

/* ============================ 2. TOKENS ============================= */

:root {
  /* --- PALETTE (revision Ed 19/08) : le SABLE DORE est majoritaire, le
         VERT MAROCAIN est minoritaire (bandeau, en-tete, hero, pied, sections
         d'accent). Les NOMS de tokens sont conserves pour ne rien casser ;
         seules les VALEURS sont inversees : --bg = fond sable, --cream = texte
         sombre. Le scope fonce est defini en section 18. --- */
  --bg:         #EFDCB2;
  --bg-2:       #FBF0D5;
  --bg-3:       #E4CB98;
  --vert:       #0D3A2A;
  --vert-2:     #124835;
  --gold:       #9C6B12;
  --gold-soft:  #7E5410;
  --amber:      #B3591A;
  --terracotta: #93401A;
  --cream:      #241705;
  --cream-2:    #4A3A22;
  --muted:      #6F5C3C;
  --border:     #DCC38F;
  --muted-hi:   #5E4C2F;
  --line:       #C0A067;
  --line-strong:#9E834F;

  --miel:       #F7E5C0;
  --ocre:       #EBC983;
  --ocre-2:     #D6AC5E;
  --brun:       #33220E;
  --brun-2:     #5A3F1B;
  --sur-or:     #241705;

  /* --- Typographie --- */
  --font-enseigne: 'Marhey', 'Rakkas', 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-titre: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-corps: 'Jost', 'Futura', 'Century Gothic', 'Segoe UI', system-ui, sans-serif;

  /* --- Rythme --- */
  --max:    1180px;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --r-s:    6px;
  --r-m:    12px;
  --r-l:    20px;

  /* --- Lumière (le halo du lettrage rétroéclairé) --- */
  --halo-or:  0 0 28px rgba(217,164,65,.42), 0 0 64px rgba(217,164,65,.18);
  --halo-fort:0 0 34px rgba(242,217,160,.55), 0 0 90px rgba(232,151,60,.28);
  --ombre-carte: 0 2px 4px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.30);

  --transition: 180ms cubic-bezier(.2,.7,.3,1);
}

/* ========================= 3. RÉINITIALISATION ====================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-corps);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-enseigne);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.6rem, 6.6vw, 4.6rem); font-weight: 400; letter-spacing: .015em; }
h2 { font-size: clamp(1.95rem, 4.2vw, 3.05rem); font-weight: 400; letter-spacing: .012em; }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); font-family: var(--font-titre); }
p  { margin: 0 0 1em; color: var(--cream-2); }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-soft); }

/* Anneau de focus VISIBLE partout — non négociable pour la navigation clavier. */
:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 3px;
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--vert); color: #FFF6E2; padding: .8rem 1.4rem;
  font-weight: 600; border-radius: 0 0 var(--r-s) 0;
}
.saut-contenu:focus { left: 0; }

.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;
}

/* ============================ 4. TRAMES ============================= */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap-etroit { max-width: 760px; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.section--carte { background: var(--bg-2); }

/* Filigrane de rosace : très discret (opacité 0.05), jamais au-dessus du texte. */
.section--filigrane::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/assets/img/rosace-filigrane.svg');
  background-repeat: repeat;
  background-size: 260px 260px;
  opacity: .05;
  z-index: 0;
}
.section > .wrap { position: relative; z-index: 1; }

.titre-section { text-align: center; margin-bottom: 2.5rem; }
.titre-section .sur-titre {
  font-family: var(--font-corps);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .7rem;
}
.titre-section h2 { margin-bottom: .35rem; color: var(--cream); }
.titre-section .chapo { color: var(--muted); max-width: 56ch; margin-inline: auto; }

/* --- Séparateur : la rosace 8 branches encadrée de deux filets --- */
.separateur {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem; margin: 2.2rem auto; max-width: 420px; color: var(--gold);
}
.separateur::before, .separateur::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.separateur::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.separateur svg { width: 30px; height: 30px; opacity: .95; flex: none; }


/* --- SECTION LUMIERE : la bande doree de la devanture ---------------
   Sur la photo, le vert nuit n'occupe que l'encadrement ; le coeur de la
   vitrine est un dore chaud et lumineux. Une page tout en vert trahit
   l'image. Cette section est ce contrepoint clair. */
.section--lumiere {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,244,219,.98), transparent 68%),
    linear-gradient(180deg, var(--miel) 0%, var(--ocre) 58%, var(--ocre-2) 100%);
  color: var(--brun);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 90px rgba(232,151,60,.16);
}
.section--lumiere h1, .section--lumiere h2 { color: var(--bg); }
.section--lumiere h3 { color: #1B3A2C; }
.section--lumiere p  { color: var(--brun-2); }
.section--lumiere .titre-section .sur-titre { color: #8A5A1E; }
.section--lumiere .titre-section .chapo { color: var(--brun-2); }
.section--lumiere .separateur { color: #8A5A1E; }
.section--lumiere .separateur::before { background: linear-gradient(90deg, transparent, #8A5A1E); }
.section--lumiere .separateur::after  { background: linear-gradient(270deg, transparent, #8A5A1E); }
.section--lumiere a { color: #7A4E14; }
.section--lumiere a:hover { color: var(--brun); }
/* Sur fond dore, le CTA s'inverse : vert nuit sur or, exactement comme
   les lettres de la vitrine chauffante. 13.6:1. */
.section--lumiere .btn-or {
  background: linear-gradient(160deg, #1C3227, var(--bg) 70%);
  color: var(--gold-soft);
  box-shadow: 0 2px 4px rgba(51,34,14,.28), 0 10px 30px rgba(51,34,14,.20);
}
.section--lumiere .btn-or:hover { color: #FBEDC9; box-shadow: 0 3px 6px rgba(51,34,14,.34), 0 14px 38px rgba(51,34,14,.26); }
.section--lumiere .btn-discret, .section--lumiere .btn-fantome {
  background: transparent; color: var(--brun); border-color: rgba(51,34,14,.45);
}
.section--lumiere .btn-discret:hover, .section--lumiere .btn-fantome:hover {
  background: rgba(51,34,14,.08); color: var(--brun); border-color: var(--brun);
}
/* Le filigrane de rosace se lit en brun sur le dore, pas en clair. */
.section--lumiere.section--filigrane::before { opacity: .055; filter: invert(1) sepia(1) saturate(2) hue-rotate(-18deg); }

/* Les panneaux sombres poses sur le dore : ce sont les cartons "COUSCOUS
   MAISON" et "NOS FORMULES" de la devanture, vert nuit + filet dore. */
.section--lumiere .arg {
  background: linear-gradient(180deg, #14261E, var(--bg));
  border-color: rgba(217,164,65,.42);
  box-shadow: 0 2px 4px rgba(51,34,14,.22), 0 14px 34px rgba(51,34,14,.18);
}
.section--lumiere .arg h3 { color: var(--gold-soft); }
.section--lumiere .arg p  { color: var(--cream-2); }
.section--lumiere .arg svg { color: var(--gold); }

/* Liseres de transition sombre -> dore, pour que la bascule ne soit pas brutale. */
.section--lumiere::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}

/* ============================ 5. EN-TÊTE ============================ */

.bandeau {
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  color: var(--gold-soft);          /* 10.13:1 sur --bg-3 */
  font-size: .8rem; letter-spacing: .06em;
  text-align: center; padding: .5rem 1rem;
}
.bandeau strong { color: var(--amber); font-weight: 500; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg); } }

.topbar-inner {
  max-width: var(--max); margin-inline: auto;
  padding: .7rem var(--gouttiere);
  display: flex; align-items: center; gap: 1.2rem;
}

.marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.marque svg { width: 38px; height: 38px; flex: none; color: var(--gold); }
.marque-txt { display: flex; flex-direction: column; line-height: 1.05; }
.marque-nom {
  font-family: var(--font-enseigne); font-size: 1.62rem; font-weight: 400; letter-spacing: .015em;
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(217,164,65,.45);
}
.marque-sub {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}

.nav-desktop { display: flex; gap: 1.6rem; }
.nav-desktop a {
  color: var(--cream-2); text-decoration: none; font-size: .93rem;
  letter-spacing: .04em; padding: .3rem 0; position: relative;
}
.nav-desktop a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--gold); transition: right var(--transition);
}
.nav-desktop a:hover, .nav-desktop a.is-active { color: var(--gold-soft); }
.nav-desktop a:hover::after, .nav-desktop a.is-active::after { right: 0; }

.burger {
  display: none; background: none; border: 1px solid var(--line);
  color: var(--cream); border-radius: var(--r-s); padding: .45rem;
  cursor: pointer; line-height: 0;
}
.burger svg { width: 22px; height: 22px; }

.tiroir {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
  background: var(--bg-2); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform var(--transition);
  z-index: 60; padding: 4.5rem 1.6rem 2rem; overflow-y: auto;
}
.tiroir.est-ouvert { transform: translateX(0); }
.tiroir nav { display: flex; flex-direction: column; gap: .2rem; }
.tiroir nav a {
  color: var(--cream); text-decoration: none; padding: .85rem .4rem;
  border-bottom: 1px solid var(--border); font-size: 1.05rem;
}
.tiroir nav a.is-active { color: var(--gold-soft); }
.tiroir-fermer {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: 1px solid var(--line); color: var(--cream);
  border-radius: var(--r-s); padding: .45rem; cursor: pointer; line-height: 0;
}
.voile-tiroir {
  position: fixed; inset: 0; background: rgba(5,12,9,.7);
  opacity: 0; pointer-events: none; transition: opacity var(--transition); z-index: 55;
}
.voile-tiroir.est-ouvert { opacity: 1; pointer-events: auto; }

@media (max-width: 880px) {
  .nav-desktop { display: none; }
  .burger { display: block; }
}

/* En dessous de 560px, l'enseigne passait sur deux lignes et poussait le CTA.
   On la condense au lieu de la casser. */
@media (max-width: 560px) {
  .marque { gap: .5rem; }
  .marque svg { width: 30px; height: 30px; }
  .marque-nom { font-size: 1.24rem; white-space: nowrap; }
  .marque-sub { font-size: .52rem; letter-spacing: .16em; white-space: nowrap; }
  .topbar-inner { gap: .7rem; padding-inline: 1rem; }
  .topbar-inner .btn { padding: .68rem 1.1rem; font-size: .86rem; }
}

/* ============================ 6. BOUTONS ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.7rem;
  font-family: var(--font-corps); font-size: .95rem; font-weight: 500;
  letter-spacing: .06em;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:active { transform: translateY(1px); }

/* CTA principal : le lettrage rétroéclairé de la devanture.
   Texte --bg sur --gold = 7.93:1 (AA largement). */
.btn-or {
  background: linear-gradient(160deg, #F0C671, #D9A441 55%, #B98A2E);
  color: var(--sur-or);
  box-shadow: var(--halo-or);
  font-weight: 600;
}
.btn-or:hover { box-shadow: var(--halo-fort); color: var(--sur-or); }

.btn-fantome {
  background: transparent; color: var(--gold);
  border-color: var(--gold);
}
.btn-fantome:hover { background: rgba(217,164,65,.10); color: var(--gold-soft); border-color: var(--gold-soft); }

.btn-discret {
  background: var(--bg-3); color: var(--cream); border-color: var(--line);
}
.btn-discret:hover { background: var(--bg-2); border-color: var(--line-strong); }

.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.btn-bloc { width: 100%; }

/* ============================= 7. HERO ============================= */

.hero {
  position: relative; overflow: hidden;
  min-height: min(78vh, 680px);
  display: grid; place-items: center;
  text-align: center;
  /* Dégradé sombre bas-haut, comme la façade sous la lumière chaude :
     la lumière vient du centre-haut, le bas plonge dans le vert nuit. */
  background:
    radial-gradient(72% 52% at 50% 34%, rgba(255,226,168,.30), transparent 64%),
    radial-gradient(120% 80% at 50% 6%, rgba(232,151,60,.26), transparent 60%),
    radial-gradient(150% 120% at 50% 50%, transparent 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, #12241B 0%, var(--bg-2) 46%, #050D0A 100%);
  padding-block: clamp(4rem, 11vw, 8rem) clamp(5rem, 10vw, 7rem);
}

/* Bordure ajourée façon moucharabieh, en haut et en bas du hero.
   C'est le claustra rétroéclairé du soubassement de la devanture. */
.hero::before, .hero::after {
  content: ''; position: absolute; left: 0; right: 0; height: 54px;
  background-image: url('/assets/img/moucharabieh.svg');
  background-repeat: repeat-x; background-size: auto 54px;
  opacity: .5; pointer-events: none;
}
.hero::before { top: 0; }
.hero::after  { bottom: 0; transform: scaleY(-1); }

.hero-contenu { position: relative; z-index: 2; max-width: 800px; padding-inline: var(--gouttiere); }

.hero-rosaces { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.4rem; }
.hero-rosaces svg { width: 46px; height: 46px; color: var(--gold); opacity: .9; }

/* Le lettrage : dégradé laiton + halo diffus. Le fallback `color` est posé
   AVANT le clip pour que le titre reste lisible si background-clip échoue. */
.hero h1 {
  color: var(--gold-soft);
  margin-bottom: .3rem;
  filter: drop-shadow(0 0 26px rgba(217,164,65,.42)) drop-shadow(0 0 60px rgba(232,151,60,.20));
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 {
    background: linear-gradient(178deg, #FBEDC9 6%, var(--gold-soft) 34%, var(--gold) 68%, #B98A2E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

.hero .accroche {
  font-family: var(--font-corps);
  font-size: clamp(.82rem, 1.9vw, 1rem); font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .2rem;
}
.hero .sous-accroche {
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.6rem;
}
.hero .intro {
  font-size: clamp(1rem, 2.1vw, 1.15rem); color: var(--cream-2);
  max-width: 54ch; margin-inline: auto; margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ========================== 8. ARGUMENTS =========================== */

.grille-args {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.arg {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 1.6rem 1.4rem;
  text-align: center;
}
.arg svg { width: 34px; height: 34px; color: var(--gold); margin: 0 auto .9rem; }
.arg h3 { font-size: 1.2rem; color: var(--cream); margin-bottom: .35rem; }
.arg p  { color: var(--muted); font-size: .92rem; margin: 0; }

/* ======================= 9. CARTES PRODUIT ========================= */

.grille-produits {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.produit {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: 1.35rem 1.35rem 1.2rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.produit:hover {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
}

/* Vignette de remplacement : aplat + rosace. AUCUNE photo de stock.
   Les vraies photos sont listées dans visuels-a-fournir/README.md. */
.produit-vignette {
  aspect-ratio: 16 / 10; border-radius: var(--r-s);
  margin: -.35rem -.35rem 1rem;
  background:
    radial-gradient(90% 70% at 50% 12%, rgba(232,151,60,.20), transparent 62%),
    linear-gradient(160deg, var(--bg-3), var(--bg));
  border: 1px solid var(--border);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.produit-vignette svg { width: 54px; height: 54px; color: var(--gold); opacity: .5; }

.produit-entete { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .35rem; }
.produit h3 {
  font-size: 1.32rem; margin: 0; color: var(--cream); flex: 1;
  font-weight: 600;
}
.produit .prix {
  font-family: var(--font-titre); font-size: 1.28rem; font-weight: 600;
  color: var(--gold); white-space: nowrap;
}
.produit .desc { font-size: .9rem; color: var(--muted); margin: 0 0 1rem; flex: 1; }
.produit .produit-actions { display: flex; gap: .6rem; align-items: center; }
.produit .produit-actions .btn { flex: 1; padding: .6rem 1rem; font-size: .88rem; }

/* Étiquettes. --terracotta est DÉCORATIF (3.36:1 sur --bg-2, sous AA) : on ne
   pose jamais de texte courant dessus. Ici il ne sert que de LISERÉ, le texte
   est en --amber (6.93:1) ou --gold-soft (11.82:1). */
.etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.etiquette {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--amber); background: rgba(232,151,60,.08);
}
.etiquette--vege  { color: var(--gold-soft); background: rgba(242,217,160,.08); }
.etiquette--terre { color: var(--amber); border-color: var(--terracotta); background: rgba(180,87,31,.14); }
.etiquette--provisoire { color: var(--muted-hi); border-color: var(--line); background: transparent; }

/* Bandeau « tarifs provisoires » du site public. */
.avis-provisoire {
  border: 1px dashed var(--line);
  border-radius: var(--r-s);
  padding: .75rem 1rem;
  color: var(--muted-hi); font-size: .84rem;
  background: rgba(217,164,65,.05);
  margin-bottom: 1.6rem;
}
.avis-provisoire strong { color: var(--gold); font-weight: 500; }

/* ========================== 10. FORMULAIRES ======================== */

.champ { margin-bottom: 1.1rem; }
.champ > label, .legende {
  display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-hi); margin-bottom: .4rem;
}
.champ .aide { font-size: .8rem; color: var(--muted); margin: .35rem 0 0; text-transform: none; letter-spacing: 0; }

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=search], select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);       /* 3.81:1 -> conforme WCAG 1.4.11 */
  border-radius: var(--r-s);
  color: var(--cream);
  padding: .72rem .9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(217,164,65,.24);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 110px; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9A441' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
  padding-right: 2.4rem;
}

fieldset { border: none; margin: 0 0 1.3rem; padding: 0; }

/* Choix (radio / cases) présentés en pastilles cliquables. */
.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix label {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .95rem; cursor: pointer; font-size: .9rem;
  color: var(--cream-2);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.choix label:hover { border-color: var(--gold); color: var(--cream); }
.choix input { accent-color: var(--gold); margin: 0; }
.choix input:checked + span { color: var(--gold-soft); }
.choix label:has(input:checked) { border-color: var(--gold); background: rgba(217,164,65,.12); }
.choix label:has(input:focus-visible) { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.choix .delta { color: var(--gold); font-size: .82rem; }

.case-a-cocher { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--cream-2); }
.case-a-cocher input { margin-top: .3rem; accent-color: var(--gold); flex: none; }

/* ======================= 11. PANIER / COMMANDE ===================== */

.commander-grille {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr) 370px;
  align-items: start;
}
@media (max-width: 980px) { .commander-grille { grid-template-columns: 1fr; } }

.categorie-bloc { margin-bottom: 3rem; scroll-margin-top: 90px; }
.categorie-bloc > h2 { color: var(--cream); margin-bottom: .2rem; }
.categorie-bloc > .chapo { color: var(--muted); margin-bottom: 1.4rem; font-size: .95rem; }

/* Ancres de catégories, collantes sous la barre. */
.ancres {
  position: sticky; top: 62px; z-index: 20;
  display: flex; gap: .5rem; overflow-x: auto; padding: .8rem 0; margin-bottom: 1.6rem;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.ancres a {
  flex: none; text-decoration: none; font-size: .84rem; letter-spacing: .06em;
  padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--cream-2); white-space: nowrap;
}
.ancres a:hover { border-color: var(--gold); color: var(--gold-soft); }

.panier {
  position: sticky; top: 84px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 1.4rem;
}
.panier h2 { font-size: 1.5rem; margin-bottom: .2rem; }
.panier .panier-vide { color: var(--muted); font-size: .9rem; }

.panier-ligne {
  display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.panier-ligne:last-of-type { border-bottom: none; }
.panier-ligne .nom { font-weight: 500; color: var(--cream); font-size: .95rem; }
.panier-ligne .opts { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); }
.panier-ligne .montant { color: var(--gold); font-family: var(--font-titre); font-size: 1.05rem; font-weight: 600; }
.panier-ligne .qte { display: flex; align-items: center; gap: .45rem; grid-column: 1 / -1; margin-top: .3rem; }
.panier-ligne .qte button {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--cream);
  cursor: pointer; line-height: 1; display: grid; place-items: center;
}
.panier-ligne .qte button:hover { border-color: var(--gold); color: var(--gold-soft); }
.panier-ligne .qte .n { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.panier-ligne .retirer { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .78rem; text-decoration: underline; padding: 0; }
.panier-ligne .retirer:hover { color: var(--amber); }

.panier-totaux { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.panier-totaux .l { display: flex; justify-content: space-between; font-size: .9rem; color: var(--cream-2); margin-bottom: .35rem; }
.panier-totaux .l.total {
  font-family: var(--font-titre); font-size: 1.5rem; font-weight: 600;
  color: var(--gold); margin-top: .6rem;
}
.panier-note { font-size: .78rem; color: var(--muted); margin-top: .9rem; }

/* ====================== 12. MODALE D'OPTIONS ====================== */

.modale {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center; padding: 1rem;
  background: rgba(5,12,9,.78);
}
.modale.est-ouverte { display: grid; }
.modale-boite {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--ombre-carte);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 1.7rem;
}
.modale-boite h3 { color: var(--cream); margin-bottom: .2rem; }
.modale-boite .desc { color: var(--muted-hi); font-size: .9rem; margin-bottom: 1.3rem; }
.modale-pied {
  display: flex; gap: .7rem; align-items: center;
  border-top: 1px solid var(--border); padding-top: 1.1rem; margin-top: 1.1rem;
}
.modale-pied .total-modale {
  font-family: var(--font-titre); font-size: 1.35rem; font-weight: 600; color: var(--gold); margin-right: auto;
}

/* ========================= 13. ALERTES ============================ */

.alerte {
  border-radius: var(--r-s); padding: .85rem 1.1rem; margin-bottom: 1.2rem;
  font-size: .9rem; border: 1px solid;
}
.alerte-ok     { border-color: var(--gold);  color: var(--gold-soft); background: rgba(217,164,65,.10); }
.alerte-erreur { border-color: var(--terracotta); color: var(--amber); background: rgba(180,87,31,.14); }
.alerte-info   { border-color: var(--line);  color: var(--cream-2);   background: var(--bg-2); }
.alerte ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ==================== 14. CONFIRMATION / TEXTES =================== */

.confirmation { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.confirmation .sceau { width: 82px; height: 82px; color: var(--gold); margin: 0 auto 1.4rem; filter: drop-shadow(0 0 22px rgba(217,164,65,.4)); }
.confirmation .ref {
  font-family: var(--font-titre); font-size: 2rem; color: var(--gold-soft);
  letter-spacing: .06em; margin: .4rem 0 1.4rem;
}
.recap {
  text-align: left; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 1.4rem; max-width: 560px; margin: 0 auto 1.8rem;
}
.recap .l { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.recap .l:last-child { border-bottom: none; }
.recap .l.total { color: var(--gold); font-family: var(--font-titre); font-size: 1.35rem; font-weight: 600; border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .8rem; }
.recap .opts { font-size: .78rem; color: var(--muted); }

/* Contenu rédactionnel (CGV, contact, mentions). */
.texte h2 { margin-top: 2.4rem; color: var(--cream); font-size: 1.7rem; }
.texte h3 { margin-top: 1.6rem; color: var(--gold-soft); font-size: 1.25rem; }
.texte p, .texte li { color: var(--cream-2); }
.texte ul { padding-left: 1.2rem; }
.texte li { margin-bottom: .35rem; }
.texte .aconfirmer {
  color: var(--amber); font-weight: 500;
  border-bottom: 1px dotted var(--terracotta);
}

.tableau-infos { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; }
.tableau-infos th, .tableau-infos td {
  text-align: left; padding: .6rem .4rem; border-bottom: 1px solid var(--border); font-size: .92rem;
}
.tableau-infos th { color: var(--muted-hi); font-weight: 400; width: 40%; }
.tableau-infos td { color: var(--cream-2); }

/* ============================ 15. 404 ============================= */

.page-404 { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.page-404 .code {
  font-family: var(--font-titre); font-size: clamp(5rem, 18vw, 10rem);
  color: var(--gold); line-height: 1; margin: 0;
  filter: drop-shadow(0 0 30px rgba(217,164,65,.35));
}

/* =========================== 16. PIED ============================= */

.pied {
  background: var(--bg-2); border-top: 1px solid var(--border);
  padding-block: 3rem 1.5rem; margin-top: 4rem;
}
.pied-grille {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 2rem;
}
.pied h4 {
  font-family: var(--font-corps); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .9rem;
}
.pied a { color: var(--cream-2); text-decoration: none; display: block; padding: .2rem 0; font-size: .92rem; }
.pied a:hover { color: var(--gold-soft); }
.pied p, .pied li { color: var(--muted); font-size: .88rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied .marque-nom { font-size: 1.5rem; }
.pied-bas {
  border-top: 1px solid var(--border); padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .8rem; color: var(--muted);
}
.pied-horaires { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; font-size: .86rem; }
.pied-horaires dt { color: var(--muted-hi); }
.pied-horaires dd { margin: 0; color: var(--cream-2); }

/* ====================== 17. UTILITAIRES =========================== */

.centre { text-align: center; }
.mt-2 { margin-top: 2rem; }
.pile { display: flex; flex-direction: column; gap: 1rem; }
.rangee { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.compteur-panier {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  border-radius: 999px; background: var(--vert); color: #FFF6E2;
  font-size: .72rem; font-weight: 600; padding-inline: .35rem;
}

/* =====================================================================
   18. REVISION ED 19/08 — sable majoritaire, vert minoritaire,
       lettrage d'enseigne, compactage mobile (iPhone)
   ===================================================================== */

/* ---- 18.1 SCOPE VERT : les seules zones vert marocain du site.
        On y REDEFINIT les tokens : tout le CSS existant suit sans etre
        reecrit (texte creme, or clair, filets vert clair). ---- */
.bandeau,
.topbar,
.hero,
.tiroir,
.pied,
.section--vert {
  --bg:        #0D3A2A;
  --bg-2:      #124835;
  --bg-3:      #17573F;
  --gold:      #E7BE68;
  --gold-soft: #F8E3B4;
  --amber:     #F0A551;
  --cream:     #FBF2DE;
  --cream-2:   #E8D8B8;
  --muted:     #BCAB8B;
  --muted-hi:  #C9BA9D;
  --border:    #2A6349;
  --line:      #5C8570;
  --line-strong:#86A995;
  background-color: var(--bg);
  color: var(--cream);
}

/* La section d'accent (ex "lumiere") devient le bloc VERT de la page. */
.section--lumiere { background-image: none; }
.section--lumiere::after { display: none; }
.section--lumiere h1, .section--lumiere h2 { color: var(--gold-soft); }
.section--lumiere h3 { color: var(--gold-soft); }
.section--lumiere p,
.section--lumiere .titre-section .chapo { color: var(--cream-2); }
.section--lumiere .titre-section .sur-titre { color: var(--gold); }
.section--lumiere .separateur { color: var(--gold); }
.section--lumiere .separateur::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.section--lumiere .separateur::after  { background: linear-gradient(270deg, transparent, var(--gold)); }
.section--lumiere a { color: var(--gold); }
.section--lumiere a:hover { color: var(--gold-soft); }
.section--lumiere .arg { background: var(--bg-2); border-color: var(--border); }
.section--lumiere .arg h3 { color: var(--gold-soft); }
.section--lumiere .arg p  { color: var(--cream-2); }
.section--lumiere .arg svg { color: var(--gold); }
.section--lumiere.section--filigrane::before { opacity: .07; filter: none; }
.section--lumiere .btn-or { background: linear-gradient(160deg, #F0C671, #D9A441 55%, #B98A2E); color: var(--sur-or); }
.section--lumiere .btn-discret, .section--lumiere .btn-fantome { color: var(--gold); border-color: var(--gold); background: transparent; }

/* Le hero garde la nuit de la devanture : c'est l'enseigne, pas le fond du site. */
.hero { border-bottom: 3px solid var(--gold); }

/* Corps du site : sable. Les sections "carte" sont la creme. */
body { background: var(--bg); }
.section--carte { background: var(--bg-2); }

/* Filigrane de rosace : sur sable il doit etre sombre, pas clair. */
.section--filigrane::before { opacity: .05; }

/* ---- 18.2 LETTRAGE DE L'ENSEIGNE (Rakkas) : logo, titres, et le mot
        "Commander". Meme graisse, meme chasse, meme halo que la devanture. ---- */
.marque-nom {
  font-family: var(--font-enseigne);
  letter-spacing: .045em;
  font-size: 1.72rem;
}
.hero h1 { letter-spacing: .045em; }
.btn-or, .btn-fantome, .btn-discret {
  font-family: var(--font-enseigne);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .07em;
  padding: .78rem 1.75rem;
}
.produit .produit-actions .btn { font-size: 1.02rem; padding: .5rem 1rem; }
.titre-section .sur-titre { font-family: var(--font-corps); }

/* Sur sable, le CTA fantome doit rester lisible : or profond sur creme. */
.btn-fantome { color: var(--gold); border-color: var(--gold); }
.btn-fantome:hover { background: rgba(156,107,18,.10); color: var(--gold-soft); border-color: var(--gold-soft); }
.btn-discret { background: var(--bg-3); color: var(--cream); border-color: var(--line); }

/* Le halo dore n'a de sens que sur fond sombre : on le coupe sur sable. */
.btn-or { box-shadow: 0 2px 4px rgba(51,34,14,.20), 0 10px 26px rgba(51,34,14,.16); }
.hero .btn-or, .section--lumiere .btn-or { box-shadow: var(--halo-or); }
.page-404 .code { filter: none; }
.confirmation .sceau { filter: none; }

/* ---- 18.3 MOBILE (iPhone) : les 5 couscous doivent tenir SUR UN ECRAN.
        La carte passe en format liste : vignette carree a gauche,
        nom + prix + 2 lignes de description + bouton a droite. ---- */
@media (max-width: 700px) {
  .grille-produits { grid-template-columns: 1fr; gap: .65rem; }

  .produit {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: .9rem;
    row-gap: .15rem;
    align-items: start;
    padding: .8rem;
  }
  .produit > * { grid-column: 2; min-width: 0; }
  .produit-vignette {
    grid-column: 1; grid-row: 1 / span 4;
    width: 84px; height: 84px; aspect-ratio: 1 / 1;
    margin: 0; align-self: start;
  }
  .produit-vignette svg { width: 34px; height: 34px; }
  .produit-entete { margin-bottom: .1rem; gap: .5rem; }
  .produit h3 { font-size: 1.12rem; }
  .produit .prix { font-size: 1.08rem; }
  .produit .desc {
    font-size: .84rem; margin: 0 0 .5rem; flex: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .produit .produit-actions .btn { flex: 0 0 auto; padding: .42rem 1.1rem; font-size: .95rem; }
  .etiquettes { margin-bottom: .25rem; }
  .etiquette { font-size: .66rem; padding: .1rem .45rem; }

  /* Le reste de la page se resserre aussi : plus de scroll interminable. */
  .section { padding-block: clamp(2.2rem, 7vw, 3.2rem); }
  .titre-section { margin-bottom: 1.4rem; }
  .grille-args { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .arg { padding: 1rem .8rem; }
  .arg svg { width: 26px; height: 26px; margin-bottom: .5rem; }
  .arg h3 { font-size: 1.02rem; }
  .arg p { font-size: .82rem; }
  .hero { min-height: auto; padding-block: 3.2rem 3rem; }
  .hero .intro { font-size: .98rem; margin-bottom: 1.4rem; }
  .hero-rosaces svg { width: 34px; height: 34px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .pied { margin-top: 2.4rem; padding-block: 2rem 1.2rem; }
  .pied-grille { gap: 1.4rem; }
}

/* Tres petits ecrans (iPhone SE / mini) : on empile le bouton sous le texte. */
@media (max-width: 380px) {
  .produit { grid-template-columns: 70px minmax(0, 1fr); }
  .produit-vignette { width: 70px; height: 70px; }
  .grille-args { grid-template-columns: 1fr; }
}

/* ---- 18.4 SECTION D'ACCENT CLAIRE (.section--lumiere) : elle reste du cote
        SABLE. Bande miel/ocre, titres or profond, texte brun. Le vert n'est
        garde que pour le bandeau, l'en-tete, le hero, le tiroir et le pied. ---- */
.section--lumiere {
  background: linear-gradient(180deg, #FBEFD6 0%, #F2DFB4 52%, #EBD3A0 100%);
  color: var(--cream);
  border-block: 1px solid var(--border);
}
.section--lumiere h1, .section--lumiere h2, .section--lumiere h3 { color: #6E4A0C; }
.section--lumiere p, .section--lumiere .titre-section .chapo { color: var(--brun-2); }
.section--lumiere .titre-section .sur-titre { color: #8A5A1E; }
.section--lumiere .separateur { color: #8A5A1E; }
.section--lumiere a { color: var(--gold); }
.section--lumiere a:hover { color: #6E4A0C; }
.section--lumiere .arg {
  background: rgba(255,252,244,.72);
  border: 1px solid #E0C99C;
}
.section--lumiere .arg h3 { color: #6E4A0C; }
.section--lumiere .arg p  { color: var(--brun-2); }
.section--lumiere .arg svg { color: #A9741A; }
.section--lumiere .btn-fantome, .section--lumiere .btn-discret { color: #6E4A0C; border-color: #A9741A; background: transparent; }
.section--lumiere .btn-or { box-shadow: 0 2px 4px rgba(51,34,14,.20), 0 10px 26px rgba(51,34,14,.16); }

/* Lettrage d'enseigne : graisse un cran au-dessus, Marhey est plus legere. */
.marque-nom, .hero h1 { font-weight: 600; }
.btn-or, .btn-fantome, .btn-discret { font-weight: 600; }

/* ---- 18.5 Le hero garde la nuit de la devanture mais laisse la place au
        sable : moins haut, et fondu vers le sable en bas de section. ---- */
.hero { min-height: min(58vh, 540px); padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 7vw, 5rem); }
.hero::after { bottom: 0; }
@media (max-width: 700px) { .hero { min-height: auto; } }

/* ---- 18.6 GARDE-FOUS ANTI-DEBORDEMENT (mobile). Aucun bloc ne doit
        depasser la largeur de l'ecran : c'est ce qui coupait les textes
        et les cartes sur iPhone. ---- */
main, .wrap, .section, .commander-grille, .commander-grille > *,
.panier, .categorie-bloc, .grille-produits, .grille-args, .pied-grille {
  min-width: 0; max-width: 100%;
}
.produit, .arg, .panier-ligne, .modale-boite { min-width: 0; }
.produit h3, .produit .desc, .panier-ligne .nom, .categorie-bloc > h2 { overflow-wrap: break-word; }
.produit-entete { flex-wrap: wrap; }

/* Carte SANS vignette (page Commander) : pas de colonne d'image vide. */
@media (max-width: 700px) {
  .produit:not(:has(.produit-vignette)) { grid-template-columns: minmax(0, 1fr); }
  .produit:not(:has(.produit-vignette)) > * { grid-column: 1; }
  .ancres { margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere); }
  .ancres a { flex: none; }
}

/* =====================================================================
   19. REVISION ED — 19/08/2026 (matin)
   Trois reproches, trois corrections :
   19.1  L'en-tete debordait de 47 px sur iPhone (437 px de contenu pour
         390 px d'ecran) : c'est CA qui coupait tout le reste a droite.
   19.2  Le sable doit dominer : le hero passe du vert nuit au sable dore,
         le vert marocain ne reste qu'en bandeau, en-tete, pied et accents.
   19.3  Les couscous s'empilaient sur trois ecrans : ils passent en
         tuiles, deux par ligne sur telephone, trois sur grand ecran.
   ===================================================================== */

/* ---- 19.1 EN-TETE : plus aucun debordement horizontal ---- */
html, body { overflow-x: clip; }

@media (max-width: 560px) {
  .topbar-inner { gap: .55rem; padding-inline: .85rem; }
  .marque { gap: .45rem; }
  .marque svg { width: 26px; height: 26px; }
  .marque-nom { font-size: 1.1rem; letter-spacing: .02em; }
  .marque-sub { font-size: .46rem; letter-spacing: .12em; }
  .topbar-inner .btn { padding: .45rem .9rem; font-size: .95rem; letter-spacing: .02em; }
  .burger { padding: .35rem; }
  .burger svg { width: 20px; height: 20px; }
}
@media (max-width: 400px) { .marque-sub { display: none; } }

/* ---- 19.2 HERO SABLE DORE. Le lettrage passe en vert marocain : c'est
        l'enseigne inversee (or sur vert dehors, vert sur sable ici), et
        ca rend au vert son role d'accent. ---- */
.hero {
  background:
    radial-gradient(78% 58% at 50% 2%,  rgba(255,209,126,.55), transparent 64%),
    radial-gradient(120% 90% at 50% 108%, rgba(156,107,18,.18), transparent 62%),
    linear-gradient(180deg, #FDF4E2 0%, #F6E4BB 46%, #EFD4A0 100%);
  border-bottom: 3px solid var(--gold);
}
.hero::before { display: none; }              /* plus de bande sous l'en-tete */
.hero::after {                                 /* fronton : bande verte, motif or */
  bottom: 0; height: 30px; background-size: auto 30px;
  background-color: var(--vert); opacity: 1; transform: none;
}
.hero h1 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--vert);
  filter: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.hero .accroche      { color: #8A5A1E; }
.hero .sous-accroche { color: var(--muted-hi); }
.hero .intro         { color: var(--brun-2); }
.hero-rosaces svg    { color: var(--gold); opacity: .85; }
.hero .btn-or     { box-shadow: 0 2px 4px rgba(51,34,14,.20), 0 12px 28px rgba(51,34,14,.18); }
.hero .btn-fantome { color: var(--vert); border-color: var(--vert-2); }
.hero .btn-fantome:hover { background: rgba(13,58,42,.08); color: var(--vert); }
@media (max-width: 700px) { .hero::after { height: 22px; background-size: auto 22px; } }

/* ---- 19.3 LES COUSCOUS : des tuiles qui se rangent les unes a cote des
        autres, au lieu d'une colonne interminable. ---- */
@media (min-width: 1000px) {
  .grille-produits:has(.produit-vignette) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .grille-produits:has(.produit-vignette) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }
  .grille-produits:has(.produit-vignette) .produit {
    display: flex; flex-direction: column;
    padding: .5rem .5rem .65rem;
  }
  .grille-produits:has(.produit-vignette) .produit > * { grid-column: auto; }
  .grille-produits:has(.produit-vignette) .produit-vignette {
    width: auto; height: auto; aspect-ratio: 4 / 3;
    margin: 0 0 .5rem; grid-row: auto; grid-column: auto;
  }
  .grille-produits:has(.produit-vignette) .produit-vignette svg { width: 40px; height: 40px; }
  .grille-produits:has(.produit-vignette) .produit-entete {
    flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: .2rem;
  }
  .grille-produits:has(.produit-vignette) .produit h3   { font-size: 1rem; line-height: 1.2; }
  .grille-produits:has(.produit-vignette) .produit .prix { font-size: 1rem; }
  .grille-produits:has(.produit-vignette) .produit .desc {
    font-size: .78rem; line-height: 1.35; margin: 0 0 .55rem; flex: 1;
    -webkit-line-clamp: 3;
  }
  .grille-produits:has(.produit-vignette) .produit-actions { margin-top: auto; }
  .grille-produits:has(.produit-vignette) .produit-actions .btn {
    flex: 1 1 auto; width: 100%; padding: .42rem .4rem; font-size: .92rem;
  }
  .grille-produits:has(.produit-vignette) .etiquette { font-size: .58rem; letter-spacing: .1em; padding: .1rem .4rem; }
}
@media (max-width: 380px) {
  .grille-produits:has(.produit-vignette) .produit { padding: .45rem .45rem .55rem; }
  .grille-produits:has(.produit-vignette) .produit h3 { font-size: .94rem; }
}

/* ---- 19.4 Finitions : la sous-accroche etait trop pale sur sable, et les
        vignettes d'attente ressemblaient a des images manquantes. En
        l'absence de photos, elles deviennent un motif assume (zellige). ---- */
.hero .sous-accroche { color: #8A5A1E; }

.produit-vignette {
  background:
    radial-gradient(85% 70% at 50% 8%, rgba(255,214,138,.55), transparent 66%),
    linear-gradient(160deg, #F7E6C2 0%, #EBD2A0 55%, #E2C387 100%);
  border: 1px solid #DCC194;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.produit-vignette::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('/assets/img/moucharabieh.svg');
  background-repeat: repeat; background-size: auto 46px;
  opacity: .20;
}
.produit-vignette svg { width: 64px; height: 64px; opacity: .75; position: relative; }
@media (max-width: 700px) {
  .grille-produits:has(.produit-vignette) .produit-vignette svg { width: 44px; height: 44px; }
  .produit-vignette::before { background-size: auto 34px; }
}

/* =====================================================================
   20. REVISION ED — 19/08/2026 (09h20)
   Trois demandes :
   20.1  La police de l'enseigne doit ressembler DAVANTAGE a la photo.
         Comparaison de 18 fontes en rendu or-sur-vert contre un
         agrandissement du fronton (_preuves/fontes/compare2.png) :
         c'est UNCIAL ANTIQUA qui a le squelette du lettrage -- le C a la
         meme volute de tete, le "e" et le "m" sont des onciales, et
         "la-bas" a le meme rythme. Marhey (geometrique, sans contraste,
         sans attaque en pointe) reste en 2e position dans la pile.
   20.2  Le sable doit tirer plus sur le DORE.
   20.3  Et il ne doit plus etre PLAT : relief, degrades, matiere.
   ===================================================================== */

/* ---- 20.1 UNCIAL ANTIQUA — le lettrage du fronton. SIL OFL (Astigmatic),
        licence jointe OFL-UncialAntiqua.txt. Self-hoste, 2 fichiers, 30 Ko. */
@font-face { font-family:'Uncial Antiqua'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/uncial-antiqua-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Uncial Antiqua'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/uncial-antiqua-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --font-enseigne: 'Uncial Antiqua', 'Marhey', 'Rakkas', 'Cormorant Garamond', Georgia, serif;

  /* ---- 20.2 SABLE PLUS DORE (teinte 41, saturation remontee de 57 a 63 %) ---- */
  --bg:      #EFDCB0;   /* sable dore, fond general        */
  --bg-2:    #FBF3DE;   /* creme doree, cartes et sections */
  --bg-3:    #E3C88F;   /* sable profond, creux et reliefs */
  --border:  #DCC089;
  --line:    #BC9A55;
  --muted:   #59462A;   /* assombri : AA tenu sur sable (4.65:1) */

  /* Reliefs reutilisables */
  --relief-haut:  inset 0 1px 0 rgba(255,252,242,.85);
  --relief-bas:   inset 0 -1px 0 rgba(120,84,28,.10);
  --ombre-douce:  0 1px 2px rgba(96,66,20,.10), 0 6px 18px rgba(96,66,20,.10);
  --ombre-levee:  0 2px 6px rgba(96,66,20,.14), 0 18px 40px rgba(96,66,20,.18);
}

/* ---- 20.3 LE FOND N'EST PLUS UN APLAT ----------------------------------
        Quatre couches fixes : un grain de papier (bruit fractal SVG, mele en
        soft-light), une lumiere chaude en haut, un creux dore en bas, et un
        degrade vertical sable clair -> sable profond. Rien d'anime ici. */
body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"),
    radial-gradient(120% 60% at 50% 0%,   rgba(255,240,205,.85), transparent 62%),
    radial-gradient(100% 55% at 50% 100%, rgba(176,128,38,.16), transparent 66%),
    linear-gradient(180deg, #F6E7C2 0%, #EFDCB0 42%, #E8D2A0 100%);
  background-size: 180px 180px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
  background-blend-mode: soft-light, normal, normal, normal;
}

/* Les sections claires deviennent des NAPPES : filet de lumiere en haut,
   ombre interieure en bas. Elles se detachent du fond au lieu de s'y fondre. */
.section--carte {
  background-image: linear-gradient(180deg, #FDF7E8 0%, var(--bg-2) 45%, #F4E6C6 100%);
  box-shadow: var(--relief-haut), var(--relief-bas);
  border-top: 1px solid rgba(255,255,255,.6);
  border-bottom: 1px solid var(--border);
}

/* ---- Les cartes : biseau clair en haut, ombre chaude portee ---- */
.produit, .carte-info, .bloc-form, .panier, .recap, .encart {
  background-image: linear-gradient(180deg, #FEF9EC 0%, var(--bg-2) 52%, #F3E3C0 100%);
  box-shadow: var(--relief-haut), var(--ombre-douce);
}
.produit:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--relief-haut), var(--ombre-levee);
}
.produit .prix { text-shadow: 0 1px 0 rgba(255,255,255,.7); }

/* ---- Les boutons : de l'or bombe, pas un aplat ---- */
.btn-or {
  background-image: linear-gradient(180deg, #FBDD95 0%, #E7B75A 38%, #D09B36 72%, #B8842A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,250,229,.9),
    inset 0 -1px 0 rgba(103,66,12,.35),
    0 1px 2px rgba(96,66,20,.22),
    0 8px 20px rgba(96,66,20,.20);
  text-shadow: 0 1px 0 rgba(255,246,222,.45);
}
.btn-or:hover {
  background-image: linear-gradient(180deg, #FFE7AC 0%, #EFC469 38%, #D8A63D 72%, #C08D2C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.95),
    inset 0 -1px 0 rgba(103,66,12,.35),
    0 2px 4px rgba(96,66,20,.24),
    0 14px 30px rgba(96,66,20,.26);
}
.hero .btn-or, .section--lumiere .btn-or {
  box-shadow:
    inset 0 1px 0 rgba(255,250,229,.9),
    inset 0 -1px 0 rgba(103,66,12,.35),
    0 2px 4px rgba(96,66,20,.22),
    0 10px 26px rgba(96,66,20,.22),
    0 0 26px rgba(224,172,66,.35);
}
.btn-discret {
  background-image: linear-gradient(180deg, #F2DFB2 0%, var(--bg-3) 100%);
  box-shadow: var(--relief-haut), 0 1px 2px rgba(96,66,20,.14);
}

/* Les champs sont CREUX (l'inverse du bouton) : c'est ce qui fait le relief. */
input, select, textarea {
  background-image: linear-gradient(180deg, #F7EBCF 0%, #FDF7E8 22%);
  box-shadow: inset 0 2px 4px rgba(120,84,28,.13), inset 0 -1px 0 rgba(255,255,255,.7);
}

/* ---- Le vert n'est plus plat non plus : en-tete et pied prennent du volume,
        avec un filet d'or en frontiere, comme le cadre de la devanture. On
        n'ajoute PAS de surface verte, seulement de la profondeur. ---- */
.topbar, .site-pied, .bandeau, .section--vert {
  background-image: linear-gradient(180deg, #14503A 0%, var(--vert) 55%, #08281C 100%);
}
.topbar { box-shadow: inset 0 -1px 0 rgba(217,164,65,.45), 0 2px 14px rgba(40,26,8,.22); }
.site-pied { box-shadow: inset 0 1px 0 rgba(217,164,65,.45); }

/* ---- Le hero : plus dore, et une lumiere qui RESPIRE (12 s, coupee si
        l'utilisateur a demande moins d'animation). ---- */
.hero {
  background-image:
    radial-gradient(78% 58% at 50% 0%,    rgba(255,205,116,.62), transparent 64%),
    radial-gradient(120% 90% at 50% 108%, rgba(160,110,20,.22), transparent 62%),
    linear-gradient(180deg, #FDF3DC 0%, #F5E1B2 46%, #EDD096 100%);
}
.hero::before {
  display: block; content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 40% at 50% 8%, rgba(255,236,190,.75), transparent 70%);
  animation: souffle-or 12s ease-in-out infinite alternate;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
@keyframes souffle-or { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; opacity: .7; } }

.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 14px rgba(160,110,20,.18); }

/* ---- 20.1bis Uncial Antiqua a une chasse PLUS LARGE que Marhey : on
        resserre pour que l'en-tete ne reparte pas en debordement sur
        iPhone (verifie a 390 px : scrollWidth == clientWidth). ---- */
.marque-nom { letter-spacing: .015em; font-size: 1.56rem; }
.btn-or, .btn-fantome, .btn-discret { font-size: 1.04rem; letter-spacing: .04em; }
.produit .produit-actions .btn { font-size: .96rem; letter-spacing: .02em; }
h1 { letter-spacing: .008em; }
.hero h1 { letter-spacing: .01em; }
@media (max-width: 560px) {
  .marque-nom { font-size: .98rem; letter-spacing: 0; }
  .topbar-inner .btn { font-size: .86rem; letter-spacing: 0; padding: .45rem .8rem; }
}
@media (max-width: 700px) {
  .grille-produits:has(.produit-vignette) .produit-actions .btn { font-size: .86rem; letter-spacing: 0; }
}

/* ---- 20.1ter Uncial Antiqua n'existe qu'en graisse 400. Les titres et les
        boutons demandaient du 600 : le navigateur FABRIQUAIT le gras en
        epaississant les traits, ce qui ecrasait justement les attaques en
        pointe qui font ressembler la lettre a l'enseigne. On coupe la
        synthese et on impose la graisse reelle. ---- */
.marque-nom, h1, h2, .hero h1,
.btn-or, .btn-fantome, .btn-discret,
.topbar-inner .btn, .produit .produit-actions .btn {
  font-weight: 400 !important;
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* ---- 20.4 Sur telephone, les deux boutons de la carte produit etaient cote
        a cote dans 157 px : "Voir la fiche" se cassait sur trois lignes. Ils
        s'empilent, chacun sur une seule ligne. ---- */
@media (max-width: 700px) {
  .grille-produits:has(.produit-vignette) .produit-actions {
    flex-direction: column; align-items: stretch; gap: .35rem;
  }
  .grille-produits:has(.produit-vignette) .produit-actions .btn {
    width: 100%; white-space: nowrap; font-size: .8rem; padding: .42rem .3rem;
  }
}

/* =====================================================================
   21. FICHES D'ÉLÉMENTS DE MENU — révision Ed 19/08/2026
   « Au niveau des éléments de menus, on travaille en fiche. »
   Un plat = une page : visuel, récit, composition, allergènes, portions,
   options, passage à la commande, et les voisins de sa catégorie.
   Le fond, la palette et le lettrage sont traités en section 20 : rien
   n'est redéfini ici.
   ===================================================================== */

/* ============================ 20.4 LA FICHE ============================
   Un élément de menu = une page. Deux colonnes au-dessus de 900 px
   (visuel collant à gauche, contenu à droite), une seule en dessous. */

.fil-ariane {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-size: .82rem; color: var(--muted-hi); margin-bottom: 1.4rem;
}
.fil-ariane a { color: var(--gold-soft); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.fiche, .fiche-conseil { box-shadow: var(--relief-haut), var(--ombre-douce); }
.fiche {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid var(--border); border-radius: var(--r-l);
  padding: clamp(1.1rem, 3vw, 2.2rem);
  position: relative;
}
.fiche::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,138,46,.55), transparent);
}
.fiche-visuel { position: sticky; top: 92px; align-self: start; }
.fiche-vignette { aspect-ratio: 4 / 3; margin: 0 0 .8rem; }
.fiche-vignette svg { width: 96px; height: 96px; }

.fiche-corps .sur-titre {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: #8A5A1E; margin: 0;
}
.fiche-prix {
  font-family: var(--font-titre); font-size: 1.7rem; font-weight: 600;
  color: var(--gold); margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.fiche-chapo { font-size: 1.05rem; color: var(--cream-2); margin: 0 0 1.2rem; }
.fiche-recit p { color: var(--brun-2); margin: 0 0 .9rem; }

.fiche-bloc {
  border-top: 1px solid rgba(160,124,58,.28);
  padding-top: 1rem; margin-top: 1rem;
}
.fiche-bloc h2 {
  font-family: var(--font-corps); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #8A5A1E;
  margin: 0 0 .5rem;
}
.fiche-bloc p { margin: 0 0 .4rem; color: var(--brun-2); font-size: .95rem; }
.fiche-bloc--allergenes p:first-of-type { font-weight: 500; color: var(--cream); }

.fiche-liste { list-style: none; margin: 0; padding: 0; }
.fiche-liste li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px dashed rgba(160,124,58,.30);
  font-size: .95rem;
}
.fiche-liste li:last-child { border-bottom: 0; }
.fiche-liste .prix { color: var(--gold); font-family: var(--font-titre); font-weight: 600; }

.fiche-option { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .8rem; }
.fiche-option-items { font-size: .9rem; color: var(--muted-hi); }
.fiche-note { font-size: .82rem; color: var(--muted); font-style: italic; }
.fiche-note--bandeau {
  margin-top: 1rem; padding: .6rem .9rem;
  border: 1px dashed var(--line); border-radius: var(--r-s);
  font-style: normal; color: var(--muted-hi);
}

.fiche-conseil {
  display: flex; align-items: center; gap: .7rem;
  margin: 1.3rem 0 0; padding: .85rem 1rem;
  border-radius: var(--r-m);
  background: linear-gradient(160deg, rgba(255,232,180,.75), rgba(240,214,160,.45));
  border: 1px solid rgba(184,138,46,.35);
  box-shadow: 0 1px 0 rgba(255,252,244,.8) inset;
  font-size: .93rem; color: var(--brun);
}
.fiche-conseil svg { flex: 0 0 auto; color: var(--gold); opacity: .8; }

.fiche-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.fiche-actions .btn { flex: 1 1 190px; }

/* La tuile entière ouvre la fiche : le lien enveloppe le visuel, le titre et
   le résumé, sans rendre les boutons d'action cliquables deux fois. */
.produit-lien { display: block; color: inherit; text-decoration: none; }
.produit-lien:hover h3 { color: var(--gold-soft); }
.produit-lien:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-s); }

@media (max-width: 900px) {
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche-visuel { position: static; }
}
@media (max-width: 700px) {
  .fiche-vignette svg { width: 72px; height: 72px; }
}

/* --- Photos de plats (vignettes & fiche) ------------------------------- */
.produit-vignette.a-photo { background: var(--bg-3); }
.produit-vignette.a-photo picture,
.produit-vignette.a-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.produit-vignette.a-photo::after {          /* voile chaud : la photo entre dans la charte */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(13,58,44,.10));
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.28);
  border-radius: inherit;
}
.fiche-vignette.a-photo { aspect-ratio: 1 / 1; }

/* ==========================================================================
   BANDEAU D'APERÇU — visible seulement quand le mode « ouverture prochaine »
   est actif ET que la session a levé le rideau. Il évite la méprise la plus
   coûteuse : croire le site public alors qu'il ne l'est pas.
   ========================================================================== */
.vitrine-bandeau {
  background: #93401A;
  color: #FBF3DE;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .9rem;
}
.vitrine-bandeau-form { display: inline; margin: 0; }
.vitrine-bandeau-form button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #F2D9A0;
  text-decoration: underline;
  cursor: pointer;
}
.vitrine-bandeau-form button:hover { color: #fff; }

/* ====================== 19. LOGO (plat de couscous) ======================
   Le logo est la MARQUE : il se pose devant le nom « Comme là-bas ». La
   taille d'affichage vient du gabarit via la variable inline --logo-taille,
   pour qu'un seul fichier serve la barre du haut (54 px), le pied de page
   (48 px) et la page d'attente (120 px) sans dupliquer de regles.
   `picture` est mis en `contents` : il disparait de la mise en page et c'est
   l'image qui reste l'element flex — sinon l'alignement de la marque casse. */

.marque-logo-wrap { display: contents; }

.marque-logo {
  width: var(--logo-taille, 52px);
  height: var(--logo-taille, 52px);
  flex: none;
  object-fit: contain;
  /* Le plat est sombre : sur la nuit de la barre, un halo chaud le decolle
     du fond, sans quoi le vert du plat se fond dans le vert du bandeau. */
  filter: drop-shadow(0 2px 10px rgba(217,164,65,.30));
}

/* En bloc centre (page d'attente, page d'acces, connexion admin). */
.logo-bloc { display: block; margin-inline: auto; }

.vitrine-logo { margin-bottom: 1rem; }

@media (max-width: 860px) {
  /* Barre du haut : le logo cede un peu de place au nom, qui doit rester
     sur une seule ligne. */
  .topbar .marque-logo { width: 42px; height: 42px; }
}

/* =====================================================================
   19. /COMMANDER — LA PAGE UNIQUE « CARTE + COMMANDE »
   Refonte Ed, 23/08/2026. Contexte donné par Ed : local parisien, clientèle
   sur-sollicitée, un concurrent à chaque coin de rue. La page doit VENDRE en
   un coup d'œil : haut de page réduit à une ligne, rayons balayables collés
   en haut, et des FICHES DE CARTE dominées par la photo, deux par ligne.
   Logique et niveau de finition calqués sur www.byzance31.fr (.cmd-tabs /
   .cmd-grid / .cmd-tile) ; la CHARTE reste celle de Comme là-bas : sable,
   vert profond, or, rosace arabisante.
   Section ADDITIVE : aucune règle existante n'est modifiée (les anciennes
   .grille-produits / .produit servent encore à /produit et à l'accueil).
   ===================================================================== */

/* --- Haut de page : on ne dépense plus un écran en préambule -----------
   Mesuré au Chrome headless en 390x844 AVANT la refonte : le premier plat
   commençait à 726 px du haut, photo hors écran. La règle ci-dessous
   comprime le padding de section sur la seule page /commander. */
.section--commander { padding-block: 1rem 3.5rem; }

.accroche-commander {
  margin: 0 0 .75rem;
  color: var(--muted-hi);
  font-size: .95rem;
  line-height: 1.35;
}

/* --- RAYONS : une seule ligne, on balaie latéralement, collée sous la barre --
   Transposition de .carte-tabs.cmd-tabs (Byzance). Ce sont de vraies ancres :
   sans JavaScript la navigation par rayon fonctionne toujours. */
.rayons {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: nowrap;
  gap: .4rem;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: .5rem 0;
  margin: 0 0 .9rem;
  /* Fond OPAQUE : le contenu ne doit pas transparaître sous la barre collée. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* Barre de défilement masquée (Firefox / IE / WebKit). */
  scrollbar-width: none; -ms-overflow-style: none;
}
.rayons::-webkit-scrollbar { width: 0; height: 0; display: none; }

.rayons a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  text-decoration: none;
  padding: .42rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--cream-2);
  font-size: .84rem; letter-spacing: .04em;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.rayons a:hover { border-color: var(--gold); color: var(--gold-soft); }
/* Rayon courant : posé par le scrollspy de commander.js. */
.rayons a.est-courant {
  background: var(--vert); border-color: var(--vert);
  color: #FFF6E2; font-weight: 500;
}
/* Indicateur « ça continue à droite » : un fondu collé au bord droit qui
   occupe sa propre place en fin de liste — arrivé au bout, il ne recouvre
   donc plus le dernier rayon. */
.rayons::after {
  content: ""; position: sticky; right: 0;
  flex: 0 0 22px; align-self: stretch; pointer-events: none;
  background: linear-gradient(to right, rgba(239,220,178,0), var(--bg));
}

/* Le bloc de rayons est collé en haut : sans marge de défilement, l'ancre
   d'une catégorie passerait DERRIÈRE lui. */
.page-commander .categorie-bloc { margin-bottom: 1.8rem; scroll-margin-top: 118px; }
.page-commander .categorie-bloc > h2 { font-size: 1.5rem; margin-bottom: .1rem; }
.page-commander .categorie-bloc > .chapo { margin-bottom: .8rem; font-size: .9rem; }

/* --- LA GRILLE : DEUX PAR LIGNE, mobile ET desktop --------------------
   Demande explicite d'Ed (et critère de recette). Byzance passe à 3 puis 4
   colonnes sur grand écran ; ici la colonne catalogue partage la largeur avec
   le panier collé, donc deux fiches larges rendent la photo plus vendeuse
   qu'une mosaïque de vignettes. */
.grille-plats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
@media (min-width: 700px) { .grille-plats { gap: 1.1rem; } }

/* --- LA FICHE : c'est un <form>, donc la photo ET le bouton « + » sont
       deux submit du même formulaire : toucher la photo ajoute le plat,
       comme sur Byzance, et sans JavaScript. --- */
.plat {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.plat:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.plat:focus-within { border-color: var(--gold); }

/* LA PHOTO DOMINE. 4/3 comme sur Byzance : c'est le format des visuels
   déjà livrés, aucun recadrage destructeur. */
.plat-photo {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0; margin: 0; border: 0;
  background: var(--bg-3);
  overflow: hidden; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.plat-photo picture, .plat-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.plat-photo:active { transform: scale(.995); }
.plat-photo:disabled { cursor: default; }
.plat-photo:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

/* AUCUNE FICHE SANS VISUEL. Un plat sans photo reçoit la tuile de la maison
   (dégradé sable + rosace or), jamais un cadre gris vide. */
.plat-photo-vide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(90% 70% at 50% 14%, rgba(232,151,60,.22), transparent 62%),
    linear-gradient(160deg, var(--bg-3), var(--bg));
}
.plat-photo-vide svg { width: 46%; height: 46%; color: var(--gold); opacity: .38; }

/* Étiquettes posées SUR la photo : elles n'entament plus la hauteur de texte. */
.etiquettes--sur-photo {
  position: absolute; left: .4rem; top: .4rem; right: .4rem;
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin: 0; pointer-events: none;
}
.etiquettes--sur-photo .etiquette {
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(4px);
  font-size: .6rem; padding: .16rem .45rem;
}

.plat-corps {
  display: flex; flex-direction: column; flex: 1;
  gap: .22rem;
  padding: .6rem .65rem .65rem;
  min-width: 0;
}
.plat-nom {
  margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 600;
  color: var(--cream); overflow-wrap: anywhere;
}
.plat-desc {
  margin: 0; font-size: .78rem; line-height: 1.3; color: var(--muted);
  /* Deux lignes maximum : au-delà, la fiche cesse d'être lisible d'un coup
     d'œil et casse l'alignement de la grille. Le détail complet reste sur
     /produit/<slug> et dans la modale de personnalisation. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.plat-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: auto; padding-top: .45rem;
}
.plat-prix {
  font-family: var(--font-titre); font-weight: 600;
  font-size: 1.18rem; color: var(--gold-soft); white-space: nowrap;
}

/* LE BOUTON D'AJOUT : cible tactile de 40 px, or plein, contraste vérifié
   (--sur-or #241705 sur --ocre-2 #D6AC5E = 7,6:1). */
.plat-ajout {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 .5rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: linear-gradient(180deg, var(--ocre), var(--ocre-2));
  color: var(--sur-or); cursor: pointer;
  font-family: var(--font-corps); font-size: .82rem; font-weight: 600;
  letter-spacing: .02em;
  transition: filter var(--transition), transform var(--transition);
}
.plat-ajout .plat-ajout-txt { padding: 0 .35rem; }
.plat-ajout:hover { filter: brightness(1.07); }
.plat-ajout:active { transform: scale(.93); }
.plat-ajout:disabled { opacity: .45; cursor: not-allowed; }
.plat-ajout:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

/* --- Grand écran : le panier est à côté, la colonne catalogue est plus
       étroite. On garde DEUX fiches par ligne (demande d'Ed) : elles
       grandissent, la photo aussi. --- */
@media (min-width: 700px) {
  /* PHOTOS TROP GRANDES — correctif Ed 23/08/2026 (soir).
     Mesure avant : fiche ~470 px de large, donc photo ~345 px de HAUT : un
     seul plat mangeait l ecran. On garde DEUX par ligne (regle d Ed) et on
     reduit par deux voies : colonne catalogue bornee, et photo en 16/10 au
     lieu de 4/3. Cible : photo ~200 px de haut. */
  .page-commander .section--commander > .wrap { max-width: 1060px; }
  /* La barre du haut et le pied suivent la meme laize, sinon le logo
     depasse la colonne du catalogue et le cadrage parait de travers. */
  body:has(.page-commander) .topbar-inner,
  body:has(.page-commander) .pied .wrap { max-width: 1060px; }
  .plat-photo { aspect-ratio: 16 / 10; }
  .plat-corps { padding: .7rem .8rem .75rem; gap: .28rem; }
  .plat-nom   { font-size: 1.05rem; }
  .plat-desc  { font-size: .82rem; }
  .plat-prix  { font-size: 1.18rem; }
  .accroche-commander { font-size: 1.02rem; margin-bottom: 1rem; }
  .page-commander .categorie-bloc > h2 { font-size: 1.9rem; }
}

/* --- Très petit écran : deux par ligne RESTE la règle. On resserre le
       texte plutôt que de repasser à une colonne, sinon on perd la lecture
       « carte » au profit d'une liste administrative. --- */
@media (max-width: 400px) {
  .grille-plats { gap: .55rem; }
  .plat-corps { padding: .5rem .5rem .55rem; }
  .plat-nom  { font-size: .92rem; }
  .plat-desc { font-size: .74rem; }
  .plat-prix { font-size: 1.05rem; }
  .plat-ajout { min-width: 36px; height: 36px; }
}

/* Le tunnel de commande garde un scroll-margin cohérent avec la barre collée. */
.page-commander #tunnel { scroll-margin-top: 118px; }

/* Préférence système « moins d'animations » : on coupe les transformations. */
@media (prefers-reduced-motion: reduce) {
  .plat, .plat-photo, .plat-ajout { transition: none; }
  .plat:hover { transform: none; }
  .plat-photo:active, .plat-ajout:active { transform: none; }
}

/* =====================================================================
   COMMANDER — GRILLE COMPACTE + VUE DÉTAIL AU CLIC   (Ed, 23/08/2026 soir)
   ---------------------------------------------------------------------
   Demande mot pour mot : « Rendre la chose dynamique. Deux produits par
   ligne, et quand un internaute clique sur l'une des fiches ou sur Choisir,
   on bascule sur une photo plus grande. » + « les vignettes sont trop
   grandes, il faut scroller interminablement ».

   RÉFÉRENTIEL MESURÉ (byzance31.fr /commander, Chrome headless 390x844,
   lecture seule, aucune modification de ce site) :
       grid-template-columns : 173px 173px      gap : 12px
       photo  : 171x128, aspect-ratio 4 / 3, object-fit cover
       corps  : padding 12px
       nom    : 18.4px / interligne 19.3        desc : 12.5px, clamp 2
       prix   : 21.6px                          bouton : 40x40
       hauteur de tuile : 262px
   Cible ici : MÊME densité ou meilleure, avec en plus la contrainte d'Ed
   « au moins 4 fiches entières visibles sans aucun scroll en 390x844 ».
   4 fiches = 2 rangées : la tuile doit tomber sous ~230px ET le préambule
   au-dessus de la grille doit rendre les pixels qu'il prenait.

   Section ADDITIVE, posée en fin de feuille : elle surcharge par la cascade,
   aucune règle antérieure n'est réécrite (rollback = supprimer ce bloc).
   ===================================================================== */

/* --- 1. LE HAUT DE PAGE REND SES PIXELS AU CATALOGUE ------------------
   Mesuré avant : la 1re fiche commençait à 358px du haut, donc 2 fiches
   seulement tenaient dans l'écran. Chaque ligne ci-dessous est un gain
   mesuré, pas un réglage d'humeur. */
.section--commander { padding-block: .55rem 3rem; }
.accroche-commander { font-size: .86rem; margin: 0 0 .45rem; line-height: 1.3; }
.rayons { padding: .35rem 0; margin: 0 0 .55rem; }
.rayons a { padding: .3rem .72rem; font-size: .78rem; }
.page-commander .categorie-bloc { margin-bottom: 1.15rem; }
.page-commander .categorie-bloc > h2 { font-size: 1.22rem; margin-bottom: .05rem; }
.page-commander .categorie-bloc > .chapo {
  font-size: .78rem; line-height: 1.3; margin-bottom: .5rem;
  /* Le chapô de rayon ne doit jamais coûter plus de deux lignes : au-delà,
     il repousse la première rangée de plats hors de l'écran. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- 2. LA FICHE : PHOTO, NOM, PRIX, BOUTON. RIEN D'AUTRE. ------------
   La description quitte la vignette (elle coûtait 2 lignes x 18 fiches) et
   part dans la VUE DÉTAIL, qui est justement faite pour ça. Sur grand écran
   la place existe : elle y revient (voir plus bas). */
.plat-desc { display: none; }

.plat-corps { padding: .42rem .5rem .5rem; gap: .12rem; }
.plat-nom {
  font-size: .9rem; line-height: 1.18; font-weight: 600;
  /* DEUX LIGNES MAX AVEC POINTS DE SUSPENSION (demande d'Ed). Sans clamp,
     « Formule couscous + boisson » prend trois lignes et décale le prix
     d'une fiche sur deux. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.plat-pied { padding-top: .3rem; gap: .35rem; }
.plat-prix { font-size: 1.02rem; }
.plat-ajout {
  min-width: 34px; height: 34px; padding: 0 .35rem;
  font-size: .76rem; letter-spacing: 0;
}
.plat-ajout .plat-ajout-txt { padding: 0 .2rem; }
.grille-plats { gap: .55rem; }

/* La photo reste en 4/3, format des visuels livrés : aucun recadrage
   destructeur, et c'est le ratio mesuré chez Byzance. */
.plat-photo { aspect-ratio: 4 / 3; }

/* --- 3. TABLETTE ET DESKTOP : 3 PUIS 4 COLONNES (demande d'Ed) --------
   « 2 colonnes à 390px, 3 à 4 sur tablette/desktop ». La colonne catalogue
   partage la laize avec le panier collé : 3 colonnes à partir de 700px,
   la 4e seulement quand la fiche resterait au-dessus de ~200px de large. */
@media (min-width: 700px) {
  .grille-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
  .plat-photo { aspect-ratio: 4 / 3; }
  .plat-corps { padding: .55rem .6rem .6rem; gap: .18rem; }
  .plat-nom  { font-size: .95rem; }
  .plat-prix { font-size: 1.1rem; }
  .plat-ajout { min-width: 38px; height: 38px; font-size: .8rem; }
  /* La description revient : sur grand écran elle ne coûte plus un écran. */
  .plat-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .78rem; line-height: 1.3;
  }
  .accroche-commander { font-size: .95rem; margin-bottom: .8rem; }
  .page-commander .categorie-bloc > h2 { font-size: 1.6rem; }
}
@media (min-width: 1600px) {
  /* La 4e colonne seulement quand la fiche reste au-dessus de ~200px de large :
     mesure a 1440px avec le panier colle, la colonne catalogue ne fait que 578px,
     donc 4 colonnes y donnaient des photos de 133x100 -- PLUS PETITES que sur
     iPhone. On garde 3 colonnes jusqu a 1600px. */
  .grille-plats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- 4. TRÈS PETIT ÉCRAN : on resserre, on ne repasse JAMAIS à 1 colonne -- */
@media (max-width: 400px) {
  .grille-plats { gap: .5rem; }
  .plat-corps { padding: .38rem .45rem .45rem; }
  .plat-nom  { font-size: .87rem; }
  .plat-prix { font-size: .98rem; }
  .plat-ajout { min-width: 32px; height: 32px; font-size: .74rem; }
}

/* =====================================================================
   5. LA VUE DÉTAIL — « on bascule sur une photo plus grande »
   ---------------------------------------------------------------------
   Overlay dans la MÊME page : pas de changement d'URL, pas de rechargement,
   pas une ligne de bibliothèque tierce. C'est la modale d'options existante
   qui grandit ; on ne crée pas un second mécanisme à maintenir.
   Structure : [croix] [photo] [contenu défilant : nom, prix, desc, options,
   pied « Ajouter au panier »]. La photo et la croix NE DÉFILENT PAS : sur un
   plat à quatre groupes d'options, le visuel reste sous les yeux et la
   sortie reste sous le pouce.
   ===================================================================== */
.modale--fiche { padding: .6rem; }

.modale--fiche .modale-boite {
  position: relative;
  display: flex; flex-direction: column;
  width: min(520px, 100%);
  max-height: 92vh;
  padding: 0;                 /* la photo va bord à bord */
  overflow: hidden;           /* le défilement est confié à .modale-contenu */
}

/* LA PHOTO EN GRAND : pleine largeur de l'overlay. Plafonnée en hauteur pour
   qu'un plat à options laisse voir ses choix sans un scroll d'abord. */
.modale-photo { flex: none; background: var(--bg-2); }
.modale-photo picture { display: block; }
.modale-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; max-height: 46vh; object-fit: cover;
}

/* Croix de fermeture posée SUR la photo, cible tactile de 40px. */
.modale-croix {
  position: absolute; top: .55rem; right: .55rem; z-index: 3;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 12, 9, .80);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cream); cursor: pointer;
  transition: filter var(--transition), transform var(--transition);
}
.modale-croix:hover { filter: brightness(1.25); }
.modale-croix:active { transform: scale(.93); }
.modale-croix:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.modale-contenu {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: .9rem 1.05rem 1.1rem;
}
.modale-entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .7rem; margin-bottom: .15rem;
}
.modale--fiche .modale-boite h3 { margin: 0; font-size: 1.28rem; line-height: 1.15; min-width: 0; }
.modale-prix {
  flex: none;
  font-family: var(--font-titre); font-weight: 600;
  font-size: 1.25rem; color: var(--gold-soft); white-space: nowrap;
}
.modale--fiche .modale-boite .desc { margin: 0 0 1rem; font-size: .88rem; line-height: 1.4; }
.modale--fiche .modale-pied { padding-top: .9rem; margin-top: .9rem; flex-wrap: wrap; }

@media (min-width: 700px) {
  .modale--fiche .modale-boite h3 { font-size: 1.5rem; }
  .modale-contenu { padding: 1.1rem 1.4rem 1.3rem; }
}

/* « Moins d'animations » : la croix ne bouge plus non plus. */
@media (prefers-reduced-motion: reduce) {
  .modale-croix { transition: none; }
  .modale-croix:active { transform: none; }
}

/* --- 6. LE BOUTON « AJOUTER AU PANIER » NE DOIT JAMAIS ÊTRE À CHERCHER ---
   Constaté à la capture : sur un plat à quatre groupes d'options (couscous
   poulet), le pied de la fiche tombait sous la ligne de flottaison de
   l'overlay — l'internaute voyait les options mais pas le bouton d'achat.
   Le pied est donc COLLÉ en bas du conteneur défilant : il reste visible
   pendant qu'on choisit sa portion et sa harissa. */
.modale--fiche .modale-contenu { padding-bottom: 0; }
.modale--fiche .modale-pied {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--bg-3);
  padding: .8rem 0 .95rem; margin-top: .9rem;
}

/* --- 7. LE PIED DE LA VUE DÉTAIL TIENT SUR UNE SEULE LIGNE ------------
   Constaté à la capture : avec les boutons pleine taille (padding .85/1.7rem,
   lettrage 1.04rem), le pied se cassait en deux lignes et mangeait 150 px de
   l'overlay — donc les options qu'on est venu choisir. Le pied est donc
   ramené à UNE ligne : total à gauche, « Annuler » discret et compact,
   « Ajouter au panier » dominant à droite. */
.modale--fiche .modale-pied { flex-wrap: nowrap; gap: .45rem; }
.modale--fiche .modale-pied .total-modale { font-size: 1.1rem; margin-right: auto; }
.modale--fiche .modale-pied .btn { padding: .55rem .85rem; font-size: .82rem; letter-spacing: .02em; }
.modale--fiche .modale-pied .btn-discret { flex: none; }
.modale--fiche .modale-pied .btn-or { flex: none; white-space: nowrap; }
@media (min-width: 700px) {
  .modale--fiche .modale-pied .btn { padding: .7rem 1.2rem; font-size: .92rem; }
  .modale--fiche .modale-pied .total-modale { font-size: 1.3rem; }
}

/* =====================================================================
   23. PIED DE LA MODALE PRODUIT — correctif Ed 23/08/2026 (capture mobile)
   ---------------------------------------------------------------------
   Trois defauts constates sur la fiche « Briouates (4 pieces) » en 390 px :
     a) « 5,50 EUR » cassait sur deux lignes — l'espace avant l'euro est une
        espace ORDINAIRE cote JS (euros() dans commander.js) et la colonne du
        montant etait comprimee entre deux boutons trop larges ;
     b) « Ajouter au panier » heritait de `.btn { border-radius: 999px }` :
        a libelle long et largeur contrainte, la pilule devient une ellipse
        geante et le texte se casse sur plusieurs lignes ;
     c) les deux boutons etaient rendus en UNCIAL ANTIQUA (police d'enseigne)
        et le montant en Cormorant (police de titre) : illisibles a 13 px.
   Regle retenue (Ed) : la police display reste aux TITRES ; les libelles
   d'action et les montants passent en police de CORPS.
   Portee : le pied de modale produit UNIQUEMENT (ancienne modale d'options
   `.modale-pied` ET nouvelle vue detail `.modale--fiche`). Aucun autre bouton
   du site n'est touche. Rollback = supprimer ce bloc.
   ===================================================================== */

/* --- Le montant : police de corps, insecable, jamais sous 16 px. --- */
.modale-pied .total-modale,
.modale--fiche .modale-pied .total-modale {
  font-family: var(--font-corps);
  font-size: 1.15rem;              /* 18,4 px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--gold);
  white-space: nowrap;
  margin-right: auto;
}

/* Le prix repete dans l'entete de la vue detail suit la meme regle. */
.modale-prix {
  font-family: var(--font-corps);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Les deux actions : rectangle a coins arrondis (10 px), texte sur UNE
       ligne, hauteur de frappe 44 px. Le `!important` de la graisse est
       assume : la regle 20.1ter impose 400 !important a tout .btn-or /
       .btn-discret parce qu'Uncial Antiqua n'existe qu'en 400. Ici la police
       est Jost (variable 100-900) : le 600 est une graisse REELLE, aucune
       synthese n'est fabriquee, et la portee reste le pied de modale. --- */
.modale-pied .btn,
.modale--fiche .modale-pied .btn {
  flex: 0 0 auto;
  font-family: var(--font-corps);
  font-size: .95rem;
  font-weight: 600 !important;
  letter-spacing: .02em;
  white-space: nowrap;
  border-radius: 10px;
  min-height: 44px;
  padding: .6rem 1.1rem;
  text-shadow: none;
}

/* --- Telephone : le montant prend sa propre ligne au-dessus, les deux
       boutons se partagent la ligne suivante (Annuler 1 part, Ajouter au
       panier 2 parts). Base 0 volontaire : une base en % ferait repasser le
       second bouton a la ligne des que la gouttiere s'ajoute. --- */
@media (max-width: 430px) {
  .modale-pied,
  .modale--fiche .modale-pied { flex-wrap: wrap; gap: .55rem; }

  .modale-pied .total-modale,
  .modale--fiche .modale-pied .total-modale { flex: 1 0 100%; margin-right: 0; }

  .modale-pied .btn,
  .modale--fiche .modale-pied .btn { min-width: 0; padding-inline: .5rem; font-size: .92rem; }

  .modale-pied .btn-discret,
  .modale--fiche .modale-pied .btn-discret { flex: 1 1 0; }

  .modale-pied .btn-or,
  .modale--fiche .modale-pied .btn-or { flex: 2 1 0; }
}