/* =========================================================
   Les Minis de l'Espoir — socle commun à toutes les pages

   Tout ce qu'une page du site partage avec les autres : les
   polices, la palette, la barrière de navigation et ses
   pancartes, le pied de page, les boutons, les titres, les
   apparitions au défilement, le rideau de transition et le
   curseur. Chaque page ajoute ensuite sa propre feuille dans
   un <style> en tête de document, préfixée par son nom.

   Les variables ci-dessous sont les seules couleurs du site :
   les pages y puisent, elles n'en inventent pas.
   ========================================================= */


/* ---------- Palette et réglages ---------- */

:root {
  --creme: #F6F1E2;
  --creme-clair: #FBF7EC;
  --sauge-clair: #E2EBD8;
  --sauge: #CBDCBC;
  --foret: #3B6B4A;
  --foret-sombre: #1E3A2A;
  --foret-nuit: #142A1E;
  --encre: #1E3A2A;
  --encre-80: rgba(30, 58, 42, .8);
  --encre-55: rgba(30, 58, 42, .55);
  --encre-30: rgba(30, 58, 42, .3);
  --encre-14: rgba(30, 58, 42, .14);
  --abricot: #E8A87C;
  --abricot-clair: #F7DCC4;
  --terre: #A44E2B;
  --ble: #F3D08A;
  --bois: #8E5C33;
  --bois-sombre: #5C3A20;
  --blanc: #FFFFFF;
  --creme-70: rgba(251, 247, 236, .7);

  --f-titre: 'Young Serif', Georgia, 'Times New Roman', serif;
  --f-texte: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --coquille: 1360px;
  --gouttiere: clamp(20px, 6vw, 92px);
  --barriere-h: 122px;

  --r-carte: 26px;
  --r-bloc: 36px;
  --r-capsule: 99px;

  --ombre-carte: 0 12px 30px rgba(30, 58, 42, .12);
  --ombre-haute: 0 30px 54px -12px rgba(30, 58, 42, .38);

  --sortie: cubic-bezier(.2, .72, .2, 1);
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
}


/* ---------- Polices auto-hébergées ----------

   Young Serif pour les titres (une seule graisse, pas d'italique :
   les <em> des titres sont penchés par le navigateur, c'est voulu),
   Work Sans pour le texte (fichier variable, graisses 400 à 700).
   Sous-ensemble latin : il couvre tout le français. */

@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/young-serif-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("polices/work-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url("polices/work-sans-italic-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ---------- Document ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barriere-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
input, select, textarea, button { font-family: var(--f-texte); }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
[hidden] { display: none !important; }
::selection { background: var(--foret); color: var(--creme-clair); }
:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }

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

.saut {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  padding: 12px 18px; border-radius: var(--r-capsule);
  background: var(--foret-sombre); color: var(--creme-clair);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transform: translateY(-200%);
}
.saut:focus { transform: none; }

/* Le grain de papier, posé sur tout le site. */
.grain {
  position: fixed; inset: 0; z-index: 950;
  pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3"/></filter><rect width="180" height="180" filter="url(%23n)"/></svg>');
}
/* Au téléphone, même grain à l'œil, mais sans mode de fusion : le
   calque fixe ne pèse plus sur chaque image du défilement. */
@media (hover: none), (pointer: coarse) { .grain { mix-blend-mode: normal; opacity: .07; } }


/* ---------- Mise en page ---------- */

.coquille {
  width: 100%;
  max-width: var(--coquille);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(64px, 9vh, 120px); }
.section--serree { padding-block: clamp(40px, 6vh, 72px); }

/* Un bloc arrondi, détaché des bords de l'écran, sur fond coloré. */
.bloc {
  margin-inline: clamp(10px, 2.5vw, 24px);
  border-radius: var(--r-bloc);
  padding-block: clamp(64px, 9vh, 110px);
}
.bloc--sauge { background: var(--sauge); }
.bloc--sauge-clair { background: var(--sauge-clair); }
.bloc--foret { background: var(--foret-sombre); color: var(--creme-clair); }
.bloc--creme { background: var(--creme-clair); }

.entete-section {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(36px, 6vh, 64px);
}


/* ---------- Typographie ---------- */

.titre-xl { font-size: clamp(40px, 7vw, 96px); line-height: .93; letter-spacing: -.035em; }
.titre-l  { font-size: clamp(36px, 5vw, 64px); line-height: .95; }
.titre-m  { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.02; }
.titre-s  { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.08; }

/* Le titre (h1) de chaque page intérieure : même taille partout, sur
   deux lignes au plus. Les pages n'y ajoutent rien de leur côté. */
.titre-page { font-size: clamp(28px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.titre-page em { font-style: italic; }

/* Pas de retour à la ligne bizarre : titres équilibrés, pas de mot
   seul en bout de paragraphe, jamais de mot coupé en deux. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
body { hyphens: manual; overflow-wrap: normal; word-break: normal; }

.titre-xl em, .titre-l em, .titre-m em { font-style: italic; }
.titre-xl em.terre, .titre-l em.terre { color: var(--terre); font-style: italic; }
.point-abricot { color: var(--abricot); }

.surtitre {
  display: block;
  margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--terre);
}
.bloc--foret .surtitre, .sur-foret .surtitre { color: var(--abricot); }

.chapeau { max-width: 56ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; }
.texte { max-width: 60ch; line-height: 1.8; color: var(--encre-80); }
.bloc--foret .texte, .sur-foret .texte { color: rgba(251, 247, 236, .8); }

/* Une annotation manuscrite, penchée, en abricot : une voix à côté du texte. */
.annotation {
  display: inline-block;
  font-family: var(--f-titre); font-style: italic;
  font-size: clamp(17px, 2vw, 21px); line-height: 1.25;
  color: var(--abricot);
  transform: rotate(-2deg);
}
.annotation--terre { color: var(--terre); }

.etiquette {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--encre-30); border-radius: var(--r-capsule);
  background: var(--creme-clair);
  font-size: 13px; line-height: 1.3;
}
.etiquette--pleine { background: var(--abricot); border-color: var(--abricot); color: var(--encre); font-weight: 700; }
.etiquette--foret { background: var(--foret-sombre); border-color: var(--foret-sombre); color: var(--creme-clair); font-weight: 700; }

.prix { font-family: var(--f-titre); font-size: clamp(24px, 3vw, 34px); line-height: 1; letter-spacing: -.02em; }

.filet { display: block; width: 56px; height: 2px; margin: 24px 0 20px; background: var(--terre); border-radius: 2px; }


/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px;
  border: 1.5px solid transparent; border-radius: var(--r-capsule);
  background: var(--foret-sombre); color: var(--creme-clair);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .5s var(--sortie);
}
.bouton--abricot { background: var(--abricot); color: var(--encre); }
.bouton--creme { background: var(--creme-clair); color: var(--encre); }
.bouton--terre { background: var(--terre); color: var(--creme-clair); }
.bouton--contour { background: transparent; border-color: currentColor; color: var(--encre); }
.bloc--foret .bouton--contour, .sur-foret .bouton--contour { color: var(--creme-clair); }
/* Les couleurs de survol ne valent qu'à la souris : au doigt, un
   bouton touché ne reste pas « allumé » une fois relâché. */
