@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   CHEZEL BARBER — version « France, années 70 »
   Papier crème, ocre, rouille et vert avocat. Aucune couleur
   saturée : tout est ramené vers les terres et le bois.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Fraunces';src:url('../fonts/fraunces.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Rubik';src:url('../fonts/rubik.woff2') format('woff2');font-weight:400 600;font-display:swap}

:root{
  /* papiers */
  --papier:#EFE4CE;
  --papier-2:#E5D6B8;
  --papier-3:#DCC9A4;
  /* encres */
  --chocolat:#33231A;
  --brun:#5C3D28;
  --brun-clair:#7C5A3F;
  /* accents terreux */
  --rouille:#A85426;
  --rouille-f:#8E4520;
  --moutarde:#C89632;
  --moutarde-f:#A87A1E;
  --olive:#6B7239;
  --olive-f:#59602E;
  --brique:#8C3B2C;

  --display:'Fraunces',Georgia,serif;
  --corps:'Rubik','Helvetica Neue',Arial,sans-serif;

  --page:1180px;
  --marge:clamp(1.1rem,4vw,3.5rem);
  --r:22px;      /* les années 70 arrondissent tout */
  --r-s:12px;
}

/* réglage des axes de Fraunces : empattements adoucis et dessin « wonky »,
   c'est ce qui donne le grain Windsor / Cooper des enseignes de l'époque */
.titre,.hero__titre,.marque__txt b,.forfait__n,.compa__nom,.groupe__t,
.horaires__t,.pied__sign,.logo-arc,.logo-bas{
  font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--chocolat);
  font:400 clamp(1rem,.97rem + .18vw,1.075rem)/1.68 var(--corps);
  overflow-x:hidden;
  position:relative;
}
/* grain de papier */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--moutarde);color:var(--chocolat)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--chocolat);color:var(--papier);padding:.7rem 1.1rem;font:500 .9rem var(--corps)}
.skip:focus{left:.6rem;top:.6rem}
:focus-visible{outline:2px solid var(--rouille);outline-offset:3px}

/* ─── éléments de langage ─────────────────────────────────── */
.eyebrow{
  margin:0 0 1rem;
  font:500 .74rem/1.4 var(--corps);
  letter-spacing:.26em;text-transform:uppercase;color:var(--rouille-f);
  display:flex;align-items:center;gap:.8rem;
}
.eyebrow::after{content:"";flex:1;max-width:5rem;height:5px;border-top:1px solid var(--brun-clair);border-bottom:1px solid var(--brun-clair)}

.titre{
  margin:0 0 1.1rem;
  font:700 clamp(2rem,1.35rem + 2.6vw,3.3rem)/1.06 var(--display);
  letter-spacing:-.005em;text-wrap:balance;color:var(--chocolat);
}
.rouge{color:var(--rouille)}

/* le bandeau rayé : les bandes seventies, en terres */
.pole{
  height:14px;
  background:linear-gradient(180deg,
    var(--brique) 0 25%,var(--rouille) 25% 50%,var(--moutarde) 50% 75%,var(--olive) 75% 100%);
}
.pole--fin{height:8px}

/* ─── boutons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.7rem;border:0;border-radius:999px;
  font:500 .92rem/1 var(--corps);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--wa{background:var(--olive-f);color:var(--papier);box-shadow:0 3px 0 #3F4520}
.btn--wa:hover{background:var(--olive)}
.btn--or{background:var(--moutarde);color:var(--chocolat);box-shadow:0 3px 0 var(--moutarde-f)}
.btn--or:hover{background:#D8A73F}
.btn--fant{background:transparent;color:var(--brun);border:1.5px solid var(--brun-clair)}
.btn--fant:hover{background:var(--papier-3);color:var(--chocolat)}
.btn--sm{padding:.6rem 1.15rem;font-size:.8rem}
.btn--bloc{width:100%}
.ico-wa{width:1.15em;height:1.15em;fill:currentColor;flex:none}

/* ─── en-tête ─────────────────────────────────────────────── */
.entete{
  position:sticky;top:0;z-index:40;
  background:var(--papier);
  border-bottom:3px double var(--brun);
  transition:box-shadow .3s ease;
}
.entete--pose{box-shadow:0 8px 24px -18px rgba(51,35,26,.8)}
.entete__in{
  max-width:var(--page);margin:0 auto;padding:.55rem var(--marge);
  display:flex;align-items:center;gap:1.4rem;
}
.marque{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex:none}
.marque__logo{width:48px;height:48px;flex:none}
.marque__txt{display:flex;flex-direction:column;line-height:1}
.marque__txt b{font:700 1.12rem/1 var(--display);color:var(--chocolat)}
.marque__txt i{font:500 .64rem/1.7 var(--corps);letter-spacing:.4em;text-transform:uppercase;color:var(--rouille-f);font-style:normal}

