/* ==========================================================================
   Grandris — the place to BEE · styles.css
   Site vitrine one-page · brand book 2026 · mobile-first
   ========================================================================== */

/* ===== Fontes auto-hébergées (RGPD) ===== */
@font-face { font-family: "Young Serif"; src: url("../assets/fonts/young-serif-v2-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../assets/fonts/lora-v37-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../assets/fonts/lora-v37-latin_latin-ext-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../assets/fonts/work-sans-v24-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../assets/fonts/work-sans-v24-latin_latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ===== Design tokens — brand book 2026 ===== */
:root {
  /* Principales */
  --miel-dore:   #C8962E;
  --brun-ruche:  #3A2312;
  --creme-cire:  #FDF8EE;
  --bois-chaud:  #5C3A1E;
  /* Accents */
  --miel-clair:  #E8C46A;
  --pollen:      #F5E6B8;
  --foret:       #5B6F45;
  --tilleul:     #8FA272;
  /* Neutres */
  --charbon:     #2D2A26;
  --gris-chaud:  #A89B8C;
  --kraft:       #C4A97D;
  --blanc-nat:   #FEFCF7;

  /* Rôles sémantiques */
  --bg-page:        var(--creme-cire);
  --bg-carte:       var(--blanc-nat);
  --bg-inverse:     var(--brun-ruche);
  --bg-encart:      var(--pollen);
  --txt-titre:      var(--brun-ruche);
  --txt-soustitre:  var(--bois-chaud);
  --txt-corps:      var(--charbon);
  --txt-label:      var(--bois-chaud); /* AA : Miel Doré (2.52:1) interdit en texte sur clair */
  --txt-inverse:    var(--creme-cire);
  --accent-inverse: var(--miel-clair);
  --filet:          var(--miel-dore);
  --hairline:       color-mix(in srgb, var(--kraft) 55%, transparent);

  /* Typo */
  --f-titre: "Young Serif", "Iowan Old Style", Georgia, serif;
  --f-corps: "Lora", Georgia, "Times New Roman", serif;
  --f-ui:    "Work Sans", -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-hero:  clamp(2.5rem, 1.4rem + 5vw, 4.25rem);
  --fs-h2:    clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --fs-h3:    clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-lead:  clamp(1.125rem, 1rem + .55vw, 1.375rem);
  --fs-corps: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-ui:    clamp(.875rem, .84rem + .15vw, .9375rem);
  --fs-label: clamp(.75rem, .72rem + .12vw, .8125rem);
  --fs-legal: .875rem;

  --lh-titre: 1.15;
  --lh-corps: 1.7;
  --ls-label: .14em;

  /* Espacements */
  --sp-1: .5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4.5rem;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --largeur-contenu: 72rem;
  --largeur-prose:   42rem;

  /* Rayons */
  --r-carte: 10px;
  --r-photo: 14px;
  --r-pill:  999px;

  /* Ombres */
  --ombre-carte: 0 1px 2px rgba(58,35,18,.05), 0 6px 18px -8px rgba(58,35,18,.10);
  --ombre-hover: 0 2px 4px rgba(58,35,18,.06), 0 14px 30px -12px rgba(58,35,18,.16);

  --h-entete: 88px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--txt-corps);
  font-family: var(--f-corps);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
}
h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: var(--lh-titre);
  color: var(--txt-titre);
  margin: 0 0 var(--sp-2);
}
p { margin: 0 0 var(--sp-2); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bois-chaud); }
ul { margin: 0; padding: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--bois-chaud); outline-offset: 3px; }
.section-inverse :focus-visible,
.entete-panneau :focus-visible,
.pied :focus-visible { outline-color: var(--miel-clair); }

section[id], footer[id], div[id] { scroll-margin-top: 88px; }

/* ===== Utilitaires ===== */
.conteneur {
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: .75rem; left: .75rem; z-index: 200;
  background: var(--brun-ruche); color: var(--creme-cire);
  font-family: var(--f-ui); font-size: 1rem; text-decoration: none;
  padding: .9rem 1.4rem; border-radius: var(--r-pill);
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--miel-clair); }

