/* =============================================================
   Kosher Marrakech — couche de design
   -------------------------------------------------------------
   Se pose PAR-DESSUS css/style.css, qui reste intact. Rien ici
   ne change la structure des pages : on ajoute la matiere, le
   motif et le mouvement.

   Ordre des parties :
     1.  Matiere       grain de papier, zellige en filigrane
     2.  Ornements     arabesques, filets, etoiles de section
     3.  Curseur       anneau dore, souris uniquement
     4.  Hero          eclat sur le mot dore
     5.  Images        rideau dore a l'apparition
     6.  Maisons       numerotation, cadre, entree en cascade
     7.  Mosaique      parallaxe, cadre au survol, legende
     8.  Boutons       balayage dore
     9.  Carte         plats en cascade, pointilles dores
    10.  Divers        chiffres, citation, pied de page, entete
    11.  Telephone     ce que l'on allege
    12.  Mouvement reduit

   Tout ce qui bouge est neutralise sous
   `prefers-reduced-motion: reduce` (partie 12).
   ============================================================= */

/* =============================================================
   1. MATIERE
   ============================================================= */

/* ---- grain de papier ----
   Un bruit tres fin, fixe, pose sur toute la page. Il enleve au
   creme son aspect d'aplat numerique : l'ecran prend le grain
   d'un papier de menu. Invisible consciemment, sensible tout de
   meme. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.11'/%3E%3C/svg%3E");
}

/* ---- zellige en filigrane ----
   Le motif de carreau marocain, dessine au trait dore, tres
   pale, sur les sections de fond sable. C'est la seule chose du
   site qui dise « Marrakech » sans photographie. */
.section.sable::before,
.section.creme-motif::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23b3813a' stroke-width='0.9' opacity='0.16'%3E%3Cpath d='M60 8 76 24 60 40 44 24Z'/%3E%3Cpath d='M60 80 76 96 60 112 44 96Z'/%3E%3Cpath d='M8 60 24 44 40 60 24 76Z'/%3E%3Cpath d='M80 60 96 44 112 60 96 76Z'/%3E%3Cpath d='M60 40 80 60 60 80 40 60Z'/%3E%3Cpath d='M24 24 44 24 44 44'/%3E%3Cpath d='M96 24 76 24 76 44'/%3E%3Cpath d='M24 96 44 96 44 76'/%3E%3Cpath d='M96 96 76 96 76 76'/%3E%3Ccircle cx='60' cy='60' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 154px 154px;
  /* Le motif s'efface vers le centre : il habille les bords sans
     jamais passer derriere le texte. */
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, transparent 48%, #000 100%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, transparent 48%, #000 100%);
}

/* Le contenu repasse devant le motif. */
.section.sable > *,
.section.creme-motif > * {
  position: relative;
  z-index: 1;
}

/* ---- halo chaud en haut de chaque section claire ----
   Une lumiere d'ambre tres douce, comme une lampe hors champ.
   Un pseudo-element absolu se peint APRES le contenu : sans
   z-index, le halo passerait devant le texte. */
.section:not(.sable) > * {
  position: relative;
  z-index: 1;
}

.section:not(.sable)::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(1100px, 90vw);
  height: 340px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%,
              rgba(179, 129, 58, 0.075), transparent 70%);
}

/* =============================================================
   2. ORNEMENTS
   ============================================================= */

/* ---- separateur arabesque ----
   Pose par js/design.js entre les grandes sections. Le trait se
   tire du centre vers les bords, le losange central s'ouvre. */
.orne {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(1.4rem, 4vw, 3rem) var(--pad);
  pointer-events: none;
}

.orne i {
  display: block;
  height: 1px;
  width: clamp(60px, 16vw, 230px);
  background: linear-gradient(90deg, transparent, var(--or-clair));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.orne i + i {
  background: linear-gradient(90deg, var(--or-clair), transparent);
  transform-origin: left center;
}

.orne svg {
  width: clamp(22px, 3vw, 30px);
  height: auto;
  color: var(--or);
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
  transition: opacity 0.7s ease 0.25s,
              transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}

.orne.vu i { transform: scaleX(1); }
.orne.vu svg { opacity: 1; transform: rotate(0) scale(1); }

/* ---- l'etoile vit dans le separateur, pas dans les sur-titres ----
   `.surtitre::before` porte deja la barre oblique et
   `.surtitre--filet::after` le filet qui se trace : les deux
   pseudo-elements sont pris. On n'y touche pas. */

/* =============================================================
   3. CURSEUR SIGNATURE
   ============================================================= */

/* Un anneau dore qui suit la souris avec un leger retard, et un
   point plein qui, lui, colle au pixel. Il grandit au-dessus des
   liens et se remplit au-dessus des photographies. Seulement sur
   les appareils a souris : au doigt, il n'existe pas. */
.pointeur,
.pointeur__point {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}

.pointeur {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(207, 162, 97, 0.9);
  transition: opacity 0.35s ease,
              width 0.3s var(--t),
              height 0.3s var(--t),
              margin 0.3s var(--t),
              background-color 0.3s ease,
              border-color 0.3s ease;
}

.pointeur__point {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--or-clair);
}

body.pointeur-actif .pointeur,
body.pointeur-actif .pointeur__point { opacity: 1; }

/* Au-dessus d'un lien ou d'un bouton : l'anneau s'ouvre. */
.pointeur.sur-lien {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  background: rgba(207, 162, 97, 0.16);
  border-color: rgba(207, 162, 97, 0.55);
}

/* Au-dessus d'une photographie : il se remplit. */
.pointeur.sur-image {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: rgba(207, 162, 97, 0.25);
  border-color: transparent;
}

/* =============================================================
   4. HERO
   ============================================================= */

/* ---- eclat qui traverse le mot dore ----
   Une lumiere passe sur « Casher » toutes les six secondes, comme
   sur une dorure a chaud. */
.hero h1 em {
  background: linear-gradient(100deg,
              var(--or) 0%, var(--or) 38%,
              #f6e2bb 48%, #fff6e4 52%, #f6e2bb 56%,
              var(--or) 66%, var(--or) 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dorure 6.5s ease-in-out 1.6s infinite;
}

@keyframes dorure {
  0%, 62%, 100% { background-position: 100% 0; }
  86%           { background-position: 0 0; }
}

/* Essaye puis retire : un degrade creme en bas du hero pour
   adoucir la coupure avec la section suivante. A l'ecran il
   posait un voile laiteux sur le bas de la photographie. La
   coupure nette est meilleure. */

/* ---- respiration du voile ----
   Le voile chaud du hero s'epaissit et s'allege tres lentement :
   l'image n'est jamais tout a fait figee. */
.hero .voile {
  animation: respire 14s ease-in-out infinite;
}

@keyframes respire {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.88; }
}

/* =============================================================
   5. IMAGES — DEVOILEMENT
   =============================================================

   Il y avait ici un « rideau dore » : un voile qui glissait sur la
   photographie pendant qu'elle se decouvrait. Il etait pose sur
   `.maison .visuel::after`.

   Ce meme pseudo-element sert depuis au filet dore decale, celui que
   la cliente aime. Les deux se sont ecrases l'un l'autre : le filet
   heritait du `translateX(101%)` du rideau et partait a 530 px sur la
   droite, ce qui donnait a l'accueil une barre de defilement
   horizontale de 488 px — invisible tant qu'on n'avait pas defile,
   puisque le rideau ne s'ouvre qu'a ce moment-la.

   Le filet reste, le rideau part. Le devoilement se fait par le seul
   decoupage de l'image, qui n'a besoin ni de pseudo-element ni de
   depassement. Constate et corrige le 16/09/2026. */

.rideau {
  position: relative;
}

.rideau > img,
.rideau > picture {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(0.76, 0, 0.24, 1);
}

.rideau.ouvert > img,
.rideau.ouvert > picture {
  clip-path: inset(0 0 0 0);
}

/* `.maison .visuel img` porte deja sa propre `transition` dans
   style.css, plus specifique que `.rideau > img`. On la reecrit ici
   pour que le devoilement garde son mouvement. */
