/* ==========================================================================
   LA FAMILLE — Le comptoir des amis
   Feuille de style principale. Utilisable telle quelle en statique ET chargée
   par le thème enfant WordPress (voir wordpress/lafamille-child/functions.php).
   Toutes les couleurs et typos sont des variables : un seul endroit à changer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Palette relevée directement sur les photos du restaurant : le bleu canard
   des murs, le laiton des suspensions et de l'enseigne, la craie des nappes.
   -------------------------------------------------------------------------- */
:root {
  --noir:          #14110F;
  --encre:         #1F1B17;
  --canard:        #10454C;
  --canard-fonce:  #08282D;
  --canard-clair:  #1C6670;
  --laiton:        #C9A227;
  --laiton-clair:  #E3C46B;
  --creme:         #F6F1E7;
  --creme-2:       #EBE2D2;
  --sable:         #D9CDB7;
  --gris:          #857C71;

  --fond:          var(--creme);
  --texte:         var(--encre);
  --texte-doux:    #5C554C;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-texte:   "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad-section: clamp(4.5rem, 9vw, 9rem);
  --gouttiere:   clamp(1.25rem, 5vw, 4rem);
  --max:         76rem;
  --max-texte:   38rem;

  --radius:      2px;
  --transition:  480ms cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset et base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-texte);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Les liens héritent de la couleur de leur contexte, dans TOUS leurs états.
   Sans la ligne :hover, le reset.css de Hello Elementor reprend la main avec
   son `a:active, a:hover { color: #333366 }` — un bleu qui n'a rien à faire
   ici, et qui gagne par spécificité sur un simple `a`. */
a { color: inherit; text-decoration: none; }
a:hover,
a:focus,
a:active { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.75rem, 7.5vw, 6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--noir); color: var(--creme);
  padding: .75rem 1.25rem; z-index: 999;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.contenu {
  width: min(100% - var(--gouttiere) * 2, var(--max));
  margin-inline: auto;
}
.contenu--large { --max: 92rem; }
.contenu--etroit { --max: 46rem; }

.section { padding-block: var(--pad-section); }
.section--sombre { background: var(--noir); color: var(--creme); }
.section--canard { background: var(--canard-fonce); color: var(--creme); }
.section--creme2 { background: var(--creme-2); }

/* Suréclat : petit label en capitales espacées, signature graphique du site */
.surtitre {
  font-family: var(--font-texte);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--laiton);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.surtitre::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  flex: none;
}
.surtitre--centre { justify-content: center; }
.surtitre--centre::after {
  content: ""; width: 2.25rem; height: 1px; background: currentColor;
}

.chapo {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: var(--max-texte);
}
.section--sombre .chapo,
.section--canard .chapo { color: rgba(246,241,231,.78); }

.centre { text-align: center; }
.centre .chapo { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn,
.elementor-widget-button.btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 2rem;
  font-family: var(--font-texte);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--laiton);
  background: var(--laiton);
  color: var(--noir);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover,
.elementor-widget-button.btn .elementor-button:hover { background: var(--laiton-clair); border-color: var(--laiton-clair); transform: translateY(-2px); }

.btn--fantome,
.elementor-widget-button.btn--fantome .elementor-button {
  background: transparent;
  color: var(--laiton);
}
.btn--fantome:hover { background: var(--laiton); color: var(--noir); }

.btn--clair,
.elementor-widget-button.btn--clair .elementor-button {
  background: transparent; color: currentColor; border-color: currentColor;
}
.btn--clair:hover { background: var(--creme); color: var(--noir); border-color: var(--creme); }

.groupe-btn { display: flex; flex-wrap: wrap; gap: 1rem; }
.groupe-btn--centre { justify-content: center; }

/* --------------------------------------------------------------------------
   5. En-tête / navigation
   Fond transparent au-dessus du hero, puis fond plein dès qu'on défile.
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.35rem var(--gouttiere);
  color: var(--creme);
  transition: background var(--transition), padding var(--transition),
              box-shadow var(--transition), color var(--transition);
}
.entete.est-defile {
  background: rgba(20,17,15,.94);
  backdrop-filter: blur(14px);
  padding-block: .9rem;
  box-shadow: 0 1px 0 rgba(246,241,231,.12);
}
/* Pages sans hero plein écran : entête opaque dès le chargement */
.entete.est-opaque { background: var(--noir); position: sticky; }

