/* ==========================================================
   La Terrasse de l'Abbaye — une collection d'affiches
   Quatre affiches (le soir, la nuit, le matin, l'après-midi)
   accrochées sur un mur couleur de brume.
   ========================================================== */

@font-face {
  font-family: "Grenze";
  src: url("fonts/grenze.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grenze";
  src: url("fonts/grenze-italic.woff2") format("woff2");
  font-weight: 500 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Almendra";
  src: url("fonts/almendra.woff2") format("woff2");
  font-weight: 100 900; /* une seule graisse (grasse) : pas de faux gras */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Almendra";
  src: url("fonts/almendra-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Uncial Antiqua";
  src: url("fonts/uncial-antiqua.woff2") format("woff2");
  font-weight: 100 900; /* une seule graisse : pas de faux gras */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* les encres */
  --brume: #e3e9e4;
  --brume-2: #d0d9d2;
  --chaux: #f7f8f3;
  --ardoise: #15262b;
  --ardoise-2: #415358;
  --braise: #c8401f;
  --braise-2: #a93518;
  --braise-texte: #b5371a;
  --peche: #f6cf8e;
  --prune: #3a2233;
  --nuit: #101a2c;
  --foret: #173a2c;

  /* pour changer la police des titres : "Almendra", "Uncial Antiqua" ou "Grenze" (les trois sont dans fonts/) */
  --titre: "Almendra", Georgia, "Times New Roman", serif;
  --titre-italique: "Almendra", Georgia, "Times New Roman", serif;
  --texte: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gouttiere: clamp(18px, 4vw, 40px);
  --section: clamp(4.5rem, 9vw, 8rem);
  --entete: 64px;
  --lisiere: max(140px, 16.25vw);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--brume);
  color: var(--ardoise);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
p { margin: 0 0 1em; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titre); font-weight: 800; line-height: 0.95; text-wrap: balance; }
h2 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); letter-spacing: -0.005em; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--braise); outline-offset: 3px; border-radius: 2px; }
.carte :focus-visible, .accueil :focus-visible, .devise :focus-visible, .pied :focus-visible { outline-color: var(--peche); }

.conteneur { width: min(1180px, 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.section { padding-block: var(--section); }
.chapo { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 34em; }

.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ardoise); color: var(--chaux); padding: 0.6em 1em; }
.evitement:focus { top: 12px; }

/* ---------- Boutons et liens ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.82em 1.35em 0.86em;
  font: inherit; font-weight: 650; font-stretch: 88%; font-size: 1.0625rem; line-height: 1.15;
  text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: 3px; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.bouton--braise { background: var(--braise); color: #fff; }
.bouton--braise:hover { background: var(--braise-2); }
.bouton--trait { background: transparent; border-color: var(--ardoise); color: var(--ardoise); }
.bouton--trait:hover { background: var(--ardoise); color: var(--chaux); }
.bouton--clair { background: transparent; border-color: currentColor; color: var(--chaux); }
.bouton--clair:hover { background: var(--chaux); border-color: var(--chaux); color: var(--ardoise); }
.bouton--chaux { background: var(--chaux); color: var(--ardoise); }
.bouton--chaux:hover { background: var(--ardoise); color: var(--chaux); }
.bouton--ardoise { background: var(--ardoise); color: var(--chaux); }
.bouton--petit { padding: 0.55em 1em 0.6em; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }

.lien { color: var(--braise-texte); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.lien:hover { color: var(--ardoise); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--brume); border-bottom: 1px solid rgba(21, 38, 43, 0.14); }
.entete__rang { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.6rem); min-height: var(--entete); }
.marque { font-family: var(--titre); font-weight: 800; font-size: clamp(1.15rem, 5.2vw, 1.45rem); line-height: 1; text-decoration: none; white-space: nowrap; }
.navigation { display: flex; gap: clamp(1rem, 1.8vw, 1.5rem); margin-left: auto; }
.navigation a { position: relative; font-weight: 500; text-decoration: none; white-space: nowrap; padding-block: 0.4em; }
/* le trait de braise se tire sous le lien survolé, et reste sous la partie de la page où l'on se trouve */
.navigation > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--braise); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.navigation > a:hover::after, .navigation > a.est-courant::after { transform: scaleX(1); }
.navigation__pied, .lisiere--menu { display: none; }
.entete__menu { display: none; align-items: center; gap: 0.6rem; margin-left: auto; font-family: var(--titre); font-size: 1.25rem; line-height: 1; color: inherit; background: none; border: 0; padding: 0.5rem 0 0.5rem 0.6rem; cursor: pointer; }
/* deux traits qui se croisent quand le menu est ouvert */
.entete__menu-traits { position: relative; width: 26px; height: 12px; }
.entete__menu-traits::before, .entete__menu-traits::after { content: ""; position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform 0.3s ease, top 0.3s ease; }
.entete__menu-traits::before { top: 0; }
.entete__menu-traits::after { top: 9.5px; }
[aria-expanded="true"] > .entete__menu-traits::before { top: 4.75px; transform: rotate(45deg); }
[aria-expanded="true"] > .entete__menu-traits::after { top: 4.75px; transform: rotate(-45deg); }