@media (hover: hover) {
  .bouton:hover { background: var(--terre); color: var(--creme-clair); }
  .bouton--abricot:hover { background: var(--creme-clair); color: var(--encre); }
  .bouton--creme:hover { background: var(--abricot); color: var(--encre); }
  .bouton--terre:hover { background: var(--foret-sombre); }
  .bouton--contour:hover { background: var(--foret-sombre); border-color: var(--foret-sombre); color: var(--creme-clair); }
  .bloc--foret .bouton--contour:hover, .sur-foret .bouton--contour:hover { background: var(--creme-clair); border-color: var(--creme-clair); color: var(--encre); }
}
/* Au doigt, le bouton s'enfonce un instant sous la pression. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.bouton:active, .bouton-rond:not([disabled]):active { transform: scale(.96); transition-duration: .3s, .3s, .3s, .12s; }

@media (max-width: 520px) {
  .bouton { white-space: normal; text-align: center; justify-content: center; line-height: 1.3; }
}

.lien-souligne {
  display: inline-block; padding-bottom: 4px;
  border-bottom: 1.5px solid currentColor;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; transition: color .3s;
}
/* Au doigt : la zone cliquable monte à 44 px, le trait reste sous le mot. */
@media (hover: none), (max-width: 760px) {
  .lien-souligne {
    padding: 14px 0 0; border-bottom: 0;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
    min-height: 44px; line-height: 1.2;
  }
}
.lien-souligne:hover { color: var(--terre); }
.bloc--foret .lien-souligne:hover, .sur-foret .lien-souligne:hover { color: var(--abricot); }

.bouton-rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--encre); border-radius: var(--r-capsule);
  background: transparent; color: var(--encre);
  font-size: 17px; cursor: pointer;
  transition: background .3s, color .3s, opacity .3s;
}
@media (hover: hover) { .bouton-rond:hover { background: var(--foret-sombre); color: var(--creme-clair); } }
.bouton-rond[disabled] { opacity: .35; cursor: default; background: transparent; color: var(--encre); }


/* ---------- Cartes ---------- */

.carte {
  position: relative;
  border-radius: var(--r-carte);
  background: var(--creme-clair);
  box-shadow: var(--ombre-carte);
}

/* Fiche accrochée à un fil par une pince en bois. */
.fiche {
  position: relative;
  padding: 12px 12px 22px;
  border-radius: var(--r-carte);
  background: var(--creme-clair);
  box-shadow: var(--ombre-carte);
  transform-origin: 50% -14px;
  transform: rotate(var(--pivot, 0deg));
  transition: box-shadow .4s var(--sortie);
}
.fiche::before {
  content: ''; position: absolute; top: -20px; left: 50%; z-index: 2;
  width: 13px; height: 34px; margin-left: -6.5px;
  border-radius: 3px; background: var(--terre);
  box-shadow: inset 0 -9px 0 rgba(0, 0, 0, .14);
}
.fiche__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; border-radius: 18px; background: var(--sauge); }
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sortie); }
@media (hover: hover) {
  .fiche:hover { box-shadow: var(--ombre-haute); animation: fiche-balance 1.15s cubic-bezier(.22, .61, .36, 1) 1; }
  .fiche:hover .fiche__photo img { transform: scale(1.08); }
}
@keyframes fiche-balance {
  0% { transform: rotate(var(--pivot, 0deg)); }
  18% { transform: rotate(calc(var(--pivot, 0deg) + 9deg)); }
  40% { transform: rotate(calc(var(--pivot, 0deg) - 6deg)); }
  60% { transform: rotate(calc(var(--pivot, 0deg) + 3.5deg)); }
  78% { transform: rotate(calc(var(--pivot, 0deg) - 2deg)); }
  92% { transform: rotate(calc(var(--pivot, 0deg) + 1deg)); }
  100% { transform: rotate(var(--pivot, 0deg)); }
}

/* Le cadre photo posé de travers, comme une photo sur un buffet. */
.polaroid {
  padding: 14px 14px 22px;
  border-radius: 30px;
  background: var(--creme-clair);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  color: var(--encre);
}
.polaroid__cadre { overflow: hidden; border-radius: 20px; }
.polaroid__cadre img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { margin: 12px 6px 0; font-family: var(--f-titre); font-style: italic; font-size: 16px; color: var(--encre-80); }


/* ---------- Fil d'Ariane ---------- */

.ariane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-55);
}
.ariane a { transition: color .3s; }
.ariane a:hover { color: var(--terre); }
/* Le chevron suit l'étape précédente : si le fil passe à la ligne au
   téléphone, aucune ligne ne commence par « › ». */
