/* ⚠ I percorsi dei font sono relativi a QUESTO file, non alla pagina.
   Il 27/08/2026 il CSS è passato da <style> inline a css/site.css e
   `fonts/…` ha smesso di puntare a /fonts per puntare a /css/fonts:
   sei font rotti in silenzio, il nome della maison cadeva su Impact. */
@font-face{font-family:'Lilita One';src:url('../fonts/LilitaOne.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url('../fonts/PermanentMarker.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --petrole:#1B4D4A; --petrole-900:#123734; --jaune:#F5B92B;
  --noir:#121212; --corail:#F0876A; --creme:#FBF3E2;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --sec:clamp(4rem,8vw,7rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--petrole);color:var(--creme);font:400 1.05rem/1.6 'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Lilita One',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.015em;line-height:.88;margin:0}
/* ⚠️ La taille du h1 ne vivait QUE dans `.phead`. Sorti de ce conteneur,
   le titre retombait sur la taille par défaut du navigateur et devenait
   minuscule : c'est ce qui est arrivé à « Réserver une table » quand la
   page a été recomposée en un seul bloc. Un titre ne doit pas dépendre
   de la boîte qui l'entoure. `.phead h1` reste et gagne par spécificité.
   Vu par Gian le 27/08. */
h1{font-size:clamp(2.9rem,8vw,6.2rem);line-height:.86}
h2{font-size:clamp(2.3rem,5.4vw,4.4rem)}
h3{font-size:1.3rem;line-height:1.1}
p{margin:0 0 1rem}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.y{color:var(--jaune)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}

/* retino à points : la trame qui casse les aplats */
.dots{position:relative}
.dots::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(currentColor 1.5px,transparent 1.6px);background-size:12px 12px;opacity:.13}
.dots>*{position:relative;z-index:1}

/* la photo penchée, avec son bloc d'ombre plein : la grammaire de leur carte */
.snap{display:block;transform:rotate(var(--rot,-2.5deg));filter:drop-shadow(14px 14px 0 var(--noir))}
.snap img{width:100%;height:100%;object-fit:cover;display:block}
.snap--y{filter:drop-shadow(14px 14px 0 var(--jaune))}
.snap--p{filter:drop-shadow(14px 14px 0 var(--petrole-900))}

/* le bouton taillé, pas une pilule */
.btn{display:inline-block;font:700 .92rem/1 'Archivo';letter-spacing:.07em;text-transform:uppercase;
  padding:1.15rem 1.9rem;text-decoration:none;background:var(--jaune);color:var(--noir);border:0;cursor:pointer;
  clip-path:polygon(1.5% 6%,100% 0,98.5% 94%,0 100%);
  filter:drop-shadow(6px 6px 0 var(--noir));transition:transform .16s ease}
.btn:hover{transform:translate(-2px,-2px)}
.btn--dark{background:var(--noir);color:var(--jaune);filter:drop-shadow(6px 6px 0 var(--jaune))}
.btn--creme{background:var(--creme);color:var(--noir)}

/* l'étiquette ovale au trait */
.oval{display:inline-block;border:2px solid currentColor;border-radius:50%;padding:.85rem 2rem;
  font:700 .76rem/1.2 'Archivo';letter-spacing:.11em;text-transform:uppercase;transform:rotate(-4deg)}

/* l'étiquette autocollante */
.sticker{display:inline-block;background:#fff;color:var(--noir);font:700 .76rem/1 'Archivo';
  letter-spacing:.16em;text-transform:uppercase;padding:.6rem 1.05rem;transform:rotate(-2deg);
  box-shadow:5px 5px 0 var(--noir);margin-bottom:1.4rem}

/* les lettres géantes en filigrane */
.mark{position:absolute;inset:auto 0 -1%;font:400 clamp(5rem,17vw,15rem)/.75 'Lilita One';
  text-transform:uppercase;letter-spacing:.02em;text-align:center;pointer-events:none;
  color:currentColor;opacity:.075;white-space:nowrap;user-select:none;overflow:hidden}
/* le filigrane est en `nowrap` : à 320px « Canard De Rue » sort de la page et
   ajoute 30px de défilement horizontal. Il est décoratif, on le coupe. */

/* bandeau défilant */
.band{background:var(--noir);color:var(--jaune);overflow:hidden;padding:.6rem 0}
.band--tilt{transform:rotate(-1.6deg) scaleX(1.06);margin-block:-.4rem;position:relative;z-index:3}
.band__track{display:flex;align-items:center;width:max-content;animation:slide 32s linear infinite}
.band span{font:700 .82rem/1 'Archivo';letter-spacing:.22em;text-transform:uppercase;padding-inline:1.5rem;white-space:nowrap}
/* la version forte : le cri de la maison, en grand, avec le canard dedans */
.band--big{padding:.9rem 0}
.band--big .band__track{animation-duration:26s}
.band--big span{font:400 clamp(1.6rem,3.6vw,3.2rem)/1 'Lilita One';letter-spacing:.03em;padding-inline:1.2rem}
.band__duck{width:clamp(34px,3.6vw,58px);height:auto;border-radius:50%;flex:none;margin-inline:.4rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(18,55,52,.95);backdrop-filter:blur(8px);border-bottom:2px solid rgba(245,185,43,.35)}
.nav__in{display:flex;align-items:center;gap:1.4rem;padding-block:.65rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand img{width:46px;height:46px;border-radius:50%}
.brand b{font:400 1.15rem/1 'Lilita One';text-transform:uppercase}
.nav__links{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav__links a{font:600 .82rem/1 'Archivo';letter-spacing:.09em;text-transform:uppercase;text-decoration:none;opacity:.85;white-space:nowrap}
.nav__links a:hover{opacity:1;color:var(--jaune)}
.nav .btn{padding:.75rem 1.15rem;font-size:.8rem}

/* menu déroulant Privatisation : une carte de papier collée sous la barre, ombre dure comme le bouton */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
.dd{position:relative}
.dd__btn{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;
  font:600 .82rem/1 'Archivo';letter-spacing:.09em;text-transform:uppercase;opacity:.85}
.dd__btn svg{width:9px;height:5px;flex:none;transition:transform .18s var(--ease-out)}
.dd__menu{position:absolute;top:calc(100% + .9rem);left:50%;z-index:70;list-style:none;margin:0;padding:.45rem 0;min-width:200px;
  background:var(--creme);color:var(--noir);box-shadow:6px 6px 0 var(--noir);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);
  transition:opacity .12s var(--ease-out),transform .12s var(--ease-out),visibility 0s linear .12s}
.dd__menu::before{content:'';position:absolute;left:0;right:0;top:-1rem;height:1rem} /* pont : la souris passe du bouton au menu sans le fermer */
.dd.is-open .dd__btn{opacity:1;color:var(--jaune)}
.dd.is-open .dd__btn svg{transform:rotate(180deg)}
.dd.is-open .dd__menu{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s}
.nav__links .dd__menu a{display:block;padding:.7rem 1.25rem;color:var(--noir);opacity:1;font-size:.78rem;letter-spacing:.1em;white-space:nowrap;
  transition:background .15s ease,color .15s ease}
@media (hover:hover) and (pointer:fine){
  .dd:hover .dd__btn{opacity:1;color:var(--jaune)}
  .dd:hover .dd__btn svg{transform:rotate(180deg)}
  .dd:hover .dd__menu{opacity:1;visibility:visible;transform:translate(-50%,0);
    transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s}
  .nav__links .dd__menu a:hover{background:var(--jaune);color:var(--noir)}
}
.nav__links .dd__menu a:focus-visible{background:var(--jaune);color:var(--noir);outline-offset:-3px}

/* HÉROS : le nom est la mise en page */
.hero{position:relative;padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,6rem);overflow:hidden;color:var(--creme)}
.hero__type{position:relative;z-index:2;text-align:center;pointer-events:none}
.hero__type span{display:block;font:400 clamp(3.6rem,13.5vw,12rem)/.82 'Lilita One';text-transform:uppercase;letter-spacing:-.02em;color:var(--jaune)}
.hero__type span:nth-child(2){color:var(--creme)}
.hero__ph{position:absolute;z-index:3;width:clamp(140px,17vw,250px)}
.hero__ph--l{left:1%;top:20%;--rot:-8deg}
.hero__ph--r{right:1.5%;top:10%;--rot:7deg}
.hero__foot{position:relative;z-index:4;max-width:640px;margin:2.6rem auto 0;text-align:center}
.hero__sub{max-width:40ch;margin:0 auto 1.6rem;font-size:1.08rem;color:rgba(251,243,226,.92)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.1rem}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:2.2rem;position:relative;z-index:4}
.chip{font:600 .78rem/1 'Archivo';padding:.5rem .85rem;border:1px solid rgba(251,243,226,.35);border-radius:999px}
.chip b{color:var(--jaune)}
.chips--gauche{justify-content:flex-start;margin-top:1.8rem}

