/* Le Bistrot des Halles — les couleurs de la maison : vert bouteille des murs, pierre blonde, chêne, laiton.
   La photo du lieu passe avant tout : grandes images, titres simples, couleurs unies, pas d'ornements. */

@font-face{font-family:"Libre Caslon Text";src:url(../polices/libre-caslon.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(../polices/libre-caslon-italique.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(../polices/libre-caslon-gras.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(../polices/libre-franklin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --vert:#1d3a31; --vert-2:#26473c; --vert-nuit:#13271f;
  --pierre:#f3eee5; --pierre-2:#e9e1d3; --ligne:#d9cfbd;
  --laiton:#a7814a; --laiton-clair:#d6bd8f; --laiton-fonce:#7d5f31;
  --laiton-bouton:#917040; /* le laiton un ton plus sombre : texte blanc lisible (contraste 4,6:1) */
  --moutarde:#b88d33;
  --encre:#1b1c19; --gris:#5c5a52; --blanc:#fff;
  --serif:"Libre Caslon Text",Georgia,serif;
  --texte:"Libre Franklin",system-ui,sans-serif;
  --tete:76px;
  /* Motif discret pour un cadre en attente de photo */
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 48 48 0' stroke='%23d6bd8f' stroke-opacity='.14'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:var(--tete)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.menu-ouvert{overflow:hidden}
body{margin:0;font-family:var(--texte);font-size:1.0625rem;line-height:1.7;color:var(--encre);background:var(--pierre);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
svg{fill:currentColor}
.sprite{display:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.aller{position:absolute;left:12px;top:-60px;background:var(--laiton-bouton);color:var(--blanc);padding:10px 16px;z-index:100;font-weight:600}
.aller:focus{top:12px}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
.insecable{white-space:nowrap}

.conteneur{max-width:1160px;margin:0 auto;padding:0 24px}
.large{max-width:1400px;margin:0 auto;padding:0 24px}
.sur-titre{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton-fonce)}
.niveau{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--laiton-fonce);margin-bottom:10px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--vert);color:var(--pierre)}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.tete-section{text-align:center;margin-bottom:64px}
.tete-section h2{margin-top:12px}

/* ---------- Boutons et liens ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;font:600 .82rem var(--texte);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:2px;transition:background .2s,color .2s,border-color .2s}
.btn-plein{background:var(--laiton-bouton);color:var(--blanc)}
.btn-plein:hover{background:var(--laiton-fonce)}
.btn-clair{border-color:rgba(255,255,255,.7);color:var(--blanc)}
.btn-clair:hover{background:var(--blanc);color:var(--encre)}
.btn-petit{min-height:44px;padding:0 18px;font-size:.74rem}
.boutons{display:flex;flex-wrap:wrap;gap:12px}
.lien{font-weight:600;text-decoration:underline;text-decoration-color:var(--laiton);text-underline-offset:5px}
.lien:hover{color:var(--laiton-fonce)}

/* ---------- Bandeau d'annonce et fine barre du haut ---------- */
.bandeau{background:var(--laiton-bouton);color:var(--blanc);text-align:center;padding:8px 16px;font-size:.9rem}
.infobar{background:var(--vert-nuit);color:#dfe6e1;font-size:.8rem}
.infobar-in{display:flex;align-items:center;gap:20px;min-height:36px}
.infobar svg{width:14px;height:14px;flex:none;color:var(--laiton-clair)}
.infobar-adr{display:flex;align-items:center;gap:8px;margin-right:auto}
.infobar-tel{display:flex;align-items:center;gap:8px;text-decoration:none;min-height:36px;white-space:nowrap}
.statut-boite{position:relative}
.statut{display:flex;align-items:center;gap:8px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;min-height:36px}
.statut i{width:8px;height:8px;border-radius:50%;background:#9aa39e}
.statut.ouvert i{background:#3fb56a}
.statut.ferme i{background:#d9534f}
.statut-horaires{position:absolute;right:0;top:100%;z-index:60;background:var(--blanc);color:var(--encre);padding:18px 20px;min-width:270px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.statut-horaires table{width:100%;border-collapse:collapse;margin:10px 0 12px;font-size:.9rem;font-variant-numeric:tabular-nums}
.statut-horaires th{text-align:left;font-weight:500;padding:3px 0}
.statut-horaires td{text-align:right}
.statut-horaires .auj{font-weight:700}
.sh-lien{font-size:.85rem;color:var(--laiton-fonce)}

/* ---------- En-tête ---------- */
.tete{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
/* Le flou est posé sur un calque à part : sur .tete, il empêcherait le menu (position fixed) de couvrir l'écran */
.tete::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(252,251,248,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tete.defile{border-bottom-color:var(--ligne);box-shadow:0 6px 24px rgba(27,28,25,.06)}
.progression{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--laiton);transform-origin:left;scale:0 1}
.tete-in{display:flex;align-items:center;gap:32px;height:var(--tete)}
.logo{order:-1;display:flex;flex-direction:column;text-decoration:none;margin-right:auto;line-height:1}
.logo-nom{font-family:var(--serif);font-size:1.18rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vert)}
.logo-ville{font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--laiton-fonce);margin-top:7px}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;font-size:.92rem;font-weight:500;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{border-bottom-color:var(--laiton)}
.nav .nav-tel{display:none}
.tete-droite{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:22px;height:1.5px;background:var(--encre);transition:transform .25s,opacity .25s}
.burger span{top:21px}
.burger span::before,.burger span::after{content:"";left:0}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Cadres photo ---------- */
.cadre{position:relative;overflow:hidden;background:var(--vert) var(--motif)}
.cadre > img{width:100%;height:100%;object-fit:cover;color:transparent} /* color : cache le texte de remplacement pendant le chargement */
.cadre .vide{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--laiton-clair)}
.cadre .vide svg{width:26px;height:26px;opacity:.7;margin:0 auto 6px;display:block}
.cadre .vide b{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.cadre .vide code{display:block;font-size:.7rem;opacity:.55;margin-top:4px}
.cadre.a-photo .vide{display:none}

/* ---------- Accueil : photo pleine page ---------- */
.accueil{position:relative;min-height:calc(100svh - var(--tete) - 36px);display:flex;align-items:flex-end;overflow:hidden;color:var(--blanc);background:var(--vert-nuit)}
.accueil-photo{position:absolute;inset:-4% 0;background:var(--vert-nuit)}
/* Cadrage : les deux lustres et les trois fenêtres en arc ; le texte se pose sur le parquet */
.accueil-photo > img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.accueil-photo .vide{display:none}
/* Pas de voile uniforme : la salle reste lumineuse. Une ombre douce, seulement derrière le texte (en bas à gauche),
   et un léger fondu en bas pour la légende. */
.accueil::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 64% 100% at 0% 70%,rgba(10,20,16,.82) 0%,rgba(10,20,16,.58) 42%,rgba(10,20,16,0) 100%),linear-gradient(180deg,rgba(10,20,16,0) 72%,rgba(10,20,16,.36) 100%);pointer-events:none}
.accueil-in{position:relative;z-index:1;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:120px;padding-bottom:56px}
.accueil-texte{max-width:640px}
.accueil-texte p,.accueil-texte h1{text-shadow:0 1px 2px rgba(10,20,16,.55),0 2px 18px rgba(10,20,16,.7)}
.accueil .sur-titre{color:#f1e4c6;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.accueil h1,.final h2{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.accueil h1{font-size:clamp(2.9rem,7vw,5.6rem);margin:14px 0 18px}
.accroche{font-size:1.15rem;max-width:520px;color:#eef1ec;margin-bottom:30px}
.legende{font-family:var(--serif);font-style:italic;font-size:.95rem;color:#f1f0ea;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.legende::before{content:"";display:inline-block;width:28px;height:1px;background:var(--laiton-clair);vertical-align:middle;margin-right:10px}

/* ---------- Présentation ---------- */
.intro{padding:110px 0 90px}
.intro-in{max-width:880px;text-align:center}
.intro-phrase{font-family:var(--serif);font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.45;color:var(--vert)}
.devise{font-family:var(--serif);font-style:italic;color:var(--laiton-fonce);margin-top:28px;font-size:1.1rem}

/* ---------- La maison : une pièce après l'autre ---------- */
.maison{padding:30px 0 120px}
.piece{max-width:1260px;margin:0 auto 120px;padding:0 24px;display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.piece.inverse{grid-template-columns:5fr 7fr}
.piece.inverse .piece-photos{order:2}
.piece-photos{position:relative;padding-bottom:70px}
.piece-photos .grande{aspect-ratio:4/3}
.piece-photos .petite{position:absolute;width:34%;aspect-ratio:3/4;right:-36px;bottom:0;border:8px solid var(--pierre)}
.piece.inverse .petite{right:auto;left:-36px}
.piece-texte{max-width:430px}
.piece-texte h3{margin-bottom:18px}
.piece-texte p:not(.niveau){color:var(--gris)}
/* Les pièces verticales (terrasse) gardent un cadre plus haut */
.piece:last-child .grande{aspect-ratio:4/4.4}
.piece:last-child{margin-bottom:0}


/* ---------- La cuisine de Christian (fond vert nuit) ----------
   Grille de 12 colonnes : texte à gauche, film à droite ; puis le chef de dos et la spécialité ; puis les gestes en quinconce. */
.sombre{background:var(--vert-nuit);color:var(--blanc)}
.sombre .sur-titre,.sombre .niveau{color:var(--laiton-clair)}
.cuisine{padding:150px 0 160px}
.cuisine-ouverture,.cuisine-chef,.assiettes-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.cuisine-ouverture{align-items:center}
.cuisine-texte{grid-column:1/7;padding-right:clamp(0px,3vw,48px)}
.cuisine h2{font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:1.04;margin:18px 0 18px}
.sous-titre{font-family:var(--serif);font-style:italic;color:var(--laiton-clair);font-size:1.2rem;margin-bottom:34px}
.cuisine-texte > p:not(.sur-titre):not(.sous-titre){color:#d2dad5;max-width:33em}
.cuisine-texte > p + p:not(.sous-titre){margin-top:18px}
.film{grid-column:8/13}
.film-cadre{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--vert)}
.film-video{display:block;width:100%;height:100%;object-fit:cover}
.film-bouton{position:absolute;right:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,20,16,.5);color:var(--blanc);cursor:pointer;transition:background-color .25s,border-color .25s}
.film-bouton:hover{background:rgba(10,20,16,.8);border-color:var(--blanc)}
.film-bouton svg{width:18px;height:18px}
.film-bouton .i-lire,.film.en-pause .film-bouton .i-pause{display:none}
.film.en-pause .film-bouton .i-lire{display:block}

/* Légende sous une photo : un trait de laiton, une ligne en italique */
.legende-photo{display:flex;align-items:baseline;gap:12px;margin-top:14px;font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.4;color:var(--gris)}
.legende-photo::before{content:"";flex:none;width:22px;height:1px;background:var(--laiton);transform:translateY(-.3em)}
.sombre .legende-photo{color:#b9c5bf}
.sombre .legende-photo::before{background:var(--laiton-clair)}
.photo .cadre{aspect-ratio:4/5}

.cuisine-chef{margin-top:150px;align-items:center}
.chef{grid-column:1/6}
.cuisine-cote{grid-column:7/12}
.classiques h3{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:22px}
.classiques-texte{font-size:1.05rem;line-height:1.6;margin-bottom:14px;opacity:.9}

.gestes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:150px;align-items:start}
/* Quinconce régulier : une photo sur deux descend d'un même pas */
.gestes .geste:nth-child(even){margin-top:96px}

/* ---------- Dans l'assiette : deux doubles pages de magazine, en miroir ----------
   1re : le dessert en très grand à gauche ; à droite le texte, puis un gros plan aligné sur le bas de la grande photo.
   2e  : un détail vu de haut à gauche, la grande photo à droite, alignés sur le bas. Une colonne vide les sépare toujours. */
.assiettes{padding:150px 0 170px}
.assiettes-grille{row-gap:0}
.a1{grid-column:1/8;grid-row:1/3;align-self:start}
.assiettes-texte{grid-column:9/13;grid-row:1;align-self:start;padding:40px 0 56px}
.assiettes h2{font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:1.06;margin:16px 0 22px;color:var(--vert)}
.assiettes-texte > p:not(.sur-titre){color:var(--gris);margin-bottom:14px}
.a2{grid-column:9/13;grid-row:2;align-self:end}
.a3{grid-column:1/5;grid-row:3;align-self:end;margin-top:150px}
.a4{grid-column:6/13;grid-row:3;margin-top:150px}
/* Carré calé sur le bas de la photo : l'assiette entière, le mur de pierre et de brique au-dessus */
.a4 .cadre{aspect-ratio:1}
.a4 .cadre > img{object-position:50% 100%}

/* ---------- La carte ---------- */
.carte{padding:120px 0;background:var(--pierre-2)}
.menu{max-width:860px;margin:0 auto;background:var(--blanc);padding:44px clamp(20px,5vw,64px) 40px;box-shadow:0 20px 50px rgba(27,28,25,.07)}
.onglets{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;border-bottom:1px solid var(--ligne);margin-bottom:34px}
.onglets button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 2px;min-height:44px;font:600 .8rem var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);cursor:pointer}
.onglets button[aria-selected="true"]{color:var(--vert);border-bottom-color:var(--laiton)}
.page-tete{display:flex;align-items:baseline;justify-content:center;gap:16px;margin-bottom:22px}
.page-tete h3{font-size:1.9rem;color:var(--vert)}
.prix-unique{font-weight:600;color:var(--laiton-fonce)}
.groupe h4{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:26px 0 8px;color:var(--vert)}
.plat{padding:14px 0;border-bottom:1px solid #eee7da}
.plat:last-child{border-bottom:0}
.plat .nom{display:flex;align-items:baseline;gap:12px}
.plat b{font-family:var(--serif);font-weight:400;font-size:1.15rem}
.plat i{flex:1;border-bottom:1px dotted var(--ligne);transform:translateY(-4px)}
.plat .prix{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.plat p{color:var(--gris);font-size:.95rem;margin-top:2px}
.plat.special b::after{content:"Spécialité";font:600 .62rem var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--laiton-fonce);margin-left:10px;vertical-align:middle}
.prix.duo{display:flex;gap:18px}
.prix.duo span{min-width:44px;text-align:right}
.cols{display:flex;justify-content:flex-end;gap:18px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.cols span:first-child{flex:1}
.note-carte{font-size:.88rem;color:var(--gris);font-style:italic;margin-top:18px}
.menu-pied{text-align:center;font-family:var(--serif);font-style:italic;color:var(--gris);margin-top:34px;padding-top:22px;border-top:1px solid var(--ligne)}

/* ---------- Les groupes : la photo du salon en fond ---------- */
.groupes{position:relative;overflow:hidden;padding:140px 0;min-height:640px;display:flex;align-items:center}
.groupes-photo{position:absolute;inset:-4% 0}
.groupes::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,16,.55),rgba(10,20,16,0) 70%);pointer-events:none}
.groupes-in{position:relative;z-index:1;width:100%}
.groupes-carte{max-width:500px;background:var(--pierre);padding:48px 46px}
.groupes-carte h2{margin:12px 0 18px;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--vert)}
.groupes-carte p:not(.sur-titre){color:var(--gris);margin-bottom:28px}

/* ---------- Les détails ---------- */
.details{padding:120px 0}
.mosaique{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:210px;gap:14px}
.m1{grid-column:1/3;grid-row:1/3}
.m2{grid-column:3/7;grid-row:1/3}
.m3{grid-column:1/3;grid-row:3/5}
.m4{grid-column:3/5;grid-row:3/5}
.m5{grid-column:5/7;grid-row:3/5}
.details-insta{text-align:center;margin-top:36px}

/* ---------- Infos pratiques ---------- */
.contact{padding:110px 0;background:var(--pierre-2)}
.contact-in{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.contact-bloc{padding:30px 0 0;border-top:1px solid var(--ligne)}
.contact-bloc .gros{font-family:var(--serif);font-size:1.45rem;line-height:1.35;margin-bottom:14px;color:var(--vert)}
.contact-bloc .gros a{text-decoration:none}
.petit{font-size:.9rem;color:var(--gris);margin-top:8px}
.horaires{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.horaires th{text-align:left;font-weight:500;padding:4px 0}
.horaires td{text-align:right}
.horaires .auj{font-weight:700;color:var(--vert)}
@keyframes eclaire{0%{box-shadow:0 0 0 0 rgba(167,129,74,.6)}100%{box-shadow:0 0 0 22px rgba(167,129,74,0)}}
@media (prefers-reduced-motion:no-preference){.contact.eclaire .contact-bloc:nth-child(2){animation:eclaire 1.2s ease-out 2}}
@media (prefers-reduced-motion:reduce){.contact.eclaire .contact-bloc:nth-child(2){outline:2px solid var(--laiton);outline-offset:4px}}

/* ---------- La façade ---------- */
.final{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:flex-end;color:var(--blanc);background:var(--vert-nuit)}
.final-photo{position:absolute;inset:-4% 0}
.final-photo > img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.final-photo .vide{display:none}
/* Comme l'accueil : une ombre seulement derrière le titre, les fenêtres gardent leur lumière */
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 6% 92%,rgba(10,20,16,.7),rgba(10,20,16,0) 100%),linear-gradient(180deg,rgba(10,20,16,0) 55%,rgba(10,20,16,.45));pointer-events:none}
.final-texte{position:relative;z-index:1;width:100%;padding-bottom:70px}
.final h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:26px}

/* ---------- Pied de page ---------- */
.pied{background:var(--vert-nuit);color:#c9d2cc;padding:110px 0 0;font-size:.95rem}
.pied-haut{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px;padding-bottom:52px;border-bottom:1px solid rgba(214,189,143,.2)}
.pied-nom{font-family:var(--serif);font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1;letter-spacing:-.015em;color:var(--blanc)}
.pied-devise{font-family:var(--serif);font-style:italic;color:var(--laiton-clair);font-size:1.1rem}
.pied-in{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:48px;padding:56px 0 72px}
.pied-in p + p{margin-top:6px}
.pied-titre{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton-clair);margin-bottom:16px}
.pied-tel{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-size:1.4rem;color:var(--blanc);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.pied-tel:hover{color:var(--laiton-clair)}
.pied-liens{display:flex;flex-direction:column;align-items:flex-start;margin:-10px 0 0}
.pied-liens a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;transition:color .25s}
.pied-liens a:hover{color:var(--blanc)}
.lien-clair{color:var(--blanc)}
.lien-clair::after{background:var(--laiton-clair)}
.pied .lien-clair:hover{color:var(--laiton-clair)}
.pied-bas{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(214,189,143,.2);padding:14px 0 18px}
.pied-credit{font-size:.8rem;color:#a9b5ae}
.pied-haut-page{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#c9d2cc;transition:color .25s}
.pied-haut-page svg{width:14px;height:14px;rotate:-90deg;color:var(--laiton-clair)}
.pied-haut-page:hover{color:var(--blanc)}

/* ---------- Pages simples : mentions légales, page 404 ---------- */
.tete-simple .tete-in{justify-content:center}
.tete-simple .logo{margin:0;align-items:center}
.legal{padding:72px 0 110px}
.legal .conteneur{max-width:760px}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);color:var(--vert);margin-bottom:40px}
.legal h2{font-size:1.45rem;color:var(--vert);margin:38px 0 10px}
.legal p{color:var(--gris)}
.a-remplir{background:#f6e7b8;color:var(--encre);padding:0 6px}
.retour{margin-top:56px}
.introuvable{min-height:100svh;display:flex;align-items:center;text-align:center;background:var(--vert-nuit);color:var(--blanc)}
.introuvable .capitales{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton-clair)}
.introuvable h1{font-size:clamp(2.6rem,8vw,4.6rem);margin:18px 0}
.introuvable .accroche{margin:0 auto 32px}
.introuvable .boutons{justify-content:center}

/* ---------- Barre du bas sur téléphone ---------- */
.barre-tel{display:none}

/* ==========================================================
   Finitions : filets de laiton, numéros des pièces, survols.
   Tout reste uni et sobre : un trait fin, jamais de dégradé doré ni d'ornement.
   ========================================================== */

/* Petit filet de laiton devant les sur-titres (des deux côtés quand le titre est centré) */
.sur-titre::before,.tete-section .sur-titre::after{content:"";display:inline-block;width:26px;height:1px;background:currentColor;vertical-align:middle;opacity:.7}
.sur-titre::before{margin-right:14px}
.tete-section .sur-titre::after{margin-left:14px}
.groupes-carte .sur-titre::before{display:none}

/* Titres : le texte monte derrière un cache (voir animations.css) */
h2 .masque{display:block;overflow:hidden;padding:.12em 0;margin:-.12em 0}
h2 .texte{display:block}

/* Accueil : chaque ligne du nom a son cache ; repère « défiler » en bas */
.accueil h1 .ligne{display:block;overflow:hidden;padding:.06em 0 .1em;margin:-.06em 0 -.1em}
.accueil h1 .ligne > span{display:block}
.accroche{text-wrap:pretty}
.defiler{position:absolute;left:50%;bottom:0;z-index:2;width:44px;height:84px;margin-left:-22px;display:flex;justify-content:center;overflow:hidden}
.defiler i{width:1px;height:100%;background:rgba(214,189,143,.75);transform-origin:top}
.defiler:focus-visible{outline-offset:-2px}

/* Présentation : un trait vertical relie l'accueil au texte */
.intro-in::before{content:"";display:block;width:1px;height:56px;margin:0 auto 40px;background:var(--laiton);transform-origin:top}
.devise{letter-spacing:.01em}

/* La maison : les pièces sont numérotées dans l'ordre de la visite */
.maison{counter-reset:piece}
.piece .niveau{display:flex;align-items:center;gap:14px;counter-increment:piece}
.piece .niveau::before{content:counter(piece,decimal-leading-zero);font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--laiton)}
.piece .niveau::after{content:"";width:40px;height:1px;background:var(--ligne)}
.piece-texte h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.piece-texte p:not(.niveau){font-size:1.05rem}

/* La cuisine */

/* La carte : feuille blanche, trait de laiton qui glisse sous l'onglet choisi */
.menu{border-top:3px solid var(--vert)}
.onglets{position:relative}
.onglets button{transition:color .25s}
.onglets button:hover{color:var(--vert)}
.onglets.a-curseur button[aria-selected="true"]{border-bottom-color:transparent}
.onglets-curseur{position:absolute;left:0;top:0;height:2px;width:1px;background:var(--laiton);pointer-events:none;transform-origin:0 0}
.page-tete{flex-direction:column;align-items:center;gap:6px}
.page-tete::after{content:"";width:36px;height:1px;background:var(--laiton);margin-top:12px}

/* Les groupes */
.groupes-carte{box-shadow:0 30px 60px rgba(10,20,16,.18)}

/* Infos pratiques : un filet de laiton en haut de chaque bloc */
.contact-bloc{position:relative}
.contact-bloc::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--laiton);transform-origin:left}
.contact-bloc .gros a{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Liens soulignés : le trait se redessine de gauche à droite au survol */
.lien{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:inherit;transition:color .25s}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--laiton);transform-origin:left;transition:transform .5s var(--douce,ease)}
.lien:hover{color:var(--laiton-fonce)}
.lien:hover::after{animation:trait .6s var(--douce,ease)}
@keyframes trait{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* Liens du menu : trait de laiton qui part du centre */
@media (min-width:1021px){
  .nav a{position:relative;border-bottom:0}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--laiton);transform:scaleX(0);transition:transform .35s var(--douce,ease)}
  .nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
}

