/* Le Bistrot des Canailles.
   Couleurs relevées sur le lieu : enseigne vert mousse, logo vert sauge sur fond gris clair,
   store gris et blanc, carreaux jaunes de la cuisine, serviettes rouge brique (rare).
   Mouvement : transform et opacity uniquement, une seule courbe (--out). */

@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Allura";src:url(../fonts/allura-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#1d241a;      /* noir-vert : texte et fonds sombres */
  --paper:#eeeeea;    /* gris clair du logo : fond */
  --lait:#fafaf6;     /* vaisselle */
  --mousse:#627134;   /* vert de l'enseigne */
  --sauge:#587856;    /* vert du logo et des menus */
  --pistache:#d3d8b4; /* aplat clair */
  --store:#5d5f5c;    /* gris du store */
  --moutarde:#e4b84a; /* carreaux de la cuisine */
  --brique:#9c2f27;   /* serviettes : notes et petits détails seulement */
  --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 : en-tête, hero, pied et sections alignés */
  --bleu:#244681;     /* bleu du cadre de la carte papier */
  --script:"Allura","Snell Roundhand","Brush Script MT",cursive;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hh:4.5rem;        /* hauteur de l'en-tête */
}
*,*::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(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);padding-bottom:4.25rem;overflow-x:hidden}
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(--mousse);outline-offset:3px}
.sombre :focus-visible,.nav :focus-visible,.over :focus-visible,.hero :focus-visible{outline-color:var(--moutarde)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--lait);color:var(--ink);padding:.6rem 1rem;z-index:200;font-weight:600}
.skip:focus{top:1rem}

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

/* ---------- Typographie ---------- */
.titre{font-family:var(--serif);font-weight:700;line-height:1.04;letter-spacing:-.01em}
.t1{font-size:clamp(2.6rem,9vw,6.5rem)}
.t2{font-size:clamp(2.1rem,5.4vw,4.4rem)}
.t3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;letter-spacing:0}
.lead{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.5;max-width:36ch}

/* Logo : grandes capitales B T T / C L L, petites capitales ailleurs, « des » en bas de casse (comme la façade) */
.logo-l{font-family:var(--serif);font-weight:400;white-space:nowrap;line-height:1}
.logo-l .sc{font-size:.78em}
.logo-l .des{font-size:.74em;margin:0 .2em 0 .24em}

/* ---------- Boutons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.65rem;background:var(--ink);color:var(--lait);font:600 1.05rem/1 var(--sans);padding:1.05rem 1.5rem;border:2px solid var(--ink);border-radius:2px;text-decoration:none;cursor:pointer;transition:color .4s var(--out)}
.btn::before{content:"";position:absolute;inset:0;background:var(--mousse);transform:translateY(101%);transition:transform .5s var(--out);z-index:-1}
.btn:hover::before{transform:none}
.btn:hover{border-color:var(--mousse)}
.btn--clair{background:var(--lait);color:var(--ink);border-color:var(--lait)}
.btn--clair::before{background:var(--moutarde)}
.btn--clair:hover{border-color:var(--moutarde)}
.btn--ligne{background:transparent;color:inherit;border-color:currentColor}
.btn--ligne::before{background:var(--ink)}
.btn--ligne:hover{color:var(--lait);border-color:var(--ink)}
.sombre .btn--ligne::before,.hero .btn--ligne::before{background:var(--lait)}
.sombre .btn--ligne:hover,.hero .btn--ligne:hover{color:var(--ink);border-color:var(--lait)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.lien{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;text-decoration:none;padding-bottom:2px;transition:background-size .5s var(--out)}
.lien:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- En-tête fixe : transparent sur la photo, solide ensuite, se range quand on descend ---------- */
.top{position:fixed;inset:0 0 auto;height:var(--hh);z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 var(--gut);color:var(--ink);background:var(--paper);transition:transform .5s var(--out),background-color .4s,color .4s}
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:.55rem;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--store) 0 .55rem,var(--lait) .55rem 1.1rem);
  -webkit-mask:radial-gradient(circle .275rem at 50% 0,#000 98%,transparent 100%) 0 0/.55rem 100% repeat-x;mask:radial-gradient(circle .275rem at 50% 0,#000 98%,transparent 100%) 0 0/.55rem 100% repeat-x;transition:opacity .4s}
.top.over{background:transparent;color:var(--ink)}
.top.over::after{opacity:0}
.top.cache{transform:translateY(-100%)}
.top .logo-l{font-size:1.25rem;text-decoration:none;color:inherit}
.nav ul{list-style:none;padding:0;display:flex;gap:2rem}
.nav a{text-decoration:none;font-weight:600;font-size:.98rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size .5s var(--out)}
.nav a:hover,.nav a[aria-current]{background-size:100% 1.5px}
.top-actions{display:flex;gap:.6rem;align-items:center}
.top .btn{padding:.7rem 1.1rem;font-size:.98rem}
.menu-btn{background:transparent;color:inherit;border:2px solid currentColor;border-radius:2px;font:600 .98rem/1 var(--sans);padding:.62rem 1rem;cursor:pointer}
.menu-close{display:none}
@media(max-width:899px){
  .nav{position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--lait);display:flex;flex-direction:column;justify-content:center;padding:var(--pad);transform:translateY(-100%);visibility:hidden;transition:transform .6s var(--out),visibility 0s .6s}
  .nav.open{transform:none;visibility:visible;transition:transform .6s var(--out)}
  .nav ul{flex-direction:column;gap:.3rem}
  .nav a{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,11vw,4rem);line-height:1.12}
  .nav .menu-close{display:block;position:absolute;top:1rem;right:var(--pad);color:var(--lait)}
  .nav .coord{margin-top:2rem}
}
@media(min-width:900px){.menu-btn{display:none}.nav .coord{display:none}}

