/* ═══════════════════════════════════════════════════════════════════
   AU COUSCOUS — la feuille de style du site.

   Les chemins d'image sont relatifs A CE FICHIER, pas a la page : la
   feuille vit dans assets/css/, donc « ../img/ ». Ecrits comme dans la
   page, ils pointaient sur assets/css/assets/img/ et l'image du bandeau
   de la carte ne s'affichait pas.
   Elle etait recopiee dans chaque page. Une couleur changee demandait
   alors de la changer partout, et une page finissait toujours par etre
   oubliee.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   AU COUSCOUS — refonte premium.
   Une institution de 1958, au premier etage de la rue Enning. La page
   doit avoir la tenue d'une carte imprimee, pas d'un site de quartier.

   Les couleurs sont les leurs, prises sur leur site et leur Instagram :
   du blanc en fond, un brun tres fonce pour l'encre, un terracotta pour
   les actions. Deux blocs sombres seulement — l'ouverture et le soir du
   mercredi — pour que le blanc respire au lieu de s'etaler.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --papier:#ffffff;
  --papier-2:#faf5ef;      /* creme tres pale, la meme que leur site */
  --encre:#291901;         /* leur brun de texte */
  --encre-2:#5c4a37;
  --sourdine:#786451;
  --terre:#8f3a27;         /* le terracotta de leurs cartes Instagram */
  --terre-clair:#b5563e;
  /* Les actions ne prennent pas le terracotta : un sable dore, plus nu, plus
     calme. Le terracotta reste aux accents de texte — petites capitales, prix,
     filets — ce qui donne deux tons au lieu d'un aplat. */
  --sable:#c8a97e;
  --sombre:#1a0e00;        /* leur brun noir */
  --sombre-2:#241608;
  --ligne:#e9e0d5;
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --marge:clamp(20px, 5vw, 76px);
  --rythme:clamp(72px, 11vw, 160px);
}
*{box-sizing:border-box}
/* L'ancre s'arrete AU-DESSUS du bandeau et du sommaire, sinon le titre de la
   famille se cache dessous. Les deux hauteurs, pas une seule. */
html{-webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--h-bandeau, 68px) + 62px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* clip, et non hidden : overflow-x:hidden fait du corps de page un
     conteneur de defilement, ce qui tue tout position:sticky a l'interieur —
     le sommaire de la carte s'en allait avec la page. clip coupe le
     debordement sans creer ce conteneur. */
  overflow-x:clip;
}
/* height:auto va avec les attributs width/height du HTML — ils sont la pour
   reserver la place et eviter que la page saute au chargement des images, mais
   sans cette ligne c'est la hauteur ECRITE qui gagne : le logo s'etirait sur
   686 pixels de haut pour 132 de large. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ── Titres ─────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;line-height:1.1;letter-spacing:-.005em}
.sur{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--terre);display:block;margin-bottom:22px;
}
.sur::before{content:'';display:inline-block;width:26px;height:1px;background:var(--terre);
  vertical-align:middle;margin-right:14px;transform:translateY(-2px)}
.lead{font-family:var(--serif);font-size:clamp(20px,2.3vw,26px);line-height:1.6;
  color:var(--encre-2);font-style:italic;font-weight:500}

/* ── Bandeau du haut ─────────────────────────────────────────────
   Il commence CLAIR sur l'ouverture sombre, puis devient sombre sur
   blanc des qu'on descend. Un bandeau qui garderait son encre claire
   sur la page blanche serait tout simplement illisible. ── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:40;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--marge);
  transition:padding .45s cubic-bezier(.22,1,.36,1), background .45s ease,
             box-shadow .45s ease, color .45s ease;
}
.top.pose{
  padding:11px var(--marge);color:var(--encre);
  background:color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--ligne);
}
/* Un voile degrade sous le bandeau, tant qu'il flotte sur la video : le nom
   et les liens se perdaient dans les plats colores du premier plan. Il
   disparait des que le bandeau se pose sur le blanc, ou il n'a plus lieu
   d'etre. */
.top::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(26,14,0,.62), rgba(26,14,0,0));
  transition:opacity .45s ease}
.top.pose::before{opacity:0}
.marque{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.marque img{width:clamp(126px,14vw,164px);height:auto;
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.top.pose .marque img{width:clamp(112px,11vw,138px)}
/* Le logo existe en clair et en encre : c'est le meme dessin, retourne pour
   rester lisible sur les deux fonds. */
.marque .clair{display:block} .marque .fonce{display:none}
.top.pose .marque .clair{display:none} .top.pose .marque .fonce{display:block}
.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:currentColor;opacity:.9;position:relative;padding:6px 0;
  transition:opacity .3s ease;
}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--sable);transition:right .45s cubic-bezier(.22,1,.36,1)}
.nav a:hover{opacity:1} .nav a:hover::after{right:0}