/* Boutons : un léger enfoncement au clic */
.btn{transition:background-color .25s,color .25s,border-color .25s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-clair:hover{border-color:var(--blanc)}
.btn{text-align:center;line-height:1.3}

/* ===================== Petit ordinateur (1021 à 1200 px) : l'en-tête se resserre ===================== */
.nav a,.logo-nom,.tete-droite .btn{white-space:nowrap}
@media (max-width:1200px){
  .defiler{display:none}
}
@media (min-width:1021px) and (max-width:1200px){
  .tete-in{gap:20px}
  .nav{gap:16px}
  .nav a{font-size:.86rem}
  .logo-nom{font-size:1rem;letter-spacing:.13em}
  .tete-droite .btn-petit{padding:0 14px;letter-spacing:.1em}
}

/* ===================== Tablette ===================== */
@media (max-width:1020px){
  .nav{position:fixed;inset:var(--haut-menu,calc(var(--tete) + 36px)) 0 0;overflow-y:auto;background:var(--vert-nuit);flex-direction:column;align-items:center;justify-content:center;gap:26px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .nav.ouvert{opacity:1;visibility:visible}
  .nav a{color:var(--blanc);font-family:var(--serif);font-size:1.7rem;font-weight:400}
  .nav .nav-tel{display:flex;align-items:center;gap:10px;font-family:var(--texte);font-size:1.05rem;color:var(--laiton-clair)}
  .nav .nav-tel svg{width:18px;height:18px}
  .burger{display:block}
  .piece,.piece.inverse{grid-template-columns:1fr;gap:40px;margin-bottom:96px}
  .piece.inverse .piece-photos{order:0}
  .piece-texte{max-width:600px}
  .piece-photos .petite,.piece.inverse .petite{right:0;left:auto;width:36%}
  .cuisine-texte,.film,.chef,.cuisine-cote{grid-column:1/-1}
  .cuisine-texte{padding-right:0}
  .film{max-width:560px;margin-top:56px}
  .chef{max-width:640px}
  .cuisine-cote{margin-top:56px}
  .cuisine-chef,.gestes{margin-top:110px}
  .gestes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .gestes .geste:nth-child(n){margin-top:0}
  .gestes .geste:nth-child(even){margin-top:64px}
  .a1{grid-column:1/-1;grid-row:auto}
  .assiettes-texte{grid-column:1/-1;grid-row:auto;padding:56px 0 64px;max-width:600px}
  /* Les deux gros plans côte à côte, alignés ; puis l'assiette devant le mur de pierre, en large */
  .a2,.a3,.a4{grid-row:auto;margin-top:0;align-self:start}
  .a2{grid-column:1/7}
  .a3{grid-column:7/13}
  .a4{grid-column:1/-1;margin-top:56px}
  .a4 .cadre{aspect-ratio:4/3}
  .a4 .cadre > img{object-position:50% 100%}
  .contact-in{grid-template-columns:1fr 1fr}
  .pied-in{grid-template-columns:1fr 1fr}
}

/* ===================== Téléphone ===================== */
@media (max-width:680px){
  :root{--tete:64px}
  body{font-size:1rem}
  .conteneur,.large,.piece{padding:0 16px}
  .infobar-adr{display:none}
  .infobar-in{justify-content:space-between}
  .statut-horaires{right:auto;left:0}
  .tete-in{gap:16px}
  .tete-droite .btn{display:none}
  .logo-nom{font-size:.98rem;letter-spacing:.12em;white-space:nowrap}
  .accueil{min-height:calc(100svh - var(--tete) - 36px)}
  .accueil-in{flex-direction:column;align-items:flex-start;padding-top:90px;padding-bottom:96px}
  .accueil::after{background:linear-gradient(180deg,rgba(10,20,16,0) 24%,rgba(10,20,16,.62) 42%,rgba(10,20,16,.82) 100%)}
  /* Téléphone : la fenêtre de gauche sous son lustre allumé */
  .accueil-photo > img{object-position:9% 50%;transform:scale(1.14);transform-origin:12% 100%}
  .ville-longue{display:none}
  .accroche{font-size:1.05rem}
  .boutons .btn,.groupes-carte .btn{flex:1 1 100%;width:100%;padding:0 16px;letter-spacing:.1em}
  .legende{display:none}
  .intro{padding:72px 0 56px}
  .tete-section{margin-bottom:40px}
  .maison{padding-bottom:80px}
  .piece-photos{padding-bottom:56px}
  .piece-photos .petite,.piece.inverse .petite{width:42%;right:-4px;border-width:5px}
  .piece:last-child .grande{aspect-ratio:4/5}
  .cuisine,.assiettes{padding:88px 0 96px}
  .carte,.details{padding:80px 0}
  .cuisine-ouverture,.cuisine-chef,.assiettes-grille{column-gap:12px}
  .film{margin-top:44px}
  .cuisine-chef,.gestes{margin-top:80px}
  .gestes{gap:12px}
  .gestes .geste:nth-child(even){margin-top:48px}
  .legende-photo{font-size:.9rem;gap:8px;margin-top:10px}
  .legende-photo::before{width:14px}
  .a1{margin:0 -16px}
  .a1 .legende-photo{padding:0 16px}
  .assiettes-texte{padding:44px 0 52px}
  .a4{margin:36px -16px 0}
  .a4 .cadre{aspect-ratio:1}
  .a4 .legende-photo{padding:0 16px}
  .menu{padding:28px 16px 30px}
  .onglets{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;gap:22px}
  .onglets::-webkit-scrollbar{display:none}
  .onglets button{flex:none}
  .groupes{padding:0;min-height:0;flex-direction:column;align-items:stretch}
  .groupes-photo{position:relative;inset:auto;aspect-ratio:4/3;translate:none!important}
  .groupes::after{display:none}
  .groupes-carte{padding:36px 16px 56px;max-width:none}
  .mosaique{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px}
  .m1{grid-column:1/2;grid-row:1/3}
  .m2{grid-column:2/3;grid-row:1/2}
  .m3{grid-column:2/3;grid-row:2/3}
  .m4{grid-column:1/2;grid-row:3/5}
  .m5{grid-column:2/3;grid-row:3/5}
  .contact{padding:80px 0}
  .contact-in{grid-template-columns:1fr;gap:40px}
  .contact-bloc{padding:24px 0 0}
  .final{min-height:70vh}
  .final::after{background:linear-gradient(180deg,rgba(10,20,16,0) 28%,rgba(10,20,16,.6) 52%,rgba(10,20,16,.8) 100%)}
  .final-texte{padding-bottom:48px}
  .pied{padding-top:72px}
  .intro-in::before{height:40px;margin-bottom:28px}
  .defiler{display:none}
  .sur-titre::before{width:18px;margin-right:10px}
  .tete-section .sur-titre::after{width:18px;margin-left:10px}
  .pied-haut{padding-bottom:36px}
  .pied-in{grid-template-columns:1fr 1fr;gap:36px 20px;padding:40px 0 48px}
  .pied-in > :first-child,.pied-in > :nth-child(2){grid-column:1/-1}
  .pied-bas{padding-bottom:84px}
  .barre-tel{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--vert-nuit);border-top:1px solid rgba(214,189,143,.3);padding-bottom:env(safe-area-inset-bottom)}
  .barre-tel a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;color:var(--blanc);text-decoration:none;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .barre-tel svg{width:19px;height:19px}
  .barre-tel a:last-child{background:var(--laiton-bouton)}
}

/* ===================== Petit téléphone (360 px) ===================== */
@media (max-width:400px){
  .logo-nom{font-size:.9rem;letter-spacing:.1em}
}


/* Le menu de la semaine : une feuille claire au-dessus de l'ardoise */
/* Plus de seconde « carte » blanche au-dessus de l'ardoise : le menu du midi est posé à même la page, entre deux filets */
.semaine{max-width:860px;margin:0 auto 56px;padding:30px clamp(0px,5vw,56px) 36px;text-align:center;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.semaine .niveau{margin-bottom:6px}
.semaine h3{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--vert)}
.semaine-periode{font-family:var(--serif);font-style:italic;color:var(--laiton-fonce);margin-top:4px}
.semaine-plats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 18px}
.semaine-plats div{padding:0 10px}
.semaine-plats div + div{border-left:1px solid var(--ligne)}
.semaine-plats dt{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton-fonce);margin-bottom:6px}
.semaine-plats dd{margin:0;font-family:var(--serif);font-size:1.15rem;line-height:1.35}
.semaine-prix{font-size:.92rem;color:var(--gris);margin-bottom:22px;white-space:pre-wrap}
.semaine-texte{color:var(--gris);margin:14px 0 22px}
.accueil-semaine{margin-top:18px;font-size:.92rem}
.accueil-semaine a{color:#e9ece7;text-decoration:underline;text-decoration-color:var(--laiton-clair);text-underline-offset:5px}
.accueil-semaine a:hover{color:var(--blanc)}
@media (max-width:640px){
  .semaine-plats{grid-template-columns:1fr;gap:14px}
  .semaine-plats div + div{border-left:0;border-top:1px solid var(--ligne);padding-top:14px}
  .semaine-prix{white-space:normal}
}

/* Groupes : l'offre du moment (menu de fêtes…) */
.offre{border-left:2px solid var(--laiton);padding:4px 0 4px 18px;margin:-6px 0 28px}
.offre-titre{font-family:var(--serif);font-size:1.2rem;color:var(--vert)}
.offre-prix{font-family:var(--texte);font-size:.9rem;font-weight:600;color:var(--laiton-fonce)}
.groupes-carte .offre-texte{color:var(--gris);font-size:.95rem;margin:4px 0 0}
.groupes-carte .offre p{margin-bottom:0}
.semaine-affiche{max-width:360px;margin:22px auto 22px}
.semaine-affiche img{display:block;width:100%;height:auto;border:1px solid var(--ligne)}

/* ==========================================================
   La voix de la maison (01/11 au soir)
   Le site parle : « nous », « vous », des phrases en italique sous les titres, comme un hôte qui accueille.
   ========================================================== */
.chapeau{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--gris);margin:18px auto 0;max-width:34em}
.intro-phrase em{color:var(--laiton-fonce)}
.devise span{display:block;margin-top:10px;font:600 .7rem var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}