.entete__logo { display: flex; align-items: center; gap: .85rem; flex: none; }
.entete__logo img { width: 3.1rem; transition: width var(--transition); }
.entete.est-defile .entete__logo img { width: 2.6rem; }
.entete__logo span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  position: relative;
  padding-block: .3rem;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--laiton);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a:hover { color: var(--laiton-clair); }
.nav a[aria-current="page"] { color: var(--laiton-clair); }

.entete__actions { display: flex; align-items: center; gap: 1.1rem; }
.entete__tel {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
}
.entete .btn { padding: .8rem 1.5rem; }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(246,241,231,.4);
  background: transparent; cursor: pointer;
  padding: 0; border-radius: var(--radius);
  position: relative;
}
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 1.15rem; height: 1.5px; background: var(--creme);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity 180ms;
}
.burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 62rem) {
  .burger { display: block; }
  .entete__tel { display: none; }
  /* Sur mobile, logo + bouton « Réserver » + burger dépassaient la largeur de
     l'écran : le burger sortait du cadre et le menu devenait inaccessible.
     Tout est resserré pour tenir dès 360 px. */
  .entete { gap: .75rem; padding-inline: 1rem; }
  .entete__logo { gap: .6rem; }
  .entete__logo img,
  .entete.est-defile .entete__logo img { width: 2.5rem; }
  .entete__logo span { font-size: .85rem; letter-spacing: .1em; }
  .entete__actions { gap: .5rem; }
  .entete .btn { padding: .62rem 1rem; font-size: .68rem; letter-spacing: .08em; }
  .burger { width: 2.4rem; height: 2.4rem; }
  /* Le voile du menu est en « position: fixed » : sans ce rappel, il passerait
     par-dessus le logo ET par-dessus le burger, qui ne refermerait plus rien. */
  .entete.menu-ouvert .entete__logo,
  .entete.menu-ouvert .entete__actions { position: relative; z-index: 1; }

  /* Dès qu'on défile, l'entête prend un « backdrop-filter » — et un élément
     filtré devient le bloc conteneur de ses descendants en position fixed.
     Le voile du menu, censé couvrir l'écran, se retrouvait alors enfermé dans
     la barre d'entête : 84 px de haut, les deux premiers liens au-dessus du
     bord de l'écran. On retire le flou le temps que le menu est ouvert ;
     de toute façon il est entièrement recouvert. */
  .entete.est-defile.menu-ouvert {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Le voile du menu n'est jamais « display: none ». Passer de none à flex
     en même temps qu'on change la découpe empêche la transition de démarrer :
     l'ouverture était sèche, et sur Safari mobile le menu pouvait rester
     bloqué à circle(0) — ouvert pour le script, invisible pour l'oeil.
     On le garde donc dans le rendu et on le masque par visibility. */
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center;
    gap: 2rem;
    background: var(--noir);
    font-size: 1.1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .entete.menu-ouvert .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms ease, visibility 0s;
  }
  .nav a { font-size: 1rem; letter-spacing: .22em; }

  /* Les pastilles flottantes (réservation Zenchef, cookies) sont posées très
     haut dans la pile : sans cela elles flottent par-dessus le menu ouvert. */
  body.menu-ouvert iframe[src*="zenchef"],
  body.menu-ouvert .cookieadmin_re_consent,
  body.menu-ouvert .cookieadmin_law_container {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 62rem) and (prefers-reduced-motion: reduce) {
  .nav, .entete.menu-ouvert .nav { transition: none; }
}

/* iPhone SE et consorts : le nom écrit passe à la trappe, le pictogramme suffit. */
@media (max-width: 23rem) {
  .entete__logo span { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--creme);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: zoom-lent 22s ease-out forwards;
}
@keyframes zoom-lent { from { transform: scale(1.1); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }

.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,6,5,.88) 0%, rgba(8,6,5,.35) 45%, rgba(8,6,5,.55) 100%);
}

.hero__contenu {
  width: min(100% - var(--gouttiere) * 2, var(--max));
  margin-inline: auto;
  padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 9vh, 6rem);
}
.hero__eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .32em;
  text-transform: uppercase; color: var(--laiton-clair);
  margin: 0 0 1.5rem;
}
.hero h1 { max-width: 14ch; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--laiton-clair); }
.hero__chapo {
  margin: 2rem 0 2.6rem;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: rgba(246,241,231,.85);
}
.hero__pied {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.75rem;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(246,241,231,.22);
  font-size: .8rem; letter-spacing: .1em;
  color: rgba(246,241,231,.72);
}
.hero__pied strong { color: var(--creme); font-weight: 700; }

