:root{
  --titre-police:'Cormorant Garamond',Georgia,serif;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --titre-poids:500;
  --marque-espace:.3em;
  --h1-espace:.12em;

  --sombre:#0b2038;
  --sur-sombre:#f3f1ea;
  --fond:#0e2947;
  --fond2:#123457;
  --encre:#f3f1ea;
  --texte:#c4cfdc;
  --texte2:#aebccd;
  --gris:#9fb0c4;
  --bord:rgba(217,178,91,.28);

  --clair:#ece4d0;
  --clair2:#a9b8ca;

  --accent:#d9b25b;
  --accent-clair:#e7c877;
  --sur-accent:#0b2038;
  --accent-25:rgba(217,178,91,.25);
  --accent-32:rgba(217,178,91,.32);
  --accent-45:rgba(217,178,91,.45);
  --chaud:#e7c877;

  --voile:8,22,40;
  --voile-force:.8;
  --etoile-off:#3a5473;
  --rayon:0;
  --titre-couleur:#f4ead2;

  --img-hero:url('img/hero.jpg');
  --img-appel:url('img/appel.jpg');
  --img-menu:url('img/menu-tete.jpg');
  --hero-pos:58%;
  --voile-menu:.16;
}
/* liquid glass, avec parcimonie : la barre du haut seulement */
.topbar.solid,.topbar.fixe{background:rgba(11,32,56,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 rgba(217,178,91,.28),inset 0 -1px 0 rgba(255,255,255,.06)}
.navcarte{background:rgba(14,41,71,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.navcarte a{color:#aebccd}
.navcarte a.on{color:var(--accent-clair)}
.vc{background:rgba(255,255,255,.03)}
.sous,.titre-sec,.hi-num,.info .gros{font-variant-numeric:lining-nums}

/* Moteur de menus digitaux — Talnys Studio.
   Toute la palette passe par des variables definies dans theme.css. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--fond);color:var(--encre);font-family:var(--sans);
  font-weight:var(--poids,300);line-height:1.6;overflow-x:clip}
.bloc,.histoires,.histoire,.presentation{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ================= apparitions au scroll ================= */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.22,.7,.25,1),transform .85s cubic-bezier(.22,.7,.25,1)}
.rv.vu{opacity:1;transform:none}
.rv-g{opacity:0;transform:translateX(-34px);
  transition:opacity .9s cubic-bezier(.22,.7,.25,1),transform .9s cubic-bezier(.22,.7,.25,1)}
.rv-d{opacity:0;transform:translateX(34px);
  transition:opacity .9s cubic-bezier(.22,.7,.25,1),transform .9s cubic-bezier(.22,.7,.25,1)}
.rv-g.vu,.rv-d.vu{opacity:1;transform:none}
.rv-z img{transform:scale(1.14);transition:transform 1.5s cubic-bezier(.22,.7,.25,1)}
.rv-z.vu img{transform:scale(1)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* ================= barre haute ================= */
.topbar{position:fixed;inset:0 0 auto;z-index:60;background:transparent;
  transition:background .35s,box-shadow .35s;padding:14px 0}
.topbar.solid,.topbar.fixe{background:var(--sombre);box-shadow:0 1px 0 var(--accent-25)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.marque{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  font-size:22px;letter-spacing:var(--marque-espace,.16em);color:var(--sur-sombre);
  text-transform:var(--marque-casse,uppercase);text-decoration:none;white-space:nowrap}
.marque em{color:var(--accent-clair);font-style:normal}
.topacts{display:flex;gap:9px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:11px 18px;text-decoration:none;border:1px solid var(--accent);
  color:var(--accent-clair);background:transparent;cursor:pointer;transition:.25s;line-height:1;
  border-radius:var(--rayon,0)}
.btn:hover{background:var(--accent);color:var(--sur-accent)}
.btn.plein{background:var(--accent);color:var(--sur-accent);border-color:var(--accent)}
.btn.plein:hover{background:var(--accent-clair);border-color:var(--accent-clair);color:var(--sur-accent)}
.btn.sombre{border-color:var(--titre-couleur,var(--sombre));color:var(--titre-couleur,var(--sombre))}
.btn.sombre:hover{background:var(--sombre);color:var(--sur-sombre)}
.btn.grand{padding:16px 34px;font-size:14px;letter-spacing:.14em}

/* ================= hero ================= */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;color:var(--sur-sombre);padding:120px 0 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;
  background:var(--img-hero) center var(--hero-pos,28%)/cover no-repeat;
  animation:respire 26s ease-in-out infinite alternate}
@keyframes respire{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--voile),.82) 0%,rgba(var(--voile),.6) 40%,
  rgba(var(--voile),.94) 100%)}
.hero .wrap{position:relative;z-index:2}
.filet{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px auto 0;max-width:220px}
.filet::before,.filet::after{content:'';flex:1;height:1px;background:var(--accent)}
.filet span{color:var(--accent-clair);font-size:15px}
.hero h1{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  text-transform:var(--h1-casse,uppercase);font-size:clamp(46px,15vw,104px);
  line-height:.94;letter-spacing:var(--h1-espace,.06em)}