/* La grande salle en plein cadre : la visite change de pas (photo large, texte dessous en deux colonnes) */
.piece.plein-cadre{max-width:1400px;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:start}
.plein-cadre .piece-photos{grid-column:1/-1;padding-bottom:0;margin-bottom:64px}
.plein-cadre .grande{aspect-ratio:21/9}
.plein-cadre .grande > img{object-position:50% 56%}
.plein-cadre .piece-photos .petite{width:17%;right:56px;left:auto;bottom:-96px}
.plein-cadre .piece-texte{grid-column:1/10;max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);column-gap:56px}
.plein-cadre .piece-texte .niveau{grid-column:1;grid-row:1}
.plein-cadre .piece-texte h3{grid-column:1;grid-row:2;margin-bottom:0}
.plein-cadre .piece-texte p:not(.niveau){grid-column:2;grid-row:1/3}

/* Le Cossolo : la spécialité, en grand, pour finir la cuisine */
.cossolo{margin-top:170px;text-align:center}
.cossolo h3{font-size:clamp(3.4rem,10vw,8.5rem);font-style:italic;line-height:1;letter-spacing:-.02em;margin:22px 0 14px}
.cossolo-phrase{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--laiton-clair)}
.cossolo-phrase::after{content:"";display:block;width:64px;height:1px;margin:36px auto 0;background:var(--laiton-clair)}
.cossolo-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px;margin:36px auto 0}
.cossolo-trio li{padding:4px 28px;color:#d2dad5;line-height:1.55}
.cossolo-trio li + li{border-left:1px solid rgba(214,189,143,.3)}

/* Nos producteurs : les villages en grand, comme sur une carte de la Gascogne (texte seul, aucun ornement) */
.producteurs{margin-top:150px}
.producteurs-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 40px;padding-bottom:26px;border-bottom:1px solid var(--ligne)}
.producteurs-tete h3{color:var(--vert);font-size:clamp(1.8rem,3vw,2.5rem)}
.producteurs-liste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.producteurs-liste li{display:flex;flex-direction:column;gap:6px;padding:30px 22px 6px;border-left:1px solid var(--ligne)}
.producteurs-liste li:first-child{border-left:0;padding-left:0}
.prod-quoi{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--laiton-fonce)}
.prod-ou{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.2;color:var(--vert);hyphens:manual}
.prod-qui{font-size:.92rem;color:var(--gris)}