/* ── Boutons ────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:16px 32px;
  border:1px solid var(--sable);color:var(--encre);background:transparent;
  position:relative;overflow:hidden;cursor:pointer;
  transition:color .4s ease, border-color .4s ease;
}
.btn::before{content:'';position:absolute;inset:0;background:var(--sable);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1);z-index:0}
.btn span{position:relative;z-index:1}
/* L'encre reste sombre au survol : du blanc sur du sable ne se lit pas. */
.btn:hover{color:var(--sombre);border-color:var(--sable)}
.btn:hover::before{transform:scaleX(1)}
.btn.plein{background:var(--sable);color:var(--sombre);border-color:var(--sable)}
/* Le survol garde exactement le meme sable. Le retour visuel vient d'un halo
   de la meme couleur, pas d'un changement de teinte — un bouton qui change de
   couleur au passage de la souris fait deux couleurs a expliquer. */
.btn.plein:hover{box-shadow:0 0 0 3px color-mix(in srgb, var(--sable) 34%, transparent)}
.btn:hover{box-shadow:0 0 0 3px color-mix(in srgb, var(--sable) 26%, transparent)}
.btn.bandeau{padding:12px 24px;font-size:11.5px;letter-spacing:.16em}
/* Sur fond sombre, le contour se lit en clair, mais le remplissage reste sable. */
.sur-sombre .btn{border-color:rgba(255,255,255,.45);color:#fff}
.sur-sombre .btn:hover{color:var(--sombre);border-color:var(--sable)}
.sur-sombre .btn.plein{background:var(--sable);border-color:var(--sable);color:var(--sombre)}

/* ── Le menu du telephone ───────────────────────────────────────── */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;
  position:relative;z-index:60}
/* Les trois traits en sable, et non a la couleur du texte : sur le bandeau
   pose, ils devenaient brun tres fonce sur du blanc — lisibles, mais eteints,
   alors que c'est le seul bouton du bandeau sur telephone. Deux pixels au lieu
   d'un : un trait d'un pixel disparait sur un ecran a forte densite. */
.burger i{display:block;width:26px;height:2px;border-radius:2px;
  background:var(--sable);margin:6px auto;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, background .3s ease}
/* Pose sur le blanc, le sable seul manque de corps : on le fonce d'un cran. */
.top.pose .burger i{background:color-mix(in srgb, var(--sable) 78%, var(--terre))}
.burger.on i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Le voile monte du haut et occupe tout l'ecran. overflow:auto : sur un petit
   telephone en paysage, le contenu depasse — sans ca, la moitie du menu est
   inatteignable. */
.voile{
  position:fixed;inset:0;z-index:50;background:var(--sombre);color:#fff;
  display:flex;flex-direction:column;padding:18px var(--marge) calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .45s ease, visibility .45s, transform .5s cubic-bezier(.22,1,.36,1);
}
.voile.on{opacity:1;visibility:visible;transform:none}
.voile-tete{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.14);flex:0 0 auto}
.voile-tete img{width:132px;height:auto}
/* La croix vit DANS le voile. Elle etait posee dans le bandeau, qui a son
   propre contexte d'empilement : elle passait dessous, et le menu ne se
   fermait plus qu'avec la touche Echap. */
.voile-x{width:46px;height:46px;border:1px solid rgba(255,255,255,.28);background:none;
  border-radius:50%;position:relative;cursor:pointer;flex:0 0 auto;
  transition:border-color .3s ease, background .3s ease}
.voile-x:hover{border-color:var(--sable);background:rgba(255,255,255,.05)}
.voile-x span{position:absolute;left:50%;top:50%;width:17px;height:1px;background:#fff;
  transform-origin:center}
.voile-x span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.voile-x span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

.voile-nav{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;
  padding:26px 0;gap:2px;min-height:0}
/* Les memes capitales que la navigation de l'ordinateur. Elles etaient en
   bas-de-casse serif ici et en capitales la-bas : deux typographies pour la
   meme navigation. */