/* le badge de l'enseigne, tel qu'il est peint sur la façade */
.logo-arc{font:700 29px var(--display);fill:#2A1C14}
.logo-mini{font:500 12px var(--corps);fill:#2A1C14;letter-spacing:.08em;text-anchor:middle}
.logo-bas{font:700 20px var(--display);fill:#F0E7D5;letter-spacing:.04em}

.nav{display:flex;gap:1.5rem;margin-left:auto}
.nav a{
  font:500 .8rem/1 var(--corps);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--brun);padding:.5rem 0;position:relative;
  transition:color .2s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:3px;
  background:var(--moutarde);transition:right .25s ease;border-radius:2px;
}
.nav a:hover{color:var(--rouille-f)}
.nav a:hover::after{right:0}

.entete__actions{display:flex;align-items:center;gap:.85rem;margin-left:auto}
.nav+.entete__actions{margin-left:0}

.statut{display:inline-flex;align-items:center;gap:.45rem;font:500 .74rem/1 var(--corps);letter-spacing:.1em;text-transform:uppercase;color:var(--brun-clair)}
.statut__pt{width:8px;height:8px;border-radius:50%;background:var(--brun-clair);flex:none}
.statut--ouvert .statut__pt{background:var(--olive)}
.statut--ouvert{color:var(--olive-f)}

.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{width:22px;height:2.5px;background:var(--chocolat);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ─── hero ────────────────────────────────────────────────── */
.hero{position:relative;background:var(--papier);overflow:hidden}
/* soleil rayonnant, très discret, motif emblématique de l'époque */
.hero::before{
  content:"";position:absolute;left:50%;bottom:0;width:135vw;height:135vw;
  transform:translateX(-50%);pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 100%,
    rgba(168,84,38,.16) 0deg 4.5deg,transparent 4.5deg 9deg);
  mask-image:radial-gradient(closest-side,#000 20%,transparent 68%);
}
.hero__grille{
  position:relative;z-index:2;
  max-width:var(--page);margin:0 auto;padding:clamp(2.6rem,6.5vw,5rem) var(--marge) clamp(2.6rem,6vw,4.5rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.2rem);align-items:center;
}
.hero__titre{
  margin:0 0 1.4rem;
  font:800 clamp(2.15rem,1.1rem + 4.1vw,3.95rem)/1.02 var(--display);
  letter-spacing:-.015em;display:flex;flex-direction:column;color:var(--chocolat);
}
.hero__titre span{display:block}
.hero__chapo{margin:0 0 1.9rem;max-width:34em;color:var(--brun);font-size:1.05rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.4rem}
.hero__faits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1.2rem;
  margin:0;padding-top:1.6rem;border-top:3px double var(--brun-clair);
}
.hero__faits dt{font:500 .7rem/1.5 var(--corps);letter-spacing:.2em;text-transform:uppercase;color:var(--rouille-f)}
.hero__faits dd{margin:.15rem 0 0;font:500 .98rem/1.4 var(--corps);color:var(--chocolat);text-wrap:balance}

.hero__img{margin:0;position:relative}
.hero__img img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 32%;
  border-radius:999px 999px var(--r) var(--r);  /* l'arche, motif emblématique de la décennie */
  border:6px solid var(--papier);
  box-shadow:0 0 0 2px var(--brun),0 22px 44px -26px rgba(51,35,26,.6);
  filter:sepia(.22) saturate(.92) contrast(1.02);
}
.hero__img figcaption{
  margin-top:1rem;font:500 .78rem/1.5 var(--corps);letter-spacing:.13em;
  text-transform:uppercase;color:var(--brun-clair);
}

/* ─── sections ────────────────────────────────────────────── */
.sect{padding:clamp(3.2rem,7.5vw,5.8rem) var(--marge);position:relative;z-index:2}
.sect--bois{background:var(--papier-2)}
.sect--reserve{background:var(--papier-3)}

/* la carte des tarifs : un aplat chocolat, comme une carte imprimée du salon */
.sect--carte{background:var(--chocolat);color:var(--papier)}
.sect--carte .titre{color:var(--papier)}
.sect--carte .sect__intro{color:#CBBBA2}
.sect--carte .eyebrow{color:var(--moutarde)}
.sect--carte .eyebrow::after{border-color:var(--brun-clair)}
.sect--carte .groupe__t{color:var(--moutarde);border-bottom-color:var(--brun)}
.sect--carte .groupe__t span{color:#9C8A73}
.sect--carte .ligne{border-bottom-color:rgba(203,187,162,.28)}
.sect--carte .ligne__nom{color:var(--papier)}
.sect--carte .ligne__nom i{color:#A8957D}
.sect--carte .ligne__prix{background:transparent;color:var(--papier);border-color:#7A6349}
.sect--carte .ligne:hover{color:var(--moutarde)}
.sect--carte .ligne:hover .ligne__prix{background:var(--moutarde);color:var(--chocolat);border-color:var(--moutarde)}
.sect__tete{max-width:var(--page);margin:0 auto clamp(2.2rem,4vw,3.2rem)}
.sect__intro{margin:0;max-width:46ch;color:var(--brun)}

/* ─── comparateur avant / après ───────────────────────────── */
.compa-zone{
  max-width:var(--page);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
}
.compa-zone>*,.reserve>*,.acces>*{min-width:0}
.compa__cadre{
  position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:1;background:var(--papier-3);
  border:6px solid var(--papier);
  box-shadow:0 0 0 2px var(--brun),0 20px 40px -26px rgba(51,35,26,.55);
  touch-action:pan-y;cursor:ew-resize;user-select:none;
}
.compa__cadre img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none;
  filter:sepia(.2) saturate(.93) contrast(1.02);
}
.compa__masque{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.compa__poignee{position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);cursor:ew-resize}
.compa__ligne{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:var(--papier)}
.compa__bouton{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--moutarde);color:var(--chocolat);
  border:3px solid var(--papier);
  display:grid;place-items:center;
  box-shadow:0 5px 16px rgba(51,35,26,.45);
}
.compa__bouton svg{width:22px;height:22px}
.compa__poignee:focus-visible .compa__bouton{outline:3px solid var(--rouille);outline-offset:3px}
.compa__aide{
  margin:1rem 0 0;text-align:center;
  font:500 .74rem/1.5 var(--corps);letter-spacing:.16em;text-transform:uppercase;color:var(--brun-clair);
}
.compa__nom{margin:0 0 .7rem;font:700 clamp(1.35rem,1.05rem + 1vw,1.8rem)/1.2 var(--display);color:var(--chocolat)}
.compa__desc{margin:0 0 1.9rem;color:var(--brun);max-width:40ch}
.compa__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.compa__liste button{
  width:100%;display:flex;align-items:center;gap:.9rem;
  background:var(--papier);border:1.5px solid var(--papier-3);border-radius:999px;
  padding:.7rem 1.1rem;color:var(--brun);cursor:pointer;text-align:left;
  font:400 .92rem/1.3 var(--corps);
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.compa__liste button:hover{border-color:var(--brun-clair);color:var(--chocolat)}
.compa__liste button[aria-selected="true"]{
  border-color:var(--rouille);color:var(--chocolat);background:#F6EEDD;
}
.compa__liste .num{
  font:500 .76rem/1 var(--corps);color:var(--papier);background:var(--rouille);
  border-radius:50%;width:1.6rem;height:1.6rem;display:grid;place-items:center;flex:none;
}

/* ─── carte des prestations ───────────────────────────────── */
.carte{
  max-width:var(--page);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:clamp(1.6rem,3.4vw,3rem);
}
.groupe__t{
  margin:0 0 1.1rem;padding-bottom:.7rem;
  border-bottom:3px double var(--brun-clair);
  font:700 1.35rem/1.2 var(--display);color:var(--rouille);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.groupe__t span{font:500 .68rem/1 var(--corps);letter-spacing:.18em;text-transform:uppercase;color:var(--brun-clair)}
.ligne{
  width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem;
  background:none;border:0;padding:.6rem 0;cursor:pointer;text-align:left;color:inherit;
  font-family:var(--corps);border-bottom:1px dotted var(--brun-clair);
  transition:color .18s ease;
}
.ligne:hover{color:var(--rouille-f)}
.ligne:hover .ligne__prix{background:var(--moutarde);border-color:var(--moutarde-f)}
.ligne__nom{font-size:.99rem;line-height:1.35;color:var(--chocolat)}
.ligne__nom i{display:block;font-style:normal;font:400 .76rem/1.5 var(--corps);letter-spacing:.1em;text-transform:uppercase;color:var(--brun-clair)}
.ligne__prix{
  font:500 .92rem/1 var(--corps);font-variant-numeric:tabular-nums;
  color:var(--chocolat);background:var(--papier);
  border:1.5px solid var(--brun-clair);border-radius:999px;padding:.4rem .75rem;
  transition:background-color .18s ease,border-color .18s ease;white-space:nowrap;
}

/* ─── forfaits ────────────────────────────────────────────── */
.forfaits{
  max-width:var(--page);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr));gap:1.2rem;
}
.forfait{
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.6rem 1.4rem 1.4rem;border-radius:var(--r);
  background:var(--papier);border:2px solid var(--brun);
  position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.forfait:hover{transform:translateY(-4px);box-shadow:0 14px 26px -20px rgba(51,35,26,.7)}
.forfait--phare{background:var(--moutarde);border-color:var(--chocolat)}
.forfait--phare .forfait__p{color:var(--chocolat)}
.forfait--phare .forfait__l li{color:#4A3512}
.forfait--phare .forfait__l li::before{background:var(--chocolat)}
.forfait__ruban{
  position:absolute;top:1rem;right:-2.4rem;transform:rotate(38deg);
  background:var(--brique);color:var(--papier);padding:.24rem 2.6rem;
  font:500 .64rem/1.5 var(--corps);letter-spacing:.18em;text-transform:uppercase;
}
.forfait__n{margin:0;font:700 1.5rem/1.1 var(--display);color:var(--chocolat)}
.forfait__p{
  margin:0;font:500 2rem/1 var(--corps);color:var(--rouille);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.5rem;
}
.forfait__p em{font:500 .72rem/1 var(--corps);letter-spacing:.16em;text-transform:uppercase;color:var(--brun-clair);font-style:normal}
.forfait__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.42rem;flex:1}
.forfait__l li{position:relative;padding-left:1.2rem;font-size:.9rem;color:var(--brun);line-height:1.45}
.forfait__l li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--rouille)}

/* ─── réservation ─────────────────────────────────────────── */
.reserve{
  max-width:var(--page);margin:0 auto;
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4.5vw,4rem);align-items:start;
}
.champ{margin-top:1.5rem}
.champ label,.champ__lbl{
  display:block;margin-bottom:.55rem;
  font:500 .72rem/1.4 var(--corps);letter-spacing:.18em;text-transform:uppercase;color:var(--rouille-f);
}
.champ .opt{color:var(--brun-clair);letter-spacing:.12em}
.champ select,.champ input{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-s);
  background:var(--papier);color:var(--chocolat);
  border:1.5px solid var(--brun-clair);
  font:400 1rem/1.3 var(--corps);
  transition:border-color .2s ease;
}
.champ select:hover,.champ input:hover{border-color:var(--rouille)}
.champ select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--rouille) 50%),linear-gradient(135deg,var(--rouille) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem;
}
.champ input::placeholder{color:var(--brun-clair)}

