/* ==========================================================================
   Miss Patate Douce de la Drôme — sections
   ========================================================================== */

/* ============ HERO : coupe de la butte ============ */
.hero { position: relative; background: var(--cream); color: var(--plum); }
.hero__stage {
  --ground: 70%; /* sol abaissé : de l'air entre « dans la Drôme » et la butte */
  --plant-x: 75%;
  --plant-w: min(44vw, 64vh);
  --tubers-w: min(26vw, 30vh);
  --ridge-h: clamp(70px, 14vh, 150px);
  position: relative; height: 100vh; height: 100svh; min-height: 36rem; overflow: hidden;
}
.hero__sky { position: absolute; inset: 0 0 auto 0; z-index: 4; padding: calc(var(--header-h) + clamp(1rem, 5vh, 3.5rem)) var(--pad-x) 0; pointer-events: none; }
.hero__title { font-weight: 800; }
.hero__title-inner { display: block; }
.hero__line { display: block; font-stretch: 75%; font-size: clamp(3.4rem, min(10.5vw, 14vh), 11.5rem); line-height: .82; letter-spacing: -.01em; color: var(--plum); }
.hero__line--2 { padding-left: .45em; }
.hero__line--3 { padding-left: .2em; }
.hero__drome {
  position: relative; z-index: 1; display: block; width: fit-content;
  margin: -.05em 0 0 .5em; padding-inline: .1em;
  font-family: var(--script); font-weight: 700; font-size: clamp(2.2rem, min(6.2vw, 8.6vh), 6.8rem); line-height: 1.1;
  color: var(--coral); transform: rotate(-6deg); transform-origin: 0 60%;
}

.hero__badge { position: absolute; z-index: 5; left: calc(var(--plant-x) - var(--plant-w) / 2 - 3rem); top: calc(var(--header-h) + 9vh); width: clamp(6.5rem, 10vw, 9.5rem); aspect-ratio: 1; pointer-events: none; }
.hero__badge svg { width: 100%; height: 100%; overflow: visible; }
.hero__badge text { font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; fill: var(--plum); transform-box: view-box; transform-origin: 50% 50%; animation: spin 22s linear infinite; }
.hero__badge .potato { fill: var(--coral); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__plant { position: absolute; z-index: 2; left: calc(var(--plant-x) - var(--plant-w) / 2); bottom: calc(100% - var(--ground) - 3vh); width: var(--plant-w); transform-origin: 50% 100%; }
.hero__plant-inner { display: block; }
.hero__sway { transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
.hero__plant img { width: 100%; transform-origin: 50% 100%; }
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.6deg); } }

.hero__ground { position: absolute; z-index: 3; left: 0; right: 0; top: var(--ground); height: 150vh; background: var(--plum); color: var(--paper); }
.hero__ridge { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: var(--ridge-h); overflow: visible; }
.hero__ridge path { fill: var(--plum); }
.hero__soil { position: absolute; inset: 0; pointer-events: none; }
.hero__soil--near { inset: 0 0 -40% 0; }
/* les racines partent du sommet de la butte (pic du tracé à ~96 % de sa hauteur) */
.hero__roots { position: absolute; left: calc(var(--plant-x) - 8rem); top: calc(var(--ridge-h) * -.9); width: 16rem; height: calc(var(--ridge-h) * .9 + clamp(2.25rem, 5.5vh, 3.75rem)); overflow: visible; }
.hero__roots path { fill: none; stroke: #f0a877; stroke-opacity: .5; stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero__roots path:nth-child(-n+3) { stroke-opacity: .7; stroke-width: 2.6; }
.hero__tubers { position: absolute; left: calc(var(--plant-x) - var(--tubers-w) / 2); top: clamp(1.25rem, 3.5vh, 2.5rem); width: var(--tubers-w); }
.hero__tubers img { width: 100%; filter: drop-shadow(0 18px 22px rgba(42, 7, 21, .4)); }
.hero__intro { position: absolute; left: var(--pad-x); top: clamp(2.5rem, 7vh, 4.5rem); max-width: min(27rem, 40vw); }
.hero__cta {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: 0;
  padding: .9rem 1.2rem .9rem 1.5rem; border-radius: 999px;
  background: var(--paper); color: var(--plum); font-weight: 700; text-decoration: none;
}
.hero__cta svg { flex: none; width: 1.3rem; fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: bob 1.8s var(--ease-io) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* ============ LA PATATE DOUCE ============ */
.lpd { position: relative; padding-block: clamp(3rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem); overflow-x: clip; }
.lpd__intro, .facts, .botany, .varietes__head, .kitchen, .nutri__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.5rem); }
.lpd__title { grid-column: 1 / -1; }
.lpd__latin { grid-column: 1 / 7; margin: .1em 0 0 .3em; }
.lpd__big { grid-column: 3 / 12; margin-top: clamp(2rem, 5vw, 4rem); }
.lpd__text { grid-column: 8 / 13; max-width: 34rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); color: var(--muted); }