.voile-nav a{
  display:flex;align-items:center;gap:18px;text-decoration:none;color:#fff;
  font-family:var(--sans);font-size:clamp(17px,4.6vw,21px);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  line-height:1.3;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;transform:translateY(16px);
}
/* L'icone garde sa propre police : c'est la bibliotheque qui la dessine, pas
   nous. Elle est alignee sur la hauteur de la ligne, pas sur la base du texte,
   sinon elle flotte. */
.voile-nav a i{font-size:1.15em;color:var(--sable);flex:0 0 auto;width:1.3em;
  text-align:center;align-self:center;line-height:1}
.voile.on .voile-nav a{opacity:1;transform:none;
  transition:opacity .5s ease var(--d), transform .6s cubic-bezier(.22,1,.36,1) var(--d)}

.voile-pied{flex:0 0 auto;opacity:0;transform:translateY(16px)}
.voile.on .voile-pied{opacity:1;transform:none;
  transition:opacity .5s ease var(--d), transform .6s cubic-bezier(.22,1,.36,1) var(--d)}
.voile-cta{display:block;width:100%;text-align:center}
/* Adresse, telephone et horaires : trois blocs centres, chacun annonce par son
   intitule. Ils tenaient en deux paragraphes colles a gauche, ou l'on ne
   savait pas ou finissait l'adresse et ou commencaient les horaires. */
.voile-infos{margin:26px 0 0;padding:22px 0 0;display:grid;gap:20px;text-align:center;
  border-top:1px solid rgba(255,255,255,.12)}
.voile-infos div{margin:0}
.voile-infos dt{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sable);margin-bottom:7px}
.voile-infos dt i{font-size:14px;line-height:1}
.voile-infos dd{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.84)}
.voile-infos dd a{color:#fff;text-decoration:none;font-size:18px;font-weight:500;
  letter-spacing:.03em}

/* ── L'ouverture ────────────────────────────────────────────────── */
/* 100vh d'abord, 100svh ensuite : un navigateur qui ignore svh garde une
   ouverture pleine hauteur au lieu de laisser un vide sous l'image. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:120px var(--marge) 140px;overflow:hidden;
  color:#fff;background:var(--sombre)}
.hero-fond{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.hero-fond img,.hero-fond video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(.5) saturate(.88) contrast(1.04)}
/* La video se fond par-dessus la photo quand elle est vraiment prete a jouer :
   sans ce fondu, on voit une saccade au premier plan de la boucle. */
.hero-fond video{opacity:0;transition:opacity 1.1s ease}
.hero-fond video.joue{opacity:1}
.hero::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 88% at 50% 42%, transparent 4%, rgba(26,14,0,.55) 58%, rgba(26,14,0,.94) 100%)}
.hero-in{position:relative;z-index:2;max-width:760px}
/* Le logo porte le nom : c'est lui l'accroche, pas une vignette au-dessus du
   texte. On lui donne la taille qui va avec ce role. */
.hero-logo{width:clamp(190px,26vw,320px);margin:0 auto 26px;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.6))}
/* Lu par les moteurs et les lecteurs d'ecran, jamais affiche : le logo dit
   deja le nom juste au-dessus, l'ecrire une seconde fois en grand faisait
   doublon. */
.lu-seulement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.hero h1{font-size:clamp(46px,8vw,92px);letter-spacing:-.01em;color:#fff}
.hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--sable);
  letter-spacing:.005em}
.hero .lead{margin:28px auto 40px;max-width:520px;color:rgba(255,255,255,.86)}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Le filet qui encadre l'ouverture : c'est le cadre de leur logo, repris. */
.hero-cadre{position:absolute;inset:88px 26px 26px;z-index:2;
  border:1px solid rgba(255,255,255,.22);pointer-events:none}
@media(max-width:900px){ .hero-cadre{inset:78px 14px 14px} }
.defiler{position:absolute;left:50%;bottom:30px;z-index:3;transform:translateX(-50%);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.defiler::after{content:'';display:block;width:1px;height:44px;margin:12px auto 0;
  background:linear-gradient(rgba(255,255,255,.8), transparent);animation:coule 2.4s ease-in-out infinite}
@keyframes coule{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ── Rythme general ─────────────────────────────────────────────── */
section{position:relative;padding:var(--rythme) var(--marge)}
.large{max-width:1240px;margin:0 auto}
.etroit{max-width:760px;margin:0 auto}

/* ── Le bandeau des trois piliers ───────────────────────────────── */
.piliers{background:var(--papier-2);border-block:1px solid var(--ligne)}
.piliers .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne)}
.pilier{background:var(--papier-2);padding:clamp(28px,4vw,52px) clamp(20px,3vw,44px);text-align:center}
.pilier b{display:block;font-family:var(--serif);font-size:clamp(36px,5vw,54px);
  font-weight:600;color:var(--terre);line-height:1}