.statut { display: inline-flex; align-items: center; gap: 0.5em; margin: 0; font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.statut__point { width: 0.6em; height: 0.6em; border-radius: 50%; background: #8b9794; flex: none; }
.statut.est-ouvert .statut__point { background: #2f8f4b; box-shadow: 0 0 0 4px rgba(47, 143, 75, 0.22); }

@media (max-width: 1200px) {
  .entete__rang > .statut { display: none; }
}
@media (max-width: 860px) {
  .entete__menu { display: inline-flex; }
  .entete__tel { display: none; }
  /* sur téléphone, le menu est une page de nuit qui se pose sous l'en-tête */
  .navigation {
    position: fixed; top: var(--entete); left: 0; right: 0; bottom: 0; z-index: 70;
    flex-direction: column; gap: 0; overflow-y: auto;
    padding: 1.2rem var(--gouttiere) calc(var(--lisiere) + 1rem);
    background: var(--nuit); color: var(--chaux);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .navigation.est-ouverte { opacity: 1; visibility: visible; transform: none; }
  .navigation > a {
    font-family: var(--titre); font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: 1.05; white-space: normal;
    padding: 0.62rem 0; border-bottom: 1px solid rgba(247, 248, 243, 0.14);
    opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease, color 0.15s;
  }
  .navigation.est-ouverte > a { opacity: 1; transform: none; }
  .navigation.est-ouverte > a:nth-of-type(2) { transition-delay: 0.05s; }
  .navigation.est-ouverte > a:nth-of-type(3) { transition-delay: 0.1s; }
  .navigation.est-ouverte > a:nth-of-type(4) { transition-delay: 0.15s; }
  .navigation.est-ouverte > a:nth-of-type(5) { transition-delay: 0.2s; }
  .navigation > a::after { display: none; }
  .navigation > a.est-courant, .navigation > a:hover { color: var(--peche); }
  .navigation__pied { position: relative; z-index: 4; display: grid; gap: 0.5rem; margin-top: 1.6rem; }
  .navigation__pied .statut { color: #c9d4d0; white-space: normal; }
  .navigation__tel { font-weight: 800; font-stretch: 84%; font-size: 1.9rem; line-height: 1; color: var(--peche); text-decoration: none; padding: 0.2rem 0; }
  .navigation .lisiere--menu { display: block; position: absolute; left: 0; right: 0; bottom: 0; margin: 0; --de: transparent; --c1: #1b2b47; --c2: #26405c; --c3: #070d18; --voile: #8fa3c4; }
  .lisiere--menu .lisiere__plan--brume { opacity: 0.35; }
  .menu-ouvert { overflow: hidden; }
  .menu-ouvert .barre { translate: 0 110%; visibility: hidden; }
}

/* ---------- Bandeau de fermeture exceptionnelle ---------- */
.annonce { margin: 0; padding: 0.7rem var(--gouttiere); background: var(--braise); color: #fff; text-align: center; font-weight: 600; text-wrap: balance; }
.horaires__fermeture { margin: 0 0 1rem; padding: 0.6rem 0.8rem; background: var(--braise); color: #fff; font-weight: 600; }

/* ---------- Le grain d'impression ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: 0.38;
}

/* ---------- Affiche n° 1 : l'accueil ---------- */
.accueil {
  display: grid; grid-template-rows: auto 1fr;
  min-height: clamp(560px, calc(100svh - var(--entete) - 40px), 940px);
  background: #15283a; color: #fdf3dd; overflow: hidden;
}
/* l'affiche est large : l'abbaye est à 65 % de la largeur, le titre prend le ciel de gauche */
.accueil__affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; z-index: -1; }
.accueil::before { content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: 0; background: linear-gradient(rgba(15, 24, 38, 0), rgba(15, 24, 38, 0.62)); pointer-events: none; }
.accueil__titre { position: relative; z-index: 3; text-align: center; padding-top: clamp(1.5rem, 4.5svh, 3.25rem); }
.accueil h1 { font-size: clamp(3.1rem, min(8.8vw, 15svh), 8.2rem); line-height: 0.88; letter-spacing: -0.012em; text-shadow: 0 2px 0 rgba(21, 40, 58, 0.25); }
.accueil h1 span { display: block; }
.accueil__titre p { margin: 1.1rem auto 0; max-width: 24em; font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.4; font-weight: 500; text-wrap: balance; }
.accueil__actions { position: relative; z-index: 3; align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem; padding-bottom: calc(0.46 * var(--lisiere) + 0.6rem); }
.accueil__statut { flex-basis: 100%; justify-content: center; margin-top: 0.3rem; }
.accueil__statut .statut__point { background: #c4cbd4; }
@media (min-width: 760px) {
  .accueil__affiche { object-position: 66% 60%; }
  .accueil__titre { text-align: left; }
  .accueil__titre p { margin-inline: 0; }
  .accueil__actions { justify-content: flex-start; }
  .accueil__statut { flex-basis: auto; margin: 0 0 0 0.8rem; }
}
@media (min-width: 1201px) { .accueil__statut { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .accueil h1 span, .accueil__titre p { animation: lever 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .accueil h1 span + span { animation-delay: 0.12s; }
  .accueil__titre p { animation-delay: 0.3s; }
  @keyframes lever { from { opacity: 0; transform: translateY(0.35em); } }
}

/* ---------- Une maison, quatre métiers ---------- */
.maison { padding-bottom: 0; }
.maison__grille { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: end; }
.maison h2 { margin-bottom: 0.45em; }
.maison .chapo { margin: 0; color: var(--ardoise-2); }
.metiers { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(1rem, 2vw, 1.8rem); }
.metiers div { border-top: 3px solid var(--ardoise); padding-top: 0.9rem; }
.metiers dt { font-family: var(--titre); font-weight: 800; font-size: 1.6rem; line-height: 1; margin-bottom: 0.4rem; }
.metiers dd { margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--ardoise-2); }
@media (max-width: 980px) {
  .maison__grille { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
  .metiers { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
}

/* ---------- Les affiches ---------- */
.affiche {
  margin: 0; background: var(--chaux); padding: clamp(8px, 1.1vw, 14px);
  box-shadow: 0 0 0 1px rgba(21, 38, 43, 0.16), 0 34px 50px -30px rgba(21, 38, 43, 0.6);
}
.affiche__vue { overflow: hidden; background: var(--nuit); }
.affiche__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.affiche__cartouche { background: var(--ardoise); color: var(--chaux); padding: clamp(0.9rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.5rem); }
.affiche__cartouche h2 { font-size: clamp(2.5rem, 4.8vw, 4rem); }
.affiche__cartouche p { margin: 0.3rem 0 0; font-family: var(--titre-italique); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.2; color: var(--peche); }
.affiche--feu .affiche__cartouche { background: var(--nuit); }
.affiche--bourg .affiche__cartouche { background: #2c4252; }
.affiche--foret .affiche__cartouche { background: var(--foret); }
.affiche--bourg .affiche__vue { background: #c9dad7; }
.affiche--foret .affiche__vue { background: #2c5a41; }

/* affiche + texte côte à côte */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.2rem, 7vw, 6.5rem); align-items: center; }
.duo--inverse .affiche { order: 2; }
.duo--inverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
@media (min-width: 901px) {
  .affiche--penche-g { rotate: -1.3deg; }
  .affiche--penche-d { rotate: 1.1deg; }
}
@media (max-width: 900px) {
  .duo, .duo--inverse { grid-template-columns: 1fr; }
  .duo--inverse .affiche { order: 0; }
  .duo .affiche { max-width: 520px; }
}

.points { margin: 2rem 0 2.2rem; max-width: 34em; }
.points div { display: grid; grid-template-columns: 12.5rem 1fr; gap: 0.2rem 1.2rem; padding: 0.95rem 0; border-top: 1px solid rgba(21, 38, 43, 0.22); }
.points div:last-child { border-bottom: 1px solid rgba(21, 38, 43, 0.22); }
.points dt { font-family: var(--titre); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.points dd { margin: 0; color: var(--ardoise-2); }
@media (max-width: 520px) { .points div { grid-template-columns: 1fr; } }

/* ---------- La carte ---------- */
.carte { background: var(--prune); color: #f6eee6; }
.carte__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; padding-bottom: 1.6rem; border-bottom: 3px solid currentColor; }
.carte__tete h2 { font-size: clamp(3rem, 7vw, 5.5rem); }
.carte__tete .chapo { margin: 0; max-width: 22em; color: #dccbd4; }

/* Le macaron de la Maison Le Dean, détouré, apposé comme un tampon dans le cartouche des affiches du barbecue et du bourg */
.affiche__cartouche--tampon { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.macaron { display: block; flex: none; width: clamp(96px, 30%, 190px); height: auto; rotate: -5deg; }
.affiche--frise .macaron { width: clamp(104px, 17%, 210px); }
/* le même macaron, en petit : à côté du nom de la boucherie (version sombre) et en pied de page */
.maisons__enseigne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.macaron--titre { width: 66px; rotate: none; margin-block: -0.5rem -0.4rem; }
.macaron--pied { width: 118px; rotate: none; margin-top: 1.3rem; opacity: 0.92; }
.menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(2rem, 4vw, 3.5rem); padding-top: 2.4rem; }
.menu__colonne h3 { font-family: var(--texte); font-weight: 700; font-stretch: 84%; font-size: 1.05rem; line-height: 1.2; color: var(--peche); margin: 0 0 0.5rem; }
.menu__colonne .plat + h3 { margin-top: 2.4rem; }
.plat { padding: 0.8rem 0 0.85rem; border-bottom: 1px solid rgba(246, 238, 230, 0.2); }
.plat__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.plat__tete:has(.plat__prix) { background: radial-gradient(circle, rgba(246, 238, 230, 0.5) 1px, transparent 1.3px) left bottom 0.32em / 7px 4px repeat-x; }
.plat h4 { font-weight: 700; font-size: 1.5rem; line-height: 1.1; background: var(--prune); padding-right: 0.4rem; }
.plat__prix { font-family: var(--texte); font-stretch: 88%; font-weight: 700; font-size: 1.35rem; line-height: 1.1; color: var(--peche); white-space: nowrap; background: var(--prune); padding-left: 0.4rem; }
.plat p { margin: 0.2rem 0 0; font-size: 0.97rem; line-height: 1.45; color: #cdb8c4; }
.carte__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: 2.8rem; }
.carte__pied p { margin: 0; color: #dccbd4; }
@media (max-width: 960px) {
  .menu { grid-template-columns: 1fr 1fr; }
  .menu__colonne:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 3.5rem); margin-top: 2.4rem; }
  .menu__colonne:nth-child(3) h3:first-child, .menu__colonne:nth-child(3) .plat + h3 { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .menu, .menu__colonne:nth-child(3) { grid-template-columns: 1fr; }
  .menu__colonne + .menu__colonne { margin-top: 2.4rem; }
}

/* ---------- Le bourg ---------- */
.affiche--frise .affiche__img { aspect-ratio: 16 / 7; }
.b-caps { font-family: var(--texte); font-weight: 700; font-stretch: 88%; }
.b-ital { font-family: var(--titre-italique); font-style: italic; font-weight: 600; }
.maisons { margin: clamp(2rem, 4vw, 3.2rem) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem clamp(1.6rem, 4vw, 3.5rem); }
.maisons div { border-top: 3px solid var(--ardoise); padding-top: 1rem; }
.maisons dt { font-family: var(--titre); font-weight: 800; font-size: 1.9rem; line-height: 1; margin-bottom: 0.5rem; }
.maisons dd { margin: 0; color: var(--ardoise-2); }
.maisons .lien { display: inline-block; margin-top: 0.6rem; }
@media (max-width: 820px) {
  .affiche--frise .affiche__img { aspect-ratio: 4 / 3; }
  .maisons { grid-template-columns: 1fr; }
}

/* ---------- Brocéliande ---------- */
.lieux { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 34em; }
.lieux li { border-top: 1px solid rgba(21, 38, 43, 0.22); }
.lieux li:last-child { border-bottom: 1px solid rgba(21, 38, 43, 0.22); }
.lieux a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 1.2rem; padding: 0.85rem 0; text-decoration: none; }
.lieux strong { font-family: var(--titre); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.lieux span { color: var(--ardoise-2); font-size: 0.97rem; }
@media (max-width: 520px) { .lieux a { flex-direction: column; } }
.lieux a:hover strong { color: var(--braise-texte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }

/* ---------- La devise ---------- */
.devise { background: var(--braise); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); }
.devise__rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; }
.devise__phrase { margin: 0; font-family: var(--titre); font-weight: 800; font-size: clamp(2.7rem, 7.2vw, 6rem); line-height: 0.9; letter-spacing: -0.008em; max-width: 8.6em; text-wrap: balance; }

/* ---------- Venir ---------- */
.venir { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.2rem, 6vw, 5rem) clamp(2.2rem, 7vw, 6rem); align-items: start; }
.venir address { margin-top: 1.4rem; font-family: var(--texte); font-stretch: 88%; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; }
.venir__tel { display: inline-block; margin-top: 0.9rem; font-family: var(--texte); font-stretch: 84%; font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1; color: var(--braise-texte); text-decoration: none; }
.venir__tel:hover { color: var(--ardoise); }
.venir__avis { margin: 1.3rem 0 1.8rem; color: var(--ardoise-2); max-width: 30em; }
.venir__avis strong { color: var(--ardoise); }

.horaires { background: var(--chaux); padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.3rem, 2.8vw, 2.2rem); box-shadow: 0 0 0 1px rgba(21, 38, 43, 0.16), 0 26px 40px -30px rgba(21, 38, 43, 0.55); }
.horaires h3 { font-size: 2.1rem; }
.statut--grand { margin: 0.5rem 0 1rem; font-size: 1.02rem; }
.horaires table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horaires th, .horaires td { padding: 0.55rem 0; border-top: 1px solid rgba(21, 38, 43, 0.16); font-weight: 400; text-align: left; }
.horaires td { text-align: right; }
.horaires tr.est-aujourdhui th, .horaires tr.est-aujourdhui td { font-weight: 700; }
.horaires tr.est-aujourdhui th::after { content: " · aujourd’hui"; font-weight: 400; color: var(--ardoise-2); }
.horaires__note { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(21, 38, 43, 0.16); font-size: 0.95rem; color: var(--ardoise-2); }

.plan { grid-column: 1 / -1; background: var(--chaux); min-height: 300px; display: grid; box-shadow: 0 0 0 1px rgba(21, 38, 43, 0.16); }
.plan__invite { align-self: center; justify-self: center; text-align: center; padding: 2.2rem var(--gouttiere); max-width: 34em; }
.plan__invite svg { color: var(--braise); }
.plan__invite p { margin: 0.5rem 0 1.2rem; font-size: 1.15rem; }
.plan__invite .actions { justify-content: center; }
.plan__invite .plan__note { margin: 1.2rem 0 0; font-size: 0.9rem; color: var(--ardoise-2); }
.plan iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 900px) {
  .venir { grid-template-columns: 1fr; }
}

/* ---------- Les lisières : la forêt entre deux parties ---------- */
/* Le dessin et le mouvement sont dans lisieres.js ; ici les encres de chaque passage :
   --de (la partie qu'on quitte), --c1 / --c2 (rangs du fond), --c3 (la partie où l'on entre). */
.lisiere {
  position: relative; z-index: 1; height: var(--lisiere); margin-bottom: -1px; pointer-events: none;
  overflow-x: clip; /* les lucioles peuvent déborder en haut et en bas, jamais sur les côtés (sinon la page glisse de travers sur téléphone) */
  background: linear-gradient(var(--de) 55%, var(--c3));
  --luciole: #ffdc7a; --voile: var(--chaux);
}
.lisiere:has(svg) { background: var(--de); }
.section:has(+ .lisiere), .devise:has(+ .lisiere) { padding-bottom: calc(var(--section) * 0.3); }
.lisiere--etang .lisiere__plan--brume { opacity: 0.6; }
.lisiere.grain::after { -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 60%, transparent 90%); mask-image: linear-gradient(transparent, #000 35%, #000 60%, transparent 90%); }
.lisiere__dessin { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.lisiere__plan { transform: translate3d(0, calc((1 - var(--avance, 1)) * var(--prof) * 1px), 0); }
.lisiere__plan--fond { fill: var(--c1); }
.lisiere__plan--milieu { fill: var(--c2); }
.lisiere__plan--devant { fill: var(--c3); }
.lisiere__plan--brume { fill: var(--voile); }
.lisiere__plan--habitants { fill: var(--habitant, var(--c3)); }
.lisiere__or { fill: var(--luciole); stroke: none; }
.lisiere__lame { fill: #fffbe6; }
.lisiere__magie { filter: drop-shadow(0 0 2.5px #ffe38f) drop-shadow(0 0 9px rgba(255, 214, 110, 0.85)); }
.lisiere__ecu { fill: var(--chaux); stroke: #8d7f93; stroke-width: 1.2; }
.lisiere__gueules { fill: none; stroke: var(--braise); stroke-width: 3.4; }
.lisiere__gueules--plein { fill: var(--braise); stroke: none; }
.lisiere__clair { fill: color-mix(in srgb, var(--habitant, var(--c3)) 45%, var(--c2)); }
.lisiere__lucioles { position: absolute; inset: -30% 0 -18%; z-index: 3; transform: translate3d(0, calc((0.5 - var(--avance, 0.5)) * 70px), 0); }
.luciole { position: absolute; border-radius: 50%; background: var(--luciole); box-shadow: 0 0 0 3px color-mix(in srgb, var(--luciole) 26%, transparent); opacity: 0; }

.lisiere--etang { position: absolute; inset: auto 0 0; --de: transparent; --c1: #2c2a4a; --c2: #8d86a6; --c3: var(--brume); --voile: #f6cf8e; }
.lisiere--tombee { --de: var(--brume); --c1: #b7c2c6; --c2: #7c6780; --c3: var(--prune); }
.lisiere--matin { --de: var(--prune); --c1: #6a4460; --c2: #d6aea0; --c3: var(--brume); --voile: #f6cf8e; --habitant: var(--chaux); }
.lisiere--sousbois { --de: var(--brume); --c1: #c3d6bd; --c2: #a3c19d; --c3: var(--brume); --luciole: #e9a92c; --habitant: #3f7350; }
.lisiere--braise { --de: var(--brume); --c1: #f6cf8e; --c2: #e68448; --c3: var(--braise); --luciole: #fff0b8; }
.lisiere--cendre { --de: var(--braise); --c1: var(--braise-2); --c2: #dba58d; --c3: var(--brume); --voile: #f6cf8e; }
.lisiere--nuit { --de: var(--brume); --c1: #b4c4bd; --c2: #547069; --c3: var(--ardoise); }

@media (prefers-reduced-motion: no-preference) {
  .lisiere__plan, .lisiere__lucioles { will-change: transform; }
  .est-en-vue .lisiere__nappe { animation: derive 24s ease-in-out infinite alternate; }
  .est-en-vue .lisiere__or { animation: lueur 3.2s ease-in-out infinite alternate; }
  @keyframes lueur { from { opacity: 0.7; } to { opacity: 1; } }
  .est-en-vue .lisiere__etoile { animation: etoile 1.7s ease-in-out infinite alternate; }
  @keyframes etoile { from { opacity: 0.15; } to { opacity: 1; } }
  .est-en-vue .luciole { animation: luciole var(--duree) ease-in-out var(--retard) infinite; }
  @keyframes derive { from { transform: translateX(calc(var(--sens) * -46px)); } to { transform: translateX(calc(var(--sens) * 46px)); } }
  @keyframes luciole {
    0% { transform: translate(0, 0); opacity: 0; }
    14% { opacity: 1; }
    46% { opacity: 0.85; }
    58% { transform: translate(var(--dx), var(--dy)); opacity: 0.15; }
    72% { opacity: 1; }
    100% { transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 2.1)); opacity: 0; }
  }

  /* avant Brocéliande, ce ne sont pas des lucioles : les feuilles de l'Arbre d'or s'envolent */
  .lisiere--sousbois.est-en-vue .luciole { border-radius: 0 100%; box-shadow: none; scale: 2.2; animation-name: feuille; animation-timing-function: linear; }
  @keyframes feuille {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    12%, 80% { opacity: 1; }
    50% { transform: translate(var(--dx), calc(var(--dy) * -0.5)) rotate(140deg); }
    100% { transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * -1.1)) rotate(300deg); opacity: 0; }
  }

  /* le contenu sort de la brume ; les affiches prennent leurs encres */
  .enchante .fondu { opacity: 0; filter: blur(8px); transition: opacity 0.45s ease var(--retard, 0s), filter 0.5s ease var(--retard, 0s); }
  .enchante .fondu.est-la { opacity: 1; filter: none; }
  .enchante .fondu .affiche__img, .enchante .fondu.affiche .affiche__img { filter: saturate(0) brightness(1.3) contrast(0.6); transition: filter 1.1s ease 0.15s; }
  .enchante .fondu.est-la .affiche__img { filter: none; }
}

/* ---------- Pied de page ---------- */
.pied { background: var(--ardoise); color: #c9d4d0; font-size: 0.95rem; }
.pied__grille { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 1.6rem clamp(1.6rem, 5vw, 4rem); padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.pied p { margin: 0; }
.pied__marque { font-family: var(--titre); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--chaux); margin-bottom: 0.5rem !important; }
.pied__legal { font-size: 0.85rem; color: #9fb0ab; }
@media (max-width: 820px) { .pied__grille { grid-template-columns: 1fr; } }

/* ---------- Barre d'action sur téléphone ---------- */
.barre { display: none; }
@media (max-width: 860px) {
  .barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
    background: var(--brume); border-top: 1px solid rgba(21, 38, 43, 0.16);
    transition: translate 0.25s ease, visibility 0.25s;
  }
  .barre[hidden] { display: grid; translate: 0 110%; visibility: hidden; }
  body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .entete, .barre, .plan, .accueil__actions, .actions { display: none !important; }
  body { background: #fff; }
}