/* Ô Plan Restô Bistrô (Le Plan-de-la-Tour).
   Couleurs relevées sur le logo (disque rose, anneau caramel), la salle (mur de pierre, plafond de pin)
   et la façade (volets céladon). Typographie : Marcellus (proche du lettrage RESTÔ BISTRÔ du logo),
   Hanken Grotesk (texte), Pinyon Script (calligraphie, la plus proche du « Plan » du logo).
   Mouvement : transform et opacity uniquement, une seule courbe (--out). */

@font-face{font-family:"Marcellus";src:url(../fonts/marcellus-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(../fonts/pinyon-script-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --blanc:#fcf7f5;     /* fond : blanc du logo, à peine rosé */
  --rose:#f6d3cd;      /* disque du logo, serviettes des tables */
  --rose-pale:#fae6e2;
  --toit:#f2c9c3;      /* trait du toit du logo */
  --caramel:#c3996c;   /* anneau du logo, suspensions en raphia */
  --plan:#9b7d52;      /* brun de l'écriture « Plan » (plus foncé que l'anneau) */
  --caramel-f:#7a5830; /* caramel assombri pour le texte (AA sur blanc et sur rose) */
  --pierre:#2b2117;    /* ombre du mur de pierre : texte et fonds sombres */
  --celadon:#91aeb2;   /* volets de la façade */
  --logo-trait:#4a3b3a; /* enseigne : contour brun foncé (anneau, écriture) */
  --logo-face:#a8979d;  /* enseigne : remplissage gris-mauve (disque, bande du toit) */
  --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.25rem,5vw,4.5rem);
  --gut:max(var(--pad),calc((100vw - 96rem)/2 + var(--pad)));  /* marge réelle commune à tout le site */
  --serif:"Marcellus","Optima","Candara",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --hh:4.6rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 1rem)}
body{margin:0;background:var(--blanc);color:var(--pierre);font:400 1.0625rem/1.65 var(--sans);padding-bottom:4.2rem;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
:focus-visible{outline:3px solid var(--caramel-f);outline-offset:3px}
.resa :focus-visible,.pied :focus-visible,.nav :focus-visible{outline-color:var(--caramel)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evite{position:absolute;left:1rem;top:-4rem;background:var(--pierre);color:var(--blanc);padding:.6rem 1rem;z-index:300;font-weight:600}
.evite:focus{top:1rem}
a[href^="tel:"],.nobr{white-space:nowrap}

@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s var(--out) both}
::view-transition-new(root){animation:vt-in .45s var(--out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---------- Typographie ---------- */
.titre{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.005em}
.t1{font-size:clamp(2.7rem,8vw,6rem)}
.t2{font-size:clamp(2.05rem,4.6vw,3.9rem)}
.t3{font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.15}
.lead{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.5;max-width:40ch;margin-top:1.3rem}
.script{font-family:var(--script);font-weight:400;line-height:1.25}

/* Logo : calques du logo réel (assets/images/logo-calques.svg) */
.logo-svg{width:100%;height:auto;overflow:visible}
.l-disque{fill:var(--logo-face)}
.l-car,.l-plan{fill:var(--logo-trait)}

/* ---------- Boutons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.6rem;background:var(--pierre);color:var(--blanc);font:600 1.02rem/1 var(--sans);padding:1.05rem 1.45rem;border:2px solid var(--pierre);border-radius:3px;text-decoration:none;cursor:pointer;transition:color .45s var(--out),border-color .45s var(--out)}
.btn::before{content:"";position:absolute;inset:0;background:var(--caramel-f);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--out);z-index:-1}
.btn:hover::before{transform:none;transform-origin:left}
.btn:hover{border-color:var(--caramel-f)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--petit{padding:.72rem 1.05rem;font-size:.96rem}
.btn--ligne{background:transparent;color:var(--pierre);border-color:currentColor}
.btn--ligne::before{background:var(--pierre)}
.btn--ligne:hover{color:var(--blanc);border-color:var(--pierre)}
.actions{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;margin-top:2rem}
.lien{text-decoration:none;font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;transition:background-size .5s var(--out)}
.lien:hover{background-size:0 1.5px;background-position:100% 100%}

/* ---------- En-tête fixe : logo, navigation visible, Appeler (menu plein écran sur mobile) ---------- */
.top{position:sticky;top:0;z-index:100;height:var(--hh);display:flex;align-items:center;gap:1.5rem;padding:0 var(--gut);background:var(--blanc);transition:box-shadow .4s}
.top.ombre{box-shadow:0 1px 0 rgba(43,33,23,.14)}
.marque{display:block;width:clamp(7.6rem,10vw,9.6rem);flex:none}
.top-actions{display:flex;gap:.6rem;align-items:center;margin-left:auto}
.menu-btn{background:var(--blanc);color:var(--pierre);border:2px solid var(--pierre);border-radius:3px;font:600 .96rem/1 var(--sans);padding:.7rem 1.05rem;cursor:pointer}
.nav{position:fixed;inset:0;z-index:150;background:var(--pierre);color:var(--blanc);display:flex;flex-direction:column;justify-content:center;padding:var(--pad) var(--gut);transform:translateY(-100%);visibility:hidden;transition:transform .7s var(--out),visibility 0s .7s}
.nav.ouvert{transform:none;visibility:visible;transition:transform .7s var(--out)}
.nav ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.2rem}
.nav a{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,11vw,5rem);line-height:1.12;text-decoration:none;color:var(--blanc);transition:color .4s var(--out)}
.nav a:hover,.nav a[aria-current]{color:var(--caramel)}
.nav .menu-fermer{position:absolute;top:1rem;right:var(--gut);background:transparent;color:var(--blanc);border-color:var(--blanc)}
.nav .coord{margin-top:2.4rem;color:var(--rose)}
@media(max-width:599px){.top-actions .btn{display:none}}
@media(min-width:900px){
  .nav{position:static;inset:auto;z-index:auto;background:none;color:inherit;flex-direction:row;justify-content:flex-start;padding:0;transform:none;visibility:visible;transition:none;margin-left:clamp(1.5rem,4vw,4rem)}
  .nav ul{flex-direction:row;gap:clamp(1.4rem,2.6vw,2.6rem)}
  .nav a{font:500 .98rem/1 var(--sans);color:inherit;padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--out)}
  .nav a:hover,.nav a[aria-current]{color:inherit;background-size:100% 1.5px}
  .nav .coord,.nav .menu-fermer,.menu-btn{display:none}
}

