/* =========================================================
   Auberge du Jura — Saint-Ursanne
   Palette relevée sur les façades de la vieille ville :
   volets lavande, crépi à la chaux, eaux du Doubs, 2CV rouge.
   ========================================================= */

:root{
  /* Couleur */
  --ardoise:      #211E2A;   /* volets dans l'ombre — fond sombre dominant */
  --ardoise-doux: #2F2A3D;
  --lavande:      #6A5F8D;   /* volets de l'Auberge — accent structurel (contraste AA sur chaux et brume) */
  --lavande-pale: #A79CC4;
  --brume:        #EBE7F1;   /* fond de page, lavande délavée */
  --chaux:        #FCFAF6;   /* crépi — surfaces claires */
  --doubs:        #2C6B67;   /* la rivière — état « ouvert », détails */
  --braise:       #C0402D;   /* la 2CV rouge — réservé aux actions */
  --craie:        #6C6579;   /* texte secondaire */
  --trait:        rgba(111,100,147,.24);
  --trait-clair:  rgba(252,250,246,.20);

  /* Type */
  --display: "Gloock", "Times New Roman", serif;
  --texte:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Mesure */
  --marge: clamp(1.25rem, 5vw, 5rem);
  --large: 1240px;
  --etroit: 720px;
  --rythme: clamp(4.5rem, 9vw, 8.5rem);

  --ombre-plat: 0 26px 44px -22px rgba(33,30,42,.55);
  --ombre-carte: 0 1px 2px rgba(33,30,42,.05), 0 12px 30px -18px rgba(33,30,42,.35);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--brume);
  color:var(--ardoise);
  font-family:var(--texte);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

:focus-visible{
  outline:3px solid var(--braise);
  outline-offset:3px;
  border-radius:2px;
}

.saut-contenu{
  position:absolute; left:-9999px; top:0;
  background:var(--ardoise); color:var(--chaux);
  padding:.9rem 1.4rem; z-index:200; border-radius:0 0 6px 0;
}
.saut-contenu:focus{ left:0; }

.vh{
  position:absolute!important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Éléments de mise en page ---------- */
.enveloppe{
  width:100%; max-width:var(--large);
  margin-inline:auto;
  padding-inline:var(--marge);
}

.bloc{ padding-block:var(--rythme); }

/* Signature : les lamelles de volet.
   Reprend le claustra des volets lavande de la façade. */
.volets{
  height:14px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--lavande) 0 3px,
    transparent 3px 11px
  );
  opacity:.55;
  border-radius:1px;
}
.volets--court{ width:78px; }
.volets--sombre{ background-image:repeating-linear-gradient(90deg,var(--lavande-pale) 0 3px,transparent 3px 11px); opacity:.5; }

/* Surtitre */
.surtitre{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lavande);
  margin:0 0 .9rem;
  display:block;
}
.surtitre--clair{ color:var(--lavande-pale); }

.titre-bloc{
  font-size:clamp(2.1rem,1.4rem + 3vw,3.9rem);
  max-width:16ch;
}

.chapeau{
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  color:var(--craie);
  max-width:56ch;
  margin-top:1.4rem;
}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--texte);
  font-size:.94rem; font-weight:600;
  letter-spacing:.01em;
  padding:.92rem 1.5rem;
  border-radius:999px;
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background-color .25s, color .25s, border-color .25s;
}
.bouton:hover{ transform:translateY(-2px); }
.bouton svg{ width:17px; height:17px; flex:none; }

