/* ==========================================================================
   BENNET KELTOUM — Traiteur
   Feuille de style principale — thème Or & Noir profond
   ========================================================================== */

/* ----------------------------- 1. Réglages ------------------------------- */
:root {
  /* Palette */
  --noir:        #0B0B0D;
  --noir-2:      #101013;
  --noir-3:      #16161A;
  --ardoise:     #1E1E23;
  --ligne:       rgba(214, 178, 94, .18);
  --ligne-forte: rgba(214, 178, 94, .38);

  --or:          #D6B25E;
  --or-clair:    #F2DFA6;
  --or-fonce:    #9A7326;
  --or-degrade:  linear-gradient(135deg, #F7E7AE 0%, #DDBB63 34%, #A9782A 62%, #F0DA9B 100%);

  --creme:       #F5F1E8;
  --texte:       #D8D5CE;
  --texte-doux:  #9C9A94;

  --whatsapp:    #25D366;
  --whatsapp-dk: #1DA851;

  /* Typo */
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Divers */
  --r:      14px;
  --r-sm:   9px;
  --ombre:  0 22px 60px -22px rgba(0, 0, 0, .85);
  --ombre-or: 0 18px 40px -18px rgba(214, 178, 94, .35);
  --trans:  .35s cubic-bezier(.22, .61, .36, 1);
  --largeur: 1200px;
}

/* ----------------------------- 2. Base ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  /* Deux protections contre le défilement horizontal :
     - « clip » empêche un élément placé hors écran (comme le menu latéral ou le
       tiroir du panier) d'élargir la page ;
     - il n'altère ni le défilement vertical ni les éléments fixes. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Léger halo doré en fond de page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(214, 178, 94, .085), transparent 62%),
    radial-gradient(760px 480px at 92% 108%, rgba(214, 178, 94, .065), transparent 60%);
}

img, svg { max-width: 100%; display: block; }
a { color: var(--or); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--or-clair); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--creme);
  line-height: 1.16;
  margin: 0 0 .55em;
  letter-spacing: .2px;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
p  { margin: 0 0 1.05em; }

::selection { background: var(--or); color: var(--noir); }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}

.conteneur { width: min(var(--largeur), 100% - 3rem); margin-inline: auto; position: relative; z-index: 1; }
.centre { text-align: center; }

/* Titre dégradé or */
.or {
  background: var(--or-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Petite étiquette au-dessus des titres */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1rem;
}
.etiquette::before, .etiquette::after {
  content: "";
  width: 32px; height: 1px;
  background: var(--or-degrade);
  opacity: .8;
}

/* Filet doré décoratif */
.filet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 1.4rem auto 2.6rem;
  max-width: 320px;
}
.filet::before, .filet::after {
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.filet i {
  width: 7px; height: 7px;
  background: var(--or);
  transform: rotate(45deg);
  flex: none;
}
.filet.gauche { margin-inline: 0; justify-content: flex-start; }

/* ----------------------------- 3. Boutons ------------------------------- */
.btn {
  --btn-fg: var(--noir);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--or-degrade);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), color var(--trans), background var(--trans);
  white-space: nowrap;
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--ombre-or);
}
.btn:active { transform: translateY(0); }

/* Variante contour */
.btn-contour {
  background: transparent;
  color: var(--or);
  border-color: var(--ligne-forte);
  box-shadow: none;
}
.btn-contour:hover {
  color: var(--creme);
  border-color: var(--or);
  background: rgba(214, 178, 94, .1);
  box-shadow: none;
}

/* Variante WhatsApp */
.btn-vert { background: var(--whatsapp); color: #062611; }
.btn-vert:hover { background: var(--whatsapp-dk); color: #fff; box-shadow: 0 18px 40px -18px rgba(37, 211, 102, .55); }

.btn-petit { padding: .62rem 1.25rem; font-size: .74rem; }
.btn-bloc { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ----------------------------- 4. En-tête ------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 11, 13, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--trans), border-color var(--trans);
}
.entete.decolle {
  background: rgba(11, 11, 13, .96);
  border-bottom-color: var(--ligne);
}

.entete-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}

.marque { display: flex; align-items: center; gap: .85rem; }
.marque img { width: 50px; height: 50px; flex: none; }
.marque-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marque-nom {
  font-family: var(--serif);
  font-size: 1.24rem;
  color: var(--creme);
  letter-spacing: .06em;
}
.marque-sous {
  font-size: .6rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--or);
  margin-top: 3px;
}

/* Navigation */
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  position: relative;
  color: var(--texte);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .35rem 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--or-degrade);
  transform: translateX(-50%);
  transition: width var(--trans);
}
.nav a:hover { color: var(--creme); }
.nav a:hover::after { width: 100%; }
.nav a.actif { color: var(--or); }
.nav a.actif::after { width: 100%; }

.entete-actions { display: flex; align-items: center; gap: .8rem; }