.pilier span{display:block;font-size:11.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--encre-2);margin-top:14px}
@media(max-width:760px){ .piliers .grille{grid-template-columns:1fr} }

/* ── Deux colonnes, texte et image ──────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.duo.inverse .duo-txt{order:2}
@media(max-width:900px){ .duo{grid-template-columns:1fr} .duo.inverse .duo-txt{order:0} }
.duo h2{font-size:clamp(34px,5vw,58px);margin-bottom:24px}
.duo p{color:var(--encre-2);margin:0 0 18px}

/* L'arche : la forme du logo et des fenetres de la salle. */
.arche{position:relative}
.arche img{border-radius:50% 50% 6px 6px / 26% 26% 2% 2%;filter:saturate(.95) contrast(1.02)}
.arche::before{content:'';position:absolute;inset:-14px;pointer-events:none;
  border:1px solid color-mix(in srgb, var(--terre) 40%, transparent);
  border-radius:50% 50% 6px 6px / 26% 26% 2% 2%}

/* ── La carte ───────────────────────────────────────────────────── */
.carte{background:var(--papier-2);border-block:1px solid var(--ligne)}
.carte-tete{text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.carte-tete h2{font-size:clamp(36px,5.5vw,64px)}
.familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(30px,4vw,56px)}
.famille h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--terre);padding-bottom:14px;margin-bottom:8px;
  border-bottom:1px solid color-mix(in srgb, var(--terre) 35%, transparent)}
.plat{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid var(--ligne)}
.plat:last-child{border-bottom:0}
/* Le point vegetarien ne doit jamais tomber seul sur la ligne suivante :
   il fait partie du nom du plat, pas de la ligne de pointilles. */
.plat-nom{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--encre);
  line-height:1.26;text-wrap:pretty}
.plat-nom i{display:block;font-family:var(--sans);font-style:normal;font-size:13.5px;
  font-weight:400;color:var(--encre-2);letter-spacing:.01em;margin-top:6px;line-height:1.55}
.plat-pts{flex:1 1 auto;height:1px;min-width:16px;transform:translateY(-4px);
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--terre) 45%, transparent) 0 2px, transparent 2px 6px)}
.plat-prix{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--terre);white-space:nowrap}
.veg{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--terre);
  vertical-align:middle;margin-left:8px}
.carte-pied{text-align:center;margin-top:clamp(40px,5vw,64px)}
.carte-pied p{color:var(--encre-2);font-size:14.5px;margin:0 0 22px}

/* ── Le mercredi : le seul autre bloc sombre de la page ─────────── */
.mercredi{text-align:center;background:var(--sombre);color:#fff;position:relative;overflow:hidden}
.mercredi::before{content:'';position:absolute;inset:0;opacity:.16;
  background:url('../img/lanterne.jpg') center/cover;filter:saturate(.7)}
.mercredi > *{position:relative;z-index:1}
.mercredi h2{font-size:clamp(32px,5vw,56px);margin-bottom:18px;color:#fff}
.mercredi .lead{margin:0 auto;max-width:560px;color:rgba(255,255,255,.82)}
.mercredi .sur{color:var(--sable)}
.mercredi .sur::before{background:var(--sable)}

/* ── La galerie ─────────────────────────────────────────────────── */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galerie figure{margin:0;overflow:hidden;position:relative;aspect-ratio:3/4}
.galerie figure:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.galerie img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1), filter .7s ease;filter:saturate(.94)}
.galerie figure:hover img{transform:scale(1.05);filter:saturate(1.05)}
@media(max-width:820px){ .galerie{grid-template-columns:repeat(2,1fr)}
  .galerie figure:nth-child(1){grid-column:span 2;grid-row:auto;aspect-ratio:4/3} }

/* ── Le pied ────────────────────────────────────────────────────── */
.pied{background:var(--sombre);color:rgba(255,255,255,.8);padding:var(--rythme) var(--marge) 46px}
.pied-grille{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(32px,5vw,64px);
  max-width:1240px;margin:0 auto}