.maison .visuel.rideau > img {
  transition: clip-path 1.15s cubic-bezier(0.76, 0, 0.24, 1),
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.9s ease;
}

/* =============================================================
   6. MAISONS
   ============================================================= */

/* ---- numerotation ----
   Chaque maison porte son rang en chiffre romain, en gros, tres
   pale, derriere son titre. Un repere de mise en page, pas une
   information. */
.maison .texte { position: relative; }

.maison .texte::before {
  content: attr(data-rang);
  position: absolute;
  top: -0.55em;
  right: 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 1;
  color: var(--or);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translateY(14px);
  transition: opacity 0.9s ease 0.2s, transform 0.9s var(--t) 0.2s;
}

.maison.vue .texte::before {
  opacity: 0.11;
  transform: translateY(0);
}

/* ---- la photographie se rechauffe au survol ----
   Pas de voile pose par-dessus : c'est l'image elle-meme qui
   retrouve ses couleurs. */
.maison .visuel img {
  filter: saturate(0.84) contrast(1.02) brightness(0.97);
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.9s ease;
}

.maison:hover .visuel img {
  filter: saturate(1.06) contrast(1) brightness(1);
}

/* ---- entree en cascade ----
   La classe est posee par js/design.js : si le script ne tourne
   pas, les blocs restent simplement visibles. */
.maison--anime {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.maison--anime.vue {
  opacity: 1;
  transform: none;
}

/* ---- les etiquettes se posent l'une apres l'autre ---- */
.maison--anime .meta span {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s var(--t),
              border-color var(--t), color var(--t), background-color var(--t);
  transition-delay: calc(0.3s + var(--e, 0) * 0.09s);
}

.maison--anime.vue .meta span {
  opacity: 1;
  transform: none;
}

.maison .meta span:hover {
  border-color: var(--or-clair);
  color: var(--brun);
}

/* =============================================================
   7. MOSAIQUE
   ============================================================= */

/* Chaque vignette derive a sa propre vitesse au defilement : la
   grille respire au lieu de glisser d'un bloc. */
.mosaique figure img {
  will-change: transform;
}

/* Legende tiree du texte alternatif, posee par js/design.js. */
.mosaique figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2.6rem 1.1rem 0.95rem;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(47, 39, 32, 0.8));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.6s var(--t);
  pointer-events: none;
}

.mosaique figure:hover figcaption {
  opacity: 1;
  transform: none;
}

/* =============================================================
   7 bis. CADRE DORE
   ============================================================= */

/* Un filet blanc qui se retire du bord de la photographie au
   survol. C'est un element reel et non un pseudo-element : les
   `::before` et `::after` de ces blocs servent deja ailleurs. */
.cadre {
  position: absolute;
  inset: 12px;
  z-index: 3;
  border: 1px solid rgba(250, 246, 239, 0.6);
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 0.55s ease, transform 0.8s var(--t);
  pointer-events: none;
}

.maison .visuel:hover .cadre,
.mosaique figure:hover .cadre,
.duo .visuel:hover .cadre {
  opacity: 1;
  transform: scale(1);
}

/* =============================================================
   7 ter. CADRE DECALE DU DUO
   ============================================================= */

/* La grande photographie de presentation recoit un filet dore
   decale, pose derriere elle. C'est le geste le plus visible de
   la page : il donne tout de suite l'air d'une mise en page
   dessinee plutot que d'une image collee. */
.duo .visuel {
  isolation: isolate;
}

.duo .visuel > .cadre {
  --decal: 22px;
  inset: auto;
  top: var(--decal);
  left: calc(var(--decal) * -1);
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--or-clair);
  opacity: 0.65;
  transform: none;
  transition: top 0.9s var(--t), left 0.9s var(--t), opacity 0.6s ease;
}

.duo .visuel:hover > .cadre {
  --decal: 30px;
  opacity: 1;
}

@media (max-width: 780px) {
  .duo .visuel > .cadre { --decal: 10px; }
  .duo .visuel:hover > .cadre { --decal: 12px; }
}

/* =============================================================
   8. BOUTONS
   ============================================================= */

/* Un balayage dore traverse le bouton au survol, sous le texte. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg,
              transparent 0%,
              rgba(255, 246, 228, 0.42) 45%,
              rgba(255, 246, 228, 0.42) 55%,
              transparent 100%);
  transform: translateX(-130%) skewX(-14deg);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn:hover::after { transform: translateX(130%) skewX(-14deg); }

/* La fleche des liens souligne se dessine. */
.lien-fleche {
  position: relative;
  overflow: hidden;
}

/* =============================================================
   9. CARTE DES PLATS
   ============================================================= */

/* ---- apparition en cascade ----
   Les plats d'une rubrique montent l'un apres l'autre, par
   paquets de huit pour que l'attente reste courte. */
.plat.entree-plat {
  opacity: 0;
  transform: translateY(22px);
  animation: monte-plat 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--p, 0) * 0.045s);
}

@keyframes monte-plat {
  to { opacity: 1; transform: none; }
}

/* =============================================================
   10. DIVERS
   ============================================================= */

/* ---- chiffres : un filet dore se tire sous chacun ---- */
.chiffre {
  position: relative;
  padding-bottom: 0.9rem;
}

.chiffre::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--or), transparent);
  transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s;
}

.chiffres.vu .chiffre::after { width: 72%; }

/* ---- entete : verre depoli des qu'on quitte le haut de page ---- */
.entete.figee {
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
}

/* ---- pied de page : liens qui se soulignent de gauche a droite ---- */
.pied ul a {
  position: relative;
  display: inline-block;
}

.pied ul a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--or-clair);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--t);
}

.pied ul a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---- pied de page : le meme zellige, en or sur le brun ----
   Le bas de page etait un aplat brun. Le motif l'habille sans
   gener la lecture : il ne tient que sur les bords. */
.pied {
  position: relative;
  overflow: hidden;
}

.pied::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23cfa261' stroke-width='0.9' opacity='0.3'%3E%3Cpath d='M60 8 76 24 60 40 44 24Z'/%3E%3Cpath d='M60 80 76 96 60 112 44 96Z'/%3E%3Cpath d='M8 60 24 44 40 60 24 76Z'/%3E%3Cpath d='M80 60 96 44 112 60 96 76Z'/%3E%3Cpath d='M60 40 80 60 60 80 40 60Z'/%3E%3Cpath d='M24 24 44 24 44 44'/%3E%3Cpath d='M96 24 76 24 76 44'/%3E%3Cpath d='M24 96 44 96 44 76'/%3E%3Cpath d='M96 96 76 96 76 76'/%3E%3Ccircle cx='60' cy='60' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 154px 154px;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 50% 50%, transparent 40%, #000 100%);
  mask-image: radial-gradient(ellipse 65% 70% at 50% 50%, transparent 40%, #000 100%);
}

.pied > * { position: relative; z-index: 1; }

/* Un filet dore ferme la page. */
.pied::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity: 0.6;
}

/* ---- bande d'appel : un halo qui monte du bas ---- */
.bande {
  position: relative;
  overflow: hidden;
}

.bande::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: min(900px, 86vw);
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%,
              rgba(179, 129, 58, 0.16), transparent 68%);
}

.bande > * { position: relative; z-index: 1; }

/* ---- ruban : il ralentit quand on le survole ---- */
.ruban:hover .piste-ruban {
  animation-play-state: paused;
}

/* ---- bandes photo : un liseré d'or en haut et en bas ---- */
.bande-image::before,
.bande-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--or-clair), transparent);
  opacity: 0.7;
}

.bande-image::before { top: 0; }
.bande-image::after  { bottom: 0; }

/* =============================================================
   11. TELEPHONE
   ============================================================= */

@media (max-width: 780px) {
  /* Le motif de zellige devient trop dense sur une colonne. */
  .section.sable::before { opacity: 0.3; background-size: 90px 90px; }

  /* Le chiffre romain passerait sous le titre : on le retire. */
  .maison .texte::before { display: none; }

  /* Le grain est deja donne par la densite de l'ecran. */
  body::after { opacity: 0.3; }
}