.eyebrow {
  font-family: var(--f-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-label); font-size: var(--fs-label);
  color: var(--txt-label);
  display: inline-flex; align-items: center; gap: .55em;
  margin: 0 0 var(--sp-2);
}
.eyebrow .ico { color: var(--miel-dore); flex: none; }
.section-inverse .eyebrow { color: var(--accent-inverse); }
.section-inverse .eyebrow .ico { color: var(--accent-inverse); }

.ico { display: inline-block; vertical-align: middle; }

.sous-titre {
  font-family: var(--f-corps); font-style: italic;
  font-size: var(--fs-lead); color: var(--txt-soustitre);
  margin: 0 0 var(--sp-3);
}
.section-inverse .sous-titre { color: var(--miel-clair); }

.entete-section { margin-bottom: var(--sp-5); }
.entete-section.centre { text-align: center; }
.entete-section h2 { font-size: var(--fs-h2); }
.prose { max-width: var(--largeur-prose); }
.prose p { max-width: 68ch; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--f-ui); font-weight: 700; font-size: 1rem;
  text-decoration: none; border-radius: var(--r-pill);
  padding: .85rem 1.75rem; min-height: 48px;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-primaire { background: var(--brun-ruche); color: var(--creme-cire); }
.btn-primaire:hover, .btn-primaire:active { background: var(--bois-chaud); }
.btn-secondaire { border-color: var(--miel-dore); color: var(--bois-chaud); background: transparent; }
.btn-secondaire:hover, .btn-secondaire:active { background: color-mix(in srgb, var(--pollen) 40%, transparent); }
.btn-or { background: var(--miel-dore); color: var(--brun-ruche); }
.btn-or:hover, .btn-or:active { background: var(--miel-clair); }

/* Filet double or (signature étiquette) */
.filet-double {
  border: 1px solid var(--miel-dore);
  outline: 1px solid var(--miel-dore);
  outline-offset: 4px;
  background: var(--bg-carte);
}

/* Séparateur hexagonal standard */
.separateur {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 36rem; margin-inline: auto;
  padding-inline: var(--sp-3);
  color: var(--miel-dore);
  height: 28px;
}
.separateur::before, .separateur::after {
  content: ""; flex: 1; border-top: 1px solid var(--hairline);
}
.separateur svg { flex: none; }

/* Sections : rythme des fonds */
.section { padding-block: var(--sp-section); }
.fond-creme { background: var(--creme-cire); }
.fond-blanc { background: var(--blanc-nat); }
.section-inverse { background: var(--bg-inverse); color: var(--txt-inverse); }
.section-inverse h2, .section-inverse h3 { color: var(--txt-inverse); }
.section-inverse p { color: color-mix(in srgb, var(--creme-cire) 88%, transparent); }
.section-inverse a { color: var(--miel-clair); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--creme-cire) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.entete.reduit {
  background: color-mix(in srgb, var(--creme-cire) 98%, transparent);
  border-bottom-color: var(--hairline);
}
.entete-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: var(--h-entete);
}
.marque {
  display: inline-flex; align-items: center; gap: .85rem;
  text-decoration: none; color: var(--brun-ruche);
  font-family: var(--f-titre); font-size: 1.25rem;
}
.marque img {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--blanc-nat);
  box-shadow: 0 0 0 1px var(--hairline); /* masque les coins du PNG, pas une ombre portée */
}
.marque .nom-marque { line-height: 1.2; }
.marque .nom-marque small { display: block; font-family: var(--f-ui); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bois-chaud); }

.nav-liens {
  display: none;
  list-style: none; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.nav-liens a:not(.btn) {
  font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-ui);
  color: var(--charbon); text-decoration: none;
  padding: .5rem 0; position: relative;
}
.nav-liens a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--miel-dore);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms ease;
}
.nav-liens a:not(.btn):hover::after,
.nav-liens a[aria-current]::after { transform: scaleX(1); }
.nav-liens .btn { padding: .55rem 1.25rem; min-height: 44px; font-size: var(--fs-ui); }