.bouton--principal{ background:var(--braise); color:#fff; }
.bouton--principal:hover{ background:#A9351F; }

.bouton--fantome{ border-color:var(--trait); color:var(--ardoise); background:transparent; }
.bouton--fantome:hover{ border-color:var(--lavande); background:rgba(111,100,147,.08); }

.bouton--clair{ border-color:var(--trait-clair); color:var(--chaux); background:transparent; }
.bouton--clair:hover{ background:rgba(252,250,246,.12); border-color:rgba(252,250,246,.5); }

/* ---------- En-tête ---------- */
.entete{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .35s, box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.entete__interieur{
  display:flex; align-items:center; gap:1.5rem;
  min-height:74px;
}
.entete.est-collee{
  background:rgba(252,250,246,.94);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--trait);
}

.marque{
  display:flex; flex-direction:column; line-height:1;
  text-decoration:none; color:var(--chaux);
  margin-right:auto;
  transition:color .35s;
}
.marque__nom{ font-family:var(--display); font-size:1.32rem; letter-spacing:-.01em; }
.marque__lieu{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  opacity:.75; margin-top:.34rem; font-weight:500;
}
.entete.est-collee .marque{ color:var(--ardoise); }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__lien{
  text-decoration:none; color:var(--chaux);
  font-size:.9rem; font-weight:500;
  padding:.3rem 0;
  position:relative;
  transition:color .35s, opacity .2s;
}
.nav__lien::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav__lien:hover::after{ transform:scaleX(1); }
.entete.est-collee .nav__lien{ color:var(--ardoise); }

.langues{
  display:flex; align-items:center; gap:.1rem;
  font-size:.78rem; font-weight:600; letter-spacing:.08em;
}
.langues a{
  text-decoration:none; color:var(--chaux); opacity:.6;
  padding:.35rem .5rem; border-radius:4px;
  transition:opacity .25s, color .35s;
}
.langues a:hover{ opacity:1; }
.langues a[aria-current="true"]{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.langues__sep{ opacity:.35; color:var(--chaux); transition:color .35s; }
.entete.est-collee .langues a,
.entete.est-collee .langues__sep{ color:var(--ardoise); }

.entete .bouton--reserver{ padding:.7rem 1.15rem; font-size:.86rem; }

/* ---------- Héros ---------- */
.heros{
  position:relative;
  min-height:min(94svh,860px);
  display:flex; align-items:flex-end;
  isolation:isolate;
  background:var(--ardoise);
}
.heros__image{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:62% 58%;
}
/* Sur mobile l'image est très rognée : on cale sur la terrasse et la porte. */
@media (max-width:700px){
  .heros__image{ object-position:70% 64%; }
  .heros{ min-height:min(88svh,760px); }
}
.heros::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    /* voile bas : assise du texte */
    linear-gradient(to top, rgba(18,16,24,.94) 0%, rgba(18,16,24,.80) 26%, rgba(18,16,24,.42) 56%, rgba(18,16,24,0) 82%),
    /* voile haut : lisibilité de la navigation sur le ciel */
    linear-gradient(to bottom, rgba(18,16,24,.62) 0%, rgba(18,16,24,.18) 16%, rgba(18,16,24,0) 30%),
    /* léger assombrissement d'ensemble, côté texte */
    linear-gradient(to right, rgba(18,16,24,.34) 0%, rgba(18,16,24,.10) 55%, rgba(18,16,24,0) 100%);
}
.heros__contenu{
  padding-block:clamp(5.5rem,13vh,8.5rem) clamp(3rem,7vh,5rem);
  color:var(--chaux);
  max-width:42rem;
}
.heros__titre{
  font-size:clamp(2.35rem,1.3rem + 5.1vw,4.9rem);
  line-height:1;
  margin:1.4rem 0 0;
  text-shadow:0 1px 2px rgba(18,16,24,.5), 0 4px 34px rgba(18,16,24,.5);
}
.heros__titre em{
  font-style:normal;
  display:block;
  color:#CFC6E6;
}
.heros__phrase{
  font-size:clamp(1.02rem,.98rem + .35vw,1.24rem);
  color:rgba(252,250,246,.92);
  max-width:38ch;
  margin-top:1.5rem;
  text-shadow:0 1px 16px rgba(18,16,24,.6);
}
.heros__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }

.etat{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .9rem .45rem .75rem;
  border-radius:999px;
  background:rgba(252,250,246,.13);
  border:1px solid rgba(252,250,246,.24);
  backdrop-filter:blur(6px);
  color:var(--chaux);
}
.etat__point{
  width:8px; height:8px; border-radius:50%;
  background:var(--lavande-pale); flex:none;
}
.etat[data-ouvert="oui"] .etat__point{
  background:#4FD1A5; box-shadow:0 0 0 4px rgba(79,209,165,.22);
}
.etat[data-ouvert="non"] .etat__point{ background:#E0855F; }

/* ---------- Bandeau « bon à savoir » ---------- */
.bandeau{ background:var(--ardoise); color:var(--chaux); }
.bandeau__grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;
  background:rgba(252,250,246,.14);
  border-block:1px solid rgba(252,250,246,.14);
}
.fait{ background:var(--ardoise); padding:2rem clamp(1.1rem,2.5vw,2rem); }
.fait__titre{
  font-family:var(--texte);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lavande-pale); margin:0 0 .7rem; font-weight:600;
}
.fait__texte{ font-size:.95rem; line-height:1.5; color:rgba(252,250,246,.9); }
.fait__texte strong{ font-weight:600; color:#fff; }
.fait--alerte .fait__titre{ color:#E8A487; }

/* ---------- Deux colonnes ---------- */
.duo{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
@media (min-width:900px){
  .duo{ grid-template-columns:1fr 1fr; }
  .duo--texte-droite .duo__visuel{ order:-1; }
}

.duo__texte p{ color:var(--craie); }
.duo__texte .titre-bloc{ margin-bottom:1.6rem; }

/* Visuel composé : portrait + paysage décalé */
.pile{ position:relative; }
.pile__principal{
  border-radius:3px;
  box-shadow:var(--ombre-carte);
  width:100%;
}
.pile__secondaire{
  position:absolute;
  right:-6%; bottom:-11%;
  width:52%;
  border-radius:3px;
  border:7px solid var(--brume);
  box-shadow:0 22px 40px -24px rgba(33,30,42,.6);
}
@media (max-width:640px){
  .pile__secondaire{ position:static; width:70%; margin:-14% 0 0 auto; border-width:6px; }
}

/* Photo verticale : on la recadre pour qu'elle n'étire pas la section */
.photo-portrait{
  width:100%;
  max-height:min(64vh,620px);
  object-fit:cover;
  object-position:center 42%;
  border-radius:3px;
  box-shadow:var(--ombre-carte);
}

/* ---------- La carte ---------- */
.carte-section{ background:var(--chaux); }

.assiettes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (min-width:820px){ .assiettes{ grid-template-columns:repeat(4,1fr); } }

.assiette{
  text-align:center;
  display:flex; flex-direction:column;
}
/* Les quatre photos n'ont pas le même format : on leur donne une hauteur
   commune et on les pose sur une même ligne, comme des assiettes au passe. */
.assiette__image{
  width:100%;
  height:clamp(128px,17vw,196px);
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(var(--ombre-plat));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.assiette figcaption{ margin-top:auto; }
.assiette:hover .assiette__image{ transform:translateY(-9px) scale(1.03); }
.assiette__nom{
  font-family:var(--display);
  font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);
  margin-top:1.1rem;
}
.assiette__note{
  font-size:.8rem; color:var(--craie); margin-top:.35rem;
}
.menus{
  display:grid; grid-template-columns:1fr;
  align-items:start;
  gap:clamp(2rem,5vw,3.5rem);
  margin-top:clamp(4rem,8vw,6.5rem);
  padding-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--trait);
}
@media (min-width:960px){ .menus{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }

.liste-carte{ margin:0; }
.liste-carte + .liste-carte{ margin-top:2.6rem; }
.liste-carte__titre{
  font-family:var(--display);
  font-size:1.4rem;
  margin:0 0 .5rem;
}
.liste-carte__intro{ font-size:.88rem; color:var(--craie); margin:0 0 1.1rem; }
.liste-carte ul{ list-style:none; margin:0; padding:0; }
.liste-carte li{
  padding:.62rem 0 .62rem 1.5rem;
  border-bottom:1px solid var(--trait);
  position:relative;
  font-size:1rem;
}
.liste-carte li::before{
  content:""; position:absolute; left:0; top:1.28em;
  width:7px; height:1.5px; background:var(--lavande);
}
.liste-carte li:last-child{ border-bottom:none; }
.liste-carte li em{ font-style:normal; color:var(--craie); font-size:.86rem; }

/* Encart menu du jour */
.encart{
  background:var(--ardoise);
  color:var(--chaux);
  padding:clamp(2rem,4vw,2.8rem);
  border-radius:4px;
  position:sticky; top:100px;
  align-self:start;
}
.encart__prix{
  font-family:var(--display);
  font-size:clamp(3rem,2rem + 4vw,4.4rem);
  line-height:1;
  color:#fff;
  display:block;
  margin:.4rem 0 .2rem;
}
.encart__prix small{ font-size:.28em; letter-spacing:.06em; color:var(--lavande-pale); margin-right:.35em; vertical-align:.9em; }
.encart__quoi{ color:rgba(252,250,246,.82); font-size:.95rem; }
.encart hr{
  border:0; border-top:1px solid rgba(252,250,246,.18);
  margin:1.7rem 0;
}
.encart__ligne{ display:flex; gap:1rem; align-items:baseline; margin-bottom:.9rem; }
.encart__ligne:last-of-type{ margin-bottom:0; }
.encart__jour{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lavande-pale); flex:none; width:6.2rem; font-weight:600;
}
.encart__detail{ font-size:.93rem; color:rgba(252,250,246,.9); }
@media (max-width:959px){ .encart{ position:static; } }

/* ---------- Groupes ---------- */
.groupes{ background:var(--ardoise); color:var(--chaux); }
.groupes .chapeau{ color:rgba(252,250,246,.78); }
.groupes .titre-bloc{ color:var(--chaux); }

.salles{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(252,250,246,.16);
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border:1px solid rgba(252,250,246,.16);
  border-radius:4px; overflow:hidden;
}
@media (min-width:760px){ .salles{ grid-template-columns:1fr 1fr; } }
.salle{ background:var(--ardoise); padding:clamp(1.8rem,4vw,2.6rem); }
.salle__nombre{
  font-family:var(--display);
  font-size:clamp(2.6rem,2rem + 2.4vw,3.6rem);
  line-height:1; color:var(--lavande-pale);
}
.salle__nombre span{ font-size:.3em; letter-spacing:.14em; text-transform:uppercase; color:rgba(252,250,246,.6); margin-left:.6em; }
.salle__nom{ font-family:var(--display); font-size:1.25rem; margin:.9rem 0 .5rem; }
.salle__texte{ font-size:.94rem; color:rgba(252,250,246,.78); }

/* ---------- Village ---------- */
.village{ background:var(--brume); }

/* Respiration pleine largeur : la cité vue depuis le Doubs. */
.panorama{
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  width:100vw;
  margin-left:calc(50% - 50vw);
  position:relative;
}
.panorama img{
  width:100%;
  height:clamp(260px,42vw,520px);
  object-fit:cover;
  object-position:center 62%;
  display:block;
}
.panorama figcaption{
  position:absolute; right:0; bottom:0;
  max-width:min(30rem,80vw);
  padding:.7rem 1.1rem;
  background:rgba(33,30,42,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:rgba(252,250,246,.9);
  font-size:.78rem; line-height:1.5;
}
@media (max-width:700px){
  .panorama img{ height:clamp(300px,74vw,420px); object-position:center 58%; }
  .panorama figcaption{ position:static; max-width:none; background:var(--ardoise); }
}

.village__grille{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:820px){ .village__grille{ grid-template-columns:1fr 1fr; } }

.village__liste{ list-style:none; padding:0; margin:0; }
.village__liste li{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.85rem 0; border-bottom:1px solid var(--trait);
  font-size:.97rem; color:var(--craie);
}
.village__liste li:first-child{ border-top:1px solid var(--trait); }
.village__liste b{ color:var(--ardoise); font-weight:600; }
.village__puce{
  flex:none; width:22px; height:22px; margin-top:.16rem;
  border-radius:50%; background:rgba(44,107,103,.14);
  display:grid; place-items:center; color:var(--doubs);
}
.village__puce svg{ width:12px; height:12px; }

/* ---------- Avis ---------- */
.avis{ background:var(--brume); }

.avis__corps{
  display:grid; grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:900px){
  .avis__corps{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); }
}

/* Bloc note */
.note{ align-self:start; }
.note__chiffre{
  font-family:var(--display);
  font-size:clamp(4.2rem,3rem + 5vw,6.6rem);
  line-height:.82; display:block;
  letter-spacing:-.03em;
}
.note__chiffre span{
  font-family:var(--texte);
  font-size:.19em; font-weight:500; letter-spacing:.1em;
  color:var(--craie); margin-left:.35em; vertical-align:.9em;
}

/* Étoiles : jauge réelle, pas cinq icônes approximatives */
.etoiles{ position:relative; display:inline-block; margin:1.2rem 0 1rem; line-height:0; }
.etoiles__rangee{ display:flex; gap:.28rem; width:max-content; }
.etoiles__rangee svg{ width:21px; height:21px; flex:none; }
.etoiles__fond svg{ fill:none; stroke:var(--lavande); stroke-width:1.5; opacity:.45; }
.etoiles__jauge{
  position:absolute; top:0; left:0; bottom:0;
  overflow:hidden;
}
.etoiles__jauge svg{ fill:var(--lavande); stroke:none; }

.note__compte{ font-size:.95rem; color:var(--craie); margin:0 0 1.6rem; }
.note__compte a{ color:var(--ardoise); text-underline-offset:3px; text-decoration-color:var(--trait); }
.note__compte a:hover{ text-decoration-color:var(--lavande); }
.note__contexte{
  font-size:.88rem; color:var(--craie);
  margin:1.7rem 0 0; padding-top:1.4rem;
  border-top:1px solid var(--trait);
  max-width:34ch;
}

/* Citations : des filets, comme les listes de la carte */
.citations{ margin:0; }
.citation{ margin:0; }
.citation blockquote{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.24rem,1.1rem + .7vw,1.7rem);
  line-height:1.34;
  text-wrap:pretty;
}
.citation + .citation{
  margin-top:clamp(1.7rem,3.2vw,2.4rem);
  padding-top:clamp(1.7rem,3.2vw,2.4rem);
  border-top:1px solid var(--trait);
}
.citations__source{
  margin:clamp(2rem,4vw,2.8rem) 0 0;
  padding-top:1.3rem;
  border-top:1px solid var(--trait);
  font-size:.8rem; letter-spacing:.06em;
  color:var(--craie);
}

/* ---------- Plat du jour (publié depuis l'administration) ---------- */
.plat-jour{
  background:var(--ardoise);
  color:var(--chaux);
  border-top:1px solid rgba(252,250,246,.14);
}
.plat-jour__interieur{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.6rem clamp(1.2rem,3vw,2.4rem);
  padding-block:clamp(1.5rem,3.5vw,2.2rem);
}
.plat-jour__eyebrow{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lavande-pale); flex:none;
}
.plat-jour__texte{
  font-family:var(--display);
  font-size:clamp(1.3rem,1.1rem + 1vw,1.95rem);
  line-height:1.25; margin:0;
  flex:1 1 16rem;
}
.plat-jour__prix{
  font-family:var(--display);
  font-size:clamp(1.3rem,1.1rem + 1vw,1.95rem);
  color:var(--lavande-pale); flex:none;
}
.plat-jour__prix small{ font-size:.5em; letter-spacing:.05em; margin-right:.3em; }

