@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}
/* Le nom du plat porte la ligne : plus grand et en gras (Lato 700, un vrai
   fichier de police, pas un gras fabrique par le navigateur). Au meme corps
   que sa description, l'oeil ne distinguait pas le plat de ce qui l'accompagne. */
.jour__moteur .mi-n{font-size:1.12rem;font-weight:700;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;font-weight:400;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}