/* Pas de curseur dessine sur les appareils tactiles. */
@media (hover: none), (pointer: coarse) {
  .pointeur, .pointeur__point { display: none !important; }
}

/* =============================================================
   12. MOUVEMENT REDUIT
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero h1 em {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--or);
    color: var(--or);
  }

  .hero .voile { animation: none; }

  .rideau > img,
  .rideau > picture {
    clip-path: none;
    transition: none;
  }

  .maison--anime,
  .maison--anime .meta span {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .maison .texte::before { transform: none; }

  .plat.entree-plat {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .orne i { transform: scaleX(1); }
  .orne svg { opacity: 1; transform: none; }

  .pointeur, .pointeur__point { display: none !important; }
}

/* =============================================================
   13. LA PHRASE D'AIDE DE LA BANNIERE
   ============================================================= */

/* Le bouton jumeau retire, la phrase restait seule et flottante sur
   la photographie. Un filet dore la tient, et elle gagne le corps
   qu'elle n'avait pas quand elle n'etait qu'une note a cote d'un
   bouton. */
.panier-appel__aide--seule {
  display: block;
  max-width: 44ch;
  padding-left: clamp(0.9rem, 2vw, 1.3rem);
  border-left: 1px solid var(--or-clair);
  font-size: 0.86rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

.panier-appel__aide--seule b {
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.04em;
}

@media (max-width: 620px) {
  .panier-appel__aide--seule { max-width: none; }
}


/* =============================================================
   11. REGISTRE CLASSIQUE — 15/09/2026
   Le vocabulaire d'une belle carte imprimee : filets d'or,
   losanges, petites capitales, chiffres romains. Rien de
   clinquant ; ce sont des traits de 1 px qui portent l'elegance.
   ============================================================= */

/* ---- ornement de titre ----
   Sous chaque titre de section, un losange entre deux filets.
   Il se trace au moment ou la section apparait. */
.section-tete h2 { position: relative; }

.section-tete h2::after {
  content: '';
  display: block;
  margin: 1.1rem 0 0;
  width: min(210px, 100%);
  height: 7px;
  background:
    linear-gradient(var(--or-clair), var(--or-clair)) left center / calc(50% - 11px) 1px no-repeat,
    linear-gradient(var(--or-clair), var(--or-clair)) right center / calc(50% - 11px) 1px no-repeat;
  position: relative;
}

.section-tete.centre h2::after { margin-left: auto; margin-right: auto; }

/* Le losange, pose au centre du filet */
.section-tete h2::before {
  content: '◆';
  position: absolute;
  left: min(105px, 50%);
  bottom: -0.34em;
  transform: translateX(-50%);
  font-size: 0.42rem;
  color: var(--or);
  line-height: 1;
}

.section-tete.centre h2::before { left: 50%; }

/* ---- photographies des maisons : le filet decale ----
   Un cadre d'or pose derriere la photo, legerement en biais.
   C'est le geste qui fait « mise en page dessinee ». */
.maison .visuel {
  isolation: isolate;
  overflow: visible;
}

.maison .visuel img { border-radius: var(--r); position: relative; z-index: 1; }

.maison .visuel::after {
  content: '';
  position: absolute;
  --decal: 20px;
  top: var(--decal);
  left: calc(var(--decal) * -1);
  width: 100%;
  height: 100%;
  border: 1px solid var(--or-clair);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  transition: top 0.9s var(--t), left 0.9s var(--t), opacity 0.6s ease;
}

.maison:nth-child(even) .visuel::after { left: auto; right: calc(var(--decal) * -1); }
.maison:hover .visuel::after { --decal: 28px; opacity: 1; }

/* La photo garde son recadrage : le cadre deborde, pas l'image. */
.maison .visuel { border-radius: 0; }

/* ---- le chiffre romain se pose sur un filet ---- */
.maison.vue .texte::before { opacity: 0.16; }

/* ---- puces d'information : de la pilule au cartouche ----
   Les coins ronds sonnaient « application » ; un rectangle a
   filet et de petites capitales sonnent « carte de restaurant ».
   La cliente y tient : « j'aime les cadres ». */
.maison .meta span,
.puces-infos span {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.63rem;
  padding: 0.5rem 1rem;
  transition: border-color var(--t), color var(--t), background var(--t);
}

/* Sur le creme de l'accueil : filet dore, texte brun, fond nu. */
.maison .meta span {
  border-color: var(--or-clair);
  background: transparent;
  color: var(--texte);
}

.maison .meta span:hover { border-color: var(--or); color: var(--encre); }

/* Sur une photographie : plus de cartouche. La cliente a change
   d'avis (16/09/2026, « j'aime pas les cadres ») : ni filet ni fond,
   les informations se lisent comme une ligne de texte, chacune
   precedee d'un petit losange d'or (devant chacune, pas entre elles :
   au retour a la ligne, toutes les lignes commencent pareil). La lisibilite sur les photos claires (table
   de Chabbat) tient a une ombre portee plus marquee, pas a un fond. */
.puces-infos { gap: 0.4rem 0; align-items: center; }

.puces-infos span {
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: relative;
  padding: 0.3rem 0 0.3rem 1.05rem;
  margin-right: 1.8rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(20, 14, 8, 0.85), 0 0 14px rgba(20, 14, 8, 0.6);
}

.puces-infos span::before {
  content: '';
  position: absolute;
  left: 1px; top: calc(0.3rem + 0.5lh - 3px);
  width: 5px; height: 5px;
  background: var(--or-clair);
  transform: rotate(45deg);
}

.puces-infos span:hover { color: #fff; }

/* ---- le lien du menu : le filet se prolonge ---- */
.lien-fleche { position: relative; border-bottom-color: transparent; }

.lien-fleche::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--or);
  transform: scaleX(0.42);
  transform-origin: left;
  transition: transform 0.7s var(--t);
}

.lien-fleche:hover::after { transform: scaleX(1); }

/* ---- separateur entre deux sections ----
   Un losange isole, pour respirer sans ouvrir un nouveau bloc. */
.ornement {
  display: block;
  text-align: center;
  color: var(--or-clair);
  font-size: 0.6rem;
  letter-spacing: 1.4em;
  padding: clamp(2rem, 5vw, 3.4rem) 0 0;
  text-indent: 1.4em;
}

/* ---- le cadre decale se retire quand la place manque ----
   Sous 900 px la photo occupe toute la largeur : le filet serait
   coupe net par le bord de l'ecran. */
@media (max-width: 1100px) {
  .maison .visuel::after { --decal: 12px; }
  .maison:hover .visuel::after { --decal: 16px; }
}

@media (max-width: 900px) {
  .maison .visuel::after { display: none; }
}

/* ---- moins de mouvement : les filets sont deja traces ---- */
@media (prefers-reduced-motion: reduce) {
  .maison .visuel::after,
  .lien-fleche::after { transition: none; }
}

/* ---- les onglets de rubrique passent au cartouche ----
   Meme vocabulaire que les puces d'information : angle vif,
   filet d'or, petites capitales. Le site parle d'une seule voix. */
.menu-nav button {
  border-radius: 0;
  border-color: var(--or-clair);
  background: transparent;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
}

.menu-nav button.actif {
  background: var(--or);
  border-color: var(--or);
}

/* Le bouton de commande, lui, garde sa forme : c'est l'action
   principale, elle a le droit de se distinguer. */

/* =============================================================
   12. VIDEO DU HERO — 15/09/2026
   Marrakech au couchant, Jemaa el-Fna, le zellige, la lanterne,
   puis la salle dressee. Treize secondes, en boucle, sans son.
   Le fond, le fondu et le repli sur la photo sont deja tenus par
   `.fond__video` et `.fond--video-prete` : il ne reste ici que
   l'ombre du hero a corriger.
   ============================================================= */