/* ---------- Réserver ---------- */
.reserver{ background:var(--ardoise); color:var(--chaux); }
.reserver .titre-bloc{ color:var(--chaux); }
.reserver .chapeau{ color:rgba(252,250,246,.76); }

.reserver__grille{
  display:grid; grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  margin-top:clamp(2.5rem,5vw,3.8rem);
}
@media (min-width:900px){
  .reserver__grille{ grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr); }
}

/* Colonne téléphone */
.appel{ align-self:start; }
.appel__titre{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lavande-pale); margin:0 0 .7rem;
}
.appel__numero{
  font-family:var(--display);
  font-size:clamp(1.85rem,1.4rem + 1.8vw,2.5rem);
  line-height:1.1;
  text-decoration:none; color:var(--chaux);
  display:inline-block;
  border-bottom:2px solid rgba(252,250,246,.3);
  padding-bottom:.15em;
  transition:border-color .25s;
}
.appel__numero:hover{ border-bottom-color:var(--braise); }
.appel__note{ font-size:.92rem; color:rgba(252,250,246,.7); margin:1.2rem 0 0; }
.appel__separateur{
  margin:1.8rem 0 0; padding-top:1.6rem;
  border-top:1px solid rgba(252,250,246,.18);
  font-size:.9rem; color:rgba(252,250,246,.7);
}

