@import url('polices.css');

/* ══════════════════════════════════════════════════════════════════
   Chez TOF — direction artistique
   Relevée sur son site d'origine : Josefin Sans en capitales fines et
   espacées, Lato en lecture, fond blanc, bruns chauds, l'or laiton en
   accent. On modernise le rythme et les respirations, pas l'univers.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --or:#b07f1e;
  --or-clair:#c99a3c;
  --terre:#c3512f;
  --brun-nuit:#2f291f;
  --brun:#43392e;
  --brun-doux:#7c6853;
  --creme:#f3f2f1;
  --creme-chaud:#f8f6f2;
  --gris:#575149;
  --blanc:#fff;
  --filet:#e4e0da;

  --titre:'Josefin Sans',Helvetica,Arial,sans-serif;
  --texte:'Lato',Helvetica,Arial,sans-serif;

  --large:1180px;
  --gouttiere:clamp(20px,5vw,48px);
  --entete-h:88px;
}

/* Le site est pensé en clair. On l'annonce pour que le navigateur
   n'inverse pas les couleurs et ne rende pas un texte illisible. */
:root{color-scheme:light}

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

html{-webkit-text-size-adjust:100%}
/* Le defilement glisse au lieu de sauter : les ancres de la carte, le retour
   en haut, le lien « Reserver » de l'en-tete. Jamais pour qui a demande moins
   d'animations a son systeme, et jamais pour les remises en place instantanees
   (fermeture du menu, changement de page) — celles-la passent en
   behavior:'instant' cote script. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  font-family:var(--texte);
  font-weight:400;
  font-size:17px;
  line-height:1.75;
  color:var(--gris);
  background:var(--blanc);
  overflow-x:hidden;          /* aucun débordement horizontal, jamais */
}

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

a{color:var(--brun);text-decoration:none}
a:hover{color:var(--or)}

/* Focus visible en permanence — on navigue au clavier. */
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.lien-evitement{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brun-nuit);color:#fff;padding:12px 20px;
}
.lien-evitement:focus{left:12px;top:12px}

/* ── Titres ─────────────────────────────────────────────────────── */

h1,h2,h3,h4{
  font-family:var(--titre);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--brun-nuit);
  margin:0 0 .6em;
  line-height:1.1;
}
h1{font-size:clamp(2.1rem,6vw,4rem);letter-spacing:.04em}
h2{font-size:clamp(1.5rem,3.4vw,2.35rem)}
h3{font-size:1.15rem;font-weight:600;letter-spacing:.1em}

.sur-titre{
  font-family:var(--titre);
  font-size:.82rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.24em;color:var(--or);
  margin:0 0 .9rem;
}

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

/* ── Trames ─────────────────────────────────────────────────────── */