/* Barre d'appel collante */
.callbar{position:fixed;inset:auto 0 0 0;z-index:90;background:var(--ink);color:var(--lait);display:flex;justify-content:center;align-items:center;gap:.7rem;padding:1rem;font:600 1.08rem/1 var(--sans);text-decoration:none}
.callbar svg{width:1.2em;height:1.2em}
@media(min-width:900px){body{padding-bottom:0}.callbar{inset:auto 1.5rem 1.5rem auto;border-radius:2px;padding:1rem 1.4rem;box-shadow:0 0 0 2px var(--lait),0 10px 30px rgba(0,0,0,.25)}.callbar:hover{background:var(--mousse)}}

/* ---------- Photos ---------- */
.photo{overflow:hidden;background:var(--pistache)}
.photo img{width:100%;height:auto;transition:transform 1.4s var(--out)}
@media(hover:hover){.photo:not(.px):hover img{transform:scale(1.04)}}

/* ---------- ACCUEIL : le hero est l'enseigne de la façade ----------
   Vert de la devanture, nom en lettres crème entre ses deux tirets, « Tables & épicerie »
   (enseigne d'angle) écrit dans le script de la carte, dessin de la table en filigrane derrière. */
.hero{--r:1.1rem;position:relative;min-height:100svh;display:flex;flex-direction:column;background:var(--mousse);color:var(--lait);overflow:hidden;padding:calc(var(--hh) + 1.5rem) 0 var(--r);isolation:isolate}
/* rideau noir-vert qui se lève sur le premier affichage */
.rideau{position:absolute;inset:0;z-index:5;background:var(--ink);pointer-events:none;animation:rideau 1.2s cubic-bezier(.76,0,.24,1) .15s forwards}
@keyframes rideau{to{transform:translateY(-101%)}}
.hero-centre{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,6vh,4rem) var(--gut)}
.hero-motif{position:absolute;z-index:-1;right:var(--gut);bottom:4%;width:min(84%,26rem);color:var(--ink);opacity:.2}
.motif{display:block;width:100%;height:auto;overflow:visible}
.balai{transform:translateY(-1469px);animation:ecrit 3.4s cubic-bezier(.55,0,.25,1) 1.3s forwards}
@keyframes ecrit{to{transform:none}}
.wordmark{font-family:var(--serif);font-weight:400;line-height:.95;color:var(--lait);font-size:calc((100vw - var(--gut)*2)/6.1);margin:0}
.wordmark .ligne{display:block;white-space:nowrap}
.wordmark .ligne+.lien-l+.ligne{text-align:right}
.wordmark .sc{font-size:.78em}
.wordmark .des{font-size:.62em;margin:0 0 0 .22em}
.wordmark .lien-l{display:none}
.tiret{display:inline-block;width:.42em;height:.035em;background:currentColor;vertical-align:.02em;margin:0 .22em;transform:scaleX(0);animation:trace 1s var(--out) 2.3s forwards}
.ligne:first-child .tiret{margin-left:0;transform-origin:right}
.ligne:last-child .tiret{margin-right:0;transform-origin:left}
@keyframes trace{to{transform:none}}
.g{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em 0 .02em;margin:-.06em 0 -.02em}
.g i{display:inline-block;font-style:normal;transform:translateY(112%);animation:monte 1.4s var(--out) both;animation-delay:calc(var(--i)*60ms + 900ms)}
@keyframes monte{to{transform:none}}
/* « Tables & épicerie » s'écrit de gauche à droite (deux translations opposées, sans clip) */
.hero-phrase{align-self:flex-end;color:var(--pistache);font-size:clamp(3.2rem,9.5vw,9.5rem);line-height:1.1;margin:-.16em -.04em 0 0;padding:0 .08em .1em}
.plume{display:block;overflow:hidden;transform:translateX(-101%);animation:plume 1.9s cubic-bezier(.65,0,.35,1) 2.2s forwards}
.plume>span{display:block;transform:translateX(101%);animation:plume 1.9s cubic-bezier(.65,0,.35,1) 2.2s forwards}
@keyframes plume{to{transform:none}}
.hero-bas{position:relative;margin:0 var(--gut);padding:clamp(1.3rem,2.6vw,2rem) 0 clamp(1.8rem,3.4vw,2.8rem)}
.hero-bas::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left;animation:trace 1.6s var(--out) 2.6s forwards}
.hero-bas dl{display:grid;gap:1rem}
.hero-bas dl>div{overflow:hidden;padding-bottom:.1em}
.hero-bas dl>div>*{animation:leve 1.1s var(--out) both}
.hero-bas dl>div:nth-child(1)>*{animation-delay:2.9s}.hero-bas dl>div:nth-child(2)>*{animation-delay:3.05s}.hero-bas dl>div:nth-child(3)>*{animation-delay:3.2s}
@keyframes leve{from{transform:translateY(115%)}}
.hero-bas dt{font-size:.9rem;font-weight:600;color:var(--lait)}
.hero-bas dd{font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.25}
.hero-bas dd a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--out)}
.hero-bas dd a:hover{background-size:0 1px;background-position:100% 100%}
@keyframes arrive{from{opacity:0;transform:translateY(16px)}}
.accueil .top.over{color:var(--lait);background:var(--mousse)}
/* l'en-tête arrive une fois le rideau levé */
.accueil .top{animation:apparait .9s var(--out) 1.25s both}
@keyframes apparait{from{opacity:0}}
@media(min-width:900px){
  .wordmark{font-size:calc((100vw - var(--gut)*2)/11.75);line-height:1}
  .wordmark .ligne{display:inline}
  .wordmark .ligne:first-of-type{margin-right:.28em}
  .hero-motif{width:min(38vw,40rem);bottom:auto;top:50%;transform:translateY(-58%)}
  .hero-bas dl{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:2rem}
}
/* au scroll, les lettres s'écartent et le hero s'efface (CSS pur, navigateurs compatibles) */
@supports (animation-timeline:scroll()){
  .hero-centre{animation:sortie linear both;animation-timeline:scroll(root);animation-range:0 85svh}
  .hero .g{animation:ecarte linear both;animation-timeline:scroll(root);animation-range:0 85svh}
  .hero .g:nth-child(odd){--d:-1}
  .hero .g:nth-child(even){--d:1}
  @keyframes ecarte{to{transform:translateY(calc(var(--d,1)*2.2rem))}}
  @keyframes sortie{to{opacity:0;transform:translateY(-6vh)}}
}