.hero h1 .ap{color:var(--accent-clair)}
.sur{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent-clair);
  margin-bottom:20px;font-weight:400}
.sous-hero{font-family:var(--titre-police);font-size:clamp(19px,4.6vw,27px);
  font-style:var(--italique,italic);color:var(--clair);margin-top:16px}
.hero-tags{margin-top:26px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--clair2);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
.hero-tags span{white-space:nowrap}
.hero-tags span + span::before{content:"\2022";margin-right:18px;color:var(--accent)}
.note-g{display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  border:1px solid var(--accent-45);padding:10px 18px;font-size:13.5px;color:var(--clair);
  border-radius:var(--rayon,0)}
.note-g b{font-family:var(--titre-police);font-size:21px;color:var(--accent-clair);font-weight:600;
  font-variant-numeric:lining-nums}
.note-g .st{color:var(--accent-clair);letter-spacing:2px}
.hero-btns{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.fleche{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%);
  color:var(--accent-clair);font-size:22px;animation:saute 2.4s ease-in-out infinite;opacity:.85}
@keyframes saute{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* ================= bandeau ================= */
.bandeau{background:var(--sombre);color:var(--clair);padding:20px 0;
  border-top:1px solid var(--accent-25);border-bottom:1px solid var(--accent-25)}
.bandeau .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.bandeau a{color:var(--accent-clair);text-decoration:none}

/* ================= blocs ================= */
.bloc{padding:82px 0}
.bloc.fonce{background:var(--sombre);color:var(--clair)}
.titre{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  text-transform:var(--h2-casse,uppercase);font-size:clamp(28px,6.4vw,42px);
  letter-spacing:var(--h2-espace,.11em);text-align:center;line-height:1.15;
  color:var(--titre-couleur,var(--sombre))}
.fonce .titre{color:var(--sur-sombre)}
.kicker{text-align:center;color:var(--gris);margin-top:14px;font-size:15.5px;
  max-width:640px;margin-inline:auto}
.fonce .kicker{color:var(--clair2)}
.orn{display:block;width:56px;height:1px;background:var(--accent);margin:20px auto 0}

.presentation{display:grid;gap:44px;align-items:center;margin-top:48px}
@media(min-width:860px){.presentation{grid-template-columns:1.05fr .95fr;gap:60px}}
.presentation p{margin-bottom:16px;font-size:16.5px;color:var(--texte)}
.presentation .cadre{position:relative;padding:14px}
.presentation .cadre::before{content:"";position:absolute;inset:0;border:1px solid var(--accent);
  transform:translate(14px,14px)}
.presentation .cadre img{position:relative;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
/* videos verticales : affichees EN ENTIER (jamais recadrees), le cadre decoratif suit la video */
.presentation .cadre.video,.hi-img.video{width:fit-content;max-width:100%;margin-inline:auto}
.presentation .cadre video{position:relative;display:block;width:auto;height:auto;max-width:100%;
  max-height:78vh;cursor:pointer}

/* ================= specialites ================= */
.specs{display:grid;gap:24px;margin-top:52px}
@media(min-width:760px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{position:relative;overflow:hidden;min-height:340px;display:flex;
  align-items:flex-end;color:#fff;text-decoration:none;border-radius:var(--rayon,0)}
.spec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.spec:hover img{transform:scale(1.07)}
.spec::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--voile),.08),rgba(var(--voile),.92))}
.spec .txt{position:relative;z-index:2;padding:26px}
.spec h3{font-family:var(--titre-police);font-size:26px;font-weight:var(--titre-poids,600);
  text-transform:var(--h3-casse,uppercase);letter-spacing:.1em;margin-bottom:8px}
.spec p{font-size:14.5px;color:var(--clair2);font-weight:300}

/* ================= storytelling ================= */
.histoires{margin-top:20px}
.histoire{display:grid;gap:34px;align-items:center;padding:56px 0}
@media(min-width:880px){
  .histoire{grid-template-columns:1fr 1fr;gap:70px}
  .histoire.inverse .hi-img{order:2}
  .histoire.inverse .hi-txt{order:1}
}
.hi-img{position:relative;overflow:hidden}
.hi-img img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
/* une photo verticale ne rentre pas dans un 4/3 : elle se ferait couper
   en deux. Le cadre suit l'orientation de la source. */
.hi-img.portrait img{aspect-ratio:4/5}
.hi-img video{display:block;width:auto;height:auto;max-width:100%;max-height:78vh;cursor:pointer}
.hi-img.large img{aspect-ratio:3/2}
.hi-img::after{content:"";position:absolute;inset:0;border:1px solid var(--accent-45);
  transform:translate(15px,15px);pointer-events:none}