@media(max-width:860px){ .pied-grille{grid-template-columns:1fr;text-align:center} }
.pied-logo{width:78px;margin-bottom:22px}
@media(max-width:860px){ .pied-logo{margin-inline:auto} }
.pied h4{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sable);margin:0 0 18px}
.pied p, .pied li{margin:0 0 9px;font-size:15.5px}
.pied ul{list-style:none;padding:0;margin:0}
.pied a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease}
.pied a:hover{color:var(--sable);border-bottom-color:currentColor}
.horaire{display:flex;justify-content:space-between;gap:18px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
@media(max-width:860px){ .horaire{justify-content:center;gap:10px} }
.horaire b{font-weight:500;color:#fff}
.pied-bas{max-width:1240px;margin:clamp(44px,6vw,72px) auto 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.5)}
.pied-bas a{color:var(--sable)}

/* ── L'apparition au defilement ─────────────────────────────────── */
.monte{opacity:0;transform:translateY(26px)}
.monte.vu{opacity:1;transform:none;
  transition:opacity .9s ease var(--r,0s), transform 1s cubic-bezier(.22,1,.36,1) var(--r,0s)}
@media (prefers-reduced-motion:reduce){
  .monte{opacity:1;transform:none}
  .defiler::after{animation:none}
  .hero-fond{transform:none!important}
}

/* ── Telephone ──────────────────────────────────────────────────── */
@media(max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .hero-actions .btn{width:min(300px,100%)}
  /* Le logo occupe maintenant le haut de l'ecran : l'invitation a defiler
     venait mordre sur le second bouton. Les deux boutons suffisent a dire
     qu'il se passe quelque chose plus bas. */
  .defiler{display:none}
  .hero{padding-bottom:96px}
}
/* Ecran bas — un portable pose a l'horizontale, une fenetre reduite : meme
   raison, la place manque. */
@media(max-height:720px){ .defiler{display:none} }
/* Le rappel du bas, sur telephone : appeler et se rendre sur place sont les
   deux seuls gestes qu'on attend d'un site de restaurant. */
.rappel{position:fixed;left:0;right:0;bottom:0;z-index:38;display:none;
  grid-template-columns:1fr 1fr;background:color-mix(in srgb, var(--papier) 96%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--ligne);box-shadow:0 -6px 24px rgba(41,25,1,.08);
  transform:translateY(102%);transition:transform .5s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.rappel.on{transform:none}
.rappel a i{font-size:16px;line-height:1;color:currentColor}
.rappel a{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:18px 10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--encre)}
.rappel a+a{background:var(--sable);color:var(--sombre);font-weight:600}
@media(max-width:900px){ .rappel{display:grid} }

/* ── Propre a la page de la carte ────────────────────────────────── */
/* ── Bandeau ─────────────────────────────────────────────────────── */
.barre{position:sticky;top:0;z-index:40}
.top .retour{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 16px 9px 13px;
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.top .retour:hover{background:rgba(255,255,255,.06);border-color:var(--sable);color:var(--sable)}
.top .mot{display:block}
.top .mot img{width:126px}
.top .resa{background:var(--sable);color:var(--sombre);text-decoration:none;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 22px;border:1px solid var(--sable);border-radius:12px;
  transition:box-shadow .3s ease}
.top .resa:hover{box-shadow:0 0 0 3px color-mix(in srgb, var(--sable) 34%, transparent)}
.top .retour span.lbl{display:none}
.top .retour{padding:9px 12px}
.top .mot img{width:104px}
.top .resa{padding:11px 15px;letter-spacing:.1em}
}
/* ── Ouverture ───────────────────────────────────────────────────── */
/* L'ouverture de la carte porte une photographie, comme celle de l'accueil :
   une carte de restaurant s'ouvre sur une table, pas sur un aplat. Le voile
   sombre est assez dense pour que le texte se lise sur n'importe quelle zone
   de l'image, y compris les plus claires. */
.tete{position:relative;text-align:center;color:#fff;overflow:hidden;
  padding:clamp(64px,10vw,120px) var(--marge) clamp(56px,8vw,96px);
  background:var(--sombre)}
.tete::before{content:'';position:absolute;inset:0;
  background:url('../img/mezzes-table.jpg') center/cover;
  filter:brightness(.5) saturate(.9) contrast(1.04)}
.tete::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%, transparent 4%, rgba(26,14,0,.5) 58%, rgba(26,14,0,.9) 100%)}
.tete > *{position:relative;z-index:1}
.tete .sur{font-size:11.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--sable);display:block;margin-bottom:18px}
.tete h1{font-size:clamp(42px,8vw,84px);color:#fff}
.tete p{max-width:580px;margin:20px auto 0;font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:clamp(19px,2.2vw,24px);line-height:1.6;
  color:rgba(255,255,255,.86)}
/* Le filet qui encadre l'ouverture, comme sur l'accueil. */
.tete .cadre{position:absolute;inset:20px;z-index:1;border:1px solid rgba(255,255,255,.2);
  pointer-events:none}
@media(max-width:640px){ .tete .cadre{inset:12px} }
/* ── Sommaire ────────────────────────────────────────────────────── */
/* Le sommaire colle SOUS le bandeau. Sa hauteur n'est pas devinee : le script
   la mesure et la pose dans --h-bandeau, parce qu'elle change quand le bandeau
   se replie et qu'elle n'est pas la meme sur telephone. */
.somm{position:sticky;top:var(--h-bandeau,68px);z-index:30;
  background:color-mix(in srgb, var(--papier) 94%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ligne);padding:0 var(--marge)}
.somm-in{max-width:1100px;margin:0 auto;display:flex;gap:9px;overflow-x:auto;
  scrollbar-width:none;padding:12px 0;scroll-padding:0 20px}
.somm-in::-webkit-scrollbar{display:none}
/* De vraies pastilles. C'etaient de petites capitales soulignees au survol :
   rien ne disait qu'on pouvait appuyer dessus, et on ne savait pas davantage
   dans quelle famille on se trouvait. */
.somm a{white-space:nowrap;text-decoration:none;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);
  padding:10px 17px;border:1px solid var(--ligne);border-radius:999px;
  background:var(--papier);
  transition:color .3s ease,border-color .3s ease,background .3s ease}