.jours{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
.jour{
  flex:none;min-width:4.3rem;padding:.6rem .55rem;border-radius:var(--r-s);cursor:pointer;
  background:var(--papier);border:1.5px solid var(--brun-clair);color:var(--brun);
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  font-family:var(--corps);transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.jour b{font:500 1.25rem/1 var(--corps);color:inherit;font-variant-numeric:tabular-nums}
.jour i{font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.jour:hover{border-color:var(--rouille);color:var(--chocolat)}
.jour[aria-checked="true"]{background:var(--rouille);border-color:var(--rouille-f);color:var(--papier)}
.jour--plein{opacity:.4}
.jour--plein b{text-decoration:line-through;text-decoration-thickness:1px}

.heures{display:flex;flex-wrap:wrap;gap:.45rem}
.heure{
  padding:.5rem .82rem;border-radius:999px;cursor:pointer;
  background:var(--papier);border:1.5px solid var(--brun-clair);color:var(--brun);
  font:400 .88rem/1 var(--corps);font-variant-numeric:tabular-nums;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.heure:hover{border-color:var(--rouille);color:var(--chocolat)}
.heure[aria-checked="true"]{background:var(--rouille);border-color:var(--rouille-f);color:var(--papier)}

/* aperçu du message */
.tel{
  border-radius:var(--r);overflow:hidden;border:2px solid var(--brun);
  background:var(--papier);box-shadow:0 18px 34px -26px rgba(51,35,26,.7);position:sticky;top:5.5rem;
}
.tel__barre{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--olive-f);border-bottom:2px solid var(--brun)}
.tel__ava{
  width:38px;height:38px;border-radius:50%;background:var(--moutarde);color:var(--chocolat);
  display:grid;place-items:center;font:700 .84rem/1 var(--display);flex:none;
}
.tel__id{display:flex;flex-direction:column;line-height:1.25}
.tel__id b{font:500 .95rem var(--corps);color:var(--papier)}
.tel__id i{font-style:normal;font-size:.74rem;color:#D6DFB4}
.tel__fil{
  padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;min-height:14rem;
  background:var(--papier-2);
}
.bulle{
  margin:0;padding:.75rem .95rem;border-radius:14px;max-width:88%;
  font-size:.93rem;line-height:1.55;white-space:pre-line;
}
.bulle--eux{background:var(--papier);color:var(--brun);border-top-left-radius:3px;align-self:flex-start;border:1px solid var(--papier-3)}
.bulle--moi{background:#DCE2C0;color:#39401C;border-top-right-radius:3px;align-self:flex-end;border:1px solid #C3CBA1}
.tel__pied{padding:1rem;border-top:2px solid var(--brun);background:var(--papier)}
.tel__note{margin:.8rem 0 0;font-size:.79rem;line-height:1.55;color:var(--brun-clair);text-align:center}
.tel__note a{color:var(--rouille-f);text-decoration:none;border-bottom:1px solid var(--rouille)}

/* ─── mosaïque & galerie ──────────────────────────────────── */
.mosaique{
  max-width:var(--page);margin:0 auto 1.1rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;
}
.mos{margin:0;position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--papier-3);border:4px solid var(--papier);box-shadow:0 0 0 1.5px var(--brun-clair)}
.mos img{width:100%;height:auto;object-fit:cover;aspect-ratio:1;filter:sepia(.2) saturate(.92);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.mos--haut{grid-row:span 2}
.mos--haut img{aspect-ratio:1/2.06}
.mos--large{grid-column:span 2}
.mos--large img{aspect-ratio:2/1;object-position:center 30%}
.mos:hover img{transform:scale(1.05)}
.mos figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .7rem;
  background:linear-gradient(transparent,rgba(51,35,26,.82));
  font:500 .72rem/1.4 var(--corps);letter-spacing:.18em;text-transform:uppercase;color:var(--papier);
}
.galerie{
  max-width:var(--page);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;
}
.galerie img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-s);
  border:4px solid var(--papier);box-shadow:0 0 0 1.5px var(--brun-clair);
  filter:sepia(.28) saturate(.85);transition:filter .4s ease,transform .5s ease;
}
.galerie img:hover{filter:sepia(.08) saturate(1);transform:scale(1.03)}

/* ─── accès & horaires ────────────────────────────────────── */
.acces{
  max-width:var(--page);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4.5vw,4rem);align-items:start;
}
.acces__liens{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.horaires{
  background:var(--papier-2);border:2px solid var(--brun);
  border-radius:var(--r);padding:1.6rem 1.7rem;
}
.horaires__t{margin:0 0 1rem;font:700 1.4rem/1.2 var(--display);color:var(--rouille)}
.horaires table{width:100%;border-collapse:collapse}
.horaires td{
  padding:.55rem 0;border-bottom:1px dotted var(--brun-clair);
  font:400 .95rem/1.4 var(--corps);color:var(--brun);
}
.horaires td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.horaires tr:last-child td{border-bottom:0}
.horaires tr.auj td{color:var(--chocolat);font-weight:500}
.horaires tr.auj td:first-child{position:relative;padding-left:1rem}
.horaires tr.auj td:first-child::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--rouille)}
.horaires__note{margin:1rem 0 0;font-size:.84rem;color:var(--brun-clair);line-height:1.55}