.hero__guru {
  position: absolute; z-index: 2;
  right: var(--gouttiere); bottom: clamp(9rem, 22vh, 13rem);
  width: clamp(5.5rem, 8vw, 7.5rem);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
@media (max-width: 62rem) { .hero__guru { display: none; } }

/* --------------------------------------------------------------------------
   7. Bandeau défilant
   -------------------------------------------------------------------------- */
.bandeau {
  background: var(--laiton);
  color: var(--noir);
  padding-block: .95rem;
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid rgba(20,17,15,.15);
}
.bandeau__piste {
  display: inline-flex;
  gap: 3.5rem;
  padding-right: 3.5rem;
  animation: defile 38s linear infinite;
}
.bandeau span {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 3.5rem;
}
.bandeau span::after { content: "✦"; font-size: .7em; opacity: .55; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau__piste { animation: none; } }

/* --------------------------------------------------------------------------
   8. Blocs deux colonnes
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.duo--inverse .duo__media { order: -1; }
@media (max-width: 55rem) { .duo--inverse .duo__media { order: 0; } }

.duo__media { position: relative; }
.duo__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo__media--paysage img { aspect-ratio: 4 / 3; }

/* Vignette en débord, l'un des effets « waow » : deuxième photo décalée */
.duo__media--empile { padding: 0 0 4.5rem 4.5rem; }
.duo__media--empile img:first-child { aspect-ratio: 3 / 4; }
.duo__media--empile .duo__vignette {
  position: absolute; left: 0; bottom: 0;
  width: 52%;
  border: 8px solid var(--fond);
}
.duo__media--empile .duo__vignette img { aspect-ratio: 1; }

.duo__signature {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--laiton);
}

/* --------------------------------------------------------------------------
   9. Cartes « les fondamentaux »
   -------------------------------------------------------------------------- */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.carte {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: var(--creme);
}
.carte img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.carte::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,6,5,.9) 12%, rgba(8,6,5,.15) 75%);
  transition: background var(--transition);
}
.carte:hover img { transform: scale(1.07); }
.carte:hover::after { background: linear-gradient(to top, rgba(8,40,45,.92) 12%, rgba(8,6,5,.25) 80%); }
.carte h3 { margin-bottom: .6rem; }
.carte p { font-size: .95rem; color: rgba(246,241,231,.8); margin: 0; }

/* --------------------------------------------------------------------------
   10. Bloc horaires / infos pratiques
   -------------------------------------------------------------------------- */
.infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.infos__bloc h3 {
  font-family: var(--font-texte);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1.1rem;
}
.horaires { list-style: none; margin: 0; padding: 0; }
.horaires li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(246,241,231,.14);
  font-size: .95rem;
}
.section--creme2 .horaires li,
body:not(.sombre) .infos--clair .horaires li { border-color: rgba(20,17,15,.12); }
.horaires li:last-child { border-bottom: 0; }
.horaires dt, .horaires .jour { font-weight: 600; }
.horaires .ferme { color: var(--gris); font-style: italic; }

/* --------------------------------------------------------------------------
   11. Carte / menu
   -------------------------------------------------------------------------- */
.menu-groupe + .menu-groupe { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.menu-groupe__titre {
  display: flex; align-items: baseline; gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.menu-groupe__titre::after {
  content: ""; flex: 1; height: 1px;
  background: currentColor; opacity: .22;
}
.plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.65rem; }
.plat { display: grid; gap: .3rem; }
.plat__ligne {
  display: flex; align-items: baseline; gap: .85rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.plat__nom { order: 1; flex: none; }
/* Les pointillés de liaison, entre le nom du plat et son prix */
.plat__ligne::after {
  content: ""; order: 2; flex: 1;
  border-bottom: 1px dotted currentColor; opacity: .35;
  transform: translateY(-.3em);
}
.plat__prix { order: 3; font-family: var(--font-texte); font-weight: 700; font-size: 1rem; flex: none; }
.plat__desc { font-size: .93rem; color: var(--texte-doux); max-width: 46rem; }
.section--sombre .plat__desc, .section--canard .plat__desc { color: rgba(246,241,231,.68); }

.ardoise {
  background: var(--canard-fonce);
  color: var(--creme);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid rgba(201,162,39,.35);
  position: relative;
}
/* Ligne de rappel sous le titre de l'ardoise : le rythme des services. */
.ardoise__sous-titre {
  margin-top: .85rem;
  font-family: var(--font-texte);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--laiton-clair);
}
.ardoise::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(201,162,39,.18); pointer-events: none;
}