/* Burger */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--brun-ruche);
}
.burger svg { pointer-events: none; }
.burger .ico-fermer { display: none; }
.burger[aria-expanded="true"] .ico-ouvrir { display: none; }
.burger[aria-expanded="true"] .ico-fermer { display: block; }

/* Panneau mobile plein écran */
.entete-panneau {
  display: none;
  position: fixed; inset: var(--h-entete) 0 0 0; z-index: 90;
  background: var(--brun-ruche);
  overflow-y: auto;
  padding: var(--sp-5) clamp(1.25rem, 6vw, 2.5rem);
}
.burger[aria-expanded="true"] + .entete-panneau { display: block; }
.entete-panneau ul { list-style: none; display: grid; gap: .25rem; }
.entete-panneau a:not(.btn) {
  display: block; padding: .9rem 0; min-height: 56px;
  font-family: var(--f-titre); font-size: var(--fs-h3);
  color: var(--creme-cire); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--miel-clair) 25%, transparent);
}
.entete-panneau a[aria-current] { color: var(--miel-clair); }
.entete-panneau .btn { margin-top: var(--sp-4); width: 100%; }
body.menu-ouvert { overflow: hidden; }

@media (min-width: 900px) {
  .nav-liens { display: flex; }
  .burger, .entete-panneau { display: none; }
  .burger[aria-expanded="true"] + .entete-panneau { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: center;
  padding-block: var(--sp-6) var(--sp-5);
  overflow: hidden;
}
.hero-filigrane {
  position: absolute; inset: 0; pointer-events: none;
  color: var(--miel-dore); opacity: .06;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 40%, transparent 100%);
}
.hero-grille {
  position: relative;
  display: grid; gap: var(--sp-5);
  align-items: center;
  width: 100%;
}
.hero h1 {
  font-size: var(--fs-hero);
  margin-bottom: var(--sp-3);
}
.hero .souligne { position: relative; white-space: nowrap; }
.hero .souligne svg {
  position: absolute; left: 0; right: 0; bottom: -.12em;
  width: 100%; height: .18em; color: var(--miel-dore);
}
.hero .souligne path {
  stroke-dasharray: 210; stroke-dashoffset: 210;
  animation: tracer 900ms cubic-bezier(.25,.6,.3,1) 400ms forwards;
}
@keyframes tracer { to { stroke-dashoffset: 0; } }
.hero .chapo { font-size: var(--fs-lead); max-width: 34rem; margin-bottom: var(--sp-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.hero-visuel { position: relative; justify-self: center; width: min(100%, 26rem); }
.hero-visuel .cercle-decor {
  position: absolute; top: -16px; right: -16px;
  width: 38%; height: auto; color: var(--miel-dore);
  pointer-events: none;
}
.hero-visuel .brin-decor {
  position: absolute; bottom: -14px; left: -18px;
  width: 5rem; color: var(--tilleul); pointer-events: none;
}
.cadre-etiquette {
  position: relative;
  border: 1px solid var(--miel-dore);
  outline: 1px solid var(--miel-dore); outline-offset: 6px;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--blanc-nat);
}
.cadre-etiquette img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 55% 18%;
}
.hero-meta {
  position: relative;
  margin-top: var(--sp-5);
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: .06em; color: var(--bois-chaud);
}
.hero-meta .ico { color: var(--miel-dore); }

@media (min-width: 900px) {
  .hero-grille { grid-template-columns: 55fr 45fr; }
  .hero-visuel { width: min(100%, 30rem); }
  .cadre-etiquette img { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Bandeau de réassurance
   ========================================================================== */
.reassurance { padding-block: var(--sp-4); }
.reassurance ul {
  list-style: none;
  display: grid; gap: var(--sp-3);
}
.reassurance li {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-ui);
  color: var(--creme-cire);
}
.pastille {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--miel-clair); border-radius: 50%;
  color: var(--miel-clair);
}
@media (min-width: 720px) {
  .reassurance ul { grid-template-columns: repeat(3, 1fr); justify-items: center; }
}

/* ==========================================================================
   Nos miels
   ========================================================================== */