/* ─── pied de page ────────────────────────────────────────── */
.pied{background:var(--chocolat);color:var(--papier)}
.pied__in{max-width:var(--page);margin:0 auto;padding:2.8rem var(--marge) 5.5rem;text-align:center}
.pied__sign{margin:0 0 .6rem;font:700 clamp(1.15rem,1rem + .7vw,1.65rem)/1.3 var(--display);color:var(--papier)}
.pied__adr{margin:0 0 .4rem;color:#CBBBA2}
.pied__adr a,.pied__mini a{color:var(--moutarde);text-decoration:none;border-bottom:1px solid rgba(200,150,50,.5)}
.pied__mini{margin:0;font:500 .74rem/1.6 var(--corps);letter-spacing:.16em;text-transform:uppercase;color:#9C8A73}

/* ─── bouton flottant ─────────────────────────────────────── */
.flottant{
  position:fixed;right:1rem;bottom:1rem;z-index:45;
  display:none;align-items:center;gap:.5rem;
  padding:.85rem 1.3rem;border-radius:999px;
  background:var(--olive-f);color:var(--papier);text-decoration:none;
  font:500 .88rem/1 var(--corps);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 3px 0 #3F4520,0 10px 26px -10px rgba(51,35,26,.8);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.flottant--vu{opacity:1;transform:none;pointer-events:auto}

/* ─── apparitions au défilement ───────────────────────────── */
.rev{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rev.vu{opacity:1;transform:none}

/* ─── responsive ──────────────────────────────────────────── */
@media (max-width:1000px){
  .hero__grille{grid-template-columns:1fr;gap:2.4rem}
  .hero__img{order:-1;max-width:26rem}
  .hero__img img{aspect-ratio:1;object-position:center 28%;border-radius:999px 999px var(--r) var(--r)}
  .compa-zone,.reserve,.acces{grid-template-columns:1fr}
  .compa__cadre{max-width:30rem;margin-inline:auto}
  .tel{position:static}
  .mosaique{grid-template-columns:repeat(2,1fr)}
  .mos--haut{grid-row:span 1}
  .mos--haut img{aspect-ratio:1}
  .mos--large{grid-column:span 2}
  .galerie{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;padding:.5rem var(--marge) 1.1rem;
    background:var(--papier);border-bottom:3px double var(--brun);
    display:none;
  }
  .nav--ouvert{display:flex}
  .nav a{padding:.8rem 0;border-bottom:1px dotted var(--brun-clair);font-size:.92rem}
  .nav a::after{display:none}
  .burger{display:flex}
  .statut{display:none}
  .entete__in{gap:.7rem}
  .marque__txt b{font-size:1rem}
  .flottant{display:inline-flex}
  .pied__in{padding-bottom:6rem}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .compa__bouton{width:46px;height:46px}
}
@media (max-width:420px){
  .hero__cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rev{opacity:1;transform:none}
}