/* Introduction : phrase avec photos dans le texte */
.intro{padding:clamp(4.5rem,11vw,9rem) var(--pad);max-width:96rem;margin-inline:auto}
.intro p{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,5.4vw,4.8rem);line-height:1.14;letter-spacing:-.015em;max-width:22em}
.intro .vignette{display:inline-block;height:.92em;width:1.5em;vertical-align:-.14em;margin:0 .08em;overflow:hidden;border-radius:.16em;background:var(--pistache)}
.intro .vignette--haute{width:.8em}
.intro .vignette img{width:100%;height:100%;object-fit:cover}
.intro .suite{font-family:var(--sans);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.2rem);letter-spacing:0;line-height:1.6;max-width:40ch;margin:2.5rem 0 0 auto}

/* À table, épicerie, lieu : photos entières, jamais recadrées */
.table-home{padding:clamp(4rem,9vw,8rem) var(--pad);max-width:96rem;margin-inline:auto}
.table-home .cadre{display:grid;gap:3rem}
@media(min-width:900px){.table-home .cadre{grid-template-columns:6fr 5fr;gap:6rem;align-items:center}}
.table-home .formule{margin:2rem 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.epi{display:grid;background:var(--mousse);color:var(--lait);align-items:center;gap:2rem;padding:clamp(3.5rem,8vw,7rem) var(--gut)}
@media(min-width:900px){.epi{grid-template-columns:1fr 1fr;gap:6rem}}
.epi .texte{max-width:40rem}
.epi .titre{margin-bottom:1.4rem}
.epi p{max-width:38ch}
.epi p+p{margin-top:1rem}
.epi .btn{margin-top:1.8rem}
.epi .photo{max-width:46rem}
.lieu-photos{padding:clamp(4rem,9vw,8rem) var(--gut);background:var(--pistache)}
.lieu-photos .cadre{display:grid;gap:3rem}
@media(min-width:900px){.lieu-photos .cadre{grid-template-columns:5fr 6fr;gap:6rem;align-items:center}}

/* Lieu et venir */
.venir{padding:clamp(4rem,9vw,8rem) var(--pad);max-width:96rem;margin-inline:auto}
.venir .cadre{display:grid;gap:3rem}
@media(min-width:900px){.venir .cadre{grid-template-columns:5fr 6fr;gap:6rem;align-items:center}}
.faits{display:grid;gap:1.1rem;margin-top:1.8rem}
.faits dt{font-weight:600}
.hrs{list-style:none;margin:1.6rem 0 0;padding:0;max-width:30rem}
.hrs li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(29,36,26,.3);padding:.55rem 0}
.sombre .hrs li{border-color:rgba(250,250,246,.3)}
.venir .actions{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;margin-top:2rem}