/* --------------------------------------------------------------------------
   12. Galerie mosaïque + lightbox
   Colonnes CSS plutôt que grille : les photos se répartissent sans jamais
   laisser de case vide, quel que soit leur nombre et leur format.
   -------------------------------------------------------------------------- */
.mosaique { columns: 4 17rem; column-gap: .75rem; }
@media (max-width: 48rem) { .mosaique { columns: 2 9rem; } }

.mosaique__item {
  position: relative; display: block; overflow: hidden;
  width: 100%; margin: 0 0 .75rem;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  cursor: zoom-in; background: var(--sable);
  border: 0; padding: 0; line-height: 0;
}
.mosaique__item img {
  width: 100%; height: auto;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1), filter var(--transition);
}
.mosaique__item:hover img { transform: scale(1.06); filter: brightness(.85); }
.mosaique__item::after {
  content: "\FF0B";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2rem; color: var(--creme); line-height: 1;
  opacity: 0; transition: opacity var(--transition);
}
.mosaique__item:hover::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,6,5,.96);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.lightbox.est-ouverte { opacity: 1; visibility: visible; }
.lightbox img { max-height: 86vh; max-width: 100%; object-fit: contain; }
.lightbox__fermer, .lightbox__nav {
  position: absolute;
  background: transparent; border: 1px solid rgba(246,241,231,.35);
  color: var(--creme); cursor: pointer;
  width: 3rem; height: 3rem;
  font-size: 1.15rem; line-height: 1;
  transition: background var(--transition), border-color var(--transition);
}
.lightbox__fermer:hover, .lightbox__nav:hover { background: var(--laiton); border-color: var(--laiton); color: var(--noir); }
.lightbox__fermer { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav--prec { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__nav--suiv { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__compteur {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  color: rgba(246,241,231,.7); font-size: .8rem; letter-spacing: .2em;
}

/* --------------------------------------------------------------------------
   13. Partenaires
   -------------------------------------------------------------------------- */
.partenaires {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: 3.5rem;
}
.partenaire { text-align: center; }
.partenaire__img {
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  background: var(--creme);
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.partenaire__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter var(--transition), transform var(--transition);
}
.partenaire:hover .partenaire__img img { filter: grayscale(0); transform: scale(1.04); }
/* Variante logo : fond uni, pas de rognage ni de noir et blanc */
.partenaire__img--logo { background: var(--creme); }
.partenaire__img--logo img { object-fit: contain; padding: 1.75rem; filter: none; }
.partenaire:hover .partenaire__img--logo img { transform: scale(1.03); }
.partenaire h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.partenaire p { font-size: .9rem; color: var(--texte-doux); }
.section--sombre .partenaire p { color: rgba(246,241,231,.68); }
.section--sombre .partenaire__img { background: rgba(246,241,231,.06); }

/* --------------------------------------------------------------------------
   14. Citation pleine largeur
   -------------------------------------------------------------------------- */
.citation {
  position: relative;
  padding-block: clamp(6rem, 14vw, 11rem);
  text-align: center;
  color: var(--creme);
  isolation: isolate;
  overflow: hidden;
}
.citation img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.citation::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(8,28,31,.82);
}
.citation blockquote {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.15;
  font-style: italic;
  text-wrap: balance;
}
.citation cite {
  display: block; margin-top: 2rem;
  font-family: var(--font-texte); font-style: normal;
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--laiton-clair);
}

/* --------------------------------------------------------------------------
   15. Formulaire
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: 1.35rem; }
.champ { display: grid; gap: .5rem; }
.champ label {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--laiton);
}
.champ input, .champ select, .champ textarea {
  font-family: inherit; font-size: 1rem;
  padding: .95rem 1.1rem;
  background: transparent;
  border: 1px solid rgba(246,241,231,.28);
  color: inherit;
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--laiton); background: rgba(246,241,231,.04); outline: none;
}
.champ select option { color: var(--noir); }
.formulaire__duo {
  display: grid; gap: 1.35rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.formulaire__note { font-size: .82rem; color: rgba(246,241,231,.55); }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--noir); color: var(--creme); padding-block: clamp(4rem, 8vw, 6rem) 2rem; }
.pied__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(246,241,231,.14);
}
.pied__logo img { width: 5.5rem; margin-bottom: 1.5rem; }
.pied h4 {
  font-family: var(--font-texte);
  font-size: .74rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--laiton); margin-bottom: 1.2rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: .95rem; }
.pied a:hover { color: var(--laiton-clair); }
.pied__bas {
  padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .8rem; color: rgba(246,241,231,.5);
}
.reseaux { display: flex; gap: 1rem; }
.reseaux a {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 1px solid rgba(246,241,231,.25);
  border-radius: 50%;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.reseaux a:hover { background: var(--laiton); border-color: var(--laiton); color: var(--noir); }
.reseaux svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* --------------------------------------------------------------------------
   17. Barre d'action mobile (téléphone + réserver toujours accessibles)
   -------------------------------------------------------------------------- */
.barre-mobile {
  position: fixed; inset: auto 0 0; z-index: 90;
  display: none;
  background: rgba(20,17,15,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(246,241,231,.14);
}
.barre-mobile a {
  flex: 1;
  padding: 1rem .5rem;
  text-align: center;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--creme);
}
.barre-mobile a + a { border-left: 1px solid rgba(246,241,231,.14); background: var(--laiton); color: var(--noir); }
@media (max-width: 48rem) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 3.4rem; }
}