.histoire.inverse .hi-img::after{transform:translate(-15px,15px)}
.hi-num{font-family:var(--titre-police);font-size:15px;letter-spacing:.34em;color:var(--accent);
  font-weight:600;display:block;margin-bottom:14px;font-variant-numeric:lining-nums}
.hi-txt h3{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  font-size:clamp(26px,5.4vw,38px);line-height:1.16;letter-spacing:.02em;
  color:var(--titre-couleur,var(--sombre));margin-bottom:18px}
.hi-txt p{font-size:16.5px;color:var(--texte);line-height:1.78}
.hi-txt p + p{margin-top:17px}
.hi-txt .lien{display:inline-block;margin-top:22px;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chaud);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:4px;transition:.25s}
.hi-txt .lien:hover{color:var(--titre-couleur,var(--sombre));border-color:var(--accent)}

/* ================= appel carte ================= */
.appel{position:relative;overflow:hidden;text-align:center;color:var(--clair);padding:104px 0}
.appel-bg{position:absolute;inset:0;background:var(--img-appel) center 55%/cover no-repeat}
.appel-bg::after{content:"";position:absolute;inset:0;background:rgba(var(--voile),.88)}
.appel .wrap{position:relative;z-index:2}
.appel h2{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  text-transform:var(--h2-casse,uppercase);font-size:clamp(27px,6vw,40px);
  letter-spacing:var(--h2-espace,.11em);color:var(--sur-sombre)}
.appel p{margin:18px auto 30px;max-width:560px;color:var(--clair2);font-size:16px}

/* ================= galerie ================= */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:44px}
@media(min-width:760px){.galerie{grid-template-columns:repeat(4,1fr)}}
.galerie img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  filter:saturate(.94);transition:.6s;border-radius:var(--rayon,0)}
.galerie img:hover{filter:saturate(1.12);transform:scale(1.03)}

/* ================= videos courtes (facultatif) ================= */
.clips{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:44px auto 0;max-width:620px}
.clip{position:relative;margin:0}
.clip video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  background:var(--sombre);border-radius:var(--rayon,0);cursor:pointer}
.clip figcaption{margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);text-align:center}

/* ================= avis ================= */
.avis-grid{display:grid;gap:20px;margin-top:46px}
@media(min-width:760px){.avis-grid{grid-template-columns:repeat(3,1fr)}}
.avis{border:1px solid var(--accent-32);padding:26px 22px;background:rgba(255,255,255,.03);
  border-radius:var(--rayon,0)}
.avis .etoiles{color:var(--accent-clair);letter-spacing:3px;font-size:14px}
.avis blockquote{font-family:var(--titre-police);font-size:18px;font-style:var(--italique,italic);
  line-height:1.55;margin:14px 0 16px;color:var(--clair)}
.avis figcaption{font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-clair)}
.avis-cta{text-align:center;margin-top:38px}

/* ================= infos ================= */
.infos{display:grid;gap:34px;margin-top:48px}
@media(min-width:760px){.infos{grid-template-columns:repeat(3,1fr)}}
.info{text-align:center;padding:30px 20px;border:1px solid var(--bord);background:var(--fond2);
  border-radius:var(--rayon,0)}
.info h3{font-family:var(--titre-police);font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chaud);font-weight:600;margin-bottom:14px}
.info p{font-size:16.5px;line-height:1.65;color:var(--texte)}
.info a{color:var(--titre-couleur,var(--sombre));text-decoration:none;border-bottom:1px solid var(--accent)}
.info .gros{font-family:var(--titre-police);font-size:26px;font-weight:600;color:var(--titre-couleur,var(--sombre));
  font-variant-numeric:lining-nums}

/* ================= footer ================= */
footer{background:var(--sombre);color:var(--clair2);padding:52px 0 40px;text-align:center;
  border-top:1px solid var(--accent-25)}
footer .marque{font-size:26px;display:inline-block;margin-bottom:14px}
footer p{font-size:13.5px;line-height:1.9}
footer a{color:var(--accent-clair);text-decoration:none}
.credit{margin-top:26px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.62}

/* ================= bouton haut ================= */
.haut{position:fixed;right:18px;bottom:18px;z-index:45;width:46px;height:46px;
  display:grid;place-items:center;background:var(--sombre);color:var(--accent-clair);
  border:1px solid var(--accent);cursor:pointer;opacity:0;pointer-events:none;transition:.3s;
  font-size:17px;border-radius:var(--rayon,0)}
.haut.vu{opacity:1;pointer-events:auto}

/* ================= barre mobile ================= */
.barre-mob{position:fixed;inset:auto 0 0;z-index:50;display:none;
  background:var(--sombre);border-top:1px solid var(--accent-45)}