/* Bouton panier */
.btn-panier {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.15rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: rgba(214, 178, 94, .06);
  color: var(--or);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--trans);
}
.btn-panier:hover { border-color: var(--or); background: rgba(214, 178, 94, .14); color: var(--or-clair); }
.btn-panier svg { width: 18px; height: 18px; }
.panier-libelle { display: inline; }
.compteur {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--or-degrade);
  color: var(--noir);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0;
  transform: scale(0);
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.compteur.visible { transform: scale(1); }
.compteur.pulse { animation: pulse .5s ease; }
@keyframes pulse { 50% { transform: scale(1.35); } }

/* Burger : rectangle compact aux coins discrets, trois traits fins centrés,
   bordure et fond identiques au bouton Panier. */
.burger {
  display: none;
  position: relative;
  width: 40px; height: 36px;
  border: 1px solid var(--ligne-forte);
  border-radius: 6px;
  background: rgba(214, 178, 94, .06);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color var(--trans), background var(--trans), transform .15s ease;
}
/* Zone cliquable confortable (44 px) sans agrandir le dessin du bouton */
.burger::before { content: ""; position: absolute; inset: -4px -2px; }
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  border-radius: 1px;
  background: var(--or);
  transition: transform var(--trans), opacity var(--trans), background var(--trans);
}
@media (hover: hover) {
  .burger:hover { border-color: var(--or); background: rgba(214, 178, 94, .14); }
  .burger:hover span { background: var(--or-clair); }
}
.burger:active { transform: scale(.94); background: rgba(214, 178, 94, .2); }
.burger:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.burger.ouvert { border-color: var(--or); background: rgba(214, 178, 94, .14); }
/* Croix à l'ouverture : écart entre traits = 4 px + 1,5 px d'épaisseur */
.burger.ouvert span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ----------------------------- 5. Hero ---------------------------------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: min(760px, 92vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(214, 178, 94, .13), transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.hero-medaillon {
  width: clamp(128px, 17vw, 178px);
  margin: 0 auto 1.9rem;
  filter: drop-shadow(0 0 34px rgba(214, 178, 94, .3));
  animation: apparait .9s ease both;
}
.hero h1 { margin-bottom: .3rem; }
.hero-sous {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 2.1vw, 1.35rem);
  color: var(--or);
  letter-spacing: .04em;
  margin-bottom: 1.5rem;
}
.hero-txt {
  max-width: 62ch;
  margin: 0 auto 2.2rem;
  color: var(--texte-doux);
  font-size: 1.03rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

.hero-infos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.6rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ligne);
  font-size: .84rem;
  color: var(--texte-doux);
}
.hero-infos div { display: flex; align-items: center; gap: .55rem; }
.hero-infos b { color: var(--or); font-weight: 500; letter-spacing: .04em; }

/* ----------------------------- 6. Bandeau ------------------------------- */
.bandeau {
  position: relative;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  background: linear-gradient(180deg, rgba(214, 178, 94, .05), transparent);
  padding: 1.05rem 0;
  overflow: hidden;
}
.bandeau-in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.bandeau-in i { width: 5px; height: 5px; background: var(--or); transform: rotate(45deg); flex: none; }
.bandeau-in b { color: var(--or); font-weight: 500; }

/* ----------------------------- 7. Sections ------------------------------ */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.section-sombre { background: var(--noir-2); border-block: 1px solid var(--ligne); }
.section-tete { max-width: 74ch; margin: 0 auto clamp(2rem, 4vw, 3.2rem); text-align: center; }
.section-tete p { color: var(--texte-doux); margin-bottom: 0; }

/* ----------------------------- 8. Menu du jour -------------------------- */
.jour-carte {
  position: relative;
  border: 1px solid var(--ligne-forte);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(214, 178, 94, .07), rgba(214, 178, 94, 0) 42%),
    var(--noir-3);
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.jour-carte::before,
.jour-carte::after {
  content: "";
  position: absolute;
  width: 46px; height: 46px;
  border: 1px solid var(--or);
  opacity: .5;
}
.jour-carte::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.jour-carte::after  { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }

.jour-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding-bottom: 1.3rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--ligne);
}
.jour-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--or);
}

.jour-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.4rem 2.4rem;
}
.jour-partie h4 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 .9rem;
}
.jour-plat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px dashed rgba(214, 178, 94, .16);
}
.jour-plat:last-child { border-bottom: 0; }
.jour-plat-nom { font-family: var(--serif); font-size: 1.06rem; color: var(--creme); }
.jour-plat-desc { font-size: .82rem; color: var(--texte-doux); margin: .15rem 0 0; }
.jour-plat-prix { font-size: .88rem; color: var(--or); white-space: nowrap; font-weight: 400; }

.jour-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ligne);
}
.jour-note { font-size: .82rem; color: var(--texte-doux); margin: 0; max-width: 46ch; }

/* ----------------------------- 9. Cartes plat --------------------------- */
.grille-plats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}