/* Barre d'appel collante (mobile) */
.barre-appel{position:fixed;inset:auto 0 0 0;z-index:90;background:var(--pierre);color:var(--blanc);display:flex;justify-content:center;align-items:center;gap:.7rem;padding:1rem;font:600 1.05rem/1 var(--sans);text-decoration:none}
.barre-appel svg{width:1.2em;height:1.2em}
@media(min-width:900px){body{padding-bottom:0}.barre-appel{display:none}}

/* ---------- Photos : toujours entières, dans un cadre (passe-partout blanc, filet caramel, ombre douce) ---------- */
.photo{margin:0;rotate:var(--r,0deg);border-radius:2px;background:var(--rose-pale);
  box-shadow:0 0 0 .5rem #fffdfb,0 0 0 calc(.5rem + 1.5px) rgba(155,125,82,.5),0 1rem 2.2rem rgba(43,33,23,.17);
  transition:rotate .9s var(--out),box-shadow .9s var(--out)}
.photo img{width:100%;height:auto;border-radius:1px}
.photo img[data-src]{visibility:hidden}
@media(hover:hover){.photo:hover{rotate:0deg;box-shadow:0 0 0 .5rem #fffdfb,0 0 0 calc(.5rem + 1.5px) rgba(155,125,82,.8),0 1.4rem 2.8rem rgba(43,33,23,.24)}}
.st{position:absolute;left:calc(var(--x)*1cqw);top:calc(var(--y)*1cqw);width:calc(var(--w)*1cqw)}
.disc{aspect-ratio:1;border-radius:50%}
.disc.rose{background:var(--rose)}
.wrap{width:min(100% - 2*var(--gut),96rem);margin-inline:auto}

/* ==========================================================
   ACCUEIL : des blocs empilés. Hero, bandeau d'infos surélevé, puis des blocs pleine largeur
   dont les coins arrondis se recouvrent.
   ========================================================== */
.mot-m{font-family:var(--script);font-weight:400;font-size:clamp(3.4rem,7vw,6rem);line-height:1;color:var(--caramel-f);margin:0}
.intro{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.65;max-width:42ch;margin-top:1.2rem}

/* hero */
.hero{position:relative;overflow:clip;isolation:isolate;padding:clamp(1.5rem,4vw,3.5rem) 0 clamp(3.5rem,6vw,5.5rem)}
.rideau{position:absolute;inset:0;z-index:50;background:var(--caramel);pointer-events:none;animation:rideau 1s cubic-bezier(.76,0,.24,1) .1s forwards}
@keyframes rideau{to{transform:translateY(-101%)}}
.hero-grille{display:grid;gap:2.5rem;align-items:center}
.hero-logo{position:relative;width:min(100%,44rem);container-type:inline-size}
.hero-phrase{font-family:var(--script);color:var(--caramel-f);font-size:clamp(2.1rem,3.4vw,3rem);line-height:1.1;margin-top:2.2rem;animation:leve .9s var(--out) 2.3s both}
.hero-col .actions{margin-top:1.6rem;animation:leve .9s var(--out) 2.45s both}
.hero-col .statut{margin-top:1.3rem;animation:leve .9s var(--out) 2.6s both}
.collage-w{container-type:inline-size;width:100%;max-width:44rem;justify-self:end}
.coll{position:relative;height:calc(var(--H)*1cqw)}
.coll .disc{opacity:0;animation:arrive 1.6s var(--out) .9s forwards}
.coll .photo{animation:monte-photo 1.5s var(--out) .7s both}
@keyframes arrive{from{opacity:0;transform:scale(.7)}to{opacity:1}}
@keyframes monte-photo{from{transform:translateY(50px)}}
.logo-hero .ouvre{transform:scale(0);animation:ouvre 1.15s var(--out) .75s forwards}
@keyframes ouvre{to{transform:none}}
.tour{transform:rotate(0)}
.tour-1{animation:tour .55s cubic-bezier(.5,0,.9,.6) 1s forwards}
.tour-2{animation:tour .6s cubic-bezier(.1,.4,.4,1) 1.45s forwards}
@keyframes tour{to{transform:rotate(180deg)}}
.anneau-plein{opacity:0;animation:plein .3s linear 2s forwards}  /* recouvre la jointure des deux demi-masques */
@keyframes plein{to{opacity:1}}
.plume-ecr{animation:plume-ecr 2.1s cubic-bezier(.55,0,.25,1) 1.4s forwards}
@keyframes plume-ecr{to{transform:translateX(840px)}}
.hero-sous{display:flex;justify-content:space-between;margin:1.2cqi 11.4cqi 0 47.3cqi;font-family:var(--serif);font-size:3.9cqi;line-height:1;color:var(--logo-trait);letter-spacing:.05em}
.hero-sous>span{display:flex}
.g{display:inline-block;overflow:hidden;padding:.08em 0 .06em;margin:-.08em 0 -.06em}
.g i{display:inline-block;font-style:normal;transform:translateY(140%);animation:monte 1.1s var(--out) both;animation-delay:calc(var(--i)*50ms + 2.1s)}
@keyframes monte{to{transform:none}}
@keyframes leve{from{opacity:0;transform:translateY(24px)}}
@media(min-width:900px){.hero-grille{grid-template-columns:1.15fr 1fr;gap:clamp(2rem,4vw,4rem)}.hero-logo{width:min(100%,44rem)}}

/* statut calculé en direct (JS), point de couleur */
.statut{display:inline-flex;align-items:center;gap:.65rem;font-weight:600}
.statut:empty{display:none}
.statut::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--caramel);flex:none}
.statut.ouvert::before{background:#5c8a58;animation:respire 2.4s ease-in-out infinite}
@keyframes respire{50%{transform:scale(1.35);opacity:.55}}

/* bandeau d'infos surélevé */
.barre-infos{position:relative;z-index:5;display:grid;gap:1.4rem;margin-top:-2.6rem;padding:1.7rem clamp(1.3rem,3vw,2.4rem);background:#fffdfb;border-radius:1rem;box-shadow:0 0 0 1px rgba(155,125,82,.25),0 1.4rem 3rem rgba(43,33,23,.13)}
.barre-infos dt{font-size:.88rem;font-weight:600;color:var(--caramel-f)}
.barre-infos dd{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.4}
.barre-infos a{text-decoration:none;font-weight:600}
.petit{font-size:.9rem;color:rgba(43,33,23,.75)}
@media(min-width:800px){.barre-infos{grid-template-columns:repeat(3,1fr);gap:0}.barre-infos>div{padding:0 clamp(1rem,2.5vw,2.2rem)}.barre-infos>div+div{border-left:1px solid rgba(43,33,23,.2)}.barre-infos>div:first-child{padding-left:0}}

/* blocs : pleine largeur, les coins arrondis se recouvrent */
.bloc{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(4rem,8vw,7rem) 0 calc(clamp(4rem,8vw,7rem) + 2.5rem)}
.bloc+.bloc{margin-top:-2.5rem;border-radius:2.5rem 2.5rem 0 0}
.bloc--blanc{background:var(--blanc)}
.bloc--celadon{background:var(--celadon)}
.bloc--rose{background:var(--rose-pale)}
.bloc--pale{background:#f4e9e5}
.bloc--caramel{background:var(--caramel-f);color:#fff}
.bloc:last-of-type{padding-bottom:clamp(4rem,8vw,7rem)}
.bloc-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.6rem 2rem;margin-bottom:clamp(1.8rem,3vw,2.8rem)}
.bloc-actions{display:flex;align-items:center;gap:1rem}
.duo{display:grid;gap:3.5rem}
@media(min-width:900px){
  .duo{grid-template-columns:5fr 7fr;gap:clamp(3rem,6vw,6.5rem);align-items:start}
  .duo--inverse{grid-template-columns:7fr 5fr}.duo--inverse .duo-texte{order:2}
  .duo--egal{grid-template-columns:1fr 1fr}
  .duo-texte{position:sticky;top:calc(var(--hh) + 2.5rem)}
}
.chiffres{display:flex;gap:0;margin:2rem 0 0;padding:0;list-style:none}
.chiffres li{display:grid;gap:.2rem;padding:0 clamp(.8rem,1.6vw,1.4rem);flex:1 1 0;align-content:start}
.chiffres li:first-child{padding-left:0}
.chiffres li+li{border-left:1px solid rgba(43,33,23,.3)}
.chiffres b{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,4.6vw,4rem);line-height:1;color:var(--caramel-f)}
.bloc--celadon .chiffres b,.bloc--celadon .mot-m{color:var(--pierre)}
.chiffres span{font-size:.92rem;line-height:1.4}
.duo-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start;padding:.5rem}
.duo-photos::before{content:"";position:absolute;z-index:-1;width:78%;aspect-ratio:1;border-radius:50%;background:var(--rose);top:-3rem;right:-12%}
.duo--inverse .duo-photos::before{right:auto;left:-12%;background:rgba(252,247,245,.38)}
.colonne{display:grid;gap:1.6rem}
.colonne--2{margin-top:3.2rem}
.carrousel{display:flex;gap:1.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.2rem var(--gut) 2.2rem;scroll-padding-inline:var(--gut);scrollbar-width:none;cursor:grab}
.carrousel::-webkit-scrollbar{display:none}
.carrousel.glisse{cursor:grabbing;scroll-snap-type:none}
.carrousel .photo{flex:none;scroll-snap-align:start}
.carrousel img{height:clamp(19rem,34vw,29rem);width:auto;max-width:none;user-select:none;-webkit-user-drag:none}
.carrousel:focus-visible{outline-offset:-4px}
.fleches{display:flex;gap:.6rem}
.fl{display:grid;place-items:center;width:3.1rem;height:3.1rem;border:2px solid var(--pierre);border-radius:3px;background:transparent;color:var(--pierre);cursor:pointer;transition:background-color .35s var(--out),color .35s var(--out)}
.fl:hover{background:var(--pierre);color:var(--blanc)}
.fl svg{width:1.3rem;height:1.3rem}
.desserts{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;padding:.5rem;align-items:start}
.desserts .photo:last-child{grid-column:1/-1;max-width:50%;justify-self:center}
@media(min-width:900px){.desserts{grid-template-columns:repeat(5,1fr);gap:1.8rem}.desserts .photo:last-child{grid-column:auto;max-width:none}.desserts .photo:nth-child(even){margin-top:3rem}}

/* bon à savoir, horaires */
.services{display:grid;gap:0 2.5rem;margin-top:2rem}
.services>div{border-top:1px solid rgba(43,33,23,.25);padding:.9rem 0 1.1rem;display:grid;gap:.15rem;align-content:start}
.services dt{font-family:var(--serif);font-size:1.25rem;color:var(--caramel-f)}
@media(min-width:600px){.services{grid-template-columns:1fr 1fr}}
.horaires{background:#fffdfb;border-radius:1rem;padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 0 0 1px rgba(155,125,82,.25),0 1.2rem 2.6rem rgba(43,33,23,.1)}
.horaires .statut{margin:.8rem 0 .4rem}
.hrs{margin:1.2rem 0 0}
.hrs>div{display:flex;justify-content:space-between;gap:1.5rem;border-top:1px solid rgba(43,33,23,.2);padding:.6rem .6rem}
.hrs>div:last-child{border-bottom:1px solid rgba(43,33,23,.2)}
.hrs dt{font-weight:600}
.hrs dd{text-align:right}
.hrs--semaine>div.auj{background:var(--rose);border-radius:.4rem;border-color:transparent}
.hrs-note{font-size:.92rem;margin-top:.7rem!important;color:var(--caramel-f)}
.horaires .actions{margin-top:1.4rem}

/* nous trouver */
.venir-grille{display:grid;gap:3.5rem}
.venir-texte p{margin-top:1.1rem;max-width:42ch}
.venir-texte .adresse{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.3;margin-top:1.4rem}
.venir-carte{position:relative;padding:.5rem}
.plan--grand{margin:0;max-width:none;aspect-ratio:7/5;border-radius:1rem;box-shadow:0 0 0 .5rem #fffdfb,0 0 0 calc(.5rem + 1.5px) rgba(155,125,82,.5),0 1rem 2.2rem rgba(43,33,23,.17)}
.venir-facade{position:absolute;left:-1.2rem;bottom:-2.6rem;width:34%;max-width:15rem}
@media(min-width:900px){.venir-grille{grid-template-columns:5fr 7fr;gap:clamp(3rem,6vw,6rem);align-items:center}.venir-facade{left:-2.4rem}}
@media(max-width:899px){.venir-carte{margin-bottom:3rem}}

/* réserver */
.resa{padding-bottom:clamp(4rem,8vw,7rem)}
.resa-in{display:grid;gap:2.5rem}
@media(min-width:900px){.resa-in{grid-template-columns:5fr 7fr;gap:clamp(3rem,7vw,7rem);align-items:center}}
.resa-logo{width:min(80vw,30rem)}
.resa-logo .l-disque{fill:var(--rose)}
.resa-logo .l-car,.resa-logo .l-plan{fill:#fff}
.resa .mot-m{color:var(--rose)}
.resa-tel{display:block;font-family:var(--serif);font-size:clamp(2.3rem,8.2vw,6.2rem);line-height:1;text-decoration:none;color:#fff;margin:1rem 0 1rem;transition:color .4s var(--out)}
.resa-tel:hover{color:var(--rose)}
.resa .script{font-size:clamp(2rem,3.6vw,3rem);color:var(--rose);margin-bottom:.8rem}
.resa-texte>p:last-child{max-width:40ch}

/* ---------- Pied de page ---------- */
.pied{background:var(--pierre);color:var(--blanc);padding:clamp(4rem,8vw,6rem) var(--gut) 2.5rem;font-size:.98rem}
.pied-haut{display:grid;gap:2rem;margin-bottom:clamp(2.5rem,6vw,4.5rem);align-items:end}
@media(min-width:900px){.pied-haut{grid-template-columns:auto 1fr;gap:4rem}}
.pied-logo .l-disque{fill:var(--rose)}
.pied-logo .l-car,.pied-logo .l-plan{fill:var(--blanc)}
.pied-logo{display:block;width:min(80vw,24rem);text-decoration:none;container-type:inline-size}
.pied-logo .sous{display:flex;justify-content:space-between;margin:1.2cqi 11.4cqi 0 47.3cqi;font-family:var(--serif);font-size:3.9cqi;letter-spacing:.05em;color:var(--blanc)}
.pied-phrase{font-family:var(--script);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.15;max-width:22ch;color:var(--rose)}
.pied-grille{display:grid;gap:2rem;border-top:1px solid rgba(252,247,245,.2);padding-top:2.5rem}
@media(min-width:760px){.pied-grille{grid-template-columns:repeat(4,1fr)}}
.pied h2{font-size:.88rem;font-weight:600;color:var(--caramel);margin-bottom:.6rem}
.pied ul{list-style:none;padding:0}
.pied li{margin:.15rem 0}
.pied small{display:block;margin-top:3rem;opacity:.75}

/* ---------- Pages intérieures ---------- */
.tete .t1{font-family:var(--script);font-size:clamp(4.6rem,13vw,10rem);line-height:.95;color:var(--caramel-f)}
.tete::before{content:"";position:absolute;z-index:-1;right:calc(var(--gut) - 3rem);top:1rem;width:min(26vw,18rem);aspect-ratio:1;border-radius:50%;background:var(--rose)}
.tete{overflow-x:clip;position:relative;padding:clamp(2.5rem,6vw,4.5rem) var(--gut) clamp(2rem,4vw,3rem)}
.fil{font-size:.9rem;margin-bottom:1.2rem}
.tete .actions{margin-top:1.8rem}

/* La carte : deux colonnes, rubriques en calligraphie, prix alignés à droite sur un pointillé */
.carte{padding:0 var(--gut) clamp(4rem,8vw,7rem)}
.carte-grille{display:grid;gap:0 clamp(3rem,6vw,6rem);border-top:1px solid rgba(43,33,23,.25);padding-top:clamp(2rem,4vw,3rem)}
@media(min-width:900px){.carte-grille{grid-template-columns:1fr 1fr;align-items:start}.carte-col+.carte-col{position:relative}.carte-col+.carte-col::before{content:"";position:absolute;left:calc(clamp(3rem,6vw,6rem)/-2);top:.5rem;bottom:.5rem;width:1px;background:rgba(43,33,23,.2)}}
.rubrique,.suggestions{margin-bottom:clamp(2rem,4vw,3rem)}
.rub-titre{font-family:var(--script);font-weight:400;font-size:clamp(2.8rem,5vw,4rem);line-height:1;color:var(--caramel-f);margin:0 0 .5rem}
.rub-note{font-size:.95rem;line-height:1.5;max-width:46ch;margin:0 0 .6rem;color:rgba(43,33,23,.82)}
.plats{list-style:none;margin:0;padding:0}
.plats li{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0;border-bottom:1px dotted rgba(43,33,23,.35)}
.plats .nom{flex:1;font-weight:500;line-height:1.35}
.plats .nom small{display:block;font-weight:400;font-size:.93rem;line-height:1.45;color:rgba(43,33,23,.82);margin-top:.15rem}
.plats .prix{font-family:var(--serif);font-size:1.25rem;white-space:nowrap;color:var(--caramel-f)}
.suggestions p{max-width:44ch}
.carte-fin{display:flex;flex-direction:column;align-items:center;gap:1.8rem;margin-top:clamp(2rem,5vw,4rem)}
.carte-logo{width:min(70vw,17rem)}

/* Galerie : colonnes, photos entières + visionneuse */
.galerie{padding:0 var(--gut) clamp(4rem,8vw,7rem)}
.mosaique{column-count:2;column-gap:.75rem}
@media(min-width:760px){.mosaique{column-count:3;column-gap:1rem}}
@media(min-width:1200px){.mosaique{column-count:4}}
.tuile{position:relative;display:block;width:100%;padding:0;border:0;background:var(--rose-pale);overflow:hidden;cursor:zoom-in;break-inside:avoid;margin:0 0 .75rem;border-radius:3px}
@media(min-width:760px){.tuile{margin-bottom:1rem}}
.tuile img{display:block;width:100%;height:auto;transition:transform 1.2s var(--out)}
.tuile:hover img{transform:scale(1.035)}
dialog.visio{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--blanc)}
dialog.visio::backdrop{background:rgba(31,24,16,.95)}
.visio .cadre{display:grid;place-items:center;width:100%;height:100%;padding:3.5rem 1rem}
.visio img{max-width:min(92vw,72rem);max-height:80svh;width:auto;height:auto;animation:vt-in .45s var(--out)}
.visio button{position:absolute;background:var(--blanc);color:var(--pierre);border:0;border-radius:3px;font:600 1rem/1 var(--sans);padding:.8rem 1.1rem;cursor:pointer}
.visio .x{top:1rem;right:1rem}
.visio .p{left:1rem;top:50%}
.visio .n{right:1rem;top:50%}
.visio p{position:absolute;bottom:1rem;left:0;right:0;text-align:center;font-size:.95rem;padding:0 4rem}

/* Infos */
.infos{display:grid;gap:0 6rem;padding:0 var(--gut) clamp(4rem,8vw,7rem)}
@media(min-width:1000px){.infos{grid-template-columns:1fr 1fr;align-items:start}}
.infos-col>.titre{margin:2.8rem 0 .9rem}
.infos-col>.titre:first-child{margin-top:1rem}
.infos-col>p+p{margin-top:.8rem}
.plan{margin:1.6rem 0 1rem;aspect-ratio:600/420;background:var(--rose-pale);border-radius:3px;overflow:hidden;max-width:40rem}
.plan iframe{display:block;width:100%;height:100%;border:0}
.infos-photo{margin-top:2rem;max-width:26rem}
details{border-bottom:1px solid rgba(43,33,23,.3);padding:1rem 0}
summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1;color:var(--caramel-f)}
details[open] summary::after{content:"\2212"}
details p{margin-top:.7rem;max-width:56ch}

/* 404 */
.logo-404{width:min(70vw,20rem);margin-bottom:2rem}

/* ---------- Animations d'apparition : tout en transform / opacity / rotate ---------- */
/* les mots s'écrivent de gauche à droite (deux translations opposées, sans clip animé) */
.ecrit{display:block;overflow:hidden;padding:.14em .3em .32em .1em;margin:-.14em -.3em -.32em -.1em}
.js .ecrit-w .ecrit{transform:translateX(-101%);transition:transform 1.6s cubic-bezier(.65,0,.35,1)}
.js .ecrit-w .ecrit>span{display:block;transform:translateX(101%);transition:transform 1.6s cubic-bezier(.65,0,.35,1)}
.js .ecrit-w.in .ecrit,.js .ecrit-w.in .ecrit>span{transform:none}
/* les photos se posent : elles arrivent un peu penchées et se redressent à l'angle de leur place */
.js .rv.photo{opacity:0;rotate:calc(var(--r,0deg) + 7deg);transform:translateY(54px) scale(.95);transition:opacity 1s var(--out),transform 1.3s var(--out),rotate 1.5s var(--out),box-shadow .9s var(--out)}
.js .rv.photo.in{opacity:1;rotate:var(--r,0deg);transform:none}
/* disques : ils s'ouvrent comme le disque du logo ; arcs : ils apparaissent en douceur */
.js .disc.rv{opacity:0;transform:scale(.55);transition:opacity 1.2s var(--out),transform 1.8s var(--out)}
.js .disc.rv.in{opacity:1;transform:none}
/* défilement : les deux colonnes de photos dérivent en sens inverse (parallaxe douce) */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){@supports (animation-timeline:view()){
  .colonne{animation:derive linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .colonne--2{animation-name:derive2}
  @keyframes derive{from{translate:0 2.2rem}to{translate:0 -2.2rem}}
  @keyframes derive2{from{translate:0 -2.2rem}to{translate:0 2.2rem}}
}}

/* ---------- Révélations au scroll ---------- */
.js [data-mots] .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-mots] .mi{display:inline-block;transform:translateY(110%);transition:transform 1.05s var(--out);transition-delay:calc(var(--k)*38ms)}
.js [data-mots].in .mi{transform:none}
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--out),transform 1.2s var(--out)}
.js .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rideau{display:none}
  .logo-hero .ouvre,.tour,.plume,.g i,.hero-bas::before,.hero-phrase,.hero-infos>div>*{transform:none!important;opacity:1!important}
  .coll .disc{opacity:1!important}
  .tour-1,.tour-2{transform:rotate(180deg)!important}
  .anneau-plein{opacity:1!important}
  .plume-ecr{transform:translateX(840px)!important}
  .js [data-mots] .mi,.js .rv{transform:none!important;opacity:1!important}
  .js .ecrit-w .ecrit,.js .ecrit-w .ecrit>span{transform:none!important}
  .js .rv.photo{rotate:var(--r,0deg)!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}