/* Grand bloc de réservation */
.resa{background:var(--ink);color:var(--lait);padding:clamp(4rem,9vw,8rem) var(--gut)}
.resa .tel{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,9.6vw,9rem);line-height:1;letter-spacing:-.02em;color:var(--moutarde);text-decoration:none;margin:1.2rem 0 2rem;white-space:nowrap;transition:color .4s var(--out)}
.resa .tel:hover{color:var(--lait)}
.resa .bas{display:grid;gap:1.5rem}
@media(min-width:900px){.resa .bas{grid-template-columns:1fr 1fr;align-items:end}}

/* ---------- Pages intérieures ---------- */
.page-head{padding:calc(var(--hh) + 3.5rem) var(--pad) 2.5rem;max-width:96rem;margin-inline:auto}
.crumbs{font-size:.9rem;margin-bottom:1.2rem}
.prose{padding:0 var(--pad) clamp(4rem,8vw,7rem);max-width:96rem;margin-inline:auto}
.prose>*{max-width:64rem}
.prose>.menu-carte,.prose>.deux,.prose>.mosaique{max-width:none}
.prose h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;margin:3rem 0 .8rem}
.prose p+p{margin-top:.8rem}
.prose p,.prose li{max-width:62ch}
.note{border-left:4px solid var(--mousse);padding:.2rem 0 .2rem 1rem;margin:2rem 0}
.deux{display:grid;gap:2rem}
@media(min-width:900px){.deux{grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start}}
.galerie{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:760px){.galerie{grid-template-columns:repeat(3,1fr);align-items:start}}
.formule{display:flex;gap:.6rem 2rem;flex-wrap:wrap;align-items:baseline;border-top:2px solid currentColor;border-bottom:2px solid currentColor;padding:1rem 0;max-width:34rem}
.formule .t{font-family:var(--serif);font-style:italic;font-size:1.6rem}
.prix{font-family:var(--serif);font-weight:700;white-space:nowrap}
.plats{list-style:none;padding:0;margin:0}
.plats li{display:grid;grid-template-columns:1fr auto;gap:1.2rem;padding:.85rem 0;border-bottom:1px solid rgba(29,36,26,.25)}
.sombre .plats li{border-color:rgba(250,250,246,.25)}
.plats .nom{max-width:46ch}
.plats .all{font-size:.85rem;opacity:.75;white-space:nowrap}
.plats .note-p{display:block;font-size:.9rem;opacity:.8}
.menu-carte{display:grid;gap:2.5rem;margin-top:2rem}
@media(min-width:900px){.menu-carte{grid-template-columns:1fr 1fr;gap:4.5rem}}
.menu-carte h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;margin:0 0 .4rem}
.menu-carte h2 small{display:block;font-family:var(--sans);font-style:normal;font-size:.85rem;margin-top:.2rem}
.menu-carte section+section{margin-top:2.5rem}
details{border-bottom:1px solid var(--ink);padding:1rem 0;max-width:46rem}
summary{cursor:pointer;font-weight:600;font-size:1.1rem;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}
details[open] summary::after{content:"\2212"}
details p{margin-top:.7rem}