/* Fin de page : la phrase du jour, tirée des horaires */
.final-jour{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.35rem);color:#f3eee5;margin:-12px 0 28px;text-shadow:0 1px 12px rgba(0,0,0,.55)}

@media (max-width:1020px){
  .piece.plein-cadre{grid-template-columns:1fr;gap:40px}
  .plein-cadre .piece-photos{grid-column:1;margin-bottom:0;padding-bottom:70px}
  .plein-cadre .grande{aspect-ratio:4/3}
  .plein-cadre .piece-photos .petite{width:36%;right:0;bottom:0}
  .plein-cadre .piece-texte{grid-column:1;display:block;max-width:600px}
  .plein-cadre .piece-texte h3{margin-bottom:18px}
  .cossolo{margin-top:120px}
  .producteurs{margin-top:110px}
  .producteurs-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .producteurs-liste li,.producteurs-liste li:first-child{border-left:0;padding:22px 16px 18px 0;border-bottom:1px solid var(--ligne)}
}
@media (max-width:680px){
  .plein-cadre .piece-photos{padding-bottom:56px}
  .plein-cadre .piece-photos .petite{width:42%;right:-4px}
  .cossolo{margin-top:96px}
  .producteurs{margin-top:80px}
  .producteurs-liste{grid-template-columns:1fr}
  .producteurs-liste li,.producteurs-liste li:first-child{padding:18px 0}
  .cossolo-trio{grid-template-columns:1fr;max-width:340px}
  .cossolo-trio li{padding:14px 0}
  .cossolo-trio li + li{border-left:0;border-top:1px solid rgba(214,189,143,.3)}
  .chapeau{margin-top:14px}
}