/* Formulaire : des filets, pas des boîtes */
.formulaire{ margin:0; }
.formulaire__grille{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.6rem,3vw,2.1rem) clamp(1.6rem,3vw,2.6rem);
}
@media (min-width:620px){
  .formulaire__grille{ grid-template-columns:1fr 1fr; }
  .formulaire__grille .champ--large{ grid-column:1 / -1; }
}

.champ{ position:relative; }
.champ label{
  display:block;
  font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--lavande-pale); margin-bottom:.5rem;
}
.champ label .facultatif{
  text-transform:none; letter-spacing:.01em; font-weight:400;
  color:rgba(252,250,246,.5); margin-left:.35em;
}

.formulaire input,
.formulaire select,
.formulaire textarea{
  width:100%; box-sizing:border-box;
  font-family:var(--texte); font-size:1.02rem;
  color:var(--chaux);
  background:transparent;
  border:0; border-bottom:1.5px solid rgba(252,250,246,.28);
  border-radius:0;
  padding:.5rem 0 .65rem;
  line-height:1.5;
  -webkit-appearance:none; appearance:none;
  transition:border-color .25s;
}
.formulaire textarea{ resize:vertical; min-height:4.6rem; }
.formulaire input::placeholder,
.formulaire textarea::placeholder{ color:rgba(252,250,246,.38); }