.barre-mob a{flex:1;text-align:center;padding:14px 6px;color:var(--accent-clair);
  text-decoration:none;font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.barre-mob a.fort{background:var(--accent);color:var(--sur-accent);font-weight:500}
.barre-mob a + a{border-left:1px solid var(--accent-32)}
@media(max-width:700px){
  .barre-mob{display:flex}
  body{padding-bottom:50px}
  .haut{bottom:64px}
  .topacts .btn.masq{display:none}
  .topbar{padding:11px 0}
  .topbar .wrap{padding:0 16px}
  .marque{font-size:18px;letter-spacing:.11em}
  .topacts .btn{padding:9px 13px;font-size:11.5px;letter-spacing:.07em}
  .navcarte{top:52px}
  html{scroll-padding-top:100px}
}

/* ============================================================
   PAGE MENU
   ============================================================ */
.menu-tete{background:var(--sombre);color:var(--sur-sombre);text-align:center;
  padding:104px 0 44px;position:relative;overflow:hidden}
.menu-tete::before{content:"";position:absolute;inset:0;
  background:var(--img-menu) center/cover no-repeat;opacity:var(--voile-menu,.13)}
.menu-tete .wrap{position:relative;z-index:2}
.menu-tete h1{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  text-transform:var(--h1-casse,uppercase);font-size:clamp(38px,10vw,64px);
  letter-spacing:var(--h2-espace,.09em);line-height:1}
.menu-tete .st2{font-family:var(--titre-police);font-style:var(--italique,italic);
  font-size:21px;color:var(--accent-clair);margin-top:10px}
.menu-tete .meta{margin-top:18px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--clair2);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;
  padding:0 20px;text-align:center}
.menu-tete .meta span{white-space:nowrap}
.menu-tete .meta span + span::before{content:"\2022";margin-right:16px;color:var(--accent)}
@media(max-width:520px){
  .menu-tete .meta{font-size:11px;letter-spacing:.14em;gap:4px 10px}
  .menu-tete .meta span{white-space:normal}
  .menu-tete .meta span + span::before{margin-right:10px}
}
.retour{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-clair);text-decoration:none;
  border:1px solid var(--accent-45);padding:9px 15px;transition:.25s;border-radius:var(--rayon,0)}
.retour:hover{background:var(--accent);color:var(--sur-accent);border-color:var(--accent)}

/* navigation carte — titres textes, pas de boutons */
.navcarte{position:sticky;top:61px;z-index:40;background:var(--fond);
  border-bottom:1px solid var(--bord);padding:15px 0;
  box-shadow:0 6px 18px -14px rgba(var(--voile),.6)}
.navcarte .piste{display:flex;justify-content:center;gap:0;overflow-x:auto;scrollbar-width:none;
  padding:0 22px;max-width:1080px;margin:0 auto;scroll-behavior:smooth}
.navcarte .piste::-webkit-scrollbar{display:none}
.navcarte a{flex:0 0 auto;font-family:var(--titre-police);font-size:15px;
  letter-spacing:.03em;padding:4px 20px;color:var(--texte2);text-decoration:none;
  white-space:nowrap;transition:color .2s;position:relative}
.navcarte a:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--gris);opacity:.6}
.navcarte a.on{color:var(--accent);font-style:var(--italique,italic)}

/* carte */
.carte{padding:46px 0 70px}
.sec{margin-top:62px}
.sec:first-of-type{margin-top:8px}
.titre-sec{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  text-transform:var(--h2-casse,uppercase);font-size:clamp(25px,5.6vw,34px);
  letter-spacing:var(--h2-espace,.13em);text-align:center;
  display:flex;align-items:center;gap:18px;color:var(--titre-couleur,var(--sombre))}
.titre-sec::before,.titre-sec::after{content:"";flex:1;height:1px;background:var(--bord)}
.chapeau{text-align:center;color:var(--gris);margin:16px auto 0;max-width:680px;
  font-style:var(--italique,italic);font-family:var(--titre-police);font-size:18px}
.sous{font-family:var(--titre-police);font-size:21px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chaud);margin:34px 0 4px;text-align:center;column-span:all}
.note{text-align:center;font-size:13px;color:var(--gris);letter-spacing:.07em;
  margin-bottom:8px;column-span:all}

.liste{list-style:none;margin-top:22px}
@media(min-width:620px){.liste{column-count:2;column-gap:52px}}
.liste.dense{column-count:2;column-gap:26px}
@media(min-width:620px){.liste.dense{column-gap:52px}}
.item{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  padding:9px 0;border-bottom:1px dotted var(--bord)}
.ligne{display:flex;align-items:baseline;gap:8px;min-width:0}
.nom{font-size:16px;font-weight:400;color:var(--encre);flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.dense .nom{font-size:15px}
.pointille{flex:1 1 auto;min-width:12px;border-bottom:1px dotted var(--bord);transform:translateY(-4px)}
.prix{font-family:var(--titre-police);font-weight:600;font-size:17.5px;color:var(--titre-couleur,var(--sombre));
  font-variant-numeric:lining-nums;white-space:nowrap}
.desc{font-size:13.5px;color:var(--gris);margin-top:2px;padding-right:52px;line-height:1.45}
.voir{margin-top:8px;font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--chaud);background:none;border:1px solid var(--bord);
  padding:6px 12px;cursor:pointer;transition:.2s;border-radius:var(--rayon,0)}
