/* Le Rucher des Combes — démonstration « storytelling » (ZataLabs, V7.7).
   Six tableaux empilés dans une scène collée à l'écran ; le script ouvre
   chacun en cercle par-dessus le précédent et anime son illustration. */

:root {
  --miel: #f2a516;
  --miel-fonce: #c2700a;
  --brun: #2b1a08;
  --creme: #fff6df;
  --affiche: "Caprasimo", "Cooper Black", Georgia, serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--brun); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--affiche); font-weight: 400; line-height: 1.05; margin: 0; }
em { font-style: normal; color: var(--miel-fonce); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--miel-fonce); outline-offset: 3px; border-radius: 4px; }
.evitement { position: absolute; left: -999px; top: .5rem; z-index: 50; padding: .6rem 1rem; background: var(--brun); color: var(--creme); border-radius: 8px; }
.evitement:focus { left: .5rem; }
.surtitre { margin: 0 0 1rem; font: 600 .75rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--miel-fonce); }
.bouton { display: inline-flex; padding: .85rem 1.5rem; border-radius: 999px; background: var(--brun); color: var(--creme); font-weight: 600; text-decoration: none; transition: transform .25s var(--ease); }
.bouton:hover { transform: translateY(-2px); }

/* ---------- En-tête ---------- */
.entete { display: flex; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); background: #1d1a3a; color: var(--creme); }
.logo { display: inline-flex; align-items: center; gap: .6rem; font: 400 1.15rem/1 var(--affiche); text-decoration: none; }
.logo svg { width: 28px; height: 28px; fill: var(--miel); }
.logo__coeur { fill: #1d1a3a; }
.entete__appel { margin-left: auto; padding: .5rem 1.1rem; border-radius: 999px; background: var(--miel); color: var(--brun); font-weight: 600; font-size: .9rem; text-decoration: none; }

/* ---------- Le récit ---------- */
.recit { position: relative; height: 650vh; height: 650svh; }
.scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #1d1a3a; }

.tableau {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  visibility: hidden;
}
.tableau[data-tableau="0"] { visibility: visible; }
/* L'illustration occupe tout le tableau, sa composition calée à droite ;
   le texte se pose à gauche, sur le prolongement du décor. */
.tableau__visuel { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 100%; display: block; }
.tableau__texte { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding: 0 clamp(1.2rem, 4vw, 3.5rem) 4rem clamp(1.2rem, 6vw, 5rem); }
.tableau__num { margin: 0 0 1rem; font: 600 .78rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.tableau h1, .tableau h2 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); margin-bottom: 1.2rem; }
.tableau__texte > p:not(.tableau__num) { max-width: 26rem; margin: 0 0 1.6rem; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.tableau__texte > * { will-change: transform, opacity; }

.tableau--aube { background: #1d1a3a; color: var(--creme); }
.tableau--vol { background: #dff0c4; }
.tableau--fleurs { background: #efe4fb; }
.tableau--cadre { background: #2a1606; color: var(--creme); }
.tableau--extraction { background: #fbf0da; }
.tableau--pot { background: var(--miel); }
.tableau--pot .bouton { background: var(--brun); }

/* Illustrations */
.vol__trajet { fill: none; stroke: #2b1a08; stroke-width: 3; stroke-linecap: round; opacity: .45; }
.abeille__aile { fill: #fff; opacity: .75; }
.pot__marque { font: 400 26px var(--affiche); fill: var(--brun); }
.pot__sorte { font: 500 13px var(--sans); fill: #7a5530; }

/* Frise des chapitres */
.chapitres { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 clamp(1rem, 4vw, 3rem) 1.1rem; }
.chapitres__barre { height: 3px; margin-bottom: .7rem; border-radius: 2px; background: rgb(128 110 90 / .3); overflow: hidden; }
.chapitres__barre span { display: block; height: 100%; background: var(--miel-fonce); transform-origin: left; transform: scaleX(0); }
.chapitres ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chapitres a { display: block; font-size: .78rem; font-weight: 500; text-decoration: none; opacity: .55; transition: opacity .3s, color .3s; color: var(--frise, var(--brun)); }
.chapitres a[aria-current="step"] { opacity: 1; font-weight: 600; }
.scene[data-sombre] .chapitres { --frise: var(--creme); }
.scene[data-sombre] .chapitres__barre { background: rgb(255 246 223 / .2); }
.scene[data-sombre] .chapitres__barre span { background: var(--miel); }

@media (max-width: 760px) {
  .tableau { grid-template-columns: 1fr; grid-template-rows: 56% 44%; align-items: start; }
  .tableau__visuel { grid-column: 1; grid-row: 1; }
  .tableau__texte { grid-column: 1; grid-row: 2; padding: 1rem 1.25rem 4.2rem; }
  .tableau h1, .tableau h2 { font-size: clamp(1.7rem, 7.6vw, 2.3rem); margin-bottom: .6rem; }
  .tableau__num { margin-bottom: .5rem; }
  .tableau__texte > p:not(.tableau__num) { margin-bottom: .9rem; font-size: .95rem; }
  .chapitres ol li:not(:has(a[aria-current="step"])) { display: none; }
  .chapitres ol { grid-template-columns: 1fr; }
}

/* ---------- Après le récit ---------- */
.enveloppe { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem); }
.miels, .marches { padding: clamp(4.5rem, 11vw, 8rem) 0; }
.miels h2, .marches h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); margin-bottom: 2.5rem; }
.pots { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.pots li { padding: 1.6rem; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgb(43 26 8 / .06); }
.pots h3 { font-size: 1.6rem; margin: 1rem 0 .4rem; }
.pots p { margin: 0 0 .8rem; color: #6f5537; }
.pots strong { font: 400 1.4rem var(--affiche); color: var(--miel-fonce); }
.pots__pot { display: block; width: 64px; height: 76px; border-radius: 10px 10px 16px 16px; background: linear-gradient(90deg, rgb(255 255 255 / .25), transparent 40%), var(--miel); box-shadow: inset 0 14px 0 #3b2412; }
.miels__note { margin: 1.5rem 0 0; color: #6f5537; }
.marches { background: #f7e7c2; }
.marches__liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.marches__liste li { padding: 1rem 0; border-top: 1px solid rgb(43 26 8 / .15); }
.marches__liste b { display: inline-block; min-width: 8rem; font-family: var(--affiche); font-weight: 400; }

.pied { padding: 2rem 1.2rem 2.5rem; text-align: center; font-size: .85rem; color: #6f5537; }

/* Animations réduites : les six tableaux se suivent comme des sections,
   chacun dans son état final ; rien n'est collé ni ne s'ouvre. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .recit { height: auto; }
  .scene { position: relative; height: auto; overflow: visible; }
  .tableau { position: relative; min-height: 100vh; min-height: 100svh; visibility: visible; clip-path: none !important; }
  .chapitres { display: none; }
}