/* --------------------------------------------------------------------------
   18. Révélation au défilement
   Les éléments arrivent en fondu ; désactivé si l'utilisateur a demandé
   moins d'animations, et neutralisé sans JavaScript (voir <noscript>).
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1),
              transform 900ms cubic-bezier(.22,.61,.36,1);
}
.reveal.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   19. Bandeau haut de page intérieure
   Hauteur fixe et contenu centré verticalement : le titre tombe au même
   endroit sur toutes les pages, que le chapô fasse une ligne ou trois.
   Le h1 est plafonné plus bas que celui du hero, sans quoi un titre long
   comme « Le comptoir des amis » double de taille et casse la série.
   -------------------------------------------------------------------------- */
.entete-page {
  position: relative;
  min-height: clamp(20rem, 42vh, 27rem);
  display: grid;
  align-content: center;
  padding-block: clamp(6rem, 12vw, 8rem) clamp(3rem, 6vw, 4.5rem);
  color: var(--creme);
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
.entete-page img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.entete-page::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Voile allégé : à .78/.88 les photos disparaissaient sous le noir.
     Le contraste du texte blanc reste largement suffisant. */
  background: linear-gradient(to bottom, rgba(8,6,5,.58), rgba(8,28,31,.76));
}
.entete-page .surtitre { justify-content: center; margin-bottom: 1.5rem; }

/* Taille commune à tous les titres de page, indépendante de leur longueur */
.entete-page h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  text-wrap: balance;
}

/* Le chapô occupe toujours la même largeur ; sa hauteur variable n'affecte
   plus la position du titre, puisque le bloc est centré. */
.entete-page .chapo {
  margin-inline: auto;
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   20. Section parallaxe
   Quatre plans qui défilent à des vitesses différentes : le fond, le titre
   géant, deux photos flottantes, et le texte fixe au centre. Le décalage est
   appliqué en JavaScript (transform GPU), jamais en background-attachment —
   qui est cassé sur iOS et coûte cher en rendu.
   Désactivée sous 48rem et si l'utilisateur a demandé moins d'animations :
   la composition reste alors lisible, simplement figée.
   -------------------------------------------------------------------------- */
.parallaxe {
  position: relative;
  min-height: clamp(34rem, 82vh, 48rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--canard-fonce);
  color: var(--creme);
}

/* Plan 1 — le fond. Volontairement plus grand que la section : c'est cette
   marge qui permet de le déplacer sans découvrir de bord. */
.parallaxe__fond {
  position: absolute; inset: -12% 0; z-index: -3;
  will-change: transform;
}
.parallaxe__fond img { width: 100%; height: 100%; object-fit: cover; }

.parallaxe__voile {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse at center, rgba(8,40,45,.72) 0%, rgba(6,20,22,.94) 72%);
}

/* Plan 2 — le titre géant, en lettres évidées.
   Le centrage passe par la propriété « translate » et non par « transform » :
   le JavaScript écrit dans « transform », les deux ne doivent pas se marcher
   dessus (même raison pour la rotation des photos, en « rotate »). */
.parallaxe__geant {
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  translate: -50% -50%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 12rem);
  line-height: .88;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(227,196,107,.34);
  user-select: none; pointer-events: none;
  will-change: transform;
}
.parallaxe__geant span { display: block; }