.voir:hover{background:var(--chaud);border-color:var(--chaud);color:#fff}
.photo{margin-top:12px}
.photo img{width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:var(--rayon,0)}   /* photo entiere, jamais coupee : on garde son format (carre, vertical ou horizontal) */
/* plat a plusieurs photos : bande qui defile au doigt, une photo par ecran */
.photo.multi{position:relative}
.photo.multi .bande{display:flex;align-items:center;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.photo.multi .bande::-webkit-scrollbar{display:none}
.photo.multi .bande img{flex:0 0 100%;scroll-snap-align:center}
.photo.multi .compteur{position:absolute;right:10px;bottom:10px;font-size:11px;letter-spacing:.14em;
  color:#fff;background:rgba(var(--voile),.62);padding:4px 9px;pointer-events:none;
  font-variant-numeric:lining-nums}

/* formules / vins : grille de prix */
.vin .nom{font-size:15.5px}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}
.vc{display:flex;flex-direction:column;gap:3px;text-align:center;background:var(--fond2);
  border:1px solid var(--bord);padding:6px 3px;justify-content:flex-end}
.vc em{font-style:normal;font-size:9.5px;letter-spacing:.05em;color:var(--gris);
  text-transform:uppercase;line-height:1.2;display:flex;align-items:center;
  justify-content:center;min-height:2.4em}
.vc b{font-family:var(--titre-police);font-size:15.5px;font-weight:600;color:var(--titre-couleur,var(--sombre));
  font-variant-numeric:lining-nums}

.mentions{list-style:none;text-align:center;margin-top:46px;font-size:12.5px;
  color:var(--gris);line-height:1.9}

/* pied du menu */
.menu-pied{background:var(--sombre);color:var(--clair2);text-align:center;padding:54px 0}
.menu-pied h3{font-family:var(--titre-police);font-size:26px;font-weight:600;
  color:var(--sur-sombre);letter-spacing:.05em;margin-bottom:10px}
.menu-pied p{font-size:14.5px;margin-bottom:24px}
.menu-pied .hero-btns{margin-top:0}

/* ================= panneau avis ================= */
.pan{position:fixed;inset:auto 0 0;z-index:70;background:var(--sombre);color:var(--clair);
  border-top:2px solid var(--accent);padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.8,.2,1);
  text-align:center;box-shadow:0 -14px 40px rgba(0,0,0,.35)}
.pan.vu{transform:translateY(0)}
.pan h4{font-family:var(--titre-police);font-size:24px;font-weight:600;letter-spacing:.06em;
  margin-bottom:8px;color:var(--sur-sombre)}