/* ==========================================================
   Avis d'Adrien (01/11 au soir) : moins de texte, la devise en titre, le Cossolo plus haut,
   les assiettes dans le décor, la carte plus lisible, un carrousel à la place de la longue galerie.
   ========================================================== */
.accueil .sur-titre::before{display:none}

/* Présentation : la devise devient le titre */
.intro h2{font-style:italic;color:var(--vert);font-size:clamp(2.4rem,5.6vw,4.4rem);margin:16px 0 26px}
.intro .sur-titre::after{content:"";display:inline-block;width:26px;height:1px;background:currentColor;vertical-align:middle;opacity:.7;margin-left:14px}
.intro-phrase{font-size:clamp(1.15rem,1.9vw,1.45rem);max-width:36em;margin:0 auto}

/* Le Cossolo, juste après le film */
.cossolo{margin-top:130px}
.cossolo-prix{margin-top:34px;font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--laiton-clair)}


/* Les gestes : trois photos, celle du milieu descend */
.gestes{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1160px;gap:32px}
.gestes .geste:nth-child(even){margin-top:0}
.gestes .geste:nth-child(2){margin-top:96px}

/* Dans l'assiette : le dessert en grand et le texte ; puis l'assiette vue de dessus et celle du mur de pierre */
.a1{grid-column:1/8;grid-row:1}
.assiettes-texte{grid-column:9/13;grid-row:1;align-self:center;padding:0}
.a3{grid-column:1/6;grid-row:2;margin-top:120px;align-self:start}
.a3 .cadre{aspect-ratio:3/4}
.a4{grid-column:7/12;grid-row:2;margin-top:240px;align-self:start}
.a4 .cadre{aspect-ratio:4/5}
.a4 .cadre > img{object-position:50% 50%}