.intro-miels { max-width: var(--largeur-prose); margin-inline: auto; text-align: left; }
.grille-miels {
  list-style: none;
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.carte-miel {
  background: var(--bg-carte);
  border: 1px solid var(--hairline);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.carte-miel .bandeau { height: 6px; background: var(--kraft); transition: height 250ms ease-out; }
.carte-miel.ete .bandeau { background: var(--miel-dore); }
.carte-miel.printemps .bandeau { background: var(--tilleul); }
.carte-miel:hover { transform: translateY(-4px); box-shadow: var(--ombre-hover); }
.carte-miel:hover .bandeau { height: 8px; }
.carte-miel .visuel {
  background: color-mix(in srgb, var(--pollen) 50%, transparent);
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  padding: 12%;
}
.carte-miel .visuel img {
  max-height: 100%; width: auto;
  border: 1px solid var(--hairline);
}
.carte-miel .corps { padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.carte-miel h3 { font-size: var(--fs-h3); margin: 0; }
.tag-miel {
  align-self: flex-start;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--bois-chaud);
  background: color-mix(in srgb, var(--pollen) 60%, transparent);
  border-radius: var(--r-pill);
  padding: .3rem .8rem;
}
.carte-miel.printemps .tag-miel {
  color: var(--foret);
  background: color-mix(in srgb, var(--tilleul) 20%, transparent);
}
.carte-miel .degustation { font-style: italic; color: var(--bois-chaud); font-size: .95em; }
.label-bouche {
  font-family: var(--f-ui); font-style: normal; font-weight: 700;
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--bois-chaud);
}

/* « Le mot du Gardien » — citation signée réutilisable (filet or + alvéole au trait) */
.mot-gardien {
  margin: .35rem 0 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--miel-dore);
  background: color-mix(in srgb, var(--pollen) 35%, transparent);
  border-radius: 0 var(--r-carte) var(--r-carte) 0;
}
.mot-gardien figcaption {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--f-ui); font-weight: 700;
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--bois-chaud); /* AA : Miel Doré interdit en texte sur fond clair */
  margin-bottom: .4rem;
}
.mot-gardien figcaption .ico { color: var(--miel-dore); flex: none; }
.mot-gardien blockquote { margin: 0; }
.mot-gardien blockquote p {
  margin: 0; font-family: var(--f-corps); font-style: italic;
  color: var(--bois-chaud); font-size: .95em;
}