.facts { margin-top: clamp(5rem, 12vw, 11rem); }
.fact { position: relative; padding-top: 1rem; border-top: 1px solid var(--line); }
.fact--a { grid-column: 1 / 7; }
.fact--b { grid-column: 8 / 13; margin-top: clamp(3rem, 9vw, 9rem); }
.fact--c { grid-column: 3 / 10; margin-top: clamp(2rem, 4vw, 4rem); }
.fact__num {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  font-weight: 800; font-stretch: 75%; font-size: clamp(5.5rem, 16vw, 16.5rem); line-height: .82; letter-spacing: -.015em;
  color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fact__unit { margin: .12em 0 0 .1em; font-family: var(--script); font-weight: 400; font-size: .3em; line-height: 1; letter-spacing: 0; color: var(--coral); vertical-align: 0; }
.fact__unit--word { align-self: flex-end; margin: 0 0 .25em .15em; }
.fact__label { max-width: 22rem; margin-top: 1rem; font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.3; }

.botany { align-items: center; row-gap: 3rem; margin-top: clamp(6rem, 12vw, 11rem); }
.botany__text { grid-column: 1 / 6; }
.botany__text em { font-family: var(--script); font-style: normal; font-size: 1.35em; line-height: 1; color: var(--coral); }
.botany__compare { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.5rem, 2vw, 1.5rem); }
.specimen { padding: clamp(.8rem, 1.5vw, 1.3rem); border-radius: 1rem; background: var(--paper); color: var(--plum); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .5); }
.specimen--no { transform: rotate(-4deg); }
.specimen--yes { transform: rotate(3deg); margin-top: 3.5rem; }
.specimen__img { display: grid; place-items: center; aspect-ratio: 1; padding: 12%; border-radius: .6rem; background: var(--cream); }
.specimen__img img { max-height: 100%; object-fit: contain; }
.specimen figcaption { display: grid; gap: .25rem; margin-top: .9rem; }
.specimen__family { width: fit-content; font-weight: 800; font-stretch: 80%; font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.1; }
.specimen__family s { text-decoration: none; opacity: .55; }
.specimen__name { font-size: .92rem; line-height: 1.3; opacity: .85; }
.botany__neq { font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; color: var(--coral); }

.drome { margin-top: clamp(6rem, 12vw, 11rem); }
.drome__text { max-width: 64rem; }
.drome__stamp { display: inline-block; margin-top: .12em; padding: .06em .35em .12em; border-radius: .18em; background: var(--coral); color: #fff; font-weight: 800; font-stretch: 80%; white-space: nowrap; transform: rotate(-3deg); }

.bigword { margin-top: clamp(4rem, 9vw, 8rem); overflow: hidden; pointer-events: none; }
.bigword__track { width: max-content; white-space: nowrap; font-weight: 800; font-stretch: 75%; font-size: clamp(7rem, 24vw, 26rem); line-height: .8; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 250, 244, .35); }

/* ============ VARIÉTÉS ============ */
.varietes { overflow-x: clip; }
.varietes__head { align-items: end; row-gap: 2rem; }
.varietes__head .display { grid-column: 1 / 8; }
.varietes__intro { grid-column: 8 / 13; font-size: clamp(1.05rem, 1.3vw, 1.25rem); }