.carte-plat {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  overflow: hidden;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.carte-plat:hover {
  transform: translateY(-6px);
  border-color: var(--ligne-forte);
  box-shadow: var(--ombre), var(--ombre-or);
}

.carte-visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--noir-2);
}
.carte-visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity var(--trans);
}
.carte-plat:hover .carte-visuel img { transform: scale(1.07); }

.carte-tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: .3rem .8rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: rgba(11, 11, 13, .78);
  backdrop-filter: blur(6px);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
}
.carte-tag.populaire { background: var(--or-degrade); color: var(--noir); border-color: transparent; }

.carte-corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.35rem 1.35rem;
}
.carte-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}
.carte-entete h3 { margin: 0; font-size: 1.18rem; }
.carte-prix {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--or);
  white-space: nowrap;
}
.carte-desc {
  font-size: .87rem;
  color: var(--texte-doux);
  margin: 0 0 1.1rem;
  flex: 1;
}
.carte-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ligne);
}

/* Sélecteur de quantité */
.qte {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.qte button {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: var(--or);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.qte button:hover { background: rgba(214, 178, 94, .16); color: var(--or-clair); }
.qte span {
  min-width: 26px;
  text-align: center;
  font-size: .9rem;
  color: var(--creme);
  font-variant-numeric: tabular-nums;
}
/* Quantité saisissable au clavier : assez large pour « 1000 » ou « 25000 » */
.qte input {
  width: 4.6rem;
  height: 32px;
  padding: 0 .3rem;
  border: 0;
  border-left: 1px solid var(--ligne);
  border-right: 1px solid var(--ligne);
  border-radius: 0;
  background: rgba(11, 11, 13, .55);
  color: var(--creme);
  font-family: var(--sans);
  font-size: .95rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qte input:focus {
  outline: none;
  background: var(--noir);
  box-shadow: inset 0 0 0 2px rgba(214, 178, 94, .55);
}
.qte input.qte-refusee { box-shadow: inset 0 0 0 2px rgba(226, 112, 92, .8); }
.carte-pied { flex-wrap: wrap; }
@media (max-width: 720px) {
  /* Cibles tactiles plus grandes sur téléphone */
  .qte button { width: 38px; height: 38px; }
  .qte input { height: 38px; width: 5rem; font-size: 1rem; }
}

/* État "dans le panier" */
.carte-plat.au-panier { border-color: var(--ligne-forte); }
.carte-plat.au-panier .carte-tag.ajout {
  position: absolute;
  top: 12px; right: 12px;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--or-degrade);
  color: var(--noir);
  border-color: transparent;
}
.carte-tag.ajout { display: none; }
.carte-tag.ajout svg { width: 12px; height: 12px; }

/* ----------------------------- 10. Semaine ------------------------------ */
.semaine { display: grid; gap: 1rem; }
.jour-ligne {
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  overflow: hidden;
  transition: border-color var(--trans), background var(--trans);
}
.jour-ligne:hover { border-color: var(--ligne-forte); }
.jour-ligne.aujourdhui {
  border-color: var(--or);
  background: linear-gradient(180deg, rgba(214, 178, 94, .08), var(--noir-3) 70%);
}
.jour-ligne > summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.15rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.jour-ligne > summary::-webkit-details-marker { display: none; }
.jour-ligne > summary:hover { background: rgba(214, 178, 94, .045); }

.jour-nom {
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--creme);
  min-width: 8.5rem;
}
.jour-ligne.aujourdhui .jour-nom { color: var(--or); }
.jour-badge {
  padding: .22rem .7rem;
  border-radius: 999px;
  background: var(--or-degrade);
  color: var(--noir);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.jour-resume {
  flex: 1;
  font-size: .85rem;
  color: var(--texte-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jour-chev {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--ligne-forte);
  border-radius: 50%;
  color: var(--or);
  flex: none;
  transition: transform var(--trans), background var(--trans);
}
.jour-chev svg { width: 14px; height: 14px; }
.jour-ligne[open] .jour-chev { transform: rotate(180deg); background: rgba(214, 178, 94, .14); }

.jour-contenu {
  padding: 0 1.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem;
  animation: apparait .4s ease both;
}
.jour-contenu .jour-partie h5 {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 .7rem;
}
.jour-contenu .plat-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .45rem 0;
  border-bottom: 1px dashed rgba(214, 178, 94, .14);
  font-size: .9rem;
}
.jour-contenu .plat-ligne:last-child { border-bottom: 0; }
.jour-contenu .plat-ligne b { font-family: var(--serif); font-weight: 500; color: var(--creme); }
.jour-contenu .plat-ligne em { font-style: normal; color: var(--or); white-space: nowrap; font-size: .85rem; }

/* ----------------------------- 11. À propos ----------------------------- */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.texte-riche p { color: var(--texte-doux); }
.texte-riche p:first-of-type { font-size: 1.1rem; color: var(--texte); }
.signature {
  font-family: var(--serif);
  font-style: italic;
  color: var(--or);
  font-size: 1.15rem;
  margin-top: 1.6rem;
}

.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.valeur {
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  transition: border-color var(--trans), transform var(--trans);
}
.valeur:hover { border-color: var(--ligne-forte); transform: translateY(-5px); }
.valeur .ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--ligne-forte);
  border-radius: 50%;
  margin-bottom: 1.1rem;
  color: var(--or);
}
.valeur .ico svg { width: 22px; height: 22px; }
.valeur h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.valeur p { font-size: .88rem; color: var(--texte-doux); margin: 0; }