.carte-miel .formats {
  margin-top: auto; padding-top: .5rem;
  font-family: var(--f-ui); font-size: var(--fs-ui); color: var(--bois-chaud);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 720px) { .grille-miels { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Tarifs
   ========================================================================== */
.carte-tarifs {
  max-width: 48rem; margin-inline: auto;
  border-radius: var(--r-carte);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.carte-tarifs table { width: 100%; border-collapse: collapse; }
.carte-tarifs caption {
  font-family: var(--f-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-label); font-size: var(--fs-label);
  color: var(--bois-chaud); padding-bottom: var(--sp-2); text-align: left;
}
.carte-tarifs th, .carte-tarifs td {
  padding: .9rem .5rem;
  border-bottom: 1px solid var(--hairline);
  text-align: left; vertical-align: baseline;
}
.carte-tarifs thead th {
  font-family: var(--f-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-label); font-size: var(--fs-label);
  color: var(--bois-chaud); border-bottom: 1px solid var(--miel-dore);
}
/* Colonnes de prix : en-têtes et montants centrés l'un sous l'autre */
.carte-tarifs thead th:not(:first-child) { text-align: center; width: 6rem; }
.carte-tarifs tbody th { font-weight: 400; }
.carte-tarifs .t-nom { font-family: var(--f-titre); color: var(--brun-ruche); font-size: 1.05rem; }
.carte-tarifs .t-note { display: block; font-family: var(--f-ui); font-size: var(--fs-label); color: var(--bois-chaud); }
.carte-tarifs td.prix { text-align: center; font-family: var(--f-corps); color: var(--bois-chaud); white-space: nowrap; }
.carte-tarifs .cellule-nom { display: flex; align-items: baseline; gap: .6rem; }
.carte-tarifs .points { flex: 1; border-bottom: 2px dotted var(--kraft); transform: translateY(-.3em); min-width: 1.5rem; }
.mini-separateur {
  display: flex; justify-content: center; align-items: center; gap: .6rem;
  color: var(--miel-dore); padding-block: var(--sp-4);
}
.titre-elevage {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--f-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-label); font-size: var(--fs-label);
  color: var(--bois-chaud); margin-bottom: var(--sp-2);
}
.titre-elevage .ico { color: var(--miel-dore); }
.note-tarifs {
  margin-top: var(--sp-3); font-family: var(--f-ui); font-size: var(--fs-ui);
  color: var(--bois-chaud);
}
.actions-tarifs { text-align: center; margin-top: var(--sp-4); }
.intro-tarifs { max-width: var(--largeur-prose); margin-inline: auto; }

/* ==========================================================================
   Reines & essaims
   ========================================================================== */
.grille-reines { display: grid; gap: var(--sp-5); align-items: start; }
.couronne-titre { color: var(--miel-dore); margin-bottom: var(--sp-2); }
.liste-hex { list-style: none; display: grid; gap: .75rem; margin-block: var(--sp-3); }
.liste-hex li { display: flex; gap: .7rem; align-items: baseline; }
.liste-hex .ico { color: var(--miel-dore); flex: none; transform: translateY(.15em); }
.liste-hex h3 { font-size: 1.15rem; margin: 0 0 .15rem; }
.encart-pollen {
  background: var(--bg-encart);
  border-left: 3px solid var(--miel-dore);
  border-radius: var(--r-carte);
  padding: var(--sp-3);
  font-family: var(--f-ui); font-size: var(--fs-ui); color: var(--brun-ruche);
  margin-block: var(--sp-3);
}
.encart-pollen p { margin: 0; color: var(--brun-ruche); }
.panneau-logo {
  border-radius: var(--r-carte);
  padding: clamp(1rem, 3vw, 2rem);
  text-align: center;
}
.panneau-logo img { margin-inline: auto; border-radius: calc(var(--r-carte) - 4px); }
.badge-chiffre {
  margin: var(--sp-4) auto 0;
  width: 132px; height: 132px;
  border: 1.5px solid var(--miel-dore); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; text-align: center;
}
.badge-chiffre .chiffre { font-family: var(--f-titre); font-size: 2rem; color: var(--brun-ruche); line-height: 1; }
.badge-chiffre .legende { font-family: var(--f-ui); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--bois-chaud); }
@media (min-width: 900px) { .grille-reines { grid-template-columns: 3fr 2fr; } }

/* ==========================================================================
   À propos
   ========================================================================== */
.grille-robin { display: grid; gap: var(--sp-5); align-items: start; }
.portrait-hex { position: relative; width: min(100%, 24rem); margin-inline: auto; }
.portrait-hex .contour {
  position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px);
  color: var(--miel-dore); pointer-events: none;
}
.portrait-hex img {
  aspect-ratio: 1 / 1; object-fit: cover; object-position: 55% 22%;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}
.portrait-hex figcaption {
  margin-top: var(--sp-2); text-align: center;
  font-family: var(--f-ui); font-size: var(--fs-label);
  letter-spacing: .06em; color: var(--bois-chaud);
}
.texte-robin em { color: var(--bois-chaud); }
.signature {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--f-titre); font-size: var(--fs-h3); color: var(--bois-chaud); /* AA : Miel Doré (2.61:1) interdit en texte sur clair */
  margin-top: var(--sp-3);
}
.signature .ico { color: var(--tilleul); }
.valeurs {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin-top: var(--sp-6);
}
.valeurs li {
  border: 1px solid var(--kraft); border-radius: var(--r-pill);
  padding: .5rem 1.2rem;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--bois-chaud);
}
@media (min-width: 900px) { .grille-robin { grid-template-columns: 2fr 3fr; } }

/* ==========================================================================
   La démarche (section inversée)
   ========================================================================== */
