/* ════════════════════════════════════════════════════════════
   Fox Hollow v2 — feuille de style commune (novembre 2026)
   Palette reprise de new.fox-hollow.eu ; deux jeux de couleurs :
   html[data-theme="jour"] et html[data-theme="nuit"].
   ════════════════════════════════════════════════════════════ */

:root {
  --moss-deep: #2E3B2A; --moss: #4A6244; --fern: #6B8059; --lichen: #8FA079;
  --bark-dark: #3D2A1C; --bark: #5C3A22; --leather: #8B5E3C; --tan: #B89373;
  --parchment: #F1E6CC; --paper-cream: #FAF3E0; --paper-aged: #E8DAB5;
  --foxi-rust: #B8552B; --foxi-deep: #8B3D1E;
  --gold-aged: #A87432; --amber: #C9974D; --honey: #E0B266;
  --ink: #2a1d12; --ink-soft: #4a3624;

  --police-titre: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --police-texte: "EB Garamond", Georgia, serif;
  --police-plume: "IM Fell English", "EB Garamond", Georgia, serif;

  --transition-theme: 900ms ease;
  --largeur-max: 1480px;
}

html[data-theme="jour"] {
  --fond-page: #2b3a27;
  --fond-bande: #33452e;
  --bois-clair: #7a5434; --bois-fonce: #4e3420;
  --texte-sur-bois: #f6e7c4;
  --titre-sur-fond: #f6e7c4;
  --lueur: rgba(224, 178, 102, .55);
  --voile-nuit: transparent;
}
html[data-theme="nuit"] {
  --fond-page: #12130f;
  --fond-bande: #1a1d16;
  --bois-clair: #3e2c1b; --bois-fonce: #1d150c;
  --texte-sur-bois: #f0d090;
  --titre-sur-fond: #f0d090;
  --lueur: rgba(230, 136, 59, .7);
  --voile-nuit: rgba(14, 22, 40, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--fond-page);
  color: var(--paper-cream);
  font-family: var(--police-texte);
  font-size: 1.125rem;
  line-height: 1.55;
  transition: background-color var(--transition-theme);
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }

.fh-masque {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.fh-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--parchment); color: var(--ink); padding: .5rem 1rem; border-radius: 4px;
}
.fh-evitement:focus { top: 1rem; }

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

/* ─────────────── En-tête et menu ─────────────── */

.fh-entete {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem clamp(.75rem, 2vw, 2rem);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--bois-clair), var(--bois-fonce));
  border-bottom: 3px solid #2a1c10;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: background var(--transition-theme);
}
.fh-marque {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
  color: var(--texte-sur-bois); text-decoration: none;
  font-family: var(--police-titre); font-size: 1.35rem; letter-spacing: .02em;
}
.fh-trefle { width: 30px; height: 30px; color: #6f9a4f; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

.fh-nav { margin-left: auto; }
.fh-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .45rem; align-items: center; }
.fh-menu__item { position: relative; }