/* Plan 3 — les deux photos flottantes */
.parallaxe__carte {
  position: absolute; z-index: 1;
  width: clamp(8rem, 15vw, 14rem);
  border: 7px solid var(--creme);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  will-change: transform;
}
.parallaxe__carte img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.parallaxe__carte--gauche { left: 5%;  top: 14%;    rotate: -6deg; }
.parallaxe__carte--droite { right: 6%; bottom: 12%; rotate: 5deg; }

/* Plan 4 — le texte, immobile : c'est le point d'ancrage du regard */
.parallaxe__contenu {
  position: relative; z-index: 2;
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
}
.parallaxe__contenu blockquote {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(6,20,22,.75);
}
.parallaxe__contenu cite {
  display: block; margin-top: 2.4rem;
  font-family: var(--font-texte); font-style: normal;
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--laiton-clair);
}

@media (max-width: 48rem) {
  .parallaxe__carte { display: none; }
  .parallaxe__geant { font-size: clamp(2.6rem, 17vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .parallaxe__fond, .parallaxe__geant, .parallaxe__carte { transform: none !important; }
  .parallaxe__carte--gauche { rotate: -6deg; }
  .parallaxe__carte--droite { rotate: 5deg; }
}

/* --------------------------------------------------------------------------
   21. Les photos d'ardoise
   La vraie ardoise du restaurant, photographiée et affichée telle quelle :
   c'est le contenu qui change le plus souvent, et le seul qui prouve que la
   carte suit réellement le marché. Trois clichés au maximum, légèrement
   inclinés, cliquables pour être lus en grand (lightbox).
   -------------------------------------------------------------------------- */
.ardoises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  /* Deux cadres seulement : sans plafond ils s'étalent sur toute la largeur
     et l'ardoise perd sa présence d'objet posé au mur. */
  max-width: 54rem;
  margin-inline: auto;
}
.ardoises__item {
  position: relative;
  display: block; width: 100%; padding: 0; border: 0;
  background: var(--noir);
  border: 10px solid var(--creme);
  box-shadow: 0 20px 48px rgba(20,17,15,.28);
  cursor: zoom-in;
  line-height: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ardoises__item:nth-child(1) { rotate: -1.4deg; }
.ardoises__item:nth-child(2) { rotate: .8deg; }
.ardoises__item:nth-child(3) { rotate: -.6deg; }
.ardoises__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px rgba(20,17,15,.36);
}
.ardoises__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* État vide : le cadre existe déjà, la photo viendra s'y poser */
.ardoises__vide {
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  padding: 2rem;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(246,241,231,.05) 0 12px, transparent 12px 24px),
    var(--canard-fonce);
  color: rgba(246,241,231,.5);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.8;
}

.ardoises__legende {
  margin-top: 1.75rem;
  font-size: .9rem;
  color: var(--texte-doux);
  text-align: center;
}

/* --------------------------------------------------------------------------
   22. Visite virtuelle (Google Street View intérieur)
   L'iframe n'est PAS chargée au chargement de la page : on affiche d'abord une
   photo de la salle, et la visite ne se lance qu'au clic. Deux raisons — la
   page reste légère, et aucun cookie Google n'est déposé tant que le visiteur
   n'a rien demandé.
   -------------------------------------------------------------------------- */
.visite__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--noir);
  border: 1px solid rgba(201,162,39,.28);
}
@media (max-width: 48rem) { .visite__cadre { aspect-ratio: 4 / 3; } }

.visite__cadre iframe { width: 100%; height: 100%; border: 0; display: block; }

.visite__amorce {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  background: transparent;
}
.visite__amorce img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Sur la façade, ce qui compte est dans le tiers haut : le store et
     l'enseigne. Centré, le cadrage 16/9 ne garderait que le bitume. */
  object-position: 50% 30%;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1), filter var(--transition);
}
.visite__amorce::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,28,31,.8), rgba(8,6,5,.35));
}
.visite__amorce:hover img { transform: scale(1.04); filter: brightness(.9); }

.visite__declencheur {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .9rem;
  padding: 1.1rem 2.2rem;
  background: var(--laiton); color: var(--noir);
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}
.visite__amorce:hover .visite__declencheur { background: var(--laiton-clair); transform: translateY(-2px); }
.visite__declencheur svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.visite__note {
  margin-top: 1.25rem;
  font-size: .84rem;
  color: var(--texte-doux);
  text-align: center;
}
.section--sombre .visite__note, .section--canard .visite__note { color: rgba(246,241,231,.6); }