.somm a:hover{color:var(--terre);border-color:var(--sable);
  background:color-mix(in srgb, var(--sable) 12%, var(--papier))}
/* Celle qu'on est en train de lire. */
.somm a.actif{background:var(--terre);border-color:var(--terre);color:#fff}

/* Pas de degrade au bord droit : il passait par-dessus la pastille active,
   qui est sombre, et on croyait a un defaut d'affichage. La rangee est
   visiblement coupee, elle se suffit. */
.somm-in{gap:20px} }
/* ── Les familles ────────────────────────────────────────────────── */
.carte{max-width:1100px;margin:0 auto;padding:clamp(40px,6vw,74px) var(--marge) 0}
.fam + .fam{padding-top:clamp(30px,4vw,52px)}
/* Le bandeau de titre. Sans lui, on faisait defiler une longue liste de plats
   sans jamais savoir si on lisait encore les entrees ou deja les desserts.
   Il est plein, colore et centre : c'est un panneau, pas une ligne de plus. */
.fam-tete{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;background:var(--papier-2);border:1px solid var(--ligne);border-radius:16px;
  padding:clamp(24px,3.4vw,34px) 22px;margin:0 0 clamp(26px,3.4vw,38px)}
.fam-tete i{font-size:30px;line-height:1;color:var(--terre)}
.fam h2{font-size:clamp(27px,3.8vw,42px);color:var(--encre);margin:0}
/* Un filet dore sous le titre, comme sur une carte imprimee. */
.fam-tete::after{content:'';width:56px;height:2px;background:var(--sable)}
.fam h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--terre);margin:34px 0 10px}
.fam-intro{max-width:64ch;color:var(--encre-2);margin:0 0 16px}
.fam-texte{max-width:64ch;color:var(--encre-2);font-size:15.5px;margin:0 0 14px}
.fam-note{margin:26px 0 0;padding:15px 18px;background:var(--papier-2);
  border-left:2px solid var(--sable);font-size:14.5px;color:var(--encre-2);max-width:72ch}
.plats{display:grid;gap:0}
.fam-col .plats{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  column-gap:clamp(30px,4vw,56px)}
.plats-serre{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  column-gap:clamp(30px,4vw,56px)}
.plat-nom em{font-family:var(--sans);font-style:normal;font-size:13px;font-weight:400;
  color:var(--terre-clair);letter-spacing:.02em;white-space:nowrap}
.plat-nom u{display:block;font-family:var(--sans);text-decoration:none;font-size:13px;
  color:var(--terre);margin-top:5px;font-weight:500}