.formulaire input:hover,
.formulaire select:hover,
.formulaire textarea:hover{ border-bottom-color:rgba(252,250,246,.5); }

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus{ outline:none; border-bottom-color:var(--lavande-pale); }
.formulaire input:focus-visible,
.formulaire select:focus-visible,
.formulaire textarea:focus-visible{
  outline:2px solid var(--lavande-pale); outline-offset:4px;
  border-bottom-color:var(--lavande-pale);
}

/* Champs natifs sur fond sombre */
.formulaire input[type="date"]{ color-scheme:dark; }
.formulaire select option{ background:var(--ardoise); color:var(--chaux); }
.formulaire select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79CC4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .1rem center; background-size:17px;
  padding-right:2rem; cursor:pointer;
}
.formulaire input[type="number"]{ -moz-appearance:textfield; }
.formulaire input[type="number"]::-webkit-outer-spin-button,
.formulaire input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* État d'erreur */
.formulaire [aria-invalid="true"]{ border-bottom-color:#E8785F; }
.champ__erreur{
  margin:.5rem 0 0; font-size:.82rem; color:#F0A18B;
}

.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.turnstile{ margin-top:1.8rem; min-height:0; }
.turnstile:empty{ margin-top:0; }

.formulaire__pied{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.6rem;
  margin-top:clamp(2.4rem,4vw,3.2rem); padding-top:1.8rem;
  border-top:1px solid rgba(252,250,246,.18);
}
.formulaire__note{
  font-size:.82rem; color:rgba(252,250,246,.6);
  margin:0; flex:1 1 15rem; line-height:1.5;
}
.formulaire__reponse{
  margin:1.6rem 0 0; padding:1.05rem 1.25rem; border-radius:4px;
  font-size:.95rem; line-height:1.55;
}
.formulaire__reponse[data-type="ok"]{
  background:rgba(79,209,165,.14); color:#A6EBD3;
  border-left:3px solid #4FD1A5;
}
.formulaire__reponse[data-type="erreur"]{
  background:rgba(232,120,95,.14); color:#F5BAA9;
  border-left:3px solid #E8785F;
}

/* ---------- Découvrir Saint-Ursanne ---------- */
.decouvrir{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--trait);
}
.decouvrir__titre{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lavande); margin:0 0 1.2rem;
}
.decouvrir__liste{
  list-style:none; padding:0; margin:0 0 1.6rem;
  display:grid; grid-template-columns:1fr; gap:.7rem 2rem;
}
@media (min-width:620px){ .decouvrir__liste{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .decouvrir__liste{ grid-template-columns:repeat(4,1fr); } }
.decouvrir__liste li{
  font-size:.95rem; color:var(--craie); line-height:1.5;
  padding-left:1.4rem; position:relative;
}
.decouvrir__liste li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:7px; height:1.5px; background:var(--lavande);
}
.decouvrir__liste b{ color:var(--ardoise); font-weight:600; display:block; }