.flesh { display: flex; height: clamp(10rem, 24vw, 20rem); margin-block: clamp(3.5rem, 7vw, 6rem); }
.flesh__band { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--c); color: var(--t); }
.flesh__band span { position: absolute; left: clamp(.8rem, 1.5vw, 1.5rem); bottom: clamp(.8rem, 1.5vw, 1.4rem); font-weight: 700; font-size: clamp(.8rem, 1.1vw, 1.05rem); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.varietes__brand { position: relative; }
.varietes__lead { max-width: 46rem; font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.35; }
.variety-list { margin-top: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.variety { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: clamp(.6rem, 1.4vw, 1.2rem); border-top: 1px solid var(--line); }
.variety__name { font-weight: 800; font-stretch: 75%; font-size: clamp(3.2rem, 10vw, 10.5rem); line-height: .9; letter-spacing: -.01em; transition: transform .8s var(--ease-out); }
.variety__tag { flex: none; padding: .45rem .9rem; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 700; font-size: .9rem; white-space: nowrap; transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.variety:hover .variety__name { transform: translateX(clamp(1rem, 3vw, 3rem)); }
/* teinte de peau en filaire, visible au survol seulement (toujours visible sur écran tactile, faute de survol) */
@media (hover: hover) {
  .variety__tag { opacity: 0; transform: translateX(1.5rem); }
  .variety:hover .variety__tag { opacity: 1; transform: none; }
}
.variety-float { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(8rem, 13vw, 12rem); opacity: 0; pointer-events: none; }
.variety-float img { width: 100%; filter: drop-shadow(0 30px 30px rgba(42, 7, 21, .35)); }

.kitchen { align-items: start; row-gap: 2rem; margin-top: clamp(5rem, 10vw, 9rem); }
.kitchen__title { grid-column: 1 / 7; }
.kitchen__body { grid-column: 8 / 13; display: grid; justify-items: start; gap: 2rem; font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
.chip { color: var(--plum); }
.chameleon {
  background: linear-gradient(90deg, #fff 0%, #ffd9a0 25%, #fff 50%, #ffc7d2 75%, #fff 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: chameleon 5s linear infinite;
}
@keyframes chameleon { to { background-position: -200% 0; } }

/* ============ CONSERVATION ============ */
.conserve__head { max-width: 64rem; }
.conserve__kicker { margin-bottom: .6rem; color: var(--paper); }
.conserve__head .display-m { color: var(--plum); }
.keep-grid { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; margin-top: clamp(4rem, 8vw, 7rem); }
.keep { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 2.6vw, 2.4rem); border-radius: var(--radius); }
.keep--room { margin-top: 5rem; background: var(--paper); color: var(--plum); }
.keep--cellar { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: clamp(1rem, 2.4vw, 2.2rem); min-height: 27rem; background: var(--plum); color: var(--paper); }
.keep--fridge { margin-top: 9rem; border: 2px dashed rgba(129, 27, 72, .6); color: var(--plum); }
.keep__big { font-weight: 800; font-stretch: 75%; font-size: clamp(2.1rem, 3.6vw, 3.6rem); line-height: .95; letter-spacing: -.008em; }
.keep__num { display: inline-block; font-size: 1.9em; line-height: .8; color: var(--red); font-variant-numeric: tabular-nums; }
.keep--cellar .keep__num { color: var(--paper); }
.keep__text { font-size: 1.02rem; line-height: 1.45; }
.keep--cellar .keep__text { margin-top: 1rem; }
.keep__warn { width: fit-content; font-family: var(--script); font-size: 2.2rem; line-height: 1; color: var(--paper); transform: rotate(-4deg); }
/* calendrier : 2 semaines cochées sur 4 */
.cal { width: min(100%, 10rem); margin-top: .6rem; overflow: visible; }
.cal__body { fill: none; stroke: var(--plum); stroke-width: 5; }
.cal__head { fill: var(--coral); stroke: var(--plum); stroke-width: 5; stroke-linejoin: round; }
.cal__ring { fill: none; stroke: var(--plum); stroke-width: 9; stroke-linecap: round; }
.cal__off { fill: rgba(129, 27, 72, .12); }
.cal__on { fill: var(--coral); }
.cal__tick { fill: none; stroke: var(--paper); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.thermo { display: grid; justify-items: center; gap: .5rem; }
.thermo__svg { width: clamp(4.5rem, 6vw, 5.8rem); height: auto; overflow: visible; }
.thermo__tube { fill: var(--paper); }
.thermo__zone { fill: rgba(250, 55, 74, .4); }
.thermo__mercury { fill: var(--red); }
.thermo__bulb { fill: var(--red); stroke: var(--paper); stroke-width: 5; }
.thermo__ticks path { stroke: var(--paper); stroke-width: 2.5; stroke-linecap: round; }
.thermo__labels text { fill: var(--paper); font: 700 15px var(--font); }
.thermo__read { font-weight: 800; font-stretch: 80%; font-size: 1.3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* frigo : caisse blanche, congélateur + réfrigérateur, poignées, pieds et flocon (plus de croix) */
.fridge { width: clamp(5.5rem, 8vw, 7.5rem); overflow: visible; }
.fridge__body, .fridge__door, .fridge__handle { fill: none; stroke: var(--plum); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fridge__body { fill: var(--paper); }
.fridge__handle { stroke-width: 7; }
.fridge__snow { fill: none; stroke: var(--coral); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* ============ VALEURS NUTRITIONNELLES ============ */
.nutri__grid { align-items: start; row-gap: 4rem; }
.nutri__intro { grid-column: 1 / 7; }
.nutri__intro .display { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); color: var(--red); }
.highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) 1.5rem; max-width: 36rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.hl { display: grid; gap: .3rem; padding-top: .8rem; border-top: 2px solid var(--plum); }
.hl__num { font-weight: 800; font-stretch: 75%; font-size: clamp(2.8rem, 5.4vw, 5.2rem); line-height: .9; letter-spacing: -.008em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hl__num small { margin-left: .15em; font-size: .38em; font-stretch: 90%; letter-spacing: 0; color: var(--red); }
.hl__label { font-weight: 600; }

.label {
  grid-column: 8 / 13; position: sticky; top: calc(var(--header-h) + 1.5rem);
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.75rem);
  border: 3px solid var(--plum); border-radius: 1rem;
  background: var(--paper); color: var(--plum); box-shadow: 14px 14px 0 var(--coral);
}
.label__table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.25; }
.label__table caption { caption-side: top; padding-bottom: .8rem; border-bottom: 10px solid var(--plum); text-align: left; color: var(--plum); }
.label__title { display: block; font-weight: 800; font-stretch: 75%; font-size: clamp(2rem, 3vw, 2.8rem); line-height: .95; }
.label__per { display: block; font-weight: 600; }
.label__table thead th { padding: .55rem 0; border-bottom: 3px solid var(--plum); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--plum); }
.label__table thead th:last-child, .label__table td { text-align: right; }
.label__table tbody th, .label__table td { padding: .5rem 0; border-bottom: 1px solid rgba(129, 27, 72, .22); vertical-align: baseline; }
.label__table tbody th { padding-right: 1rem; font-weight: 600; text-align: left; }
.label__table tbody th small { font-weight: 400; font-size: .78em; color: rgba(129, 27, 72, .75); white-space: nowrap; }
.label__table td { font-weight: 800; font-stretch: 85%; white-space: nowrap; color: var(--plum); font-variant-numeric: tabular-nums; }
.label__table tr.is-sub th { padding-left: 1rem; font-weight: 500; }
.label__table tr.is-star th, .label__table tr.is-star td { background: rgba(250, 55, 74, .16); }
.label__table tr.is-star th { padding-left: .5rem; }
.label__table tr.is-star td { padding-right: .5rem; }
.label__source { margin-top: .8rem; font-size: .8rem; color: rgba(129, 27, 72, .8); }

/* ============ QUI SOMMES-NOUS ============ */
.qui { overflow-x: clip; }
.qui__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.5rem); row-gap: 3rem; align-items: center; }
.qui__text { grid-column: 1 / 8; }
.qui__lead { margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.qui__text .prose { margin-left: clamp(0rem, 10vw, 9rem); color: var(--muted); }
.qui__farm { position: relative; grid-column: 8 / 13; }
/* disque corail fixe, décalé en bas à droite sous la pile */
.qui__disc { position: absolute; left: 7.5%; top: 4.7%; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }
.qui__photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
/* image plus haute que le cercle : marge pour le parallax interne */
.qui__farm-img { display: block; width: 100%; height: 124%; max-width: none; margin-top: -12%; object-fit: cover; }
/* Pile de photos : la première donne la taille, les suivantes se superposent. Chaque rond recouvert (même taille)
   se décale dans sa direction et passe sous un aplat plein : champ en haut (beige), 2e en haut à gauche (rouge),
   3e en bas à gauche (violet foncé). Ombre des fiches recettes sur chaque rond. Valeurs communes avec scenes-b.js (QUI_BACK).
   État final ici (sans JS, mode statique) ; en mode animé, GSAP part de la seule photo du champ. */
/* épinglage : l'espace réservé sous la section (visible sur mobile, où la section est moins haute que l'écran) reste prune */
.pin-spacer:has(> .qui) { background: var(--plum); }
.qui__stack { position: relative; }
.qui__slide { position: relative; aspect-ratio: 1; }
.qui__stack > .qui__slide:not(:first-child) { position: absolute; inset: 0; }
.qui__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qui__stack .qui__photo { box-shadow: 0 -24px 60px -34px rgba(42, 7, 21, .45); }
.qui__veil { position: absolute; inset: 0; border-radius: inherit; background: var(--cream); opacity: 0; pointer-events: none; }
.qui__slide:nth-child(2) .qui__veil { background: var(--red); }
.qui__slide:nth-child(3) .qui__veil { background: #691c3d; }
html:not(.is-animated) .qui__slide:nth-child(1) { translate: -5% -7.5%; }
html:not(.is-animated) .qui__slide:nth-child(2) { translate: -2.2% -3.4%; }
html:not(.is-animated) .qui__slide:nth-child(3) { translate: -4.9% 2.7%; }
html:not(.is-animated) .qui__slide:not(:last-child) .qui__veil { opacity: 1; }


/* ============ UNE HISTOIRE DE FAMILLE ============ */
.histoire { padding-block: 0; }
.histoire__pin { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 36rem; padding: calc(var(--header-h) + clamp(.5rem, 2vh, 1.5rem)) 0 calc(clamp(34px, 5.6vw, 92px) * 1.15 + clamp(2rem, 5vh, 3.5rem)); overflow: hidden; }
/* padding-bottom = hauteur max des buttes de la section suivante (x1,15 à leur entrée) + un espace */
.histoire__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.histoire__head .display-m { color: var(--red); }
.histoire__viewport { position: relative; flex: 1; min-height: 0; margin-top: clamp(2rem, 7vh, 4.5rem); }
.histoire__track { position: relative; width: max-content; height: 100%; padding-inline: var(--pad-x) 16vw; }
.histoire__list { position: relative; display: flex; gap: clamp(3rem, 7vw, 8rem); height: 100%; }
.era { position: relative; flex: none; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: clamp(17rem, 30vw, 30rem); height: 100%; }
.era:nth-child(even) { grid-template-rows: auto minmax(0, 1fr); }
.era:nth-child(even) .era__visual { order: 2; }
/* l'image occupe exactement la hauteur restante de la carte : elle ne déborde plus sous les buttes de la section suivante */
.era__visual { position: relative; min-height: 0; }
.era__img { position: absolute; left: 0; top: clamp(.25rem, 1vh, .75rem); width: 100%; height: calc(100% - 2 * clamp(.25rem, 1vh, .75rem)); object-fit: contain; }
/* deux illustrations côte à côte (1927 : raisin + asperges ; 1947 : pêche + abricot) */
.era__visual--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding-block: clamp(.25rem, 1vh, .75rem); }
.era__visual--duo .era__img { position: static; width: 100%; height: 100%; min-height: 0; }
/* 1927 : raisin agrandi (colonne plus large), asperges réduites et posées en bas */
.era--1927 .era__visual--duo { grid-template-columns: minmax(0, 1fr) minmax(0, .45fr); }
.era--1927 .era__img:last-child { height: 75%; align-self: end; }
/* 1983 : pomme de terre réduite, centrée dans la hauteur (entre 2014 en haut et 1983 en bas) */
.era--1983 .era__img { top: 12.5%; left: 12.5%; width: 75%; height: 75%; }
/* 2026 : logo rapproché de la date, en gardant un espace (~3 rem visibles, rotation de la parallaxe comprise) au-dessus de la pastille */
.era__visual--logo .era__img { top: auto; bottom: clamp(2.5rem, 5.5vh, 3.75rem); height: auto; max-height: calc(100% - clamp(.25rem, 1vh, .75rem) - clamp(2.5rem, 5.5vh, 3.75rem)); }
.era__body { position: relative; padding-top: 1.25rem; }
.era:nth-child(even) .era__body { padding: 0 0 1.25rem; }
.era__dot { position: absolute; left: 0; top: -.6rem; z-index: 2; width: 1.2rem; height: 1.2rem; border: 3px solid var(--red); border-radius: 50%; background: var(--cream); transition: background-color .4s, transform .5s var(--ease-out); }
.era:nth-child(even) .era__dot { top: auto; bottom: -.6rem; }
.era.is-on .era__dot { background: var(--red); transform: scale(1.35); }
.era__year { font-weight: 800; font-stretch: 75%; font-size: clamp(2.8rem, 5vw, 5.2rem); line-height: .82; letter-spacing: -.01em; color: var(--plum); font-variant-numeric: tabular-nums; }
.era:nth-child(3n+2) .era__year { color: var(--red); }
.era:nth-child(3n) .era__year { color: var(--coral); }
.era__text { max-width: 24rem; margin-top: .8rem; font-weight: 500; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.4; }
.histoire__furrow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.histoire__furrow-bg { fill: none; stroke: rgba(129, 27, 72, .25); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.histoire__furrow-line { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }

/* ============ NOUS TROUVER ============ */
.trouver { overflow-x: clip; }
.marquee { margin-top: clamp(2.5rem, 5vw, 4rem); }
.marquee__label { margin-bottom: 1rem; font-family: var(--script); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; }
/* marge verticale compensée : les pastilles pivotées au survol ne sont plus rognées */
.marquee__viewport { overflow: hidden; padding-block: 1.5rem; margin-block: -1.5rem; }
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; gap: clamp(.75rem, 1.5vw, 1.25rem); padding-right: clamp(.75rem, 1.5vw, 1.25rem); }
.brand-tile {
  display: grid; place-items: center; min-width: clamp(13rem, 22vw, 20rem); height: clamp(6rem, 10vw, 8.5rem); padding: 1rem 2rem;
  border-radius: 1.25rem; background: var(--paper); color: var(--plum);
  font-weight: 800; font-stretch: 80%; font-size: clamp(1.5rem, 2.6vw, 2.4rem); white-space: nowrap;
  transition: transform .6s var(--ease-out), background-color .4s, color .4s;
}
.brand-tile:hover { transform: rotate(-3deg) scale(1.04); background: var(--plum); color: var(--paper); }
.brand-tile img { width: auto; max-height: 70%; }
.market { display: flex; align-items: center; font-weight: 800; font-stretch: 75%; font-size: clamp(3.5rem, 9vw, 9rem); line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px #fff; transition: color .4s; }
.market::after { content: "·"; margin-left: clamp(.75rem, 1.5vw, 1.25rem); }
.market:hover { color: #fff; }

/* ============ PRODUCTION ============ */
.prod { overflow-x: clip; }
.prod__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.5rem); row-gap: 2.5rem; align-items: end; }
.prod__head .display { grid-column: 1 / 7; }

.prod__steps { position: relative; margin-top: clamp(4rem, 9vw, 8rem); }
.prod__path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.prod__path-bg { fill: none; stroke: rgba(255, 250, 244, .22); stroke-width: 2; stroke-dasharray: 3 12; stroke-linecap: round; }
.prod__path-line { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; }
.prod__runner { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(3rem, 4vw, 3.8rem); opacity: 0; pointer-events: none; }
.prod__runner svg { overflow: visible; }
.prod__runner .potato { fill: var(--coral); stroke: var(--paper); stroke-width: 12; }
.prod__runner .potato__marks { fill: none; stroke: var(--plum); stroke-width: 14; stroke-linecap: round; }

.steps { position: relative; display: grid; gap: clamp(2.5rem, 7vw, 6rem); counter-reset: step; }
.step { --m: clamp(3.8rem, 6vw, 5.2rem); position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; min-height: clamp(11rem, 20vw, 16rem); counter-increment: step; }
.step__marker {
  position: absolute; top: 50%; left: 42%; z-index: 2;
  display: grid; place-items: center; width: var(--m); height: var(--m); margin: calc(var(--m) / -2) 0 0 calc(var(--m) / -2);
  border: 3px solid var(--coral); border-radius: 50%; background: var(--plum);
  transition: background-color .5s, border-color .5s;
}
.step:nth-child(even) .step__marker { left: 58%; }
.step__num { font-weight: 800; font-stretch: 75%; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; color: var(--paper); transition: color .5s; }
.step.is-on .step__marker { border-color: var(--paper); background: var(--coral); }
.step.is-on .step__num { color: var(--plum); }
.step__card { grid-column: 1 / 5; grid-row: 1; justify-self: end; display: grid; justify-items: end; gap: .6rem; max-width: 24rem; text-align: right; }
.step:nth-child(even) .step__card { grid-column: 9 / 13; justify-self: start; justify-items: start; text-align: left; }
.step__icon { width: clamp(3.5rem, 5vw, 4.5rem); overflow: visible; }
.step__icon path, .step__icon circle { fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step__title { font-weight: 800; font-stretch: 80%; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1; letter-spacing: -.01em; }
.step__text { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.45; color: var(--muted); }
/* photos détourées des étapes, du côté opposé au texte */
.step__media { grid-column: 7 / 12; grid-row: 1; justify-self: start; width: min(100%, clamp(15rem, 26vw, 24rem)); margin: 0; pointer-events: none; }
.step:nth-child(even) .step__media { grid-column: 2 / 7; justify-self: end; }
.step__media img { display: block; width: 100%; height: auto; }

/* ============ RECETTES ============ */
.recettes__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.recettes__head .display { color: var(--paper); }
.recipe-stack { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.recipe {
  position: relative; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  min-height: min(36rem, 76vh); padding: clamp(1.75rem, 4vw, 4rem);
  overflow: hidden; border-radius: var(--radius); box-shadow: 0 -24px 60px -34px rgba(42, 7, 21, .45);
  transform-origin: 50% 0;
}
.is-animated .recipe { position: sticky; top: calc(var(--header-h) + 1rem); }
.is-animated .recipe:nth-child(2) { top: calc(var(--header-h) + 2.25rem); }
.is-animated .recipe:nth-child(3) { top: calc(var(--header-h) + 3.5rem); }
.is-animated .recipe:nth-child(4) { top: calc(var(--header-h) + 4.75rem); }
.is-animated .recipe:nth-child(5) { top: calc(var(--header-h) + 6rem); }
.recipe__main { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.1rem; }
.recipe__course { font-family: var(--script); font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1; color: var(--accent); transform: rotate(-4deg); }
.t-plum .recipe__course { color: var(--paper); }
.recipe__title { max-width: 16ch; font-weight: 800; font-stretch: 78%; font-size: clamp(2.1rem, 4.4vw, 4.4rem); line-height: .95; letter-spacing: -.008em; text-wrap: balance; }
.recipe__meta { display: flex; flex-wrap: wrap; gap: .6rem; }
.recipe__meta li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .95rem; }
.ico { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recipe__keys { max-width: 30rem; color: var(--muted); }
.recipe__timer { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.25rem; }
.timer { width: min(100%, 22rem); overflow: visible; transform: rotate(-90deg); }
.timer__track { fill: none; stroke: var(--line); stroke-width: 14; }
.timer__arc { fill: none; stroke-width: 14; }
.timer__arc--prep { stroke: var(--coral); stroke-dasharray: var(--p) 100; }
/* l'arc cuisson démarre là où finit la préparation : rotation (un stroke-dashoffset en calc sans unité est ignoré) */
.timer__arc--cook { stroke: var(--fg); stroke-dasharray: var(--c) 100; transform: rotate(calc(var(--p) * 3.6deg)); transform-box: fill-box; transform-origin: center; }
.t-red .timer__arc--prep { stroke: var(--plum); }
/* photo de la recette au centre de l'anneau préparation / cuisson */
.timer__photo { position: absolute; top: 0; left: 50%; display: grid; place-items: center; width: min(100%, 22rem); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; }
.timer__photo img { display: block; width: 76%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; transition: transform .9s var(--ease-out); }
.recipe:hover .timer__photo img { transform: scale(1.06) rotate(-4deg); }
.timer__legend { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.timer__legend li { display: flex; align-items: center; gap: .5rem; }
.timer__legend li::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; background: var(--fg); }
.timer__legend .is-prep::before { background: var(--coral); }
.t-red .timer__legend .is-prep::before { background: var(--plum); }
.recipe__blob { position: absolute; right: -8%; bottom: -20%; width: 48%; opacity: .1; transform: rotate(-18deg); pointer-events: none; }
.recipe__blob .potato { fill: var(--fg); }
/* Macaron « Chez Théo » : sceau festonné (comme les buttes), nom en manuscrite, pourtour qui tourne comme le badge du hero.
   Crème sur les cartes, prune (.seal--plum) sur le fond beige des fiches. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.seal { --seal-bg: var(--paper); --seal-fg: var(--plum); --seal-name: var(--red); --seal-ring: var(--coral); width: clamp(8.75rem, 12vw, 11rem); aspect-ratio: 1; }
.seal--plum { --seal-bg: var(--plum); --seal-fg: var(--paper); --seal-name: var(--paper); --seal-ring: var(--coral); }
.seal svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 18px rgba(42, 7, 21, .28)); }
.seal__bg { fill: var(--seal-bg); }
.seal__ring { fill: none; stroke: var(--seal-ring); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; }
/* centre en unités SVG : la viewBox commence à -8, un 50 % décalerait le centre de rotation */
.seal__spin { transform-box: view-box; transform-origin: 100px 100px; animation: spin 28s linear infinite; }
.seal__rim { font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: .205em; text-transform: uppercase; fill: var(--seal-fg); }
/* « Par / Chez / Théo » : x de chaque ligne compensé dans le HTML (approche à droite de la manuscrite + inclinaison totale
   de -14° : -6° du texte, -8° du macaron) pour que les lignes soient centrées et alignées à l'écran */
.seal__name { font-family: var(--script); font-size: 33px; text-anchor: middle; fill: var(--seal-name); }
.seal__by { font-family: var(--font); font-weight: 700; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; fill: var(--seal-fg); }
/* carte : dans l'espace libre à droite du titre (le titre est limité à 16ch) */
.recipe__main > .seal { position: absolute; top: clamp(1rem, 3vw, 3rem); right: 0; rotate: -8deg; }

/* ============ MICRO-ONDES ============ */
.micro { overflow-x: clip; }
.micro__pin { position: relative; }
.micro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head oven" "steps oven"; column-gap: clamp(2rem, 5vw, 5rem); row-gap: 2rem; align-items: center; }
.micro__head { grid-area: head; }
.micro__kicker { margin-bottom: .5rem; }
.micro__head .display-m { font-size: clamp(1.9rem, 3.5vw, 3.5rem); }
.micro__steps { grid-area: steps; display: grid; gap: .35rem; }
.micro__step { display: grid; grid-template-columns: 2.4rem 1fr; align-items: start; gap: .9rem; padding: .65rem .9rem; border-radius: 1rem; transition: background-color .45s, color .45s, opacity .45s; }
.micro__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; }
.micro__step p { padding-top: .3rem; font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.4; }
.micro__step.is-on { background: var(--plum); color: var(--paper); }
/* étapes cliquables (en plus du scroll) */
.micro__step[role="button"] { cursor: pointer; }
.has-cursor .micro__step[role="button"] { cursor: none; }
.micro__step[role="button"]:not(.is-on):hover { background: rgba(129, 27, 72, .1); opacity: 1; }
.oven {
  grid-area: oven; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(4.5rem, 8vw, 7rem); gap: clamp(.75rem, 1.5vw, 1.25rem);
  aspect-ratio: 1.55; padding: clamp(.9rem, 1.8vw, 1.5rem); border-radius: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--plum); box-shadow: 0 40px 60px -40px rgba(42, 7, 21, .6), inset 0 -8px 0 rgba(0, 0, 0, .18);
}
.oven__window { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: .9rem; background: #2d0a1a; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .08); }
.oven__glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%, rgba(255, 196, 120, .9), rgba(250, 55, 74, .4) 45%, transparent 75%); opacity: .25; }
.oven__plate { position: relative; display: grid; place-items: center; width: 72%; aspect-ratio: 2.6; margin-top: 22%; border-radius: 50%; background: rgba(255, 250, 244, .16); }
.oven__potato { width: 86%; margin-top: -38%; transform-origin: 50% 70%; }
.oven__panel { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding-top: .3rem; }
.oven__display { width: 100%; padding: .5rem .25rem; border-radius: .5rem; background: #1e0611; text-align: center; }
.oven__time { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.8rem); letter-spacing: .06em; color: #ff6a74; text-shadow: 0 0 10px rgba(255, 80, 90, .7); font-variant-numeric: tabular-nums; }
.oven__knob { position: relative; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.oven__knob::after { content: ""; position: absolute; left: 50%; top: 12%; width: 3px; height: 30%; margin-left: -1.5px; border-radius: 2px; background: var(--plum); }
.oven__btn { width: 100%; height: .55rem; border-radius: 999px; background: rgba(255, 250, 244, .3); }

/* ============ FOOTER ============ */
.footer { position: relative; margin-top: clamp(5rem, 10vw, 8rem); padding-top: clamp(4.5rem, 9vw, 8rem); overflow-x: clip; }
/* padding latéral retiré dès que le conteneur centré a ses propres marges ; conservé sur petits écrans pour ne pas coller aux bords */
.footer .container { padding-inline: max(0px, calc(var(--pad-x) - max(0px, (100vw - var(--maxw)) / 2))); }
.footer__top { display: grid; grid-template-columns: minmax(10rem, 20rem) 1fr auto; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.footer__logo { width: 100%; }
/* menu du footer sur une seule ligne (retour à la ligne autorisé sous 1024 px pour ne pas déborder) */
.footer__nav ul { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem clamp(1.25rem, 2.6vw, 3rem); }
.footer__nav a { white-space: nowrap; }
.footer__nav a { position: relative; display: inline-block; font-weight: 700; font-size: clamp(1rem, 1.25vw, 1.2rem); text-decoration: none; }
.footer__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.05em; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease-out); }
.footer__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.footer__up { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--coral); color: var(--plum); }
.footer__up svg { width: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.footer__bottom { margin-top: clamp(3rem, 6vw, 5rem); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
/* liens du bas de footer (marque, mentions légales, crédit) : sans soulignement, corail au survol */
.footer__bottom a { text-decoration: none; transition: color .3s; }
.footer__bottom a:hover, .footer__bottom a:focus-visible { color: var(--coral); }
.footer__credit { display: inline-flex; align-items: baseline; gap: .32em; margin-left: auto; }
/* logo Kineka fourni en SVG, dans la couleur du texte ; .74em = hampes du logo à la hauteur des capitales du texte, posé sur la ligne de base */
.footer__kineka { width: auto; height: .74em; fill: currentColor; }

/* ============ FICHES RECETTES (dialog) ============ */
.dialog { width: min(72rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: visible; border: 0; border-radius: var(--radius); background: transparent; color: inherit; }
.dialog::backdrop { background: rgba(42, 7, 21, .62); backdrop-filter: blur(4px); }
.dialog[open] .dialog__panel { animation: dlg-in .8s var(--ease-out); }
.dialog[open]::backdrop { animation: dlg-fade .5s ease; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(48px) scale(.96); clip-path: inset(30% 8% 30% 8% round 3rem); } to { opacity: 1; transform: none; clip-path: inset(0 round 0); } }
@keyframes dlg-fade { from { opacity: 0; } }
.dialog__panel { position: relative; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--radius); }
.dialog__close { position: sticky; top: 0; z-index: 2; float: right; display: grid; place-items: center; width: 3rem; height: 3rem; margin: -.5rem -.5rem 0 1rem; border-radius: 50%; background: var(--plum); color: var(--paper); transition: transform .5s var(--ease-out); }
.dialog__close:hover { transform: rotate(90deg); }
.dialog__close svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.dialog__head { display: grid; justify-items: start; gap: .6rem; padding-bottom: clamp(1.25rem, 3vw, 2rem); border-bottom: 2px solid var(--line); }
.dialog__head .display-m { max-width: 22ch; font-size: clamp(2rem, 4.2vw, 3.8rem); }
.dialog__meta { font-weight: 600; color: var(--muted); }
.dialog__meta span + span::before { content: "·"; margin: 0 .55rem; }
/* fiche avec macaron : le macaron se place à droite du titre */
.dialog__head--seal { grid-template-columns: minmax(0, max-content) auto; justify-content: start; column-gap: clamp(2rem, 6vw, 5rem); }
.dialog__head--seal > :not(.seal) { grid-column: 1; }
.dialog__head--seal > .seal { grid-column: 2; grid-row: 1 / span 3; align-self: center; rotate: -8deg; }
.dialog__cols { display: grid; grid-template-columns: minmax(15rem, .8fr) 1.6fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.dialog h4 { margin-bottom: .9rem; font-weight: 800; font-stretch: 80%; font-size: 1.7rem; line-height: 1; color: var(--red); }
.dialog h5 { margin: 1.4rem 0 .6rem; font-weight: 800; font-size: 1.05rem; }
.ingr li { position: relative; padding: .45rem 0 .45rem 1.4rem; border-bottom: 1px dashed var(--line); line-height: 1.35; }
.ingr li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .62rem; height: .38rem; border-radius: 50%; background: var(--coral); transform: rotate(-20deg); }
.prep { display: grid; gap: .9rem; counter-reset: prep; }
.prep li { position: relative; padding-left: 2.6rem; line-height: 1.55; counter-increment: prep; }
.prep li::before { content: counter(prep); position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--plum); color: var(--paper); font-weight: 800; font-size: .9rem; }
.tip { margin-top: 3rem; padding: 1.1rem 1.3rem; border-radius: 1rem; background: var(--coral); color: var(--plum); }
.tip .script { display: block; width: fit-content; margin-bottom: .35rem; font-size: 2rem; color: var(--paper); }

/* ============ MODE ANIMÉ (classe posée par JS) vs mode statique ============ */
.is-animated .micro { height: 240vh; padding-block: 0; }
.is-animated .micro__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); }
.is-animated .micro__step { opacity: .55; }
.is-animated .micro__step.is-on { opacity: 1; }