/* La video porte deja un voile sombre a gauche, incruste au montage :
   celui du site s'allege pour ne pas empiler deux fois la meme ombre
   et noyer le titre. */
.hero .fond--video-prete ~ .voile,
.hero .fond.fond--video-prete + .voile {
  background:
    linear-gradient(180deg, rgba(52, 40, 29, 0.58) 0%, rgba(52, 40, 29, 0.14) 32%, rgba(52, 40, 29, 0.86) 100%),
    linear-gradient(90deg, rgba(52, 40, 29, 0.58) 0%, rgba(52, 40, 29, 0.22) 46%, transparent 72%);
  transition: background 1s ease;
}

/* =============================================================
   13. SCEAU DE CACHEROUT — 15/09/2026
   L'anneau de texte dessine pour le site laisse la place au sceau
   officiel de la Commission de cacheroute de Casablanca. Une marque
   de certification ne tourne pas et ne clignote pas : elle se pose,
   franche, avec juste l'ombre qu'il faut pour tenir sur la photo.
   ============================================================= */
.sceau {
  margin: 0;
  width: clamp(104px, 11vw, 158px);
  height: clamp(104px, 11vw, 158px);
  display: block;
  filter: drop-shadow(0 10px 26px rgba(30, 20, 12, 0.45));
  transition: transform 0.6s var(--t);
}

.sceau img { width: 100%; height: 100%; display: block; }

.sceau:hover { transform: scale(1.04); }

/* L'anneau dessine et l'etoile n'ont plus lieu d'etre. */
.sceau::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .sceau { transition: none; }
}

/* =============================================================
   14. AVIS — 15/09/2026
   La section disait les chiffres, elle ne les mettait pas en scene.
   Le medaillon de note devient une piece a part entiere, les etoiles
   se remplissent une a une, et les temoignages entrent en cascade,
   dans le meme vocabulaire classique que le reste du site.
   ============================================================= */

/* ---- le medaillon de note ----
   Surtout ne pas toucher a `position` ici : la carte est `sticky` sur
   grand ecran et `static` en dessous de 980 px. Cette feuille etant
   chargee apres style.css, un simple `position: relative` ecrasait les
   deux — le medaillon cessait de suivre la lecture des temoignages, et
   se chevauchait avec eux sur telephone. Le `sticky` existant suffit
   d'ailleurs a ancrer le filet pose en `absolute` ci-dessous.
   ---- */

/* Un filet d'or double, pose en retrait du bord : la marque d'un
   encadrement imprime plutot que d'une carte d'interface. */
.note-cle::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--or-clair);
  opacity: 0.45;
  border-radius: 2px;
  pointer-events: none;
}

.note-cle > * { position: relative; z-index: 1; }

/* Le grand chiffre respire davantage, et le « / 5 » se detache. */
.note-cle__chiffre { color: var(--brun-2); }
.note-cle__chiffre span { font-family: var(--sans); letter-spacing: .1em; }

/* Le sur-titre de la maison porte son filet, comme les eyebrows. */
.note-cle__maison { position: relative; padding-bottom: .7rem; }
.note-cle__maison::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 1px; width: 46px;
  background: var(--or);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--t) .2s;
}
.note-cle.vue .note-cle__maison::after,
.reveal.vue .note-cle__maison::after { transform: scaleX(1); }

/* ---- les etoiles se remplissent une a une ---- */
.avis__etoiles span { color: var(--ligne); transition: color .4s ease; }
.avis__etoiles span.pleine { color: var(--or); }

/* Tant que la section n'est pas vue, aucune etoile n'est doree ;
   js/avis.js les allume ensuite, a un quart de seconde d'intervalle. */
.avis__etoiles.sequence span.pleine { color: var(--ligne); }
.avis__etoiles.sequence span.pleine.allumee { color: var(--or); }

/* ---- les sources : des lignes de carte, avec leur pointille ---- */
.note-cle__sources li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.note-cle__sources li b { order: 2; flex: 0 0 auto; }
.note-cle__sources li::after {
  content: '';
  order: 1;
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: .18em;
  background-image: linear-gradient(90deg, var(--ligne) 40%, transparent 0);
  background-size: 5px 1px;
  background-repeat: repeat-x;
}

/* ---- les temoignages ---- */
.temoignage {
  position: relative;
  transition: transform .7s var(--t), box-shadow .7s var(--t);
}

.temoignage:hover { transform: translateY(-4px); }

/* Le guillemet devient un vrai ornement : grand, dore, assume. */
.temoignage__guillemet {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: .7;
  color: var(--or-clair);
  opacity: .5;
  top: .5rem;
  right: 1.4rem;
  transition: opacity .6s ease, transform .6s var(--t);
}
.temoignage:hover .temoignage__guillemet { opacity: .85; transform: translateY(-3px); }

/* Un filet d'or se trace sous les etoiles a l'entree de la carte. */
.temoignage .avis__etoiles { position: relative; display: inline-block; padding-bottom: .7rem; }
.temoignage .avis__etoiles::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--or-clair);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--t) .35s;
}
.temoignage.vue .avis__etoiles::after { transform: scaleX(1); }

/* L'auteur passe en petites capitales, la source reste discrete. */
.temoignage__auteur { letter-spacing: .04em; }
.temoignage__source {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* ---- entree en cascade ----
   Chaque temoignage entre un cran apres le precedent. */
.temoignage[data-d="1"] { transition-delay: .12s; }
.temoignage[data-d="2"] { transition-delay: .24s; }
.temoignage[data-d="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .note-cle__maison::after,
  .temoignage .avis__etoiles::after { transform: scaleX(1); transition: none; }
  .avis__etoiles.sequence span.pleine { color: var(--or); }
  .temoignage:hover { transform: none; }
}


/* =============================================================
   15. LOGOS DES RESTAURANTS SUR LE HERO — 17/09/2026
   Un calque de plus sur la video, rien d'autre : position absolue,
   hors du flux, sous le menu. Le titre, les boutons et le sceau
   gardent exactement leur place. Verre discret pour rester lisible
   sur la video sans la masquer.
   ============================================================= */
.hero-logos {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(104px, 13vh, 132px);
  z-index: 3;
  pointer-events: none;
}

.hero-logos__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-logo {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 1.15rem 0.45rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(40, 30, 22, 0.26);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  opacity: 0;
  animation: heroLogoEntre 0.9s var(--t) forwards;
  transition: transform 0.4s var(--t), background 0.4s var(--t), border-color 0.4s var(--t);
}

.hero-logo:nth-child(1) { animation-delay: 0.5s; }
.hero-logo:nth-child(2) { animation-delay: 0.62s; }
.hero-logo:nth-child(3) { animation-delay: 0.74s; }
.hero-logo:nth-child(4) { animation-delay: 0.86s; }

.hero-logo__monogramme {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(207, 162, 97, 0.75);
  border-radius: 50%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--or-clair);
  transition: background 0.4s var(--t), color 0.4s var(--t);
}

.hero-logo__nom {
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(30, 20, 12, 0.4);
}

.hero-logo:hover,
.hero-logo:focus-visible {
  transform: translateY(-2px);
  background: rgba(40, 30, 22, 0.42);
  border-color: rgba(207, 162, 97, 0.8);
}

.hero-logo:hover .hero-logo__monogramme,
.hero-logo:focus-visible .hero-logo__monogramme {
  background: var(--or-clair);
  color: #fff;
}