.pan p{font-size:14.5px;color:var(--clair2);margin-bottom:18px}
.pan .etoiles-b{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
.pan .etoiles-b span{font-size:34px;color:var(--etoile-off,#4a5a62);cursor:pointer;
  transition:.16s;line-height:1}
.pan .etoiles-b span:hover,.pan .etoiles-b span.on{color:var(--accent-clair);transform:scale(1.14)}
.pan .fermer{position:absolute;top:10px;right:14px;background:none;border:none;
  color:var(--clair2);font-size:26px;cursor:pointer;line-height:1;opacity:.7}
@media(max-width:700px){.pan{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.rv-g,.rv-d{opacity:1!important;transform:none!important}
  .rv-z img{transform:none!important}
}

/* carte sur telephone : ecritures plus petites et plus d'air */
@media(max-width:520px){
  .carte{padding:34px 0 60px}
  .sec{margin-top:52px}
  .titre-sec{font-size:21px;letter-spacing:.1em;gap:14px}
  .chapeau{font-size:15.5px;margin-top:12px;line-height:1.45}
  .sous{font-size:17px;margin:30px 0 4px}
  .note{font-size:12px}
  .liste{margin-top:16px}
  .item{padding:15px 0}
  .nom{font-size:14px;line-height:1.4}
  .dense .nom{font-size:13.5px}
  .prix{font-size:15px}
  .desc{font-size:12.2px;line-height:1.6;margin-top:5px;padding-right:48px}
  .voir{margin-top:10px;font-size:10.5px;padding:6px 11px}
  .navcarte a{font-size:14px;padding:4px 14px}
  /* formules : une seule colonne, sinon « Entree + Plat + Dessert » se casse sur 4 lignes */
  #formules .liste,#formules .liste.dense{column-count:1}
  #formules .nom{white-space:normal}
}

/* ================= mentions legales / confidentialite ================= */
.legal{padding:120px 0 80px}
.legal .wrap{max-width:780px}
.legal .titre{margin:10px 0 18px}
.legal #donnees{margin-top:64px;padding-top:10px}
.legal-som{text-align:center;font-size:13px;letter-spacing:.06em;color:var(--gris);margin-bottom:40px}
.legal section{margin-top:34px}
.legal h2{font-family:var(--titre-police);font-weight:var(--titre-poids,600);font-size:22px;
  color:var(--titre-couleur,var(--sombre));margin-bottom:10px;line-height:1.3}
.legal h3{font-size:15px;font-weight:500;margin:20px 0 6px;color:var(--titre-couleur,var(--sombre))}
.legal p,.legal li{font-size:15px;line-height:1.75;color:var(--texte,var(--encre))}
.legal p + p{margin-top:10px}
.legal ul{margin:8px 0 10px 20px}
.legal li{margin-top:6px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal-maj{margin-top:48px;font-size:12.5px !important;opacity:.7}
.a-completer{background:#ffd84d;color:#3b2a00;padding:1px 6px;font-weight:600;border-radius:3px}
.legal-liens{margin-top:10px;font-size:12.5px}
.cmd-rgpd{font-size:11.5px;opacity:.85}
.cmd-rgpd a{color:inherit;text-decoration:underline}

/* ============================================================
   VARIANTES DE HERO ET D'EN-TETE DE CARTE
   Chaque resto choisit la sienne dans resto.py (HERO / MENUTETE).
   Objectif : deux sites du meme lot ne doivent jamais s'ouvrir pareil.
   ============================================================ */

/* ---------- commun ---------- */
.embleme{display:block;margin:0 auto;width:var(--embleme-taille,104px);height:auto}
.hero .embleme{margin-bottom:22px}

/* ============================================================
   LES HEROS — famille commune
   Regle : la photo reste une photo. Pas de lavis de couleur par-dessus,
   pas d'encadre, pas de bouton. Un voile photographique monte du bas,
   la ou le texte se pose ; le milieu de l'image reste clair.
   ============================================================ */
.hero-lit{position:relative;min-height:100svh;overflow:hidden;
  display:grid;color:var(--sur-sombre);padding:0}
.hero-lit .fond{position:absolute;inset:0;z-index:0;
  background:var(--img-hero) center var(--hero-pos,50%)/cover no-repeat;
  animation:respire 38s ease-in-out infinite alternate}
.hero-lit .fond::after{content:"";position:absolute;inset:0;
  opacity:var(--voile-force,1);
  background:linear-gradient(180deg,
    rgba(var(--voile),.52) 0%,
    rgba(var(--voile),.16) 24%,
    rgba(var(--voile),.34) 58%,
    rgba(var(--voile),.86) 100%)}
.hero-lit .dedans{position:relative;z-index:2;width:100%;
  max-width:1080px;margin:0 auto;padding:0 26px 72px;
  display:flex;flex-direction:column;gap:0}

/* l'embleme, discret */
/* le sceau : un liseré fin le détache de n'importe quelle photo,
   y compris quand l'embleme est sombre sur fond sombre */
.hero-lit .sceau{width:var(--sceau,74px);height:auto;margin-bottom:26px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 8px 34px rgba(0,0,0,.42)}

/* le lieu, en tout petit */
.hero-lit .lieu{font-family:var(--sans);font-size:10.5px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--clair2);margin-bottom:20px}

/* le nom */
.hero-lit h1{font-family:var(--titre-police);font-weight:var(--titre-poids,600);
  text-transform:var(--h1-casse,uppercase);letter-spacing:var(--h1-espace,.06em);
  font-size:clamp(44px,9.6vw,96px);line-height:.96;margin:0;
  text-shadow:0 2px 28px rgba(var(--voile),.5)}
.hero-lit h1 .ap{color:var(--accent-clair)}

/* une seule ligne, courte */
.hero-lit .mot{font-family:var(--titre-police);font-style:var(--italique,italic);
  font-size:clamp(17px,2.6vw,23px);color:var(--clair);margin:22px 0 0;
  max-width:34ch;line-height:1.4}

/* la note, sans cadre */
.hero-lit .note-ligne{font-family:var(--sans);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clair2);margin-top:26px}
.hero-lit .note-ligne b{color:var(--accent-clair);font-weight:500;letter-spacing:.1em}

/* le lien : du texte souligne, jamais un bouton */
.hero-lit .liens{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline;margin-top:34px}
.lien-fin{font-family:var(--titre-police);font-size:clamp(17px,2.3vw,21px);
  color:var(--sur-sombre);text-decoration:none;letter-spacing:.03em;
  padding-bottom:7px;border-bottom:1px solid var(--accent-45);transition:border-color .35s,color .35s}
.lien-fin:hover,.lien-fin:focus-visible{border-bottom-color:var(--sur-sombre)}
.lien-tenu{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clair2);text-decoration:none;
  padding-bottom:7px;border-bottom:1px solid transparent;transition:.3s}
.lien-tenu:hover,.lien-tenu:focus-visible{color:var(--sur-sombre);border-bottom-color:var(--accent-45)}

/* ---- 1. BAS : tout se pose en bas a gauche, la photo respire ---- */
.hero-bas{align-items:end}
.hero-bas .dedans{text-align:left;align-items:flex-start}

/* ---- 2. CENTRE : centre, ancre bas ---- */
.hero-centre{align-items:end}
.hero-centre .dedans{text-align:center;align-items:center}
.hero-centre .mot{max-width:40ch}
.hero-centre .liens{justify-content:center}

/* ---- 3. COLONNE : colonne etroite a gauche, milieu de hauteur ----
   le texte est a mi-hauteur : le voile se decale a gauche, l'image
   reste nette a droite. */
.hero-colonne{align-items:center}
.hero-colonne .fond::after{background:
  linear-gradient(90deg,rgba(var(--voile),.92) 0%,rgba(var(--voile),.74) 32%,
    rgba(var(--voile),.22) 64%,rgba(var(--voile),.34) 100%),
  linear-gradient(180deg,rgba(var(--voile),.42) 0%,rgba(var(--voile),0) 28%,
    rgba(var(--voile),0) 72%,rgba(var(--voile),.5) 100%)}
.hero-colonne .dedans{text-align:left;align-items:flex-start;padding-bottom:0;
  max-width:1080px}
.hero-colonne .mot{max-width:24ch}
.hero-colonne .note-ligne,.hero-colonne .liens{max-width:30ch}
.hero-colonne h1{font-size:clamp(40px,7.4vw,76px);max-width:11ch}

/* ---- 4. HAUTE : le nom haut, le lien tout en bas ----
   du texte aux deux extremites : le voile est fort en haut ET en bas,
   l'image respire dans la bande du milieu. */
.hero-haute{align-items:stretch}
.hero-haute .fond::after{background:linear-gradient(180deg,
  rgba(var(--voile),.88) 0%,
  rgba(var(--voile),.66) 24%,
  rgba(var(--voile),.24) 48%,
  rgba(var(--voile),.58) 76%,
  rgba(var(--voile),.92) 100%)}
.hero-haute .dedans{text-align:center;align-items:center;justify-content:space-between;
  padding-top:120px;padding-bottom:56px;min-height:100svh}
.hero-haute .bloc-haut{display:flex;flex-direction:column;align-items:center}
.hero-haute .bloc-bas{display:flex;flex-direction:column;align-items:center;gap:18px}
.hero-haute .mot{max-width:38ch}

@media(max-width:700px){
  .hero-lit .dedans{padding-bottom:56px}
  .hero-lit .sceau{width:calc(var(--sceau,74px) * .82);margin-bottom:20px}
  .hero-colonne .dedans > *{max-width:none}
  .hero-haute .dedans{padding-top:104px}
}

/* ============================================================
   EN-TETES DE CARTE
   ============================================================ */
/* a. motif plein — le motif de la marque en fond, titre pose dessus */
.mt-motif::before{background:var(--img-motif) 0 0/188px repeat!important;
  opacity:var(--voile-motif,.5)!important}
.mt-motif .wrap{position:relative;z-index:3}
.mt-motif h1{display:inline-block;padding:16px 34px;border-top:1px solid var(--accent-45);
  border-bottom:1px solid var(--accent-45)}

/* b. bandeau de faience en haut, titre sur aplat sombre */
.mt-bandeau{padding-top:158px}
.mt-bandeau::before{background:none!important}
.mt-bandeau .liseré{position:absolute;left:0;right:0;top:62px;height:52px;z-index:2;
  background:var(--img-motif) center/104px repeat-x;
  box-shadow:0 2px 0 var(--accent),0 -2px 0 var(--accent)}
.mt-bandeau .wrap{position:relative;z-index:3}
.mt-bandeau h1{font-size:clamp(34px,9vw,58px)}

/* c. cadre — titre dans un cadre fin, motif discret derriere */
.mt-cadre::before{background:var(--img-motif) 0 0/150px repeat!important;
  opacity:var(--voile-motif,.22)!important}
.mt-cadre .wrap{position:relative;z-index:3}
.mt-cadre .boite{display:inline-block;border:1px solid var(--accent-45);
  padding:26px 40px 22px}
.mt-cadre h1{letter-spacing:var(--h1-espace,.16em)}

/* d. neon — grille en fond, titre qui rayonne */
.mt-neon::before{background:var(--img-motif) 0 0/210px repeat!important;
  opacity:var(--voile-motif,.55)!important}
.mt-neon .wrap{position:relative;z-index:3}
.mt-neon h1{text-shadow:0 0 26px var(--accent-25)}
.mt-neon .st2{}

/* embleme dans l'en-tete de carte */
.menu-tete .embleme{width:var(--embleme-menu,78px);margin-bottom:16px}

/* ============================================================
   LA BARRE DU HAUT — du texte, pas des pastilles.
   Elle fait partie du premier ecran : elle doit se tenir comme le hero.
   ============================================================ */
.topbar .btn{
  background:none;border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:5px 0;font-family:var(--sans);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clair2);transition:color .3s,border-color .3s}
.topbar .topacts{gap:0}
.topbar .topacts .btn + .btn{margin-left:28px}
.topbar .btn:hover,.topbar .btn:focus-visible{
  background:none;color:var(--sur-sombre);border-bottom-color:var(--accent-45)}
.topbar .btn.plein{background:none;color:var(--sur-sombre);
  border-bottom-color:var(--accent-45)}
.topbar .btn.plein:hover,.topbar .btn.plein:focus-visible{
  background:none;color:var(--sur-sombre);border-bottom-color:var(--sur-sombre)}
@media(max-width:700px){.topbar .topacts .btn + .btn{margin-left:18px}}

/* ============================================================
   DEUX FAMILLES PORTEES PAR LA TYPO
   Toutes les maisons ne meritent pas la meme entree : certaines ont
   une belle facade (photo plein cadre), d'autres valent mieux par
   leur nom. Ici la page se tient seule, l'image ne fait que signer.
   ============================================================ */

/* ---- 5. TYPO : aucune photo en grand. Le motif de la marque en fond
        tres discret, le nom en grand, et une bande d'image tout en bas
        qui ancre la page dans le reel. ---- */
.hero-typo{align-items:stretch;background:var(--sombre)}
.hero-typo .fond{background:var(--img-motif,none) 0 0/300px repeat;
  opacity:.17;animation:none}
.hero-typo .fond::after{background:radial-gradient(ellipse at 50% 34%,
  rgba(var(--voile),0) 0%,rgba(var(--voile),.55) 100%)}
.hero-typo .bande{position:absolute;left:0;right:0;bottom:0;height:26svh;z-index:1;
  background:var(--img-hero) center 55%/cover no-repeat;
  border-top:1px solid var(--accent-32)}
.hero-typo .bande::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--voile),.80) 0%,
    rgba(var(--voile),.26) 11%,rgba(var(--voile),0) 30%)}