.plat-prix.multi{display:flex;flex-direction:column;gap:2px}
.plat-prix .pl{display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
.plat-prix .pl i{font-family:var(--sans);font-style:normal;font-size:12.5px;
  font-weight:400;color:var(--sourdine)}
/* Les marqueurs de la carte imprimee : la feuille pour vegetarien, le piment
   pour le releve — deux piments pour « un peu plus releve », comme sur leur
   carte. Ils viennent de la bibliotheque d'icones, appeles par leur classe. */
.mq{display:inline-flex;align-items:center;gap:1px;margin-left:8px;
  font-size:14px;line-height:1;vertical-align:middle}
.mq.veg{color:#4d7a3a}
.mq.pic{color:var(--terre-clair)}
/* ── Legende ─────────────────────────────────────────────────────── */
.legende{max-width:1100px;margin:0 auto;padding:0 var(--marge) clamp(46px,6vw,70px);
  display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;
  font-size:13.5px;color:var(--encre-2)}
.legende b{font-weight:500;display:inline-flex;align-items:center;gap:8px}
/* ── Pied ────────────────────────────────────────────────────────── */
.pied{background:var(--sombre);color:rgba(255,255,255,.75);text-align:center;
  padding:clamp(46px,6vw,72px) var(--marge) 38px}
.pied img{width:120px;margin:0 auto 22px}
.pied .f-nom{display:block;color:var(--sable);font-weight:600;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:12px}
.pied .btn{display:inline-block;margin-top:24px;background:var(--sable);color:var(--sombre);
  border:1px solid var(--sable);border-radius:12px;padding:16px 32px;text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pied .f-imp{display:block;margin-top:30px;padding-top:18px;font-size:11.5px;
  color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.13)}
.pied .f-imp a{color:var(--sable)}
/* ── Rappel du bas, sur telephone ────────────────────────────────── */
.rappel{position:fixed;left:0;right:0;bottom:0;z-index:38;display:none;
  grid-template-columns:1fr 1fr;background:color-mix(in srgb, var(--papier) 96%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--ligne);box-shadow:0 -6px 24px rgba(41,25,1,.08);
  padding-bottom:env(safe-area-inset-bottom)}

/* ═══════════════════════════════════════════════════════════════════
   LES PAGES INTERIEURES
   Le site tenait sur une seule page : ces blocs n'existaient pas.
   ═══════════════════════════════════════════════════════════════════ */

/* Sur une page sans ouverture en pleine image, le bandeau est pose des le
   depart et reste au-dessus du contenu. */
.top.fixe{position:fixed}
body.page-claire{padding-top:74px}
@media(max-width:900px){ body.page-claire{padding-top:66px} }

/* L'en-tete d'une page interieure : pas de photo, du blanc et de l'air. */
.tetepage{text-align:center;padding:clamp(48px,7vw,90px) var(--marge) clamp(30px,4vw,48px)}
.tetepage h1{font-size:clamp(38px,6.4vw,72px);margin:0}
.tetepage .sur{display:inline-block}
.tetepage .lead{margin:22px auto 0;max-width:600px}

/* Les trois portes de l'accueil. Une image, un titre, une phrase — et on va
   lire la suite sur SA page. */
.portes{background:var(--papier-2);border-block:1px solid var(--ligne)}
.portes-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){ .portes-grille{grid-template-columns:1fr} }
.porte{display:flex;flex-direction:column;text-decoration:none;background:var(--papier);
  border:1px solid var(--ligne);border-radius:16px;overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease}
.porte:hover{transform:translateY(-4px);border-color:var(--sable);
  box-shadow:0 18px 44px rgba(41,25,1,.09)}
.porte-img{aspect-ratio:4/3;overflow:hidden}
.porte-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,1,.36,1);filter:saturate(.94)}
.porte:hover .porte-img img{transform:scale(1.05)}
.porte-txt{padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;flex:1 1 auto}
.porte-txt .sur{margin-bottom:12px}
.porte-txt h3{font-size:clamp(22px,2.6vw,28px);margin:0 0 12px;color:var(--encre)}
.porte-txt p{margin:0 0 18px;color:var(--encre-2);font-size:15.5px;flex:1 1 auto}
.porte-lien{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--terre)}
.porte-lien i{font-size:15px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.porte:hover .porte-lien i{transform:translateX(5px)}

/* Les trois blocs de la page « Nous trouver ». */
.infos-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){ .infos-grille{grid-template-columns:1fr} }
.info{background:var(--papier-2);border:1px solid var(--ligne);border-radius:16px;
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column}
.info > i{font-size:28px;line-height:1;color:var(--terre);margin-bottom:16px}
.info h2{font-size:clamp(23px,2.6vw,29px);margin:0 0 14px}
.info p{margin:0 0 8px;color:var(--encre-2)}
.info a{color:var(--terre);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s ease}
.info a:hover{border-bottom-color:currentColor}
.info-tel{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:.01em}
.info-note{margin:14px 0 20px!important;font-size:14px;line-height:1.65;color:var(--sourdine)}
.info .btn{margin-top:auto;align-self:flex-start;text-align:center}
.info .btn:hover{color:var(--sombre)}
/* Les horaires sur fond clair : le pied de page les affiche sur du sombre. */
.horaire.clair{border-bottom-color:var(--ligne);color:var(--encre-2)}
.horaire.clair b{color:var(--encre);font-weight:500}