@keyframes heroLogoEntre {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Telephone : deux par ligne, compacts. */
@media (max-width: 620px) {
  .hero-logos { top: 102px; }
  .hero-logos__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .hero-logo {
    gap: 0.5rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    min-width: 0;
  }
  .hero-logo__monogramme { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
  /* « L'Atelier de David » passe sur deux lignes plutot que d'etre coupe. */
  .hero-logo__nom {
    font-size: 0.95rem;
    line-height: 1.05;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; opacity: 1; transition: none; }
  .hero-logo:hover, .hero-logo:focus-visible { transform: none; }
}


/* =============================================================
   16. HERO — AFFINAGE DU DESIGN — 17/09/2026
   « amelioration de design hero sans changer la video ». La video,
   les textes et les liens ne bougent pas ; seules changent les
   couches posees dessus.
   ============================================================= */

/* ---- voile : la video respire ----
   L'ancien voile brun couvrait tout l'ecran. Il ne reste qu'une ombre
   en haut (pour le menu), une en bas, et un halo sous le texte en bas
   a gauche. Le centre et la droite de la video retrouvent leur couleur. */
.hero .voile,
.hero .fond--video-prete ~ .voile,
.hero .fond.fond--video-prete + .voile {
  background:
    linear-gradient(180deg, rgba(28, 20, 14, 0.58) 0%, rgba(28, 20, 14, 0) 24%),
    linear-gradient(0deg, rgba(28, 20, 14, 0.66) 0%, rgba(28, 20, 14, 0) 48%),
    linear-gradient(90deg, rgba(28, 20, 14, 0.62) 0%, rgba(28, 20, 14, 0.3) 38%, rgba(28, 20, 14, 0) 62%),
    radial-gradient(90% 80% at 0% 88%, rgba(28, 20, 14, 0.55) 0%, rgba(28, 20, 14, 0) 70%);
}

/* ---- titre : moins massif, plus fin ---- */
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin-bottom: 2.1rem;
  text-shadow: 0 2px 24px rgba(20, 14, 10, 0.35);
}

.hero h1 em {
  margin-left: clamp(0px, 3vw, 56px);
  /* Le mot dore est peint dans le texte (background-clip) : text-shadow
     n'y prend pas, une ombre portee en filtre si. */
  filter: drop-shadow(0 2px 12px rgba(20, 14, 10, 0.6));
}

/* Ornement au-dessus du titre : filet, losange, filet. Aucun mot. */
.hero-grille > div::before {
  content: '';
  display: block;
  width: 132px;
  height: 10px;
  margin-bottom: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='10'%3E%3Cline x1='0' y1='5' x2='56' y2='5' stroke='%23cfa261' stroke-width='1'/%3E%3Cpath d='M66 1l4 4-4 4-4-4z' fill='%23cfa261'/%3E%3Cline x1='76' y1='5' x2='132' y2='5' stroke='%23cfa261' stroke-width='1'/%3E%3C/svg%3E") no-repeat left center;
  /* Pas d'animation : une regle anterieure du site neutralise celles
     des pseudo-elements, l'ornement restait a opacite 0. */
}

/* ---- boutons ---- */
.hero-actions .btn {
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.6);
}

.hero-actions .btn.clair {
  background: rgba(28, 20, 14, 0.22);
  border-color: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-actions .btn.clair:hover { border-color: var(--or-clair); }

/* ---- logos : une seule barre de verre ----
   Les quatre pastilles separees deviennent une barre fine ; les
   maisons y sont separees par un filet dore, les noms prennent les
   petites capitales espacees du menu. */
.hero-logos__liste {
  width: max-content;
  max-width: 100%;
  gap: 0;
  padding: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(28, 20, 14, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hero-logo {
  position: relative;
  padding: 0.45rem 1.25rem 0.45rem 0.5rem;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-logo + .hero-logo { padding-left: 1.1rem; }

.hero-logo + .hero-logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: rgba(207, 162, 97, 0.45);
}

.hero-logo__monogramme {
  width: 1.95rem;
  height: 1.95rem;
  font-size: 1.05rem;
  border-color: rgba(207, 162, 97, 0.6);
}

.hero-logo__nom {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-logo:hover,
.hero-logo:focus-visible {
  transform: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

/* Telephone : la barre devient un bloc de deux sur deux. */
@media (max-width: 620px) {
  .hero-logos__liste {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0.25rem;
    border-radius: 22px;
  }
  .hero-logo,
  .hero-logo + .hero-logo {
    padding: 0.4rem 0.6rem 0.4rem 0.5rem;
    border-radius: 18px;
  }
  .hero-logo:nth-child(3)::before { display: none; }
  .hero-logo:nth-child(n+3)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(207, 162, 97, 0.3);
  }
  .hero-logo__monogramme { width: 1.7rem; height: 1.7rem; font-size: 0.92rem; }
  .hero-logo__nom { font-size: 0.62rem; letter-spacing: 0.14em; line-height: 1.3; }
}



/* =============================================================
   17. BARRE DES LOGOS UN PEU PLUS PETITE — 17/09/2026
   « diminuer le logo un petit peu pour rejoindre la taille du hero » :
   environ 15 % de moins sur la hauteur, les initiales et les noms.
   ============================================================= */
.hero-logos__liste { padding: 0.25rem; }

.hero-logo { padding: 0.32rem 1rem 0.32rem 0.38rem; gap: 0.55rem; }
.hero-logo + .hero-logo { padding-left: 0.9rem; }

.hero-logo__monogramme { width: 1.6rem; height: 1.6rem; font-size: 0.9rem; }

.hero-logo__nom { font-size: 0.64rem; letter-spacing: 0.18em; }

@media (max-width: 620px) {
  .hero-logos__liste { padding: 0.2rem; border-radius: 18px; }
  .hero-logo,
  .hero-logo + .hero-logo { padding: 0.3rem 0.5rem 0.3rem 0.4rem; gap: 0.45rem; border-radius: 14px; }
  .hero-logo__monogramme { width: 1.45rem; height: 1.45rem; font-size: 0.8rem; }
  .hero-logo__nom { font-size: 0.57rem; letter-spacing: 0.13em; }
}


/* =============================================================
   18. TELEPHONE — CORRECTIONS — 17/09/2026
   « je veux responsive sur telephone ». Audit des 9 pages en
   360 / 390 / 430 px : quatre defauts corriges ici.
   ============================================================= */

/* ---- sceau cacher ----
   Pose en bas a droite, il tombait sur le bouton « Zones de livraison »
   des que les boutons passent l'un sous l'autre. Il remonte a cote de
   la derniere ligne du titre, un peu plus petit. */
@media (max-width: 620px) {
  .sceau {
    width: 80px;
    height: 80px;
    right: 20px;
    bottom: calc(clamp(3.5rem, 8vw, 6rem) + 58px + 2.1rem);
  }
}

@media (max-width: 480px) {
  /* Deux boutons de 58 px et l'espace de 0,9rem qui les separe. */
  .sceau { bottom: calc(clamp(3.5rem, 8vw, 6rem) + 130px + 2.1rem); }
}

/* ---- sur-titres des bandeaux ----
   Petites capitales dorees sur une photo claire : une ombre douce les
   detache sans rien changer a leur couleur. */
.banniere .surtitre,
.banniere .fil,
.hero .fil {
  text-shadow: 0 1px 12px rgba(20, 14, 10, 0.8), 0 0 2px rgba(20, 14, 10, 0.5);
}

/* ---- boutons pleine largeur ----
   Sous 480 px ils prennent 100 % de la largeur, mais gardaient leur
   marge laterale : 5 px de trop, bouton decentre. */
@media (max-width: 480px) {
  .bande .btn { margin-left: 0; margin-right: 0; }
}

/* ---- pied de page : tarifs de livraison ----
   « ses tarifs » etait plus gros que le nom du restaurant, et les deux
   ne partageaient pas la meme ligne de base. */
.pied .tarif-pied { align-items: baseline; }
.pied .tarif-pied > span { font-size: 0.75rem; }


/* =============================================================
   19. LOGOS : MEME STYLE SUR ORDINATEUR QUE SUR TELEPHONE — 17/09/2026
   « je veux pas comme ca [la barre en ligne] ; le design que je vois
   sur le telephone, je le veux pareil ». La barre horizontale disparait :
   partout, un bloc de verre deux sur deux, filets dores entre les cases.
   ============================================================= */
.hero-logos__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 440px;
  max-width: 100%;
  gap: 0;
  padding: 0.25rem;
  border-radius: 22px;
}

.hero-logo,
.hero-logo + .hero-logo {
  padding: 0.45rem 0.8rem 0.45rem 0.5rem;
  border-radius: 18px;
}

.hero-logo:nth-child(3)::before { display: none; }

.hero-logo:nth-child(n+3)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(207, 162, 97, 0.3);
}

@media (max-width: 620px) {
  .hero-logos__liste { width: 100%; padding: 0.2rem; border-radius: 18px; }
  .hero-logo,
  .hero-logo + .hero-logo { padding: 0.3rem 0.5rem 0.3rem 0.4rem; border-radius: 14px; }
}

/* « L'Atelier de traiteur de David » (17/09/2026) : nom plus long.
   Le bloc s'elargit un peu sur ordinateur, et un nom trop long passe
   a la ligne au lieu de sortir du verre. */
.hero-logos__liste { width: 500px; }
.hero-logo { min-width: 0; }
.hero-logo__nom { white-space: normal; line-height: 1.3; }
@media (max-width: 620px) {
  .hero-logos__liste { width: 100%; }
}

/* « diminuer le logo » (17/09/2026) : bloc plus petit partout. */
.hero-logos__liste { width: 400px; padding: 0.2rem; border-radius: 16px; }
.hero-logo,
.hero-logo + .hero-logo { padding: 0.28rem 0.5rem 0.28rem 0.35rem; gap: 0.4rem; border-radius: 12px; }
.hero-logo__monogramme { width: 1.3rem; height: 1.3rem; font-size: 0.72rem; }
.hero-logo__nom { font-size: 0.54rem; letter-spacing: 0.12em; line-height: 1.25; }
@media (max-width: 620px) {
  .hero-logos__liste { width: 100%; max-width: 300px; }
  .hero-logo,
  .hero-logo + .hero-logo { padding: 0.25rem 0.4rem 0.25rem 0.3rem; gap: 0.35rem; }
  .hero-logo__monogramme { width: 1.2rem; height: 1.2rem; font-size: 0.66rem; }
  .hero-logo__nom { font-size: 0.5rem; letter-spacing: 0.1em; }
}

/* « comme le PC » sur telephone (17/09/2026) : chaque nom sur UNE ligne.
   Les deux colonnes prennent la largeur de leurs noms au lieu d'etre
   egales : la longue « L'Atelier de traiteur de David » a sa place. */
@media (max-width: 620px) {
  .hero-logos__liste {
    width: max-content;
    max-width: 100%;
    grid-template-columns: auto auto;
  }
  .hero-logo__nom { white-space: nowrap; letter-spacing: 0.08em; }
}

/* Boutons du hero « comme le PC » sur telephone (17/09/2026) : cote a
   cote, a la largeur de leur texte, au lieu de deux barres pleine largeur. */
@media (max-width: 620px) {
  .hero-actions { flex-wrap: nowrap; gap: 0.5rem; }
  .hero-actions .btn {
    width: auto;
    flex: 0 1 auto;
    padding: 0.85rem 1rem;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    justify-content: center;
  }
  .sceau { bottom: calc(clamp(3.5rem, 8vw, 6rem) + 44px + 2.1rem); }
}
@media (max-width: 340px) {
  .hero-actions .btn { padding: 0.8rem 0.7rem; letter-spacing: 0.06em; }
}
@media (max-width: 340px) {
  .sceau { width: 62px; height: 62px; right: 14px; }
}


/* =============================================================
   20. TELEPHONE : LA MEME MISE EN PAGE QUE SUR ORDINATEUR — 18/09/2026
   « sur telephone je vois pas comme sur PC, je veux meme design ».
   Les colonnes qui s'empilaient sous 1000 px restent cote a cote, le
   menu du haut redevient visible, la mosaique garde ses 4 cases.
   Les tailles suivent deja la largeur de l'ecran (clamp + vw), donc
   tout retrecit au lieu de deborder.
   ============================================================= */

@media (max-width: 1000px) {
  /* Blocs restaurant, duos photo + texte, livraison, pied de page :
     deux colonnes, comme sur ordinateur. */
  .maison { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(0.7rem, 3vw, 4.5rem); }
  .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(0.8rem, 3vw, 5.5rem); }
  .bloc-livraison { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(0.8rem, 3vw, 5rem); }
  .pied-grille { grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(1rem, 3vw, 4rem); }

  /* Carte des plats : deux colonnes comme sur grand ecran. */
  .plats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 3.5rem); }

  /* Galerie : les quatre cases d'origine. */
  .mosaique { grid-template-columns: repeat(4, 1fr); }
  .mosaique .m1 { grid-column: span 2; grid-row: span 2; }
  .mosaique .m3 { grid-column: span 1; grid-row: span 2; }
  .mosaique .m5 { grid-column: span 2; grid-row: span 1; }

  /* Formulaire de contact : deux colonnes. */
  .formulaire { grid-template-columns: 1fr 1fr; }
}