.fh-planche {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .9rem .4rem;
  font-family: var(--police-titre); font-size: 1.02rem; line-height: 1.1;
  color: var(--texte-sur-bois); text-decoration: none; white-space: nowrap;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #8a603b, #5c3a22);
  border: 1px solid #2f1f12; border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,230,180,.25), 0 2px 3px rgba(0,0,0,.45);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s, color .2s;
}
html[data-theme="nuit"] .fh-planche { background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 5px), linear-gradient(180deg, #4a3320, #2a1c10); }
.fh-planche:hover, .fh-planche:focus-visible, .fh-menu__item.is-active > .fh-planche, .fh-planche[aria-expanded="true"] {
  color: #fff3d0;
  box-shadow: inset 0 1px 0 rgba(255,230,180,.3), 0 0 14px var(--lueur), 0 2px 3px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
.fh-chevron { width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.fh-planche[aria-expanded="true"] .fh-chevron { transform: rotate(-135deg) translateY(-2px); }

.fh-sous-menu {
  list-style: none; margin: 0; padding: .4rem 0;
  position: absolute; top: calc(100% + .5rem); left: 50%; min-width: 210px;
  transform: translate(-50%, -6px);
  background: var(--parchment); color: var(--ink);
  border: 1px solid var(--gold-aged); border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
}
.fh-menu__item--parent.is-ouvert > .fh-sous-menu,
.fh-menu__item--parent:focus-within > .fh-sous-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 1101px) {
  .fh-menu__item--parent:hover > .fh-sous-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
.fh-sous-menu a {
  display: block; padding: .5rem 1.1rem; text-decoration: none;
  font-family: var(--police-plume); font-size: 1.05rem; color: var(--ink);
}
.fh-sous-menu a:hover, .fh-sous-menu a:focus-visible, .fh-sous-menu a[aria-current] { background: rgba(184,85,43,.15); color: var(--foxi-deep); }

.fh-theme {
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
  padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid rgba(246,231,196,.4); background: rgba(0,0,0,.2);
  color: var(--texte-sur-bois); font-family: var(--police-texte); font-size: .95rem; cursor: pointer;
}
.fh-theme:hover { box-shadow: 0 0 12px var(--lueur); }
.fh-theme__icone { width: 20px; height: 20px; display: none; }
html[data-theme-mode="auto"] .fh-theme__icone--auto,
html[data-theme-mode="jour"] .fh-theme__icone--jour,
html[data-theme-mode="nuit"] .fh-theme__icone--nuit { display: block; }

.fh-burger {
  display: none; margin-left: auto; align-items: center; gap: .5rem;
  padding: .45rem .8rem; border-radius: 5px; border: 1px solid #2f1f12;
  background: linear-gradient(180deg, #8a603b, #5c3a22); color: var(--texte-sur-bois);
  font-family: var(--police-titre); font-size: 1rem; cursor: pointer;
}
.fh-burger__barres, .fh-burger__barres::before, .fh-burger__barres::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
}
.fh-burger__barres::before { position: absolute; top: -6px; }
.fh-burger__barres::after { position: absolute; top: 6px; }

@media (max-width: 1100px) {
  .fh-burger { display: inline-flex; }
  .fh-theme__texte { display: none; }
  .fh-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: linear-gradient(180deg, var(--bois-clair), var(--bois-fonce));
    border-bottom: 3px solid #2a1c10; box-shadow: 0 14px 24px rgba(0,0,0,.5);
    padding: .75rem 1rem 1rem; display: none;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .fh-entete.is-menu-ouvert .fh-nav { display: block; }
  .fh-menu { flex-direction: column; align-items: stretch; gap: .5rem; }
  .fh-planche { width: 100%; justify-content: space-between; font-size: 1.1rem; padding: .7rem 1rem; }
  .fh-sous-menu { position: static; transform: none; min-width: 0; margin-top: .4rem; display: none; opacity: 1; visibility: visible; }
  .fh-menu__item--parent.is-ouvert > .fh-sous-menu { display: block; transform: none; }
  .fh-menu__item--parent:focus-within > .fh-sous-menu { transform: none; }
}

/* ─────────────── Décors jour / nuit ─────────────── */

.fh-decor { position: relative; overflow: hidden; }
.fh-decor img { display: block; width: 100%; height: auto; }
.fh-decor__jour { transition: filter var(--transition-theme); }
.fh-decor__nuit {
  position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover;
  opacity: 0; transition: opacity var(--transition-theme);
}
html[data-theme="nuit"] .fh-decor__nuit { opacity: 1; }
/* Pas d'image de nuit : l'image de jour est assombrie et bleuie. */
html[data-theme="nuit"] .fh-decor--nuit-auto .fh-decor__jour { filter: brightness(.58) saturate(.8) hue-rotate(-6deg); }
/* Parchemins qui portent du texte : nuit « à la bougie », plus douce, pour rester lisible. */
html[data-theme="nuit"] .fh-cadre__scene .fh-decor--nuit-auto .fh-decor__jour { filter: brightness(.86) sepia(.25) saturate(.9); }
.fh-cadre__scene .fh-decor--nuit-auto::after { background: transparent; }
html[data-theme="nuit"] .fh-cadre__scene .fh-decor--nuit-auto::after { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(20,12,4,.45)); }
.fh-decor--nuit-auto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--voile-nuit); transition: background var(--transition-theme);
}