.demarche { position: relative; overflow: hidden; }
.demarche .hexagone-fond {
  position: absolute; top: -10%; right: -12%;
  width: 46rem; max-width: 90vw;
  color: var(--miel-clair); opacity: .07;
  pointer-events: none;
}
.grille-demarche {
  position: relative;
  display: grid; gap: var(--sp-4);
  list-style: none;
}
.bloc-demarche .pastille { width: 64px; height: 64px; margin-bottom: var(--sp-2); }
.bloc-demarche h3 { font-size: 1.25rem; }
.bloc-demarche em { color: var(--miel-clair); font-style: italic; }
@media (min-width: 720px) { .grille-demarche { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-demarche { grid-template-columns: repeat(4, 1fr); } }

/* Bloc sédentarité — encart dédié de la section démarche (fond inversé) */
.bloc-sedentarite {
  position: relative;
  max-width: var(--largeur-prose);
  margin: var(--sp-5) auto 0;
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--miel-clair) 40%, transparent);
  border-radius: var(--r-carte);
  text-align: center;
}
.bloc-sedentarite .pastille { width: 56px; height: 56px; margin-bottom: var(--sp-2); }
.bloc-sedentarite h3 { font-size: 1.35rem; }
.bloc-sedentarite p { margin: 0; }

.citation-musicale {
  position: relative;
  max-width: 38rem; margin: var(--sp-6) auto 0;
  text-align: center;
}
.citation-musicale blockquote {
  margin: 0; font-family: var(--f-corps); font-style: italic;
  font-size: var(--fs-lead); color: var(--miel-clair);
  display: flex; align-items: center; gap: var(--sp-3);
}
.citation-musicale blockquote::before,
.citation-musicale blockquote::after {
  content: ""; flex: 1;
  border-top: 1px solid color-mix(in srgb, var(--miel-clair) 60%, transparent);
}
.portee {
  position: absolute; inset: -2.4rem 0 auto; height: 7.5rem; width: 100%;
  color: var(--miel-clair);
  pointer-events: none;
}
.portee .note { opacity: 0; transition: opacity 400ms ease; }
.portee.visible .note { opacity: .12; }
.portee.visible .note:nth-child(2) { transition-delay: 120ms; }
.portee.visible .note:nth-child(3) { transition-delay: 240ms; }
.portee.visible .note:nth-child(4) { transition-delay: 360ms; }
.portee.visible .note:nth-child(5) { transition-delay: 480ms; }
.portee.visible .note:nth-child(6) { transition-delay: 600ms; }

/* ==========================================================================
   Où nous trouver
   ========================================================================== */
.grille-trouver { display: grid; gap: var(--sp-5); }
.liste-vente { list-style: none; display: grid; gap: .8rem; }
.liste-vente li { display: flex; gap: .7rem; align-items: baseline; }
.liste-vente .ico { color: var(--miel-dore); flex: none; transform: translateY(.15em); }
.bloc-adresse {
  border-radius: var(--r-carte);
  padding: var(--sp-4);
}
.bloc-adresse .lieu { font-family: var(--f-titre); color: var(--brun-ruche); font-size: 1.15rem; margin-bottom: .25rem; }
.bloc-adresse .btn { margin-top: var(--sp-3); }
@media (min-width: 900px) { .grille-trouver { grid-template-columns: 3fr 2fr; align-items: start; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: var(--largeur-prose); margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--sp-2);
}
.faq summary {
  cursor: pointer;
  font-family: var(--f-titre); font-size: 1.15rem; color: var(--brun-ruche);
  padding: .5rem 0; list-style-position: outside;
}
.faq summary::marker { color: var(--miel-dore); }
.faq details p { max-width: 62ch; }

/* ==========================================================================
   Bande photo pots
   ========================================================================== */
.bande-pots { position: relative; }
.bande-pots img {
  width: 100%; height: clamp(280px, 40vw, 480px);
  object-fit: cover; object-position: 50% 30%;
}
.bande-pots .voile {
  position: absolute; inset: 0;
  /* AA 1.4.3 : voile renforcé pour garantir ≥ 4.5:1 (Crème Cire) même sur
     les pixels les plus clairs de la photo. */
  background: rgba(58, 35, 18, .55);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-3);
}
.bande-pots .voile p {
  margin: 0;
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.6rem);
  color: var(--creme-cire);
  text-shadow: 0 1px 14px rgba(58, 35, 18, .55);
}