/* Chiffres */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.chiffre b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  line-height: 1;
  background: var(--or-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chiffre span {
  display: block;
  margin-top: .5rem;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* Cadre décoratif autour d'un visuel */
.cadre {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--ligne-forte);
  box-shadow: var(--ombre);
}
.cadre::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(214, 178, 94, .35);
  border-radius: calc(var(--r) - 6px);
  pointer-events: none;
}

/* Citation */
.citation {
  max-width: 76ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  line-height: 1.6;
  color: var(--creme);
}
.citation::before { content: "« "; color: var(--or); }
.citation::after  { content: " »"; color: var(--or); }
.citation-auteur {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or);
}

/* ----------------------------- 12. Contact ------------------------------ */
.contact-grille {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.coord { display: grid; gap: 1rem; }
.coord-item {
  display: flex;
  gap: 1.1rem;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  transition: border-color var(--trans);
}
.coord-item:hover { border-color: var(--ligne-forte); }
.coord-item .ico {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--ligne-forte);
  border-radius: 50%;
  color: var(--or);
}
.coord-item .ico svg { width: 20px; height: 20px; }
.coord-item h3 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 .35rem;
}
.coord-item p { margin: 0; font-size: .94rem; color: var(--texte); }
.coord-item a { color: var(--texte); }
.coord-item a:hover { color: var(--or); }

.horaires { border-collapse: collapse; width: 100%; font-size: .92rem; }
.horaires td { padding: .5rem 0; border-bottom: 1px dashed rgba(214, 178, 94, .16); }
.horaires tr:last-child td { border-bottom: 0; }
.horaires td:last-child { text-align: right; color: var(--or); white-space: nowrap; }
.horaires .ferme { color: var(--texte-doux); }

/* Formulaire */
.form {
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  padding: clamp(1.4rem, 3.4vw, 2.4rem);
}
.form-champ { margin-bottom: 1.05rem; }
.form label {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .45rem;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: .82rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r-sm);
  background: var(--noir);
  color: var(--creme);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 300;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.form input::placeholder,
.form textarea::placeholder { color: #6E6C67; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(214, 178, 94, .14);
}
.form textarea { resize: vertical; min-height: 120px; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--or) 50%), linear-gradient(135deg, var(--or) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: .78rem; color: var(--texte-doux); margin: 1rem 0 0; text-align: center; }

/* ----------------------------- 13. Panier ------------------------------- */
.voile {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(5, 5, 6, .72);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--trans), visibility var(--trans);
}
.voile.ouvert { opacity: 1; visibility: visible; }

.panier {
  position: fixed;
  top: 0; right: 0;
  z-index: 110;
  width: min(440px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--noir-2);
  border-left: 1px solid var(--ligne-forte);
  box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .95);
  transform: translateX(102%);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.panier.ouvert { transform: translateX(0); }

.panier-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  border-bottom: 1px solid var(--ligne);
}
.panier-tete h2 { font-size: 1.3rem; margin: 0; }
.panier-fermer {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--ligne-forte);
  border-radius: 50%;
  background: transparent;
  color: var(--or);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--trans);
}
.panier-fermer:hover { background: rgba(214, 178, 94, .14); color: var(--or-clair); }

.panier-corps { flex: 1; overflow-y: auto; padding: 1.3rem 1.5rem; }
.panier-corps::-webkit-scrollbar { width: 7px; }
.panier-corps::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
.panier-corps::-webkit-scrollbar-thumb { background: rgba(214, 178, 94, .3); border-radius: 99px; }

.panier-vide { text-align: center; padding: 3rem 1rem; color: var(--texte-doux); }
.panier-vide svg { width: 54px; height: 54px; margin: 0 auto 1.1rem; color: var(--or); opacity: .55; }
.panier-vide p { font-size: .92rem; }

.panier-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem 1rem;
  padding: .95rem 0;
  border-bottom: 1px dashed rgba(214, 178, 94, .16);
  animation: apparait .3s ease both;
}
.panier-ligne:last-of-type { border-bottom: 0; }
.panier-ligne-nom { font-family: var(--serif); font-size: 1rem; color: var(--creme); }
.panier-ligne-prix { font-size: .84rem; color: var(--or); white-space: nowrap; }
.panier-ligne-pied { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panier-retirer {
  border: 0;
  background: transparent;
  color: var(--texte-doux);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: .3rem 0;
  transition: color var(--trans);
}
.panier-retirer:hover { color: #E2705C; }

.panier-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ligne-forte);
}
.panier-total span { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-doux); }
.panier-total b { font-family: var(--serif); font-size: 1.6rem; color: var(--or); font-weight: 500; }