.hero-typo .dedans{justify-content:center;align-items:center;text-align:center;
  padding-top:130px;padding-bottom:26svh}
.hero-typo h1{font-size:clamp(48px,10.5vw,116px)}
.hero-typo .mot{max-width:36ch}

/* ---- 6. BANDEAU : le haut appartient au texte, sur l'aplat de la
        marque ; le bas est une bande de photo pleine largeur. ---- */
.hero-bandeau{display:grid;grid-template-rows:1fr 44svh;background:var(--sombre)}
.hero-bandeau::before{content:"";position:absolute;inset:0 0 44svh 0;z-index:0;
  background:var(--img-motif,none) 0 0/280px repeat;opacity:.16;pointer-events:none}
.hero-bandeau::after{content:"";position:absolute;inset:0 0 44svh 0;z-index:0;
  pointer-events:none;background:radial-gradient(ellipse at 18% 22%,
    rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 62%)}
.hero-bandeau .fond{position:relative;inset:auto;grid-row:2;animation:none;
  background:var(--img-hero) center 50%/cover no-repeat;
  border-top:1px solid var(--accent-32)}
.hero-bandeau .fond::after{background:linear-gradient(180deg,
  rgba(var(--voile),.82) 0%,rgba(var(--voile),.24) 10%,rgba(var(--voile),0) 28%)}