.ariane li:not(:last-child)::after { content: '›'; margin-left: 10px; color: var(--encre-30); }
.ariane [aria-current] { color: var(--encre); }
@media (hover: none), (max-width: 1100px) {
  /* Au doigt, les liens du fil d'Ariane gagnent de la hauteur sans
     décaler la mise en page. */
  .ariane a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.sur-foret .ariane, .ariane--claire { color: var(--creme-70); }
.sur-foret .ariane [aria-current], .ariane--claire [aria-current] { color: var(--creme-clair); }
.sur-foret .ariane a:hover, .ariane--claire a:hover { color: var(--abricot); }


/* ---------- Bandeau défilant ---------- */

.defile { overflow: clip; }
.defile__piste { display: flex; width: max-content; animation: defile 30s linear infinite; }
.defile__groupe { display: flex; align-items: center; gap: clamp(21px, 3vw, 40px); padding: 12px clamp(11px, 1.5vw, 20px) 15px; }
.defile__mot { font-family: var(--f-titre); font-style: italic; font-size: clamp(17px, 2.25vw, 25px); white-space: nowrap; }
.defile__etoile { width: 14px; height: 14px; flex: none; }
.defile--foret { background: var(--foret-sombre); color: var(--creme-clair); }
.defile--terre { background: var(--terre); color: var(--creme-clair); }
@keyframes defile { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }


/* ---------- Sceau tournant ---------- */

.sceau-rond { animation: sceau-rot 34s linear infinite; }
@keyframes sceau-rot { to { transform: rotate(360deg); } }


/* =========================================================
   La barrière de navigation

   Une lisse de bois sous le haut de l'écran, et des pancartes
   qui y pendent par deux fils : la marque à gauche, les cinq
   rubriques au milieu, Contact et « Réserver » à droite. Les
   rubriques à sous-pages laissent tomber une planche quand on
   les survole. En dessous de 1100 px, les pancartes se rangent
   et la grange prend le relais.
   ========================================================= */

.barriere {
  position: sticky; top: 0; z-index: 600;
  background: rgba(246, 241, 226, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .5s;
}
.barriere.est-decollee { box-shadow: 0 12px 34px -22px rgba(30, 58, 42, .6); }

.barriere__rang { position: relative; height: var(--barriere-h); }

.barriere__lisse {
  position: absolute; left: 0; right: 0; top: 14px; height: 15px;
  background: linear-gradient(180deg, #8E5C33 0%, #7A4C29 42%, #5C3A20 100%);
  box-shadow: 0 5px 12px -5px rgba(30, 58, 42, .55), inset 0 1px 0 rgba(255, 226, 190, .3), inset 0 -2px 0 rgba(0, 0, 0, .22);
}
.barriere__lisse::after {
  content: ''; position: absolute; inset: 0; opacity: .3;
  background: repeating-linear-gradient(92deg, transparent 0 7px, rgba(46, 26, 12, .5) 7px 8px, transparent 8px 21px, rgba(255, 226, 190, .16) 21px 22px);
}

.barriere__contenu {
  position: relative; height: 100%;
  max-width: var(--coquille); margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex; align-items: flex-start; gap: clamp(6px, .9vw, 14px);
}
.barriere__espace { flex: 1 1 10px; min-width: 6px; }

/* Les deux fils de chaque pancarte. */
.signe { position: relative; flex: none; text-decoration: none; text-align: center; will-change: transform; transition: transform .5s var(--sortie), background .35s, box-shadow .35s, border-color .35s; }
button.signe { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.signe::before, .signe::after {
  content: ''; position: absolute; bottom: 100%; width: 1.4px; height: 17px;
  background: linear-gradient(180deg, rgba(30, 58, 42, .2), rgba(30, 58, 42, .85));
}
.signe::before { left: 26%; }
.signe::after { right: 26%; }

.signe--marque {
  margin-top: 43px; padding: 11px 20px 13px;
  border: 1.5px solid rgba(12, 28, 18, .8); border-radius: 3px;
  background: linear-gradient(172deg, #24452F 0%, #183123 100%);
  box-shadow: 0 9px 18px -10px rgba(20, 40, 26, .85), inset 0 0 0 3px rgba(251, 247, 236, .12);
  transform-origin: 50% -14px;
}
.signe--marque::before, .signe--marque::after { height: 14px; left: 24%; }
.signe--marque::after { left: auto; right: 24%; }
.signe--marque .signe__titre { display: block; font-family: var(--f-titre); font-size: 19px; line-height: 1.08; color: var(--creme-clair); white-space: nowrap; }
.signe--marque .signe__sous { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--abricot); white-space: nowrap; }

/* Le logo rond, pendu à la lisse par deux fils comme les pancartes.
   Il dépasse sous la barre (--logo-taille) et garde sa taille au
   défilement ; le contenu commence sous lui grâce au retrait de <main>
   (--entete-total). */
:root { --logo-taille: 140px; --entete-total: 220px; }
@media (max-width: 1300px) { :root { --logo-taille: 112px; --entete-total: 192px; } }
@media (max-width: 520px) { :root { --logo-taille: 78px; --entete-total: 156px; } }
/* Le contenu commence juste sous le médaillon (et pas sous toute la
   hauteur réservée à l'en-tête) : le retrait suffit, avec le haut de la
   première section, à ne pas toucher la plaque « Accueil ». */
:root { --debut-contenu: 50px; }
@media (max-width: 1300px) { :root { --debut-contenu: 44px; } }
@media (max-width: 520px) { :root { --debut-contenu: 26px; } }
main#contenu { padding-top: var(--debut-contenu); }

.signe--logo {
  margin-top: 30px;
  margin-left: calc(-1 * clamp(6px, 2.4vw, 40px));
  width: var(--logo-taille); height: var(--logo-taille); padding: 5px;
  border-radius: 50%;
  border: 4px solid #8E5C33;
  background: radial-gradient(circle at 35% 30%, #FFFDF6 0%, #F2EBD8 72%);
  box-shadow: 0 14px 24px -12px rgba(30, 58, 42, .7), inset 0 0 0 2px rgba(251, 247, 236, .95), 0 0 0 1px rgba(92, 58, 32, .5);
  transform-origin: 50% -16px;
  transition: rotate .5s var(--sortie), box-shadow .35s;
}
/* Les fils rejoignent le cercle là où il passe sous eux (à 30 % de la
   largeur, le bord du cercle est à ~4 % sous le haut de la boîte). */
.signe--logo::before, .signe--logo::after { bottom: 95.8%; height: 18px; }
.signe--logo::before { left: 30%; }
.signe--logo::after { right: 30%; }
/* Petite plaque « Accueil » pendue sous le médaillon : on comprend
   tout de suite où mène le rond. */
.signe__accueil {
  position: absolute; left: 50%; top: calc(100% + 9px); translate: -50% 0;
  padding: 5px 10px 6px; border-radius: 4px;
  background: #8E5C33; color: #FBF7EC;
  font: 600 12px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; box-shadow: 0 6px 10px -6px rgba(30, 58, 42, .7);
}
.signe__accueil::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 13px;
  background: #5C3A20;
}
.signe--logo:hover .signe__accueil, .signe--logo:focus-visible .signe__accueil { background: #1E3A2A; }
/* Le médaillon garde la même taille partout et tout le temps (choix de
   la cliente) : pas de réduction au défilement. */
.signe__logo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

.signe--lien {
  margin-top: 46px; min-width: 96px; padding: 9px 14px 11px;
  border: 1.5px solid rgba(30, 58, 42, .75); border-radius: 3px;
  background: linear-gradient(172deg, #FDFAF1 0%, #F2EBD8 100%);
  box-shadow: 0 8px 16px -10px rgba(30, 58, 42, .75), inset 0 0 0 3px rgba(251, 247, 236, .9);
  transform-origin: 50% -17px;
  cursor: pointer;
}
.signe--lien .signe__etiquette {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px; font-family: var(--f-titre); font-size: 16px; line-height: 1; color: var(--encre); white-space: nowrap;
  transition: color .35s;
}
.signe--lien .signe__fleche { width: 9px; height: 9px; flex: none; transition: transform .35s var(--sortie); }
.signe--lien:hover, .signe--lien:focus-visible { background: linear-gradient(172deg, #FFFDF6 0%, #F6F0E0 100%); box-shadow: 0 13px 24px -12px rgba(30, 58, 42, .8), inset 0 0 0 3px rgba(251, 247, 236, .95); }
.signe--lien.est-actif { background: linear-gradient(172deg, #24452F 0%, #183123 100%); border-color: rgba(12, 28, 18, .85); box-shadow: 0 11px 20px -11px rgba(20, 40, 26, .9), inset 0 0 0 3px rgba(251, 247, 236, .14); }
.signe--lien.est-actif .signe__etiquette { color: var(--creme-clair); }
.signe--lien.est-actif .signe__fleche { color: var(--abricot); }

.signe--reserver {
  margin-top: 48px; padding: 12px 20px 13px;
  border: 1.5px solid rgba(88, 32, 12, .55); border-radius: 3px;
  background: linear-gradient(172deg, #B85831 0%, #9A4526 100%);
  box-shadow: 0 9px 18px -10px rgba(70, 26, 10, .9), inset 0 0 0 3px rgba(251, 247, 236, .16);
  transform-origin: 50% -19px;
}
.signe--reserver::before { left: 50%; height: 19px; }
.signe--reserver::after {
  left: 50%; right: auto; bottom: auto; top: -5px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--ble); box-shadow: inset 0 -1px 1px rgba(90, 54, 20, .5);
}
.signe--reserver .signe__titre { display: block; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--creme-clair); white-space: nowrap; }
.signe--reserver .signe__sous { display: block; margin-top: 2px; font-family: var(--f-titre); font-style: italic; font-size: 13px; line-height: 1; color: var(--abricot-clair); white-space: nowrap; }
.signe--reserver:hover { background: linear-gradient(172deg, #C4653D 0%, #A84D2B 100%); }

/* Survol : la pancarte se balance légèrement. */
@media (hover: hover) {
  .signe--lien:hover, .signe--lien:focus-visible { transform: translateY(-3px) rotate(-3deg); }
  .signe--lien:nth-child(odd):hover { transform: translateY(-3px) rotate(3deg); }
  .signe--marque:hover, .signe--reserver:hover { transform: translateY(-3px); }
  .signe--logo:hover, .signe--logo:focus-visible { rotate: -4deg; }
}

/* ---------- La planche qui tombe sous une rubrique ---------- */

.rubrique { position: relative; flex: none; }
.rubrique > .signe--lien { display: block; }

.planche {
  position: absolute; top: 100%; left: 50%; z-index: 5;
  width: max-content; min-width: 300px; max-width: min(92vw, 560px);
  padding-top: 14px;
  transform: translateX(-50%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s, visibility 0s linear .25s;
}
.planche__corps {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 16px;
  border: 1.5px solid rgba(30, 58, 42, .55); border-radius: 6px;
  background: linear-gradient(172deg, #FDFAF1 0%, #F2EBD8 100%);
  box-shadow: 0 24px 44px -18px rgba(30, 58, 42, .65), inset 0 0 0 3px rgba(251, 247, 236, .9);
  transform-origin: 50% -12px;
  transform: rotateX(-70deg);
  transition: transform .55s var(--rebond);
}
.planche__corps::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 1.4px; height: 14px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(30, 58, 42, .2), rgba(30, 58, 42, .85));
}
.planche--large .planche__corps { grid-template-columns: 1fr 1fr; }
.planche__lien {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 8px;
  transition: background .25s, transform .25s var(--sortie);
}
.planche__lien:hover, .planche__lien:focus-visible { background: var(--foret-sombre); color: var(--creme-clair); transform: translateX(4px); }
.planche__lien strong { font-family: var(--f-titre); font-weight: 400; font-size: 18px; line-height: 1.05; letter-spacing: -.01em; }
.planche__lien small { font-size: 12.5px; line-height: 1.35; color: var(--encre-55); }
.planche__lien:hover small, .planche__lien:focus-visible small { color: rgba(251, 247, 236, .72); }
.planche__lien--tout { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 4px; border-top: 1px solid var(--encre-14); border-radius: 0 0 8px 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.planche__lien--tout:hover { transform: none; border-radius: 8px; }

.rubrique.est-ouverte > .planche, .rubrique:focus-within > .planche {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .25s, visibility 0s;
}
.rubrique.est-ouverte > .planche .planche__corps, .rubrique:focus-within > .planche .planche__corps { transform: rotateX(0); }
.rubrique.est-ouverte > .signe--lien .signe__fleche { transform: rotate(180deg); }
@media (hover: hover) {
  .rubrique:hover > .planche { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s, visibility 0s; }
  .rubrique:hover > .planche .planche__corps { transform: rotateX(0); }
  .rubrique:hover > .signe--lien .signe__fleche { transform: rotate(180deg); }
}

/* ---------- Le loquet (menu mobile) ---------- */

.barriere__loquet {
  position: relative;
  display: none; flex: none; align-items: center; gap: 10px;
  margin-top: 48px; padding: 12px 16px 13px;
  border: 1.5px solid rgba(30, 58, 42, .75); border-radius: 3px;
  background: linear-gradient(172deg, #FDFAF1 0%, #F2EBD8 100%);
  box-shadow: 0 8px 16px -10px rgba(30, 58, 42, .75), inset 0 0 0 3px rgba(251, 247, 236, .9);
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--encre);
  cursor: pointer;
  transform-origin: 50% -19px;
  transition: transform .5s var(--sortie), background .35s, color .35s, border-color .35s;
}
/* Le loquet pend à la lisse par deux fils, comme les pancartes. */
.barriere__loquet::before, .barriere__loquet::after {
  content: ''; position: absolute; bottom: 100%; width: 1.4px; height: 19px;
  background: linear-gradient(180deg, rgba(30, 58, 42, .2), rgba(30, 58, 42, .85));
}
.barriere__loquet::before { left: 24%; }
.barriere__loquet::after { right: 24%; }
/* Menu ouvert : le loquet passe au vert de la grange. */
html.grange-ouverte .barriere__loquet {
  background: linear-gradient(172deg, #24452F 0%, #183123 100%);
  border-color: rgba(12, 28, 18, .85); color: var(--creme-clair);
  box-shadow: 0 9px 18px -10px rgba(20, 40, 26, .85), inset 0 0 0 3px rgba(251, 247, 236, .12);
}
/* Au doigt, les pancartes se balancent un peu quand on les touche. */
@media (hover: none) {
  .barriere__loquet:active, .signe--reserver:active { transform: translateY(2px) rotate(-2deg); transition-duration: .15s; }
  .signe--logo:active { rotate: -5deg; transition-duration: .15s; }
}
.barriere__loquet .loquet__barres { display: block; width: 20px; height: 12px; position: relative; }
.barriere__loquet .loquet__barres::before, .barriere__loquet .loquet__barres::after, .barriere__loquet .loquet__barres span {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .4s var(--sortie), opacity .3s;
}
.barriere__loquet .loquet__barres::before { top: 0; }
.barriere__loquet .loquet__barres span { top: 5px; }
.barriere__loquet .loquet__barres::after { top: 10px; }
html.grange-ouverte .barriere__loquet .loquet__barres::before { transform: translateY(5px) rotate(45deg); }
html.grange-ouverte .barriere__loquet .loquet__barres span { opacity: 0; }
html.grange-ouverte .barriere__loquet .loquet__barres::after { transform: translateY(-5px) rotate(-45deg); }

/* Grand écran un peu juste : les pancartes se resserrent pour que
   « Réserver » reste dans l'écran (Young Serif et Work Sans sont
   plus larges que les polices d'origine). */
@media (max-width: 1480px) {
  .barriere__contenu { padding-inline: clamp(16px, 2.4vw, 40px); gap: clamp(5px, .55vw, 9px); }
  .signe--lien { min-width: 0; padding: 9px 11px 11px; }
  .signe--lien .signe__etiquette { font-size: 15px; }
  .signe--marque { padding: 11px 15px 13px; }
  .signe--marque .signe__sous { letter-spacing: .08em; }
  .signe--reserver { padding-inline: 15px; }
}
@media (max-width: 1300px) {
  .barriere__contenu { padding-inline: clamp(16px, 4vw, 40px); gap: 10px; }
  .barriere__espace--milieu { display: none; }
  .rubrique, .signe--lien { display: none; }
  .barriere__loquet { display: flex; font-size: 12px; }
  .signe--reserver { padding-inline: 14px; }
  .signe--marque .signe__sous { font-size: 12px; letter-spacing: .1em; }
}
/* Téléphone : le médaillon garde ses 78 px et sa plaque ; le loquet
   (barres + « Menu ») et « Réserver » pendent à la même hauteur, avec
   la même taille de pancarte (44 px de haut, assez pour le pouce). La
   barre est un peu moins haute : plus de page visible en défilant. */
@media (max-width: 520px) {
  :root { --barriere-h: 96px; }
  .signe--marque { margin-top: 34px; padding: 9px 14px 10px; }
  .signe--logo { margin-top: 32px; margin-left: -2px; padding: 4px; border-width: 3px; }
  .signe--marque .signe__titre { font-size: 16px; }
  .signe--marque .signe__sous { display: none; }
  .signe--reserver { margin-top: 38px; min-height: 44px; display: flex; align-items: center; padding: 0 14px; }
  .signe--reserver .signe__sous { display: none; }
  .barriere__loquet { margin-top: 38px; min-height: 44px; padding: 0 13px 0 12px; gap: 9px; font-size: 12px; letter-spacing: .13em; }
  .barriere__loquet::before, .barriere__loquet::after, .signe--reserver::before { height: 9px; }
}
/* Petits téléphones (360 px) : le médaillon, le loquet et « Réserver »
   doivent tenir sur la même lisse sans dépasser. Placé après le bloc
   520 px pour l'emporter sur lui. */
@media (max-width: 400px) {
  .barriere__contenu { padding-inline: 10px; gap: 8px; }
  .barriere__espace { flex-basis: 0; min-width: 0; }
  .signe--marque { padding: 9px 9px 10px; }
  .signe--marque .signe__titre { font-size: 14px; }
  .signe--reserver { padding: 0 10px; }
  .signe--reserver .signe__titre { letter-spacing: .08em; }
  .barriere__loquet { padding: 0 10px; gap: 8px; letter-spacing: .1em; }
}

/* ---------- La grange : le menu plein écran ---------- */

.grange {
  position: fixed; inset: 0; z-index: 590;
  display: flex; flex-direction: column;
  padding-top: var(--barriere-h);
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .7s;
}
.grange__porte {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--foret-sombre);
  transition: transform .7s var(--sortie);
}
.grange__porte--gauche { left: 0; transform: translateX(-101%); border-right: 1px solid rgba(251, 247, 236, .08); }
.grange__porte--droite { right: 0; transform: translateX(101%); }
/* Le cadre des deux battants suit le bord de l'écran (pas de trait
   sous le texte) ; les planches restent à peine visibles. */
.grange__porte::after {
  content: ''; position: absolute; inset: 12px 0 12px 12px;
  border: 1px solid rgba(251, 247, 236, .09); border-right: 0; border-radius: 6px 0 0 6px;
  background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(0, 0, 0, .07) 44px 46px);
}
.grange__porte--droite::after { inset: 12px 12px 12px 0; border: 1px solid rgba(251, 247, 236, .09); border-left: 0; border-radius: 0 6px 6px 0; }
/* Le contenu commence sous le médaillon et sa plaque « Accueil », qui
   pendent par-dessus la grange ; il défile seul, sans entraîner la page. */
.grange__contenu {
  position: relative; flex: 1; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  width: 100%; max-width: 720px; margin-inline: auto;
  padding: calc(var(--entete-total) - var(--barriere-h) + 6px) clamp(20px, 6vw, 60px) calc(36px + env(safe-area-inset-bottom, 0px));
  color: var(--creme-clair);
  opacity: 0;
  transition: opacity .3s;
  /* Ce qui remonte en défilant s'efface sous le médaillon. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--entete-total) - var(--barriere-h) - 6px));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--entete-total) - var(--barriere-h) - 6px));
}
html.grange-ouverte { overflow: hidden; }
html.grange-ouverte .grange { visibility: visible; pointer-events: auto; transition: visibility 0s; }
html.grange-ouverte .grange__porte { transform: translateX(0); }
html.grange-ouverte .grange__contenu { opacity: 1; transition-delay: .3s; }

/* Les entrées arrivent l'une après l'autre, une fois les portes closes. */
.grange__contenu > * { opacity: 0; transform: translateY(16px); transition: opacity .25s, transform .25s; }
html.grange-ouverte .grange__contenu > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s var(--sortie); transition-delay: calc(.36s + var(--rang, 0) * 55ms); }
.grange__contenu > :nth-child(2) { --rang: 1; }
.grange__contenu > :nth-child(3) { --rang: 2; }
.grange__contenu > :nth-child(4) { --rang: 3; }
.grange__contenu > :nth-child(5) { --rang: 4; }
.grange__contenu > :nth-child(6) { --rang: 5; }
.grange__contenu > :nth-child(7) { --rang: 6; }
.grange__contenu > :nth-child(n+8) { --rang: 7; }

.grange__groupe, .grange__simple { border-top: 1px solid rgba(251, 247, 236, .14); }
.grange__groupe summary, .grange__simple {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none;
  font-family: var(--f-titre); font-size: clamp(26px, 6vw, 34px); line-height: 1.05;
  transition: color .3s;
}
.grange__groupe summary::-webkit-details-marker { display: none; }
.grange__groupe summary svg { width: 18px; height: 18px; flex: none; transition: transform .4s var(--sortie); }
.grange__groupe[open] summary svg { transform: rotate(180deg); }
/* Une flèche discrète au bout des liens directs, un chevron pour les
   rubriques qui se déplient : on sait d'avance ce que fait le doigt. */
.grange__simple::after {
  content: ''; flex: none; width: 18px; height: 18px; opacity: .55;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 9h11M10 4.5L14.5 9 10 13.5" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 9h11M10 4.5L14.5 9 10 13.5" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  transition: transform .35s var(--sortie), opacity .3s;
}
.grange__simple:active::after { transform: translateX(4px); opacity: 1; }
@media (hover: hover) { .grange__simple:hover::after { transform: translateX(4px); opacity: 1; } }

/* Les sous-pages, rangées le long d'un fil, comme sur un piquet. */
.grange__liste { margin: -4px 0 0 2px; padding: 0 0 16px 10px; display: grid; gap: 2px; border-left: 1px solid rgba(251, 247, 236, .18); }
.grange__liste a { display: flex; align-items: center; min-height: 46px; padding: 8px 12px; border-radius: 10px; font-size: 17px; line-height: 1.3; color: rgba(251, 247, 236, .86); transition: background .25s, color .25s; }
.grange__liste a:active { background: rgba(251, 247, 236, .1); }
@media (hover: hover) { .grange__liste a:hover { background: rgba(251, 247, 236, .08); color: var(--creme-clair); } }
.grange__liste a.est-actif { color: var(--abricot); }
.grange__liste a.est-actif::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 10px 0 -2px; border-radius: 50%; background: var(--abricot); }
.grange__simple.est-actif { color: var(--abricot); }

/* Le volet s'ouvre en douceur là où le navigateur sait animer <details>. */
@supports selector(::details-content) {
  .grange { interpolate-size: allow-keywords; }
  .grange__groupe::details-content { height: 0; overflow: clip; transition: height .45s var(--sortie), content-visibility .45s allow-discrete; }
  .grange__groupe[open]::details-content { height: auto; }
}

/* « Réserver » devient le bouton de la grange, en bas de la liste. */
.grange .grange__simple--reserver {
  justify-content: center; gap: 12px; min-height: 58px; margin-top: 26px; padding: 14px 24px;
  border: 0; border-radius: var(--r-capsule);
  background: var(--abricot); color: var(--encre);
  font-size: 22px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
}
.grange__simple--reserver::after { opacity: .8; }
.grange .grange__simple--reserver.est-actif { color: var(--encre); }
.grange__simple--reserver:active { background: var(--creme-clair); }
.grange__contenu > .grange__simple:has(+ .grange__simple--reserver) { border-bottom: 1px solid rgba(251, 247, 236, .14); }

/* Les coordonnées : deux grandes pastilles à toucher, l'adresse dessous. */
.grange__pied { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 15px; color: rgba(251, 247, 236, .7); }
.grange .grange__pied a {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 18px;
  border: 1px solid rgba(251, 247, 236, .28); border-radius: var(--r-capsule);
  color: var(--creme-clair); transition: background .25s, border-color .25s;
}
.grange__pied a:active { background: rgba(251, 247, 236, .1); }
@media (hover: hover) { .grange__pied a:hover { border-color: var(--abricot); color: var(--abricot); } }
.grange__pied a svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.grange__pied span { flex: 1 0 100%; padding-top: 6px; text-align: center; font-size: 14px; }


/* =========================================================
   Pied de page
   ========================================================= */

.pied {
  position: relative; overflow: clip;
  margin-top: clamp(40px, 7vh, 90px);
  border-radius: var(--r-bloc) var(--r-bloc) 0 0;
  background: var(--foret-sombre); color: var(--creme-clair);
  padding-top: clamp(64px, 9vh, 100px);
}
.pied__lucioles { position: absolute; inset: 0; pointer-events: none; }
.pied__haut {
  position: relative;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 6vh, 64px);
}
.pied__logo {
  display: block; width: 116px; height: 116px; margin-bottom: 22px; padding: 6px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFDF6 0%, #F2EBD8 72%);
  box-shadow: 0 0 0 3px #8E5C33, 0 12px 26px -12px rgba(0, 0, 0, .6);
}
.pied__accroche { font-family: var(--f-titre); font-size: clamp(30px, 2.8vw, 40px); line-height: .98; letter-spacing: -.02em; color: var(--creme-clair); }
.pied__accroche em { color: var(--abricot); }
.pied__texte { margin: 18px 0 24px; max-width: 38ch; line-height: 1.8; color: rgba(251, 247, 236, .78); }
.pied__titre { margin-bottom: 14px; font-family: var(--f-texte); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(251, 247, 236, .62); }
.pied__liste { display: grid; gap: 9px; }
.pied__liste a { display: inline-block; line-height: 1.4; text-wrap: balance; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.pied__liste a:hover { color: var(--abricot); border-color: var(--abricot); }
.pied__coord p { margin: 0 0 8px; line-height: 1.6; }
.pied__coord a { border-bottom: 1px solid rgba(251, 247, 236, .4); transition: color .3s, border-color .3s; }
.pied__coord a:hover { color: var(--abricot); border-color: var(--abricot); }
.pied__signature { margin-top: 18px; font-family: var(--f-titre); font-style: italic; font-size: 18px; color: var(--abricot); }
/* Le label du réseau Bienvenue à la ferme : le logo, et un lien vers le réseau. */
.pied__label {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 8px 16px 8px 8px;
  border-radius: 14px; background: rgba(251, 247, 236, .07);
  font-size: 12px; line-height: 1.35; color: rgba(251, 247, 236, .75);
  transition: background .3s, border-color .3s;
}
.pied__coord .pied__label { display: inline-flex; padding: 8px 16px 8px 8px; border: 1px solid rgba(251, 247, 236, .22); font-size: 12px; text-decoration: none; }
.pied__coord .pied__label:hover, .pied__coord .pied__label:focus-visible { background: rgba(251, 247, 236, .13); border-color: var(--abricot); color: rgba(251, 247, 236, .9); }
.pied__label img { flex: none; width: 42px; height: auto; padding: 4px 5px; border-radius: 10px; background: #FFFFFE; }
.pied__label strong { font-size: 13px; font-weight: 700; color: var(--creme-clair); }
.pied__bas {
  position: relative;
  padding: 18px 0 clamp(24px, 4vh, 34px);
  border-top: 1px solid rgba(251, 247, 236, .12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  font-size: 12px; letter-spacing: .04em; color: rgba(251, 247, 236, .55);
}
.pied__bas a { border-bottom: 1px solid rgba(251, 247, 236, .3); transition: color .3s; }
.pied__bas a:hover { color: var(--abricot); }
.pied__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Les liens du pied et de la grange gardent la couleur de leur bloc,
   même sur une page qui pose une couleur de lien plus générale. */
.pied a, .grange a { color: inherit; }
.pied a:hover, .pied a:focus-visible { color: var(--abricot); }

@media (max-width: 900px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .pied__haut > :first-child, .pied__coord { grid-column: 1 / -1; }
}
/* Au téléphone : les deux listes côte à côte, des liens assez hauts
   pour le doigt, les coordonnées en dessous. */
@media (hover: none), (max-width: 900px) {
  .pied__liste { gap: 0; }
  .pied__liste a { display: block; padding: 10px 0; line-height: 1.3; border-bottom: 0; }
  .pied__coord p { margin-bottom: 4px; }
  .pied__coord a, .pied__legal a, .pied__bas a {
    display: inline-block; padding: 11px 0; border-bottom: 0;
    text-decoration: underline; text-decoration-color: rgba(251, 247, 236, .4); text-underline-offset: 4px;
  }
}
/* Au téléphone : le médaillon et l'accroche ouvrent le pied, le bouton
   prend toute la largeur, les deux listes restent côte à côte sous un
   filet, puis les coordonnées et les mentions. */
@media (max-width: 560px) {
  .pied { padding-top: 48px; margin-top: 56px; border-radius: 28px 28px 0 0; }
  .pied__haut { column-gap: 18px; row-gap: 0; padding-bottom: 28px; }
  .pied__haut > :first-child { padding-bottom: 36px; }
  .pied__logo { width: 92px; height: 92px; margin-bottom: 20px; padding: 5px; }
  .pied__accroche { font-size: 36px; }
  .pied__texte { margin: 12px 0 22px; font-size: 16px; }
  .pied__haut > :first-child .bouton { display: flex; width: 100%; min-height: 54px; }
  .pied__haut > div:not(:first-child) { padding-top: 26px; border-top: 1px solid rgba(251, 247, 236, .14); }
  .pied__liste a { font-size: 15px; }
  .pied__coord { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(251, 247, 236, .14); }
  .pied__coord a { font-size: 16px; }
  .pied__bas { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}


/* =========================================================
   Mouvements communs
   ========================================================= */

/* Apparitions au défilement : commun.js pose l'état de départ
   et l'IntersectionObserver le relâche. Sans JavaScript, tout
   est visible d'emblée. */
html.js [data-reveal] { opacity: 0; transition: opacity 1s var(--sortie), transform 1s var(--sortie); transition-delay: var(--delai, 0ms); }
html.js [data-reveal="monte"] { transform: translateY(38px); }
html.js [data-reveal="gauche"] { transform: translateX(-44px); }
html.js [data-reveal="droite"] { transform: translateX(44px); }
html.js [data-reveal="zoom"] { transform: scale(.9); }
html.js [data-reveal="ouvre"] { transform: scale(.94) translateY(40px); }
html.js [data-reveal="pivote"] { transform: rotate(-4deg) translateY(30px); }
html.js [data-reveal].est-visible { opacity: 1; transform: none; }
/* Au téléphone, les apparitions sont plus courtes et plus proches :
   rien ne glisse de côté (le pouce défile de haut en bas), rien ne
   traîne quand on défile vite. */
@media (max-width: 760px) {
  html.js [data-reveal] { transition-duration: .8s; }
  html.js [data-reveal="monte"] { transform: translateY(26px); }
  html.js [data-reveal="gauche"] { transform: translate(-16px, 18px); }
  html.js [data-reveal="droite"] { transform: translate(16px, 18px); }
  html.js [data-reveal="ouvre"] { transform: scale(.96) translateY(26px); }
  html.js [data-reveal].est-visible { transform: none; }
}

/* Titres lettre à lettre : commun.js découpe les [data-lettres]. */
[data-lettres] .lettre-mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .16em .14em .06em; margin: -.12em -.16em -.14em -.06em; }
/* Une fois les lettres arrivées, le masque saute : rien ne rogne l'italique ni les accents. */
[data-lettres].est-pose .lettre-mot { overflow: visible; }
[data-lettres] .lettre { display: inline-block; transform: translateY(115%); transition: transform .7s var(--sortie); }
[data-lettres].est-visible .lettre { transform: translateY(0); }

/* Un trait de plume qui se dessine. */
.trace-anime path, .trace-anime circle { stroke-dasharray: var(--longueur, 600); stroke-dashoffset: var(--longueur, 600); transition: stroke-dashoffset 1.6s var(--sortie); }
.trace-anime.est-visible path, .trace-anime.est-visible circle { stroke-dashoffset: 0; }

.flotte { animation: flotte 5s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Le curseur ---------- */

.curseur {
  position: fixed; top: 0; left: 0; z-index: 1300;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--terre);
  pointer-events: none; opacity: 0;
  transition: width .3s var(--sortie), height .3s var(--sortie), margin .3s var(--sortie), background .3s, opacity .3s;
  mix-blend-mode: multiply;
}
.curseur.est-la { opacity: .85; }
.curseur.est-sur-lien { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--abricot); }
.curseur.est-sur-photo { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: var(--creme-clair); mix-blend-mode: difference; }
@media (hover: none), (pointer: coarse) { .curseur { display: none; } }


/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-lettres] .lettre { transform: none; transition: none; }
  .defile__piste, .sceau-rond, .flotte { animation: none !important; }
  .fiche:hover { animation: none; }
  .planche__corps { transition: none; }
  .curseur { display: none; }
  .trace-anime path, .trace-anime circle { stroke-dashoffset: 0; transition: none; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* Un nom qui ne se coupe jamais (Roézé-sur-Sarthe…). */
.insecable { white-space: nowrap; }

/* =========================================================
   Téléphone : barre d'actions flottante (Appeler · Réserver)
   Elle remplace la pancarte « Réserver » de la barre du haut. Elle
   arrive en glissant, se range quand le pied de page (qui a les mêmes
   actions) est à l'écran, quand le menu est ouvert ou pendant une saisie.
   ========================================================= */
.cta-mobile { display: none; }
@media (max-width: 760px) {
  .signe--reserver { display: none; }
  .cta-mobile {
    position: fixed; z-index: 550;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: auto 1fr; gap: 6px;
    padding: 6px; border-radius: var(--r-capsule, 999px);
    background: rgba(251, 247, 236, .86);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 20px 40px -18px rgba(30, 58, 42, .6), 0 2px 6px -2px rgba(30, 58, 42, .18), 0 0 0 1px rgba(30, 58, 42, .1);
    transition: transform .55s var(--sortie), opacity .35s;
    animation: cta-arrive .8s var(--sortie) .5s backwards;
  }
  .cta-mobile.est-cachee, html.grange-ouverte .cta-mobile {
    transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none;
  }
  .cta-mobile__btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 52px; padding: 0 20px; border-radius: inherit;
    font: 700 13px/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--sortie), background .3s, box-shadow .3s;
  }
  .cta-mobile__btn svg { width: 19px; height: 19px; flex: none; }
  .cta-mobile__btn { min-width: 0; }
  .cta-mobile__btn--appel { color: var(--foret-sombre, #1E3A2A); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(30, 58, 42, .22); }
  .cta-mobile__btn--reserver {
    color: var(--creme-clair, #FBF7EC);
    background: linear-gradient(172deg, #C4653D 0%, #A84D2B 100%);
    box-shadow: 0 8px 18px -8px rgba(168, 77, 43, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
  }
  .cta-mobile__btn--reserver svg { transition: transform .3s var(--sortie); }
  .cta-mobile__btn:active { transform: scale(.96); }
  .cta-mobile__btn--reserver:active svg { transform: translateX(3px); }
  /* Sur Contact (le formulaire a sa propre barre) : pas de barre.
     Sur Réserver non plus (la carte a déjà son bouton). */
  body[data-rubrique="contact"] .cta-mobile, body[data-rubrique="reserver"] .cta-mobile { display: none; }
}
@media (max-width: 360px) {
  .cta-mobile__btn { padding: 0 16px; letter-spacing: .06em; }
}
@keyframes cta-arrive { from { transform: translateY(calc(100% + 28px)); opacity: 0; } }

/* Crédit du créateur du site : une ligne centrée, tout en bas du pied. */
.pied__credit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  margin: 0; padding: 18px 0 calc(26px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(251, 247, 236, .12);
  font-size: 12px; letter-spacing: .03em; color: rgba(251, 247, 236, .55); text-align: center;
}
.pied .pied__credit a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font-size: 14px; color: rgba(251, 247, 236, .9); border: 0; transition: color .3s; }
.pied .pied__credit a:hover { color: var(--abricot); }
.pied__credit strong { font-family: var(--f-titre); font-weight: 400; letter-spacing: -.01em; }
.pied__credit-tag { color: rgba(251, 247, 236, .4); }
@media (max-width: 760px) { .pied__bas { padding-bottom: 18px; } }