/* ---------- Pied de page ---------- */
.foot{background:var(--ink);color:var(--lait);padding:clamp(3.5rem,8vw,6rem) var(--gut) 2.5rem;font-size:.98rem;border-top:1px solid rgba(250,250,246,.15)}
.foot .grand{display:block;font-size:calc((100vw - var(--gut)*2)/5.6);color:#8fae8c;margin-bottom:clamp(2.5rem,6vw,4.5rem);text-decoration:none}
.foot .grand .ligne{display:block}
@media(min-width:900px){.foot .grand{font-size:calc((100vw - var(--gut)*2)/11)}.foot .grand .ligne{display:inline}.foot .grand .sp{display:inline-block;width:.3em}}
.foot .grand .sp{display:none}
@media(min-width:900px){.foot .grand .sp{display:inline-block}}
.foot-grid{display:grid;gap:2rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.foot h2{font-size:.85rem;font-weight:600;opacity:.65;margin-bottom:.7rem}
.foot ul{list-style:none;padding:0}
.foot li{margin:.2rem 0}
.foot small{display:block;margin:3rem 0 0;opacity:.7}

/* ---------- Révélations ---------- */
.js [data-mots] .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js [data-mots] .mi{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--out);transition-delay:calc(var(--k)*40ms)}
.js [data-mots].in .mi{transform:none}
.js .rv{opacity:0;transform:translateY(40px);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}
  .g i{transform:none}
  .rideau{display:none}
  .balai{animation:none;transform:none}
  .tiret,.plume,.plume>span,.hero-bas::before{transform:none!important}
  .js [data-mots] .mi,.js .rv{transform:none!important;opacity:1!important}
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Ajustements */
@media(max-width:599px){.top-actions .btn{display:none}.top .logo-l{font-size:1.1rem}}
@media(min-width:900px){
  .callbar{transition:opacity .5s var(--out),transform .5s var(--out)}
  body.accueil:not(.passe) .callbar{opacity:0;pointer-events:none;transform:translateY(12px)}
}
.top.cache::after{opacity:0}
.resa .bas .btn{justify-self:start}

.galerie-home{padding:clamp(4rem,9vw,8rem) var(--pad);max-width:96rem;margin-inline:auto}

/* Galerie : colonnes, photos entières (aucun recadrage) + visionneuse */
.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(--pistache);overflow:hidden;cursor:zoom-in;break-inside:avoid;margin:0 0 .75rem}
@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.04)}
.galerie-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem}
.rangee{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.rangee .tuile{flex:none;width:auto;height:clamp(14rem,26vw,22rem);margin:0;scroll-snap-align:start}
.rangee .tuile img{height:100%;width:auto;max-width:none}
dialog.visio{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--lait)}
dialog.visio::backdrop{background:rgba(20,26,14,.94)}
.visio .cadre{display:grid;place-items:center;width:100%;height:100%;padding:3.5rem 1rem}
.visio img{max-width:min(92vw,70rem);max-height:82svh;width:auto;height:auto;object-fit:contain;animation:vt-in .5s var(--out)}
.visio button{position:absolute;background:var(--lait);color:var(--ink);border:0;border-radius:2px;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 1rem}
.photo{overflow:hidden;background:var(--pistache)}
.photo img{display:block;width:100%;height:auto}
.intro .vignette img{height:100%}
@media(max-width:899px){.hero-bas{padding-bottom:5.2rem}}