/* La carte : « La carte » en grand ; le midi, les dates et le menu complet bien visibles */
.carte .tete-section h2{font-size:clamp(2.8rem,6.4vw,5rem);margin-top:0;color:var(--vert)}
.carte .chapeau{margin-top:10px}
.semaine-midi{font-size:.95rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton-fonce);margin-bottom:6px}
.semaine-periode{font-size:clamp(1.15rem,2vw,1.35rem);margin-top:6px}
.semaine-prix{white-space:normal;margin-bottom:24px}
.semaine-prix-fort{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,1.9rem);color:var(--vert);margin-bottom:4px}
/* Instagram : l'icône seule, ronde et bien visible */
.insta{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--laiton);color:var(--vert);transition:background-color .25s,color .25s}
.insta svg{width:24px;height:24px}
.insta:hover{background:var(--vert);color:var(--blanc);border-color:var(--vert)}
.insta-clair{color:var(--laiton-clair);border-color:rgba(214,189,143,.5)}
.insta-clair:hover{background:var(--laiton-clair);color:var(--vert-nuit);border-color:var(--laiton-clair)}

/* La maison : photos verticales pour le comptoir et la terrasse, une assiette dans chaque pièce */
.piece.haute{grid-template-columns:5fr 6fr}
.piece.haute .grande{aspect-ratio:4/5}
.piece.inverse{grid-template-columns:5fr 7fr}
.piece:last-of-type{margin-bottom:0}
.piece:last-of-type .grande{aspect-ratio:4/5}