.contenu{max-width:var(--large);margin:0 auto;padding:0 var(--gouttiere)}
.section{padding:clamp(56px,9vw,110px) 0}
.section--creme{background:var(--creme-chaud)}
.section--nuit{background:var(--brun-nuit);color:#d9d3c9}
.section--nuit h2,.section--nuit h3{color:#fff}
/* Un bouton porte ses propres couleurs, partout. Sans le :not(), la
   couleur de lien du fond sombre repeignait le texte du bouton or : il
   sortait en gris clair, illisible, et changeait au survol. */
.section--nuit a:not(.bouton){color:var(--or-clair)}

.duo{
  display:grid;gap:clamp(28px,5vw,64px);
  grid-template-columns:1fr;align-items:center;
}
@media(min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
  .duo--inverse .duo__image{order:2}
}

/* ── En-tête ────────────────────────────────────────────────────── */

.entete{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--entete-h);
  display:flex;align-items:center;
  transition:background .3s ease,box-shadow .3s ease;
}
.entete__barre{
  max-width:var(--large);margin:0 auto;padding:0 var(--gouttiere);
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.entete__logo img{width:170px;height:auto}
.entete__logo .logo--blanc{display:block}
.entete__logo .logo--sombre{display:none}

/* Posée sur une photo : transparente. Dès qu'on défile : fond blanc. */
.entete--pose{background:transparent}
.entete--pose .nav__lien{color:#fff}
.entete--pose .nav__contact{color:#fff;border-color:rgba(255,255,255,.75)}
.entete--pose .burger span{background:#fff}
/* Le sélecteur de langue est ajouté par un script partagé : il n'apparaît dans
   aucune des trois règles ci-dessus, et son bouton est en color:inherit. Il
   restait donc dans le brun de la marque, sur une photo sombre — invisible. */
.entete--pose .olo-lang{color:#fff}

.entete--fixee{background:var(--blanc);box-shadow:0 1px 0 var(--filet)}
.entete--fixee .logo--blanc{display:none}
.entete--fixee .logo--sombre{display:block}
.entete--fixee .nav__lien{color:var(--brun)}
.entete--fixee .nav__contact{color:var(--brun-nuit);border-color:var(--brun-nuit)}
.entete--fixee .burger span{background:var(--brun-nuit)}

/* ── Navigation ─────────────────────────────────────────────────── */

.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav__lien{
  font-family:var(--titre);font-size:.9rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;
  padding:6px 0;border-bottom:1px solid transparent;
}
.nav__lien:hover,.nav__lien[aria-current="page"]{border-bottom-color:var(--or)}
.nav__contact{
  font-family:var(--titre);font-size:.9rem;text-transform:uppercase;
  letter-spacing:.14em;padding:10px 20px;border:1px solid;
  transition:background .25s ease,color .25s ease;
}
.nav__contact:hover{background:var(--or);border-color:var(--or);color:#fff}

/* Le menu tenait sur une ligne jusqu'à ~1120 px, puis « LA CARTE » se
   coupait en deux avant que le burger ne prenne le relais à 900. Entre
   les deux, on resserre l'espacement plutôt que de casser les mots. */
.nav__lien{white-space:nowrap}
@media(max-width:1180px){
  .nav{gap:15px}
  .nav__lien{font-size:.82rem;letter-spacing:.09em}
  .nav__contact{font-size:.82rem;letter-spacing:.1em;padding:9px 15px}
}

/* ── Le choix de la langue ───────────────────────────────────────
   Deux sélecteurs dans la page : un menu déroulant à côté du bouton
   Réserver sur grand écran, la liste complète dans le tiroir sur
   téléphone. Chacun ne paraît que sur son format. */
.olo-lang--desk{display:none;margin-left:4px}
.olo-lang--mob{display:none}
@media(min-width:901px){.olo-lang--desk{display:block}}
@media(max-width:900px){
  .olo-lang--mob{
    display:flex;justify-content:center;gap:8px;margin-top:26px;
  }
  .olo-lang--mob button{
    background:transparent;border:1px solid rgba(255,255,255,.34);color:#fff;
    font-family:var(--titre);font-size:.82rem;letter-spacing:.12em;
    padding:9px 13px;cursor:pointer;transition:background .25s ease,border-color .25s ease;
  }
  .olo-lang--mob button:hover{border-color:var(--or)}
  .olo-lang--mob button[aria-current="true"]{background:var(--or);border-color:var(--or)}
}

.burger{
  display:none;width:44px;height:44px;padding:10px;
  background:none;border:0;cursor:pointer;
}
.burger span{display:block;height:2px;margin:5px 0;transition:transform .3s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:block}
  .nav{
    position:fixed;inset:var(--entete-h) 0 0 0;
    flex-direction:column;justify-content:flex-start;gap:6px;
    background:var(--brun-nuit);
    transform:translateX(100%);transition:transform .32s ease;
    overflow-y:auto;padding:30px var(--gouttiere) 60px;
  }
  /* Centré quand il y a la place, entier quand il n'y en a pas. Des marges
     automatiques absorbent l'espace libre puis tombent à zéro dès que le
     contenu déborde. justify-content:center, lui, répartissait le dépassement
     en haut ET en bas : ce qui débordait au-dessus d'une zone défilante était
     coupé et hors d'atteinte, scrollTop valant déjà 0. */
  .nav > :first-child{margin-top:auto}
  .nav > :last-child{margin-bottom:auto}
  .nav[data-ouvert="oui"]{transform:translateX(0)}
  .nav__lien,.nav__contact{
    color:#fff!important;border-color:rgba(255,255,255,.4)!important;
    font-size:1.4rem;letter-spacing:.16em;padding:14px 0;width:100%;text-align:center;
  }
  .nav__contact{margin-top:18px;padding:14px 24px;border:1px solid}
}

/* ── Bandeau d'accueil : le diaporama en colonnes ───────────────── */

.bandeau{
  position:relative;min-height:100svh;min-height:100vh;
  display:flex;align-items:center;          /* le texte tient le milieu */
  padding:calc(var(--entete-h) + 40px) 0 clamp(48px,8vw,90px);
  overflow:hidden;background:var(--brun-nuit);
}
.bandeau__fond{position:absolute;inset:0;display:flex;gap:8px}
.bandeau__colonne{position:relative;flex:1;overflow:hidden}
.bandeau__colonne img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease;
}
.bandeau__colonne img.est-visible{opacity:1}
/* Sur les petits écrans, une seule colonne suffit. */
@media(max-width:700px){.bandeau__colonne:nth-child(n+3){display:none}}
@media(max-width:460px){.bandeau__colonne:nth-child(n+2){display:none}}

/* Le texte est au milieu : le voile est donc le plus dense au milieu,
   et non plus en bas — sinon le titre se pose sur la partie claire. */
.bandeau__voile{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 76% 58% at 50% 50%, rgba(30,26,20,.58) 0%, rgba(30,26,20,.23) 78%, rgba(30,26,20,.12) 100%),
    linear-gradient(to top,rgba(30,26,20,.54) 0%,rgba(30,26,20,.20) 45%,rgba(30,26,20,.38) 100%);
}

/* Tout est centré : le bloc dans la page, et le texte dans le bloc. */
.bandeau__texte{position:relative;color:#fff;text-align:center}
/* 24ch : le titre casse après « restaurant », et « Chez TOF » reste
   entier sur sa ligne. À 18ch le « TOF » se retrouvait seul en bas. */
.bandeau__texte h1{color:#fff;max-width:24ch;margin-inline:auto}
.bandeau__accroche{max-width:48ch;margin-inline:auto;color:rgba(255,255,255,.9)}
.bandeau__lieu{
  font-family:var(--titre);text-transform:uppercase;letter-spacing:.2em;
  font-size:.9rem;color:rgba(255,255,255,.85);margin-bottom:1.6rem;
}
.bandeau__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:2.2rem}

/* ── Boutons ────────────────────────────────────────────────────── */

.bouton{
  display:inline-block;font-family:var(--titre);font-size:.92rem;
  text-transform:uppercase;letter-spacing:.16em;
  padding:15px 30px;border:1px solid var(--or);background:var(--or);color:#fff;
  cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.bouton:hover{background:transparent;color:var(--or);border-color:var(--or)}
.bouton--clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.bouton--clair:hover{background:#fff;color:var(--brun-nuit);border-color:#fff}
.bouton--sobre{background:transparent;color:var(--brun-nuit);border-color:var(--brun-nuit)}
.bouton--sobre:hover{background:var(--brun-nuit);color:#fff}

/* ── Informations pratiques ─────────────────────────────────────── */

.horaires{list-style:none;margin:0;padding:0}
.horaires li{
  display:flex;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--filet);
}
.section--nuit .horaires li{border-bottom-color:rgba(255,255,255,.14)}
.horaires__jour{font-family:var(--titre);text-transform:uppercase;letter-spacing:.1em;font-size:.92rem}
.horaires__note{display:block;font-size:.82rem;color:var(--brun-doux);text-transform:none;letter-spacing:0}
.section--nuit .horaires__note{color:rgba(255,255,255,.55)}

.avis{
  border-left:3px solid var(--terre);padding:14px 0 14px 20px;
  margin:26px 0 0;font-size:.95rem;
}

/* ── Ouverture de page : une photo pleine largeur ────────────────
   Réutilisable. La page pose $POSE = true pour que l'en-tête devienne
   transparente et se pose dessus. */

.ouverture{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(380px,58vh,560px);
  padding:calc(var(--entete-h) + 60px) 0 clamp(40px,6vw,68px);
  background:var(--brun-nuit);
}
.ouverture__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Le voile est plus dense en haut ET en bas : en haut pour que le menu
   blanc reste lisible quelle que soit la photo, en bas pour le titre.
   Entre les deux il s'allège, sinon on ne voit plus la photo. */
.ouverture__voile{
  position:absolute;inset:0;
  background:linear-gradient(
    rgba(28,23,17,.54) 0%,
    rgba(28,23,17,.24) 27%,
    rgba(28,23,17,.48) 66%,
    rgba(28,23,17,.80) 100%);
}
.ouverture__texte{position:relative;color:#fff}
.ouverture__texte h1{color:#fff;margin:0 0 1.1rem;font-size:clamp(2rem,5vw,3.3rem)}
.ouverture .sur-titre{color:var(--or-clair)}
.ouverture__accroche{max-width:56ch;color:rgba(255,255,255,.88)}

/* ── Le passe : les assiettes accrochées au rail ─────────────────
   Comme les bons de commande au-dessus du piano : une pince, un fil,
   et chacune qui pend un peu de travers. Au survol elle se redresse,
   comme si on la décrochait. */

.passe{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(2,1fr);margin-top:3rem}
@media(min-width:700px){.passe{grid-template-columns:repeat(3,1fr)}}

.assiette{
  position:relative;margin:0;padding-top:20px;
  transform-origin:50% 0;                   /* elle pivote depuis sa pince */
  transition:transform .35s ease;
}
.assiette::before{                           /* le fil */
  content:"";position:absolute;left:50%;top:0;width:1px;height:20px;
  background:rgba(201,154,60,.5);
}
.assiette__pince{
  position:absolute;left:50%;top:13px;transform:translateX(-50%);
  width:16px;height:9px;background:var(--or);z-index:2;
}
.assiette img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}
.assiette__nom{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.5rem .8rem .7rem;
  background:linear-gradient(to top,rgba(20,16,11,.88),rgba(20,16,11,0));
  color:#fff;font-family:var(--titre);font-weight:400;
  font-size:clamp(.82rem,1.5vw,.95rem);letter-spacing:.06em;text-align:center;
}
@media(min-width:700px) and (hover:hover){
  .assiette__nom{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
  .assiette:hover .assiette__nom,.assiette:focus-within .assiette__nom{opacity:1;transform:none}
}
.assiette__no{
  position:absolute;right:9px;top:30px;
  font-family:var(--titre);font-size:.72rem;letter-spacing:.18em;
  color:rgba(255,255,255,.85);text-shadow:0 1px 7px rgba(0,0,0,.65);
}
.assiette:nth-child(odd){transform:rotate(-1.4deg)}
.assiette:nth-child(even){transform:rotate(1.2deg)}
.assiette:nth-child(3n){transform:rotate(-.5deg)}
.assiette:hover{transform:rotate(0) translateY(-7px);z-index:3}

@media(prefers-reduced-motion:reduce){
  .assiette,.assiette:hover{transform:none}
}

/* ── La prochaine soirée, sur l'accueil ──────────────────────────── */

.soir-a-venir .sur-titre{display:inline-flex;align-items:center;gap:10px}
.soir-a-venir__toque{fill:var(--or-clair);flex:none}
.soir-a-venir__quand{
  margin:.4rem 0 .3rem;color:#fff;
  font-family:var(--titre);font-weight:300;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(1rem,1.8vw,1.2rem);
}
.soir-a-venir__quand span{color:var(--or-clair)}
.soir-a-venir h2{margin-top:.2rem}
.soir-a-venir .duo__image img{aspect-ratio:4/3;object-fit:cover}

/* ── Cartes / grilles ───────────────────────────────────────────── */

.grille{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ── Les rendez-vous de la semaine ───────────────────────────────
   Quatre cartes posées côte à côte ne racontaient pas une semaine :
   c'est une liste qui se lit du mardi au vendredi. Le jour tient dans
   une pastille, le rendez-vous s'écrit en grand, la période reste en
   légende. Au survol, la pastille se remplit et la toque du logo prend
   la place de l'abréviation. */

.semaine{list-style:none;margin:2.6rem 0 0;padding:0;border-top:1px solid var(--filet)}
.semaine__ligne{
  display:grid;gap:6px 22px;align-items:center;
  grid-template-columns:auto 1fr;
  padding:20px 0;border-bottom:1px solid var(--filet);
}
@media(min-width:760px){
  .semaine__ligne{grid-template-columns:auto 1fr auto;padding:24px 0}
}

/* La pastille du jour. */
.semaine__jour{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;flex:none;
  border:1px solid var(--or);color:var(--or);
  font-family:var(--titre);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;
  transition:background .3s ease,color .3s ease;
}
.semaine__abrege,.semaine__icone{
  position:absolute;transition:opacity .3s ease,transform .3s ease;
}
.semaine__icone{fill:#fff;opacity:0;transform:translateY(5px) scale(.85)}
.semaine__ligne:hover .semaine__jour{background:var(--or);color:#fff}
.semaine__ligne:hover .semaine__abrege{opacity:0;transform:translateY(-5px)}
.semaine__ligne:hover .semaine__icone{opacity:1;transform:none}

.semaine__quoi{
  font-family:var(--titre);font-weight:300;color:var(--brun-nuit);
  font-size:clamp(1.15rem,2.4vw,1.7rem);text-transform:uppercase;
  letter-spacing:.03em;line-height:1.2;
}
/* Le jour en toutes lettres : la pastille abrégée ne se lit pas à voix
   haute, et « MAR » ne veut rien dire pour un lecteur d'écran. */
.semaine__lu{position:absolute;left:-9999px}
.semaine__periode{
  grid-column:2;font-size:.86rem;color:var(--brun-doux);
}
@media(min-width:760px){
  .semaine__periode{
    grid-column:3;text-align:right;white-space:nowrap;
    font-family:var(--titre);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;
  }
}

/* La note qui suit une grille : séparée par un filet, jamais collée. */
.note-section{
  margin:2.8rem 0 0;padding-top:1.8rem;border-top:1px solid var(--filet);
  max-width:62ch;
}

/* ── Table locale ───────────────────────────────────────────────── */

.locale{display:grid;gap:clamp(28px,5vw,60px);grid-template-columns:1fr}
@media(min-width:900px){.locale{grid-template-columns:.85fr 1.15fr}}
.locale__chiffre{
  font-family:var(--titre);font-weight:300;line-height:.9;
  font-size:clamp(4rem,11vw,7.5rem);color:var(--or);
}
.locale__liste{list-style:none;margin:0;padding:0}
.locale__liste li{
  position:relative;padding:12px 0 12px 34px;border-bottom:1px solid rgba(255,255,255,.14);
}
.locale__liste li::before{
  content:"";position:absolute;left:0;top:22px;width:18px;height:1px;background:var(--or);
}

/* ── Galerie ────────────────────────────────────────────────────── */

.galerie{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.galerie a{display:block;overflow:hidden;position:relative}
.galerie img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  transition:transform .5s ease,opacity .3s ease;
}
.galerie a:hover img{opacity:.9;transform:scale(1.05)}

/* ── La visionneuse ─────────────────────────────────────────────── */

.vue{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,22px);
  padding:clamp(14px,3vw,34px);
  background:rgba(22,18,13,.94);
}
.vue[hidden]{display:none}
.vue__cadre{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1100px,100%);max-height:100%;
}
.vue__cadre img{
  max-width:100%;max-height:calc(100vh - 130px);
  width:auto;height:auto;object-fit:contain;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.vue__legende{
  font-family:var(--titre);text-transform:uppercase;letter-spacing:.18em;
  font-size:.76rem;color:rgba(255,255,255,.7);text-align:center;
}
.vue__fermer,.vue__fleche{
  flex:none;background:transparent;border:1px solid rgba(255,255,255,.28);
  color:#fff;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.vue__fermer:hover,.vue__fleche:hover{background:var(--or);border-color:var(--or)}
.vue__fleche{width:52px;height:52px;font-size:1.7rem}
.vue__fermer{
  position:absolute;top:clamp(12px,2.4vw,24px);right:clamp(12px,2.4vw,24px);
  width:44px;height:44px;font-size:1.6rem;z-index:1;
}

/* Sur téléphone les flèches passent sous la photo : à côté, elles
   mangeraient la moitié de la largeur. Le doigt suffit de toute façon. */
@media(max-width:640px){
  .vue{flex-wrap:wrap;align-content:center}
  .vue__cadre{order:1;flex:1 0 100%}
  .vue__cadre img{max-height:calc(100vh - 200px)}
  .vue__fleche{order:2;width:60px;height:46px}
}
.signature{
  margin-top:26px;font-size:.85rem;color:var(--brun-doux);
  font-family:var(--titre);text-transform:uppercase;letter-spacing:.16em;
}

/* ── Pied de page ───────────────────────────────────────────────── */

.pied{background:var(--brun-nuit);color:#b6ada0;padding:0 0 28px;font-size:.95rem}
.pied a:not(.bouton){color:#d9d3c9}
.pied a:not(.bouton):hover{color:var(--or-clair)}

/* Le rappel : réserver ou appeler, rien d'autre. Il tient sa propre
   bande, séparée du reste par un filet — sinon il se noie dans les liens. */
.pied__appel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:26px 44px;padding:clamp(36px,5vw,56px) 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pied__appel-sur{
  font-family:var(--titre);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.26em;color:var(--or);margin:0 0 .55rem;
}
.pied__appel-titre{
  margin:0;color:#fff;font-family:var(--titre);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;letter-spacing:.03em;
}
.pied__appel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.pied__tel{
  display:inline-flex;align-items:center;gap:11px;color:#fff;
  font-family:var(--titre);font-size:1.02rem;letter-spacing:.1em;
}
.pied__tel:hover{color:var(--or-clair)}
.pied__tel svg{flex:none;color:var(--or)}

/* Les trois colonnes, séparées par un filet plutôt que par du vide. */
.pied__haut{display:grid;gap:38px;grid-template-columns:1fr;padding:clamp(36px,5vw,56px) 0}
@media(min-width:820px){
  .pied__haut{grid-template-columns:1.25fr 1fr 1fr;gap:0}
  .pied__haut > *{padding-right:clamp(26px,3.6vw,52px)}
  .pied__haut > * + *{
    padding-left:clamp(26px,3.6vw,52px);
    border-left:1px solid rgba(255,255,255,.1);
  }
}
.pied__titre{
  font-family:var(--titre);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.24em;color:var(--or);margin:0 0 1.25rem;
}
.pied__logo{width:170px;margin-bottom:22px}
.pied__adresse{font-style:normal;margin:0 0 1.5rem;line-height:1.9}
.pied__marque-bas{display:flex;align-items:center;flex-wrap:wrap;gap:14px 12px}
.pied__ouvertures{margin:0 0 1.1rem}

/* Les réseaux : une pastille par compte, à l'icône seule. Le nom du
   compte tient dans le title et l'aria-label — écrit en toutes lettres,
   deux pastilles de largeurs différentes cassaient la colonne. */
.pied__titre--reseaux{margin-bottom:.9rem}
.pied__reseau{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.22);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.pied__reseau:hover{border-color:var(--or);color:var(--or-clair);background:rgba(255,255,255,.04)}
.pied__reseau svg{flex:none}

.pied__liens{list-style:none;margin:0;padding:0;line-height:2.15}
.pied__lien-fin{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}

.pied__bas{
  padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  font-size:.82rem;color:#8d8478;
}
.pied__credit{color:#6e675d}

/* ── Label Fait Maison ──────────────────────────────────────────── */
/* C'est un label, pas une illustration : il se lit, il ne s'impose pas.
   Repoussé au bout de la ligne pour qu'on ne le prenne pas pour un
   troisième bouton de réseau social. */
.label-maison{width:46px;height:auto;opacity:.9;margin-left:14px}
/* Sur grand écran il part au bout de la colonne ; sur téléphone la colonne
   fait toute la largeur et l'y envoyer le laisserait seul dans le vide. */
@media(min-width:820px){.label-maison{margin-left:auto}}

/* ── Apparition au défilement ────────────────────────────────────
   L'attribut est posé par le script. Sans JavaScript, aucune de ces
   règles ne s'applique : tout reste visible. */

[data-apparait="non"]{
  opacity:0;transform:translateY(18px);
}
[data-apparait]{
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--rang, 0) * 80ms);
}
[data-apparait="vu"]{opacity:1;transform:none}

/* ── Respect des préférences système ────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-apparait]{opacity:1!important;transform:none!important}
  .bandeau__colonne img{opacity:1}
  .bandeau__colonne img:not(.est-visible){opacity:0}
}

/* ══════════════════════════════════════════════════════════════════
   Formulaires
   ══════════════════════════════════════════════════════════════════ */

.formulaire{margin-top:1.6rem}
.champs{display:grid;gap:0 22px;grid-template-columns:1fr}
@media(min-width:620px){.champs{grid-template-columns:1fr 1fr}}
.champ{margin:0 0 1.3rem}
.champ--large{grid-column:1/-1}
.champ label{
  display:block;margin-bottom:.45rem;
  font-family:var(--titre);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--brun-nuit);
}
.obligatoire{color:var(--terre)}
.facultatif{color:var(--brun-doux);text-transform:none;letter-spacing:0;font-size:.8rem}

.champ input,.champ textarea{
  width:100%;font-family:var(--texte);font-size:16px;   /* 16px : pas de zoom auto sur iPhone */
  color:var(--brun-nuit);background:#fff;
  border:1px solid var(--filet);border-radius:0;
  padding:13px 14px;transition:border-color .2s ease;
}
.champ input:focus,.champ textarea:focus{border-color:var(--or);outline:none;box-shadow:0 0 0 3px rgba(176,127,30,.15)}
.champ [aria-invalid="true"]{border-color:var(--terre);background:#fdf6f4}
.champ textarea{resize:vertical;min-height:120px}
.aide{display:block;margin-top:.5rem;font-size:.85rem;color:var(--brun-doux)}

/* champ appât pour les robots : invisible, mais pas display:none */
.appat{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.offre-case{
  margin-top:1.6rem;padding:22px 24px;
  background:var(--creme-chaud);border-left:3px solid var(--or);
}
.offre-case label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.offre-case input{margin-top:5px;width:19px;height:19px;accent-color:var(--or);flex:none}
.offre-case details{margin-top:.9rem}
.offre-case summary{
  cursor:pointer;font-family:var(--titre);text-transform:uppercase;
  letter-spacing:.12em;font-size:.8rem;color:var(--brun-doux);
}
.offre-case ul{margin:.8rem 0 0;padding-left:1.1rem;font-size:.92rem}
.offre-case li{margin-bottom:.35rem}

/* ── Retour d'envoi ─────────────────────────────────────────────── */

.retour{padding:20px 24px;margin:1.6rem 0;border-left:4px solid}
.retour__titre{font-family:var(--titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:1.05rem;color:var(--brun-nuit);margin:0 0 .4rem}
.retour__detail{margin:0}
.retour__liste{margin:.9rem 0 0;padding-left:1.2rem;font-size:.94rem}
.retour--bon{background:#f2f6f0;border-color:#6a8f4e}
.retour--attention{background:#fdf7ec;border-color:var(--or)}
.retour--erreur{background:#fdf3f0;border-color:var(--terre)}

/* ══════════════════════════════════════════════════════════════════
   Menu du jour
   ══════════════════════════════════════════════════════════════════ */

.jour{background:#fff;border:1px solid var(--filet);padding:clamp(26px,4vw,44px)}
.jour__entete{padding-bottom:1.2rem;border-bottom:1px solid var(--filet);margin-bottom:1.4rem}
.jour__liste{list-style:none;margin:0;padding:0}
.jour__liste li{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 0;border-bottom:1px dotted var(--filet);
}
.jour__liste li:last-child{border-bottom:0}
.jour__plat{font-size:1.02rem;color:var(--brun-nuit)}
.jour__prix{
  font-family:var(--titre);font-weight:600;letter-spacing:.06em;
  color:var(--or);white-space:nowrap;
}

/* ── Le menu du jour ecrit depuis l'espace client ─────────────────
   Le repli local (.jour__liste) etait mis en forme, pas le menu venu de
   l'espace client : il sortait en blocs bruts, prix colle au nom, sans
   alignement ni separation. On lui donne exactement la meme allure, pour que
   le restaurateur ne voie aucune difference selon la source. */
.jour__moteur .ms{
  display:flex;align-items:center;gap:9px;
  font-family:var(--titre);font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--or);
  margin:1.9rem 0 .5rem;padding-bottom:.45rem;border-bottom:1px solid var(--filet);
}
/* L'icone prend la couleur du titre — l'or de la marque — sans qu'on la
   repete : le trace est en currentColor. Elle ne grossit pas avec le texte
   traduit, elle garde sa taille. */
.jour__moteur .ms-ic{
  width:18px;height:18px;flex:none;stroke:currentColor;
  transform:translateY(-.5px);
}
.jour__moteur .ms:first-child{margin-top:0}
.jour__moteur .mi{
  display:flex;align-items:baseline;gap:12px;
  padding:13px 0;border-bottom:1px dotted var(--filet);
}
.jour__moteur .mi:last-child{border-bottom:0}
.jour__moteur .mi-n{font-size:1.02rem;color:var(--brun-nuit)}
/* Les pointilles mangent l'espace libre : le prix est pousse a droite, et
   l'oeil suit la ligne du plat jusqu'a lui. */
.jour__moteur .mi-dots{
  flex:1 1 auto;min-width:18px;align-self:center;
  border-bottom:1px dotted var(--filet);transform:translateY(-2px);
}
.jour__moteur .mi-p{
  font-family:var(--titre);font-weight:600;letter-spacing:.06em;
  color:var(--or);white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* Une ligne sans prix est une description ou un intitule seul : ni pointilles,
   ni filet, et un ton plus discret. */
.jour__moteur .mi-np{border-bottom:0;padding:2px 0 10px}
.jour__moteur .mi-np .mi-n{font-size:.94rem;color:var(--brun-doux)}

@media(max-width:560px){
  /* Un nom long ne doit pas ecraser son prix : il passe a la ligne, le prix
     reste seul a droite. */
  .jour__moteur .mi{flex-wrap:wrap;gap:4px 10px}
  .jour__moteur .mi-n{flex:1 1 100%}
  .jour__moteur .mi-dots{order:2}
  .jour__moteur .mi-p{order:3}
}

.document{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;margin-top:1.6rem}

/* ══════════════════════════════════════════════════════════════════
   Soirées
   ══════════════════════════════════════════════════════════════════ */

/* ── Soirées : l'ouverture et le calendrier ─────────────────────── */

.soirees__ouverture{padding-top:calc(var(--entete-h) + 54px);background:var(--creme-chaud)}
.soirees__intro{display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){.soirees__intro{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.soirees__intro>*{min-width:0}
.soirees__calendrier{max-width:100%;overflow-x:auto}
.soirees__intro h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1.2rem}
.soirees__accroche{max-width:44ch}
.soirees__compte{
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--filet);
  font-family:var(--titre);text-transform:uppercase;letter-spacing:.14em;
  font-size:.82rem;color:var(--brun-doux);
}
.soirees__compte strong{color:var(--or);font-size:1.05rem}

/* Un seul mois à l'écran, dans un cadre unique. Sans JavaScript, les
   mois s'empilent avec leur titre — la classe --pilote n'est posée que
   par le script, donc la mise en page suit ce qui marche vraiment. */
.calendrier{
  display:flex;flex-direction:column;gap:20px;
  background:#fff;border:1px solid var(--filet);padding:22px 20px 18px;
}
.calendrier--pilote{gap:0}
.calendrier--pilote .cal__titre{display:none}   /* le titre passe dans la barre */

.cal__barre{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:1.3rem;
}
.cal__mois{
  margin:0;flex:1;text-align:center;
  font-family:var(--titre);font-weight:400;text-transform:uppercase;
  letter-spacing:.2em;font-size:.92rem;color:var(--brun-nuit);
}
.cal__fleche{
  flex:none;width:40px;height:40px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--filet);color:var(--brun-nuit);
  font-size:1.4rem;cursor:pointer;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.cal__fleche:hover:not(:disabled){background:var(--brun-nuit);border-color:var(--brun-nuit);color:#fff}
.cal__fleche:disabled{color:#cec8bd;cursor:default}

.cal__titre{
  margin:0 0 1.1rem;font-family:var(--titre);font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;font-size:.86rem;color:var(--brun-nuit);
}
.cal__titre span{color:var(--brun-doux)}
.cal__grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__jourtitre{
  display:flex;align-items:center;justify-content:center;height:26px;
  font-family:var(--titre);font-size:.7rem;letter-spacing:.06em;color:var(--brun-doux);
}
.cal__jourtitre[data-ferme="oui"]{color:#c3bcb1}
.cal__vide{aspect-ratio:1}
.cal__jour{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  min-height:40px;font-size:.94rem;color:var(--gris);
}
.cal__jour--passe{color:#c8c2b8}
.cal__jour--ferme{color:#cec8bd}

/* Le jour de soirée : la toque du logo se pose sur la case. */
a.cal__jour--soiree{
  position:relative;background:var(--brun-nuit);color:#fff;text-decoration:none;
  transition:background .25s ease,transform .25s ease;
}
a.cal__jour--soiree:hover,a.cal__jour--soiree:focus-visible{
  background:var(--or);color:#fff;transform:scale(1.06);z-index:1;
}
.cal__chiffre{font-family:var(--titre);font-size:.98rem;line-height:1}
/* La toque se pose dans le coin, comme un cachet : le chiffre garde
   toute la case et reste lisible même sur les petites grilles. */
.cal__toque{
  position:absolute;right:4px;bottom:3px;width:9px;height:18px;
  fill:var(--or-clair);transition:fill .25s ease;
}
a.cal__jour--soiree:hover .cal__toque{fill:#fff}

.cal__legende{
  display:flex;align-items:center;gap:9px;margin:1.1rem 0 0;
  font-size:.82rem;color:var(--brun-doux);
}
.cal__legende svg{fill:var(--or);flex:none}

.soirees{display:flex;flex-direction:column;gap:clamp(24px,4vw,44px)}
.soiree{
  display:grid;gap:clamp(20px,3.5vw,40px);grid-template-columns:1fr;
  align-items:center;background:#fff;border:1px solid var(--filet);
}
@media(min-width:760px){.soiree{grid-template-columns:.8fr 1.2fr}}
.soiree__image{overflow:hidden;align-self:stretch}
.soiree__image img{width:100%;height:100%;min-height:240px;object-fit:cover}
.soiree__texte{padding:clamp(22px,3vw,38px);padding-left:0}
@media(max-width:759px){.soiree__texte{padding:0 24px 30px}}
.soiree__date{
  font-family:var(--titre);font-size:.82rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--or);margin:0 0 .5rem;
}
.soiree__titre{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 .7rem}

.vide{
  background:var(--creme-chaud);border:1px dashed var(--filet);
  padding:clamp(30px,5vw,54px);text-align:center;
}
.vide__titre{
  font-family:var(--titre);text-transform:uppercase;letter-spacing:.12em;
  font-size:1.15rem;color:var(--brun-nuit);margin-bottom:.7rem;
}

.passees{list-style:none;margin:1.6rem 0 0;padding:0}
.passees li{
  display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--filet);
}
.passees__date{
  font-family:var(--titre);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--brun-doux);min-width:16ch;
}
.passees__titre{color:var(--brun-nuit)}

/* ── Vignerons ──────────────────────────────────────────────────── */
.vignerons{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.vignerons li a{
  display:inline-block;padding:7px 14px;border:1px solid var(--filet);background:#fff;
  font-size:.9rem;transition:border-color .2s ease,color .2s ease;
}
.vignerons li a:hover{border-color:var(--or);color:var(--or)}

/* ── Soirées : étiquette, prix, affiche, partage ─────────────────── */

.soiree__tag{
  display:inline-block;margin-right:10px;padding:3px 10px;
  background:var(--or);color:#fff;border-radius:2px;
  font-size:.7rem;letter-spacing:.14em;
}
.soiree__prix{
  margin-top:.6rem;font-family:var(--titre);text-transform:uppercase;
  letter-spacing:.12em;font-size:.85rem;color:var(--brun-doux);
}
.soiree__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:1.3rem}

/* Une affiche se montre en entier : pas de recadrage sur un flyer. */
.soiree--affiche .soiree__image img{
  height:auto;min-height:0;object-fit:contain;background:var(--creme-chaud);
}
@media(min-width:760px){
  .soiree--affiche .soiree__image{align-self:center;padding:18px 0 18px 18px}
}

.partager{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--titre);font-size:.92rem;text-transform:uppercase;letter-spacing:.16em;
  padding:15px 26px;border:1px solid var(--filet);background:#fff;color:var(--brun-nuit);
  cursor:pointer;transition:border-color .25s ease,color .25s ease;
}
.partager:hover{border-color:var(--or);color:var(--or)}
.partager--fait{border-color:var(--or);color:var(--or)}
.partager svg{flex:none}

/* ── Le bandeau « ce que ce site retient de vous » ───────────────
   En position fixe, et masqué par [hidden] tant que le script n'a pas
   décidé de le montrer : il ne pousse jamais la page, à l'apparition
   comme à la fermeture. Il glisse depuis le bas, il n'occupe pas
   l'écran : ce n'est pas une barrière, c'est une information. */
.bandeau-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,44px);
  padding:22px var(--gouttiere);
  background:var(--brun-nuit);color:var(--creme);
  border-top:2px solid var(--or);
  box-shadow:0 -14px 40px rgba(47,41,31,.28);
  transform:translateY(102%);transition:transform .32s ease;
}
.bandeau-cookies[hidden]{display:none}
.bandeau-cookies.est-visible{transform:translateY(0)}
.bandeau-cookies__texte{max-width:74ch}
.bandeau-cookies__sur-titre{color:var(--or-clair);margin:0}
.bandeau-cookies__titre{
  font-family:var(--titre);font-weight:300;text-transform:uppercase;
  letter-spacing:.1em;font-size:clamp(1.05rem,2.2vw,1.4rem);
  margin:.35rem 0 .5rem;color:#fff;
}
.bandeau-cookies__corps{
  margin:0;font-size:.92rem;line-height:1.62;color:rgba(243,242,241,.86);
}
.bandeau-cookies__boutons{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap}
.bandeau-cookies__boutons .bouton{padding:13px 26px;font-size:.82rem;white-space:nowrap}
/* Le refus n'est pas un bouton de second rang caché dans un coin : il se lit
   aussi bien que l'accord, en clair sur le fond sombre du bandeau. */
.bandeau-cookies__non{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.bandeau-cookies__non:hover{background:#fff;color:var(--brun-nuit);border-color:#fff}

/* Sur téléphone, il doit rester un bandeau et non un écran : il occupait la
   moitié de la hauteur et recouvrait le bouton « Réserver une table ». Texte
   resserré, boutons côte à côte, et une hauteur plafonnée qui défile toute
   seule si la langue allonge le texte. */
@media(max-width:900px){
  .bandeau-cookies{
    flex-direction:column;align-items:stretch;gap:13px;
    padding:15px var(--gouttiere) 17px;
    max-height:52svh;overflow-y:auto;
  }
  .bandeau-cookies__sur-titre{font-size:.62rem;letter-spacing:.2em}
  .bandeau-cookies__titre{font-size:.98rem;letter-spacing:.07em;margin:.25rem 0 .35rem}
  .bandeau-cookies__corps{font-size:.79rem;line-height:1.5}
  .bandeau-cookies__boutons{flex-wrap:nowrap;gap:9px}
  /* 46 px de haut : au-dessus de la cible tactile de 44 px. Un bouton de
     refus trop petit pour le pouce n'est pas un vrai refus. */
  .bandeau-cookies__boutons .bouton{
    flex:1;display:inline-flex;align-items:center;justify-content:center;
    min-height:46px;padding:10px 8px;font-size:.7rem;letter-spacing:.1em;
  }
}
@media(prefers-reduced-motion:reduce){
  .bandeau-cookies{transition:none}
}

/* ── Le menu de langue, replié ────────────────────────────────────
   Copie exacte des règles qu'injecte i18n.js. Elles sont ici parce qu'un style
   qui arrive avec le JavaScript arrive trop tard : le temps qu'il soit là, le
   menu paraissait déplié — les quatre langues en clair — puis se refermait d'un
   coup sous les yeux du visiteur. i18n.js repose les siennes par-dessus, à
   l'identique : rien ne change, et il n'y a plus de moment où le menu est nu. */
.olo-lang--desk{position:relative}
.olo-dd-trig{border:0;background:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:12px;letter-spacing:.03em;color:inherit;padding:6px 7px;border-radius:7px;display:inline-flex;align-items:center;gap:5px}
.olo-dd-trig::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .2s}
.olo-lang--desk:hover .olo-dd-trig::after,.olo-lang--desk:focus-within .olo-dd-trig::after{transform:translateY(1px) rotate(-135deg)}
.olo-lang--desk .olo-dd-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:9999;display:none;flex-direction:column;gap:1px;min-width:76px;padding:5px;border-radius:11px;background:rgba(20,20,26,.97);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.olo-lang--desk .olo-dd-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:11px}
.olo-lang--desk:hover .olo-dd-menu,.olo-lang--desk:focus-within .olo-dd-menu{display:flex}
.olo-lang--desk .olo-dd-menu button{width:100%;text-align:left;-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;color:#fff !important;opacity:.72;padding:8px 13px;border-radius:7px;font-size:12.5px;font-weight:600}
.olo-lang--desk .olo-dd-menu button:hover{opacity:1;background:rgba(255,255,255,.09)}
.olo-lang--desk .olo-dd-menu button[aria-current="true"]{opacity:1;color:#ffd27a !important}


/* ── Lisibilité des textes posés sur une photo ────────────────────
   Le voile a été allégé à la demande du client (« ça manque de contraste »,
   16.08.2026) : les photos ressortent. Ce sont donc les textes qui portent
   leur propre ombre, sinon le sur-titre de 14 px et l'accroche de 17 px
   passent sous le seuil de lisibilité dès qu'ils croisent une zone claire de
   la photo — mesuré à 2,48:1 sur près de la moitié de la surface du
   sur-titre. Une ombre suit la lettre : elle sauve le texte sans rien
   assombrir autour. */
.bandeau__lieu,.ouverture .sur-titre{
  text-shadow:0 1px 3px rgba(20,16,11,.85),0 0 14px rgba(20,16,11,.6);
}
.bandeau__accroche,.ouverture__accroche{
  text-shadow:0 1px 4px rgba(20,16,11,.8),0 0 16px rgba(20,16,11,.55);
}
.bandeau__texte h1,.ouverture__texte h1{
  text-shadow:0 2px 10px rgba(20,16,11,.55);
}


/* ── Le téléphone dans le corps du texte ─────────────────────────
   Le client tenait à ce que son numéro soit dans la phrase. Encore
   faut-il qu'on voie que c'est un lien : nu, il ressortait à 1,44:1 du
   texte voisin, là où un lien non souligné en demande 3:1. */
.contenu p a[href^="tel:"]{
  color:var(--or);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;white-space:nowrap;
}
.contenu p a[href^="tel:"]:hover{text-decoration-thickness:2px}

/* ── Cibles tactiles ─────────────────────────────────────────────
   44 px au doigt : les langues du menu et les vignerons passaient sous
   la barre (34 et 41 px). */
@media(max-width:900px){
  .olo-lang--mob button{min-height:44px;padding:11px 15px}
}
.vignerons a{display:inline-block;padding:.35rem 0;min-height:44px;line-height:2}