html:not(.is-animated) .histoire__viewport { overflow-x: auto; scroll-snap-type: x proximity; }
html:not(.is-animated) .era { scroll-snap-align: start; scroll-margin-left: var(--pad-x); }
html:not(.is-animated) .marquee__track { flex-wrap: wrap; width: auto; row-gap: 1rem; padding-inline: var(--pad-x); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1023px) {
  .hero__stage { --plant-x: 72%; --plant-w: min(52vw, 50vh); --tubers-w: min(34vw, 26vh); }
  .lpd__big { grid-column: 1 / -1; }
  .lpd__text { grid-column: 4 / -1; }
  .fact--a { grid-column: 1 / 10; }
  .fact--b { grid-column: 4 / 13; margin-top: 3rem; }
  .fact--c { grid-column: 1 / 12; margin-top: 3rem; }
  .botany__text, .botany__compare { grid-column: 1 / -1; }
  .varietes__head .display, .varietes__intro, .kitchen__title, .kitchen__body { grid-column: 1 / -1; }
  .keep-grid { grid-template-columns: 1fr 1fr; }
  .keep--cellar { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .keep--room, .keep--fridge { margin-top: 0; }
  .nutri__intro, .label { grid-column: 1 / -1; }
  .label { position: relative; top: auto; }
  .qui__text, .qui__farm { grid-column: 1 / -1; }
  .qui__farm { width: min(100%, 34rem); justify-self: center; }
  .prod__head .display { grid-column: 1 / -1; }
  .recipe { grid-template-columns: 1fr; min-height: 0; }
  .recipe__timer { grid-template-columns: 13rem 1fr; justify-items: start; align-items: center; }
  .timer, .timer__photo { width: 13rem; }
  .timer__photo { left: 0; transform: none; }
  .micro__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "oven" "steps"; }
  .oven { width: min(100%, 34rem); justify-self: center; }
  .is-animated .micro { height: auto; padding-block: clamp(5.5rem, 11vw, 10rem); }
  .is-animated .micro__pin { position: relative; height: auto; display: block; padding-top: 0; }
  .is-animated .micro__step { opacity: 1; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__nav ul { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  /* plante décalée à droite (un peu hors écran), butte abaissée ; la plante remonte pour sortir de la butte juste sous le titre,
     racines courtes (moins étirées) et patates remontées juste dessous, comme en desktop */
  .hero__stage { --ground: 71%; --plant-x: 78%; --plant-w: min(66vw, 42vh); --tubers-w: min(40vw, 26vh); --tubers-y: -.5rem; }
  .hero__line { font-size: min(19vw, 11vh); }
  .hero__drome { font-size: min(11.5vw, 6.8vh); margin-left: .9em; }
  .hero__plant { bottom: calc(100% - var(--ground) + 1.5vh); }
  .hero__roots { left: calc(var(--plant-x) - 5rem); width: 10rem; height: calc(var(--ridge-h) * .9 + var(--tubers-y) + 1rem); }
  .hero__tubers { top: var(--tubers-y); }
  .hero__badge { display: none; }
  /* bouton sous les patates (même top que .hero__tubers + leur hauteur, ratio 862/1400) */
  .hero__intro { top: calc(var(--tubers-y) + var(--tubers-w) * .62 + 1rem); max-width: 64vw; }
  .hero__cta { padding: .7rem 1rem .7rem 1.1rem; font-size: .9rem; white-space: nowrap; }
  .lpd__latin, .lpd__text { grid-column: 1 / -1; }
  .fact--a, .fact--b, .fact--c { grid-column: 1 / -1; }
  .botany__compare { gap: .4rem; }
  .specimen--yes { margin-top: 2rem; }
  .flesh { flex-direction: column; height: 26rem; }
  .variety { flex-wrap: wrap; row-gap: .5rem; }
  .variety-float { width: 6rem; }
  .keep-grid { grid-template-columns: 1fr; }
  .highlights { grid-template-columns: 1fr 1fr; }
  .label__table { font-size: .88rem; }
  .qui__text .prose { margin-left: 0; }
  /* pile dans les marges du texte : les ronds décalés vont de -5 % (à gauche) à +7,5 % (disque, à droite) de la pile,
     soit 112,5 % de sa largeur ; 50 px entre le texte et le haut du rond le plus haut (-7,5 %) */
  .qui__farm { width: calc(100% / 1.125); justify-self: start; margin-left: calc(5% / 1.125); margin-top: calc(50px - 3rem + 7.5% / 1.125); }
  .histoire__head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  /* titre « Une histoire de famille » à la taille des titres .display (comme « Qui sommes-nous ? ») */
  .histoire__head .display-m { font-stretch: 75%; font-size: clamp(3.3rem, 9.4vw, 10rem); line-height: .86; letter-spacing: -.01em; }
  .era { width: 78vw; }
  .era__year { font-size: 3rem; }
  /* la zone d'illustration est haute sur mobile : logo 2026 recentré dans la hauteur (pas d'espace vide au-dessus) */
  .era__visual--logo .era__img { top: clamp(.25rem, 1vh, .75rem); bottom: auto; height: calc(100% - 2 * clamp(.25rem, 1vh, .75rem)); max-height: none; }
  .steps { gap: 3rem; }
  .step { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-left: 5rem; }
  .step .step__card, .step:nth-child(even) .step__card { grid-column: 1; justify-self: start; justify-items: start; text-align: left; }
  .step .step__marker, .step:nth-child(even) .step__marker { top: calc(var(--m) / 2); left: calc(var(--m) / 2); }
  .step .step__media, .step:nth-child(even) .step__media { grid-column: 1; grid-row: 2; justify-self: start; width: min(100%, 17rem); margin-top: 1.25rem; }
  .recipe { padding: 1.5rem; }
  /* footer : logo réduit et centré ; liens en 2 colonnes × 2 lignes serrées, bouton haut de page à droite de la 2e colonne ;
     mentions légales à la ligne, « Réalisé par » aligné sur elles (même cellule de grille, calé en bas) */
  .footer__top { grid-template-columns: 1fr auto; column-gap: .5rem; }
  .footer__logo { grid-column: 1 / -1; justify-self: center; width: min(78%, 17rem); }
  /* remplissage par colonne (ordre de lecture inchangé) : les deux libellés longs dans la 1re colonne, pour laisser la place au bouton avec 35 px de marge */
  /* 3 rem entre les deux colonnes de liens ; réduit sous ~390 px pour que liens + bouton tiennent dans les marges de 35 px
     (21,25 rem ≈ marges 70 px + « Qui sommes-nous ? » + « Production » + écart .5rem + bouton 2,75 rem) */
  .footer__nav ul { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: start; gap: .35rem min(3rem, 100vw - 21.25rem); }
  .footer__nav a { font-size: .9rem; line-height: 1.3; white-space: nowrap; }
  .footer__up { width: 2.75rem; height: 2.75rem; }
  .footer__up svg { width: 1.1rem; }
  .footer__bottom { display: grid; grid-template-columns: 1fr auto; gap: 0; }
  .footer__bottom > p { grid-area: 1 / 1 / 2 / 3; }
  .footer__credit { grid-area: 1 / 2 / 2 / 3; align-self: end; }
  .footer__sep { display: none; }
  .footer__legal { display: block; width: fit-content; margin-top: .3rem; }
  .dialog__cols { grid-template-columns: 1fr; }
  /* carte : plus de place à droite du titre, le macaron se met sur la ligne « Plat » */
  .recipe__main:has(> .seal) { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
  .recipe__main:has(> .seal) > * { grid-column: 1 / -1; }
  .recipe__main:has(> .seal) > .recipe__course { grid-column: 1; grid-row: 1; align-self: end; }
  .recipe__main > .seal { position: static; grid-column: 2; grid-row: 1; justify-self: end; width: 6.5rem; margin: -.5rem -.25rem 0 0; }
  .dialog__head--seal { grid-template-columns: minmax(0, 1fr); }
  .dialog__head--seal > .seal { grid-column: 1; grid-row: auto; width: 7rem; margin: .5rem 0 0; }
}