/* ---------- Comment venir ---------- */
.acces{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--trait);
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.6rem,3vw,2.6rem);
}
@media (min-width:700px){ .acces{ grid-template-columns:repeat(3,1fr); } }

.acces__mode{ margin:0; }
.acces__icone{
  width:30px; height:30px; margin-bottom:.9rem;
  color:var(--lavande); display:block;
}
.acces__icone svg{ width:100%; height:100%; }
.acces__titre{
  font-family:var(--display); font-size:1.16rem;
  margin:0 0 .5rem;
}
.acces__texte{ font-size:.92rem; color:var(--craie); line-height:1.6; margin:0; }
.acces__texte a{
  color:var(--ardoise);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--trait);
}
.acces__texte a:hover{ text-decoration-color:var(--lavande); }

/* ---------- Annonce : fermeture exceptionnelle ou événement ---------- */
.annonce{
  /* L'en-tête est fixe : on dégage la hauteur nécessaire pour ne pas passer dessous. */
  padding-top:calc(74px + clamp(.9rem,2vw,1.4rem));
  padding-bottom:clamp(.9rem,2vw,1.4rem);
  background:var(--ardoise);
  color:var(--chaux);
  border-bottom:1px solid rgba(252,250,246,.16);
}
.annonce__interieur{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem clamp(1rem,2.5vw,1.8rem);
}
.annonce__etiquette{
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  flex:none;
  padding:.3rem .7rem; border-radius:3px;
}
.annonce__texte{
  margin:0; flex:1 1 18rem;
  font-family:var(--display);
  font-size:clamp(1.05rem,.98rem + .5vw,1.4rem);
  line-height:1.35;
}
.annonce__lien{
  flex:none; font-size:.88rem; font-weight:600;
  color:var(--chaux); text-underline-offset:4px;
}
.annonce__lien:hover{ text-decoration-color:var(--lavande-pale); }