/* Les détails : un carrousel */
.details{max-width:1400px;margin:130px auto 0;padding:0 24px}
.details-tete{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.details-tete h3{color:var(--vert)}
.details-fleches{display:flex;gap:10px}
.fleche{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--laiton);background:none;color:var(--vert);cursor:pointer;transition:background-color .25s,color .25s,opacity .25s}
.fleche svg{width:18px;height:18px}
.fleche[data-carrousel="-1"] svg{rotate:180deg}
.fleche:hover:not(:disabled){background:var(--vert);color:var(--blanc);border-color:var(--vert)}
.fleche:disabled{opacity:.35;cursor:default}
.carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carrousel::-webkit-scrollbar{display:none}
.carrousel li{flex:0 0 clamp(250px,28vw,380px);scroll-snap-align:start}
.carrousel .cadre{aspect-ratio:4/5}
.carrousel .legende-h{display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 20px 16px;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:#f1ece1;background:linear-gradient(0deg,rgba(10,20,16,.6),transparent)}

/* Les groupes : la toile aux flamants en vue, une liste courte, un bouton pour appeler */
/* La toile à gauche, l'encadré à droite ; la photo est agrandie depuis la gauche pour sortir la télé noire du cadre */
.groupes-photo > img{object-position:0% 60%;transform:scale(1.4);transform-origin:0 60%}
.groupes-in{display:flex;justify-content:flex-end}
.groupes::after{background:linear-gradient(270deg,rgba(10,20,16,.55),rgba(10,20,16,0) 70%)}
.groupes-liste{margin:-10px 0 30px}
.groupes-liste li{display:flex;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px solid var(--ligne);font-family:var(--serif);font-size:1.15rem;color:var(--vert)}
.groupes-liste li:last-child{border-bottom:0}
.groupes-liste li::before{content:"";flex:none;width:14px;height:1px;background:var(--laiton);transform:translateY(-.32em)}
.btn-icone{gap:10px}
.btn-icone svg{width:16px;height:16px}

/* Infos pratiques : la fin de la page, avec le bouton pour réserver */
.contact .final-jour{color:var(--gris);text-shadow:none;margin:14px 0 0}
.contact-btn{margin-top:22px}

/* Pied de page court */
.pied{padding-top:90px}
.pied-bas .pied-liens{flex-direction:row;flex-wrap:wrap;gap:0 26px;margin:0}
.pied-haut + .pied-bas{padding:26px 0;border-top:0}

@media (max-width:1020px){
  .gestes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .gestes .geste:nth-child(n){margin-top:0}
  .gestes .geste:nth-child(2){margin-top:56px}
  .a1,.assiettes-texte{grid-column:1/-1;grid-row:auto}
  .assiettes-texte{padding:48px 0 0;max-width:600px}
  .a3{grid-column:1/7;grid-row:auto;margin-top:56px}
  .a4{grid-column:7/13;grid-row:auto;margin-top:120px}
  .piece.haute,.piece.inverse{grid-template-columns:1fr}
  .piece.haute .piece-photos{max-width:560px}
  .details{margin-top:100px}
}
@media (max-width:680px){
  .gestes{gap:8px}
  .gestes .geste:nth-child(2){margin-top:32px}
  .gestes .legende-photo{display:none}
  .a1{margin:0 -16px}
  .a3,.a4{margin-left:0;margin-right:0}
  .a4{margin-top:72px}
  .a4 .cadre{aspect-ratio:4/5}
  .details{padding:0 16px;margin-top:80px}
  .groupes-in{display:block}
  .groupes-photo > img{transform:scale(1.3)}
  .details-fleches{display:none}
  .carrousel{margin:0 -16px;padding:0 16px;scroll-padding:0 16px;gap:10px}
  .carrousel li{flex-basis:72vw}
  .pied-bas{flex-wrap:wrap}
}

/* D'autres assiettes : bande qui défile à l'horizontale (scroll-snap, sans JavaScript) */
.rail-assiettes{margin-top:110px}
.rail-assiettes .sur-titre{margin-bottom:18px}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 14px;margin:0;list-style:none;scrollbar-width:thin;scrollbar-color:var(--laiton) transparent}
.rail li{flex:0 0 clamp(220px,24vw,300px);scroll-snap-align:start}
.rail .cadre{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.rail img{display:block;width:100%;height:100%;object-fit:cover}
.rail:focus-visible{outline:2px solid var(--laiton);outline-offset:4px}
@media (max-width:700px){.rail-assiettes{margin-top:64px}.rail{gap:12px}.rail li{flex-basis:72vw}}
/* Liens vers les pages ciblées (menu-du-midi/, groupes/) : sur leur propre ligne */
.semaine .semaine-lien{display:table;margin:14px auto 0}
.groupes-carte .groupes-lien{display:table;margin-top:14px}