/* Le plan. */
.plan{padding-top:0}
.plan-cadre{border:1px solid var(--ligne);border-radius:16px;overflow:hidden;
  aspect-ratio:16/8;background:var(--papier-2)}
@media(max-width:760px){ .plan-cadre{aspect-ratio:4/5} }
.plan-cadre iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.88)}

/* Le bloc de fin, commun a toutes les pages interieures. */
.fin{text-align:center;background:var(--papier-2);border-top:1px solid var(--ligne)}
.fin h2{font-size:clamp(30px,4.4vw,50px);margin:0}
.fin-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
@media(max-width:560px){ .fin-btns .btn{width:min(320px,100%)} }

/* ═══════════════════════════════════════════════════════════════════
   LA PAGE D'ACCUEIL
   ═══════════════════════════════════════════════════════════════════ */

/* Les signatures : quatre plats, photo, description, prix. */
.signatures{background:var(--papier-2);border-block:1px solid var(--ligne)}
.sig-tete{text-align:center;margin-bottom:clamp(34px,4.6vw,58px)}
.sig-tete h2{font-size:clamp(32px,4.8vw,56px)}
.sig-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,28px)}
@media(max-width:980px){ .sig-grille{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .sig-grille{grid-template-columns:1fr} }
.sig{background:var(--papier);border:1px solid var(--ligne);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease}
.sig:hover{transform:translateY(-4px);border-color:var(--sable);
  box-shadow:0 18px 44px rgba(41,25,1,.09)}
.sig-img{aspect-ratio:1/1;overflow:hidden}
.sig-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);
  transition:transform 1s cubic-bezier(.22,1,.36,1)}
.sig:hover .sig-img img{transform:scale(1.05)}
.sig h3{font-size:20px;margin:20px 20px 8px;color:var(--encre);line-height:1.28}
.sig p{margin:0 20px 16px;font-size:14.5px;line-height:1.6;color:var(--encre-2);flex:1 1 auto}
.sig-prix{display:block;margin:0 20px 20px;font-family:var(--serif);font-size:24px;
  font-weight:600;color:var(--terre)}
.sig-prix i{font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:400;
  color:var(--sourdine);margin-left:4px}
.sig-pied{text-align:center;margin-top:clamp(34px,4.4vw,54px)}

/* L'avis. Un seul, reel et signe — dix avis anonymes valent moins qu'un nom. */
.avis{text-align:center;background:var(--papier)}
.avis > .etroit > i{font-size:34px;color:var(--sable);display:block;margin-bottom:18px}
.avis blockquote{margin:0;padding:0}
.avis blockquote p{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(20px,2.5vw,27px);line-height:1.62;color:var(--encre);margin:0 0 16px}
.avis-sig{margin-top:22px;font-size:11.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--terre)}
.avis-sig span{color:var(--sourdine);font-weight:400}

/* Le bloc pratique de l'accueil : meme grille que « Nous trouver ». */
.pratique{background:var(--papier-2);border-top:1px solid var(--ligne)}
.pratique .info{background:var(--papier)}

/* Une galerie de trois images, sans la grande vignette de tete. */
.galerie-3{grid-template-columns:repeat(3,1fr)}
.galerie-3 figure:nth-child(1){grid-column:auto;grid-row:auto;aspect-ratio:3/4}
@media(max-width:820px){
  .galerie-3{grid-template-columns:repeat(2,1fr)}
  .galerie-3 figure:nth-child(1){grid-column:span 2;aspect-ratio:4/3}
}

/* Le « h » de 1h, plus petit que le chiffre. */
.pilier b i{font-family:var(--serif);font-style:normal;font-size:.5em;
  font-weight:500;color:var(--sourdine)}
/* Un pilier peut porter des mots au lieu d'un nombre : ils prennent alors la
   taille d'une phrase, pas celle d'un chiffre. */
.pilier b.mot{font-size:clamp(25px,3.4vw,36px);line-height:1.14}