/* Fonds d'image (sections pleine largeur) */
.fh-fond { position: relative; isolation: isolate; }
.fh-fond::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fond-jour) center / cover no-repeat;
  transition: filter var(--transition-theme);
}
html[data-theme="nuit"] .fh-fond::before { background-image: var(--fond-nuit); }
html[data-theme="nuit"] .fh-fond--nuit-auto .fh-fond::before,
html[data-theme="nuit"] .fh-fond--nuit-auto.fh-fond::before { filter: brightness(.55) saturate(.8) hue-rotate(-6deg); }

/* ─────────────── Éléments communs ─────────────── */

.fh-section { max-width: var(--largeur-max); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem); }
.fh-titre-section {
  margin: 0 0 .35rem; text-align: center;
  font-family: var(--police-titre); font-weight: 400; letter-spacing: .03em;
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1;
  color: var(--titre-sur-fond); text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.fh-sous-titre { margin: 0 0 1.5rem; text-align: center; font-style: italic; color: var(--paper-aged); }
.fh-kicker { margin: 0; font-family: var(--police-titre); color: var(--foxi-rust); letter-spacing: .06em; }
.fh-lien-plume {
  font-family: var(--police-plume); font-style: italic; color: var(--foxi-deep);
  text-decoration: underline; text-decoration-color: rgba(184,85,43,.4); text-underline-offset: .2em;
}
.fh-lien-plume::after { content: " ❧"; text-decoration: none; display: inline-block; margin-left: .2em; }
.fh-lien-plume:hover { color: var(--foxi-rust); text-decoration-color: currentColor; }

.fh-bouton-bois {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.4rem; border: 1px solid #2f1f12; border-radius: 6px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 5px), linear-gradient(180deg, #8a603b, #5c3a22);
  color: #f6e7c4; font-family: var(--police-titre); font-size: 1.1rem; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,230,180,.25), 0 3px 6px rgba(0,0,0,.45);
  transition: box-shadow .2s, transform .2s;
}
.fh-bouton-bois::after { content: "☘"; color: #7fae5a; font-size: 1.1em; }
.fh-bouton-bois:hover, .fh-bouton-bois:focus-visible { box-shadow: inset 0 1px 0 rgba(255,230,180,.3), 0 0 16px var(--lueur); transform: translateY(-1px); }

.fh-bouton-parchemin {
  display: inline-block; padding: .9rem 1.8rem;
  background: linear-gradient(180deg, #f6ecd2, #e2cfa2); color: var(--ink);
  border: 1px solid #8b6a3e; border-radius: 3px;
  font-family: var(--police-titre); font-size: clamp(1.1rem, 1.6vw, 1.45rem); text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 0 4px rgba(139,106,62,.18);
  transition: box-shadow .2s, transform .2s;
}
.fh-bouton-parchemin:hover, .fh-bouton-parchemin:focus-visible { box-shadow: 0 0 22px var(--lueur), inset 0 0 0 4px rgba(139,106,62,.25); transform: translateY(-2px); }

.fh-message { margin: 0 0 .6rem; padding: .45rem .7rem; border-radius: 4px; font-size: .95em; }
.fh-message--ok { background: rgba(107,128,89,.2); color: #2f4a22; border: 1px solid rgba(74,98,68,.5); }
.fh-message--erreur { background: rgba(184,85,43,.14); color: var(--foxi-deep); border: 1px solid rgba(184,85,43,.5); }
.fh-note-atelier { font-size: .9rem; font-style: italic; color: var(--honey); text-align: center; }

/* Champs « parchemin » */
.fh-form-gazette input, .fh-planchette input[type="text"], .fh-planchette input[type="email"] {
  width: 100%; padding: .55rem .75rem;
  background: linear-gradient(180deg, #f8efd8, #eadbb6); color: var(--ink);
  border: 1px solid #9b7a4c; border-radius: 4px;
  font-family: var(--police-plume); font-size: 1.05rem;
  box-shadow: inset 0 1px 3px rgba(60,40,20,.25);
}
.fh-form-gazette input::placeholder { color: #8a7458; font-style: italic; }
.fh-piege { position: absolute !important; left: -9999px; }

/* ─────────────── 1. Vue du Vallon ─────────────── */

.fh-hero { position: relative; background: #1d2418; }
.fh-hero__calque { position: absolute; inset: 0; pointer-events: none; }
.fh-hero__calque > * { pointer-events: auto; }
.fh-logo {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  margin: 0; text-align: center; line-height: .9;
  font-family: var(--police-titre); font-weight: 400;
  color: #2b1d10; text-shadow: 0 0 18px rgba(250,240,210,.85), 0 0 2px rgba(250,240,210,.9);
  transition: color var(--transition-theme), text-shadow var(--transition-theme);
}
html[data-theme="nuit"] .fh-logo { color: #f3dfae; text-shadow: 0 0 20px rgba(230,136,59,.7), 0 2px 4px rgba(0,0,0,.8); }
.fh-logo__nom { display: block; font-size: clamp(2.6rem, 8vw, 7.5rem); }
.fh-logo__devise { display: block; margin-top: .35em; font-size: clamp(1rem, 2.4vw, 2.2rem); letter-spacing: .08em; }
.fh-hero__foxi { position: absolute; left: 24%; bottom: 0; height: 64%; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.fh-hero__entrer { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); }
.fh-hero__entrer:hover, .fh-hero__entrer:focus-visible { transform: translate(-50%, -2px); }
/* Image provisoire : logo, Foxi et bouton sont déjà peints dans l'image.
   Le bouton devient une zone cliquable transparente posée sur le parchemin peint. */
.fh-hero--integre .fh-hero__entrer {
  left: 45.5%; bottom: 1%; width: 14.5%; height: 14%; transform: none; padding: 0;
  background: transparent; border: 0; box-shadow: none; color: transparent; overflow: hidden; border-radius: 4px;
}
.fh-hero--integre .fh-hero__entrer:hover, .fh-hero--integre .fh-hero__entrer:focus-visible { box-shadow: 0 0 24px var(--lueur); background: rgba(230,136,59,.12); transform: none; }

@media (max-width: 760px) {
  .fh-hero .fh-decor img { height: 70vh; min-height: 420px; object-fit: cover; object-position: 38% center; }
  .fh-hero--integre .fh-decor img { object-position: 50% center; }
  .fh-hero__foxi { left: 2%; height: 48%; }
  .fh-logo { top: 8%; width: 92%; }
  .fh-hero--integre .fh-hero__entrer, .fh-hero__entrer {
    left: 50%; bottom: 5%; width: auto; height: auto; transform: translateX(-50%);
    padding: .9rem 1.8rem; white-space: nowrap; color: var(--ink); background: linear-gradient(180deg, #f6ecd2, #e2cfa2);
    border: 1px solid #8b6a3e; box-shadow: 0 6px 16px rgba(0,0,0,.45);
  }
}

/* ─────────────── 2. Les trois cadres ─────────────── */

.fh-cadres {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: clamp(.8rem, 1.6vw, 1.6rem);
  align-items: start;
  max-width: var(--largeur-max); margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(.75rem, 2vw, 2rem);
  background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%);
}
.fh-cadre__titre {
  margin: 0 0 .7rem; text-align: center;
  font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.9rem);
  color: var(--titre-sur-fond); text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.fh-cadre__scene { position: relative; container-type: inline-size; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.5); color: var(--ink); }

/* Livre : deux pages */
.fh-livre__page { position: absolute; top: 8%; bottom: 8%; display: flex; flex-direction: column; justify-content: center; gap: .6em; font-size: clamp(.78rem, 2.45cqw, 1.12rem); }
.fh-livre__page--gauche { left: 11%; width: 36%; text-align: center; }
.fh-livre__page--droite { left: 55%; width: 35%; }
.fh-livre__titre { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: 1.75em; line-height: 1.05; color: var(--bark-dark); }
.fh-lettrine { margin: 0; font-family: var(--police-plume); font-style: italic; color: var(--ink-soft); }
.fh-livre__extrait { margin: 0; font-family: var(--police-texte); line-height: 1.45; }

/* Feuille de Gazette : formulaire */
.fh-feuille { position: absolute; inset: 9% 11%; display: flex; flex-direction: column; justify-content: center; gap: .5em; font-size: clamp(.8rem, 3.3cqw, 1.08rem); text-align: center; }
.fh-feuille__titre { margin: 0; font-family: var(--police-titre); font-size: 1.45em; color: var(--bark-dark); line-height: 1.1; }
.fh-feuille__texte { margin: 0; font-style: italic; color: var(--ink-soft); }
.fh-form-gazette { display: flex; flex-direction: column; gap: .5em; margin-top: .4em; }
.fh-form-gazette label { display: block; }
.fh-form-gazette .fh-bouton-bois { font-size: 1em; padding: .55em 1em; }

/* Fiche habitant */
.fh-fiche { position: absolute; inset: 8% 7%; display: grid; grid-template-columns: 44% 1fr; gap: 6%; align-items: center; text-decoration: none; color: var(--ink); font-size: clamp(.75rem, 3cqw, 1.05rem); }
.fh-fiche__ovale {
  display: block; aspect-ratio: 3 / 4.4; border-radius: 50%;
  border: .45em solid #a0782f; outline: .12em solid #5c3a22; outline-offset: .2em;
  background: radial-gradient(ellipse at center, #fbf3df 40%, #eadbb6);
  overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 0 12px rgba(92,58,34,.35);
}
.fh-fiche__ovale img { width: 88%; height: 88%; object-fit: contain; transition: transform .3s; }
.fh-fiche:hover .fh-fiche__ovale img { transform: scale(1.04); }
.fh-fiche__infos { display: flex; flex-direction: column; gap: .15em; }
.fh-fiche__label { font-family: var(--police-titre); color: var(--bark-dark); font-size: .95em; margin-top: .5em; }
.fh-fiche__valeur { font-family: var(--police-plume); font-style: italic; color: var(--foxi-deep); font-size: 1.12em; line-height: 1.2; border: 1px solid rgba(92,58,34,.45); border-radius: 3px; padding: .35em .5em; background: rgba(255,250,235,.35); }
.fh-fiche__nom { font-size: 1.3em; }
.fh-fiche__village { margin-top: .6em; font-size: .9em; color: var(--ink-soft); }
.fh-fiche--vide .fh-fiche__valeur { border: 0; background: none; }

@media (max-width: 1100px) {
  .fh-cadres { grid-template-columns: 1fr 1fr; }
  .fh-cadres > :first-child { grid-column: 1 / -1; max-width: 760px; justify-self: center; width: 100%; }
}
@media (max-width: 640px) {
  .fh-cadres { grid-template-columns: 1fr; }
}

/* ─────────────── 3. Carte ─────────────── */

.fh-carte { background: radial-gradient(ellipse at top, rgba(255,255,255,.04), transparent 60%); }
.fh-carte__plan { position: relative; max-width: 1300px; margin: 0 auto; border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.fh-zone {
  position: absolute; display: block; border-radius: 45%;
  transition: background .2s, box-shadow .2s;
}
.fh-zone:hover, .fh-zone:focus-visible, .fh-zone.is-ouverte {
  background: radial-gradient(ellipse, rgba(230,160,70,.28), transparent 70%);
  box-shadow: 0 0 26px var(--lueur);
  outline: none; z-index: 3;
}
.fh-zone__etiquette {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(calc(-50% + var(--decalage, 0px)), 6px);
  width: max-content; max-width: min(280px, 70vw);
  padding: .55rem .8rem; border-radius: 4px;
  background: var(--parchment); color: var(--ink); border: 1px solid var(--gold-aged);
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  font-size: .95rem; line-height: 1.35; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.fh-zone__etiquette strong { display: block; font-family: var(--police-titre); font-weight: 400; font-size: 1.15rem; color: var(--bark-dark); }
.fh-zone__etiquette span { display: block; font-style: italic; color: var(--ink-soft); margin-top: .2rem; }
.fh-zone:hover .fh-zone__etiquette, .fh-zone:focus-visible .fh-zone__etiquette, .fh-zone.is-ouverte .fh-zone__etiquette { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--decalage, 0px)), 0); }
.fh-zone--bas .fh-zone__etiquette { bottom: auto; top: calc(100% + 8px); }

.is-calibrage .fh-zone { border-radius: 4px; outline: 2px dashed #8cf; background: rgba(140,200,255,.18); cursor: move; touch-action: none; }
.is-calibrage .fh-zone .fh-zone__etiquette { opacity: 1; visibility: visible; }
.fh-poignee { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; background: #8cf; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
.fh-calibrage-aide { max-width: 1300px; margin: 1rem auto 0; padding: .6rem 1rem; background: #20324a; color: #dbeaff; border-radius: 4px; font-size: .95rem; }

/* ─────────────── 3b. Brigade du Chocolat Chaud ─────────────── */

.fh-brigade {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) max(clamp(1rem, 4vw, 3rem), calc((100% - var(--largeur-max)) / 2));
  min-height: 520px;
}
.fh-brigade--sans-decor {
  background:
    radial-gradient(ellipse at 70% 60%, rgba(224,150,70,.35), transparent 55%),
    radial-gradient(ellipse at 20% 30%, rgba(255,220,160,.12), transparent 50%),
    linear-gradient(180deg, #4a2f1c, #2a1a0e);
}
html[data-theme="nuit"] .fh-brigade--sans-decor { background: radial-gradient(ellipse at 70% 60%, rgba(224,150,70,.28), transparent 55%), linear-gradient(180deg, #24170d, #120c06); }
.fh-brigade__banniere {
  position: relative; padding: clamp(1.4rem, 3vw, 2.4rem);
  background: linear-gradient(180deg, #f8efd8, #ead9b0); color: var(--ink);
  border-radius: 3px; box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 0 0 6px rgba(139,106,62,.15);
}
.fh-brigade__banniere::before { /* tringle */
  content: ""; position: absolute; left: -10px; right: -10px; top: -14px; height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #8a603b, #4e3420); box-shadow: 0 3px 5px rgba(0,0,0,.4);
}
.fh-brigade__banniere .fh-titre-section { color: var(--bark-dark); text-shadow: none; text-align: left; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.fh-brigade__banniere p { margin: .6rem 0; }
.fh-rituel { margin: 1rem 0; padding-left: 1.4rem; }
.fh-rituel li { margin: .35rem 0; }
.fh-rituel li::marker { font-family: var(--police-titre); color: var(--foxi-rust); }

.fh-planchette {
  display: flex; flex-direction: column; gap: .75rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 6px), linear-gradient(180deg, #6b4a2e, #43301d);
  color: #f6e7c4; border: 1px solid #2a1c10; border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,180,.2);
}
.fh-planchette h3 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: 1.6rem; color: var(--honey); }
.fh-planchette label { display: flex; flex-direction: column; gap: .25rem; }
.fh-age { border: 1px solid rgba(246,231,196,.35); border-radius: 5px; padding: .5rem .8rem; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fh-age legend { padding: 0 .3rem; }
.fh-age label, .fh-accord { flex-direction: row !important; align-items: center; gap: .45rem !important; }
.fh-accord[hidden] { display: none; }
.fh-planchette .fh-message--ok { color: #dff0c9; background: rgba(107,128,89,.35); }
.fh-planchette .fh-message--erreur { color: #ffd9c4; background: rgba(184,85,43,.35); }
.fh-mentions { margin: 0; font-size: .88rem; font-style: italic; color: rgba(246,231,196,.75); }

@media (max-width: 900px) { .fh-brigade { grid-template-columns: 1fr; } }

/* ─────────────── 4. Comptoir ─────────────── */

.fh-comptoir { background: linear-gradient(180deg, #2a1c10, #1c130b); }
.fh-comptoir__etageres {
  display: grid; place-items: start center;
  min-height: clamp(200px, 23vw, 470px);
  padding-top: clamp(1rem, 2.5vw, 2.2rem);
}
.fh-comptoir__planche {
  max-width: var(--largeur-max); margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 14px);
}
.fh-produits {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem);
}
.fh-produit {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  aspect-ratio: 3 / 4.2; padding: 14% 12%;
  background:
    radial-gradient(ellipse 62% 48% at 50% 50%, rgba(250,243,224,.82), rgba(250,243,224,.55) 60%, transparent 85%),
    var(--carte-produit) center / 100% 100% no-repeat;
  color: var(--ink); filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
  transition: transform .25s;
}
.fh-produit:hover { transform: translateY(-4px) rotate(-.4deg); }
.fh-produit img { max-height: 40%; object-fit: contain; }
.fh-produit h3 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.15; color: var(--bark-dark); }
.fh-produit p { margin: 0; font-style: italic; color: var(--ink-soft); font-size: 1rem; }
.fh-produit__prix { font-style: normal !important; font-family: var(--police-titre); font-size: 1.25rem !important; color: var(--foxi-deep) !important; }
html[data-theme="nuit"] .fh-produit { filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) brightness(.88); }
@media (max-width: 1000px) { .fh-produits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fh-produits { grid-template-columns: 1fr; max-width: 250px; margin-inline: auto; } }

/* ─────────────── 5. Gazette (bas de page) ─────────────── */

.fh-gazette-pied {
  display: grid; place-items: center;
  min-height: clamp(300px, 21vw, 460px);
  padding: 2rem 1rem; text-align: center;
}
.fh-gazette-pied__contenu { max-width: 720px; }
.fh-gazette-pied .fh-titre-section { color: #f0d6a0; }
.fh-gazette-pied__phrase { margin: 0 0 1.1rem; font-family: var(--police-plume); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: #f3e3bd; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.fh-form-gazette--en-ligne { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.fh-form-gazette--en-ligne label { flex: 1 1 200px; max-width: 260px; }
.fh-form-gazette--en-ligne .fh-bouton-bois { flex: 0 0 auto; font-size: 1.15rem; padding: .65rem 1.5rem; }
.fh-form-gazette--en-ligne .fh-message { flex-basis: 100%; }
.fh-gazette-pied .fh-message--ok { color: #e7f5d4; background: rgba(74,98,68,.55); }
.fh-gazette-pied .fh-message--erreur { color: #ffe0cf; background: rgba(139,61,30,.55); }

/* ─────────────── Pied de page ─────────────── */

.fh-pied {
  background: linear-gradient(180deg, #1f160d, #120c07); color: #e8d7b0;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 1.5rem; font-size: 1rem;
  border-top: 3px solid #3a2a1a;
}
.fh-pied__colonnes { max-width: var(--largeur-max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.fh-pied h2 { margin: 0 0 .6rem; font-family: var(--police-titre); font-weight: 400; font-size: 1.3rem; color: var(--honey); }
.fh-pied ul { list-style: none; margin: 0; padding: 0; }
.fh-pied li { margin: .3rem 0; }
.fh-pied a { color: #f0d090; text-decoration-color: rgba(240,208,144,.35); }
.fh-pied a:hover { color: #fff3d0; }
.fh-pied__legal { max-width: var(--largeur-max); margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(232,215,176,.18); text-align: center; font-size: .92rem; color: rgba(232,215,176,.75); }
.fh-pied__legal p { margin: .3rem 0; }