/* Motifs tirés de la carte papier : dessin au trait vert, script du menu, cadre bleu, filet vertical */
.script{font-family:var(--script);font-weight:400;line-height:1}
.cadre-bleu{border:2px solid var(--bleu);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 7px var(--bleu);padding:1.5rem 1.7rem;max-width:36rem;border-top-width:2px;border-bottom-width:2px;display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:baseline}
.cadre-bleu .t{font-size:clamp(2.1rem,3.4vw,2.7rem);flex:1 1 100%;margin-bottom:.2rem}
.sombre .cadre-bleu{box-shadow:inset 0 0 0 5px var(--ink),inset 0 0 0 7px var(--bleu)}
.orne{display:flex;justify-content:center;padding:0 var(--pad)}
.orne img{width:min(46vw,11rem);height:auto}
.menu-carte h2{font-family:var(--script);font-style:normal;font-weight:400;font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;margin:0 0 .6rem}
.menu-carte h2 small{display:block;font-family:var(--sans);font-size:.85rem;margin-top:.3rem}
@media(min-width:900px){.menu-carte{position:relative}.menu-carte::before{content:"";position:absolute;left:50%;top:.5rem;bottom:.5rem;width:1px;background:var(--ink);opacity:.35}}
.tete-motif{display:none;color:var(--sauge)}
@media(min-width:900px){.tete-motif{display:block;position:absolute;right:var(--gut);bottom:.5rem;width:min(22vw,18rem)}}
.epi .ecrit{font-size:clamp(1.9rem,3vw,2.5rem);margin:-.4rem 0 1.2rem;color:var(--beurre)}
.resa .bas{align-items:end}
.resa-motif{color:#8fae8c;width:min(100%,26rem);justify-self:end}
.erreur-motif{color:var(--sauge);width:min(70%,20rem);margin-bottom:2rem}
.formule .t.script{font-family:var(--script);font-style:normal;font-size:clamp(2.2rem,3.6vw,2.9rem);line-height:1}
.page-head{position:relative}

/* Bord inférieur en festons : la forme du store, sur les photos et la bande du hero (la photo reste entière : seuls ~1 rem du bord sont masqués) */
.photo,.tuile,.hero{--r:.85rem;-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - var(--r) + 2px) no-repeat,radial-gradient(circle var(--r) at 50% 0,#000 98%,transparent 100%) bottom/calc(var(--r)*2) var(--r) repeat-x;mask:linear-gradient(#000,#000) top/100% calc(100% - var(--r) + 2px) no-repeat,radial-gradient(circle var(--r) at 50% 0,#000 98%,transparent 100%) bottom/calc(var(--r)*2) var(--r) repeat-x}
.hero{--r:1.1rem}
a[href^="tel:"]{white-space:nowrap}

/* Bas de la carte : deux colonnes + fin centrée, plus de vide à droite */
.prose>.carte-bas,.prose>.carte-fin,.prose>.infos-grille{max-width:none}
.carte-bas{display:grid;gap:0 5rem;margin-top:1rem}
@media(min-width:900px){.carte-bas{grid-template-columns:1fr 1fr}}
.carte-fin{display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin-top:3.5rem}
.carte-fin img{width:min(46vw,11rem);height:auto}
.infos-grille{display:grid;gap:0 6rem}
@media(min-width:1100px){.infos-grille{grid-template-columns:1fr 1fr;align-items:start}}
.infos-grille h2:first-child{margin-top:3rem}

/* Plan Google Maps (page infos) */
.plan{margin-top:1.6rem;max-width:34rem;aspect-ratio:600/380;background:var(--pistache);overflow:hidden}
.plan iframe{display:block;width:100%;height:100%;border:0}