.panier-client { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--ligne); }
.panier-client h3 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1rem;
}
/* Proposition de vider le panier, affichée une fois la commande envoyée */
.panier-vidage {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-sm);
  background: rgba(214, 178, 94, .07);
  text-align: center;
}
.panier-vidage[hidden] { display: none; }
.panier-vidage p {
  margin: 0 0 .9rem;
  font-size: .85rem;
  color: var(--texte);
}
.panier-pied {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--ligne);
  background: var(--noir-3);
}
.panier-pied .btn + .btn { margin-top: .7rem; }
.panier-pied small { display: block; margin-top: .8rem; font-size: .74rem; color: var(--texte-doux); text-align: center; }

/* ----------------------------- 14. Pied de page ------------------------- */
.pied {
  margin-top: 0;
  border-top: 1px solid var(--ligne);
  background: var(--noir-2);
  padding: clamp(2.8rem, 5vw, 4rem) 0 2rem;
}
.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--ligne);
}
.pied-marque { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.pied-marque img { width: 56px; height: 56px; }
.pied h3 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1.1rem;
}
.pied p, .pied li { font-size: .88rem; color: var(--texte-doux); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .55rem; }
.pied a { color: var(--texte-doux); }
.pied a:hover { color: var(--or); }
.pied-sous {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-top: 1.6rem;
  font-size: .78rem;
  color: #77756F;
}
.pied-sous a { color: #77756F; }
.pied-sous a:hover { color: var(--or); }

/* Réseaux */
.reseaux { display: flex; gap: .6rem; margin-top: 1.2rem; }
.reseaux a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  color: var(--or);
  transition: all var(--trans);
}
.reseaux a:hover { border-color: var(--or); background: rgba(214, 178, 94, .12); transform: translateY(-2px); }
.reseaux svg { width: 17px; height: 17px; }

/* ----------------------------- 15. Bouton WhatsApp flottant ------------- */
.wa-flottant {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #05220F;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .6);
  transition: transform var(--trans), background var(--trans);
}
.wa-flottant:hover { background: var(--whatsapp-dk); color: #fff; transform: translateY(-3px); }
.wa-flottant svg { width: 20px; height: 20px; flex: none; }

/* Notification */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  z-index: 130;
  transform: translate(-50%, 130%);
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: var(--noir-3);
  color: var(--creme);
  font-size: .86rem;
  box-shadow: var(--ombre);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.toast.visible { transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--or); flex: none; }