/* ==========================================================================
   Contact / Footer
   ========================================================================== */
/* Nom de marque dans un titre : Young Serif n'existe qu'en romain 400 →
   jamais d'italique (même synthétique). Accent par la couleur uniquement. */
.section-inverse h2 .accent-marque { font-style: normal; color: var(--accent-inverse); }
.grille-contact { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
.coordonnees ul { list-style: none; display: grid; gap: 1rem; }
.coordonnees li { display: flex; align-items: center; gap: .9rem; min-height: 44px; }
.coordonnees .pastille { width: 40px; height: 40px; }
.coordonnees .libelle { font-family: var(--f-ui); font-size: var(--fs-ui); }
.encart-rdv {
  background: color-mix(in srgb, var(--creme-cire) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--miel-clair) 40%, transparent);
  border-radius: var(--r-carte);
  padding: var(--sp-4);
}
.encart-rdv h3 { color: var(--creme-cire); font-size: 1.25rem; }
.encart-rdv .btn { margin-top: var(--sp-2); }
.signature-reseaux {
  margin-top: var(--sp-5);
  font-family: var(--f-corps); font-style: italic;
  color: var(--miel-clair); font-size: var(--fs-lead);
  text-align: center;
}
@media (min-width: 900px) { .grille-contact { grid-template-columns: 1fr 1fr; } }

.pied { background: var(--brun-ruche); color: var(--creme-cire); }
.pied-haut {
  border-top: 1px solid color-mix(in srgb, var(--miel-clair) 25%, transparent);
  padding-block: var(--sp-5);
  display: grid; gap: var(--sp-4); justify-items: center; text-align: center;
}
.pied-haut img {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--blanc-nat);
}
.pied .bloc-marque { font-family: var(--f-titre); font-size: 1.15rem; line-height: 1.5; }
.pied .bloc-marque .baseline { display: block; font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--miel-clair); margin-top: .3rem; }
.pied .bloc-marque .devise { display: block; font-family: var(--f-corps); font-style: italic; font-size: 1rem; color: var(--miel-clair); margin-top: .3rem; }
.pied .phrase-pied { max-width: 46ch; margin-inline: auto; font-size: var(--fs-ui); }
.nav-pied ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-3); }
.nav-pied a { font-family: var(--f-ui); font-size: var(--fs-ui); color: var(--creme-cire); text-decoration: none; padding: .5rem 0; display: inline-block; }
.nav-pied a:hover { color: var(--miel-clair); text-decoration: underline; }
.mentions {
  font-family: var(--f-ui); font-size: var(--fs-legal);
  color: var(--gris-chaud); /* 5.41:1 sur Brun Ruche — AA légal */
  line-height: 1.8;
}
.mentions a { color: var(--gris-chaud); }
.mentions p { margin: 0; color: var(--gris-chaud); }
.nav-pied-haut {
  font-family: var(--f-ui); font-size: var(--fs-ui);
  color: var(--miel-clair); text-decoration: none;
  display: inline-block; padding: .5rem;
}
.nav-pied-haut:hover { text-decoration: underline; }

/* ==========================================================================
   Reveals & animations (opt-in, désactivées si reduced motion)
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.visible {
  opacity: 1; transform: none;
  transition: opacity 500ms cubic-bezier(.25,.6,.3,1), transform 500ms cubic-bezier(.25,.6,.3,1);
}
.js .reveal.visible.retard-1 { transition-delay: 80ms; }
.js .reveal.visible.retard-2 { transition-delay: 160ms; }
.js .reveal.visible.retard-3 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .hero .souligne path { stroke-dashoffset: 0; }
  .portee .note { opacity: .12; }
}

/* ===== Pages annexes (mentions légales, 404) ===== */
.page-simple { padding-block: var(--sp-6); min-height: 60vh; }
.page-simple h1 { font-size: var(--fs-h2); }
.page-simple h2 { font-size: var(--fs-h3); margin-top: var(--sp-4); }
.page-simple .retour { margin-top: var(--sp-5); }

/* ===== Impression ===== */
@media print {
  .entete, .skip-link, .btn, .bande-pots { display: none; }
  body { background: #fff; color: #000; }
}