/* Fermeture : c'est l'information la plus coûteuse à manquer, elle se voit. */
.annonce[data-type="fermeture"]{ background:#4A1F17; }
.annonce[data-type="fermeture"] .annonce__etiquette{
  background:var(--braise); color:#fff;
}
/* Événement : présent, mais qui ne crie pas. */
.annonce[data-type="evenement"] .annonce__etiquette{
  background:rgba(167,156,196,.22); color:var(--lavande-pale);
}

/* ---------- Régimes et allergies ---------- */
.regimes{
  margin-top:2.6rem; padding-top:1.7rem;
  border-top:1px solid var(--trait);
}
.regimes__titre{ font-family:var(--display); font-size:1.4rem; margin:0 0 .6rem; }
.regimes__texte{ font-size:.95rem; color:var(--craie); margin:0 0 1rem; line-height:1.65; }
.regimes__jetons{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.regimes__jetons li{
  font-size:.8rem; font-weight:500;
  padding:.4rem .8rem; border-radius:999px;
  border:1px solid var(--trait); color:var(--ardoise);
}

/* ---------- Nous trouver ---------- */
.lieu{ background:var(--chaux); }
.lieu__grille{
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:900px){ .lieu__grille{ grid-template-columns:1fr 1.15fr; } }

.horaires{ width:100%; border-collapse:collapse; margin-top:.4rem; }
.horaires caption{
  text-align:left;
  font-family:var(--display); font-size:1.3rem;
  margin-bottom:.9rem; color:var(--ardoise);
}
.horaires th,.horaires td{
  text-align:left; padding:.62rem 0;
  border-bottom:1px solid var(--trait);
  font-size:.96rem; font-weight:400;
}
.horaires th{ font-weight:500; width:9rem; }
.horaires td{ text-align:right; font-variant-numeric:tabular-nums; color:var(--craie); }
.horaires tr[data-aujourdhui="oui"] th,
.horaires tr[data-aujourdhui="oui"] td{ color:var(--ardoise); font-weight:600; }
.horaires tr[data-ferme="oui"] td{ color:var(--lavande); }

.coord{ margin-top:2.6rem; }
.coord__titre{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lavande); font-weight:600; margin:0 0 .7rem;
}
.coord__adresse{ font-style:normal; font-size:1.05rem; line-height:1.7; }
.coord__adresse a{ color:var(--ardoise); text-decoration-color:var(--trait); text-underline-offset:3px; }
.coord__adresse a:hover{ text-decoration-color:var(--lavande); }
.coord__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }

/* Plan Google, affiché directement (chargement différé par le navigateur) */
.plan{
  position:relative; border-radius:4px; overflow:hidden;
  background:var(--brume);
  border:1px solid var(--trait);
  aspect-ratio:4/3;
  min-height:300px;
}
.plan iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (min-width:900px){ .plan{ aspect-ratio:auto; height:100%; min-height:clamp(420px,52vh,560px); } }

/* ---------- Pied ---------- */
.pied{
  background:var(--ardoise); color:rgba(252,250,246,.72);
  padding-block:clamp(3rem,6vw,4.5rem) 7rem;
  font-size:.9rem;
}
@media (min-width:760px){ .pied{ padding-bottom:clamp(3rem,6vw,4.5rem); } }
.pied__haut{
  display:flex; flex-wrap:wrap; gap:2rem 3rem;
  justify-content:space-between; align-items:flex-start;
}
.pied__marque{ font-family:var(--display); font-size:1.6rem; color:var(--chaux); line-height:1.2; }
.pied__marque span{
  display:block; font-family:var(--texte); font-size:.64rem;
  letter-spacing:.22em; text-transform:uppercase; margin-top:.5rem; color:var(--lavande-pale);
}
.pied__liens{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.pied__liens a{ color:rgba(252,250,246,.8); text-decoration:none; }
.pied__liens a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.pied__bas{
  margin-top:3rem; padding-top:1.6rem;
  border-top:1px solid rgba(252,250,246,.16);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  font-size:.78rem; color:rgba(252,250,246,.5);
}

/* ---------- Barre d'action mobile ---------- */
.barre-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:rgba(252,250,246,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--trait);
  padding-bottom:env(safe-area-inset-bottom);
}
.barre-mobile a{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.72rem .4rem .78rem;
  text-decoration:none; color:var(--ardoise);
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.barre-mobile a svg{ width:19px; height:19px; }
.barre-mobile a:first-child{ color:var(--braise); }
@media (min-width:760px){ .barre-mobile{ display:none; } }

/* ---------- Navigation mobile ---------- */
.bascule-nav{
  display:none;
  background:none; border:0; padding:.5rem; cursor:pointer;
  color:var(--chaux); transition:color .35s;
}
.entete.est-collee .bascule-nav{ color:var(--ardoise); }
.bascule-nav svg{ width:24px; height:24px; }

@media (max-width:899px){
  .bascule-nav{ display:block; margin-left:auto; }
  .entete .bouton--reserver{ display:none; }
  .nav{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--chaux);
    padding:.5rem var(--marge) 1.6rem;
    border-bottom:1px solid var(--trait);
    box-shadow:0 20px 40px -24px rgba(33,30,42,.5);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s;
  }
  .nav[data-ouverte="oui"]{ transform:none; opacity:1; pointer-events:auto; }
  .nav__lien{ color:var(--ardoise); padding:.95rem 0; border-bottom:1px solid var(--trait); font-size:1.02rem; }
  .nav__lien::after{ display:none; }
  .entete.est-collee .nav__lien{ color:var(--ardoise); }
  .langues{ margin-top:1.1rem; }
  .langues a,.langues__sep{ color:var(--ardoise); }
}

/* ---------- Apparition au défilement ---------- */
.apparait{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.apparait.est-visible{ opacity:1; transform:none; }
.apparait[data-retard="1"]{ transition-delay:.09s; }
.apparait[data-retard="2"]{ transition-delay:.18s; }
.apparait[data-retard="3"]{ transition-delay:.27s; }

@media (prefers-reduced-motion:reduce){
  .apparait{ opacity:1; transform:none; transition:none; }
  .bouton:hover,.assiette:hover .assiette__image{ transform:none; }
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* Séquence d'ouverture du héros */
@media (prefers-reduced-motion:no-preference){
  .heros__contenu > *{
    opacity:0; transform:translateY(24px);
    animation:leve .95s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .heros__contenu > *:nth-child(1){ animation-delay:.12s; }
  .heros__contenu > *:nth-child(2){ animation-delay:.24s; }
  .heros__contenu > *:nth-child(3){ animation-delay:.36s; }
  .heros__contenu > *:nth-child(4){ animation-delay:.48s; }
  @keyframes leve{ to{ opacity:1; transform:none; } }
}

@media print{
  .entete,.barre-mobile,.plan,.heros__actions{ display:none; }
  body{ background:#fff; }
}