/* « Quatre façons de prendre le bar » : le canard debout et l'étiquette,
   posés sous le titre pour que le week-end se voie sans lire le copy.
   Les deux briques existent (.duck, .sticker), on ne dessine rien de neuf. */

/* badge circulaire qui tourne */
.spin{position:absolute;right:7%;bottom:5%;width:clamp(148px,17vw,236px);height:auto;aspect-ratio:1;z-index:5;
  animation:turn 20s linear infinite}
.spin text{font:400 18px/1 'Lilita One';letter-spacing:.06em;text-transform:uppercase;fill:var(--jaune)}
.spin__sh text{fill:var(--noir);opacity:.85}
.spin__tx{paint-order:stroke fill;stroke:var(--creme);stroke-width:1.1;stroke-linejoin:round}
@keyframes turn{to{transform:rotate(360deg)}}

/* la tête de canard détourée : le seul élément qui bouge tout seul */
.duck{pointer-events:none;user-select:none;height:auto;filter:drop-shadow(9px 11px 0 rgba(18,18,18,.45))}
.hero__duck{position:absolute;left:2.5%;bottom:-4%;width:clamp(148px,20vw,300px);z-index:5;
  transform-origin:50% 100%;animation:duck-float 5.2s ease-in-out infinite}
@keyframes duck-float{
  0%,100%{transform:translateY(6px) rotate(-4deg)}
  50%{transform:translateY(-18px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){
  .hero__duck{animation:none;transform:rotate(-4deg)}
  .spin{animation:none}}

/* le texte sur l'arc */
.arc{position:relative;background:var(--noir);overflow:hidden;height:clamp(220px,26vw,330px)}
.arc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.arc::after{content:'';position:absolute;inset:0;background:rgba(18,18,18,.42)}
.arc svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
/* fondo scuro + scritta gialla: e il colore che aveva la fascia quando sotto
   c'era il muro. Il neon lo ridara, la scritta smette di essere crema. */
.arc text{font:400 clamp(1.6rem,3.4vw,3rem)/1 'Lilita One';fill:var(--jaune);text-transform:uppercase;letter-spacing:.02em}
/* Sul telefono la scritta usciva minuscola, e non per la clamp: l'SVG ha un
   viewBox 1200x300 in `slice`, quindi il testo viene RIMPICCIOLITO insieme
   alla scena. A 390px il fattore e circa 0.73, cioe 25px scritti diventano
   18px letti. Qui si scrive grande apposta, per leggerne 40. */
@media (max-width:900px){ .arc text{font-size:3.4rem} }

/* sections */
.sec{position:relative;padding-block:var(--sec);overflow:hidden}
.sec--jaune{background:var(--jaune);color:var(--noir)}
.sec--noir{background:var(--noir);color:var(--creme)}
.sec--petrole{background:var(--petrole-900)}
.lead{max-width:44ch}
/* era uno <span>, quindi inline: su un inline i margini verticali non si
   applicano e quel margin-bottom:1rem non faceva niente. Con display:block
   funziona, e l'accento della E non tocca piu la riga di sopra. */
.marker{display:block;font-family:'Permanent Marker',cursive;color:var(--jaune);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.25;text-transform:none;margin-bottom:.7rem}

/* le lieu : photo penchée + texte, décalés */
.lieu{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.lieu .snap{width:100%;aspect-ratio:4/5}

/* la carte : cartes penchées, prix en pastille */
.cards{column-count:3;column-gap:1.8rem;margin-top:2.6rem}
.card{position:relative;display:block;break-inside:avoid;margin-bottom:1.8rem;background:var(--petrole);color:var(--creme);padding:1.6rem 1.4rem 1.9rem;
  transform:rotate(var(--rot,-1.2deg));filter:drop-shadow(10px 10px 0 var(--noir));transition:transform .2s ease}
.card:hover{transform:rotate(0deg) translateY(-4px)}
.card h3{color:var(--jaune)}
.card p{font-size:.88rem;line-height:1.5;color:rgba(251,243,226,.78);margin:0}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.9rem;margin-bottom:.6rem}
.card__p{flex:none;background:var(--jaune);color:var(--noir);white-space:nowrap;
  font:700 .88rem/1 'Archivo';padding:.55rem .7rem;border-radius:999px;transform:rotate(6deg);box-shadow:3px 3px 0 var(--noir)}
.card--photo{padding:0;overflow:hidden;aspect-ratio:4/5}
.card--photo img{width:100%;height:100%;object-fit:cover}

/* le bar : photo qui déborde + prix */
.bar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.bar .snap{width:100%;aspect-ratio:4/5}
.taps{list-style:none;margin:1.6rem 0 0;padding:0}
.taps li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px dashed rgba(251,243,226,.24);font-size:.97rem}
.taps b{font-weight:700}
.taps span{color:var(--jaune);font-weight:700;white-space:nowrap}
.note{font-size:.86rem;opacity:.7;margin-top:1.1rem}

/* le tchin : les deux canards qui trinquent */
.tchin{text-align:center;overflow:hidden}
.tchin__in{display:flex;align-items:center;justify-content:center;gap:clamp(.3rem,2vw,1.5rem)}
.tchin__duck{width:clamp(104px,17vw,254px);height:auto;flex:none;
  filter:drop-shadow(8px 10px 0 rgba(18,18,18,.45))}
.tchin__duck--l{transform:rotate(10deg)}
.tchin__duck--r{transform:scaleX(-1) rotate(10deg)}
.tchin__mid{position:relative;display:flex;align-items:center;justify-content:center;flex:none;
  min-width:clamp(130px,20vw,290px);min-height:clamp(130px,20vw,290px)}
.tchin__burst{position:absolute;top:50%;left:50%;width:100%;aspect-ratio:1;translate:-50% -50%;opacity:.32;
  background:repeating-conic-gradient(var(--jaune) 0 2.5deg, transparent 2.5deg 13deg);border-radius:50%;
  -webkit-mask-image:radial-gradient(circle,transparent 33%,#000 36%,#000 68%,transparent 71%);
  mask-image:radial-gradient(circle,transparent 33%,#000 36%,#000 68%,transparent 71%)}
.tchin__word{position:relative;z-index:2;font-family:'Permanent Marker',cursive;color:var(--jaune);
  font-size:clamp(1.8rem,5.2vw,4.2rem);line-height:1;white-space:nowrap;transform:rotate(-4deg)}
.tchin__sub{margin-top:2.2rem;font-size:1.05rem;opacity:.85}
.js .tchin__duck{opacity:0}
.js .tchin__word{opacity:0;transform:scale(.4) rotate(-9deg)}
.js .is-in .tchin__duck--l{animation:cheers .85s cubic-bezier(.2,.85,.3,1) forwards,
  tchin-bob 3.6s .95s ease-in-out infinite}
.js .is-in .tchin__duck--r{animation:cheers-r .85s cubic-bezier(.2,.85,.3,1) forwards,
  tchin-bob-r 3.6s .95s ease-in-out infinite}
@keyframes tchin-bob{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-10px) rotate(13.5deg)}}
@keyframes tchin-bob-r{0%,100%{transform:scaleX(-1) translateY(0) rotate(10deg)}50%{transform:scaleX(-1) translateY(-10px) rotate(13.5deg)}}
@media (prefers-reduced-motion:reduce){
  .js .is-in .tchin__duck--l{animation:cheers .85s ease forwards}
  .js .is-in .tchin__duck--r{animation:cheers-r .85s ease forwards}}
.js .is-in .tchin__word{animation:pop .4s .6s cubic-bezier(.2,1.5,.4,1) forwards}
.js .is-in .tchin__burst{animation:burst .5s .58s ease-out forwards}
@keyframes cheers{
  0%{opacity:0;transform:translateX(-95%) rotate(-36deg)}
  60%{opacity:1;transform:translateX(9%) rotate(16deg)}
  80%{transform:translateX(-3%) rotate(6deg)}
  100%{opacity:1;transform:translateX(0) rotate(10deg)}}
@keyframes cheers-r{
  0%{opacity:0;transform:scaleX(-1) translateX(-95%) rotate(-36deg)}
  60%{opacity:1;transform:scaleX(-1) translateX(9%) rotate(16deg)}
  80%{transform:scaleX(-1) translateX(-3%) rotate(6deg)}
  100%{opacity:1;transform:scaleX(-1) translateX(0) rotate(10deg)}}
@keyframes pop{to{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes burst{0%{opacity:0;transform:scale(.35)}40%{opacity:.85}100%{opacity:.32}}

/* privatisation */
.priv__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.formcard{background:var(--noir);color:var(--creme);padding:clamp(1.5rem,3vw,2.4rem);transform:rotate(-.8deg);filter:drop-shadow(12px 12px 0 rgba(18,18,18,.28))}
.form{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field--full{grid-column:1/-1}
.field label{font:700 .72rem/1 'Archivo';letter-spacing:.12em;text-transform:uppercase;color:var(--jaune)}
.field input,.field select,.field textarea{font:400 .96rem/1.4 'Archivo';padding:.8rem .9rem;border:2px solid var(--creme);background:transparent;color:var(--creme);width:100%}
.field textarea{resize:vertical;min-height:92px}
.field input::placeholder,.field textarea::placeholder{color:rgba(251,243,226,.45)}
.field select option{color:var(--noir);background:var(--creme)}
.form .btn{grid-column:1/-1;justify-self:start}
.form__ok{grid-column:1/-1;background:var(--jaune);color:var(--noir);padding:.9rem 1.05rem;font-weight:700}
[hidden]{display:none !important}

/* avis : la rosace */
.avis{text-align:center}
.rosace{position:relative;display:inline-grid;place-items:center;width:min(260px,62vw);aspect-ratio:1}
.rosace svg{position:absolute;inset:0;width:100%;height:100%;animation:turn 22s linear infinite}
.rosace text{font:700 .8rem/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;fill:var(--jaune)}
.rosace b{font:400 clamp(3.4rem,9vw,5.6rem)/1 'Lilita One';color:var(--jaune)}

/* bandes photo, deux vitesses opposées */
.strip{overflow:hidden;background:var(--petrole-900);padding-block:var(--sec) 0}
.strip__track{display:flex;gap:1rem;width:max-content;animation:slide 55s linear infinite}
.strip__track--rev{animation-duration:78s;animation-direction:reverse;margin-top:1rem}
.strip__track img{width:clamp(180px,22vw,290px);aspect-ratio:4/5;object-fit:cover}

/* pied de page */
.foot{background:var(--noir);padding-block:var(--sec) 2.5rem;position:relative;overflow:hidden;color:var(--creme)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);position:relative;z-index:1}
.foot h3{font:700 .8rem/1 'Archivo';letter-spacing:.16em;color:var(--jaune);margin-bottom:1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem;font-size:.95rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--jaune)}
.foot__legal a{text-decoration:underline;text-underline-offset:3px}
.foot__brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.foot__brand img{width:58px;height:58px;border-radius:50%}
.foot__brand b{font:400 1.3rem/1 'Lilita One';text-transform:uppercase}
.todo{color:var(--corail);font-size:.88rem}
/* niente `opacity` sul contenitore: si moltiplicava con quella del logo
   dell'agenzia e lo spegneva. L'attenuazione passa sul colore, così i
   figli restano padroni della propria. */
.foot__end{margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(251,243,226,.18);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8rem;color:rgba(251,243,226,.6);position:relative;z-index:1}

/* mouvement */
.js .up{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.js .up.is-in{opacity:1;transform:none}

@media (max-width:1080px){ /* l'étiquette « Privatisation & repas de groupe » tient sur une ligne jusqu'à 901px, mesuré */
  .nav__links{gap:1rem}
  .nav__links a,.dd__btn{font-size:.76rem;letter-spacing:.06em}
  .nav .btn{padding-inline:.95rem}
  .brand b{white-space:nowrap}
}
@media (max-width:1000px){
  .nav__in{gap:1rem}
  .nav__links{gap:.6rem}
  .nav__links a,.dd__btn{font-size:.7rem;letter-spacing:.04em}
  .brand b{font-size:1rem}
  .nav .btn{padding-inline:.8rem;font-size:.74rem}
}
@media (max-width:900px){
  .lieu,.bar,.priv__grid{grid-template-columns:1fr}
  .cards{column-count:2}
  /* Les DEUX photos reviennent sur telephone, cote a cote et penchees en sens
     inverse, avec un decalage vertical : alignees elles se liraient comme une
     grille, decalees elles se lisent comme un collage. Le .wrap passe en flex
     et tout le reste garde sa pleine largeur. */
  .hero .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:7%}
  .hero .wrap>*{flex-basis:100%}
  /* ⚠️ `.hero .wrap>*` vaut 0-2-0 et battait `.hero__ph` qui vaut 0-1-0 :
     les deux photos repassaient en pleine largeur et s'empilaient. La regle
     n'etait pas fausse, elle etait battue. */
  .hero .wrap>.hero__ph{position:static;flex:0 0 40%;width:auto;margin:1.9rem 0 0}
  .hero .wrap>.hero__ph--l{display:block;--rot:-7deg;margin-top:3.1rem}
  .hero .wrap>.hero__ph--r{--rot:6deg}
  /* Sur telephone la composition du desktop revient : le canard a gauche,
     le cercle a droite, sur la meme bande. Avant, le cercle etait centre
     dans le flux sous les pastilles et la hero se lisait comme une pile.
     Le bas de la hero garde la place des deux, sinon ils mordent dessus. */
  .spin{position:absolute;right:4%;bottom:1.5rem;margin:0;width:min(33vw,148px)}
  .hero__duck{width:min(38vw,168px);left:1.5%;bottom:-6px}
  .hero{padding-bottom:calc(min(33vw,148px) + 4.6rem)}   /* mesure : 2,6rem laissait le cercle a 0px des pastilles */
  .snap{filter:drop-shadow(9px 9px 0 var(--noir))}
}
@media (max-width:620px){
  .cards{column-count:1}
  .form{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .brand b{font-size:1rem;white-space:nowrap}
  .brand img{width:40px;height:40px}
  .card__p{right:-6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js .up{opacity:1;transform:none}
  .dd__menu,.dd__btn svg{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   AJOUTS DU SITE COMPLET, 27/08/2026
   Le site passe d'une page unique à cinq. Ce qui suit est ce qu'une seule
   page n'avait pas besoin d'avoir : le menu mobile, l'en-tête des pages
   intérieures, les deux cartes, la page groupes, réserver et contact.
   ══════════════════════════════════════════════════════════════════════ */

/* ── le hamburger et le panneau mobile ────────────────────────────────
   Jusqu'ici la nav disparaissait sous 900px sans rien pour la remplacer :
   sur une page à ancres ça passait, sur cinq pages c'est une impasse. */
.burger{display:none;flex:none;width:46px;height:46px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.burger span{display:block;width:24px;height:2.5px;margin:5px auto;background:currentColor;
  transition:transform .18s var(--ease-out),opacity .12s var(--ease-out)}
.mm{position:fixed;inset:0;z-index:80;background:var(--petrole-900);color:var(--creme);
  padding:5.2rem var(--pad) 2.5rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s linear .18s}
.mm.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility 0s}
body.mm-lock{overflow:hidden}
.mm__close{position:absolute;top:1rem;right:var(--pad);width:46px;height:46px;border:0;background:none;color:inherit;cursor:pointer;font:400 2rem/1 'Archivo'}
.mm ul{list-style:none;margin:0;padding:0}
.mm>ul>li{border-bottom:1px solid rgba(251,243,226,.16)}
.mm>ul>li>a,.mm__lab{display:block;padding:1.05rem 0;font:400 1.9rem/1.05 'Lilita One';
  text-transform:uppercase;text-decoration:none;letter-spacing:-.01em}
.mm__lab{color:var(--jaune);font-size:1.55rem;padding-bottom:.5rem}
.mm__sub{padding-bottom:1.1rem}
.mm__sub a{display:block;padding:.5rem 0;font:600 .92rem/1 'Archivo';letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;opacity:.82}
.mm__sub a:hover,.mm>ul>li>a:hover{color:var(--jaune);opacity:1}
.mm .btn{margin-top:2rem}
.mm__foot{margin-top:2.4rem;font-size:.92rem;opacity:.75}
.mm__foot a{text-decoration:none}
/* « Derriere le canard » allunga la barra di 8 caratteri: sotto i 1024px
   passa al burger. I link devono sparire alla STESSA soglia, sennon fra
   901 e 1024 si vedono tutti e due. */
@media (max-width:1024px){ .burger{display:block} .nav__links{display:none} }
@media (min-width:901px){ .mm{display:none} }

/* ── l'en-tête des pages intérieures ──────────────────────────────────
   Pas un héros : une bande courte qui dit où on est, dans la grammaire
   de la maison (l'étiquette autocollante, puis le titre géant). */
.phead{position:relative;padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem);overflow:hidden}
.phead h1{font-family:'Lilita One',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.86;margin:0;font-size:clamp(2.9rem,8vw,6.2rem)}
.phead__lead{max-width:52ch;margin-top:1.4rem;font-size:1.08rem;opacity:.92}
.phead__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* ── les cartes : à manger, à boire ───────────────────────────────────
   Deux colonnes sur écran large, une seule au téléphone. Le prix ne se
   détache jamais de son plat : c'est la même ligne, pas une colonne. */
.carte{padding-block:clamp(2.5rem,5vw,4rem)}
.carte__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem) clamp(2.5rem,5vw,4.5rem);align-items:start}
.fam{margin-bottom:clamp(2.2rem,4vw,3.2rem);break-inside:avoid}
.fam__h{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem .9rem;margin-bottom:1.3rem}
.fam__h h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.fam__note{font:600 .74rem/1.55 'Archivo';letter-spacing:.14em;text-transform:uppercase;opacity:.68}
.plat{display:grid;grid-template-columns:1fr auto;gap:.35rem 1.2rem;padding:.85rem 0;
  border-bottom:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent)}
.plat:last-child{border-bottom:0}
.plat__n{font:700 1.02rem/1.35 'Archivo'}
.plat__p{font:400 1.15rem/1 'Lilita One';white-space:nowrap;color:var(--jaune)}
.sec--jaune .plat__p,.sec--creme .plat__p{color:var(--noir)}
.plat__d{grid-column:1/-1;font-size:.92rem;opacity:.78;margin:0}
.plat__tag{display:inline-block;margin-left:.5rem;background:var(--corail);color:var(--noir);
  font:700 .6rem/1 'Archivo';letter-spacing:.12em;text-transform:uppercase;padding:.34rem .5rem;vertical-align:.14em}
/* les bières ont trois prix : demi, pinte, happy hour */
.plat--3{grid-template-columns:1fr auto}
.prix3{display:flex;gap:.9rem;font:400 1.05rem/1 'Lilita One';white-space:nowrap;color:var(--jaune)}
.prix3 i{font-style:normal;opacity:.45}
.prix3__h{font:600 .66rem/1 'Archivo';letter-spacing:.1em;text-transform:uppercase;
  display:flex;gap:.9rem;justify-content:flex-end;opacity:.62;margin-bottom:.2rem}
.prix3__h span{min-width:2.6rem;text-align:right}
.prix3 span{min-width:2.6rem;text-align:right}

/* ── la page groupes : les sections alternées photo / texte ───────────*/
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.split--rev .split__ph{order:2}
.split__ph img{width:100%;height:100%;object-fit:cover}
.occas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;margin-top:2.4rem}
.occas h3{font:700 .82rem/1 'Archivo';letter-spacing:.15em;color:var(--jaune);margin-bottom:.5rem}
.sec--jaune .occas h3{color:var(--noir)}
.occas p{font-size:.95rem;opacity:.85;margin:0}

/* ── le formulaire standard Double Shift ──────────────────────────────
   Structure copiée de la page livrée de Collonge Café : mêmes champs,
   même ordre, mêmes libellés, même bouton centré. Seule la peau change,
   parce qu'ici le noir et le jaune sont la maison. */
.rv{max-width:760px;margin:0 auto}
.form-section-label{font:700 .78rem/1 'Archivo';letter-spacing:.15em;text-transform:uppercase;
  color:var(--jaune);margin:0 0 .8rem}
.form-field{display:flex;flex-direction:column;gap:.35rem}
.form-field label{font:700 .72rem/1.3 'Archivo';letter-spacing:.12em;text-transform:uppercase;color:var(--creme)}
.req{opacity:.5;font-weight:400;letter-spacing:.06em;text-transform:none}
/* Riga di spiegazione sotto un'etichetta di sezione del form: stessa famiglia
   del corpo, non maiuscoletto, attaccata all'etichetta e staccata dai campi. */
.form-note{margin:.45rem 0 .9rem;font-size:.92rem;line-height:1.5;color:rgba(251,243,226,.82)}
.rv input,.rv select,.rv textarea{font:400 .96rem/1.4 'Archivo';padding:.8rem .9rem;
  border:2px solid rgba(251,243,226,.42);background:transparent;color:var(--creme);width:100%;border-radius:0}
.rv input:focus,.rv select:focus,.rv textarea:focus{border-color:var(--jaune);outline:none}
.rv select option{color:var(--noir);background:var(--creme)}
.rv textarea{resize:vertical}
/* Le champ date natif : sur fond sombre son icone de calendrier est presque
   invisible, et Chrome n'ouvre le calendrier qu'en cliquant dessus. On la
   retourne en clair et on agrandit la cible ; le clic partout est en JS. */
.rv input[type="date"]{cursor:pointer}
.rv input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.75;
  cursor:pointer;padding:4px;margin-right:-2px}
.rv input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
.rv__ok{background:var(--jaune);color:var(--noir);padding:1rem 1.15rem;font-weight:700;margin-top:1.4rem}

/* ── la page contact : infos à gauche, formulaire à droite ────────────*/
.ct{display:grid;grid-template-columns:2fr 3fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.ct__bloc{margin-bottom:2.2rem}
.ct__lab{font:700 .74rem/1 'Archivo';letter-spacing:.15em;text-transform:uppercase;color:var(--jaune);margin-bottom:.7rem}
.ct__bloc ul{list-style:none;margin:0;padding:0}
.ct__bloc li{margin-bottom:.4rem}
.ct__bloc a{text-decoration:none}
.ct__bloc a:hover{color:var(--jaune)}
.hrs{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.4rem;font-size:.98rem}
.hrs dt{font-weight:700}
.hrs dd{margin:0;opacity:.88}
.hrs .off{color:var(--corail)}
.ct__map{width:100%;height:340px;border:0;margin-top:.4rem;filter:grayscale(.25)}

/* ── la page réserver ─────────────────────────────────────────────────*/
.resa{max-width:760px;margin:0 auto;text-align:center}
.resa__tel{display:inline-block;font:400 clamp(2rem,5.5vw,3.4rem)/1 'Lilita One';color:var(--jaune);
  text-decoration:none;letter-spacing:.01em;margin-block:.6rem 1.4rem}
.resa__tel:hover{color:var(--creme)}

@media (max-width:900px){
  .carte__grid,.split,.ct{grid-template-columns:1fr}
  .split--rev .split__ph{order:0}
  .phead__lead{max-width:none}
}
.sec--jaune .prix3{color:var(--noir)}
#enquete,#bar,#carte,#le-lieu,#privatisation,#pourquoi{scroll-margin-top:92px}

/* La bande inclinée, deux problèmes et une seule réponse.
   1. Elle est plus large que la page pour boucher les deux coins ouverts par
      la rotation, donc sans conteneur elle fait déborder de 43 px à 1440.
   2. ⚠️ Dans le flux, elle crée entre les deux sections une bande de sa propre
      hauteur que **personne ne peint** sauf le fond du `body`, qui est pétrole :
      la rotation y découpe deux triangles et on voit un coin vert. Vu par Gian
      le 27/08 entre les bières et les cocktails.
   La réponse : conteneur de hauteur ZÉRO, bande en absolu centrée sur la
   couture par `translateY(-50%)`, largeur 110 % pour couvrir les coins, et
   `overflow-x:clip` (pas `hidden`, qui couperait aussi la hauteur et casserait
   le `sticky` de la nav). */
.band-clip{position:relative;z-index:5;height:0;overflow-x:clip;overflow-y:visible}
.band-clip .band{position:absolute;left:-5%;width:110%;top:0;margin:0}
.band-clip .band--tilt{transform:translateY(-50%) rotate(-1.6deg)}
.band-clip .band{z-index:1}

/* ⚠️ La bande penche, la couture reste droite, et c'est ça qui se voit.
   La bande est bien centrée sur le raccord, mais l'inclinaison la fait
   dériver de largeur × tan(1,6°) / 2 : ±20px à 1440 alors qu'elle ne fait
   que 32px de haut. Aux deux bouts elle ne couvre donc plus le raccord, et
   on voit un coin de la section du dessous à gauche et un coin de celle du
   dessus à droite. Deux lignes qui se contredisent, une droite et une
   penchée : « sta merda ancora storta », Gian, 27/08/2026.
   ⚠️ Épaissir la bande ne répare rien : la dérive grandit avec la largeur
   de l'écran, donc ça recasse au moniteur suivant. La réponse est de faire
   pencher LE RACCORD LUI-MÊME. Deux cales pivotent autour du MÊME point que
   la bande (le milieu de la couture), chacune peinte de la couleur de sa
   section, et la ligne droite n'existe plus.
   56px : plus que la dérive jusqu'à 3800px de large, et moins que le
   rembourrage bas le plus court d'une section (64px à 320px), donc les
   cales ne montent jamais sur le contenu.
   Chaque bande déclare ses deux couleurs en ligne, `--bc-h` en haut et
   `--bc-b` en bas : sans elles, les cales sont transparentes et on retombe
   sur l'ancien comportement. */
.band-clip::before,.band-clip::after{content:'';position:absolute;left:-5%;width:110%;
  height:48px;z-index:0;pointer-events:none;background-size:12px 12px}
.band-clip::before{bottom:0;transform-origin:50% 100%;transform:rotate(-1.6deg);
  background-color:var(--bc-h,transparent);background-position:0 100%;
  background-image:radial-gradient(var(--bc-hp,transparent) 1.5px,transparent 1.6px)}
.band-clip::after{top:0;transform-origin:50% 0;transform:rotate(-1.6deg);
  background-color:var(--bc-b,transparent);background-position:0 0;
  background-image:radial-gradient(var(--bc-bp,transparent) 1.5px,transparent 1.6px)}
/* ⚠️ La cale reprend le retino à points de sa voisine, sinon elle pose une
   bande lisse de 48px en travers d'une section texturée et ça se voit plus
   que le défaut qu'on répare. La phase de la trame ne peut pas coïncider
   (celle de la section part de son propre haut, dont la hauteur varie) :
   à 13% d'alpha sur 48px, le décalage ne se lit pas, l'absence si.
   48px : au-dessus de la dérive jusqu'à ~2900px de large, en dessous du
   rembourrage bas le plus court d'une section (64px à 320px). */

/* Sous 400px la barre ne tient pas : logo 140 + bouton 96 + hamburger 46 tombent
   à 350px pour 320 de large, mesuré. Le lettering du nom part, le canard reste :
   c'est lui qui identifie la maison, et « Réserver » ne se sacrifie pas. */
@media (max-width:400px){
  .nav__in{gap:.6rem}
  .brand b{display:none}
  .brand{gap:0}
  .nav .btn{padding-inline:.7rem;font-size:.72rem}
}

/* Sur le jaune, l'ovale corail tombe à 1,42:1 : il passe au noir. */
.oval--noir{color:var(--noir)}

/* ── Gli oggetti disegnati della casa ─────────────────────────────────
   Sulla loro carta di carta ogni famiglia porta il suo disegno: il secchio
   di frites sullo Sharing Duck, il burger sui Burgers, la chope sulle Bières.
   Non è decoro, è il segnale di dove sei. Sul sito fa lo stesso lavoro, con
   la grammatica del resto del sito: leggermente ruotato e con l'ombra piena
   senza sfocatura, come le foto `.snap` e l'etichetta `.sticker`. */
.fam{position:relative}
/* L'oggetto sta NELLA riga del titolo, non appeso in alto a destra.
   Appeso, il titolo doveva riservare la sua altezza e sotto restava un vuoto
   di un centinaio di pixel; e in una famiglia a due colonne finiva comunque
   sopra la prima riga di destra. In linea non può collidere con niente. */
.fam__obj{flex:none;width:clamp(72px,9vw,116px);height:auto;
  transform:rotate(var(--rot,3deg));
  filter:drop-shadow(6px 7px 0 rgba(18,18,18,.28))}
.sec--noir .fam__obj,.sec--petrole .fam__obj{filter:drop-shadow(6px 7px 0 rgba(245,185,43,.24))}
.fam--obj .fam__h{align-items:center;gap:.7rem clamp(.9rem,2vw,1.5rem)}
.carte__grid .fam__obj{width:clamp(66px,8vw,98px)}
@media (max-width:640px){ .fam__obj{width:clamp(62px,17vw,88px)} }
@media (prefers-reduced-motion:no-preference){
  @keyframes obj-flotte{0%,100%{transform:rotate(var(--rot,3deg)) translateY(0)}
                        50%{transform:rotate(calc(var(--rot,3deg) + 1.5deg)) translateY(-6px)}}
  .fam__obj{animation:obj-flotte 6.4s ease-in-out infinite}
}

/* Il dessert sulla loro carta è un badge: la stella gialla col 6€, la pastiglia
   corail « DESSERT ! » e l'anatra in piedi accanto. L'anatra è vettoriale nel
   PDF, quindi è estratta e non generata: è davvero la loro. */
.dessert__ligne{display:flex;align-items:flex-end;gap:clamp(.8rem,2.5vw,1.8rem);flex-wrap:wrap}
.dessert__duck{width:clamp(84px,11vw,132px);height:auto;flex:none;
  transform:rotate(-3deg);filter:drop-shadow(6px 7px 0 rgba(18,18,18,.22))}
/* Les bières sont un tableau de prix plein : ni le haut ni le bas de la famille
   n'a de coin libre, la chope y recouvrait soit l'entête « demi / pinte / HH »,
   soit les trois dernières lignes. Elle passe donc sur la photo d'à côté, à
   cheval sur la gouttière, comme un autocollant posé dessus. Mesuré. */
.ph-obj{position:relative}
.ph-obj__img{position:absolute;top:-2.2rem;left:-3rem;z-index:4;
  width:clamp(96px,12vw,168px);height:auto;pointer-events:none;
  transform:rotate(-7deg);filter:drop-shadow(8px 9px 0 rgba(18,18,18,.34))}
@media (max-width:900px){
  .ph-obj__img{top:-1.4rem;left:auto;right:-.4rem;width:clamp(84px,21vw,124px)}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes obj-flotte-g{0%,100%{transform:rotate(-7deg) translateY(0)}
                          50%{transform:rotate(-5.5deg) translateY(-7px)}}
  .ph-obj__img{animation:obj-flotte-g 6.8s ease-in-out infinite}
}
/* Il blocco dessert mostrava una foto di burger: il disegno della parte di
   tarte dice quello che quel blocco vende. */
.dessert__vue{display:flex;justify-content:center;align-items:center}
.dessert__vue img{width:min(100%,420px);height:auto;transform:rotate(2.5deg);
  filter:drop-shadow(10px 11px 0 rgba(18,18,18,.22))}

/* Le foto dei piatti dentro le famiglie: una coppia sugli starter, una sola
   sui burgers. Stessa grammatica del resto del sito, la cornice inclinata con
   l'ombra piena, rotazioni opposte perché due foto dritte leggono come un
   catalogo. Stanno SOTTO la lista, non accanto: accanto stringerebbero le due
   colonne dei piatti, che sono la ragione della pagina. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3.2rem);
  margin-top:clamp(2.4rem,5vw,3.6rem);align-items:start}
.solo{margin-top:clamp(2.4rem,5vw,3.6rem);max-width:min(100%,460px);margin-inline:auto}
@media (max-width:760px){
  .duo{grid-template-columns:1fr;gap:clamp(1.8rem,7vw,2.6rem)}
}

/* I burgers passano a lista unica a sinistra e foto a destra: su due colonne
   di due righe e mezzo la lista si spezzava male, e la foto sotto restava
   scollegata dai piatti che illustra. Chiesto da Gian il 27/08. */
.liste-ph{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.liste-ph__ph{position:sticky;top:96px}
@media (max-width:900px){
  .liste-ph{grid-template-columns:1fr;gap:clamp(1.8rem,6vw,2.6rem)}
  .liste-ph__ph{position:static;max-width:min(100%,420px);margin-inline:auto}
}

/* La chiusura del menu cibo: due porte affiancate invece di una sola.
   Una tavola stasera, oppure tutto il bar. Il divisore sta nel mezzo e
   diventa orizzontale quando le colonne si impilano. */
.fin2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);text-align:center;align-items:start}
.fin2 h2{font-size:clamp(2rem,4vw,3.2rem)}
.fin2 .lead{max-width:34ch;margin-inline:auto}
.fin2__col+.fin2__col{border-left:2px solid rgba(245,185,43,.26);padding-left:clamp(2rem,5vw,4rem)}
@media (max-width:820px){
  .fin2{grid-template-columns:1fr;gap:clamp(2.4rem,8vw,3.2rem)}
  .fin2__col+.fin2__col{border-left:0;padding-left:0;
    border-top:2px solid rgba(245,185,43,.26);padding-top:clamp(2.2rem,7vw,3rem)}
}

/* Il titolo del lieu è due righe volute da Gian, ma nella colonna stretta
   ognuna si spezzava ancora: quattro righe invece di due. Dimensionato sulla
   RIGA PIÙ LUNGA, « Le canard, c'est sacré. », che a 1024 non passa oltre i
   37,7px e a 1280 oltre i 47,1px. Misurato, non stimato. */
#le-lieu h2{font-size:clamp(1.9rem,3.2vw,2.75rem)}

/* ⚠️ Una banda non deve MAI avere il fondo di un suo vicino.
   Se ce l'ha, metà nastro sparisce dentro la sezione e quello che resta si
   legge come un bordo di sezione inclinato, non come un nastro appiccicato
   sopra la cucitura. Successo su tre bande su sei, viste da Gian fra le
   bières e i cocktails. Il colore si sceglie contro i DUE vicini. */
.band--petrole{background:var(--petrole-900);color:var(--creme)}
.band--jaune{background:var(--jaune);color:var(--noir)}

/* ── L'équipe : la maschera che si toglie ─────────────────────────────
   Idea di Gian. Ogni persona porta la maschera d'anatra della casa, quella
   vera, già scontornata in `tete-canard.png`. Passandoci sopra col mouse
   la maschera si solleva e scopre il volto; al tocco fa lo stesso, perché
   su un telefono il passaggio del mouse non esiste. Il bottone c'è per
   davvero, così ci si arriva anche col tasto Tab. */
/* La sezione deve stare in UNA schermata: le foto sono ritratti 3:4 e su una
   griglia a due colonne larghe diventavano alte 780px, quindi il nome finiva
   sotto la piega e bisognava scorrere per sapere chi è. L'altezza della foto
   si prende dalla finestra, non dalla larghezza della colonna, e la larghezza
   la ricava il rapporto. Misurato su 800px di altezza utile. */
.equipe{--ph:clamp(200px,40svh,380px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(1.4rem,3.5vw,2.6rem);margin-top:clamp(1.1rem,2vw,1.8rem)}
/* la scheda è larga quanto la sua foto: se no è la didascalia a decidere la
   larghezza, e a 1024 le due schede andavano a capo raddoppiando l'altezza */
.tete{flex:0 0 auto;width:calc(var(--ph) * .75)}
.tete{margin:0}
.tete__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left}
.tete__ph{display:block;position:relative;overflow:hidden;aspect-ratio:3/4;height:var(--ph);width:auto;margin-inline:auto;
  border:3px solid var(--jaune);border-radius:1.2rem;
  transform:rotate(var(--rot,-1.6deg));filter:drop-shadow(10px 11px 0 rgba(245,185,43,.22))}
/* Due fotografie sovrapposte, non un PNG appoggiato sopra: nella foto di
   sopra la persona porta DAVVERO la maschera, con la stessa luce e la stessa
   ombra. Al passaggio, al tocco o col Tab le due si incrociano. Idea di Gian:
   così la maschera sta sulla testa invece di volare via. */
.tete__vrai,.tete__masque{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.tete__masque{z-index:2;transition:opacity .32s var(--ease-out)}
.tete.is-nu .tete__masque{opacity:0}
@media (hover:hover) and (pointer:fine){
  .tete:hover .tete__masque,
  .tete__btn:focus-visible .tete__masque{opacity:0}
}
.tete__nom{margin:.8rem 0 0;font:400 1.3rem/1 'Lilita One';text-transform:uppercase;letter-spacing:-.01em}
.tete__role{margin:.35rem 0 0;font-size:.94rem;opacity:.82}
/* L'invito a cliccare sta SULLA foto: la riga sotto la card non si vedeva,
   e sul telefono niente diceva che la testa si scopre. Sparisce appena si
   scopre, quindi e anche il ritorno di stato. */
.tete__indice{position:absolute;z-index:3;left:50%;bottom:.8rem;translate:-50% 0;
  display:inline-flex;align-items:center;gap:.38rem;
  background:var(--jaune);color:var(--noir);font:700 .75rem/1 'Archivo';
  text-transform:uppercase;letter-spacing:.12em;padding:.55rem .85rem;
  transform:rotate(-2.5deg);box-shadow:4px 4px 0 var(--noir);white-space:nowrap;
  transition:opacity .32s var(--ease-out)}
/* freccia disegnata, non un carattere: la freccia unicode non esiste in Archivo
   e cadrebbe su un altro font. Punta in su, verso la testa. */
.tete__indice svg{width:.95em;height:.95em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tete.is-nu .tete__indice{opacity:0}
@media (hover:hover) and (pointer:fine){
  .tete:hover .tete__indice,
  .tete__btn:focus-visible .tete__indice{opacity:0}
}
.tete__aide{margin:.5rem 0 0;font:600 .74rem/1.4 'Archivo';letter-spacing:.14em;
  text-transform:uppercase;opacity:.5}
@media (prefers-reduced-motion:reduce){
  .tete__masque,.tete__indice{transition:opacity .01ms}
}

#pourquoi{padding-block:clamp(1.6rem,2.8vw,2.8rem)}
/* Due righe, e la piu lunga e « Pourquoi tu vas aimer » : il titolo si dimensiona
   su quella. Il <br> nel markup tiene il taglio a tutte le larghezze. */
#pourquoi h2{font-size:clamp(1.8rem,3.3vw,2.85rem)}

/* Sezione « Pourquoi » : un ritratto solo, quindi la colonna delle foto si
   stringe. Con la griglia dell'equipe (.85fr 1.15fr) restava mezza colonna vuota. */
.pourquoi__rang{grid-template-columns:1.15fr .85fr}
@media (max-width:900px){.pourquoi__rang{grid-template-columns:1fr}}
/* Stacco grande sotto il titolo, piccolo sopra la citazione: l'intro
   appartiene alla citazione, non al titolo. */
.pourquoi__intro{margin:1.2rem 0 0;font-size:.94rem;opacity:.82}
.pourquoi__mot{margin:1.1rem 0 0;padding-left:1.1rem;border-left:3px solid var(--jaune)}
.pourquoi__mot p{margin:0}
/* Piu specifico della riga sopra, altrimenti e battuto e non ha effetto. */
.pourquoi__mot .pourquoi__cqfd{margin:.9rem 0 0;font:400 1.5rem/1 'Lilita One';
  text-transform:uppercase;letter-spacing:.04em;color:var(--jaune)}
.pourquoi__sign{margin:1rem 0 0;font-size:.94rem;opacity:.82}
@media (max-width:620px){
  /* sul telefono si scorre comunque: le foto tornano grandi */
  .equipe{--ph:clamp(240px,46svh,380px)}
}

/* Il titolo sta accanto alle foto, non sopra: così la sezione usa la larghezza
   invece dell'altezza e i nomi restano nella stessa schermata delle facce. */
.equipe__rang{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.equipe__rang .equipe{margin-top:0;justify-content:center}
@media (max-width:900px){
  .equipe__rang{grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2rem)}
  .equipe__rang .equipe{justify-content:center}
}
/* Sulla pagina dedicata le schede possono respirare: non c'è il titolo accanto
   e non serve che tutto stia in una schermata. */
.equipe--grand{--ph:clamp(260px,52svh,460px)}

/* Le quattro occasioni sulla home: solo le parole, nel carattere del nome
   della maison. Le descrizioni sotto le spegnevano e allungavano la sezione;
   qui servono a dire in un colpo d'occhio per cosa si privatizza.
   ⚠️ Niente puntino separatore: su due righe finiva a inizio riga e leggeva
   come un errore. Lo spazio basta. */
.mots{display:flex;flex-wrap:wrap;align-items:baseline;list-style:none;margin:2.4rem 0 0;padding:0;
  gap:.4rem clamp(1.4rem,3.6vw,3rem)}
.mots li{font:400 clamp(1.5rem,2.8vw,2.4rem)/1.05 'Lilita One',Impact,sans-serif;
  text-transform:uppercase;letter-spacing:-.01em}

/* La riga « à compléter » su fondo giallo era corail su giallo, 1,42:1.
   Diventa una pastiglia: nero su corail, 7,1:1, e si vede ancora meglio
   che è un buco da riempire prima di andare online. */
.sec--jaune .todo{display:inline-block;background:var(--corail);color:var(--noir);
  padding:.55rem .85rem;font-weight:700}

/* La firma dell'agenzia in fondo: il nome diventa il logo, che è quello che
   fanno tutte le agenzie e che Google non ha mai trattato come un problema
   finché l'ancora è il marchio. Discreto di suo, pieno al passaggio. */
.foot__sign{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.foot__ds{display:inline-flex;align-items:center;text-decoration:none}
.foot__ds img{height:19px;width:auto;display:block;opacity:.72;
  transition:opacity .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .foot__ds:hover img{opacity:1} }
.foot__ds:focus-visible img{opacity:1}

/* Instagram e Facebook come icone e non come parole, e la nota con la stella:
   meccanismo preso dal sito del Clos de l'Abbaye, riportato nella grammatica
   di Canard. Regola per tutti i siti. */
.foot__soc{display:flex;gap:.7rem;margin-bottom:1.1rem}
.foot__soc a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:var(--creme);opacity:.78;text-decoration:none;
  border:2px solid rgba(251,243,226,.28);
  transition:opacity .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out)}
.foot__soc svg{width:20px;height:20px;display:block}
@media (hover:hover) and (pointer:fine){
  .foot__soc a:hover{opacity:1;color:var(--jaune);border-color:var(--jaune)}
}
.foot__soc a:focus-visible{opacity:1;color:var(--jaune);border-color:var(--jaune)}
.foot__note{font:400 1.15rem/1 'Lilita One',Impact,sans-serif}
.foot__star{color:var(--jaune)}

/* ⚠️ Niente bordo sulla banda inclinata.
   Il bordo era giallo: sopra si vedeva come una linea sul nero, sotto era
   giallo su giallo e spariva. La banda perdeva un lato e si leggeva come un
   cuneo invece che come un nastro, ed è il motivo per cui « i nastrini vengono
   sempre male ». La skill lo scrive: il bordo è l'accento della banda stessa,
   o niente. Qui è niente, perché il fondo della banda è già diverso da
   entrambi i vicini e non serve altro a staccarla. Visto da Gian il 27/08. */

/* La banda crema: quando un vicino è il giallo e l'altro è scuro, nessun
   colore scuro funziona (nero e pétrole distano 37 su un canale e a occhio
   la banda sparisce dentro la sezione). La crema si stacca da tutti e tre:
   233 dal nero, 233 dal pétrole, 183 dal giallo. Ed è la stessa grammatica
   dell'etichetta `.sticker`, cioè un nastro di carta bianca sulla pagina. */
.band--creme{background:var(--creme);color:var(--noir)}

/* ══════════════════════════════════════════════════════════════════════
   BANDEAU PHOTO — l'ouverture de la page privatisation, 27/08/2026
   La page s'ouvrait sur un bloc pétrole et du texte : la salle pleine
   arrive maintenant AVANT les mots, sous la nav et au-dessus du titre.
   C'est la variante LISIBLE de `.arc` : là-bas la photo est une matière
   sous un voile (opacité .34) et le sujet est le texte sur l'arc ; ici
   la photo est le sujet, donc ni voile ni texte par-dessus.
   ══════════════════════════════════════════════════════════════════════ */
.bandeau{position:relative;overflow:hidden;background:var(--petrole-900);
  height:clamp(300px,52vh,560px)}
.bandeau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* 22% et pas le centre : mesuré sur quatre cadrages rendus côte à côte à
   1440px. Passé 28%, le bord haut coupe le mot CANARD du mur peint et la
   suspension. Le bas coupe les gens à la taille, ce que fait un bandeau. */

/* ⚠️ Pas de fondu en bas. Un dégradé qui dissout la photo dans la section
   suivante n'existe nulle part sur ce site : ici tout est en aplats francs,
   ombres pleines décalées, étiquettes de papier de travers, bande inclinée
   posée sur la couture. Le fondu était un geste emprunté à un autre langage
   et il se voyait. Refusé par Gian le 27/08 : « perché devi fare questo
   alone che non c'è in nessuna parte del sito ». La photo se termine net,
   comme un aplat. */

/* L'arrivée : la photo se pose, elle ne bouge pas.
   Le `.up` du site translate de 18px ; ici la photo remplit exactement sa
   boîte, donc une translation découvrirait un liseré sous la nav. Et un
   `scale` serait un geste que le site n'a nulle part. Il reste l'opacité,
   qui est l'autre moitié du `.up` de partout ailleurs. */
.js .bandeau.up{opacity:1;transform:none}
.js .bandeau.up img{opacity:0;transition:opacity .55s var(--ease-out)}
.js .bandeau.up.is-in img{opacity:1}

/* ⚠️ Une règle plus bas dans le fichier bat le bloc `reduce` d'en haut :
   la remise à zéro de la photo se réécrit ici, sinon un visiteur en
   mouvement réduit resterait devant une bande vide. */
@media (prefers-reduced-motion:reduce){
  .js .bandeau.up img{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════════
   LE WIDGET DE RÉSERVATION — 27/08/2026
   Repris de l'implémentation de référence, `le-clos-de-labbaye/Website/
   Output/home-2026-08-20/reserver.html`, construite le 27/08. La règle de
   Gian du même jour : la mécanique, l'ordre et les libellés ne changent
   pas d'un client à l'autre ; seuls changent les couleurs, les créneaux,
   les jours de fermeture, le seuil de groupe, le préavis et le téléphone.
   Trois questions d'abord (couverts, date, heure), les coordonnées après.
   ⚠️ Un seul écart de peau, déclaré : les cases du calendrier sont carrées
   et pas rondes. Chez Canard rien n'a de rayon, tout est en aplats francs ;
   un cercle serait le seul de tout le site.
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️ La carte est en pétrole CLAIR sur la page en pétrole foncé.
   La page ne se coupe plus en deux blocs de couleur : coupée, elle se
   lisait comme finie au numéro de téléphone et le widget passait pour
   autre chose. Le widget doit donc se détacher sans trancher, et c'est
   la nuance plus claire plus le filet jaune qui le font, pas un fond
   qui change de famille. */
.wdg{background:var(--petrole);border:2px solid var(--jaune);
  padding:clamp(1.1rem,2.4vw,1.8rem);max-width:640px;margin:0 auto;text-align:left}
.wdg__tete{text-align:center;padding:.4rem .2rem 1.2rem;border-bottom:2px solid rgba(245,185,43,.3)}
.wdg__nom{font:700 .78rem/1.3 'Archivo';letter-spacing:.18em;text-transform:uppercase;
  color:var(--jaune);margin:0 0 .6rem}
.wdg__sous{margin:0;font-size:.95rem;line-height:1.6;color:rgba(251,243,226,.82)}
.wdg__sous b{font-weight:700;color:var(--creme)}
.wdg__avis{display:flex;gap:.75rem;align-items:flex-start;
  border:2px solid rgba(245,185,43,.5);padding:.8rem .95rem;margin:1.1rem 0 .3rem}
.wdg__avis svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--jaune);fill:none;stroke-width:1.6}
/* Riquadro d'avviso: era crema al 90% a 14,7px. A piena opacita e 15,7px
   si stacca dal fondo petrolio invece di sembrare una nota di servizio. */
.wdg__avis p{margin:0;font-size:.98rem;line-height:1.55;color:var(--creme)}

/* les trois rangs, un seul ouvert à la fois */
.rang{border-bottom:2px solid rgba(245,185,43,.3)}
.rang__tete{width:100%;display:flex;align-items:center;gap:.85rem;min-height:56px;
  background:none;border:0;padding:.6rem .2rem;cursor:pointer;color:var(--creme);
  font:400 1.02rem/1.3 'Archivo';text-align:left}
.rang__tete:focus-visible{outline:3px solid var(--jaune);outline-offset:-3px}
.rang__ic{width:20px;height:20px;flex:none;stroke:var(--jaune);fill:none;stroke-width:1.6}
.rang__val{flex:1}
.rang__val em{font-style:normal;color:rgba(251,243,226,.55)}
.rang__chev{width:13px;height:9px;flex:none;stroke:var(--jaune);fill:none;stroke-width:1.8;
  transition:transform .22s var(--ease-out)}
.rang.est-ouvert .rang__chev{transform:rotate(180deg)}
.rang__panneau{display:none;padding:0 .2rem 1.2rem}
.rang.est-ouvert .rang__panneau{display:block}
.rang__groupe{font:700 .75rem/1 'Archivo';letter-spacing:.2em;text-transform:uppercase;
  color:var(--jaune);margin:.9rem 0 .6rem}

/* les jetons : même peau que les champs, allumés ils prennent le jaune du bouton */
.jetons{display:flex;flex-wrap:wrap;gap:.5rem}
.jeton{min-width:54px;min-height:44px;padding:.65rem .9rem;cursor:pointer;border-radius:0;
  background:transparent;color:var(--creme);border:2px solid rgba(251,243,226,.42);
  font:400 .95rem/1.2 'Archivo';
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.jeton small{display:block;font-size:.74rem;color:rgba(251,243,226,.62);margin-top:2px}
.jeton[aria-pressed="true"]{background:var(--jaune);color:var(--noir);border-color:var(--jaune)}
.jeton[aria-pressed="true"] small{color:rgba(18,18,18,.7)}
.jeton:disabled{opacity:.4;cursor:not-allowed}
.jeton:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.jeton__ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;display:block;margin:0 auto}
@media (hover:hover) and (pointer:fine){
  .jeton:not(:disabled):not([aria-pressed="true"]):hover{border-color:var(--jaune)}
}
.jetons--heures{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
@media (max-width:400px){.jetons--heures{grid-template-columns:repeat(3,1fr)}}
.wdg__autre{margin-top:.8rem;display:none}
.wdg__autre.est-visible{display:block}

/* le calendrier : un mois entier, lundi en premier */
.cal__tete{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.cal__mois{flex:1;text-align:center;margin:0;font:700 .8rem/1 'Archivo';
  letter-spacing:.16em;text-transform:uppercase;color:var(--jaune)}
.cal__nav{width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:none;border:2px solid rgba(245,185,43,.5);border-radius:0;transition:border-color .18s ease}
.cal__nav svg{width:9px;height:15px;stroke:var(--jaune);fill:none;stroke-width:1.9}
.cal__nav[disabled]{opacity:.32;cursor:not-allowed}
.cal__nav:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.cal__nav:not([disabled]):hover{border-color:var(--jaune)}}
.cal__jours{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.cal__jours span{text-align:center;font:700 .62rem/1 'Archivo';letter-spacing:.1em;
  text-transform:uppercase;color:rgba(251,243,226,.6)}
.cal__grille{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
/* ⚠️ 44px de haut, mesuré : à 320px la grille du mois donnait des cases
   de 40px et la cible tombait sous le minimum tactile. La largeur, elle,
   reste contrainte par les sept colonnes du mois (~30px à 320px) : aucun
   calendrier mensuel ne tient 44px de large sur un écran de 320, et la
   sortie de secours est la ligne de quatre jetons au-dessus, qui elle
   fait bien 44px. Déclaré plutôt que masqué. */
.cal__c{aspect-ratio:auto;min-height:44px;display:grid;place-items:center;padding:0;border-radius:0;
  background:none;border:2px solid transparent;color:var(--creme);
  font:400 .95rem/1 'Archivo';cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.cal__c[data-libre="1"]{border-color:rgba(251,243,226,.42)}
.cal__c[aria-pressed="true"]{background:var(--jaune);color:var(--noir);border-color:var(--jaune)}
.cal__c:disabled{opacity:.3;cursor:not-allowed}
.cal__c:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .cal__c[data-libre="1"]:not([aria-pressed="true"]):hover{border-color:var(--jaune)}
}

/* le pied de l'étape 1 */
.wdg__pied{padding-top:1.2rem}
.wdg__go{width:100%;cursor:pointer;background:var(--jaune);color:var(--noir);
  font:700 .92rem/1 'Archivo';letter-spacing:.07em;text-transform:uppercase;
  border:2px solid var(--jaune);border-radius:0;padding:1rem 1.4rem;
  transition:background .2s ease,color .2s ease}
.wdg__go[disabled]{background:transparent;color:rgba(251,243,226,.6);
  border-color:rgba(251,243,226,.32);cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .wdg__go:not([disabled]):hover{background:transparent;color:var(--jaune)}
}
.wdg__tel{display:block;text-align:center;margin-top:.9rem;font-size:.92rem;
  color:rgba(251,243,226,.78);text-decoration:none}
.wdg__tel b{color:var(--jaune)}

/* étape 2 : le récapitulatif, puis les coordonnées */
.wdg__recap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;
  border:2px solid rgba(245,185,43,.5);padding:.85rem 1rem;margin-bottom:1.4rem}
.wdg__recap span{display:flex;align-items:center;gap:.55rem;font-size:.98rem}
.wdg__recap svg{width:17px;height:17px;flex:none;stroke:var(--jaune);fill:none;stroke-width:1.6}
.wdg__mod{margin-left:auto;background:none;border:0;cursor:pointer;padding:.4rem .1rem;
  font:700 .7rem/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;color:var(--jaune);
  text-decoration:underline;text-underline-offset:4px}
.wdg__mod:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.wdg__retour{background:none;border:0;cursor:pointer;padding:.4rem .1rem;margin-bottom:.4rem;
  font:700 .7rem/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;color:rgba(251,243,226,.72)}
.wdg__cases{grid-column:1/-1;display:grid;gap:.6rem;margin:.4rem 0 1.2rem}
.wdg__cases label{display:flex;gap:.6rem;align-items:flex-start;font:400 .88rem/1.5 'Archivo';
  letter-spacing:0;text-transform:none;color:rgba(251,243,226,.86);cursor:pointer}
.wdg__cases input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--jaune)}
.wdg__cases a{color:var(--jaune)}

/* ⚠️ Le piège à robots sort de l'écran ET de la tabulation, jamais en
   `display:none` : un robot lit le CSS aussi. */
.piege{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.wdg__fin{text-align:center;padding:1rem .2rem .4rem}
.wdg__fin:focus{outline:none}
.wdg__fin svg{width:40px;height:40px;stroke:var(--jaune);fill:none;stroke-width:1.7;margin:0 auto 1rem;display:block}
.wdg__fin p{margin:0 0 .6rem;font-size:.98rem;color:rgba(251,243,226,.86)}
.wdg__fin p b{font-weight:700;color:var(--creme)}
.wdg__fin a{color:var(--jaune)}
/* l'ecran de fin des formulaires groupes et contact : meme forme que celui du
   widget de reservation. Il vit HORS du <form> : cache dedans, il partirait
   avec lui et le visiteur ne verrait que le formulaire disparaitre. */
.form__fin{display:none;text-align:center;padding:1.6rem .2rem .4rem}
.form__fin svg{width:40px;height:40px;stroke:var(--jaune);fill:none;stroke-width:1.7;margin:0 auto 1rem;display:block}
.form__fin b{display:block;font:700 .82rem/1.5 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--jaune);margin:0 0 .7rem}
.form__fin span{display:block;font-size:.98rem;color:rgba(251,243,226,.86)}
.form__fin a{color:var(--jaune)}
.wdg__groupe{text-align:center;padding:.6rem .2rem}
.wdg__groupe p{font-size:.98rem;color:rgba(251,243,226,.86);margin-bottom:1.4rem}

/* ⚠️ Sans JavaScript le widget ne peut pas exister : les trois rangs
   resteraient vides et le bouton Continuer ne mènerait nulle part. On les
   retire et on laisse ce qui marche toujours, le téléphone. Règle de
   l'implémentation de référence, jamais trois rangs morts à l'écran. */
.wdg__nojs{display:none}
html:not(.js) .wdg__nojs{display:block;font-size:.98rem;color:rgba(251,243,226,.86);
  text-align:center;margin:1.2rem 0 .4rem}
html:not(.js) #wdg-1 .rang,
html:not(.js) .wdg__avis,
html:not(.js) .wdg__go{display:none}

/* le téléphone vient APRÈS le widget, et il ne lui crie pas dessus :
   c'est la deuxième voie, pas la première. */
.resa__apres{max-width:640px;margin:2.6rem auto 0;padding-top:2.2rem;text-align:center;
  border-top:2px solid rgba(251,243,226,.18)}
.resa__lab{font:700 .72rem/1 'Archivo';letter-spacing:.2em;text-transform:uppercase;
  color:var(--jaune);margin-bottom:.7rem}
.resa__tel--petit{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-block:0 .8rem}

/* ⚠️ Sur la page réserver, la section va du titre jusqu'au téléphone.
   Le filigrane est ancré en bas de sa section : allongée, elle le faisait
   tomber en travers des horaires. Il remonte derrière le titre, là où la
   place existe. Les autres pages gardent l'ancrage bas. */
.sec--resa .mark{inset:1.5rem 0 auto}


/* ── les pages légales ───────────────────────────────────────────────
   Fond crème, colonne étroite, aucune décoration : on les lit, on ne
   les regarde pas. Reprend la forme validée sur Le Clos de l'Abbaye. */
.legal{background:var(--creme);color:var(--noir);padding:calc(var(--nav-h,76px) + clamp(46px,6vw,86px)) 0 clamp(60px,8vw,110px)}
.legal__wrap{max-width:780px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.legal h1{font-size:clamp(1.9rem,4.4vw,3rem);color:var(--noir);margin:0 0 10px}
.legal__maj{font-size:13.5px;color:#5c5348;margin:0 0 clamp(34px,4vw,52px)}
.legal h2{font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--noir);margin:clamp(36px,4vw,52px) 0 14px;
  border-top:1px solid rgba(18,18,18,.14);padding-top:clamp(28px,3vw,38px)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font:700 14px/1.4 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a5a12;margin:26px 0 8px}
.legal p,.legal li{font-size:15.5px;line-height:1.75;color:#33302b}
.legal ul{margin:0 0 18px;padding-left:20px}
.legal li{margin-bottom:7px}
.legal a{color:#8a5a12}
.legal dl{margin:0}
.legal dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#5c5348;margin-top:18px}
.legal dd{margin:3px 0 0;font-size:15.5px;color:#33302b}

/* ── le bandeau cookies ────────────────────────────────────────────────
   Il ne s'affiche qu'au premier passage : ensuite le choix vit dans
   localStorage. Refuser est un bouton plein, comme Accepter : la CNIL
   demande que le refus soit aussi simple que l'acceptation. */
#cookies{position:fixed;left:50%;bottom:clamp(12px,3vw,26px);transform:translateX(-50%);
  z-index:90;width:min(780px,calc(100% - 2*clamp(12px,3vw,26px)));
  display:flex;align-items:center;gap:clamp(14px,2.6vw,28px);
  background:var(--petrole-900);color:var(--creme);border:2px solid var(--noir);
  padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,26px);
  filter:drop-shadow(8px 8px 0 var(--noir));
  animation:ck-monte .38s cubic-bezier(.22,.61,.36,1) both}
#cookies[hidden]{display:none}
@keyframes ck-monte{from{opacity:0;transform:translateX(-50%) translateY(14px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){#cookies{animation:none}}
.ck-txt{flex:1;min-width:0}
.ck-t{font-family:'Lilita One',Impact,sans-serif;text-transform:uppercase;
  font-size:1.05rem;line-height:1;letter-spacing:.02em;color:var(--jaune);margin:0 0 .45rem}
.ck-d{font-size:.86rem;line-height:1.5;margin:0;color:rgba(251,243,226,.82)}
.ck-d a{color:var(--jaune)}
.ck-act{display:flex;gap:10px;flex-shrink:0}
.ck-btn{font-size:.76rem;padding:.85rem 1.35rem;filter:drop-shadow(4px 4px 0 var(--noir))}
.ck-btn.btn--creme{filter:drop-shadow(4px 4px 0 var(--noir))}
@media (max-width:720px){
  #cookies{flex-direction:column;align-items:stretch;gap:14px}
  .ck-act{width:100%}
  .ck-btn{flex:1;text-align:center}}

/* tabella dei traccianti nella politique de confidentialite */
.legal-tab{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.94rem}
.legal-tab th,.legal-tab td{text-align:left;vertical-align:top;padding:.6rem .7rem;border:1px solid rgba(18,18,18,.18)}
.legal-tab th{font-family:'Archivo';font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.legal-tab code{font-size:.88em}
@media (max-width:620px){.legal-tab,.legal-tab tbody,.legal-tab tr,.legal-tab td,.legal-tab th{display:block}
  .legal-tab tr{margin-bottom:.9rem}.legal-tab th{border-bottom:0}}