/* ---- le menu du haut, visible sans ouvrir le tiroir ----
   Sept entrees : elles tiennent en petites capitales serrees, et la
   barre glisse du doigt si l'ecran est vraiment etroit. */
@media (max-width: 1050px) {
  .burger { display: none; }

  .nav,
  .nav.ouverte {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.45rem, 2vw, 2rem);
    background: none;
    border: 0;
    padding: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav::-webkit-scrollbar { display: none; }

  .nav a,
  .entete:not(.figee) .nav a {
    width: auto;
    padding: 0.3rem 0;
    border-bottom: 0;
    white-space: nowrap;
    font-size: clamp(0.5rem, 1.7vw, 0.72rem);
  }

  .nav a::after { display: block; }

  .entete .wrap { gap: clamp(0.5rem, 2vw, 1.5rem); }
  .marque { font-size: clamp(1rem, 3.4vw, 1.5rem); white-space: nowrap; }
}

/* Deux reglages pour que la mise en page d'ordinateur tienne vraiment
   sur un telephone (18/09/2026) :
   — la carte des plats garde ses deux colonnes, mais son texte, ses
     prix et son bouton « + » retrecissent pour ne pas pousser la page ;
   — le formulaire de contact, lui, se trouve DANS une colonne de 177 px :
     a deux colonnes, ses champs feraient 88 px. Il reste sur une colonne. */
@media (max-width: 620px) {
  .plats { gap: 0 0.7rem; }
  .plats > * { min-width: 0; }
  .plat { font-size: 0.82rem; }
  .plat .haut { gap: 0.15rem; }
  .plat .nom { font-size: 0.88rem; }
  .plat .prix { font-size: 0.78rem; white-space: nowrap; }
  .plat .desc { font-size: 0.72rem; }
  .plat .ajout { width: 1.6rem; height: 1.6rem; flex: none; }
  /* Le nom du plat doit pouvoir passer a la ligne : sinon
     « Beignet de Poulet Caramelise » pousse la page vers la droite. */
  .plat .haut { flex-wrap: wrap; gap: 0.1rem 0.5rem; }
  .plat .nom { min-width: 0; overflow-wrap: anywhere; flex: 1 1 100%; }
  .plat .prix { margin-left: auto; }
  .formulaire { grid-template-columns: 1fr; }
  .formulaire .large { grid-column: auto; }
}

/* Le menu sur sa propre ligne (18/09/2026) : colle au titre, il etait
   minuscule et coupe. L'entete tient sur deux lignes — la marque, puis
   les sept entrees, qui glissent du doigt si besoin. */
@media (max-width: 1050px) {
  .entete .wrap {
    flex-wrap: wrap;
    min-height: 0;
    padding-top: 0.55rem;
    padding-bottom: 0.35rem;
    row-gap: 0.2rem;
  }
  .nav,
  .nav.ouverte {
    order: 3;
    flex: 0 0 100%;
    gap: clamp(0.7rem, 3.4vw, 2rem);
    padding-bottom: 0.25rem;
  }
  .nav a,
  .entete:not(.figee) .nav a {
    font-size: clamp(0.6rem, 2.6vw, 0.78rem);
    padding: 0.25rem 0;
    min-height: 0;
  }
  .marque { font-size: clamp(1.05rem, 4.4vw, 1.6rem); }
  /* Le bloc des logos suit la nouvelle hauteur de l'entete. */
  .hero-logos { top: clamp(112px, 15vh, 140px); }
}
@media (max-width: 620px) {
  .hero-logos { top: 112px; }
}