.toast-action {
  margin-left: .2rem;
  padding-left: .8rem;
  border-left: 1px solid var(--ligne-forte);
  color: var(--or);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.toast.cliquable { cursor: pointer; }
.toast.cliquable:hover { border-color: var(--or); background: var(--ardoise); }

/* ----------------------------- 16. Pages internes ----------------------- */
.entete-page {
  padding: clamp(3rem, 6vw, 4.6rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
  border-bottom: 1px solid var(--ligne);
  background: linear-gradient(180deg, rgba(214, 178, 94, .05), transparent);
}
.entete-page p { max-width: 62ch; margin: 0 auto; color: var(--texte-doux); }
.fil {
  display: flex;
  justify-content: center;
  gap: .6rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 1.2rem;
}
.fil a { color: var(--texte-doux); }
.fil a:hover { color: var(--or); }
.fil span { color: var(--or); }

/* Barre de filtres */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 2.4rem;
}

/* Chapitre de la carte (ancre du sommaire) */
.chapitre { scroll-margin-top: 110px; }
.panier-sous {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.filtre {
  padding: .55rem 1.25rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: transparent;
  color: var(--texte-doux);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--trans);
}
.filtre:hover { border-color: var(--ligne-forte); color: var(--creme); }
.filtre.actif { background: var(--or-degrade); border-color: transparent; color: var(--noir); font-weight: 500; }

/* Carte géographique */
.carte-lieu {
  margin-top: 1.2rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--noir-3);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.carte-lieu svg { width: 46px; height: 46px; color: var(--or); margin: 0 auto .9rem; opacity: .8; }
.carte-lieu p { margin: 0; font-size: .9rem; color: var(--texte-doux); }
.carte-lieu b { color: var(--creme); font-family: var(--serif); font-size: 1.1rem; display: block; margin-bottom: .3rem; }

/* Bandeau d'appel à l'action */
.appel {
  border: 1px solid var(--ligne-forte);
  border-radius: 20px;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(214, 178, 94, .12), transparent 70%),
    var(--noir-3);
  padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
}
.appel h2 { margin-bottom: .6rem; }
.appel p { color: var(--texte-doux); max-width: 58ch; margin: 0 auto 1.8rem; }
.appel-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ----------------------------- 17. Animations -------------------------- */
@keyframes apparait {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* Animation d'apparition au défilement.
   IMPORTANT : l'état « invisible » n'est appliqué que si JavaScript est actif
   (classe .js posée sur <html> par l'en-tête). Si le script ne s'exécute pas,
   le contenu reste parfaitement lisible : aucune page ne peut se retrouver
   avec des blocs vides. */
.js .revele { opacity: 0; transform: translateY(22px); }
.js .revele.vu { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .revele { opacity: 1; transform: none; }
}

/* ----------------------------- 18. Responsive -------------------------- */
@media (max-width: 1080px) {
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .contact-grille { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* --- En-tête mobile : plus compact, boutons alignés à la même hauteur --- */
  /* « static » : le menu se positionne par rapport à l'en-tête entier (pleine
     largeur), et non par rapport au conteneur centré. */
  .entete-in { min-height: 64px; gap: 1rem; position: static; }
  .marque { gap: .6rem; min-width: 0; }
  .marque img { width: 40px; height: 40px; }
  .marque-sous { display: none; }
  .entete-actions { gap: .6rem; }
  .btn-panier { height: 36px; padding: 0 .9rem; }

  /* --- Navigation mobile : panneau qui s'ouvre SOUS l'en-tête ------------
     L'en-tête est « sticky », donc positionné : « top: 100% » place le menu
     juste sous sa bordure basse, quelle que soit sa hauteur réelle (aucune
     valeur fixe). Il occupe toute la largeur et ne déborde jamais de l'écran
     (pas de translation horizontale hors écran). */
  .burger { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: .4rem 0 .8rem;
    background: var(--noir-2);
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne-forte);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s;
    /* Fermé : totalement inerte (ni visible, ni cliquable, ni atteignable au clavier) */
    visibility: hidden;
    pointer-events: none;
  }
  .nav.ouvert {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s;
  }
  .nav a {
    display: block;
    padding: 1rem clamp(16px, 5vw, 2rem);
    font-size: .95rem;
    letter-spacing: .16em;
    border-bottom: 1px solid var(--ligne);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .nav a.actif { color: var(--or); background: rgba(214, 178, 94, .06); box-shadow: inset 3px 0 0 var(--or); }
  @media (hover: hover) { .nav a:hover { background: rgba(214, 178, 94, .05); } }
}

/* Très petits écrans : le libellé « Panier » cède la place à l'icône */
@media (max-width: 340px) {
  .panier-libelle { display: none; }
  .btn-panier { padding: 0 .75rem; }
  .marque-nom { font-size: 1.05rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Largeur exprimée en « vw » et non en « % » : un pourcentage se résoudrait
     sur la largeur du <body>, qui peut être élargi par un élément placé hors
     écran (le menu latéral). « 100vw » correspond toujours à l'écran réel. */
  .panier { width: 100vw; max-width: 100vw; border-left: 0; }
  .hero-infos { flex-direction: column; gap: .7rem; align-items: center; }
  .jour-tete { flex-direction: column; }
  .jour-ligne > summary { gap: .8rem; padding: 1rem 1.1rem; }
  .jour-nom { font-size: 1.05rem; min-width: 0; }
  .jour-resume { display: none; }
  .jour-contenu { padding: 0 1.1rem 1.2rem; }
  .pied-grille { grid-template-columns: 1fr; }
  .form-ligne { grid-template-columns: 1fr; }
  .grille-plats { grid-template-columns: 1fr; }
  .wa-flottant span { display: none; }
  .wa-flottant { padding: .95rem; right: 16px; bottom: 16px; }
  .carte-plat:hover { transform: none; }
  /* Un libellé long (« Voir tous les plats de tous les jours ») passe à la
     ligne au lieu d'élargir la page */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* ==========================================================================
   AJOUTS VERSION PHP
   --------------------------------------------------------------------------
   Le thème d'origine (site statique) est repris tel quel au-dessus.
   Ce bloc ne contient QUE les compléments nécessités par la version PHP :
     1. liens présentés comme des boutons (le HTML généré en PHP utilise des
        <a> là où le JavaScript d'origine créait des <button>) ;
     2. fiche détaillée d'un plat (public/plat.php) ;
     3. chapitres, sommaire et filtres de la carte ;
     4. bandeau + carte Google Maps de la page Contact ;
     5. horaires repliables du pied de page ;
     6. page 404 (public/infos.php) ;
     7. vue de la semaine générée par PHP ;
     8. tableau des formules traiteur.
   Aucune règle du thème d'origine n'est réécrite ni supprimée.
   ========================================================================== */

/* --- 1. Liens présentés comme des boutons ------------------------------- */
a.filtre { display: inline-block; }
a.btn { text-decoration: none; }
a.btn:hover { text-decoration: none; }

/* --- 2. Fiche détaillée d'un plat --------------------------------------- */
.fiche-plat {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
.fiche-visuel {
  position: relative;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--noir-2);
  box-shadow: var(--ombre);
}
.fiche-visuel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fiche-filet { margin: 1.4rem 0; }
.fiche-desc { font-size: 1rem; color: var(--texte-doux); }
.fiche-caracteristiques {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
  font-size: .86rem;
  color: var(--texte-doux);
}
.fiche-caracteristiques b { color: var(--creme); font-weight: 400; }
.fiche-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ligne);
}
.fiche-actions .btn { flex: 1 1 auto; }
.fiche-prix {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--or);
  white-space: nowrap;
  display: block;
  margin-bottom: 1.1rem;
}
.fiche-retour {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 1.6rem;
}
.fiche-retour:hover { color: var(--or); }

/* --- 3. Chapitres, sommaire et filtres de la carte ---------------------- */
.chapitre-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.chapitre-tete h2 { margin: 0; }
.chapitre-compte {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.chapitre-intro {
  color: var(--texte-doux);
  font-size: .92rem;
  margin: -.6rem 0 1.4rem;
  max-width: 66ch;
}
.sommaire-carte { margin-bottom: 2.2rem; }
.sommaire-carte h3 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1rem;
}
.sommaire-carte a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .89rem;
  color: var(--texte-doux);
  padding: .4rem 0;
  border-bottom: 1px dashed rgba(214, 178, 94, .14);
}
.sommaire-carte a:hover { color: var(--or); }
.sommaire-carte a span:last-child { color: var(--or); }
.sommaire-carte a.actif { color: var(--or); }
.encart-carte {
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  padding: 1.5rem 1.4rem;
}
.encart-carte h2 { font-size: 1.35rem; margin: 0; }
.encart-carte p { font-size: .88rem; color: var(--texte-doux); }
.encart-carte p:last-child { margin: 1.2rem 0 0; font-size: .86rem; }

/* --- 4. Bandeau et carte Google Maps (page Contact) --------------------- */
.carte-bloc {
  margin-top: 1.2rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--noir-3);
}
.carte-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  padding: 1.15rem 1.3rem;
  border-bottom: 1px solid var(--ligne);
}
.carte-bandeau-repere {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 15rem;
}
.carte-bandeau-repere svg { width: 26px; height: 26px; flex: none; color: var(--or); }
.carte-bandeau-repere strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--creme);
}
.carte-bandeau-repere span { display: block; font-size: .84rem; color: var(--texte-doux); }
.carte-iframe iframe { display: block; width: 100%; height: 420px; border: 0; }
.carte-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1.2rem;
  padding: .8rem 1.3rem;
  border-top: 1px solid var(--ligne);
  font-size: .74rem;
  color: #77756F;
  letter-spacing: .04em;
}
.carte-note code { color: var(--texte-doux); }