/* --------------------------------------------------------------------------
   23. Module de réservation Zenchef
   Intégré en pleine page plutôt qu'en bulle flottante : le visiteur qui arrive
   sur la page contact réserve sans clic supplémentaire.
   -------------------------------------------------------------------------- */
.zenchef {
  background: var(--creme);
  border: 1px solid rgba(20,17,15,.12);
  overflow: hidden;
}
.zenchef iframe {
  width: 100%;
  height: clamp(30rem, 62vh, 40rem);
  border: 0;
  display: block;
}
.zenchef__replique {
  padding: 1rem 1.25rem;
  font-size: .84rem;
  text-align: center;
  border-top: 1px solid rgba(20,17,15,.12);
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   24. Bulle de réservation Zenchef
   Le widget se place tout seul en bas à droite. Sur mobile, notre barre
   « Appeler / Réserver » occupe déjà le bas de l'écran : on remonte la bulle
   pour qu'elles ne se recouvrent pas.
   Les sélecteurs sont volontairement larges — Zenchef ne garantit pas le nom
   de son conteneur, qui a déjà changé entre deux versions du SDK.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   25. Compatibilité Elementor
   Les sections sont montées en widgets Elementor natifs (titres, textes,
   boutons, images) posés dans des conteneurs qui portent nos classes de mise
   en page. Or Elementor met ses conteneurs en display:flex avec une
   spécificité (.elementor-element.e-con) qui bat nos classes. On rétablit
   notre mise en page là où elle doit gagner — et uniquement là.
   -------------------------------------------------------------------------- */
.elementor .contenu.duo { display: grid; }
.elementor .grille-cartes,
.elementor .partenaires,
.elementor .infos,
.elementor .mosaique { display: grid; }
.elementor .mosaique { display: block; }

/* Nos conteneurs gèrent leur propre largeur et leurs propres marges */
.elementor .contenu {
  width: min(100% - var(--gouttiere) * 2, var(--max));
  margin-inline: auto;
}

/* Espacement entre widgets. Elementor pose 20 px par défaut ; nos paragraphes
   portent déjà leur propre marge basse, mais les titres et les boutons ont
   besoin d'un rythme explicite, sinon tout se colle. */
/* Elementor pose sa propre règle .elementor-widget:not(:last-child) : à
   spécificité égale c'est l'ordre de chargement qui tranche, et il gagne.
   On passe donc par le conteneur parent pour prendre l'ascendant. */
.elementor .e-con > .elementor-widget:not(:last-child),
.elementor .e-con-inner > .elementor-widget:not(:last-child) {
  margin-block-end: 1.15rem;
}
.elementor .e-con > .elementor-widget-heading.surtitre:not(:last-child),
.elementor .e-con-inner > .elementor-widget-heading.surtitre:not(:last-child) {
  margin-block-end: 1.4rem;
}
.elementor .e-con > .elementor-widget-heading:not(.surtitre):not(:last-child),
.elementor .e-con-inner > .elementor-widget-heading:not(.surtitre):not(:last-child) {
  margin-block-end: 1.9rem;
}
.elementor .e-con > .elementor-widget-button:not(:last-child),
.elementor .e-con-inner > .elementor-widget-button:not(:last-child) {
  margin-block-end: .9rem;
}
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor .elementor-widget-heading .elementor-heading-title { color: inherit; }
.elementor .elementor-widget-text-editor { color: inherit; }

/* Le widget bouton d'Elementor : Elementor pose la classe personnalisée sur
   l'ENVELOPPE du widget, jamais sur le <a>. Sans ça, c'est la boîte qui prend
   le fond doré et le lien garde le style Elementor par défaut. On remet donc
   l'enveloppe à plat et on laisse les règles .btn ci-dessus habiller le lien. */
.elementor-widget-button.btn,
.elementor-widget-button.btn--fantome,
.elementor-widget-button.btn--clair {
  background: none;
  border: 0;
  padding: 0;
  transform: none;
}
.elementor-widget-button .elementor-button-wrapper { display: inline-flex; }
.elementor-widget-button .elementor-button {
  text-decoration: none;
  background-image: none;
}

/* Rembourrage des sections.
   Elementor applique le sien par des variables (--padding-block-start…) posées
   sur le conteneur. Plutôt que de lutter en spécificité avec des !important,
   on renseigne SES variables avec NOS valeurs : le mécanisme reste le sien,
   et le réglage redevient modifiable depuis l'interface si besoin. */
.elementor .e-con.section {
  --padding-block-start: var(--pad-section);
  --padding-block-end: var(--pad-section);
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}
.elementor .e-con.entete-page {
  --padding-block-start: clamp(7rem, 13vw, 9rem);
  --padding-block-end: clamp(3rem, 6vw, 4.5rem);
  --padding-inline-start: var(--gouttiere);
  --padding-inline-end: var(--gouttiere);
  min-height: clamp(20rem, 42vh, 27rem);
  justify-content: center;
}
/* Uniquement les conteneurs internes : posée sur une section, cette règle
   annulerait son rembourrage vertical (le cas s'est produit sur les blocs
   d'appel à l'action, qui portaient « section » et « centre » ensemble). */
.elementor .e-con-inner.contenu,
.elementor .e-con.contenu:not(.section),
.elementor .e-con.centre:not(.section),
.elementor .e-con.duo__media {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* Un conteneur Elementor est un flex : nos blocs centrés doivent le rester,
   et les colonnes d'un duo doivent s'empiler normalement. */
/* Elementor pose text-align: start sur ses conteneurs et gagne sur nos
   classes : on rétablit le centrage là où il est voulu. */
.elementor .e-con.centre,
.elementor .e-con.entete-page,
.elementor .e-con.entete-page .e-con { text-align: center; }
.elementor .e-con.centre { align-items: center; }
.elementor .e-con.entete-page > .e-con { align-items: center; }
.elementor .e-con.centre > .e-con-inner { align-items: center; }
.elementor .contenu.duo > .e-con { display: block; }

/* Les conteneurs Elementor sont en colonne : nos groupes de boutons doivent
   revenir en ligne, sinon les appels à l'action s'empilent. */
.elementor .e-con.groupe-btn {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  --padding-block-start: 0px; --padding-block-end: 0px;
  --padding-inline-start: 0px; --padding-inline-end: 0px;
}
.elementor .e-con.groupe-btn--centre { justify-content: center; }
.elementor .e-con.groupe-btn > .elementor-widget { width: auto; margin-block-end: 0; }

/* --------------------------------------------------------------------------
   26. Correctifs mobile
   -------------------------------------------------------------------------- */

/* Elementor impose « .elementor img { height: auto } », de même poids que nos
   règles mais chargé après : toutes nos images de fond en « object-fit: cover »
   retombaient à leur hauteur naturelle. Sur un écran étroit, la photo du hero
   ne faisait plus que 200 px de haut au lieu de 840. On reprend la main. */
.elementor .hero__media img,
.elementor .carte img,
.elementor .citation img,
.elementor .entete-page img,
.elementor .partenaire__img img,
.elementor .visite__amorce img,
.elementor .parallaxe__fond img { height: 100%; }

/* Les bandeaux de page prenaient jusqu'à 482 px sur un écran de 812 : le titre
   mangeait la moitié de la page et leur hauteur variait d'une page à l'autre
   au gré de la longueur du chapô. */
@media (max-width: 48rem) {
  /* Le bandeau est un conteneur Elementor : sa hauteur et son rembourrage se
     règlent par les variables du constructeur, pas par « padding ». */
  .entete-page,
  .elementor .e-con.entete-page {
    --padding-block-start: 6.5rem;
    --padding-block-end: 2.5rem;
    min-height: 17rem;
    padding-block: 6.5rem 2.5rem;
  }
  .entete-page .surtitre { margin-bottom: 1rem; }
  .entete-page .chapo { font-size: 1rem; }
}

/* La pastille Zenchef est fixée en bas à droite et, sur un écran étroit, elle
   couvre presque toute la largeur : elle masquait l'adresse et les horaires du
   hero, puis le bas du pied de page. On dégage la place sous les deux. */
@media (max-width: 48rem) {
  .hero__contenu { padding-block: 5rem 8.75rem; }
  .hero__eyebrow { margin-bottom: 1rem; }
  .hero__chapo { margin: 1.25rem 0 1.75rem; }
  .hero__pied { margin-top: 1.5rem; padding-top: 1.25rem; }
  .pied { padding-block-end: 6rem; }
}

/* Retour après envoi du formulaire de contact. */
.formulaire__retour {
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--laiton);
  background: rgba(201,162,39,.12);
  font-size: .95rem;
}
.formulaire__retour--ko { border-left-color: #c0564a; background: rgba(192,86,74,.14); }