.hero-bandeau .dedans{grid-row:1;justify-content:flex-end;align-items:flex-start;
  text-align:left;padding-top:130px;padding-bottom:36px}
.hero-bandeau h1{font-size:clamp(44px,9vw,92px)}
.hero-bandeau .mot{max-width:30ch}

/* ---- halo de lisibilite : un voile doux pose SOUS le bloc de texte,
        pour que le titre tienne quelle que soit la photo derriere
        (enseignes, ciels clairs, facades chargees). ---- */
.hero-bas .fond::before,.hero-centre .fond::before,
.hero-colonne .fond::before,.hero-haute .fond::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--voile-force,1)}
.hero-bas .fond::before{background:radial-gradient(ellipse 62% 46% at 26% 82%,
  rgba(var(--voile),.52) 0%,rgba(var(--voile),0) 100%)}
.hero-centre .fond::before{background:radial-gradient(ellipse 62% 44% at 50% 80%,
  rgba(var(--voile),.52) 0%,rgba(var(--voile),0) 100%)}
.hero-colonne .fond::before{background:radial-gradient(ellipse 54% 58% at 24% 52%,
  rgba(var(--voile),.58) 0%,rgba(var(--voile),0) 100%)}
.hero-haute .fond::before{background:radial-gradient(ellipse 66% 40% at 50% 27%,
  rgba(var(--voile),.50) 0%,rgba(var(--voile),0) 100%)}

/* le filet fin, uniquement sur les entrees portees par la typo */
.regle{width:84px;height:1px;background:var(--accent-45);margin:28px 0 0}
.hero-typo .regle{margin-left:auto;margin-right:auto}

@media(max-width:700px){
  .hero-typo .dedans{padding-bottom:22svh}
  .hero-typo .bande{height:22svh}
  .hero-bandeau{grid-template-rows:1fr 38svh}
  .hero-bandeau::before{inset:0 0 38svh 0}
}