/* --- 5. Horaires repliables (pied de page) ------------------------------ */
.horaires-repli { margin-top: 1.1rem; }
.horaires-repli > summary {
  cursor: pointer;
  list-style: none;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
}
.horaires-repli > summary::-webkit-details-marker { display: none; }
.horaires-repli[open] > summary { margin-bottom: .8rem; }

/* --- 6. Page 404 (public/infos.php) ------------------------------------- */
.page-404 { text-align: center; }
.page-404 .medaillon {
  width: clamp(110px, 15vw, 150px);
  margin: 0 auto 1.6rem;
  opacity: .9;
  filter: drop-shadow(0 0 28px rgba(214, 178, 94, .25));
}
.page-404 .code {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 11vw, 6.4rem);
  line-height: 1;
  margin: 0 0 .4rem;
  background: var(--or-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-404 .actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }

/* --- 7. Vue de la semaine (générée par PHP) ----------------------------- */
.plat-ligne em.sur-demande {
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.plat-ligne-inactif { opacity: .75; }
.semaine-pied { text-align: center; margin-top: 2.6rem; color: var(--texte-doux); font-size: .9rem; }

/* --- 8. Tableau des formules traiteur ----------------------------------- */
.formules-table { border-collapse: collapse; width: 100%; }
.formules-table td {
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(214, 178, 94, .16);
  vertical-align: top;
  font-size: .92rem;
}
.formules-table tr:last-child td { border-bottom: 0; }
.formules-table td:last-child { text-align: right; color: var(--or); white-space: nowrap; }
.formules-table b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--creme);
}
.formules-table span { display: block; font-size: .82rem; color: var(--texte-doux); }