/* Couleur des liens du menu sur telephone (18/09/2026). L'ancienne
   regle les peignait en brun fonce : c'etait la couleur du tiroir
   deroulant, sur fond creme. Poses sur la photo, ils devenaient
   illisibles. Clairs sur la photo, fonces quand la barre blanchit. */
@media (max-width: 1050px) {
  .entete:not(.figee) .nav a {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 10px rgba(20, 14, 10, 0.75);
  }
  .entete.figee .nav a { color: var(--texte); text-shadow: none; }
  .entete:not(.figee) .nav a.actif { color: var(--or-clair); }
}


/* =============================================================
   21. HORAIRES DE COMMANDE, JOUR PAR JOUR — 18/09/2026
   « je veux voir cette commande automatique pour chaque jour ».
   Sept lignes, le jour du moment souligne d'or, et l'etat en cours.
   ============================================================= */
.horaires__liste {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: grid;
  gap: 0;
}

.horaire {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.2rem;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.95rem;
}

.horaire:last-child { border-bottom: 0; }

.horaire__jour {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--encre);
}

.horaire__creneaux {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
  white-space: nowrap;
}

/* Aujourd'hui : un filet dore et les chiffres en or. */
.horaire--jour {
  background: linear-gradient(90deg, rgba(207, 162, 97, 0.12), transparent 70%);
  border-left: 2px solid var(--or);
  padding-left: 0.7rem;
}

.horaire--jour .horaire__creneaux { color: var(--or); }

.horaires__etat {
  max-width: 560px;
  margin: 1.4rem auto 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.horaires__feu {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b04a3a;
  flex: none;
}

.horaires__etat--ouvert { color: var(--encre); }
.horaires__etat--ouvert .horaires__feu { background: #3f7d4e; }


/* =============================================================
   22. TELEPHONE : RETOUR A L'EMPILEMENT — 18/09/2026
   La section 20 forcait la mise en page d'ordinateur sur telephone
   (deux colonnes partout). A l'ecran, la cliente a vu des colonnes
   de texte de 8 mots, une photo minuscule et une pastille coupee :
   « j'aime pas cette version sur telephone ».
   On retrouve donc l'empilement — meme identite, memes couleurs,
   memes blocs, mais chacun sur toute la largeur. Ce qui reste de la
   section 20 : le menu du haut visible, les logos et les boutons du
   hero comme sur ordinateur.
   ============================================================= */
@media (max-width: 1000px) {
  .maison,
  .duo,
  .bloc-livraison,
  .formulaire { grid-template-columns: minmax(0, 1fr); }

  .pied-grille { grid-template-columns: minmax(0, 1fr); }

  .plats { grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }

  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .mosaique .m1 { grid-column: span 2; grid-row: span 2; }
  .mosaique .m3 { grid-row: span 1; }
  .mosaique .m5 { grid-column: span 2; }
}

/* Les tailles reviennent a la normale : la carte des plats n'a plus a
   se serrer dans une demi-colonne. */
@media (max-width: 620px) {
  .plat { font-size: 1rem; }
  .plat .nom { font-size: 1.15rem; flex: 1 1 auto; }
  .plat .prix { font-size: 0.9rem; }
  .plat .desc { font-size: 0.85rem; }
  .plat .ajout { width: 2rem; height: 2rem; }
  .plat .haut { gap: 0.3rem 0.9rem; }
}


/* =============================================================
   23. AVIS — COMPOSITION OUVERTE — 22/09/2026
   « je veux les avis en manière stylée ». La section empilait deux
   cartes encadrees — un filet double autour de la note, un cadre
   autour de chaque temoignage — et laissait un grand vide sous la
   note. On retire les cadres (la cliente n'en veut pas), on pose la
   note comme une piece imprimee, et les temoignages deviennent des
   citations separees par un filet d'or.
   ============================================================= */

/* ---- la note : plus de carte, une colonne ---- */
.note-cle {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 clamp(1.4rem, 2.6vw, 2.6rem) 0 0;
}

.note-cle::before { content: none; }

/* Un filet vertical separe la note des temoignages, au lieu du cadre. */
@media (min-width: 981px) {
  .note-cle::after {
    content: '';
    position: absolute;
    top: 0.4rem;
    right: 0;
    width: 1px;
    height: calc(100% - 0.8rem);
    background: linear-gradient(180deg, var(--or-clair), rgba(207, 162, 97, 0));
    opacity: 0.6;
  }
}

.note-cle__chiffre { font-size: clamp(5rem, 8vw, 7.6rem); }

/* ---- les temoignages : des citations, pas des cartes ---- */
.temoignage {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  overflow: visible;
}

/* Un filet d'or entre deux citations ; rien apres la derniere. */
.temoignage + .temoignage {
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--ligne);
}

.temoignage:hover { transform: none; box-shadow: none; }

/* Le guillemet passe a gauche, en ouverture de citation, et prend de
   l'ampleur : c'est lui qui « signe » le bloc. */
.temoignage__guillemet {
  top: -0.18em;
  right: auto;
  left: -0.02em;
  font-size: clamp(5rem, 9vw, 7rem);
  opacity: 0.16;
}

.temoignage blockquote {
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.62;
  padding-left: clamp(1.6rem, 3vw, 2.6rem);
}

/* L'auteur suit la meme retrait que la citation. */
.temoignage figcaption,
.temoignage .temoignage__auteur,
.temoignage .temoignage__source {
  padding-left: clamp(1.6rem, 3vw, 2.6rem);
}

.avis__temoignages { gap: 0; }

/* ---- le pied de section ---- */
.avis__autres { border-top: 1px solid var(--ligne); }

/* Le guillemet reste un ornement de fond : il ne doit jamais passer
   devant les etoiles ni devant le texte (22/09/2026). */
.temoignage { position: relative; }
.temoignage__guillemet { z-index: 0; }
.temoignage .avis__etoiles,
.temoignage blockquote,
.temoignage figcaption,
.temoignage .temoignage__auteur,
.temoignage .temoignage__source { position: relative; z-index: 1; }

@media (max-width: 620px) {
  .temoignage__guillemet { font-size: 3.6rem; top: -0.1em; opacity: 0.13; }
  .temoignage blockquote,
  .temoignage figcaption,
  .temoignage .temoignage__auteur,
  .temoignage .temoignage__source { padding-left: 1rem; }
  .temoignage .avis__etoiles { padding-left: 1rem; }
}


/* =============================================================
   24. TELEPHONE — LISIBILITE ET FINITION — 22/09/2026
   « je veux la version PC bien stylee, et le telephone aussi ».
   Le design ne change pas : seules les tailles trop petites (8 a
   10,9 px, illisibles au soleil) remontent a 11,5 px minimum, et les
   zones a toucher atteignent la hauteur du pouce.
   ============================================================= */
@media (max-width: 620px) {
  /* Menu du haut : 10,1 px -> 11,5 px, il glisse toujours du doigt. */
  .nav a,
  .entete:not(.figee) .nav a { font-size: 0.72rem; letter-spacing: 0.12em; }

  /* Logos du hero : le nom passe de 8 a 10,5 px, l'initiale suit. */
  .hero-logos__liste { width: max-content; max-width: 100%; }
  .hero-logo__nom { font-size: 0.66rem; letter-spacing: 0.1em; }
  .hero-logo__monogramme { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; }

  /* Boutons du hero : 9,3 px -> 11,5 px. */
  .hero-actions .btn { font-size: 0.72rem; padding: 0.9rem 0.9rem; letter-spacing: 0.08em; }

  /* Petites capitales du site : sur-titres, etiquettes, libelles de
     formulaire, sources d'avis, titres de prestation. */
  .surtitre,
  .fil,
  .genre,
  .etiquette,
  .maison .meta span,
  .chiffre .etiquette,
  .avis__source,
  .temoignage__source,
  .note-cle__maison,
  .prestation h4,
  .atout .num,
  .formulaire label,
  .horaire__creneaux,
  .horaires__etat,
  .menu-nav button,
  .pied a,
  .footer a,
  figcaption { font-size: 0.72rem; }

  /* Zones a toucher : au moins 40 px de haut. */
  .pied a,
  .footer a,
  .avis__lien,
  .avis__autres-liens a,
  .lien-fleche,
  .menu-nav button { min-height: 40px; display: inline-flex; align-items: center; }

  /* Un peu d'air entre les sections, sans changer leur ordre. */
  main > section { padding-top: clamp(3.2rem, 11vw, 4.6rem); }
}

/* Derniers textes sous 11,4 px sur telephone (22/09/2026) : titres du
   pied de page, libelles du tiroir de commande, puces de banniere,
   noms des logos et lien Instagram des fiches. */
@media (max-width: 620px) {
  .pied h4,
  .footer h4 { font-size: 0.74rem; }
  .hero-logo__nom { font-size: 0.72rem; }
  .puces-infos span,
  .cascade { font-size: 0.72rem; }
  .panier__tiroir label,
  .panier__tiroir label span,
  .panier__champ span,
  .panier__vider,
  .source,
  .insta { font-size: 0.74rem; }
}

/* Les quatre derniers cas (22/09/2026) : « sur demande » a la place du
   prix chez Chabbat, les legendes de la galerie du traiteur, le lien
   Instagram des fiches de contact, et la source de la citation. */
@media (max-width: 620px) {
  .plat .prix.vide,
  .temoignage figcaption,
  .mosaique figcaption,
  .fiche .insta,
  .citation .source { font-size: 0.74rem; }
}


/* =============================================================
   25. TABLETTE — MEME PLANCHER DE LISIBILITE — 22/09/2026
   Le balayage des dix largeurs n'a trouve qu'un defaut : en tablette
   portrait (768 px), les memes petites capitales retombaient sous
   11,4 px, parce que le plancher de la section 24 s'arretait a 620 px.
   Il monte donc jusqu'a 1024 px. Au-dela, l'ordinateur garde ses
   tailles d'origine.
   ============================================================= */
@media (min-width: 621px) and (max-width: 1024px) {

  /* Menu du haut : 10,1 px -> 11,5 px, il glisse toujours du doigt. */
  .nav a,
  .entete:not(.figee) .nav a { font-size: 0.72rem; letter-spacing: 0.12em; }

  /* Logos du hero : le nom passe de 8 a 10,5 px, l'initiale suit. */
  .hero-logos__liste { width: max-content; max-width: 100%; }
  .hero-logo__nom { font-size: 0.66rem; letter-spacing: 0.1em; }
  .hero-logo__monogramme { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; }

  /* Boutons du hero : 9,3 px -> 11,5 px. */
  .hero-actions .btn { font-size: 0.72rem; padding: 0.9rem 0.9rem; letter-spacing: 0.08em; }

  /* Petites capitales du site : sur-titres, etiquettes, libelles de
     formulaire, sources d'avis, titres de prestation. */
  .surtitre,
  .fil,
  .genre,
  .etiquette,
  .maison .meta span,
  .chiffre .etiquette,
  .avis__source,
  .temoignage__source,
  .note-cle__maison,
  .prestation h4,
  .atout .num,
  .formulaire label,
  .horaire__creneaux,
  .horaires__etat,
  .menu-nav button,
  .pied a,
  .footer a,
  figcaption { font-size: 0.72rem; }

  /* Zones a toucher : au moins 40 px de haut. */
  .pied a,
  .footer a,
  .avis__lien,
  .avis__autres-liens a,
  .lien-fleche,
  .menu-nav button { min-height: 40px; display: inline-flex; align-items: center; }

  /* Un peu d'air entre les sections, sans changer leur ordre. */

  .pied h4,
  .footer h4 { font-size: 0.74rem; }
  .hero-logo__nom { font-size: 0.72rem; }
  .puces-infos span,
  .cascade { font-size: 0.72rem; }
  .panier__tiroir label,
  .panier__tiroir label span,
  .panier__champ span,
  .panier__vider,
  .source,
  .insta { font-size: 0.74rem; }

  .plat .prix.vide,
  .temoignage figcaption,
  .mosaique figcaption,
  .fiche .insta,
  .citation .source { font-size: 0.74rem; }
}

/* Les trois derniers cas de la tablette (22/09/2026) : le genre des
   maisons, le sur-titre et le total du tiroir de commande. */
@media (max-width: 1024px) {
  .maison .genre,
  .panier__surtitre,
  .panier__total span,
  .panier__total strong { font-size: 0.74rem; }
}


/* =============================================================
   26. LA FENETRE D'AVIS DEVIENT UN BANDEAU SUR TELEPHONE — 22/09/2026
   Vue sur un telephone, elle recouvrait la page entiere au bout de
   quelques secondes de lecture. Elle se pose maintenant en bas de
   l'ecran, sans voile sombre : on continue de lire le site, et on
   repond quand on veut.
   ============================================================= */
.popavis--bas {
  align-items: flex-end;
  padding: 0;
}

.popavis--bas .popavis__voile { display: none; }

.popavis--bas .popavis__boite {
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding: 1.3rem 1.2rem 1.5rem;
  box-shadow: 0 -18px 50px -24px rgba(47, 39, 32, 0.55);
  transform: translateY(100%);
  border-top: 1px solid var(--or-clair);
}

.popavis--bas.popavis--ouvert .popavis__boite { transform: none; }

/* Le texte se resserre : un bandeau, pas une page. */
.popavis--bas .popavis__boite h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.popavis--bas .popavis__boite p { font-size: 0.82rem; margin-bottom: 0.9rem; }
.popavis--bas .popavis__surtitre { font-size: 0.7rem; }
.popavis--bas .popavis__go { width: 100%; justify-content: center; }
.popavis--bas .popavis__tard { margin-top: 0.6rem; min-height: 40px; }
.popavis--bas .popavis__x { top: 0.6rem; right: 0.8rem; }

/* Le menu du telephone glisse du doigt : un fondu sur le bord droit
   dit que la suite existe, au lieu de paraitre coupee (22/09/2026). */
@media (max-width: 1050px) {
  .entete .wrap { position: relative; }
  .nav,
  .nav.ouverte {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    padding-right: 26px;
    scroll-padding-right: 26px;
  }
}

/* La pastille « Commandes fermées » des blocs de l'accueil : 11,2 px,
   dernier texte sous le plancher sur ecran tactile (22/09/2026). */
@media (max-width: 1024px) {
  .maison__pause { font-size: 0.74rem; }
}


/* =============================================================
   27. LE BANDEAU « COMMANDES FERMEES » — 22/09/2026
   « j'aime pas ce design-la » : c'etait une pastille encadree, posee
   sur la photo — un objet d'interface, pas du site. Elle devient une
   ligne composee : un losange d'or, la phrase en serif clair, l'heure
   de reouverture en petites capitales dorees sous un filet.
   ============================================================= */
.suspendu {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.55;
  color: #fff;
  text-shadow: 0 1px 14px rgba(20, 14, 10, 0.75);
  max-width: 44ch;
}

/* Le point rouge devient le losange d'or du site, pose devant la
   phrase et alignee avec sa premiere ligne. */
.suspendu__feu {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
  margin-right: 0.55rem;
}

.suspendu__feu::before {
  content: '\2666';
  color: var(--or-clair);
  font-size: 0.7em;
  vertical-align: 0.18em;
}

/* L'heure de reouverture : une ligne a part, en petites capitales
   dorees, separee par un filet fin. */
.suspendu__reprise {
  display: block;
  position: relative;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-clair);
  white-space: nowrap;
}

/* Un filet court, comme les sur-titres du site, plutot qu'un trait qui
   traverse toute la ligne. */
.suspendu__reprise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 1px;
  background: var(--or);
}