/* --- 9. Divers ---------------------------------------------------------- */
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li {
  padding: .45rem 0;
  border-bottom: 1px dashed rgba(214, 178, 94, .14);
  font-size: .9rem;
  color: var(--texte-doux);
}
.liste-simple li:last-child { border-bottom: 0; }
.bloc-note {
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  padding: 1.5rem 1.4rem;
}
.bloc-note h3 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 .9rem;
}
.texte-doux { color: var(--texte-doux); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.centre-doux { text-align: center; color: var(--texte-doux); }

/* --- 10. Responsive des ajouts ------------------------------------------ */
@media (max-width: 1000px) {
  #carte-layout { grid-template-columns: 1fr !important; }
  #carte-layout > aside { position: static !important; }
  .sommaire-carte { display: none; }
}

@media (max-width: 900px) {
  .fiche-plat { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .fiche-actions { flex-direction: column; align-items: stretch; }
  .fiche-actions .btn { width: 100%; }
  .carte-iframe iframe { height: 320px; }
  .formules-table td { display: block; padding: .5rem 0; border-bottom: 0; }
  .formules-table tr {
    display: block;
    padding: .9rem 0;
    border-bottom: 1px dashed rgba(214, 178, 94, .16);
  }
  .formules-table tr:last-child { border-bottom: 0; }
  .formules-table td:last-child { text-align: left; }
}

/* ==========================================================================
   11. Menu de la semaine en onglets, menu du jour programmé,
       date de commande et acompte dans le panier
   ========================================================================== */

/* --- Onglets des jours --------------------------------------------------- */
.jours-onglets { margin-bottom: 1.8rem; }
.jours-onglets .filtre { display: inline-flex; align-items: center; gap: .45rem; }
.jours-onglets .filtre small { font-size: .62rem; letter-spacing: .1em; opacity: .85; }
.onglet-nb {
  min-width: 1.45rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .62rem;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  opacity: .8;
}
.jour-panneau {
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--noir-3);
  padding: clamp(1.2rem, 3vw, 2rem);
}
.jour-panneau + .jour-panneau { margin-top: 1.2rem; }
.js .semaine-onglets.pret .jour-panneau + .jour-panneau { margin-top: 0; }
.jour-panneau[hidden] { display: none; }
.jour-panneau-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--ligne);
}
.jour-panneau-tete h3 { margin: 0; font-size: 1.5rem; }
.jour-panneau-aide {
  margin: 1.4rem 0 0;
  font-size: .84rem;
  color: var(--texte-doux);
  text-align: center;
}
.jour-mot {
  margin: .5rem 0 0;
  font-size: .92rem;
  font-style: italic;
  color: var(--texte-doux);
}
.jour-carte > .jour-mot { margin: -.6rem 0 1.6rem; }

/* --- Journée sans plat programmé ----------------------------------------- */
.jour-vide {
  padding: 1.6rem 1.2rem;
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--r);
  text-align: center;
  color: var(--texte-doux);
  font-size: .92rem;
}
.jour-vide strong { color: var(--creme); font-family: var(--serif); font-weight: 500; font-size: 1.08rem; }
.jour-vide p { max-width: 58ch; margin: 0 auto .6rem; }
.jour-vide-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* --- Champs du panier (mêmes réglages que le formulaire de contact) ------ */
.panier .form-champ label {
  display: block;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .4rem;
}
.panier .form-champ input,
.panier .form-champ select,
.panier .form-champ textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r-sm);
  background: var(--noir);
  color: var(--creme);
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 300;
  color-scheme: dark;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.panier .form-champ input::placeholder,
.panier .form-champ textarea::placeholder { color: #6E6C67; }
.panier .form-champ input:focus,
.panier .form-champ select:focus,
.panier .form-champ textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(214, 178, 94, .14);
}
.panier .form-champ textarea { resize: vertical; min-height: 84px; }
.panier .champ-aide { font-size: .74rem; color: var(--texte-doux); margin: .35rem 0 0; }

/* --- Date de commande ---------------------------------------------------- */
.panier-date {
  margin: 1.3rem 0 0;
  padding: 1.1rem 1.2rem .3rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-sm);
  background: rgba(214, 178, 94, .05);
}
.panier-date .champ-aide b { color: var(--or); font-weight: 500; }

/* Encadré acompte (commande planifiée uniquement) */
.panier-acompte {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(217, 165, 94, .55);
  border-radius: var(--r-sm);
  background: rgba(217, 165, 94, .09);
  font-size: .84rem;
  color: var(--texte);
}
.panier-acompte strong { color: var(--or-clair); font-weight: 500; }
.panier-acompte .montant { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; font-size: .9rem; }
.panier-acompte .montant b { font-family: var(--serif); font-size: 1.15rem; color: var(--or); font-weight: 500; }
.panier-acompte small { display: block; margin-top: .5rem; color: var(--texte-doux); font-size: .74rem; }

/* Alertes : plat hors du jour choisi, date invalide… */
.panier-alerte {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(226, 112, 92, .55);
  border-radius: var(--r-sm);
  background: rgba(226, 112, 92, .08);
  font-size: .84rem;
  color: var(--texte);
}
.panier-alerte ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.panier-alerte .btn { margin-top: .7rem; }
.panier-ligne-erreur {
  grid-column: 1 / -1;
  font-size: .76rem;
  color: #E2705C;
}
.panier-ligne.en-erreur .panier-ligne-nom { color: #E2A091; }
.panier-verif { font-size: .74rem; color: var(--texte-doux); text-align: right; margin-top: .3rem; }

@media (max-width: 720px) {
  .jours-onglets { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .4rem; scrollbar-width: thin; }
  .jours-onglets .filtre { flex: none; padding: .5rem .95rem; }
  .jour-panneau-tete h3 { font-size: 1.25rem; }
}