/* ============================================================
   Le Tarot des Fermiers · la feuille de style du site (toutes les pages)
   Clair et chaud : crème, miel, braise. Playfair Display (titres) + DM Sans (texte).
   Après chaque modification : changer VERSION dans _sources/build.py puis relancer le build.
   ============================================================ */
:root {
  --creme: #fdf8ef;
  --creme-2: #f8efdf;
  --miel: #fbf2df;
  --miel-2: #f5e3bd;
  --miel-3: #ecd096;
  --or: #e0b45a;
  --or-vif: #f0c45e;
  --or-fonce: #b8862f;
  --or-txt: #8a6420;
  --braise: #bb4d27;
  --braise-h: #a3401e;
  --brun: #3a2611;
  --brun-h: #523619;
  --encre: #2b1d0e;
  --texte: #4d3b28;
  --doux: #6e5b45;
  --filet: #ecdfc7;
  --filet-2: #dccaa6;
  --blanc: #fffdf9;
  --nuit: #22160a;
  --nuit-1: #140c05;
  --ombre: 0 1px 2px rgba(58, 38, 17, .06), 0 12px 30px rgba(58, 38, 17, .08);
  --ombre-forte: 0 4px 10px rgba(58, 38, 17, .08), 0 34px 70px -28px rgba(58, 38, 17, .5);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rayon: 18px;
  --entete: 76px;
  --gouttiere: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { overflow-x: clip; }
body {
  margin: 0; color: var(--texte); font: 17px/1.65 var(--sans); background: var(--creme);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* un grain de papier, très léger */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
button { font: inherit; color: inherit; }
::selection { background: var(--miel-3); color: var(--encre); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passer { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--brun); color: #fff; text-decoration: none; }
.passer:focus { top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gouttiere); }
.wrap--etroit { max-width: 860px; }
.section { padding: clamp(72px, 7vw + 30px, 128px) 0; position: relative; }
.section--serree { padding: clamp(52px, 4vw + 30px, 88px) 0; }
.fond-miel { background: radial-gradient(60% 60% at 85% 0%, rgba(224, 180, 90, .28), rgba(224, 180, 90, 0) 70%), var(--miel); }
.fond-miel-2 { background: var(--miel-2); }
.fond-creme-2 { background: var(--creme-2); }
.fond-blanc { background: var(--blanc); }

/* ---------- typographie ---------- */
.sur { font: 700 12.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-txt); }
.display { font: 900 clamp(40px, 4.4vw + 18px, 76px)/1.04 var(--serif); letter-spacing: -.022em; color: var(--brun); }
.display em, .h2 em { font-style: italic; color: var(--braise); }
.h2 { font: 900 clamp(30px, 2.2vw + 20px, 50px)/1.12 var(--serif); letter-spacing: -.015em; color: var(--brun); }
.h3 { font: 700 clamp(20px, .7vw + 16px, 25px)/1.3 var(--serif); color: var(--brun); }
.lead { font-size: clamp(17.5px, .55vw + 15.5px, 21px); line-height: 1.6; color: var(--doux); }
.lead strong, .lead b { color: var(--brun); font-weight: 600; }
.petit { font-size: 14.5px; line-height: 1.6; color: var(--doux); }
.mark { background: linear-gradient(var(--or), var(--or)) 0 90% / 100% 16% no-repeat; padding: 0 .06em; color: inherit; }
.centre { text-align: center; }
.tete { max-width: 760px; }
.tete .h2 { margin-top: 12px; }
.tete .lead { margin-top: 16px; }
.tete--centre { margin: 0 auto; text-align: center; }
.citation {
  margin: 0; font: italic 700 clamp(26px, 2vw + 16px, 42px)/1.3 var(--serif); color: var(--brun); text-align: center;
  max-width: 900px; margin-inline: auto;
}
.citation::before, .citation::after { color: var(--or); }
.citation::before { content: '« '; }
.citation::after { content: ' »'; }

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 14px; border: 1.5px solid transparent;
  font: 700 16.5px/1.15 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s, border-color .2s, color .2s;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton--braise { background: var(--braise); color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 14px 28px -12px rgba(187, 77, 39, .75); }
.bouton--braise:hover { background: var(--braise-h); }
.bouton--brun { background: var(--brun); color: #fff; }
.bouton--brun:hover { background: var(--brun-h); }
.bouton--contour { border-color: var(--filet-2); color: var(--brun); background: rgba(255, 253, 249, .6); }
.bouton--contour:hover { border-color: var(--or); background: #fff; }
.bouton--clair { background: var(--blanc); color: var(--brun); }
.bouton--grand { min-height: 62px; padding: 0 34px; border-radius: 16px; font-size: 18px; }
.bouton--petit { min-height: 42px; padding: 0 18px; border-radius: 11px; font-size: 15px; }
.bouton--bloc { display: flex; width: 100%; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brun); text-decoration: none; border-bottom: 1.5px solid var(--or); padding-bottom: 2px; }
.lien-fleche svg { width: 16px; height: 16px; transition: transform .2s; }
.lien-fleche:hover svg { transform: translateX(3px); }
.lien-discret { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; color: var(--doux); text-decoration: underline; text-decoration-color: var(--filet-2); text-underline-offset: 4px; }
.lien-discret:hover { color: var(--brun); text-decoration-color: var(--or); }
.pastille { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 700 12.5px/1.2 var(--sans); background: rgba(58, 38, 17, .07); color: var(--brun); white-space: nowrap; }
.pastille--or { background: var(--or); }
.pastille--braise { background: var(--braise); color: #fff; }
.pastille svg { width: 14px; height: 14px; }
.rassure { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--doux); }
.rassure li { display: inline-flex; align-items: center; gap: 7px; }
.rassure svg { width: 16px; height: 16px; color: var(--braise); flex: none; }

/* ---------- l'en-tête ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s, transform .35s; }
.entete__in { height: var(--entete); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.entete.est-plein { background: rgba(253, 248, 239, .9); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 rgba(58, 38, 17, .07); }
.entete.est-cache { transform: translateY(-100%); }
.marque { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--brun); }
.marque__logo { width: 40px; height: 40px; flex: none; color: var(--brun); background: var(--miel); border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--or); padding: 3px; }
.marque__nom { font: 900 19px/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.marque__nom i { font-weight: 700; color: var(--or-fonce); }
.menu { display: flex; align-items: center; gap: 4px; }
.menu > a:not(.bouton) { padding: 10px 13px; border-radius: 10px; font: 500 15.5px/1.2 var(--sans); color: var(--brun); text-decoration: none; white-space: nowrap; }
.menu > a:not(.bouton):hover { background: rgba(58, 38, 17, .05); }
.menu > a[aria-current]:not(.bouton) { box-shadow: inset 0 -2px 0 var(--or); border-radius: 0; }
.menu__gratuit small { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--miel-2); color: var(--or-txt); font: 700 11px/1 var(--sans); vertical-align: 2px; }
.menu .bouton { margin-left: 8px; }
.menu-bouton { display: none; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255, 253, 249, .8); box-shadow: inset 0 0 0 1.5px var(--filet-2); cursor: pointer; position: relative; }
.menu-bouton span:not(.sr) { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--brun); transition: transform .25s, top .25s; }
.menu-bouton span:nth-child(1) { top: 18px; }
.menu-bouton span:nth-child(2) { top: 26px; }
.menu-bouton[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-bouton[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

/* ---------- les gouttes de miel entre deux sections ---------- */
.goutte { display: block; width: 100%; height: clamp(34px, 5vw, 70px); margin-top: -1px; color: var(--miel); }
.goutte--miel-2 { color: var(--miel-2); }
.goutte--creme { color: var(--creme); }
.goutte--creme-2 { color: var(--creme-2); }

/* ---------- les apparitions au défilement ---------- */
[data-apparait] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delai, 0s); }
[data-apparait].est-vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-apparait] { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   L'ACCUEIL : LE HAUT, LA FERME AU CRÉPUSCULE
   La peinture et ses fils d'or sont dans la même boîte (repère 1942 × 809) : la boîte couvre le haut de page
   comme un object-fit: cover, cadrée pour garder le Fermier à droite (unités de conteneur cqw / cqh).
   ========================================================= */
.ferme { position: relative; z-index: 3; isolation: isolate; min-height: max(680px, 100svh); display: flex; flex-direction: column; padding: calc(var(--entete) + clamp(24px, 4vh, 56px)) 0 clamp(64px, 8vh, 100px); background: var(--nuit-1); color: #f6e7c8; }
.ferme__ciel { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; }
.ferme__scene {
  --sh: max(100cqh, calc(100cqw / 2.4005)); --sw: calc(var(--sh) * 2.4005);
  position: absolute; width: var(--sw); height: var(--sh);
  left: clamp(calc(100cqw - var(--sw)), calc(72cqw - var(--sw) * .61), 0px); top: calc((100cqh - var(--sh)) * .62);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.ferme__zoom { position: absolute; inset: 0; transform-origin: 58% 66%; animation: ferme-zoom 30s ease-in-out infinite alternate; }
@keyframes ferme-zoom { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.ferme__peinture, .ferme__fils { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ferme__peinture { object-fit: fill; animation: ferme-aube 2.4s ease-out both; }
@keyframes ferme-aube { from { opacity: 0; } to { opacity: 1; } }
.ferme__fils { overflow: visible; }
/* les fils d'or : un halo, un fil qui se trace, une lumière qui file vers le cadre */
.fils use { fill: none; stroke-linecap: round; }
.fils__halos use { stroke: url(#filOr); stroke-width: 9; }
.fils__halos { opacity: 0; animation: apparait-doux 2.4s 1.6s forwards; --o: .55; }
.fil__base { stroke: url(#filOr); stroke-width: 1.8; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: fil-trace 3s cubic-bezier(.5, .1, .2, 1) forwards; animation-delay: calc(.7s + var(--t, 0s)); }
.fil__flux, .fil__lueur { stroke: url(#filVif); stroke-dasharray: 70 930; stroke-dashoffset: 0; opacity: 0; animation: fil-flux var(--d, 6s) linear var(--r, 0s) infinite, apparait-doux 1s 2.6s forwards; }
.fil__flux { stroke-width: 3; }
.fil__lueur { stroke-width: 12; --o: .28; }
@keyframes fil-trace { to { stroke-dashoffset: 0; } }
@keyframes fil-flux { to { stroke-dashoffset: -1000; } }
@keyframes apparait-doux { to { opacity: var(--o, 1); } }
.perles circle { fill: #fff4d0; }
.perles .perle__halo { fill: #ffd27a; opacity: .22; }
.coulees ellipse { fill: #f7c45c; opacity: 0; }
.abeille__aile { fill: rgba(255, 250, 235, .72); }
.ferme__lueur { transform-origin: 1123px 536px; animation: lueur 4.8s ease-in-out infinite alternate; }
@keyframes lueur { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }
/* le cadran de lune autour de la tête du Fermier tourne, très lentement */
.cadran circle { fill: none; stroke: #ffe1a0; }
.cadran__1 { stroke-width: 1.3; stroke-dasharray: 2 13; opacity: .5; transform-origin: 1258px 183px; animation: tourne 160s linear infinite; }
.cadran__2 { stroke-width: 1; stroke-dasharray: 34 10 4 10; opacity: .32; transform-origin: 1258px 183px; animation: tourne 100s linear infinite reverse; }
@keyframes tourne { to { transform: rotate(360deg); } }
.ferme__voile { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(20, 12, 5, .62) 0%, rgba(20, 12, 5, 0) 20%),
  linear-gradient(0deg, rgba(20, 12, 5, .97) 0%, rgba(20, 12, 5, .62) 17%, rgba(20, 12, 5, 0) 40%),
  linear-gradient(90deg, rgba(20, 12, 5, .9) 0%, rgba(20, 12, 5, .76) 30%, rgba(20, 12, 5, .24) 52%, rgba(20, 12, 5, 0) 65%); }
.pollen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ferme__in { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.ferme__texte { max-width: 640px; }
.ferme .sur { color: var(--or-vif); }
.sur--abeille { display: inline-flex; align-items: center; gap: 10px; }
.sur--abeille svg { width: 22px; height: 22px; flex: none; }
.ferme h1 { margin-top: 18px; font-size: clamp(38px, 2.7vw + 21px, 64px); color: #fff3dc; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.ferme .lead { margin-top: 22px; max-width: 590px; color: rgba(255, 238, 210, .84); }
.ferme__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.ferme .lien-fleche { color: #fff3dc; border-bottom-color: rgba(240, 196, 94, .7); }
.ferme .rassure { margin-top: 22px; color: rgba(255, 238, 210, .74); }
.ferme .rassure svg { color: var(--or-vif); }
.ferme__texte > * { animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.ferme__texte > :nth-child(2) { animation-delay: .15s; }
.ferme__texte > :nth-child(3) { animation-delay: .35s; }
.ferme__texte > :nth-child(4) { animation-delay: .5s; }
.ferme__texte > :nth-child(5) { animation-delay: .62s; }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } }
/* « Personne » : un mot d'or qui brille, souligné d'un coup de pinceau */
.trait { position: relative; display: inline-block; color: #f8d27d; background: linear-gradient(100deg, #f3c25c 0%, #fff0c2 22%, #f3c25c 44%, #e9a53a 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; animation: reflet 7s ease-in-out 2.4s infinite; }
@keyframes reflet { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.trait__pinceau { position: absolute; z-index: -1; left: -3%; bottom: -.1em; width: 106%; height: .34em; fill: var(--braise); clip-path: inset(0 100% 0 0); animation: pinceau .9s 1.3s cubic-bezier(.6, .1, .2, 1) forwards; }
@keyframes pinceau { to { clip-path: inset(0 0 0 0); } }
/* le bouton goutte de miel */
.bouton--miel { position: relative; overflow: hidden; color: #2b1a08; background: linear-gradient(180deg, #fbe29d 0%, #f2c35e 50%, #dc9c36 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(150, 90, 20, .35), 0 16px 36px -12px rgba(240, 170, 60, .75); }
.bouton--miel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s; }
.bouton--miel:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(150, 90, 20, .35), 0 20px 46px -10px rgba(245, 180, 70, .95); }
.bouton--miel:hover::after { transform: translateX(120%); }
/* le chemin en six alvéoles, sur la nuit */
.ferme .apercu { margin-top: clamp(36px, 6vh, 64px); }
.ferme .apercu__titre { color: var(--or-vif); }
.ferme .apercu ol::before { height: 1.5px; background: linear-gradient(90deg, rgba(240, 196, 94, 0), rgba(240, 196, 94, .85) 12%, rgba(240, 196, 94, .85) 88%, rgba(240, 196, 94, 0)); box-shadow: 0 0 12px rgba(240, 196, 94, .7); }
.ferme .apercu a { color: #fff1d6; }
.ferme .hex { background: linear-gradient(160deg, #fbe09a, #d3922f); color: #fbe3a6; box-shadow: none; }
.ferme .hex > span { background: #24160a; }
.ferme .apercu a:hover .hex > span { background: linear-gradient(180deg, #f8d684, #e1a23c); color: #2b1a08; }
/* l'en-tête, clair sur la nuit tant qu'on est en haut */
body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .marque { color: #fff3dc; }
body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .marque__logo { color: #fff3dc; background: rgba(255, 243, 220, .08); box-shadow: inset 0 0 0 1.5px rgba(240, 196, 94, .75); }
body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .marque__nom i { color: var(--or-vif); }
body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .menu-bouton[aria-expanded="false"] { background: rgba(20, 12, 5, .45); box-shadow: inset 0 0 0 1.5px rgba(240, 196, 94, .55); }
body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .menu-bouton[aria-expanded="false"] span:not(.sr) { background: #fff1d6; }
@media (min-width: 1261px) {
  body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .menu > a:not(.bouton) { color: #fff1d6; }
  body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .menu > a:not(.bouton):hover { background: rgba(255, 243, 220, .1); }
  body:is(.page-ferme, .page-rucher-accueil, .page-fermiers, .page-univers, .page-miel, .page-descente, .page-podcast) .entete:not(.est-plein) .menu__gratuit small { background: rgba(240, 196, 94, .22); color: #fbe3a6; }
}
/* le miel coule du haut de page sur la suite */
.coulure { position: absolute; left: 0; right: 0; bottom: -88px; height: 88px; pointer-events: none; }
.coulure svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 5px rgba(120, 70, 15, .22)); }
.coulure__reflet { fill: none; stroke: rgba(255, 246, 220, .6); stroke-width: 2; vector-effect: non-scaling-stroke; }
.coulure__goutte { position: absolute; left: var(--x); top: calc(var(--y) - 7px); width: 10px; height: 13px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 36% 34%, #fff3c8 0 12%, #f0bd57 38%, #c4852a 100%); opacity: 0; animation: goutte var(--d, 7s) var(--r, 0s) ease-in infinite; }
@keyframes goutte {
  0%, 42% { opacity: 0; transform: translateY(-5px) scale(.3); }
  58% { opacity: 1; transform: translateY(0) scale(.8); }
  80% { opacity: 1; transform: translateY(3px) scale(.95, 1.15); }
  97% { opacity: 0; transform: translateY(74px) scale(.8, 1.25); }
  100% { opacity: 0; transform: translateY(74px); }
}
.page-ferme #etape-1 { padding-top: calc(88px + clamp(40px, 4vw, 72px)); }
.ferme.est-hors-champ *, .ferme.est-hors-champ *::after, .emo-haut.est-hors-champ * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ferme__zoom, .fil__flux, .ferme__lueur, .cadran circle, .trait, .coulure__goutte, .ferme__texte > * { animation: none; }
  .fil__base { animation: none; stroke-dashoffset: 0; }
  .fils__halos { animation: none; opacity: .55; }
  .fil__lueur { opacity: .28; }
  .fil__flux { opacity: 1; }
  .trait__pinceau { animation: none; clip-path: none; }
}
/* tablettes en hauteur et téléphones : la peinture en bandeau, le Fermier au milieu, le texte dessous */
@media (max-width: 960px) {
  .ferme { min-height: 0; padding-top: calc(var(--entete) + 44svh); padding-bottom: 76px; }
  .ferme__ciel { bottom: auto; height: calc(var(--entete) + 60svh); }
  .ferme__scene { left: clamp(calc(100cqw - var(--sw)), calc(50cqw - var(--sw) * .61), 0px); top: 0; }
  .ferme__voile { background: linear-gradient(180deg, rgba(20, 12, 5, .55) 0%, rgba(20, 12, 5, 0) 22%, rgba(20, 12, 5, 0) 50%, rgba(20, 12, 5, .88) 80%, #140c05 93%); }
  .ferme__in { justify-content: flex-start; }
  .ferme__texte { max-width: 620px; }
}
@media (max-width: 640px) {
  .ferme { padding-top: calc(var(--entete) + 40svh); }
  .ferme__ciel { height: calc(var(--entete) + 54svh); }
  .coulure, .coulure svg { height: 64px; }
  .coulure { bottom: -64px; }
  .coulure__goutte { display: none; }
  .page-ferme #etape-1 { padding-top: calc(64px + 48px); }
}

/* =========================================================
   L'ACCUEIL, VERSION « ÉMOTIONS » (accueil-emotions.html, à comparer avec la Ferme)
   La scène .emo garde les proportions 600 × 492 : chaque plan la couvre, les éléments y sont placés en %.
   ========================================================= */
.emo-haut { position: relative; overflow: hidden; padding: calc(var(--entete) + clamp(16px, 4vh, 44px)) 0 clamp(32px, 4vh, 56px);
  background: radial-gradient(50% 65% at 76% 38%, rgba(240, 196, 94, .38), rgba(240, 196, 94, 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(187, 77, 39, .07), rgba(187, 77, 39, 0) 70%), var(--miel); }
.emo-haut__grille { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
/* environ 15 % plus petit que les autres titres du site, et encore réduit sur un écran peu haut : l'œil garde du recul */
.emo-haut h1 { margin-top: 14px; font-size: min(clamp(36px, 2.3vw + 18px, 53px), 6.6vh); }
.emo-haut .lead { margin-top: 18px; max-width: 540px; font-size: min(clamp(17px, .4vw + 15px, 18.5px), 2.3vh); }
.emo-haut .hero__actions { margin-top: min(30px, 3.2vh); }
.emo-haut .bouton--grand { min-height: min(56px, 6.6vh); font-size: min(17px, 2vh); }
.emo-haut .rassure { margin-top: min(22px, 2.4vh); }
.emo-haut .apercu { margin-top: clamp(28px, 4.5vh, 64px); }
.emo-haut__texte > * { animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.emo-haut__texte > :nth-child(2) { animation-delay: .12s; }
.emo-haut__texte > :nth-child(3) { animation-delay: .3s; }
.emo-haut__texte > :nth-child(4) { animation-delay: .45s; }
.emo-haut__texte > :nth-child(5) { animation-delay: .58s; }
.emo { position: relative; width: min(100%, 70vh); max-width: 500px; aspect-ratio: 600 / 492; justify-self: center; --calme: 0; --apaise: 0; }
.emo__plan { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.emo__plan > * { position: absolute; }
/* le ciel */
.emo__ciel, .emo__feuilles, .emo__gypso { inset: 0; width: 100%; height: 100%; overflow: visible; }
.emo__lune { fill: #e6c27a; animation: lune 9s ease-in-out infinite alternate; }
@keyframes lune { to { transform: translate(4px, -6px) rotate(-4deg); } }
.emo__soleil { fill: #e7bf6d; transform-origin: 520px 96px; }
.emo__rayons { fill: none; stroke: #e7bf6d; stroke-width: 3; stroke-linecap: round; transform-origin: 520px 96px; animation: tourne 60s linear infinite; }
.emo__etoile { fill: #e3b765; transform-box: fill-box; transform-origin: center; animation: scintille 3.2s ease-in-out var(--d, 0s) infinite; }
@keyframes scintille { 0%, 100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.08); } }
.emo__point { fill: #e3b765; opacity: .7; }
/* le halo et son orbite en pointillés */
.emo__halo { left: 15%; top: 1%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(250, 224, 160, .95), rgba(242, 204, 126, .55) 62%, rgba(240, 196, 94, 0)); opacity: calc(.8 + var(--apaise) * .2); transition: opacity .8s; }
.emo__orbite { left: 6%; top: -6%; width: 88%; height: auto; aspect-ratio: 1; overflow: visible; animation: tourne 120s linear infinite; }
.emo__orbite circle { fill: none; stroke: #d9ac5c; stroke-width: .28; stroke-dasharray: .9 1.6; opacity: .8; }
/* les feuillages */
.emo__tige { fill: none; stroke: #e2c58a; stroke-width: 2.4; stroke-linecap: round; }
.emo__feuilles ellipse { fill: #ead3a0; }
.emo__brin { transform-box: fill-box; transform-origin: 50% 100%; animation: balance 7s ease-in-out infinite alternate; }
.emo__brin--d { animation-delay: -3s; }
@keyframes balance { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
/* la personne et ses émotions (les couches gardent le même cadre : elles se superposent exactement) */
.emo__couche { left: -5%; top: 4%; width: 110%; max-width: none; height: auto; }
.emo__femme { transform-origin: 50% 100%; animation: respire 5.5s ease-in-out infinite; }
@keyframes respire { 50% { transform: translateY(-3px) scale(1.006); } }
.emo__table { left: 4%; right: 4%; top: 84%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 98, 40, .26), rgba(150, 98, 40, 0)); }
.emo__emotions { opacity: calc(1 - max(var(--calme), var(--apaise)) * .92); transition: opacity .7s; }
.emo__emotions > img { scale: calc(1 - max(var(--calme), var(--apaise)) * .12); transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
.emo__grib { transform-origin: 49.2% 6.8%; animation: tourbillon 3.4s ease-in-out infinite; }
@keyframes tourbillon { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg) scale(1.05); } }
.emo__eclairs--g { transform-origin: 30% 20%; animation: vibre 2.8s linear infinite; }
.emo__eclairs--d { transform-origin: 68% 20%; animation: vibre 3.3s linear -1.2s infinite; }
@keyframes vibre {
  0%, 46%, 100% { transform: none; }
  50% { transform: translate(-2px, 1px) rotate(-1.2deg) scale(1.03); }
  54% { transform: translate(2px, -1px) rotate(1deg) scale(.99); }
  58% { transform: translate(-1px, -2px) rotate(-.6deg) scale(1.04); }
  62% { transform: translate(1px, 1px) scale(1); }
  66% { transform: none; }
}
/* les lames et la boîte, au premier plan : on peut les survoler (et alors les émotions se calment) */
.emo__lame { width: 21%; height: auto; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 16px 18px rgba(58, 38, 17, .34)); transition: transform .5s cubic-bezier(.2, .7, .2, 1), translate .5s cubic-bezier(.2, .7, .2, 1); animation: flotte 6s ease-in-out infinite; }
.emo__lame--1 { left: -1%; top: 40%; transform: rotate(-15deg); }
.emo__lame--2 { right: 3%; top: 29%; width: 19.5%; transform: rotate(9deg); animation-delay: -2s; }
.emo__lame--3 { right: -5%; top: 41%; width: 19.5%; transform: rotate(18deg); animation-delay: -4s; }
.emo__lame--1:hover { transform: rotate(-9deg) scale(1.06); }
.emo__lame--2:hover { transform: rotate(4deg) scale(1.06); }
.emo__lame--3:hover { transform: rotate(13deg) scale(1.06); }
@keyframes flotte { 50% { translate: 0 -8px; } }
.emo__boite { left: 37.5%; bottom: -7%; width: 25%; height: auto; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 22px 22px rgba(58, 38, 17, .38)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.emo__boite:hover { transform: translateY(-8px) rotate(-1.5deg); }
.emo__gypso g { fill: #fff8ea; stroke: #d8c39a; stroke-width: 1.2; }
.emo__gypso path { fill: none; stroke: #c9ad7c; stroke-width: 1.4; stroke-linecap: round; }
.emo:has(.emo__lame:hover, .emo__boite:hover) { --apaise: 1; }
@media (prefers-reduced-motion: reduce) {
  .emo-haut__texte > *, .emo__lune, .emo__rayons, .emo__etoile, .emo__orbite, .emo__brin, .emo__femme, .emo__grib, .emo__eclairs--g, .emo__eclairs--d, .emo__lame { animation: none; }
}
@media (max-width: 960px) {
  .emo-haut__grille { grid-template-columns: minmax(0, 1fr); }
  .emo { order: -1; width: 100%; max-width: 560px; margin: -6px auto 0; }
  .emo-haut h1 { font-size: clamp(38px, 2.7vw + 21px, 62px); }
  .emo-haut .lead { font-size: clamp(17.5px, .55vw + 15.5px, 21px); }
  .emo-haut .bouton--grand { min-height: 62px; font-size: 18px; }
}

/* l'aperçu du chemin : six alvéoles reliées par un fil d'or */
.apercu { margin-top: clamp(40px, 5vw, 64px); }
.apercu__titre { font: 700 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); text-align: center; }
.apercu ol { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.apercu ol::before { content: ''; position: absolute; left: 8%; right: 8%; top: 25px; height: 2px; background: repeating-linear-gradient(90deg, var(--or) 0 10px, transparent 10px 16px); }
.apercu a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; text-align: center; color: var(--brun); }
.apercu a span:last-child { font: 600 14px/1.3 var(--sans); }
.apercu a:hover .hex { transform: translateY(-3px); }
.apercu a:hover .hex > span { background: var(--miel-2); }
/* une alvéole : un hexagone d'or, et dedans un hexagone plus clair */
.hex {
  display: grid; place-items: center; width: 60px; height: 52px; flex: none;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--or); color: var(--brun); font: 900 20px/1 var(--serif); font-variant-numeric: lining-nums; transition: transform .2s;
}
.hex > span { display: grid; place-items: center; width: calc(100% - 7px); height: calc(100% - 6px); clip-path: inherit; background: var(--blanc); transition: background .2s; }

/* le rail des étapes (écrans larges) et la barre d'étape (téléphones) */
.rail { position: fixed; left: max(14px, calc((100vw - 1320px) / 2 - 40px)); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 9px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.rail.est-actif { opacity: 1; pointer-events: auto; }
.rail::before { content: ''; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 2px; margin-left: -1px; background: var(--filet-2); z-index: -1; }
.rail a { position: relative; z-index: 0; display: grid; place-items: center; width: 36px; height: 31px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--filet-2); color: var(--doux); font: 800 13px/1 var(--sans); text-decoration: none; transition: background .25s, color .25s; }
.rail a::before { content: ''; position: absolute; z-index: -1; inset: 2px 2.5px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--blanc); transition: background .25s; }
.rail a:hover::before { background: var(--miel); }
.rail a.est-fait { background: var(--or); color: var(--brun); }
.rail a.est-fait::before { background: var(--miel-2); }
.rail a.est-courant { background: var(--braise); color: #fff; }
.rail a.est-courant::before { background: var(--braise); }
.rail__nom { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 10px; border-radius: 8px; background: var(--brun); color: #fff; font: 600 13px/1.2 var(--sans); opacity: 0; pointer-events: none; transition: opacity .2s; }
.rail-item { position: relative; }
.rail-item:hover .rail__nom { opacity: 1; }
.barre-etape { position: fixed; left: 0; right: 0; top: var(--entete); z-index: 45; display: none; align-items: center; gap: 10px; padding: 8px var(--gouttiere); background: rgba(253, 248, 239, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(58, 38, 17, .08); font: 600 13.5px/1.2 var(--sans); color: var(--brun); transform: translateY(-120%); opacity: 0; visibility: hidden; transition: transform .35s, opacity .35s, visibility .35s; }
.barre-etape.est-actif { transform: none; opacity: 1; visibility: visible; }
.barre-etape b { color: var(--braise); }
.barre-etape__fil { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--braise); width: 0; transition: width .3s; }

/* la tête de chaque étape */
.etape { position: relative; padding: clamp(80px, 7vw + 36px, 136px) 0; scroll-margin-top: var(--entete); }
.etape__num { display: flex; align-items: center; gap: 12px; font: 700 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.etape__num .hex { width: 46px; height: 40px; font-size: 17px; background: var(--braise); color: #fff; }
.tete--centre .etape__num { justify-content: center; }
.suite { display: flex; justify-content: center; margin-top: clamp(40px, 4vw, 56px); }
.suite .bouton svg { transition: transform .2s; }
.suite .bouton:hover svg { transform: translateY(3px); }

/* étape 1 : ce qui vous pèse */
.scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.scene {
  position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left; padding: 22px 22px 20px; border-radius: var(--rayon);
  background: var(--blanc); border: 1.5px solid var(--filet); cursor: pointer; box-shadow: var(--ombre);
  transition: border-color .2s, background .25s, transform .2s, box-shadow .25s;
}
.scene:hover { border-color: var(--miel-3); transform: translateY(-3px); }
.scene__icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--miel); color: var(--or-txt); transition: background .25s, color .25s; }
.scene__icone svg { width: 21px; height: 21px; }
.scene__texte { font: italic 700 clamp(18px, .5vw + 15.5px, 21px)/1.35 var(--serif); color: var(--brun); }
.scene__coche { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--filet-2); display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s, transform .25s; }
.scene__coche svg { width: 16px; height: 16px; }
.scene[aria-pressed="true"] { background: linear-gradient(160deg, #fff8e6, #f9e7bd); border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 18px 36px -18px rgba(138, 100, 32, .55); }
.scene[aria-pressed="true"] .scene__icone { background: var(--braise); color: #fff; }
.scene[aria-pressed="true"] .scene__coche { background: var(--braise); border-color: var(--braise); color: #fff; transform: scale(1.08); }
.reponse { max-width: 760px; margin: 34px auto 0; padding: 24px 28px; border-radius: 20px; background: var(--miel); box-shadow: inset 0 0 0 1.5px rgba(224, 180, 90, .55); text-align: center; transition: opacity .4s; }
.reponse p + p { margin-top: 10px; }
.reponse__fort { font: 700 clamp(19px, .6vw + 16px, 23px)/1.4 var(--serif); color: var(--brun); }
.reponse .lien-discret { margin-top: 12px; display: inline-block; }

/* étape 2 : la boucle */
.boucle-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; margin-top: 10px; }
.boucle-texte p { margin-top: 16px; }
.boucle-texte p:first-child { margin-top: 0; }
.boucle { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: center; }
.boucle svg { width: 100%; height: 100%; overflow: visible; }
.boucle__piste { fill: none; stroke: var(--filet-2); stroke-width: 2; stroke-dasharray: 5 9; }
.boucle__fleche { fill: none; stroke: var(--braise); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 90 1000; animation: boucle 6s linear infinite; }
@keyframes boucle { to { stroke-dashoffset: -1100; } }
.boucle__noeud { position: absolute; transform: translate(-50%, -50%); padding: 9px 14px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre); font: 700 14.5px/1.2 var(--sans); color: var(--brun); white-space: nowrap; animation: noeud 6s infinite; }
.boucle__noeud:nth-of-type(1) { left: 50%; top: 4%; animation-delay: 0s; }
.boucle__noeud:nth-of-type(2) { left: 96%; top: 50%; animation-delay: 1.5s; }
.boucle__noeud:nth-of-type(3) { left: 50%; top: 96%; animation-delay: 3s; }
.boucle__noeud:nth-of-type(4) { left: 4%; top: 50%; animation-delay: 4.5s; }
@keyframes noeud { 0%, 20% { background: var(--braise); color: #fff; } 25%, 100% { background: var(--blanc); color: var(--brun); } }
.boucle__centre { position: absolute; inset: 30%; display: grid; place-items: center; text-align: center; font: italic 700 clamp(17px, 1.2vw + 10px, 22px)/1.3 var(--serif); color: var(--doux); }
@media (prefers-reduced-motion: reduce) { .boucle__fleche, .boucle__noeud { animation: none; } }
.pivot { margin-top: clamp(56px, 6vw, 88px); }
.pivot__apres { margin-top: 18px; text-align: center; color: var(--doux); }
.couts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 5vw, 72px); }
.couts li { padding: 22px 22px 20px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); }
.couts b { display: block; font: 700 19px/1.3 var(--serif); color: var(--brun); }
.couts span { display: block; margin-top: 6px; font-size: 15px; color: var(--doux); }
.couts__titre { margin-top: clamp(48px, 5vw, 72px); text-align: center; font: 700 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.couts__titre + .couts { margin-top: 18px; }

/* étape 3 : le récit en plein écran (le fond reste, les cartes défilent) */
.recit { position: relative; padding: 0; background: var(--nuit); }
.recit__tete { position: relative; z-index: 2; padding: clamp(72px, 7vw, 120px) 0 0; }
.recit__tete .etape__num { color: var(--or-vif); }
.recit__tete .h2 { color: #fff7e6; }
.recit__fonds { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.recit__contenu { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.recit__fonds img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.1s ease, transform 6s ease-out; }
.recit__fonds img.est-actif { opacity: 1; transform: scale(1); }
.recit__fonds::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34, 22, 10, .82) 0%, rgba(34, 22, 10, .45) 45%, rgba(34, 22, 10, .1) 75%), linear-gradient(0deg, rgba(34, 22, 10, .55), rgba(34, 22, 10, 0) 40%); }
.recit__cartes { position: relative; z-index: 2; }
.recit__carte { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.recit__carte > div { max-width: 520px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: rgba(253, 248, 239, .94); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.recit__carte .sur { margin-bottom: 10px; }
.recit__carte p:not(.sur) { font: 700 clamp(21px, .9vw + 16px, 28px)/1.38 var(--serif); color: var(--brun); }
.recit__carte p em { font-style: italic; color: var(--braise); }
.recit__carte:first-child { min-height: 90vh; }
.recit__fin { position: relative; z-index: 2; height: 30vh; }

.miels { position: relative; background: var(--creme); }
.miels__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); margin-top: 48px; }
.miel { position: relative; text-align: center; padding: 30px 24px 28px; border-radius: 24px; background: var(--blanc); box-shadow: var(--ombre); }
.miel__pot { position: relative; height: 170px; display: grid; place-items: center; margin-bottom: 18px; }
.miel__pot::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 196, 94, .55), rgba(240, 196, 94, 0)); }
.miel__pot img { position: relative; height: 170px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(58, 38, 17, .3)); }
.miel h3 { font: 900 24px/1.2 var(--serif); color: var(--brun); }
.miel p { margin-top: 10px; font-size: 15.5px; color: var(--doux); }
.miel--trois { background: linear-gradient(165deg, #fffaf0, #f7e5bb); box-shadow: 0 0 0 1.5px var(--or), 0 24px 50px -24px rgba(138, 100, 32, .55); }
.miel--trois .pastille { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); }
.note-recit { max-width: 700px; margin: 36px auto 0; padding: 16px 22px; border-radius: 16px; border: 1.5px dashed var(--filet-2); text-align: center; font-size: 15.5px; color: var(--doux); }
.note-recit b { color: var(--brun); }

/* étape 4 : votre Fermier (aussi sur la page mon-fermier/) */
.fermier-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.formulaire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; max-width: 580px; margin-top: 28px; }
.champ { display: flex; flex-direction: column; gap: 7px; font: 600 14px/1.3 var(--sans); color: var(--brun); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="date"], .date-trois input {
  width: 100%; height: 54px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--filet-2); background: #fff;
  font: 500 17px/1 var(--sans); color: var(--encre); transition: border-color .2s, box-shadow .2s;
}
.champ input:focus, .date-trois input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 4px rgba(224, 180, 90, .28); }
.formulaire .erreur { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--braise); }
.erreur:empty { display: none; }
.formulaire .bouton { grid-column: 1 / -1; justify-self: start; }
.formulaire .discret { grid-column: 1 / -1; }
.discret { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--doux); }
.discret svg { width: 15px; height: 15px; color: var(--or-txt); flex: none; }

.eventail { position: relative; width: 100%; max-width: 440px; aspect-ratio: 5 / 4; justify-self: center; }
.eventail > img, .retourne { position: absolute; top: 3%; left: 50%; width: 40%; aspect-ratio: 458 / 700; height: auto; margin-left: -20%; }
.eventail > img { filter: drop-shadow(0 16px 22px rgba(58, 38, 17, .28)); }
.eventail__g { transform: translateX(-60%) translateY(8%) rotate(-11deg); }
.eventail__d { transform: translateX(60%) translateY(8%) rotate(11deg); }
/* pas de perspective ni d'animation sur ce conteneur : avec l'ombre, Chrome la coupait en rectangle */
.retourne { z-index: 2; filter: drop-shadow(0 22px 28px rgba(58, 38, 17, .35)); }
.retourne img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: perspective(1400px) rotateY(0); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.retourne__face { transform: perspective(1400px) rotateY(180deg) !important; }
.retourne.est-retournee .retourne__dos { transform: perspective(1400px) rotateY(-180deg); }
.retourne.est-retournee .retourne__face { transform: perspective(1400px) rotateY(0) !important; }

.resultat { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: var(--blanc); box-shadow: var(--ombre-forte); scroll-margin-top: calc(var(--entete) + 40px); }
.resultat:focus { outline: none; }
.resultat[hidden] { display: none; }
.resultat__grille { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 56px); align-items: start; }
.portrait { position: relative; margin: 0; max-width: 400px; width: 100%; justify-self: center; }
.portrait > img:first-child { width: 100%; border-radius: 20px; box-shadow: var(--ombre-forte); }
.portrait__lame { position: absolute; right: -14px; bottom: -18px; width: 34%; transform: rotate(7deg); filter: drop-shadow(0 12px 18px rgba(58, 38, 17, .4)); }
.portrait__lame[hidden] { display: none; }
.portrait.est-lame > img:first-child { border-radius: 0; box-shadow: none; filter: drop-shadow(0 26px 30px rgba(58, 38, 17, .4)); max-width: 320px; margin: 0 auto; }
.resultat__titre { margin-top: 8px; font: 900 clamp(30px, 2vw + 20px, 46px)/1.1 var(--serif); color: var(--brun); }
.resultat__recolte { margin-top: 14px; font: 700 clamp(19px, .7vw + 15px, 23px)/1.4 var(--serif); color: var(--brun); }
.resultat__recolte em { font-style: normal; color: var(--braise); }
.resultat__miel { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(224, 180, 90, .2); font-size: 14px; color: var(--brun); }
.resultat__miel[hidden] { display: none; }
.resultat__miel img { width: 30px; height: 30px; object-fit: contain; }
.resultat__cadre { margin-top: 16px; font-size: 16px; }
.calcul { display: block; margin-top: 8px; font-size: 13.5px; color: var(--doux); }
.bloc-doux { margin-top: 20px; padding: 16px 20px 18px; border-radius: 16px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--filet); }
.bloc-doux__label { font: 700 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--or-txt); }
.bloc-doux blockquote { margin: 6px 0 0; font: italic 700 clamp(19px, .6vw + 16px, 22px)/1.4 var(--serif); color: var(--brun); }
.bloc-doux p:last-child { margin-top: 6px; font-size: 15.5px; color: var(--encre); }
.resultat__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.resultat__actions .bouton { flex: 1 1 240px; }
.info { margin-top: 12px; font-size: 14px; color: var(--doux); }
.info:empty { display: none; }
.liens { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.liens [hidden] { display: none; }

/* étape 5 : la pyramide */
.pyramide { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 48px; }
.niveau {
  position: relative; width: var(--l); min-height: 112px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 18px clamp(30px, 6%, 70px); text-align: left;
  clip-path: polygon(var(--b) 0, calc(100% - var(--b)) 0, 100% 100%, 0 100%);
  background: var(--blanc); color: var(--brun); transition: background .7s, color .7s, transform .7s, opacity .7s;
  opacity: .45; transform: translateY(14px);
}
.niveau.est-allume { opacity: 1; transform: none; }
.niveau--1 { --l: 100%; --b: 5%; background: linear-gradient(180deg, #f7dfa8, #efcb7c); }
.niveau--2 { --l: 82%; --b: 6%; background: linear-gradient(180deg, #f9e6bd, #f3d595); }
.niveau--3 { --l: 64%; --b: 7.5%; background: linear-gradient(180deg, #fbeed2, #f6dfae); }
.niveau--4 { --l: 46%; --b: 10%; background: linear-gradient(180deg, #fff6e4, #f9e8c4); }
.niveau__etage { font: 700 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.niveau__titre { font: 900 clamp(19px, 1vw + 14px, 25px)/1.2 var(--serif); }
.niveau__texte { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.niveau__icone { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 249, .75); color: var(--braise); font: 700 22px/1 var(--serif); }
.niveau__vous { display: none; margin-left: 8px; vertical-align: 2px; }
.niveau.est-pour-vous .niveau__vous { display: inline-flex; }
.niveau.est-pour-vous { box-shadow: none; filter: drop-shadow(0 0 0 transparent); }
.niveau.est-pour-vous .niveau__icone { background: var(--braise); color: #fff; }
.pyramide__note { margin-top: 20px; text-align: center; font-size: 14.5px; color: var(--doux); }

.avant-apres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: clamp(56px, 6vw, 88px); }
.avant-apres > div { padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; }
.avant-apres h3 { display: flex; align-items: center; gap: 10px; font: 700 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.avant-apres li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid rgba(58, 38, 17, .1); font-size: 16px; }
.avant-apres li:first-child { border-top: 0; margin-top: 10px; }
.avant-apres li svg { position: absolute; left: 0; top: 14px; width: 20px; height: 20px; }
.avant { background: var(--creme-2); color: var(--doux); }
.avant h3 { color: var(--doux); }
.avant li svg { color: #b9a68a; }
.apres { background: var(--blanc); box-shadow: 0 0 0 1.5px var(--or), var(--ombre); color: var(--brun); }
.apres h3 { color: var(--braise); }
.apres li { font-weight: 600; }
.apres li svg { color: var(--braise); }

/* étape 6 : le jeu */
.jeu-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.jeu-photo { position: relative; margin: 0; }
.jeu-photo img { width: 100%; border-radius: 26px; box-shadow: var(--ombre-forte); }
.jeu-photo figcaption { position: absolute; left: 18px; bottom: 18px; }
.benefices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 26px; }
.benefice { padding: 16px 18px; border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); }
.benefice b { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--serif); color: var(--brun); }
.benefice b span { color: var(--braise); font-size: 20px; }
.benefice p { margin-top: 6px; font-size: 14.5px; color: var(--doux); }
.pas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; counter-reset: pas; }
.pas li { position: relative; padding: 26px 24px 22px; border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre); counter-increment: pas; }
.pas li::before { content: counter(pas); position: absolute; top: -16px; left: 22px; width: 40px; height: 35px; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--or); color: var(--brun); font: 900 16px/1 var(--serif); font-variant-numeric: lining-nums; }
.pas b { display: block; font: 700 20px/1.3 var(--serif); color: var(--brun); }
.pas p { margin-top: 6px; font-size: 15px; color: var(--doux); }

/* l'essai : tirer une lame, pour voir */
.essai { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 5vw, 72px); padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: linear-gradient(160deg, #fff9ec, #f6e2b5); box-shadow: 0 0 0 1.5px rgba(224, 180, 90, .7), var(--ombre); }
.essai__paquet { position: relative; width: 100%; max-width: 260px; aspect-ratio: 458 / 700; justify-self: center; }
.essai__paquet img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 12px 16px rgba(58, 38, 17, .25)); }
.essai__paquet img:nth-child(1) { transform: translate(-10px, 8px) rotate(-5deg); }
.essai__paquet img:nth-child(2) { transform: translate(8px, 4px) rotate(4deg); }
.essai__paquet .retourne { inset: 0; top: 0; left: 0; width: 100%; margin: 0; }
.essai__nom { margin-top: 8px; font: 900 clamp(26px, 1.6vw + 18px, 38px)/1.15 var(--serif); color: var(--brun); }
.essai__texte { margin-top: 12px; }
.essai__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }

/* ---------- l'offre ---------- */
.offres { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 20px; margin-top: 48px; align-items: center; }
.carte-offre { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 24px; background: var(--blanc); box-shadow: var(--ombre); }
.carte-offre__img { height: 150px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 14px; }
.carte-offre__img img { max-height: 100%; width: auto; border-radius: 12px; box-shadow: 0 0 0 4px #fffaf0, 0 16px 26px -12px rgba(58, 38, 17, .55); }
.carte-offre h3 { font: 900 25px/1.2 var(--serif); color: var(--brun); }
.carte-offre__sous { margin-top: 4px; font-size: 14.5px; color: var(--doux); }
.prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; }
.prix b { font: 900 44px/1 var(--serif); color: var(--brun); }
.prix small { font: 600 13.5px/1.3 var(--sans); color: var(--or-txt); }
.pile { margin-top: 18px; border-top: 1px solid var(--filet); }
.pile li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--filet); font-size: 14.5px; line-height: 1.45; color: var(--texte); }
.pile li b { color: var(--brun); font-weight: 700; }
.pile li svg { position: absolute; left: 0; top: 12px; width: 19px; height: 19px; padding: 3px; border-radius: 50%; background: rgba(187, 77, 39, .12); color: var(--braise); }
.pile li small { display: block; color: var(--doux); font-size: 13px; }
.carte-offre .bouton { margin-top: 22px; }
.carte-offre__note { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--doux); }
.carte-offre--vedette { padding: 34px 28px 28px; background: linear-gradient(165deg, #fffaf0 0%, #f7e3b6 100%); box-shadow: 0 0 0 2px var(--or), 0 30px 70px -28px rgba(138, 100, 32, .6); }
.carte-offre--vedette .carte-offre__img { height: 190px; }
.carte-offre--vedette > .pastille { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 8px 16px; font-size: 13px; box-shadow: 0 8px 18px -8px rgba(187, 77, 39, .7); }
.confiance { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 36px; font-size: 14.5px; color: var(--doux); }
.confiance li { display: inline-flex; align-items: center; gap: 8px; }
.confiance svg { width: 18px; height: 18px; color: var(--braise); }
.confiance b { color: var(--brun); }
.expedition { margin-top: 14px; text-align: center; font-size: 14px; color: var(--doux); }

/* la garantie : un sceau */
.garantie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: center; max-width: 880px; margin: clamp(48px, 5vw, 72px) auto 0; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--blanc); box-shadow: var(--ombre); }
.sceau { position: relative; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6d58a, #d9a446 60%, #b8862f); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25), 0 14px 26px -10px rgba(138, 100, 32, .7); color: var(--brun); text-align: center; }
.sceau::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px dashed rgba(58, 38, 17, .45); }
.sceau b { display: block; font: 900 40px/1 var(--serif); }
.sceau span { display: block; font: 700 10.5px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.garantie h3 { font: 900 clamp(22px, 1vw + 17px, 28px)/1.2 var(--serif); color: var(--brun); }
.garantie p { margin-top: 8px; color: var(--doux); }

/* ---------- l'auteur ---------- */
.auteur-grille { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.auteur-photo { position: relative; margin: 0; }
.auteur-photo img { width: 100%; aspect-ratio: 300 / 360; object-fit: cover; object-position: top; border-radius: 26px; box-shadow: var(--ombre-forte); }
.auteur-photo .pastille { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); box-shadow: 0 8px 20px -6px rgba(58, 38, 17, .45); }
.auteur-texte p { margin-top: 14px; }
.auteur-texte .h2 { margin-top: 10px; }
.faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(58, 38, 17, .14); }
.faits strong { display: block; font: 900 28px/1 var(--serif); color: var(--brun); }
.faits span { display: block; margin-top: 6px; font: 600 13px/1.45 var(--sans); color: var(--doux); }

/* ---------- les questions ---------- */
.faq-grille { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.faq { border-top: 1px solid var(--filet-2); }
.faq details { border-bottom: 1px solid var(--filet-2); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font: 600 17.5px/1.4 var(--sans); color: var(--brun); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--filet-2); display: grid; place-items: center; font: 500 18px/1 var(--sans); color: var(--doux); transition: transform .25s, background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--miel); }
.faq details p { padding: 0 40px 22px 0; color: var(--doux); }

/* ---------- le dernier appel ---------- */
/* la fin de la page : de nouveau la nuit, sous le cadran de la Ferme */
.final { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #f6e7c8; padding: clamp(96px, 8vw + 40px, 160px) 0; background: radial-gradient(55% 60% at 50% 30%, rgba(240, 180, 80, .2), rgba(240, 180, 80, 0) 70%), var(--nuit-1); }
.final .h2 { color: #fff3dc; }
.final .lead { max-width: 680px; margin: 18px auto 0; color: rgba(255, 238, 210, .84); }
.final .petit { color: rgba(255, 238, 210, .7); }
.final .petit a { color: #fbe3a6; }
.final__decor { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: center; pointer-events: none; }
.final__cadran { width: min(820px, 150vw); max-width: none; height: auto; margin-top: clamp(-170px, -8vw, -60px); opacity: .5; animation: tourne 240s linear infinite; }
.final__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.final__lames { display: flex; justify-content: center; margin-bottom: 30px; }
.final__lames img { width: 92px; margin: 0 -12px; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55)); }
.final__lames img:nth-child(1) { transform: rotate(-12deg) translateY(12px); }
.final__lames img:nth-child(3) { transform: rotate(12deg) translateY(12px); }

/* ---------- la lettre ---------- */
.lettre-carte { max-width: 760px; margin: 0 auto; padding: clamp(24px, 3.4vw, 40px); border-radius: 26px; background: var(--blanc); box-shadow: var(--ombre); }
.lettre-form { margin-top: 22px; }
.lettre-ligne { display: flex; gap: 10px; }
.lettre-ligne input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--filet-2); background: #fff; font: 500 17px/1 var(--sans); }
.lettre-ligne input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 4px rgba(224, 180, 90, .28); }
.accord { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 14.5px; color: var(--texte); cursor: pointer; }
.accord input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--braise); flex: none; }
.mentions { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--doux); }
.mentions a { color: var(--brun); }
.lettre-msg { margin-top: 14px; font-weight: 600; color: var(--brun); }
.lettre-msg:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- le pied ---------- */
.pied { background: #efe2c6; color: var(--encre); padding: clamp(48px, 5vw, 72px) 0 28px; }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; }
.pied__devise { margin-top: 18px; font: italic 700 19px/1.4 var(--serif); color: var(--brun); }
.pied__petit { margin-top: 8px; font-size: 14px; color: var(--doux); }
.pied__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pied__nav p { font: 700 12.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); margin-bottom: 8px; }
.pied__nav a { display: block; padding: 5px 0; font: 500 14.5px/1.5 var(--sans); color: #4a3720; text-decoration: none; }
.pied__nav a:hover { color: var(--braise); }
.pied__bas { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(58, 38, 17, .14); font-size: 13px; color: var(--doux); }

/* ---------- les pages intérieures ---------- */
.page-tete { padding: calc(var(--entete) + clamp(36px, 5vw, 72px)) 0 clamp(40px, 5vw, 64px); background: radial-gradient(55% 80% at 85% 10%, rgba(240, 196, 94, .35), rgba(240, 196, 94, 0) 70%), var(--miel); }
.page-tete .display { margin-top: 14px; font-size: clamp(38px, 3.6vw + 18px, 64px); }
.page-tete .lead { margin-top: 18px; max-width: 720px; }
.fil { font-size: 13.5px; color: var(--doux); }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--brun); }
.texte-long { max-width: 760px; }
.texte-long h2 { margin: 42px 0 12px; font: 900 26px/1.25 var(--serif); color: var(--brun); }
.texte-long h3 { margin: 28px 0 8px; font: 700 19px/1.3 var(--serif); color: var(--brun); }
.texte-long p, .texte-long ul { margin-top: 12px; }
.texte-long ul { padding-left: 20px; list-style: disc; }
.texte-long li { margin-top: 6px; }
.texte-long a { color: var(--brun); text-decoration-color: var(--or); text-underline-offset: 3px; }
.a-completer { color: var(--braise); font-weight: 700; }

/* la page du jeu : la galerie */
.produit-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.galerie { position: sticky; top: calc(var(--entete) + 16px); }
.galerie__grande { position: relative; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: var(--creme-2); box-shadow: var(--ombre-forte); }
.galerie__grande img, .galerie__grande video { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignettes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.galerie__vignettes button { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; cursor: pointer; opacity: .65; box-shadow: inset 0 0 0 2px transparent; transition: opacity .2s, box-shadow .2s; background: var(--creme-2); }
.galerie__vignettes button img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignettes button[aria-current="true"] { opacity: 1; outline: 2px solid var(--braise); outline-offset: 2px; }
.produit-texte .display { font-size: clamp(36px, 3vw + 18px, 58px); margin-top: 12px; }
.produit-texte .lead { margin-top: 16px; }
.choix { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.choix label { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--filet-2); background: var(--blanc); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.choix input { width: 20px; height: 20px; accent-color: var(--braise); margin: 0; }
.choix label:has(input:checked) { border-color: var(--braise); box-shadow: 0 0 0 1px var(--braise), var(--ombre); background: #fffaf2; }
.choix b { display: block; font: 700 17px/1.25 var(--sans); color: var(--brun); }
.choix small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--doux); }
.choix .choix__prix { font: 900 24px/1 var(--serif); color: var(--brun); }
.choix .pastille { position: absolute; top: -11px; right: 16px; padding: 4px 10px; font-size: 11.5px; }
.produit-texte .bouton--bloc { margin-top: 18px; }
.produit-texte .rassure { margin-top: 14px; justify-content: center; }
.app-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.app-video { position: relative; max-width: 320px; justify-self: center; border-radius: 34px; overflow: hidden; box-shadow: 0 0 0 10px #2b1d0e, var(--ombre-forte); }
.app-video video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.boite-liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 32px; }
.boite-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre); }
.boite-liste li > span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--miel); color: var(--or-txt); }
.boite-liste svg { width: 22px; height: 22px; }
.boite-liste b { display: block; font: 700 17px/1.3 var(--serif); color: var(--brun); }
.boite-liste p { margin-top: 4px; font-size: 14.5px; color: var(--doux); }
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); background: rgba(253, 248, 239, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 rgba(58, 38, 17, .1), 0 -10px 30px -10px rgba(58, 38, 17, .2); transform: translateY(110%); transition: transform .3s; }
.barre-achat.est-actif { transform: none; }
.barre-achat b { display: block; font: 700 15px/1.2 var(--sans); color: var(--brun); }
.barre-achat small { color: var(--doux); font-size: 12.5px; }

/* les 24 lames */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filtres button { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--filet-2); background: var(--blanc); cursor: pointer; font: 600 14px/1 var(--sans); color: var(--brun); }
.filtres button[aria-pressed="true"] { background: var(--brun); border-color: var(--brun); color: #fff; }
.grille-lames { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); margin-top: 30px; }
.vignette-lame { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; }
.vignette-lame img { width: 100%; filter: drop-shadow(0 10px 14px rgba(58, 38, 17, .25)); transition: transform .25s; }
.vignette-lame:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.vignette-lame span { font: 700 14.5px/1.25 var(--serif); color: var(--brun); }
.vignette-lame small { display: block; font: 600 11.5px/1.3 var(--sans); color: var(--or-txt); letter-spacing: .06em; }
.vignette-lame[hidden] { display: none; }
.fiche { width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; overscroll-behavior: contain; padding: 0; border: 0; border-radius: 28px; background: var(--creme); color: var(--texte); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55); }
.fiche::backdrop { background: rgba(34, 22, 10, .55); backdrop-filter: blur(4px); }
.fiche__fermer { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blanc); box-shadow: var(--ombre); cursor: pointer; display: grid; place-items: center; }
.fiche__fermer svg { width: 20px; height: 20px; }
.fiche__corps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); padding: clamp(22px, 4vw, 44px); }
.fiche__nav { display: flex; justify-content: space-between; gap: 12px; padding: 0 clamp(22px, 4vw, 44px) clamp(22px, 4vw, 34px); }

/* l'auteur : les livres */
.livres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.livre { display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: var(--blanc); box-shadow: var(--ombre); }
.livre img { width: 62%; margin: 0 auto 18px; border-radius: 6px; background: #000; box-shadow: 0 18px 30px -12px rgba(58, 38, 17, .55); }
.livre h3 { font: 900 22px/1.2 var(--serif); color: var(--brun); }
.livre .sur { margin-top: 4px; }
.livre p:not(.sur) { margin-top: 8px; font-size: 15px; color: var(--doux); }
.livre .lien-fleche { margin-top: auto; padding-top: 16px; align-self: flex-start; border-bottom: 0; }

/* les fiches des lames : en liste sans script, une à une dans la fenêtre avec le script */
.fiche-lame { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); padding: clamp(22px, 3.4vw, 40px); border-radius: 26px; background: var(--blanc); box-shadow: var(--ombre); scroll-margin-top: calc(var(--entete) + 20px); }
.fiche-lame + .fiche-lame { margin-top: 22px; }
.avec-fiches .fiches-liste { display: none; }
.axes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet); }
.axes ul { margin-top: 6px; }
.axes li { position: relative; padding-left: 14px; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--doux); }
.axes li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.fiche .portrait { max-width: 340px; }
@media (max-width: 640px) { .fiche .portrait { max-width: 230px; } .fiche__nav { flex-wrap: wrap; justify-content: center; } }
.fiche .resultat__titre { padding-right: 40px; }

/* le bandeau des cookies publicitaires (page du jeu) */
.cookies-pub { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; border-radius: 18px; background: var(--blanc); box-shadow: 0 0 0 1px var(--filet-2), 0 24px 60px -20px rgba(58, 38, 17, .5); font-size: 14px; color: var(--texte); }
.cookies-pub p { flex: 1 1 280px; }
.cookies-pub a { color: var(--brun); }
.cookies-pub div { display: flex; gap: 10px; }
.cookies-pub button { min-height: 42px; padding: 0 18px; border-radius: 11px; border: 1.5px solid var(--filet-2); background: var(--blanc); font: 700 14.5px/1 var(--sans); color: var(--brun); cursor: pointer; }
.cookies-pub button[data-c="oui"] { background: var(--brun); border-color: var(--brun); color: #fff; }

/* =========================================================
   LE DÉCOR DE LA FERME (toutes les pages, et bientôt le Rucher)
   images/decor/ : orne-abeille.svg, alveoles.svg, cadre.svg, cadran.svg, coulure.svg
   ========================================================= */
/* l'abeille entre deux filets, au-dessus des titres centrés qui n'ont pas de numéro d'étape */
.tete--centre:not(:has(.etape__num))::before, .pivot::before { content: ''; display: block; width: 230px; max-width: 70%; height: 23px; margin: 0 auto 20px; background: url(../../images/decor/orne-abeille.svg) center / contain no-repeat; }
/* les alvéoles en filigrane, qui s'effacent depuis un coin */
.fond-creme-2, .fond-miel, .miels { position: relative; isolation: isolate; }
.fond-creme-2::before, .fond-miel::before, .miels::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: url(../../images/decor/alveoles.svg) 0 0 / 56px auto; opacity: .42; -webkit-mask-image: var(--masque); mask-image: var(--masque); }
.fond-creme-2::before { --masque: radial-gradient(55% 60% at 0% 0%, #000, transparent 72%); }
.fond-miel::before { --masque: radial-gradient(55% 65% at 100% 0%, #000, transparent 72%); }
.miels::before { --masque: radial-gradient(50% 60% at 0% 100%, #000, transparent 72%); }
/* un filet d'or à l'intérieur des cartes qu'on touche, comme sur une lame */
.scene::after { content: ''; position: absolute; inset: 6px; border-radius: calc(var(--rayon) - 5px); border: 1px solid rgba(224, 180, 90, .3); pointer-events: none; transition: border-color .25s; }
.scene[aria-pressed="true"]::after { border-color: rgba(184, 134, 47, .55); }
/* le cadre de lame (coins échancrés, losanges, vrilles) pour les messages qui comptent */
.recit__carte > div, .reponse, .garantie { position: relative; }
.recit__carte > div::after, .reponse::after, .garantie::after { content: ''; position: absolute; inset: 8px; border: 18px solid transparent; border-image: url(../../images/decor/cadre.svg) 32 / 18px stretch; pointer-events: none; opacity: .85; }
/* le cadran de la Ferme tourne derrière l'éventail des lames (étape 4, page Mon Fermier) */
.eventail::before { content: ''; position: absolute; inset: -12% -16%; background: url(../../images/decor/cadran-clair.svg) center / contain no-repeat; opacity: .5; animation: tourne 220s linear infinite; }
/* après la nuit du final, le miel coule sur le pied de page */
main:has(> .final) + .pied { position: relative; padding-top: calc(70px + clamp(40px, 4vw, 60px)); }
main:has(> .final) + .pied::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 70px; background: url(../../images/decor/coulure.svg) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 5px 5px rgba(120, 70, 15, .2)); }
@media (prefers-reduced-motion: reduce) { .eventail::before, .final__cadran { animation: none; } }
/* la pyramide est une ruche en paille : des rangs tressés, un bouton en haut, une planche dessous */
.niveau > * { position: relative; }
.niveau::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(138, 100, 32, .15) 13px 14.5px, transparent 14.5px 16px), repeating-linear-gradient(118deg, transparent 0 7px, rgba(138, 100, 32, .06) 7px 8px); }
.pyramide::before { content: ''; width: 9%; min-width: 56px; height: 16px; margin-bottom: -6px; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #fff6e4, #f3dfb5); box-shadow: inset 0 -3px 0 rgba(138, 100, 32, .14); }
.pyramide::after { content: ''; width: 104%; height: 14px; margin-top: -4px; border-radius: 4px; background: linear-gradient(180deg, #b07c40, #7a4f22); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .35), 0 12px 20px -10px rgba(58, 38, 17, .55); }

/* =========================================================
   LE RUCHER (le blog) : l'accueil de nuit, les cartes d'articles, la page de lecture
   ========================================================= */
/* l'accueil : la Ferme au crépuscule, le cadran qui tourne, puis le miel qui coule sur la liste */
.rucher-haut { position: relative; z-index: 3; isolation: isolate; padding: calc(var(--entete) + clamp(48px, 9vh, 120px)) 0 clamp(80px, 11vh, 140px); background: var(--nuit-1); color: #f6e7c8; }
.rucher-haut__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.rucher-haut__fond > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 64% 38%; animation: ferme-zoom 30s ease-in-out infinite alternate; }
.rucher-haut__fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 5, .93) 0%, rgba(20, 12, 5, .74) 38%, rgba(20, 12, 5, .18) 72%), linear-gradient(0deg, rgba(20, 12, 5, .9), rgba(20, 12, 5, 0) 45%), linear-gradient(180deg, rgba(20, 12, 5, .55), rgba(20, 12, 5, 0) 26%); }
.rucher-haut__cadran { position: absolute; z-index: 1; right: -6%; top: 50%; width: min(720px, 72vw); max-width: none; height: auto; margin-top: calc(min(720px, 72vw) / -2); opacity: .3; animation: tourne 240s linear infinite; }
.rucher-haut .sur { color: var(--or-vif); }
.rucher-haut h1 { margin-top: 14px; font-size: clamp(50px, 4vw + 26px, 92px); color: #fff3dc; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.rucher-haut .lead { margin-top: 18px; max-width: 560px; color: rgba(255, 238, 210, .86); }
.rucher-haut__compte { margin-top: 22px; font: 600 14px/1.4 var(--sans); letter-spacing: .04em; color: rgba(255, 238, 210, .66); }
.rucher-haut__in > * { animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.rucher-haut__in > :nth-child(2) { animation-delay: .12s; }
.rucher-haut__in > :nth-child(3) { animation-delay: .26s; }
.rucher-haut__in > :nth-child(4) { animation-delay: .4s; }
.rucher-haut::after { content: ''; position: absolute; left: 0; right: 0; bottom: -70px; height: 70px; pointer-events: none; background: url(../../images/decor/coulure.svg) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 5px 5px rgba(120, 70, 15, .22)); }
.rucher-liste { padding-top: calc(70px + clamp(32px, 4vw, 56px)); }
.filtres--rucher { justify-content: center; margin: 0 0 clamp(28px, 3vw, 40px); }

/* les cartes d'articles (un filet d'or à l'intérieur, comme sur une lame) */
.cartes-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.carte-r { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--blanc); box-shadow: var(--ombre); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.carte-r[hidden] { display: none; }
.carte-r::after { content: ''; position: absolute; inset: 6px; border-radius: 17px; border: 1px solid rgba(224, 180, 90, .3); pointer-events: none; }
.carte-r:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-r__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nuit-1); }
.carte-r__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.carte-r:hover .carte-r__img img { transform: scale(1.05); }
.carte-r__txt { display: flex; flex-direction: column; flex: 1; padding: 20px 22px; }
.carte-r__rub { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--miel-2); font: 700 11.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--or-txt); }
.carte-r__titre { margin-top: 12px; font: 900 20px/1.25 var(--serif); color: var(--brun); }
.carte-r__desc { display: block; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--doux); }
.carte-r__pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; font-size: 13.5px; color: var(--doux); }
.carte-r__pied b { display: inline-flex; align-items: center; gap: 6px; color: var(--braise); }
.carte-r__pied svg { width: 15px; height: 15px; transition: transform .2s; }
.carte-r:hover .carte-r__pied svg { transform: translateX(3px); }
/* l'article à la une, en grand */
.carte-r--une { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.carte-r--une .carte-r__img { aspect-ratio: auto; min-height: 340px; }
.carte-r--une .carte-r__txt { justify-content: center; padding: clamp(24px, 3vw, 48px); }
.carte-r--une .carte-r__titre { font-size: clamp(26px, 1.3vw + 16px, 36px); }
.carte-r--une .carte-r__desc { font-size: 16.5px; }
.carte-r--une .carte-r__pied { margin-top: 26px; }
.carte-r--une::before { content: 'À la une'; position: absolute; z-index: 1; top: 18px; left: 18px; padding: 7px 14px; border-radius: 999px; background: var(--braise); color: #fff; font: 700 12.5px/1.2 var(--sans); box-shadow: 0 8px 18px -8px rgba(187, 77, 39, .7); }

/* un article : le fil de lecture, l'en-tête, l'illustration dans un cadre de lame */
.lecture-fil { position: fixed; left: 0; right: 0; top: var(--entete); z-index: 49; height: 3px; background: linear-gradient(90deg, #f3c96c, #e3a53d, var(--braise)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; transition: top .35s; }
body:has(.entete.est-cache) .lecture-fil { top: 0; }
.art-tete { padding: calc(var(--entete) + clamp(24px, 4vw, 52px)) 0 clamp(120px, 13vw, 170px); }
.art-tete__in { max-width: 940px; }
.ariane { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 600 13.5px/1.4 var(--sans); color: var(--doux); }
.ariane a { color: var(--doux); text-decoration: none; }
.ariane a:hover { color: var(--braise); }
.art-tete .sur { margin-top: 22px; }
.art-titre { margin-top: 12px; font-size: clamp(32px, 2.3vw + 18px, 54px); line-height: 1.08; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 24px; font-size: 14.5px; color: var(--doux); }
.art-meta img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--or); }
.art-meta b { color: var(--brun); }
.art-image { position: relative; z-index: 1; max-width: 1180px; margin: calc(-1 * clamp(96px, 11vw, 140px)) auto 0; }
.art-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; box-shadow: var(--ombre-forte); }
.art-image::after { content: ''; position: absolute; inset: 12px calc(var(--gouttiere) + 12px); border: 18px solid transparent; border-image: url(../../images/decor/cadre.svg) 32 / 18px stretch; pointer-events: none; opacity: .9; }

/* le sommaire, qui suit la lecture */
.art-grille { display: grid; grid-template-columns: 230px minmax(0, 720px); justify-content: center; align-items: start; gap: clamp(32px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.sommaire { position: sticky; top: calc(var(--entete) + 28px); max-height: calc(100vh - var(--entete) - 56px); overflow: auto; }
.sommaire summary { list-style: none; padding-bottom: 10px; border-bottom: 1px solid var(--filet-2); font: 700 12.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); cursor: pointer; }
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire ol { counter-reset: s; display: grid; gap: 2px; margin-top: 12px; }
.sommaire li { counter-increment: s; }
.sommaire a { position: relative; display: block; padding: 7px 0 7px 31px; font: 500 14px/1.4 var(--sans); color: var(--doux); text-decoration: none; transition: color .2s; }
.sommaire a::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 22px; height: 19px; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--filet-2); color: var(--doux); font: 800 10px/1 var(--sans); transition: background .2s, color .2s; }
.sommaire a:hover { color: var(--brun); }
.sommaire a.est-ici { color: var(--brun); font-weight: 700; }
.sommaire a.est-ici::before { background: var(--braise); color: #fff; }

/* le texte de l'article */
.prose { font-size: 18.5px; line-height: 1.78; color: var(--texte); }
.prose > * + * { margin-top: 1.1em; }
.prose .chapeau { font: 500 clamp(19px, .5vw + 16px, 22px)/1.62 var(--sans); color: var(--brun); }
.prose .chapeau::first-letter { float: left; margin: .1em .12em 0 0; font: 900 3.5em/.8 var(--serif); color: var(--braise); }
.prose h2 { margin-top: 2.3em; font: 900 clamp(26px, 1vw + 20px, 34px)/1.2 var(--serif); color: var(--brun); scroll-margin-top: calc(var(--entete) + 28px); }
.prose h2::before { content: ''; display: block; width: 30px; height: 26px; margin-bottom: 14px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(160deg, #f3c96c, #d3922f); }
.prose h3 { margin-top: 1.8em; font: 700 clamp(20px, .5vw + 17px, 24px)/1.3 var(--serif); color: var(--brun); scroll-margin-top: calc(var(--entete) + 28px); }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose a { color: var(--braise-h); text-decoration: underline; text-decoration-color: rgba(224, 180, 90, .85); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: var(--braise); }
.prose strong, .prose b { color: var(--brun); font-weight: 700; }
.prose ul, .prose ol { display: grid; gap: .55em; }
.prose ul li { position: relative; padding-left: 28px; }
.prose ul li::before { content: ''; position: absolute; left: 3px; top: .66em; width: 12px; height: 10.4px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--or); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-left: 40px; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: .24em; width: 27px; height: 23.4px; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--braise); color: #fff; font: 800 12px/1 var(--sans); }
/* une citation des livres : une page crème, le guillemet d'or */
.prose .cite-livre { position: relative; margin: 2.2em 0 1.9em; padding: 40px 34px 26px; border-radius: 20px; background: linear-gradient(165deg, #fffaf0, #f7e7c2); box-shadow: 0 0 0 1px rgba(224, 180, 90, .5), var(--ombre); }
.prose .cite-livre::before { content: '«'; position: absolute; top: -34px; left: 26px; font: 900 76px/1 var(--serif); color: var(--or); }
.prose .cite-livre blockquote { margin: 0; font: italic 700 clamp(19px, .5vw + 16px, 22px)/1.55 var(--serif); color: var(--brun); }
.prose .cite-livre cite { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 700 12.5px/1.4 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--or-txt); }
.prose .cite-livre cite::before { content: ''; width: 28px; height: 1.5px; background: var(--or); }
/* établi, rapporté, hypothèse : la même carte, dans un cadre de lame */
.prose .statut { position: relative; display: grid; margin: 2em 0; padding: 26px 30px; border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre); }
.prose .statut::after { content: ''; position: absolute; inset: 8px; border: 16px solid transparent; border-image: url(../../images/decor/cadre.svg) 32 / 16px stretch; pointer-events: none; opacity: .7; }
.prose .statut > div { padding: 16px 0; border-top: 1px solid var(--filet); }
.prose .statut > div:first-child { border-top: 0; padding-top: 4px; }
.prose .statut > div:last-child { padding-bottom: 4px; }
.prose .statut b { display: inline-block; padding: 6px 12px; border-radius: 999px; font: 700 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.prose .statut .etabli b { background: var(--brun); }
.prose .statut .rapporte b { background: var(--or); color: var(--brun); }
.prose .statut .hypothese b { background: var(--braise); }
.prose .statut p { margin-top: 8px; font-size: 15.5px; line-height: 1.62; }
.prose .note-soin { display: flex; gap: 14px; padding: 16px 20px; border-radius: 16px; border: 1.5px dashed var(--filet-2); background: rgba(255, 253, 249, .6); font-size: 15px; line-height: 1.6; color: var(--doux); }
.prose .note-soin::before { content: 'i'; flex: none; width: 24px; height: 24px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--miel-2); color: var(--or-txt); font: italic 900 14px/1 var(--serif); }
.prose .encadre { padding: 24px 28px; border-radius: 20px; background: var(--creme-2); box-shadow: inset 0 0 0 1.5px rgba(224, 180, 90, .45); }
.prose .encadre > * + * { margin-top: .8em; }

/* le bas de l'article : questions, la lame et le livre, les sources, l'auteur */
.art-bas { max-width: 860px; margin-top: clamp(64px, 7vw, 96px); }
.art-bas .faq { margin-top: 18px; }
.art-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 56px); }
.art-lien { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.art-lien:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.art-lien img { width: 92px; height: auto; filter: drop-shadow(0 10px 12px rgba(58, 38, 17, .3)); }
.art-lien .art-lien__livre { border-radius: 4px; background: #000; filter: none; box-shadow: 0 12px 22px -10px rgba(58, 38, 17, .55); }
.art-lien small { display: block; font: 700 11.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--or-txt); }
.art-lien b { display: block; margin-top: 4px; font: 900 20px/1.2 var(--serif); color: var(--brun); }
.art-lien span > span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--doux); }
.art-lien i { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 700 14px/1 var(--sans); font-style: normal; color: var(--braise); }
.art-lien i svg { width: 15px; height: 15px; transition: transform .2s; }
.art-lien:hover i svg { transform: translateX(3px); }
.art-bas__titre { margin-top: clamp(40px, 5vw, 56px); font: 700 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.sources { display: grid; gap: 6px; margin-top: 12px; font-size: 14.5px; color: var(--doux); }
.sources li { position: relative; padding-left: 20px; }
.sources li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 9px; height: 7.8px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--or); }
.auteur-boite { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: clamp(36px, 4vw, 48px); padding: 22px 24px; border-radius: 20px; background: var(--miel); box-shadow: inset 0 0 0 1.5px rgba(224, 180, 90, .45); }
.auteur-boite img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--or); }
.auteur-boite b { font: 900 19px/1.2 var(--serif); color: var(--brun); }
.auteur-boite p { margin-top: 4px; font-size: 15px; color: var(--doux); }
.auteur-boite a { color: var(--braise-h); font-weight: 600; }
.rucher-suite .cartes-r { margin-top: 36px; }
/* quand l'appel de nuit suit directement le bas de la page (fiches des Fermiers), on lui laisse de l'air */
.art-bas + .final { margin-top: clamp(64px, 7vw, 104px); }
@media (prefers-reduced-motion: reduce) { .rucher-haut__fond > img:first-child, .rucher-haut__cadran, .rucher-haut__in > * { animation: none; } }
@media (max-width: 1099px) {
  .art-grille { grid-template-columns: minmax(0, 720px); }
  .sommaire { position: static; max-height: none; padding: 14px 18px; border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); }
  .sommaire summary { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0; border-bottom: 0; }
  .sommaire summary::after { content: '+'; font: 500 20px/1 var(--sans); color: var(--or-txt); transition: transform .2s; }
  .sommaire details[open] summary::after { transform: rotate(45deg); }
}
@media (max-width: 960px) {
  .cartes-r { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-r--une { grid-template-columns: minmax(0, 1fr); }
  .carte-r--une .carte-r__img { aspect-ratio: 16 / 9; min-height: 0; }
  .rucher-haut__cadran { right: -30%; opacity: .22; }
}
@media (max-width: 640px) {
  .cartes-r, .art-liens { grid-template-columns: minmax(0, 1fr); }
  .filtres--rucher { justify-content: flex-start; }
  .prose { font-size: 17px; }
  .prose .statut { padding: 22px 20px; }
  .prose .cite-livre { padding: 36px 22px 22px; }
  .art-image::after { inset: 8px calc(var(--gouttiere) + 8px); border-width: 12px; border-image-width: 12px; }
  .art-lien { grid-template-columns: 72px minmax(0, 1fr); }
  .art-lien img { width: 72px; }
  .rucher-haut::after { bottom: -54px; height: 54px; }
  .rucher-liste { padding-top: calc(54px + 32px); }
}

/* =========================================================
   LES FERMIERS : une page par Fermier (portrait en arche sur sa scène), et leur galerie
   ========================================================= */
.fermier-haut { position: relative; z-index: 3; isolation: isolate; padding: calc(var(--entete) + clamp(32px, 5vh, 64px)) 0 clamp(70px, 9vh, 110px); background: var(--nuit-1); color: #f6e7c8; }
.fermier-haut__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fermier-haut__fond img { width: 100%; height: 100%; max-width: none; object-fit: cover; animation: ferme-zoom 30s ease-in-out infinite alternate; }
.fermier-haut__fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 5, .5) 0%, rgba(20, 12, 5, .84) 42%, rgba(20, 12, 5, .94) 100%), linear-gradient(0deg, rgba(20, 12, 5, .9), rgba(20, 12, 5, 0) 40%); }
.fermier-haut::after { content: ''; position: absolute; left: 0; right: 0; bottom: -70px; height: 70px; pointer-events: none; background: url(../../images/decor/coulure.svg) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 5px 5px rgba(120, 70, 15, .22)); }
.fermier-haut__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fermier-haut__portrait { position: relative; justify-self: center; width: min(100%, 360px); margin: 0; animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.fermier-haut__portrait > img:first-child { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 50% 50% 22px 22px / 34% 34% 22px 22px; box-shadow: 0 0 0 5px rgba(240, 196, 94, .8), 0 0 0 12px rgba(240, 196, 94, .16), 0 40px 70px -20px rgba(0, 0, 0, .7); }
.fermier-haut__lame { position: absolute; right: -16%; bottom: -7%; width: 36%; transform: rotate(8deg); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .6)); }
.fermier-haut__texte > * { animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.fermier-haut__texte > :nth-child(2) { animation-delay: .08s; }
.fermier-haut__texte > :nth-child(3) { animation-delay: .16s; }
.fermier-haut__texte > :nth-child(4) { animation-delay: .26s; }
.fermier-haut__texte > :nth-child(5) { animation-delay: .36s; }
.fermier-haut__texte > :nth-child(6) { animation-delay: .46s; }
.fermier-haut .ariane, .fermier-haut .ariane a { color: rgba(255, 238, 210, .72); }
.fermier-haut .ariane a:hover { color: #fff3dc; }
.fermier-haut .sur { margin-top: 20px; color: var(--or-vif); }
.fermier-haut h1 { margin-top: 10px; font-size: clamp(42px, 3.2vw + 20px, 74px); color: #fff3dc; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.fermier-haut h1 small { display: block; margin-bottom: 8px; font: 700 clamp(15px, .4vw + 13px, 18px)/1.3 var(--sans); color: rgba(255, 238, 210, .75); text-shadow: none; }
.fermier-haut__tranche { margin-top: 14px; font: 700 13px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-vif); }
.fermier-haut .lead { margin-top: 16px; max-width: 560px; color: rgba(255, 238, 210, .88); }
.fermier-haut__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.fermier-haut .lien-fleche { color: #fff3dc; border-bottom-color: rgba(240, 196, 94, .7); }
.fermier-corps { margin-top: calc(70px + clamp(32px, 4vw, 56px)); }
/* la ronde : le Fermier d'avant, tous, le Fermier d'après */
.ronde { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 56px); }
.ronde a { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 20px; border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre); text-decoration: none; color: var(--brun); transition: transform .2s, box-shadow .2s; }
.ronde a:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.ronde small { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--or-txt); }
.ronde small svg { width: 14px; height: 14px; }
.ronde__prec small svg { transform: rotate(180deg); }
.ronde b { font: 900 19px/1.25 var(--serif); }
.ronde__suiv { align-items: flex-end; text-align: right; }
.ronde .ronde__tous { flex-direction: row; align-items: center; gap: 8px; background: var(--miel); font: 700 14px/1.2 var(--sans); }
.ronde__tous svg { width: 18px; height: 18px; color: var(--braise); }
.fiche-lame__fermier { margin-top: 18px; }
.art-lien .art-lien__vignette { width: 92px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; filter: none; }
/* la galerie : les Fermiers sous leurs arches */
.fermiers-note { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; color: var(--doux); }
.fermiers-note a { color: var(--braise-h); font-weight: 600; }
.arches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 28px); }
.arche { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .3s; }
.arche:hover { transform: translateY(-5px); }
.arche__img { display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 50% 50% 18px 18px / 34% 34% 18px 18px; background: var(--nuit-1); box-shadow: 0 0 0 4px var(--blanc), 0 0 0 5.5px var(--or), var(--ombre-forte); }
.arche__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.arche:hover .arche__img img { transform: scale(1.05); }
.arche__txt { display: block; padding: 16px 6px 0; text-align: center; }
.arche small { display: block; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; color: var(--or-txt); }
.arche b { display: block; margin-top: 4px; font: 900 21px/1.2 var(--serif); color: var(--brun); }
.arche__txt > span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--doux); }
@media (prefers-reduced-motion: reduce) { .fermier-haut__fond img, .fermier-haut__portrait, .fermier-haut__texte > * { animation: none; } }
@media (max-width: 960px) {
  .fermier-haut__grille { grid-template-columns: minmax(0, 1fr); }
  .fermier-haut__portrait { width: min(62%, 280px); }
  .arches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fermier-haut::after { bottom: -54px; height: 54px; }
  .fermier-corps { margin-top: calc(54px + 32px); }
  .arches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arche b { font-size: 18px; }
  .arche__txt > span { display: none; }
  .ronde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ronde .ronde__tous { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}

/* =========================================================
   L'UNIVERS ET LE MIEL : la descente en huit scènes, le ruban des Fermiers, la ruche à étages, les trois Miels
   ========================================================= */
.descente-haut .rucher-haut__fond > img:first-child { scale: -1 1; object-position: 100% 40%; }
.miel-haut .rucher-haut__fond > img:first-child { object-position: 50% 55%; }
.univers-haut__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.rucher-haut .lien-fleche { color: #fff3dc; border-bottom-color: rgba(240, 196, 94, .7); }
.lien-fleche--bouton { background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0 0 2px; cursor: pointer; font: inherit; font-weight: 700; }
.univers-intro { padding-top: calc(70px + clamp(40px, 5vw, 72px)); }
.univers-intro__texte { margin-top: 22px; text-align: center; }
.univers-intro__texte > * + * { margin-top: 16px; }
/* une citation des livres, hors d'un article */
.citation-livre { position: relative; margin: 30px auto 0; max-width: 680px; padding: 38px 32px 24px; border-radius: 20px; text-align: left; background: linear-gradient(165deg, #fffaf0, #f7e7c2); box-shadow: 0 0 0 1px rgba(224, 180, 90, .5), var(--ombre); }
.citation-livre::before { content: '«'; position: absolute; top: -32px; left: 26px; font: 900 76px/1 var(--serif); color: var(--or); }
.citation-livre blockquote { margin: 0; font: italic 700 clamp(19px, .5vw + 16px, 22px)/1.5 var(--serif); color: var(--brun); }
.citation-livre cite { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 700 12.5px/1.4 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--or-txt); }
.citation-livre cite::before { content: ''; width: 28px; height: 1.5px; background: var(--or); }
/* la descente : le récit plein écran de l'accueil, avec un titre par scène */
.descente .recit__carte > div { position: relative; }
.descente .recit__carte > div::after { content: ''; position: absolute; inset: 8px; border: 18px solid transparent; border-image: url(../../images/decor/cadre.svg) 32 / 18px stretch; pointer-events: none; opacity: .85; }
.recit__titre { margin-bottom: 12px; font: 900 clamp(24px, 1.2vw + 17px, 34px)/1.18 var(--serif); color: var(--brun); }
.descente .recit__carte p:not(.sur) { font: 500 clamp(17px, .4vw + 15px, 19.5px)/1.6 var(--sans); color: var(--texte); }
.descente .recit__carte p em { font-style: italic; color: var(--braise-h); }
.recit__actions { margin-top: 18px; }
.suite--double { flex-wrap: wrap; gap: 14px 22px; align-items: center; }
/* la ruche à étages */
.etages__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.etages .citation-livre, #qui-recolte .citation-livre { margin-left: 0; }
.ruche { display: flex; flex-direction: column; align-items: center; max-width: 440px; width: 100%; justify-self: center; }
.ruche__toit { width: 92%; height: 34px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #8d5d2c, #6b4420); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .3); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.ruche__hausse { position: relative; display: flex; flex-direction: column; justify-content: center; width: 86%; min-height: 96px; margin-top: 6px; padding: 14px 22px 14px 74px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(120, 80, 30, .1) 0 2px, transparent 2px 22px), linear-gradient(180deg, #f6dfa6, #e9c271); box-shadow: inset 0 -4px 0 rgba(120, 80, 30, .22), 0 10px 18px -12px rgba(58, 38, 17, .5); font-size: 14.5px; line-height: 1.4; color: var(--texte); }
.ruche__hausse b { display: block; font: 900 18px/1.2 var(--serif); color: var(--brun); }
.ruche__hausse::before { content: ''; position: absolute; left: 22px; top: 50%; width: 34px; height: 29.5px; margin-top: -15px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: rgba(255, 253, 249, .75); }
.ruche__hausse--3 { opacity: .78; }
.ruche__hausse--1 { background: repeating-linear-gradient(90deg, rgba(120, 80, 30, .12) 0 2px, transparent 2px 22px), linear-gradient(180deg, #f2c460, #d99a35); }
.ruche__hausse--1::before { background: var(--braise); }
.ruche__planche { width: 100%; height: 16px; margin-top: 6px; border-radius: 4px; background: linear-gradient(180deg, #b07c40, #7a4f22); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .35), 0 14px 22px -10px rgba(58, 38, 17, .55); }
/* la carte de la récolte : ce qui est récolté, ce qui transforme */
.carte-recolte__grille { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; margin-top: clamp(36px, 4vw, 56px); }
.carte-recolte__face { padding: 26px 24px; border-radius: 22px; background: var(--blanc); box-shadow: var(--ombre); text-align: center; }
.carte-recolte__mot { margin-top: 10px; font: italic 700 clamp(20px, .6vw + 17px, 26px)/1.35 var(--serif); color: var(--brun); }
.carte-recolte__lames { display: flex; justify-content: center; }
.carte-recolte__lames img { width: clamp(80px, 8vw, 120px); margin: 0 -14px; filter: drop-shadow(0 16px 20px rgba(58, 38, 17, .35)); }
.carte-recolte__lames img:nth-child(1) { transform: rotate(-12deg) translateY(10px); }
.carte-recolte__lames img:nth-child(3) { transform: rotate(12deg) translateY(10px); }
.carte-recolte .pivot__apres { max-width: 760px; margin-left: auto; margin-right: auto; }
.livre__bientot { color: var(--doux) !important; }
/* les trois Miels, du plus sombre au plus clair */
.miel-bloc { position: relative; padding: clamp(72px, 7vw, 120px) 0; }
.miel-bloc__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.miel-bloc__grille--inverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.miel-bloc__grille--inverse > figure { order: 2; }
.miel-bloc__pot { position: relative; margin: 0; display: grid; place-items: center; }
.miel-bloc__pot::before { content: ''; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 196, 94, .55), rgba(240, 196, 94, 0)); }
.miel-bloc__pot img { position: relative; width: min(100%, 320px); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .35)); }
.miel-bloc .h2 { margin-top: 10px; font-size: clamp(38px, 2.4vw + 24px, 64px); }
.miel-bloc__texture { margin-top: 6px; font: italic 700 clamp(18px, .5vw + 15px, 22px)/1.4 var(--serif); color: var(--or-txt); }
.miel-bloc__emotions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.miel-bloc__emotions li { padding: 6px 13px; border-radius: 999px; background: rgba(58, 38, 17, .07); font: 600 14px/1.2 var(--sans); }
.miel-bloc p:not(.sur):not(.miel-bloc__texture):not(.miel-bloc__statut) { margin-top: 14px; }
.miel-bloc .citation-livre { margin: 30px 0 0; }
.miel-bloc__statut { display: inline-flex; margin-top: 22px; padding: 7px 14px; border-radius: 999px; background: var(--brun); color: #fff; font: 700 12.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.miel-bloc__statut--jamais { background: var(--braise); }
.miel-bloc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.miel-bloc--ba { background: radial-gradient(60% 70% at 25% 50%, rgba(150, 80, 20, .35), rgba(150, 80, 20, 0) 70%), #1d1209; color: rgba(255, 238, 210, .85); }
.miel-bloc--ba .h2 { color: #fff3dc; }
.miel-bloc--ba .sur { color: var(--or-vif); }
.miel-bloc--ba .miel-bloc__texture { color: #e9b866; }
.miel-bloc--ba .miel-bloc__emotions li { background: rgba(255, 238, 210, .1); color: #fbe3a6; }
.miel-bloc--ba .citation-livre { background: rgba(255, 243, 220, .06); box-shadow: 0 0 0 1px rgba(240, 196, 94, .35); }
.miel-bloc--ba .citation-livre blockquote { color: #fff3dc; }
.miel-bloc--ba .citation-livre cite { color: var(--or-vif); }
.miel-bloc--ba .miel-bloc__statut { background: var(--or); color: var(--brun); }
.miel-bloc--hab { background: radial-gradient(60% 70% at 75% 50%, rgba(255, 220, 140, .6), rgba(255, 220, 140, 0) 70%), var(--miel-2); }
.miel-bloc--trois { background: radial-gradient(55% 70% at 25% 50%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), var(--blanc); }
.miel-bloc--trois .miel-bloc__pot::before { background: radial-gradient(closest-side, rgba(255, 246, 210, .95), rgba(255, 236, 170, 0)); }
/* l'asymétrie : deux jauges */
.asymetrie__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: clamp(36px, 4vw, 56px) auto 0; }
.asymetrie__col { position: relative; padding: 28px 26px 70px; border-radius: 22px; background: var(--blanc); box-shadow: var(--ombre); overflow: hidden; }
.asymetrie__col h3 { margin-top: 8px; font: 900 28px/1.2 var(--serif); color: var(--brun); }
.asymetrie__col p:not(.sur) { margin-top: 10px; color: var(--doux); }
.asymetrie__jauge { position: absolute; left: 26px; right: 26px; bottom: 28px; height: 14px; border-radius: 999px; background: var(--creme-2); box-shadow: inset 0 0 0 1px var(--filet); }
.asymetrie__jauge::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--niveau) * 100%); border-radius: inherit; }
.asymetrie__col--ba .asymetrie__jauge::after { background: linear-gradient(90deg, #4a2a10, #8a4f1c); }
.asymetrie__col--hab .asymetrie__jauge::after { background: linear-gradient(90deg, #f3c96c, #e3a53d); }
/* qui récolte : les étages de la hiérarchie */
.hierarchie { display: grid; gap: 8px; }
.hierarchie li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 20px; border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); }
.hierarchie b { font: 900 19px/1.25 var(--serif); color: var(--brun); }
.hierarchie p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--doux); }
.hierarchie__num { display: grid; place-items: center; width: 52px; height: 45px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(160deg, #fbe09a, #d3922f); font: 900 17px/1 var(--serif); color: var(--brun); }
.hierarchie__num svg { width: 22px; height: 22px; }
.hierarchie__au-dela { display: block !important; padding: 14px 20px !important; background: none !important; box-shadow: none !important; border: 1.5px dashed var(--filet-2); text-align: center; font: italic 700 15px/1.4 var(--serif); color: var(--doux); }
.hierarchie__nous { background: linear-gradient(160deg, #fff8e6, #f7e3b6) !important; box-shadow: 0 0 0 1.5px var(--or), var(--ombre) !important; }
.hierarchie__nous .hierarchie__num { background: var(--braise); color: #fff; }
/* une minute de Troisième Miel : une alvéole qui se remplit de miel clair, un anneau d'or pour la minute */
.souffle { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; overflow: hidden; text-align: center; background: radial-gradient(ellipse 60% 55% at 50% 42%, #2d1c0c 0%, #140c05 60%, #0b0703 100%); color: #f6e7c8; --souffle: 0; }
.souffle.est-ouvert { display: flex; animation: apparait-doux .5s ease-out both; --o: 1; }
html.souffle-actif { overflow: hidden; }
.souffle .sur { color: var(--or-vif); }
.souffle__x { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(240, 196, 94, .5); background: rgba(255, 243, 220, .04); color: #fbe3a6; cursor: pointer; transition: background .2s, border-color .2s; }
.souffle__x:hover { background: rgba(255, 243, 220, .1); border-color: var(--or-vif); }
.souffle__x svg { width: 18px; height: 18px; }
.souffle__consigne { max-width: 400px; font: 400 15.5px/1.6 var(--sans); color: rgba(255, 238, 210, .72); }
.souffle__bas { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.souffle__titre { font: 900 clamp(26px, 2.2vw + 16px, 40px)/1.15 var(--serif); color: #fff3dc; transition: filter 1.4s ease; }
.souffle__orbe { width: clamp(240px, 40vh, 360px); margin: 4px 0; }
.souffle__temps { font: 700 22px/1 var(--serif); letter-spacing: .14em; color: #f6e3b4; opacity: .85; font-variant-numeric: tabular-nums lining-nums; }
.souffle__note { max-width: 360px; margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 238, 210, .45); }
/* pendant la minute, tout le reste s'efface (un filtre : les textes gardent leur propre opacité) */
.souffle__estompe { transition: filter 1.4s ease; }
.souffle.est-en-cours .souffle__estompe { filter: opacity(.14) blur(1px); }
.souffle.est-en-cours .souffle__titre { filter: opacity(.35); }
.souffle.est-en-cours .souffle__go { background: none; color: #f6e3b4; box-shadow: 0 0 0 1px rgba(224, 180, 90, .4); }
.souffle::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(243, 210, 140, .22), rgba(243, 210, 140, .06) 35%, transparent 62%); opacity: calc(.35 + (var(--s, .7) - .7) * 2.2); }
@media (prefers-reduced-motion: reduce) { .souffle__cadran, .souffle__orbite { animation: none; } .souffle__orbite { display: none; } }
@media (max-width: 640px) { .souffle__orbite:nth-of-type(2) .souffle__abeille { --r: 132px; } .souffle__abeille { --r: 120px; } .souffle__orbite:nth-of-type(3) .souffle__abeille { --r: 110px; } }
@media (max-width: 960px) {
  .etages__grille, .miel-bloc__grille, .miel-bloc__grille--inverse { grid-template-columns: minmax(0, 1fr); }
  .miel-bloc__grille--inverse > figure { order: 0; }
  .miel-bloc__pot img { width: min(70%, 260px); }
  .carte-recolte__grille { grid-template-columns: minmax(0, 1fr); }
  .carte-recolte__lames { order: -1; }
}
@media (max-width: 640px) {
  .univers-intro { padding-top: calc(54px + 40px); }
  .asymetrie__grille { grid-template-columns: minmax(0, 1fr); }
  .ruche__hausse { width: 94%; padding-left: 64px; }
  .citation-livre { padding: 34px 22px 20px; }
}

/* =========================================================
   L'UNIVERS (l-univers/) : le titre de la trilogie sur la vallée, puis six parties numérotées
   I la Ferme (les 21 Fermiers en arches) · II la récolte (de nuit, trois scènes, un panorama) · III les trois Miels
   IV les étages · V la carte de la récolte · VI les livres
   ========================================================= */
.univers-titre { position: relative; z-index: 3; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: min(92svh, 900px); padding: calc(var(--entete) + clamp(28px, 6vh, 80px)) 0 clamp(90px, 12vh, 140px); background: var(--nuit-1); color: #fff3dc; }
.univers-titre__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.univers-titre__fond img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 40%; animation: ferme-zoom 30s ease-in-out infinite alternate; }
.univers-titre__fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 5, .55) 0%, rgba(20, 12, 5, 0) 26%, rgba(20, 12, 5, 0) 55%, rgba(20, 12, 5, .85) 100%), linear-gradient(90deg, rgba(20, 12, 5, .55), rgba(20, 12, 5, 0) 50%); }
.univers-titre::after { content: ''; position: absolute; left: 0; right: 0; bottom: -70px; height: 70px; pointer-events: none; background: url(../../images/decor/coulure.svg) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 5px 5px rgba(120, 70, 15, .22)); }
.univers-titre > .wrap { width: 100%; }
.univers-titre h1 { margin: 0; }
.univers-titre__logo { width: min(560px, 82vw); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); animation: monte 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.univers-titre__sous { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding-left: 6%; font: 700 13px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #f0d9a8; animation: monte 1.2s .2s cubic-bezier(.2, .7, .2, 1) both; }
.univers-titre__sous::before { content: ''; width: 36px; height: 1.5px; background: var(--or-vif); }
.univers-titre__citation { max-width: 520px; font: italic 700 clamp(24px, 1.6vw + 16px, 38px)/1.25 var(--serif); color: #fff3dc; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); animation: monte 1.2s .4s cubic-bezier(.2, .7, .2, 1) both; }
.univers-titre__citation cite, .univers-ouverture__citation cite, .univers-citation cite, .scene-r__txt blockquote cite, .panorama cite { display: block; margin-top: 10px; font: 700 11.5px/1.4 var(--sans); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--or-vif); text-shadow: none; }
.univers-ouverture { padding-top: calc(70px + clamp(40px, 5vw, 72px)); }
.univers-ouverture__abeille { width: 74px; margin: 0 auto; }
.univers-ouverture__sous { margin-top: 18px; font: italic 700 clamp(22px, 1vw + 17px, 30px)/1.3 var(--serif); color: var(--braise); }
.univers-ouverture__citation { margin-top: 22px; font: italic 700 clamp(19px, .5vw + 16px, 23px)/1.4 var(--serif); color: var(--brun); }
.univers-ouverture__citation cite { color: var(--or-txt); }
.univers-ouverture__texte { margin-top: 26px; }
.univers-ouverture__texte p + p { margin-top: 14px; }
/* l'en-tête de chaque partie : un grand chiffre romain d'or */
.univers-tete { max-width: 760px; margin: 0 auto; text-align: center; }
.univers-tete--gauche { margin: 0; text-align: left; }
.univers-tete__num { display: block; font: 900 clamp(40px, 2vw + 28px, 60px)/1 var(--serif); color: var(--or); opacity: .85; }
.univers-tete .h2 { margin-top: 6px; }
.univers-tete__intro { margin-top: 14px; font: italic 700 clamp(18px, .5vw + 15px, 22px)/1.45 var(--serif); color: var(--doux); }
.univers-prose { max-width: 720px; margin: 26px auto 0; }
.univers-prose p + p { margin-top: 14px; }
.univers-prose--centre { text-align: center; margin-top: clamp(40px, 5vw, 64px); }
.univers-legende { font: 900 clamp(22px, 1vw + 17px, 30px)/1.25 var(--serif); color: var(--brun); }
.univers-prose--centre p { margin-top: 12px; color: var(--doux); }
.univers-citation { max-width: 760px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; font: italic 700 clamp(22px, 1.2vw + 16px, 32px)/1.3 var(--serif); color: var(--braise); }
.univers-citation cite { color: var(--doux); }
.univers-citation--nuit { color: #f3c96c; }
.univers-citation--nuit cite { color: rgba(255, 238, 210, .6); }
/* I · les 21 Fermiers en arches, en décalé */
.visages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: clamp(40px, 5vw, 56px) auto 0; }
.visage { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px; text-decoration: none; background: var(--nuit-1); box-shadow: 0 0 0 1.5px rgba(224, 180, 90, .8), 0 0 0 6px rgba(224, 180, 90, .12), 0 18px 36px -10px rgba(40, 25, 5, .45); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.visage:nth-child(7n+2), .visage:nth-child(7n+4), .visage:nth-child(7n+6) { margin-top: 28px; margin-bottom: -28px; }
.visage > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.visage:hover { transform: translateY(-10px); box-shadow: 0 0 0 1.5px var(--or-vif), 0 0 0 6px rgba(224, 180, 90, .2), 0 28px 50px -12px rgba(40, 25, 5, .5), 0 0 40px rgba(224, 160, 70, .3); }
.visage:hover > img { transform: scale(1.07); }
.visage__lame { position: absolute; right: 8px; bottom: 64px; width: 30%; transform: rotate(-4deg); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.visage:hover .visage__lame { transform: rotate(-8deg) translateY(-6px) scale(1.12); }
.visage__lame img { width: 100%; }
.visage__nom { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 6px 12px; text-align: center; background: linear-gradient(transparent, rgba(13, 9, 6, .9)); font: 900 15px/1.15 var(--serif); color: #fff3dc; }
.visage__nom small { display: block; margin-bottom: 3px; font: 700 9.5px/1.2 var(--sans); letter-spacing: .22em; color: var(--or-vif); }
.visages + .univers-prose--centre { margin-top: calc(28px + clamp(40px, 5vw, 64px)); }
/* II · la récolte, de nuit : trois scènes en grand, puis un panorama */
.section.nuit { position: relative; background: radial-gradient(60% 40% at 50% 0%, rgba(150, 90, 30, .25), rgba(150, 90, 30, 0) 70%), #120b05; color: rgba(255, 238, 210, .82); }
.nuit .h2 { color: #fff3dc; }
.nuit .univers-tete__intro { color: rgba(255, 238, 210, .7); }
.scene-r { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: center; max-width: 1200px; margin: clamp(56px, 6vw, 88px) auto 0; }
.scene-r--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.scene-r--inverse .scene-r__img { order: 2; }
.scene-r__img { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px; box-shadow: 0 0 0 1px rgba(224, 180, 90, .35), 0 30px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(224, 150, 50, .12); }
.scene-r__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s cubic-bezier(.2, .6, .2, 1); }
.scene-r.est-vu .scene-r__img img { transform: scale(1); }
.scene-r__img::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 80px rgba(0, 0, 0, .45); pointer-events: none; }
.scene-r__tag { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--or-vif); }
.scene-r__tag::before { content: ''; width: 26px; height: 1.5px; background: currentColor; }
.scene-r__txt h3 { margin: 10px 0 14px; font: 900 clamp(28px, 1.8vw + 18px, 42px)/1.08 var(--serif); color: #fff3dc; }
.scene-r__txt p { font-size: 16px; line-height: 1.75; color: rgba(255, 238, 210, .78); }
.scene-r__txt p + p { margin-top: 10px; }
.scene-r__txt blockquote { margin: 18px 0 0; padding-left: 18px; border-left: 2px solid var(--or); font: italic 700 clamp(19px, .8vw + 15px, 24px)/1.35 var(--serif); color: #f3c96c; }
.scene-r__lame { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 8px 18px 8px 8px; border-radius: 40px; text-decoration: none; border: 1px solid rgba(224, 180, 90, .4); background: rgba(224, 180, 90, .06); transition: background .25s, border-color .25s; }
.scene-r__lame:hover { background: rgba(224, 180, 90, .14); border-color: var(--or); }
.scene-r__lame img { width: 34px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.scene-r__lame span { font: 700 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 238, 210, .6); }
.scene-r__lame b { display: block; font: 900 17px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: #fff3dc; }
.panorama { position: relative; height: clamp(420px, 70vh, 760px); margin: clamp(80px, 8vw, 120px) 0 0; overflow: hidden; }
.panorama img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.1); transition: transform 8s cubic-bezier(.2, .6, .2, 1); }
.panorama.est-vu img { transform: scale(1); }
.panorama::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #120b05 0%, rgba(18, 11, 5, 0) 22%, rgba(18, 11, 5, 0) 55%, rgba(18, 11, 5, .85) 88%, #120b05 100%); }
.panorama figcaption { position: absolute; left: 0; right: 0; bottom: clamp(40px, 8vh, 80px); z-index: 2; padding: 0 20px; text-align: center; font: italic 700 clamp(26px, 2.6vw + 14px, 52px)/1.12 var(--serif); color: #fff3dc; text-shadow: 0 2px 30px rgba(0, 0, 0, .7); }
.panorama.est-vu, .panorama[data-apparait] { transform: none; }
/* III · les trois Miels, dans leurs pots */
.miels-nuit { padding-top: clamp(64px, 7vw, 110px); }
.pots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: clamp(40px, 5vw, 56px); }
.pot { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 24px 28px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, rgba(255, 238, 210, .06), rgba(255, 238, 210, .02)); box-shadow: inset 0 0 0 1px rgba(224, 180, 90, .25); }
.pot img { height: 220px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(240, 180, 80, .18)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pot:hover img { transform: translateY(-6px) rotate(-2deg); }
.pot__sur { margin-top: 18px; font: 700 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--or-vif); }
.pot h3 { margin-top: 6px; font: 900 32px/1.1 var(--serif); color: #fff3dc; }
.pot__texture { margin-top: 6px; font: italic 700 16px/1.4 var(--serif); color: #e9b866; }
.pot p:not(.pot__sur):not(.pot__texture) { margin-top: 12px; font-size: 15px; line-height: 1.65; color: rgba(255, 238, 210, .75); }
.pot__statut { display: inline-flex; margin-top: auto; padding: 7px 14px; border-radius: 999px; background: rgba(255, 238, 210, .1); box-shadow: inset 0 0 0 1px rgba(224, 180, 90, .35); font: 700 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fbe3a6; }
.pot p:last-of-type { margin-bottom: 18px; }
.pot__statut--jamais { background: var(--or); color: var(--brun); box-shadow: 0 0 24px rgba(240, 196, 94, .45); }
.pot--trois { background: linear-gradient(180deg, rgba(255, 238, 200, .12), rgba(255, 238, 200, .03)); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .55), 0 0 60px rgba(240, 196, 94, .12); }
.bouton--nuit { border-color: rgba(240, 196, 94, .5); color: #fff3dc; background: rgba(255, 243, 220, .04); }
.bouton--nuit:hover { border-color: var(--or-vif); background: rgba(255, 243, 220, .1); }
.nuit .suite { margin-top: clamp(32px, 4vw, 48px); }
/* VI · l'avertissement */
.avertissement { max-width: 760px; margin: clamp(48px, 5vw, 72px) auto 0; padding: 26px 30px; border-radius: 20px; text-align: center; background: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(224, 180, 90, .45); }
.avertissement h3 { font: 900 22px/1.2 var(--serif); color: var(--brun); }
.avertissement p { margin-top: 10px; color: var(--doux); }
@media (prefers-reduced-motion: reduce) { .univers-titre__fond img, .univers-titre__logo, .univers-titre__sous, .univers-titre__citation { animation: none; } .scene-r__img img, .panorama img { transform: none; transition: none; } }
@media (max-width: 1100px) { .visages { grid-template-columns: repeat(4, minmax(0, 1fr)); } .visage:nth-child(n) { margin: 0; } .visage:nth-child(4n+2), .visage:nth-child(4n+4) { margin-top: 24px; margin-bottom: -24px; } }
@media (max-width: 960px) {
  .scene-r, .scene-r--inverse { grid-template-columns: minmax(0, 1fr); }
  .scene-r--inverse .scene-r__img { order: 0; }
  .pots { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .univers-titre { min-height: 88svh; }
  .univers-titre__fond img { object-position: 50% 30%; }
  .univers-titre__sous { margin-top: 12px; padding-left: 0; font-size: 11.5px; letter-spacing: .16em; }
  .univers-titre::after { bottom: -54px; height: 54px; }
  .univers-ouverture { padding-top: calc(54px + 40px); }
  .visages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 32px calc(-1 * var(--gouttiere)) 0; padding: 10px var(--gouttiere) 20px; scrollbar-width: none; }
  .visages::-webkit-scrollbar { display: none; }
  .visage, .visage:nth-child(n) { flex: 0 0 58vw; margin: 0; scroll-snap-align: center; }
  .visages + .univers-prose--centre { margin-top: 32px; }
  .avertissement { padding: 22px 20px; }
}

/* =========================================================
   LE PODCAST (le-podcast/) : la pochette, douze épisodes qui s'ouvrent l'un après l'autre, le petit lecteur
   ========================================================= */
.podcast-haut .rucher-haut__fond > img:first-child { opacity: .5; filter: saturate(.8); }
.podcast-haut .rucher-haut__fond::after { background: radial-gradient(40% 60% at 76% 50%, rgba(240, 180, 80, .22), rgba(240, 180, 80, 0) 70%), linear-gradient(90deg, rgba(20, 12, 5, .92) 0%, rgba(20, 12, 5, .72) 50%, rgba(20, 12, 5, .55) 100%), linear-gradient(0deg, rgba(20, 12, 5, .9), rgba(20, 12, 5, 0) 45%); }
.podcast-haut__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.podcast-haut h1 { font-size: clamp(50px, 4vw + 24px, 88px); }
.podcast-haut__regle { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 600 15px/1.4 var(--sans); color: #fbe3a6; }
.podcast-haut__regle svg { width: 22px; height: 22px; flex: none; color: var(--or-vif); }
.podcast-progres { display: flex; align-items: center; gap: 14px; max-width: 460px; margin-top: 18px; }
.podcast-progres__jauge { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 238, 210, .14); overflow: hidden; }
.podcast-progres__jauge i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f3c96c, #e3a53d); box-shadow: 0 0 12px rgba(240, 196, 94, .6); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.podcast-progres span { font: 600 13.5px/1 var(--sans); color: rgba(255, 238, 210, .7); white-space: nowrap; }
/* la pochette : le tome I posé sur un disque d'or qui tourne pendant l'écoute */
.podcast-pochette { position: relative; justify-self: center; width: min(100%, 400px); aspect-ratio: 1; }
.podcast-pochette__disque { position: absolute; inset: 0; width: 100%; height: auto; max-width: none; opacity: .75; animation: tourne 60s linear infinite; animation-play-state: paused; }
.podcast-joue .podcast-pochette__disque { animation-play-state: running; animation-duration: 14s; opacity: .8; }
.podcast-pochette__livre { position: absolute; left: 26%; top: 12%; width: 48%; height: auto; border-radius: 6px; background: #000; transform: rotate(-4deg); box-shadow: 0 0 0 1px rgba(240, 196, 94, .4), 0 30px 60px -16px rgba(0, 0, 0, .8); }
.podcast-ondes { position: absolute; left: 50%; bottom: 6%; display: flex; align-items: flex-end; gap: 5px; height: 34px; translate: -50% 0; }
.podcast-ondes i { width: 5px; height: 30%; border-radius: 3px; background: var(--or-vif); opacity: .6; }
.podcast-joue .podcast-ondes i { animation: onde 1.1s ease-in-out infinite alternate; opacity: 1; }
.podcast-ondes i:nth-child(2) { animation-delay: -.3s; }
.podcast-ondes i:nth-child(3) { animation-delay: -.6s; }
.podcast-ondes i:nth-child(4) { animation-delay: -.15s; }
.podcast-ondes i:nth-child(5) { animation-delay: -.45s; }
@keyframes onde { from { height: 20%; } to { height: 100%; } }
/* les épisodes */
.podcast-liste { padding-top: calc(70px + clamp(40px, 5vw, 72px)); }
.episodes { display: grid; gap: 20px; max-width: 1000px; margin: 0 auto; }
.episode { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; padding: 18px; border-radius: 22px; background: var(--blanc); box-shadow: var(--ombre); transition: box-shadow .3s, transform .3s; }
.episode::after { content: ''; position: absolute; inset: 6px; border-radius: 17px; border: 1px solid rgba(224, 180, 90, .28); pointer-events: none; }
.episode.est-courant { box-shadow: 0 0 0 2px var(--or), 0 24px 50px -24px rgba(138, 100, 32, .6); }
.episode.est-debloque { animation: episode-ouvre 1.4s ease; }
@keyframes episode-ouvre { from { box-shadow: 0 0 0 0 rgba(224, 180, 90, .7); } to { box-shadow: 0 0 0 22px rgba(224, 180, 90, 0); } }
.episode__image { position: relative; align-self: start; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--nuit-1); }
.episode__image img { width: 100%; height: 100%; object-fit: cover; transition: filter .7s, transform .7s; }
.episode__num { position: absolute; left: 14px; bottom: 6px; font: 900 46px/1 var(--serif); color: #fff3dc; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); font-variant-numeric: lining-nums; }
.episode__verrou { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center; color: #fff3dc; background: rgba(20, 12, 5, .38); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.episode__verrou svg { width: 30px; height: 30px; color: var(--or-vif); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
.episode__verrou small { max-width: 200px; font: 600 13px/1.4 var(--sans); }
.episode.est-verrouille .episode__image img { filter: blur(4px) grayscale(.4) brightness(.85); transform: scale(1.06); }
.episode.est-verrouille .episode__verrou { display: flex; }
.episode.est-verrouille .episode__num { display: none; }
.episode.est-verrouille .episode__accroche { filter: blur(3px); user-select: none; }
.episode.est-verrouille .episode__lecteur, .episode.est-verrouille .episode__details { opacity: .4; pointer-events: none; }
.episode__corps { display: flex; flex-direction: column; min-width: 0; }
.episode__haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.episode__etat { font: 600 12.5px/1.2 var(--sans); color: var(--doux); }
.episode__etat.est-fini { color: #5c7a2e; }
.episode__etat.est-fini::before { content: '✓ '; }
.episode__titre { margin-top: 6px; font: 900 clamp(24px, 1vw + 18px, 32px)/1.12 var(--serif); color: var(--brun); }
.episode__accroche { margin-top: 8px; font: italic 700 17px/1.5 var(--serif); color: var(--doux); }
.episode__lecteur { display: flex; align-items: center; gap: 14px; margin: auto 0 10px; padding-top: 16px; }
.episode__play { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--brun); background: linear-gradient(180deg, #fbe29d 0%, #f2c35e 50%, #dc9c36 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 24px -8px rgba(220, 150, 50, .7); transition: transform .15s; }
.episode__play:hover { transform: scale(1.06); }
.episode__play svg { width: 22px; height: 22px; fill: currentColor; }
.episode__play .i-pause, .episode.est-en-lecture .episode__play .i-lire { display: none; }
.episode.est-en-lecture .episode__play .i-pause { display: block; }
.episode__barre { flex: 1; min-width: 0; }
.episode__barre input { --p: 0%; width: 100%; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.episode__barre input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--or) 0 var(--p), var(--filet) var(--p) 100%); }
.episode__barre input::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--or) 0 var(--p), var(--filet) var(--p) 100%); }
.episode__barre input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--braise); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(58, 38, 17, .4); }
.episode__barre input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--braise); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(58, 38, 17, .4); }
.episode__temps { display: flex; justify-content: space-between; font: 600 12.5px/1 var(--sans); color: var(--doux); font-variant-numeric: tabular-nums lining-nums; }
.episode__details summary { cursor: pointer; font: 700 13.5px/1.4 var(--sans); color: var(--or-txt); }
.episode__details p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--doux); }
.episode__sources { font-size: 13px !important; }
.podcast-suite { max-width: 760px; margin: clamp(56px, 6vw, 88px) auto 0; padding: clamp(26px, 3vw, 40px); border-radius: 26px; text-align: center; background: linear-gradient(165deg, #fffaf0, #f7e3b6); box-shadow: 0 0 0 1.5px rgba(224, 180, 90, .6), var(--ombre); }
.podcast-suite .h2 { margin-top: 8px; }
.podcast-suite .lead { margin-top: 12px; }
/* le petit lecteur, en bas de l'écran pendant l'écoute */
.podcast-mini { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 24px)); padding: 8px 10px 8px 8px; border-radius: 999px; overflow: hidden; background: rgba(20, 12, 5, .92); box-shadow: 0 0 0 1px rgba(240, 196, 94, .35), 0 20px 40px -12px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff3dc; translate: -50% 140%; transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.podcast-mini.est-visible { translate: -50% 0; }
.podcast-mini__play { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--brun); background: linear-gradient(180deg, #fbe29d, #dc9c36); }
.podcast-mini__play svg { width: 18px; height: 18px; fill: currentColor; }
.podcast-mini__play .i-pause, .podcast-joue .podcast-mini__play .i-lire { display: none; }
.podcast-joue .podcast-mini__play .i-pause { display: block; }
.podcast-mini__titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14px/1.2 var(--sans); }
.podcast-mini__vitesse { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(240, 196, 94, .5); background: none; color: #fbe3a6; cursor: pointer; font: 700 12.5px/1 var(--sans); }
.podcast-mini__fil { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--or-vif); transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) { .podcast-pochette__disque, .podcast-ondes i, .episode.est-debloque { animation: none !important; } }
@media (max-width: 960px) { .podcast-haut__grille { grid-template-columns: minmax(0, 1fr); } .podcast-pochette { order: -1; width: min(70%, 300px); } }
@media (max-width: 700px) { .episode { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (max-width: 640px) { .podcast-liste { padding-top: calc(54px + 40px); } .episode__num { font-size: 38px; } }

/* ---------- tablette ---------- */
/* le rail n'a de place que sur les écrans larges ; ailleurs, la barre d'étape en haut */
@media (max-width: 1379px) {
  .rail { display: none; }
  .barre-etape { display: flex; }
}
/* le menu passe en bouton dès que les neuf liens ne tiennent plus sur une ligne */
@media (max-width: 1260px) {
  .menu-bouton { display: block; z-index: 2; }
  .menu {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 90px 28px 40px;
    background: rgba(253, 248, 239, .98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .menu.est-ouvert { opacity: 1; pointer-events: auto; }
  .menu > a:not(.bouton) { padding: 14px 10px; font: 700 24px/1.2 var(--serif); text-align: center; }
  .menu > a[aria-current]:not(.bouton) { box-shadow: none; color: var(--braise); }
  .menu .bouton { margin: 14px auto 0; min-height: 56px; padding: 0 40px; font-size: 18px; }
}
@media (min-width: 1261px) and (max-width: 1439px) {
  .menu > a:not(.bouton) { padding: 10px 9px; font-size: 15px; }
}
@media (max-width: 960px) {
  .fermier-grille, .boucle-grille, .jeu-grille, .faq-grille, .produit-grille, .app-grille { grid-template-columns: minmax(0, 1fr); }
  .galerie { position: static; }
  .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miels__grille, .pas, .couts, .livres { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
  .offres { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; gap: 30px; }
  .carte-offre--vedette { order: -1; }
  .auteur-grille { grid-template-columns: minmax(0, 1fr); }
  .auteur-photo { max-width: 300px; }
  .resultat__grille, .fiche__corps, .fiche-lame { grid-template-columns: minmax(0, 1fr); }
  .axes { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 320px; }
  .eventail { order: -1; max-width: 360px; }
  .grille-lames { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied__haut { grid-template-columns: minmax(0, 1fr); }
  .barre-achat { display: flex; }
}
/* ---------- téléphone ---------- */
@media (max-width: 640px) {
  :root { --entete: 64px; }
  body { font-size: 16px; }
  .marque__nom { font-size: 17px; }
  .marque__logo { width: 36px; height: 36px; }
  .hero__actions .bouton, .ferme__actions .bouton { width: 100%; }
  .apercu ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .apercu ol::before { display: none; }
  .scenes { grid-template-columns: minmax(0, 1fr); }
  .formulaire { grid-template-columns: minmax(0, 1fr); }
  .formulaire .bouton { justify-self: stretch; }
  .eventail { max-width: 290px; }
  .portrait { max-width: 270px; }
  .portrait__lame { right: -8px; }
  .resultat__actions .bouton { flex-basis: 100%; }
  .niveau { --b: 0% !important; clip-path: none; border-radius: 16px; width: 100% !important; grid-template-columns: minmax(0, 1fr); padding: 16px 18px; min-height: 0; }
  .niveau__icone { display: none; }
  .avant-apres, .benefices, .boite-liste, .faits { grid-template-columns: minmax(0, 1fr); }
  .essai { grid-template-columns: minmax(0, 1fr); }
  .essai__paquet { max-width: 200px; }
  .garantie { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .faq details p { padding-right: 0; }
  .lettre-ligne { flex-direction: column; }
  .grille-lames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .recit__carte > div { margin: 0 4px; }
  .recit__fonds::after { background: linear-gradient(0deg, rgba(34, 22, 10, .75), rgba(34, 22, 10, .25)); }
  /* la boucle : les étiquettes de côté restent dans l’écran */
  .boucle { max-width: 320px; }
  .boucle__noeud { padding: 7px 11px; font-size: 13px; }
  .boucle__noeud:nth-of-type(2) { left: auto; right: -4px; transform: translateY(-50%); }
  .boucle__noeud:nth-of-type(4) { left: -4px; transform: translateY(-50%); }
}

/* ============================================================
   EXPÉRIENCES : trois moments (1, 2, 5 min), puis deux jeux
   ============================================================ */
.exp-temps { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 30px; }
.exp-temps a { display: inline-flex; align-items: baseline; gap: 10px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(240, 196, 94, .45); background: rgba(20, 12, 5, .45); color: #f6e7c8; font-weight: 600; font-size: 15px; text-decoration: none; backdrop-filter: blur(4px); transition: background .2s, border-color .2s, transform .2s; }
.exp-temps a:hover { background: rgba(240, 196, 94, .16); border-color: var(--or-vif); transform: translateY(-2px); }
.exp-temps b { font: 900 16px/1 var(--serif); color: var(--or-vif); font-variant-numeric: lining-nums; }
.page-experiences .essai { margin-top: 0; }
.exp-ou { margin-top: 26px; text-align: center; color: var(--doux); }
.exp-ou .lien-fleche { margin-left: 6px; }
.exp-cinq { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.exp-cinq .h2 { margin-top: 12px; }
.exp-cinq .lead { margin-top: 16px; }
.exp-liste { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.exp-liste li { display: flex; align-items: center; gap: 16px; }
.exp-liste .hex { width: 46px; height: 40px; font-size: 15px; background: var(--braise); color: #fff; }
.exp-cinq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.exp-cinq__actions .petit { max-width: 260px; color: var(--doux); }
/* pas d'animation sur ce cadre, et de la place pour l'ombre : Safari coupe sinon le drop-shadow des images au bord du bloc */
.exp-cinq__pots { position: relative; display: flex; justify-content: center; align-items: flex-end; margin: -30px -30px -60px; padding: 30px 30px 60px; }
.exp-cinq__pots img { width: 34%; height: auto; filter: drop-shadow(0 18px 22px rgba(58, 38, 17, .28)); }
.exp-cinq__pots img:nth-child(2) { width: 42%; margin: 0 -6%; position: relative; z-index: 1; }
.exp-jeux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: 40px auto 0; }
.exp-jeu.exp-jeu--roue { background: radial-gradient(80% 70% at 85% 0%, rgba(240, 196, 94, .25), rgba(240, 196, 94, 0) 70%), var(--nuit); color: rgba(255, 238, 210, .8); }
.exp-jeu.exp-jeu--roue b { color: #fff3dc; }
.exp-jeu.exp-jeu--roue .sur { color: var(--or-vif); }
.exp-jeu.exp-jeu--roue > span:not(.sur):not(.exp-jeu__icone) { color: rgba(255, 238, 210, .78); }
.exp-jeu.exp-jeu--roue .lien-fleche { color: #fff3dc; }
.exp-jeu.exp-jeu--roue .exp-jeu__icone { background: rgba(240, 196, 94, .18); color: var(--or-vif); }
.exp-jeu { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 22px; background: var(--blanc); box-shadow: var(--ombre); color: var(--texte); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.exp-jeu:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.exp-jeu b { font: 900 23px/1.2 var(--serif); color: var(--brun); }
.exp-jeu > span:not(.sur):not(.exp-jeu__icone) { font-size: 15px; color: var(--doux); }
.exp-jeu .lien-fleche { margin-top: auto; padding-top: 10px; align-self: flex-start; font-style: normal; }
.exp-jeu__icone { display: grid; place-items: center; width: 52px; height: 45px; margin-bottom: 6px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--miel-2); color: var(--or-txt); }
.exp-jeu__icone svg { width: 24px; height: 24px; }
.exp-devise { margin-top: 44px; text-align: center; font: italic 400 19px/1.4 var(--serif); color: var(--or-txt); }
@media (max-width: 860px) {
  .exp-cinq { grid-template-columns: minmax(0, 1fr); }
  .exp-cinq__pots { max-width: 380px; margin: 0 auto; order: -1; }
  .exp-jeux { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 520px) {
  .exp-temps a { width: 100%; }
}

/* ============================================================
   LA ROUE DES 24 LAMES (roue.js) : la scène de nuit, la roue, la lecture
   ============================================================ */
.roue-scene { padding-bottom: clamp(70px, 9vh, 110px); }
.roue-ciel { position: absolute; inset: 0; background: radial-gradient(55% 60% at 68% 50%, rgba(150, 90, 30, .32), rgba(150, 90, 30, 0) 70%), radial-gradient(1px 1px at 12% 22%, rgba(255, 240, 200, .7), transparent), radial-gradient(1px 1px at 28% 78%, rgba(255, 240, 200, .5), transparent), radial-gradient(1.5px 1.5px at 44% 12%, rgba(255, 240, 200, .6), transparent), radial-gradient(1px 1px at 86% 18%, rgba(255, 240, 200, .6), transparent), radial-gradient(1.5px 1.5px at 92% 72%, rgba(255, 240, 200, .5), transparent), radial-gradient(1px 1px at 8% 60%, rgba(255, 240, 200, .5), transparent), var(--nuit-1); }
.roue-scene .rucher-haut__fond::after { display: none; }
.roue-scene .rucher-haut__cadran { right: auto; left: 68%; width: min(820px, 90vw); margin: calc(min(820px, 90vw) / -2) 0 0 calc(min(820px, 90vw) / -2); opacity: .16; }
.roue-scene__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "texte plateau" "commandes plateau"; column-gap: clamp(24px, 4vw, 56px); align-items: center; }
.roue-scene__texte { grid-area: texte; align-self: end; animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.roue-titre { font-size: clamp(38px, 2.8vw + 18px, 62px); color: #fff3dc; margin-top: 10px; }
.roue-scene .lead { max-width: 460px; }
.roue-commandes { grid-area: commandes; align-self: start; margin-top: 26px; animation: monte 1s cubic-bezier(.2, .7, .2, 1) .2s both; }
.roue-etat { min-height: 3em; max-width: 440px; font-size: 15px; color: rgba(255, 238, 210, .72); }
.roue-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 16px; }
.roue-boutons [hidden], .roue-lecture[hidden] { display: none !important; }
.roue-melanger { touch-action: none; user-select: none; -webkit-user-select: none; }
#roueLire, #roueVoir { order: -1; }
.roue-plateau { grid-area: plateau; position: relative; --s: .8; height: calc(550px * var(--s)); }
.roue-tore { position: absolute; left: 50%; top: 50%; width: 620px; height: 550px; margin: -275px 0 0 -310px; transform: scale(var(--s)); }
.roue-lame { position: absolute; top: 50%; left: 50%; width: 130px; height: 175px; transform: translate(-50%, -50%); perspective: 600px; transition: transform .7s cubic-bezier(.2, .72, .2, 1), opacity .5s ease; will-change: transform; }
.roue-lame__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s ease; }
.roue-lame.est-retournee .roue-lame__in { transform: rotateY(180deg); }
.roue-lame.est-retournee { cursor: pointer; }
.roue-lame__dos, .roue-lame__face { position: absolute; width: 62%; height: 62%; top: 19%; left: 19%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.roue-lame__dos { transform: rotate(90deg); }
.roue-lame__face { transform: rotateY(180deg) rotate(90deg); }
.roue-lame img { width: 100%; height: 100%; object-fit: contain; transition: filter .3s; }
/* les lueurs vont sur les images : un drop-shadow sur l'élément en perspective serait coupé en rectangle par Chrome */
.roue-lame--active img { filter: brightness(1.08) drop-shadow(0 0 10px rgba(240, 196, 94, .7)); }
.roue-melange .roue-lame img { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.roue-lame--pole img { animation: roue-pole 1.8s ease-in-out infinite; }
@keyframes roue-pole { 0%, 100% { filter: drop-shadow(0 0 2px rgba(240, 196, 94, .4)); } 50% { filter: drop-shadow(0 0 14px rgba(240, 196, 94, 1)) brightness(1.12); } }
.roue-halo { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 205, 90, .75) 0%, rgba(255, 120, 50, .45) 40%, rgba(210, 60, 40, .12) 66%, rgba(0, 0, 0, 0) 78%); opacity: .9; animation: roue-pouls 4.2s ease-in-out infinite, roue-teinte 7s ease-in-out infinite alternate; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
@keyframes roue-pouls { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } }
/* la teinte reste dans les ors et les braises */
@keyframes roue-teinte { 0% { filter: blur(8px) hue-rotate(-18deg); } 100% { filter: blur(8px) hue-rotate(22deg); } }
.roue-melange .roue-halo { opacity: 1; animation: roue-brasier .8s ease-in-out infinite, roue-teinte 1.5s ease-in-out infinite alternate; }
@keyframes roue-brasier { 0%, 100% { transform: scale(1.25); } 50% { transform: scale(1.7); } }
.roue-lune { position: absolute; top: 50%; left: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #000 0%, #000 50%, rgba(0, 0, 0, .7) 66%, rgba(0, 0, 0, 0) 80%); box-shadow: 0 0 34px 10px rgba(0, 0, 0, .55); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.roue-melange .roue-lune { transform: scale(.55); }
.roue-fil { position: absolute; inset: 0; width: 620px; height: 550px; overflow: visible; pointer-events: none; }
.roue-fil__fond { fill: none; stroke: rgba(240, 196, 94, .28); stroke-width: 1; stroke-dasharray: 2 6; }
.roue-fil__trace { fill: none; stroke: var(--or-vif); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(240, 196, 94, .8)); transition: stroke-dashoffset .7s cubic-bezier(.3, .7, .3, 1); }
.roue-fil__point { fill: var(--or-vif); filter: drop-shadow(0 0 6px rgba(240, 196, 94, .9)); transition: opacity .4s; }
.roue-centre { position: absolute; top: 50%; left: 50%; z-index: 50; max-width: 230px; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.roue-centre p { opacity: 0; transition: opacity .4s; text-shadow: 0 0 14px rgba(0, 0, 0, .8); }
.roue-centre-vu .roue-centre p { opacity: 1; }
.roue-centre__nom { font: 900 24px/1.15 var(--serif); color: #fff3dc; }
.roue-centre__sous { margin-top: 5px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or-vif); }
.roue-centre__compte { margin-top: 6px; font-size: 13px; color: rgba(255, 238, 210, .7); font-variant-numeric: lining-nums; }
/* la lecture */
.roue-lecture { background: var(--creme); }
.roue-lecture:focus { outline: none; }
.roue-bande { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 34px 0 0; padding: 0; list-style: none; }
.roue-bande li { width: 46px; animation: monte .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 40ms); }
.roue-bande img { width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(58, 38, 17, .25)); }
.roue-lead { margin-top: 26px; text-align: center; }
.roue-bloc { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--filet); }
.roue-bloc__titre { font: 900 22px/1.25 var(--serif); color: var(--brun); }
.roue-bloc p { margin-top: 12px; }
.roue-nom { font-weight: 700; color: var(--braise); }
.roue-portrait { display: flex; gap: 20px; align-items: flex-start; }
.roue-vignette { flex: none; width: 96px; margin-top: 12px; }
.roue-vignette img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ombre); }
.roue-une__fermier { font-size: 15px; color: var(--doux); }
.roue-miel { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; font-style: normal; vertical-align: 1px; }
.roue-miel--ba { background: #3a2611; color: #f6e3bf; }
.roue-miel--hab { background: var(--miel-3); color: var(--brun); }
.roue-miel--ba-hab { background: linear-gradient(90deg, #3a2611, var(--or-fonce)); color: #fff6e2; }
.roue-miel--aucun { background: #fff8e4; color: var(--or-txt); box-shadow: inset 0 0 0 1px var(--or); }
.roue-question { margin-top: 16px !important; padding: 20px 22px; border-radius: 18px; background: var(--miel); font: italic 400 20px/1.4 var(--serif); color: var(--brun); }
.roue-question span { display: block; margin-bottom: 6px; font: 700 12px/1.3 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.roue-invit { margin: 16px 0 0; padding-left: 20px; }
.roue-invit li + li { margin-top: 8px; }
.roue-pratique { margin-top: 22px; padding: 22px 24px; border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre); }
.roue-pratique__titre { margin-top: 4px !important; font: 900 20px/1.25 var(--serif); color: var(--brun); }
.roue-pratique__liens { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.roue-avert { font-size: 14px; color: var(--doux); }
.roue-detail { margin-top: 36px; border-top: 1px solid var(--filet); padding-top: 22px; }
.roue-detail summary { cursor: pointer; font-weight: 700; color: var(--brun); }
.roue-une { margin: 18px 0 0; padding: 0; list-style: none; }
.roue-une li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.roue-une img { flex: none; width: 58px; height: auto; align-self: flex-start; filter: drop-shadow(0 4px 6px rgba(58, 38, 17, .25)); }
.roue-une p { margin-top: 6px; font-size: 15px; }
.roue-une__nom { margin-top: 0 !important; font: 900 18px/1.25 var(--serif) !important; color: var(--brun); }
.roue-une .lien-fleche { display: inline-flex; margin-top: 8px; font-size: 15px; }
.roue-autres { margin-top: 40px; }
.roue-regles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.roue-regles > div { padding: 24px; border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre); }
.roue-regles .hex { width: 46px; height: 40px; font-size: 15px; background: var(--braise); color: #fff; }
.roue-regles p { margin-top: 14px; font-size: 15px; color: var(--doux); }
.roue-regles b { color: var(--brun); }
@media (max-width: 900px) {
  .roue-scene__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "plateau" "commandes"; }
  .roue-scene__texte { text-align: center; }
  .roue-scene .lead, .roue-etat { margin-left: auto; margin-right: auto; }
  .roue-scene .sur--abeille { justify-content: center; }
  .roue-plateau { margin-top: 18px; }
  .roue-commandes { margin-top: 12px; text-align: center; }
  .roue-boutons { justify-content: center; }
  .roue-scene .rucher-haut__cadran { left: 50%; top: 58%; }
  .roue-scene { padding-top: calc(var(--entete) + 26px); }
  .roue-titre { font-size: clamp(32px, 8vw, 44px); }
  .roue-scene .lead { margin-top: 12px; font-size: 16px; }
  .roue-regles { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .roue-halo, .roue-melange .roue-halo, .roue-lame--pole img { animation: none; }
  .roue-lame--pole img { filter: drop-shadow(0 0 8px rgba(240, 196, 94, 1)); }
}

/* ============================================================
   LES JEUX DU PRÉNOM : la pente de votre Miel (pente.js), les Fermiers de votre prénom (votre-prenom.js)
   même scène de nuit que la Roue, lecture sur fond clair ; l'aperçu des images à partager (partage.js)
   ============================================================ */
.jeu-scene { padding-bottom: clamp(70px, 9vh, 110px); }
.jeu-scene .rucher-haut__fond::after { display: none; }
.jeu-ciel { background: radial-gradient(60% 50% at 50% 30%, rgba(150, 90, 30, .34), rgba(150, 90, 30, 0) 70%), radial-gradient(1px 1px at 12% 22%, rgba(255, 240, 200, .7), transparent), radial-gradient(1px 1px at 28% 78%, rgba(255, 240, 200, .5), transparent), radial-gradient(1.5px 1.5px at 44% 12%, rgba(255, 240, 200, .6), transparent), radial-gradient(1px 1px at 86% 18%, rgba(255, 240, 200, .6), transparent), radial-gradient(1.5px 1.5px at 92% 72%, rgba(255, 240, 200, .5), transparent), var(--nuit-1); }
.jeu-scene .rucher-haut__cadran { right: auto; left: 50%; top: 24%; width: min(900px, 110vw); margin: calc(min(900px, 110vw) / -2) 0 0 calc(min(900px, 110vw) / -2); opacity: .13; }
.jeu-tete { text-align: center; animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.jeu-tete .sur--abeille { justify-content: center; }
.jeu-titre { margin-top: 10px; font-size: clamp(36px, 3vw + 18px, 64px); color: #fff3dc; }
.jeu-tete .lead { max-width: 640px; margin: 18px auto 0; }
.jeu-form { display: grid; gap: 14px; max-width: 640px; margin: 30px auto 0; text-align: left; align-items: end; }
.jeu-form--prenom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.jeu-form--pente { grid-template-columns: minmax(0, 1fr) auto; max-width: 520px; }
.jeu-form .champ { color: rgba(255, 238, 210, .85); }
.jeu-form .champ input, .jeu-form .date-trois input { background: rgba(255, 253, 249, .96); }
.jeu-form .bouton--grand { min-height: 54px; }
.jeu-erreur { min-height: 1.4em; margin-top: 10px; font-size: 14px; font-weight: 600; color: #ffb48a; }
.jeu-prive { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 238, 210, .62); }
.jeu-prive svg { width: 15px; height: 15px; color: var(--or-vif); flex: none; }
.jeu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 30px; }
.jeu-suite { background: var(--creme); }
.jeu-dossier { display: flex; gap: 24px; align-items: center; margin-top: 44px; padding: 24px; border-radius: 24px; background: linear-gradient(160deg, #fff9ec, #f6e2b5); box-shadow: 0 0 0 1.5px rgba(224, 180, 90, .7), var(--ombre); }
.jeu-suite .jeu-dossier:first-child { margin-top: 0; }
.jeu-dossier img { flex: none; width: 120px; height: auto; border-radius: 6px; box-shadow: 0 14px 26px -12px rgba(58, 38, 17, .55); }
.jeu-dossier__titre { margin-top: 4px; font: 900 24px/1.2 var(--serif); color: var(--brun); }
.jeu-dossier p:not(.sur) { margin-top: 8px; font-size: 15px; color: var(--doux); }
.jeu-dossier .bouton { margin-top: 14px; }
.jeu-faq { margin-top: 30px; }
.jeu-faq a { color: var(--braise); font-weight: 600; }
/* la ronde du prénom */
.pr-resultat { margin-top: clamp(48px, 6vw, 72px); text-align: center; scroll-margin-top: calc(var(--entete) + 12px); }
.pr-titre { font: 900 clamp(30px, 2.4vw + 18px, 48px)/1.1 var(--serif); color: #fff3dc; }
.pr-titre small { display: block; margin-bottom: 8px; font: 700 13px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-vif); }
.pr-ronde { --taille: min(560px, 92vw); position: relative; width: var(--taille); height: var(--taille); margin: 22px auto 0; }
.pr-ronde::before, .pr-ronde::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.pr-ronde::before { inset: 9%; border: 1px solid rgba(240, 196, 94, .45); box-shadow: 0 0 60px rgba(240, 196, 94, .18) inset; }
.pr-ronde::after { inset: 11%; border: 1px dashed rgba(240, 196, 94, .25); }
.pr-anneau { position: absolute; inset: 0; animation: pr-tourne 120s linear infinite; }
.pr-it { position: absolute; left: 50%; top: 50%; width: var(--fw); height: calc(var(--fw) * 1.528); margin: calc(var(--fw) * -.764) 0 0 calc(var(--fw) / -2); transform: rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1)); }
.pr-it__in { position: relative; display: block; width: 100%; height: 100%; animation: pr-tourne 120s linear infinite reverse; }
.pr-it a { position: relative; display: block; width: 100%; height: 100%; opacity: 0; transform: scale(.6); animation: pr-entre .7s cubic-bezier(.2, .8, .2, 1.2) forwards; animation-delay: var(--d); }
.pr-it img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); transition: filter .25s; }
/* la lueur va sur l'image : un drop-shadow sur l'élément animé serait coupé en rectangle par Chrome */
.pr-it a:hover img, .pr-it a:focus-visible img { filter: drop-shadow(0 0 10px rgba(240, 196, 94, .85)) drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.pr-it b { position: absolute; left: 50%; bottom: -16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; transform: translateX(-50%); background: #0d0906; box-shadow: inset 0 0 0 1.5px var(--or-vif); font: 700 14px/1 var(--sans); color: #fff3dc; opacity: 0; animation: pr-fondu .5s forwards; animation-delay: calc(var(--d) + .3s); }
.pr-centre { position: absolute; left: 50%; top: 50%; width: 27%; transform: translate(-50%, -50%); text-align: center; }
.pr-centre img { display: block; width: 82%; margin: 0 auto; filter: drop-shadow(0 0 22px rgba(240, 190, 90, .55)) drop-shadow(0 14px 22px rgba(0, 0, 0, .4)); opacity: 0; animation: pr-fondu .9s ease forwards .2s; }
.pr-centre small { display: block; margin-top: 10px; font: 700 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--or-vif); }
.pr-centre strong { display: block; margin-top: 2px; font: 900 clamp(15px, 3.2vw, 21px)/1.1 var(--serif); color: #fff3dc; }
.pr-pente { margin-top: 26px; font: italic 700 clamp(18px, 1vw + 14px, 22px)/1.4 var(--serif); color: var(--or-vif); }
@keyframes pr-tourne { to { transform: rotate(360deg); } }
@keyframes pr-entre { to { opacity: 1; transform: scale(1); } }
@keyframes pr-fondu { to { opacity: 1; } }
.pr-alpha { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 22px; }
.pr-alpha span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--filet-2); background: var(--blanc); font-size: 13px; white-space: nowrap; color: var(--texte); }
.pr-alpha b { margin-right: 5px; color: var(--braise); }
/* la lecture du prénom (prenom.js) */
.pr-lecture { margin-top: 10px; }
.pr-bloc { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--filet); }
.pr-bloc h2 { font: 900 clamp(24px, 1.4vw + 18px, 32px)/1.2 var(--serif); color: var(--brun); }
.pr-bloc > p { margin-top: 12px; }
.pr-intro { color: var(--doux); }
.pr-lettres { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.pr-lettres li { position: relative; display: flex; flex-direction: column; align-items: center; width: 88px; text-align: center; }
.pr-lettres .pl-l { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: var(--brun); font: 700 14px/1 var(--sans); color: #fff3dc; }
.pr-lettres a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--brun); }
.pr-lettres img { width: 64px; height: auto; filter: drop-shadow(0 6px 8px rgba(58, 38, 17, .25)); }
.pr-lettres small { margin-top: 4px; font-size: 11.5px; color: var(--doux); }
.pr-calc { padding: 12px 16px; border-radius: 14px; background: var(--miel); font-size: 15px; color: var(--brun); font-variant-numeric: lining-nums; }
.pf { display: flex; gap: 20px; align-items: flex-start; margin-top: 22px; }
.pf-img { flex: none; width: 104px; }
.pf-img img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ombre); }
.pf-role { display: block; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.pf h3 { margin-top: 4px; font: 900 22px/1.25 var(--serif); }
.pf h3 small { font: 600 14px/1 var(--sans); color: var(--doux); }
.pf p { margin-top: 8px; font-size: 15.5px; }
.pf-dit { font-style: italic; }
.pf-rec, .pf-inv { color: var(--doux); }
.pr-lecture a.lame { font-weight: 700; color: var(--braise); }
.pr-sing { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); font-size: 15px; }
.pr-sing p + p { margin-top: 8px; }
.pr-nuance { font-style: italic; color: var(--doux); }
.pr-jour { text-align: left; }
.pr-k { display: block; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.pr-q { margin-top: 8px !important; padding: 18px 22px; border-radius: 18px; background: var(--miel); font: italic 700 21px/1.4 var(--serif); color: var(--brun); }
.pr-pratique { margin-top: 16px !important; font-size: 15.5px; }
.pr-jour .lien-fleche { margin-top: 12px; }
/* la pente */
.pt-cadre { margin-top: clamp(36px, 5vw, 56px); }
.pt-plateau { max-width: 760px; margin: 0 auto; overflow: hidden; border-radius: 24px; background: #0d0906; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(240, 196, 94, .35); scroll-margin-top: calc(var(--entete) + 12px); }
.pt-plateau canvas { display: block; width: 100%; touch-action: manipulation; }
.pt-ligne { min-height: 3.2em; padding: 14px 20px 18px; text-align: center; font: 700 17px/1.45 var(--serif); color: #eadcbf; }
.pt-ligne b { color: #ffd56b; }
.pt-ligne .pt-ba { color: #d9a06a; }
.pt-ligne .pt-hab { color: #ffe08a; }
.pt-ligne .pt-lame { color: inherit; }
.pt-res-tete { display: flex; gap: 22px; align-items: center; }
.pt-pot { flex: none; width: 110px; margin: 0; }
.pt-pot img { width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(58, 38, 17, .3)); }
.pt-res-titre { margin-top: 6px; font-size: clamp(26px, 1.8vw + 18px, 40px); }
.pt-texte { margin-top: 22px; font-size: 17px; }
.pt-texte .pt-lame { font-weight: 700; color: var(--braise); }
.pt-nuance { margin-top: 12px; font-style: italic; color: var(--doux); }
.pt-presence { position: relative; margin: 100px auto 0; max-width: 580px; padding: 26px 24px 24px; border-radius: 24px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #3a2611, #140c05 70%); color: #eadcbf; box-shadow: 0 30px 60px -24px rgba(20, 12, 5, .7); transition: background 1.5s; }
.pt-presence h3 { margin-top: 4px; font: 900 26px/1.2 var(--serif); color: #f6e3b4; }
.pt-presence p { margin-top: 8px; font-size: 15px; }
.pt-trois { width: 120px; margin: -82px auto 6px; }
.pt-trois img { display: block; width: 100%; filter: brightness(.7) saturate(.6); opacity: .85; transition: filter 1.2s, opacity 1.2s; }
.pt-presence.tient .pt-trois img { filter: brightness(1.2) saturate(1) drop-shadow(0 0 30px rgba(255, 245, 210, .8)); opacity: 1; transition: filter 6s linear, opacity 6s linear; }
.pt-presence.lumiere { background: radial-gradient(ellipse at 50% 30%, #fffaf0, #f3e2b8 45%, #b8862f); color: #2a1806; }
.pt-presence.lumiere h3, .pt-presence.lumiere .pt-msg { color: #2a1806; }
.pt-presence.lumiere .pt-trois img { filter: brightness(1.25) drop-shadow(0 0 46px rgba(255, 250, 230, 1)); opacity: 1; animation: pt-flotte 6s ease-in-out infinite; }
.pt-tenir { display: grid; place-items: center; width: 136px; height: 136px; margin: 18px auto 0; border-radius: 50%; border: 1px solid rgba(240, 196, 94, .7); background: radial-gradient(circle at 35% 30%, #fff6d8, #f2c35e 55%, #b8862f); box-shadow: 0 0 40px rgba(240, 196, 94, .35); font: 700 15px/1.35 var(--sans); color: #2a1806; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .4s, box-shadow .4s; }
.pt-tenir span { display: block; padding: 0 18px; }
.pt-tenir.est-tenu { transform: scale(1.08); box-shadow: 0 0 70px rgba(255, 240, 200, .75), inset 0 0 26px rgba(255, 255, 255, .6); animation: pt-souffle 10s ease-in-out infinite; }
.pt-msg { min-height: 1.5em; margin-top: 14px !important; font-weight: 600; color: #f6e3b4; }
@keyframes pt-souffle { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14); } }
@keyframes pt-flotte { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
.jeu-actions--clair { margin-top: 36px; }
/* l'aperçu de l'image à partager */
.partage { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 9, 6, .84); backdrop-filter: blur(6px); }
.partage.est-ouvert { display: flex; }
.partage__boite { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; max-height: 94vh; }
.partage__img { max-width: 86vw; max-height: 72vh; border-radius: 12px; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(240, 196, 94, .4); }
.partage__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.partage__actions [hidden] { display: none; }
.partage__note { max-width: 360px; font-size: 12.5px; text-align: center; color: #c8b18a; }
.partage__fermer { position: absolute; top: -12px; right: -12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--or); background: #1c140c; color: #f0dcae; cursor: pointer; }
.partage__fermer svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .jeu-form--prenom, .jeu-form--pente { grid-template-columns: minmax(0, 1fr); }
  .jeu-form .bouton { width: 100%; }
  .jeu-scene { padding-top: calc(var(--entete) + 26px); }
  .jeu-tete .lead { font-size: 16px; }
  .jeu-dossier { flex-direction: column; text-align: center; }
  .pt-res-tete { gap: 16px; }
  .pt-pot { width: 84px; }
  .pf-img { width: 80px; }
  .pr-centre { width: 30%; }
  .pr-centre small { font-size: 8.5px; letter-spacing: .08em; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-anneau, .pr-it__in { animation: none; }
  .pr-it a, .pr-it b, .pr-centre img { animation-duration: .01s; animation-delay: 0s; }
  .pt-presence.lumiere .pt-trois img, .pt-tenir.est-tenu { animation: none; }
}

/* ============================================================
   « MIEUX VIVRE VOS ÉMOTIONS » (parcours.js) : douze écrans sur une scène de nuit,
   une barre de chapitres sous l'en-tête, des fonds qui changent avec les chapitres
   ============================================================ */
.pc { position: relative; isolation: isolate; min-height: 100svh; padding-top: var(--entete); background: var(--nuit-1); color: #f6e7c8; }
.pc-fonds { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pc-fond { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.pc-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 5, .82), rgba(20, 12, 5, .7) 40%, rgba(20, 12, 5, .92)); }
.pc-fond.est-actif { opacity: 1; }
/* derrière l'orbe : la scène floutée et assombrie, pour que rien ne distraie de la respiration */
.pc-fond--flou { filter: blur(8px) saturate(1.1) brightness(.55); transform: scale(1.08); }
.pc-fond--nuit { background: radial-gradient(60% 50% at 50% 30%, rgba(150, 90, 30, .34), rgba(150, 90, 30, 0) 70%), var(--nuit-1); }
.pc-fond--nuit::after { display: none; }
.pc-cadran { position: absolute; left: 50%; top: 48%; width: min(900px, 120vw); max-width: none; height: auto; margin: calc(min(900px, 120vw) / -2) 0 0 calc(min(900px, 120vw) / -2); opacity: .1; animation: tourne 240s linear infinite; }
.pc-barre { position: sticky; top: var(--entete); z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px var(--gouttiere); background: rgba(20, 12, 5, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(240, 196, 94, .18); }
.pc-barre__etape { flex: 1; text-align: center; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-vif); }
.pc-barre__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(240, 196, 94, .4); background: rgba(255, 243, 220, .04); color: #fff3dc; font: 600 13.5px/1 var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.pc-barre__btn:hover, .pc-barre__btn[aria-expanded="true"] { border-color: var(--or-vif); background: rgba(240, 196, 94, .14); }
.pc-barre__btn[hidden] { display: none; }
#retour svg { width: 14px; height: 14px; transform: rotate(180deg); }
.pc-barre__progres { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: rgba(240, 196, 94, .12); }
.pc-barre__progres i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f3c96c, #e3a53d); transition: width .5s ease; }
.pc-ecran { position: relative; display: none; min-height: calc(100svh - var(--entete) - 56px); padding: clamp(34px, 6vh, 72px) var(--gouttiere) clamp(56px, 8vh, 96px); }
.pc-ecran.est-actif { display: flex; align-items: center; justify-content: center; animation: pc-entre .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pc-entre { from { opacity: 0; transform: translateY(18px); } }
.pc-contenu { width: 100%; max-width: 1060px; }
.pc-centre { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pc-etroit { max-width: 740px; }
.pc .sur { color: var(--or-vif); }
.pc .sur--abeille { justify-content: center; }
.pc-titre { margin-top: 12px; font: 900 clamp(30px, 2.6vw + 18px, 54px)/1.1 var(--serif); letter-spacing: -.012em; color: #fff3dc; }
.pc-titre em { font-style: italic; color: var(--or-vif); }
.pc-titre--xl { font-size: clamp(36px, 3.6vw + 18px, 72px); }
.pc-titre--m { font-size: clamp(24px, 1.6vw + 16px, 34px); }
.pc-sous { margin-top: 14px; font: italic 700 clamp(18px, 1vw + 14px, 24px)/1.4 var(--serif); color: rgba(255, 238, 210, .86); }
.pc-texte { max-width: 640px; margin-top: 16px; font-size: 17px; color: rgba(255, 238, 210, .84); }
.pc-texte--grand { font-size: clamp(17px, .5vw + 15px, 20px); }
.pc-texte strong { color: #fff3dc; }
.pc-texte--fort strong { color: var(--or-vif); }
.pc-aparte { max-width: 620px; margin-top: 20px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 243, 220, .06); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .25); font-size: 15px; text-align: left; color: rgba(255, 238, 210, .76); }
.pc-aparte strong { color: #fff3dc; }
.pc-ecran .bouton { margin-top: 28px; }
.pc-ecran .bouton small { margin-left: 8px; font-size: .78em; font-weight: 600; opacity: .72; }
.pc-freins { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.pc-freins li { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(240, 196, 94, .45); background: rgba(20, 12, 5, .4); font: 600 14px/1.2 var(--sans); color: #fff3dc; }
.pc-freins--clairs li { background: rgba(240, 196, 94, .14); }
.pc .hex { width: 40px; height: 35px; font-size: 14px; background: var(--braise); color: #fff; }
.pc-gain, .pc-chaine { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; text-align: left; }
.pc-gain { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; }
.pc-chaine { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.pc-gain li, .pc-chaine li { padding: 18px; border-radius: 18px; background: rgba(20, 12, 5, .58); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .25); }
.pc-chaine li { animation: monte .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * .12s + .2s); }
.pc-gain b, .pc-chaine b { display: block; margin-top: 10px; font: 900 18px/1.25 var(--serif); color: #fff3dc; }
.pc-gain span:not(.hex), .pc-chaine span:not(.hex) { display: block; margin-top: 4px; font-size: 14.5px; color: rgba(255, 238, 210, .76); }
.pc-miroir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 24px; }
.pc-miroir button { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(240, 196, 94, .3); background: rgba(255, 243, 220, .05); color: #f6e7c8; font: 500 15px/1.4 var(--sans); text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.pc-miroir button:hover { border-color: rgba(240, 196, 94, .7); }
.pc-miroir button[aria-pressed="true"] { border-color: var(--or-vif); background: rgba(240, 196, 94, .2); color: #fff; box-shadow: inset 3px 0 0 var(--or-vif); }
.pc-compte { min-height: 1.5em; margin-top: 16px; font: italic 700 18px/1.4 var(--serif); color: var(--or-vif); }
.pc-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: 100%; max-width: 880px; margin-top: 28px; text-align: left; }
.pc-miel { display: flex; gap: 18px; align-items: center; margin: 0; padding: 20px; border-radius: 22px; background: rgba(20, 12, 5, .62); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .25); }
.pc-miel img { flex: none; width: auto; height: 116px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.pc-miel b { display: block; font: 900 20px/1.25 var(--serif); color: #fff3dc; }
.pc-miel figcaption > span { display: block; margin-top: 6px; font-size: 14.5px; color: rgba(255, 238, 210, .8); }
.pc-miel ul { margin: 10px 0 0; padding-left: 18px; list-style: disc; font-size: 14px; color: rgba(255, 238, 210, .7); }
.pc-miel li::marker { color: var(--or-vif); }
.pc-miel--ba b { color: #f2b98a; }
.pc-miel--hab b { color: #ffe08a; }
.pc-quiz-num { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font: 700 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--or-vif); }
.pc-quiz-num i { display: inline-block; width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: rgba(240, 196, 94, .25); }
.pc-quiz-num i.fait { background: var(--or-vif); }
.pc-quiz-choix { display: flex; justify-content: center; gap: 18px; margin-top: 26px; }
/* pas de déplacement au survol : Safari couperait l'ombre des pots au bord du bouton */
.pc-pot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 172px; padding: 18px 14px 16px; border-radius: 22px; border: 1px solid rgba(240, 196, 94, .35); background: rgba(255, 243, 220, .05); color: #fff3dc; cursor: pointer; transition: background .2s, border-color .2s, opacity .3s, box-shadow .3s; }
.pc-pot img { width: auto; height: 100px; margin-bottom: 6px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.pc-pot b { font: 900 19px/1.2 var(--serif); }
.pc-pot span { font-size: 13px; color: rgba(255, 238, 210, .7); }
.pc-pot:hover { border-color: var(--or-vif); background: rgba(240, 196, 94, .12); }
.repondu .pc-pot { cursor: default; }
.repondu .pc-pot:not(.juste):not(.choisi) { opacity: .45; }
.pc-pot.juste { border-color: #a8d68f; box-shadow: 0 0 0 3px rgba(168, 214, 143, .3); }
.pc-pot.faux { border-color: #ff9d7a; box-shadow: 0 0 0 3px rgba(255, 157, 122, .25); }
.pc-quiz-rep { margin-top: 22px; }
.pc-quiz-rep[hidden] { display: none; }
.pc-verdict { font: 900 26px/1.2 var(--serif); color: var(--or-vif); }
.pc-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.pc-duo--inverse .pc-tableau { order: 2; }
.pc-tableau { margin: 0; }
.pc-tableau img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(240, 196, 94, .3); }
.pc-tableau figcaption { margin-top: 12px; font-size: 14px; color: rgba(255, 238, 210, .7); }
.pc-tableau figcaption b { color: #fff3dc; }
.pc-citation { margin: 22px 0 0; padding-left: 18px; border-left: 3px solid var(--or-vif); font: italic 700 clamp(19px, 1vw + 15px, 24px)/1.4 var(--serif); color: #fff3dc; }
.pc-pile { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pc-pile li { padding: 12px 16px; border-radius: 14px; background: rgba(255, 243, 220, .06); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .2); font-size: 15.5px; color: rgba(255, 238, 210, .84); }
.pc-pile b { color: #fff3dc; }
.pc-trois { margin: 18px 0 0; }
.pc-trois img { width: min(200px, 42vw); height: auto; filter: drop-shadow(0 0 40px rgba(255, 240, 200, .45)) drop-shadow(0 20px 26px rgba(0, 0, 0, .5)); }
.pc-temps { display: grid; gap: 10px; width: 100%; margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.pc-temps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; background: rgba(255, 243, 220, .04); opacity: .55; transition: opacity .4s, background .4s, box-shadow .4s; }
.pc-temps li.actif { opacity: 1; background: rgba(240, 196, 94, .12); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .4); }
.pc-temps b { display: block; font: 900 18px/1.25 var(--serif); color: #fff3dc; }
.pc-temps span:not(.hex) { font-size: 14.5px; color: rgba(255, 238, 210, .76); }
.pc-orbe { margin: 22px auto 0; }
/* pendant le geste, le reste de l'écran s'efface */
.pc-ecran[data-ecran="geste"] .sur, .pc-ecran[data-ecran="geste"] .pc-titre, .pc-ecran[data-ecran="geste"] .pc-note, #tsPasser { transition: filter 1.4s ease; }
.pc-ecran[data-ecran="souffle"] .pc-texte, #cmPasser { transition: filter 1.4s ease; }
.pc-ecran.respire .sur, .pc-ecran.respire .pc-note, .pc-ecran.respire #tsPasser, .pc-ecran.respire .pc-texte, .pc-ecran.respire #cmPasser { filter: opacity(.14) blur(1px); }
.pc-ecran.respire .pc-titre { filter: opacity(.35); }
.pc-ecran.respire #cmGo, .pc-ecran.respire #tsGo { background: none; color: #f6e3b4; box-shadow: 0 0 0 1px rgba(224, 180, 90, .4); }
.pc-etape { margin-top: 10px; font-size: 14px; color: rgba(255, 238, 210, .7); font-variant-numeric: lining-nums; }
.pc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 24px; }
.pc-actions .bouton, .pc-actions .pc-lien { margin-top: 0; }
.pc-actions--gauche { justify-content: flex-start; }
.pc-lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 4px 0; border: 0; border-bottom: 1px solid rgba(240, 196, 94, .5); background: none; font: 600 15px/1.3 var(--sans); color: #fff3dc; cursor: pointer; }
.pc-lien svg { width: 14px; height: 14px; }
.pc-note { max-width: 520px; margin-top: 18px; font-size: 13px; color: rgba(255, 238, 210, .56); }
.pc-dossier { position: relative; display: block; overflow: hidden; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(240, 196, 94, .35); }
.pc-dossier img { display: block; width: 100%; height: auto; }
.pc-dossier span { position: absolute; left: 6%; bottom: 8%; padding: 6px 12px; border-radius: 999px; background: rgba(20, 12, 5, .72); font: 700 13px/1.2 var(--sans); letter-spacing: .08em; color: var(--or-vif); }
.pc-micro { margin-top: 10px; font-size: 13px; color: rgba(255, 238, 210, .6); }
.pc-fin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.pc-plus { padding: 22px; border-radius: 22px; background: rgba(20, 12, 5, .74); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .25); }
.pc-porte { display: block; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 243, 220, .05); color: inherit; text-decoration: none; transition: background .2s; }
.pc-porte:hover { background: rgba(240, 196, 94, .14); }
.pc-porte b { display: block; font: 900 17px/1.25 var(--serif); color: #fff3dc; }
.pc-porte span { font-size: 14px; color: rgba(255, 238, 210, .72); }
.pc-faq { margin-top: 16px; border-top-color: rgba(240, 196, 94, .25); }
.pc-faq details { border-bottom-color: rgba(240, 196, 94, .25); }
.pc-faq summary { padding: 14px 0; font-size: 15.5px; color: #fff3dc; }
.pc-faq summary::after { border-color: rgba(240, 196, 94, .4); color: #fff3dc; }
.pc-faq details[open] summary::after { background: rgba(240, 196, 94, .2); }
.pc-faq details p { padding: 0 0 16px; font-size: 14.5px; color: rgba(255, 238, 210, .76); }
.pc-panneau { position: fixed; z-index: 120; top: calc(var(--entete) + 64px); right: var(--gouttiere); width: min(420px, calc(100vw - 2 * var(--gouttiere))); max-height: calc(100vh - var(--entete) - 84px); overflow: auto; padding: 22px; border-radius: 22px; background: #1c140c; color: #f6e7c8; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(240, 196, 94, .35); }
.pc-panneau[hidden] { display: none; }
.pc-panneau__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(240, 196, 94, .5); background: none; color: #f0dcae; cursor: pointer; }
.pc-panneau__x svg { width: 14px; height: 14px; }
.pc-panneau dl > div { margin-top: 14px; }
.pc-panneau dt { font: 900 17px/1.25 var(--serif); color: #fff3dc; }
.pc-panneau dt small { margin-left: 6px; font: 600 12px/1 var(--sans); color: var(--or-vif); }
.pc-panneau dd { margin: 4px 0 0; font-size: 14.5px; color: rgba(255, 238, 210, .78); }
.pc-sommaire { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pc-sommaire button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: rgba(255, 243, 220, .05); color: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.pc-sommaire button:hover { background: rgba(240, 196, 94, .14); }
.pc-sommaire .hex { grid-row: span 2; }
.pc-sommaire b { font: 900 16px/1.2 var(--serif); color: #fff3dc; }
.pc-sommaire span:not(.hex) { font-size: 13px; color: rgba(255, 238, 210, .65); }
@media (max-width: 860px) {
  .pc-gain, .pc-miroir, .pc-deux, .pc-duo, .pc-fin { grid-template-columns: minmax(0, 1fr); }
  .pc-chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-duo--inverse .pc-tableau { order: 0; }
  .pc-barre { gap: 6px; }
  .pc-barre__btn { padding: 7px 10px; font-size: 12.5px; }
  .pc-pot { width: min(172px, 42vw); }
}
@media (max-width: 480px) {
  .pc-barre__etape { font-size: 10.5px; letter-spacing: .08em; }
  .pc-chaine { grid-template-columns: minmax(0, 1fr); }
  .pc-miel { flex-direction: column; text-align: center; }
  .pc-miel ul { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-ecran.est-actif, .pc-chaine li, .pc-mot.est-neuf { animation: none; }
  .pc-cadran { animation: none; }
}


/* ============================================================
   L'ORBE DE MIEL (TDF_ORBE dans souffle.js) : une sphère de verre remplie de miel qui respire,
   un cadran d'un trait par seconde, un arc d'or ; --s va de .7 (expiré) à 1 (inspiré)
   ============================================================ */
.orbe { --s: .7; position: relative; display: grid; place-items: center; width: clamp(250px, 40vh, 360px); aspect-ratio: 1; }
.orbe > * { grid-area: 1 / 1; }
/* les ondes : trois anneaux de verre qui s'ouvrent avec l'inspiration, chacun un peu plus loin */
.orbe__ondes { position: absolute; inset: 0; }
.orbe__ondes i { position: absolute; inset: 24%; border-radius: 50%; border: 1px solid rgba(255, 244, 220, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 18px rgba(243, 210, 140, .12); transform: scale(calc(.82 + (var(--s) - .7) * (1.6 + var(--k) * 1.1))); opacity: calc(.55 - var(--k) * .16); transition: transform .25s linear; }
.orbe__halo { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(243, 215, 150, .34), rgba(224, 180, 90, .08) 45%, transparent 66%); transform: scale(calc(.75 + (var(--s) - .7) * 1.4)); filter: blur(4px); }
.orbe__cadran { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.orbe__traits line { stroke: rgba(243, 223, 174, .18); stroke-width: 1.2; stroke-linecap: round; transition: stroke .4s, stroke-width .4s; }
.orbe__traits line.cinq { stroke-width: 2; }
.orbe__traits line.on { stroke: #f3dfae; stroke-width: 1.6; filter: drop-shadow(0 0 2px rgba(243, 223, 174, .9)); }
.orbe__traits line.cinq.on { stroke-width: 2.2; }
.orbe__piste { fill: none; stroke: rgba(243, 223, 174, .08); stroke-width: 2; }
.orbe__arc { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 4px rgba(243, 215, 150, .8)); }
/* les grains de pollen en orbite */
.orbe__grains { position: absolute; inset: 9%; animation: tourne 22s linear infinite; }
.orbe__grains i { position: absolute; inset: 0; animation: tourne calc(14s + var(--k) * 5s) linear infinite reverse; animation-delay: calc(var(--k) * -3s); }
.orbe__grains i::before { content: ''; position: absolute; top: calc(4% + var(--k) * 3%); left: 50%; width: calc(3px + var(--k) * .6px); aspect-ratio: 1; border-radius: 50%; background: #fff1cc; box-shadow: 0 0 8px 2px rgba(243, 210, 140, .7); opacity: calc(.45 + (var(--s) - .7) * 1.6); }
/* la sphère : du verre rempli de miel ; le niveau monte à l'inspiration */
.orbe__sphere { --niveau: calc(28% + (var(--s) - .7) / .3 * 46%); position: relative; display: grid; place-items: center; width: 56%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; transform: scale(calc(.9 + (var(--s) - .7) * .35));
  background: radial-gradient(circle at 50% 38%, rgba(255, 250, 235, .10), rgba(255, 240, 210, .03) 55%, rgba(20, 12, 4, .35) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(1.3); backdrop-filter: blur(5px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 220, .38), inset 0 2px 1px rgba(255, 255, 255, .35), inset 0 -10px 28px rgba(255, 214, 140, .22), inset 0 14px 34px rgba(255, 255, 255, .08), 0 0 50px rgba(243, 210, 140, .28), 0 26px 60px rgba(0, 0, 0, .45); transition: box-shadow 1.2s; }
.orbe__miel { position: absolute; inset: 0; }
.orbe__vague { position: absolute; left: -50%; top: calc(100% - var(--niveau)); width: 200%; aspect-ratio: 1; border-radius: 43%; }
.orbe__vague--1 { background: linear-gradient(180deg, #ffcf6b 0%, #f2a52c 10%, #d4831a 32%, #9a560c 62%, #4e2a05 100%); box-shadow: inset 0 6px 10px rgba(255, 236, 170, .7); animation: tourne 9s linear infinite; }
.orbe__vague--2 { top: calc(100% - var(--niveau) - 2.5%); border-radius: 40%; background: rgba(255, 190, 70, .32); animation: tourne 13s linear infinite reverse; }
.orbe__miel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 92%, rgba(255, 214, 120, .55), transparent 70%), radial-gradient(circle at 50% 50%, transparent 55%, rgba(40, 20, 2, .45) 100%); }
.orbe__bulles { position: absolute; inset: 0; }
.orbe__bulles b { position: absolute; bottom: -8%; left: calc(22% + var(--k) * 13%); width: calc(4px + var(--k) * 1.5px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), rgba(255, 240, 200, .25) 60%, transparent 70%); box-shadow: 0 0 4px rgba(255, 240, 200, .6); animation: orbe-bulle calc(5s + var(--k) * 1.3s) ease-in infinite; animation-delay: calc(var(--k) * -1.7s); }
@keyframes orbe-bulle { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 70% { opacity: .7; } 100% { transform: translateY(calc(-1 * var(--niveau) - 4%)) translateX(6px); opacity: 0; } }
/* le verre : reflet brillant en haut, liseré et lumière réfractée en bas */
.orbe__verre { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse 34% 14% at 70% 86%, rgba(255, 240, 205, .45), transparent 70%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(255, 240, 210, .14) 70%, rgba(255, 255, 255, .28) 74%, transparent 76%); }
.orbe__verre::before { content: ''; position: absolute; top: 4%; left: 16%; width: 68%; height: 36%; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .12) 40%, rgba(255, 255, 255, 0) 70%); }
.orbe__verre::after { content: ''; position: absolute; top: 15%; left: 24%; width: 9%; height: 6%; border-radius: 50%; background: rgba(255, 255, 255, .95); filter: blur(1px); transform: rotate(-30deg); }
.orbe__mot { position: relative; z-index: 2; font: italic 700 clamp(18px, 2.4vh, 23px)/1.2 var(--serif); letter-spacing: .01em; color: #fff8e8; text-shadow: 0 1px 2px rgba(60, 30, 0, .7), 0 0 18px rgba(80, 40, 0, .55); }
.orbe__mot.est-neuf { animation: orbe-mot .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes orbe-mot { from { opacity: 0; filter: blur(4px); } }
.orbe--fini .orbe__sphere { box-shadow: inset 0 0 0 1px rgba(255, 244, 220, .55), inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -10px 30px rgba(255, 214, 140, .35), 0 0 80px rgba(255, 230, 170, .55), 0 0 200px rgba(243, 215, 150, .3), 0 26px 60px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .orbe__vague, .orbe__bulles b, .orbe__grains, .orbe__grains i { animation: none; } }


/* ============================================================
   « CE QUI VOUS MÈNE » (ce-qui-vous-mene.js) : ce qui s'ajoute aux écrans du parcours (pc-)
   pas d'ombre portée sur les images animées : Safari et Chrome la couperaient en rectangle
   ============================================================ */
.cm-promesse { position: relative; z-index: 1; }
.cm-legende { max-width: 560px; margin-top: 26px; font-size: 14px; text-align: center; }
.cm-flotte { position: absolute; right: clamp(16px, 5vw, 90px); bottom: 12%; width: clamp(110px, 11vw, 170px); transform: rotate(9deg); pointer-events: none; }
.cm-flotte::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 196, 94, .35), rgba(240, 196, 94, 0)); }
.cm-flotte img { position: relative; display: block; width: 100%; height: auto; animation: cm-flotte 8s ease-in-out infinite; }
@keyframes cm-flotte { 50% { transform: rotate(4deg) translateY(-14px); } }
/* l'éventail des 24 lames */
.cm-ecran-choix .pc-contenu { max-width: 1100px; }
.cm-eventail { position: relative; width: min(1060px, calc(100vw - 32px)); height: clamp(240px, 42vh, 420px); margin-top: 6px; }
.cm-eventail::before { content: ''; position: absolute; left: 50%; bottom: 6%; width: 80%; height: 60%; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(240, 196, 94, .22), rgba(240, 196, 94, 0)); }
.cm-eventail button { --l: clamp(56px, 8.6vw, 112px); position: absolute; left: 50%; bottom: 30%; width: var(--l); aspect-ratio: 458 / 700; margin-left: calc(var(--l) / -2); padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 260%; transform: rotate(var(--a)); animation: cm-deploie .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 25ms + .2s); transition: opacity .4s; }
@keyframes cm-deploie { from { transform: rotate(0deg) translateY(40px); opacity: 0; } }
.cm-eventail button img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.cm-eventail button:hover img, .cm-eventail button:focus-visible img { transform: translateY(-22px) scale(1.04); filter: brightness(1.12); }
.cm-eventail button:focus-visible { outline: none; }
.cm-eventail.choisi button { opacity: .12; }
.cm-eventail.choisi button.elue { z-index: 5; opacity: 1; }
.cm-eventail.choisi button.elue img { transform: translateY(-60px) scale(1.25); filter: brightness(1.15); }
.cm-indice { margin-top: -6px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-vif); animation: cm-indice 2.4s ease-in-out infinite; }
.cm-eventail.choisi + .cm-indice { opacity: 0; animation: none; }
@keyframes cm-indice { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
/* la lame qui se retourne */
.cm-lame { position: relative; width: 100%; max-width: 270px; margin: 0 auto; perspective: 1400px; }
.cm-lame::before { content: ''; position: absolute; inset: -18% -26%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(240, 196, 94, .35), rgba(240, 196, 94, 0)); }
.cm-carte { position: relative; aspect-ratio: 458 / 700; transform-style: preserve-3d; animation: cm-retourne 1.4s cubic-bezier(.2, .7, .2, 1) .4s both; }
@keyframes cm-retourne { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
.cm-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cm-carte__dos { transform: rotateY(180deg); }
/* le Fermier, en arche */
.cm-fermier { position: relative; max-width: 340px; margin: 0 auto; overflow: hidden; border-radius: 200px 200px 18px 18px; box-shadow: 0 0 0 1px rgba(255, 236, 200, .55), 0 0 0 8px rgba(13, 9, 6, .75), 0 0 0 9px rgba(224, 180, 90, .3), 0 0 60px rgba(224, 180, 90, .15), 0 40px 80px rgba(0, 0, 0, .7); }
.cm-fermier img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 900; object-fit: cover; }
.cm-fermier::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 8, 5, .85)); }
#pots .pc-pot.choisi { border-color: var(--or-vif); background: rgba(240, 196, 94, .16); box-shadow: 0 0 0 3px rgba(240, 196, 94, .25); }
/* la minute : le temps, et la lumière qui respire derrière l'orbe */
.cm-temps { margin-top: 10px; font: 700 22px/1 var(--serif); letter-spacing: .14em; color: #f6e3b4; opacity: .85; font-variant-numeric: tabular-nums lining-nums; }
.pc-ecran[data-ecran="souffle"]::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(243, 210, 140, .22), rgba(243, 210, 140, .06) 35%, transparent 62%); opacity: calc(.35 + (var(--s, .7) - .7) * 2.2); }
/* le bilan */
.cm-acquis { display: grid; gap: 12px; width: 100%; max-width: 560px; margin: 22px 0 0; padding: 0; list-style: none; text-align: left; }
.cm-acquis li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; background: rgba(20, 12, 5, .58); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .25); animation: monte .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * .12s + .2s); }
.cm-acquis__ok { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--or-vif); }
.cm-acquis__ok::after { content: ''; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #2a1806; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.cm-acquis b { display: block; color: #fff3dc; }
.cm-acquis span:not(.cm-acquis__ok) { font-size: 15px; color: rgba(255, 238, 210, .76); }
.cm-geste { width: 100%; max-width: 560px; margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: rgba(240, 196, 94, .12); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .4); text-align: left; }
.cm-geste__titre { margin-top: 4px; font: 900 21px/1.25 var(--serif); color: #fff3dc; }
.cm-geste p:not(.sur):not(.cm-geste__titre) { margin-top: 6px; font-size: 15.5px; color: rgba(255, 238, 210, .84); }
/* les trois Miels */
.cm-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 980px; margin-top: 28px; }
.cm-trio figure { margin: 0; padding: 20px 18px; border-radius: 22px; background: rgba(20, 12, 5, .62); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .25); }
.cm-trio img { width: auto; height: 130px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.cm-trio b { display: block; margin-top: 10px; font: 900 21px/1.2 var(--serif); color: #fff3dc; }
.cm-trio span { display: block; margin-top: 6px; font-size: 14.5px; color: rgba(255, 238, 210, .76); }
.cm-trio i { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(187, 77, 39, .28); font: 700 12px/1.3 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #ffb48a; }
.cm-trio__trois { box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .6), 0 0 40px rgba(240, 196, 94, .15) !important; }
.cm-trio__trois i { background: rgba(240, 196, 94, .2); color: var(--or-vif); }
/* la roue des 24 lames */
.cm-roue { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
.cm-roue__lames { position: absolute; inset: 0; animation: tourne 90s linear infinite; }
.cm-roue__lames img { position: absolute; left: 50%; top: 50%; width: 14%; height: auto; transform: translate(-50%, -50%) rotate(var(--r)) translateY(-152%); }
.cm-roue__coeur { position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(243, 223, 174, .55), rgba(224, 180, 90, .15) 45%, transparent 70%); animation: cm-respire 6s ease-in-out infinite; }
@keyframes cm-respire { 50% { transform: scale(1.12); opacity: .75; } }
/* les outils */
.cm-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 900px; margin-top: 26px; text-align: left; }
.cm-outil { display: block; padding: 16px 18px; border-radius: 18px; background: rgba(20, 12, 5, .6); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .25); color: inherit; text-decoration: none; transition: background .2s; }
.cm-outil:hover { background: rgba(240, 196, 94, .14); }
.cm-outil i { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(240, 196, 94, .18); font: 700 12px/1.3 var(--sans); font-style: normal; letter-spacing: .06em; color: var(--or-vif); }
.cm-outil b { display: block; margin-top: 8px; font: 900 18px/1.25 var(--serif); color: #fff3dc; }
.cm-outil span span, .cm-outil > span { display: block; margin-top: 4px; font-size: 14px; color: rgba(255, 238, 210, .74); }
.cm-outil--vedette { grid-column: 1 / -1; display: flex; gap: 18px; align-items: center; box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .55); }
.cm-outil--vedette img { flex: none; width: 180px; height: auto; border-radius: 10px; }
.cm-outil--vedette > span { margin-top: 0; }
/* les livres */
.cm-livres { display: flex; justify-content: center; gap: 22px; }
.cm-livres a { display: block; width: min(200px, 42%); }
.cm-livres a:nth-child(2) { margin-top: 40px; }
.cm-livres img { display: block; width: 100%; height: auto; border-radius: 6px; background: #000; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(240, 196, 94, .25); }
.cm-liens { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
.cm-liens a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(240, 196, 94, .5); font-weight: 600; color: #fff3dc; text-decoration: none; }
.cm-liens svg { width: 14px; height: 14px; }
/* la lettre, sur la nuit */
.cm-pile-gauche { width: 100%; max-width: 560px; text-align: left; }
.cm-offert { display: flex; gap: 16px; align-items: center; width: 100%; max-width: 560px; margin-top: 20px; padding: 14px; border-radius: 18px; background: rgba(240, 196, 94, .1); box-shadow: inset 0 0 0 1px rgba(240, 196, 94, .4); text-align: left; color: inherit; text-decoration: none; transition: background .2s; }
.cm-offert:hover { background: rgba(240, 196, 94, .18); }
.cm-offert img { flex: none; width: 120px; height: auto; border-radius: 8px; }
.cm-offert b { display: block; font: 900 17px/1.25 var(--serif); color: #fff3dc; }
.cm-offert span { font-size: 14px; color: rgba(255, 238, 210, .76); }
.cm-ou { margin-top: 18px; font: italic 700 16px/1.3 var(--serif); color: rgba(255, 238, 210, .7); }
.cm-lettre { width: 100%; max-width: 560px; text-align: left; }
.cm-lettre .lettre-form { margin-top: 10px; }
.cm-lettre .bouton { margin-top: 0; }
.cm-lettre .accord { color: rgba(255, 238, 210, .8); }
.cm-lettre .mentions { color: rgba(255, 238, 210, .55); }
.cm-lettre .mentions a { color: var(--or-vif); }
.cm-lettre .lettre-msg { color: var(--or-vif); }
/* le jeu imprimé */
.cm-jeu { position: relative; height: clamp(260px, 46vh, 440px); }
.cm-jeu img { position: absolute; top: 50%; left: 50%; width: clamp(120px, 15vw, 190px); height: auto; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .65)); }
.cm-jeu__1 { transform: translate(-95%, -52%) rotate(-12deg); }
.cm-jeu__2 { transform: translate(-5%, -46%) rotate(10deg); }
.cm-jeu__3 { z-index: 1; transform: translate(-50%, -56%) rotate(-1deg); }
@media (max-width: 860px) {
  .cm-flotte { display: none; }
  .cm-trio, .cm-outils { grid-template-columns: minmax(0, 1fr); }
  .cm-trio img { height: 100px; }
  .cm-outil--vedette { flex-direction: column; align-items: flex-start; }
  .cm-outil--vedette img { width: 100%; }
  .cm-eventail { height: 34vh; }
  .cm-eventail button { transform-origin: 50% 300%; bottom: 24%; }
  .cm-lame { max-width: 220px; }
  .cm-fermier { max-width: 240px; }
  .cm-roue { max-width: 300px; }
  .cm-jeu { height: 230px; }
  .cm-jeu img { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-flotte img, .cm-eventail button, .cm-carte, .cm-roue__lames, .cm-roue__coeur, .cm-acquis li, .cm-indice { animation: none; }
}


/* ============================================================
   MONROE (/monroe/) : le récit signé, sur les briques du Rucher (l'ouverture de nuit, la prose, l'encadré établi / rapporté)
   les pots gardent leur ombre : aucune animation sur les cartes qui les portent
   ============================================================ */
.monroe-haut { padding-bottom: clamp(100px, 14vh, 170px); }
.monroe-haut .rucher-haut__fond > img:first-child { left: 26%; width: 74%; object-position: 50% 40%; }
@media (max-width: 860px) {
  .monroe-haut .rucher-haut__fond > img:first-child { left: 0; width: 100%; object-position: 52% 40%; }
  /* sur téléphone, le texte passe sur l'image : un voile plus dense en haut (le logo) et sous le titre */
  .monroe-haut .rucher-haut__fond::after { background: linear-gradient(180deg, rgba(20, 12, 5, .82), rgba(20, 12, 5, .45) 22%, rgba(20, 12, 5, .62) 50%, rgba(20, 12, 5, .94)); }
}
.monroe-haut h1 { max-width: 15ch; font-size: clamp(38px, 3vw + 22px, 76px); line-height: 1.04; }
.monroe-haut .lead { max-width: 500px; }
.monroe-signe { margin-top: 28px; color: rgba(255, 238, 210, .72); }
.monroe-signe b { color: #fff3dc; }
.monroe-signe img { box-shadow: 0 0 0 2px rgba(20, 12, 5, .6), 0 0 0 3.5px var(--or-vif); }
.monroe-col { max-width: calc(720px + 2 * var(--gouttiere)); }
.monroe-col.prose > h2:first-child { margin-top: 0; }
.monroe-texte:first-child { padding-top: clamp(96px, 8vw + 50px, 150px); }
.monroe-image { margin: 1.8em 0; }
.monroe-image img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: var(--ombre-forte); }
.monroe-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px 0; pointer-events: none; }
/* les trois Miels */
.monroe-miels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 40px auto 0; }
.monroe-miel { padding: 28px 22px 26px; border-radius: 22px; background: var(--blanc); box-shadow: var(--ombre); text-align: center; }
.monroe-miel img { display: block; width: auto; height: 150px; margin: 0 auto; filter: drop-shadow(0 14px 16px rgba(58, 38, 17, .28)); }
.monroe-miel h3 { margin-top: 16px; font: 900 22px/1.2 var(--serif); color: var(--brun); }
.monroe-miel__sous { margin-top: 2px; font: italic 700 15px/1.4 var(--serif); color: var(--or-txt); }
.monroe-miel p:not(.monroe-miel__sous) { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--doux); }
.monroe-miel__statut { display: inline-block; margin-top: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(187, 77, 39, .12); font: 700 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--braise-h); }
.monroe-miel--trois { background: linear-gradient(165deg, #fffaf0, #f7e7c2); box-shadow: 0 0 0 1.5px var(--or), var(--ombre-forte); }
.monroe-miel--trois .monroe-miel__statut { background: var(--or); color: var(--brun); }
/* le jeu, la fin */
.monroe-jeu__lead { margin-top: 14px; }
.monroe-vue { margin-top: 20px; font: italic 700 17px/1.5 var(--serif); color: var(--brun); }
.monroe-suite { justify-content: flex-start; margin-top: 26px; }
.monroe-fin { margin-top: 1.6em; }
.monroe-transparence { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--doux); }
@media (max-width: 860px) {
  .monroe-miels { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .monroe-miel { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 18px; align-items: center; padding: 20px; text-align: left; }
  .monroe-miel img { grid-row: 1 / 5; height: auto; width: 92px; }
  .monroe-miel h3 { margin-top: 0; }
  .monroe-miel__statut { justify-self: start; margin-top: 10px; }
}
@media (max-width: 640px) {
  .monroe-scenes { grid-template-columns: minmax(0, 1fr); }
  .monroe-haut h1 { font-size: clamp(34px, 8.4vw, 44px); }
}

/* ============================================================
   L'ACCUEIL SINGULIER (1er novembre) : la Ferme de nuit et l'anneau des 24 lames (carte-du-jour.js),
   la carte du jour, la trilogie, les trois Miels, écouter et lire, jouer
   ============================================================ */
.jour__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "titre roue" "suite roue"; column-gap: clamp(24px, 4vw, 64px); align-items: center; }
.jour__titre { grid-area: titre; align-self: end; }
.jour__suite { grid-area: suite; align-self: start; }
.jour__roue { grid-area: roue; position: relative; }
.jour .ferme__texte { max-width: 560px; }
.jour h1 { font-size: clamp(38px, 2.9vw + 20px, 66px); }
.jour .lead { margin-top: 18px; max-width: 470px; text-shadow: 0 1px 3px rgba(20, 12, 5, .9), 0 2px 18px rgba(20, 12, 5, .85); }
.jour__invite { margin-top: 2px; text-align: center; font: 600 15px/1.4 var(--sans); color: rgba(255, 238, 210, .86); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); animation: monte 1s .5s cubic-bezier(.2, .7, .2, 1) both; }
.jour__invite b { color: var(--or-vif); }
.jour__invite a { color: var(--or-vif); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(240, 196, 94, .6); }
.jour__invite a::after { content: ' ↓'; }
.jour-lame { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jour-lame .roue-lame__in, .jour-lame .roue-lame__dos, .jour-lame .roue-lame__face { display: block; }
.jour-lame:focus { outline: none; }
.jour-lame img { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.jour-lame:focus-visible img { filter: brightness(1.1) drop-shadow(0 0 9px rgba(240, 196, 94, .95)); }
.jour-tore--choisi .jour-lame:not(.jour-lame--choisie) { cursor: default; }
.jour-tore--choisi .jour-lame:not(.jour-lame--choisie) img { filter: brightness(.4) saturate(.7); }
.jour-lame--choisie img { filter: drop-shadow(0 0 16px rgba(240, 196, 94, .6)) drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
.jour-tore--choisi .roue-lune { transform: scale(1.7); }
/* la peinture du premier site (3 novembre) : carte-du-jour.js la cale pour que l'anneau entoure la Noire et la Blanche ;
   ses bords se fondent dans la nuit quand elle ne couvre pas tout le haut de page */
.lunes__peinture { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect; }
.lunes__peinture.est-calee { opacity: 1; }
.lunes__voile { background:
  linear-gradient(180deg, rgba(20, 12, 5, .55) 0%, rgba(20, 12, 5, 0) 16%),
  linear-gradient(0deg, rgba(20, 12, 5, .95) 0%, rgba(20, 12, 5, 0) 26%),
  linear-gradient(90deg, rgba(20, 12, 5, .82) 0%, rgba(20, 12, 5, .6) 26%, rgba(20, 12, 5, .12) 46%, rgba(20, 12, 5, 0) 56%); }
.jour .roue-halo, .jour .roue-lune { display: none; }
/* téléphones et tablettes : l'anneau d'abord, posé sur la peinture, puis le titre (comme sur le premier site) */
@media (max-width: 960px) {
  .ferme.jour { padding-top: calc(var(--entete) + 4px); }
  .jour .ferme__ciel { height: calc(var(--entete) + 64svh); }
  .jour__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "roue" "titre" "suite"; row-gap: 6px; }
  .jour__titre, .jour__suite { align-self: auto; }
  .jour__titre { margin-top: 18px; }
  .jour h1 { font-size: clamp(32px, 6.5vw + 8px, 50px); }
  .jour__roue { width: min(100%, 540px); margin: 0 auto; }
  .lunes__voile { background: linear-gradient(180deg, rgba(20, 12, 5, .5) 0%, rgba(20, 12, 5, 0) 18%, rgba(20, 12, 5, 0) 62%, rgba(20, 12, 5, .9) 88%, #140c05 97%); }
}

/* la carte du jour */
.jour-carte { position: relative; z-index: 2; scroll-margin-top: var(--entete); padding: clamp(56px, 8vw, 96px) 0; background: var(--creme); }
.jour-carte__in { display: grid; grid-template-columns: minmax(150px, 250px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; max-width: 980px; }
.jour-carte__lame { margin: 0; }
.jour-carte__lame img { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(58, 38, 17, .28)); }
.jour-carte__texte .h2 { margin-top: 8px; }
.jour-carte__roman { margin-top: 4px; font: 700 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-txt); }
.jour-carte__dit { margin-top: 18px; }
.jour-carte__dit p + p { margin-top: 10px; }
.jour-carte__question { margin-top: 22px; padding: 16px 20px; border-left: 3px solid var(--or); border-radius: 0 14px 14px 0; background: var(--miel); }
.jour-carte__question[hidden], .jour-carte__fermier[hidden] { display: none; }
.jour-carte__question span { display: block; font: 700 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.jour-carte__question em { display: block; margin-top: 6px; font: italic 700 19px/1.4 var(--serif); color: var(--brun); }
.jour-carte__fermier { display: flex; gap: 16px; align-items: center; margin-top: 18px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); color: var(--texte); text-decoration: none; font-size: 15px; transition: box-shadow .25s; }
.jour-carte__fermier:hover { box-shadow: var(--ombre-forte); }
.jour-carte__fermier img { flex: none; width: 62px; height: 84px; object-fit: cover; border-radius: 10px; }
.jour-carte__fermier small { display: block; margin-bottom: 2px; font: 700 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--braise); }
.jour-carte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.jour-carte__actions .bouton svg { width: 18px; height: 18px; }
.jour-carte__note { min-height: 1.4em; margin-top: 10px; }
@media (max-width: 700px) {
  .jour-carte__in { grid-template-columns: minmax(0, 1fr); }
  .jour-carte__lame { width: 150px; margin: 0 auto; }
}

/* la trilogie, de nuit */
.accueil-univers { position: relative; isolation: isolate; overflow: hidden; padding: clamp(84px, 11vw, 140px) 0; background: radial-gradient(70% 55% at 50% 0%, rgba(240, 196, 94, .16), rgba(240, 196, 94, 0) 70%), var(--nuit-1); color: rgba(255, 238, 210, .84); }
.accueil-univers::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(../../images/decor/alveoles.svg) center / 480px repeat; opacity: .05; }
.accueil-univers h2 { margin: 0; }
.accueil-univers__logo { width: min(520px, 82vw); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); }
.accueil-univers__sous { margin-top: 4px; font: 700 13px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #f0d9a8; }
.accueil-univers__citation { max-width: 640px; margin: clamp(30px, 4vw, 46px) auto 0; font: italic 900 clamp(24px, 1.6vw + 16px, 34px)/1.3 var(--serif); color: #fff3dc; }
.accueil-univers__citation cite { display: block; margin-top: 12px; font: 700 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-vif); }
.accueil-univers__texte { max-width: 640px; margin: 30px auto 0; text-align: left; }
.accueil-univers__texte p + p { margin-top: 14px; }
.accueil-univers__texte em { color: #fff3dc; }
.accueil-univers__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 34px; }
.accueil-univers .lien-fleche { color: #fff3dc; border-bottom-color: rgba(240, 196, 94, .7); }

/* les trois Miels, écouter et lire, jouer */
.accueil-miels__suite { flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.accueil-ecouter__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); max-width: 1080px; margin: clamp(32px, 4vw, 48px) auto 0; align-items: stretch; }
.accueil-podcast { display: flex; gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: var(--rayon); background: radial-gradient(80% 70% at 85% 0%, rgba(240, 196, 94, .25), rgba(240, 196, 94, 0) 70%), var(--nuit); color: rgba(255, 238, 210, .8); text-decoration: none; box-shadow: var(--ombre-forte); transition: transform .3s; }
.accueil-podcast:hover { transform: translateY(-3px); }
.accueil-podcast__pochette { position: relative; flex: none; width: clamp(120px, 14vw, 170px); aspect-ratio: 1; }
.accueil-podcast__disque { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; animation: tourne 80s linear infinite; }
.accueil-podcast__livre { position: absolute; left: 24%; top: 6%; width: 52%; height: auto; border-radius: 4px; background: #000; box-shadow: 0 14px 24px rgba(0, 0, 0, .45); }
.accueil-podcast__texte { display: flex; flex-direction: column; gap: 8px; }
.accueil-podcast__texte .sur { display: flex; align-items: center; gap: 8px; color: var(--or-vif); }
.accueil-podcast__texte .sur svg { width: 18px; height: 18px; }
.accueil-podcast b { font: 900 clamp(22px, 1.2vw + 14px, 28px)/1.2 var(--serif); color: #fff3dc; }
.accueil-podcast .lien-fleche { align-self: flex-start; margin-top: 4px; font-style: normal; color: #fff3dc; }
.accueil-livres { padding: clamp(22px, 3vw, 34px); border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); }
.accueil-livres__couvertures { display: flex; gap: 12px; margin-bottom: 18px; }
.accueil-livres__couvertures a { flex: 1; max-width: 104px; }
.accueil-livres__couvertures img { width: 100%; height: auto; border-radius: 4px; background: #000; box-shadow: 0 10px 18px rgba(58, 38, 17, .25); transition: transform .3s; }
.accueil-livres__couvertures a:hover img { transform: translateY(-4px); }
.accueil-livres p + p { margin-top: 8px; }
.accueil-livres__liens { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; }
.accueil-jouer .exp-jeux { margin-top: clamp(32px, 4vw, 48px); }
.accueil-jouer__plus { margin-top: 28px; text-align: center; color: var(--doux); }
@media (max-width: 860px) { .accueil-ecouter__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .accueil-podcast { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   LA PAGE DU COFFRET (4 novembre) : la page de vente des pubs, /le-coffret/.
   Un seul chemin (« sobre » dans son en-tête JSON : ni menu ni lien de sortie), une seule offre, en clair et chaud.
   ============================================================ */
.entete--sobre .entete__in { justify-content: space-between; }
.entete__info { font: 600 14px/1.3 var(--sans); color: var(--doux); }
.pied--sobre { padding: 40px 0 24px; text-align: center; }
.pied--sobre .pied__devise { font: italic 700 19px/1.4 var(--serif); color: var(--brun); }
.pied--sobre .pied__petit { max-width: 640px; margin: 10px auto 0; }
.pied__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 16px; font-size: 14px; }
.pied--sobre .pied__bas { margin-top: 18px; padding-top: 14px; }
@media (max-width: 760px) { .entete__info, .entete--sobre .bouton { display: none; } }
.page-coffret .barre-achat .bouton { flex: none; white-space: nowrap; }

/* le haut : un arc de la roue, au-dessus du titre. 15° par lame et rayon intérieur = 1,39 × la hauteur d'une lame, comme sur la roue des 24 ;
   le titre commence sous le coin des deux lames du bout (rayon × (1 − cos 52,5°) = 0,39 rayon) */
.cof-haut { --l: clamp(92px, min(10.5vw, 16svh), 168px); --h: calc(var(--l) * 1.528); --ri: calc(var(--h) * 1.39); position: relative; overflow: hidden; padding: calc(var(--entete) + 16px + var(--h) + var(--ri) * .39) 0 clamp(44px, 6vw, 72px); text-align: center; background: radial-gradient(62% 58% at 50% 8%, rgba(240, 196, 94, .6), rgba(240, 196, 94, 0) 72%), var(--creme); }
.cof-arc { position: absolute; left: 50%; top: calc(var(--entete) + 10px + var(--h) + var(--ri)); width: 0; height: 0; }
.cof-arc img { position: absolute; left: calc(var(--l) / -2); top: calc(var(--h) / -2); width: var(--l); height: var(--h); max-width: none; transform: rotate(calc(var(--i) * 15deg)) translateY(calc(-1 * (var(--ri) + var(--h) / 2))); filter: drop-shadow(0 8px 10px rgba(58, 38, 17, .28)); animation: cof-deploie 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--r) * .09s); }
@keyframes cof-deploie { from { opacity: 0; transform: rotate(0deg) translateY(calc(-1 * (var(--ri) + var(--h) / 2 - 24px))); } }
@media (prefers-reduced-motion: reduce) { .cof-arc img { animation: none; } }
.cof-haut__in { position: relative; max-width: 860px; }
.cof-haut h1 { font-size: clamp(34px, 3vw + 18px, 62px); }
.cof-haut h1 em { display: block; }
.cof-haut .lead { max-width: 640px; margin: 18px auto 0; }
.cof-haut .bouton { margin-top: 26px; }
.cof-haut .rassure { justify-content: center; margin-top: 18px; }

/* trois chiffres */
.cof-chiffres { padding: clamp(28px, 4vw, 44px) 0; background: var(--blanc); border-block: 1px solid var(--filet); }
.cof-chiffres ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); text-align: center; }
.cof-chiffres b { display: block; font: 900 clamp(26px, 1.4vw + 20px, 36px)/1.1 var(--serif); color: var(--braise); }
.cof-chiffres span { display: block; max-width: 280px; margin: 8px auto 0; font-size: 15.5px; line-height: 1.45; color: var(--doux); }

/* le carrousel des lames */
.cof-piste { display: flex; gap: 18px; margin-top: 30px; padding: 12px max(var(--gouttiere), calc((100vw - 1120px) / 2)) 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gouttiere), calc((100vw - 1120px) / 2)); scrollbar-width: none; }
.cof-piste::-webkit-scrollbar { display: none; }
.cof-lame { flex: 0 0 min(300px, 78vw); display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); scroll-snap-align: start; }
.cof-lame img { width: 150px; margin: 0 auto 14px; filter: drop-shadow(0 8px 10px rgba(58, 38, 17, .22)); }
.cof-lame h3 { font: 900 22px/1.2 var(--serif); color: var(--brun); }
.cof-lame p { margin-top: 6px; font-size: 15.5px; line-height: 1.45; }
.cof-lame .cof-lame__q { flex: 1; margin-top: 12px; font: italic 700 17px/1.4 var(--serif); color: var(--brun); }
.cof-lame .cof-lame__geste { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); font-weight: 600; font-size: 14px; color: var(--or-txt); }
.cof-piste__nav { display: flex; align-items: center; gap: 16px; max-width: 520px; }
.cof-piste__fil { flex: 1; height: 4px; border-radius: 4px; background: var(--filet); overflow: hidden; }
.cof-piste__fil span { display: block; height: 100%; border-radius: 4px; background: var(--or-fonce); }
.cof-fleche { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--filet-2); border-radius: 50%; background: var(--blanc); color: var(--brun); cursor: pointer; }
.cof-fleche:disabled { opacity: .35; cursor: default; }
.cof-fleche svg { width: 18px; height: 18px; }
#cofPrec svg { transform: rotate(180deg); }

/* les lignes qui descendent, une idée à la fois */
.cof-marches { margin-top: 26px; text-align: center; font-size: clamp(18px, .4vw + 16.5px, 20px); line-height: 1.5; }
.cof-marches p + p { margin-top: 14px; }
.cof-marches__voix { font: italic 700 clamp(21px, 1vw + 17px, 27px)/1.35 var(--serif); color: var(--brun); }
.cof-marches__fort { font: 900 clamp(22px, 1vw + 18px, 28px)/1.3 var(--serif); color: var(--brun); }

/* ceci contre cela */
.cof-face { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); max-width: 980px; margin: clamp(32px, 4vw, 48px) auto 0; }
.cof-face__g, .cof-face__d { padding: clamp(22px, 3vw, 34px); border-radius: var(--rayon); }
.cof-face__g { background: var(--creme-2); color: var(--doux); }
.cof-face__d { background: var(--blanc); border: 2px solid var(--or); box-shadow: var(--ombre-forte); }
.cof-face__titre { font: 700 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.cof-face__d .cof-face__titre { color: var(--or-txt); }
.cof-face__contre { position: absolute; left: 50%; top: 92px; z-index: 2; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--brun); color: #fff; font: 700 13px/1.2 var(--sans); }
.cof-messages { display: flex; flex-wrap: wrap; gap: 8px; min-height: 176px; align-content: center; margin-top: 16px; }
.cof-messages span { padding: 9px 14px; border-radius: 12px; background: rgba(255, 253, 249, .75); font: italic 700 15.5px/1.3 var(--serif); opacity: .72; }
.cof-messages span:nth-child(odd) { transform: rotate(-1.5deg); }
.cof-messages span:nth-child(even) { transform: rotate(1.2deg); opacity: .55; }
.cof-face__lame { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 176px; margin-top: 16px; }
.cof-face__lame img { filter: drop-shadow(0 8px 10px rgba(58, 38, 17, .22)); }
.cof-face__lame p { font-size: 15px; line-height: 1.4; }
.cof-face__lame b { display: block; font: 900 20px/1.2 var(--serif); color: var(--brun); }
.cof-face__lame em { display: block; margin-top: 8px; font: italic 700 16px/1.35 var(--serif); color: var(--brun); }
.cof-face ul { margin-top: 18px; }
.cof-face li { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 16px; line-height: 1.4; }
.cof-face__d li { color: var(--brun); font-weight: 500; }
.cof-face li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.cof-face__d li svg { color: var(--braise); }

/* les 24 lames, les trois miels */
.cof-grille { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px) clamp(8px, 1.2vw, 16px); margin-top: clamp(30px, 4vw, 44px); }
.cof-grille li { text-align: center; }
.cof-grille img { width: 100%; filter: drop-shadow(0 6px 8px rgba(58, 38, 17, .22)); }
.cof-grille span { display: block; margin-top: 6px; font: 700 13.5px/1.2 var(--serif); color: var(--brun); }
.cof-sous { margin-top: clamp(44px, 5vw, 64px); text-align: center; font: 900 clamp(24px, 1.2vw + 19px, 32px)/1.2 var(--serif); color: var(--brun); }
.cof-miels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); max-width: 920px; margin: 24px auto 0; text-align: center; }
.cof-miels img { width: 100%; height: 160px; object-fit: contain; }
.cof-miels b { display: block; margin-top: 10px; font: 900 20px/1.2 var(--serif); color: var(--brun); }
.cof-miels span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.45; }
.cof-histoire { max-width: 660px; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; }

/* l'essai, sous « imaginez » */
.page-coffret .essai { margin-top: clamp(36px, 4vw, 52px); }

/* ce que vous recevez */
.cof-contenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: clamp(30px, 4vw, 44px) auto 0; counter-reset: cof; }
.cof-contenu li { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); counter-increment: cof; }
.cof-contenu img { width: 108px; height: 124px; object-fit: cover; border-radius: 12px; }
.cof-contenu__icone { width: 108px; height: 124px; display: grid; place-items: center; border-radius: 12px; background: var(--miel); color: var(--or-fonce); }
.cof-contenu__icone svg { width: 40px; height: 40px; }
.cof-contenu b { display: block; font: 900 19px/1.25 var(--serif); color: var(--brun); }
.cof-contenu b::before { content: counter(cof) ' · '; color: var(--braise); }
.cof-contenu p { margin-top: 5px; font-size: 15.5px; line-height: 1.45; }
.cof-suite { margin-top: clamp(28px, 3vw, 40px); }

/* l'offre */
.cof-offre { max-width: 620px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--blanc); box-shadow: var(--ombre-forte); text-align: center; }
.cof-offre__boite { width: min(210px, 56%); margin: 0 auto 14px; border-radius: 14px; }
.cof-pile { margin-top: 18px; text-align: left; }
.cof-pile li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 16px; line-height: 1.35; color: var(--brun); }
.cof-pile svg { width: 18px; height: 18px; align-self: center; color: var(--braise); }
.cof-pile b { font-weight: 600; font-size: 15px; color: var(--doux); white-space: nowrap; }
.cof-offre__separe { margin-top: 18px; color: var(--doux); }
.cof-offre__prix { margin-top: 8px; }
.cof-offre__prix small { display: block; font: 700 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.cof-offre__prix b { display: block; font: 900 clamp(60px, 4vw + 40px, 84px)/1.05 var(--serif); color: var(--braise); }
.cof-offre__par { margin: 6px auto 20px; max-width: 460px; font-size: 15.5px; line-height: 1.45; }
.cof-offre .rassure { justify-content: center; margin-top: 16px; }
.cof-offre__note { margin-top: 12px; }
.cof-offre__cadeau { display: flex; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--miel); text-align: left; font-size: 15px; line-height: 1.45; }
.cof-offre__cadeau svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--braise); }
.cof-offre__cadeau b { color: var(--brun); }

/* fait pour vous, en résumé, les questions, la fin */
.cof-pourqui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: clamp(28px, 4vw, 40px) auto 0; }
.cof-pourqui li { padding: 22px 24px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); }
.cof-pourqui b { display: block; font: 900 20px/1.25 var(--serif); color: var(--brun); }
.cof-pourqui span { display: block; margin-top: 6px; }
.cof-resume { max-width: 620px; margin: 0 auto; text-align: center; }
.cof-resume .pile { margin-top: 20px; text-align: left; }
.cof-resume__prix { margin: 16px 0 14px; font: 900 44px/1.1 var(--serif); color: var(--braise); }
.cof-faq { margin-top: clamp(26px, 3vw, 36px); }
.cof-fin { text-align: center; }
.cof-fin__rappel { display: inline-block; margin: 28px 0 22px; padding: 16px 22px; border-radius: 14px; background: rgba(255, 253, 249, .75); text-align: left; }
.cof-fin__rappel li { display: flex; gap: 10px; align-items: center; margin-top: 6px; color: var(--brun); font-weight: 500; }
.cof-fin__rappel li:first-child { margin-top: 0; }
.cof-fin__rappel svg { flex: none; width: 18px; height: 18px; color: var(--braise); }
.page-coffret .pied--sobre { padding-bottom: calc(24px + 74px); }
@media (min-width: 961px) { .page-coffret .pied--sobre { padding-bottom: 24px; } }

@media (max-width: 860px) {
  .cof-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cof-contenu { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .cof-chiffres ul { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cof-face { grid-template-columns: minmax(0, 1fr); }
  .cof-face__contre { position: static; justify-self: center; transform: none; margin: -4px 0; }
  .cof-messages, .cof-face__lame { min-height: 0; }
  .cof-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cof-miels { grid-template-columns: minmax(0, 1fr); }
  .cof-miels li { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; text-align: left; align-items: center; }
  .cof-miels img { grid-row: span 2; height: 96px; }
  .cof-miels b { margin-top: 0; align-self: end; }
  .cof-miels span { margin-top: 2px; align-self: start; }
  .cof-pourqui { grid-template-columns: minmax(0, 1fr); }
  .cof-haut .rassure { flex-direction: column; align-items: center; gap: 6px; }
}

/* ============================================================
   LE GUIDE : Je bloque, en bas à droite (assets/js/guide.js)
   Préfixe gd-. Au-dessus de la barre d'achat, sous l'en-tête et son menu ; le panneau passe devant le bandeau des cookies.
   ============================================================ */
.gd[hidden] { display: none; }
.gd-lanceur { position: fixed; right: max(4px, env(safe-area-inset-right)); bottom: calc(var(--gd-bas, 0px) + env(safe-area-inset-bottom)); z-index: 46; width: 118px; padding: 14px 12px 0; border: 0; background: none; cursor: pointer; transition: translate .25s; -webkit-tap-highlight-color: transparent; }
.gd-lanceur:hover { translate: 0 -5px; }
.gd-lanceur:focus-visible { outline: 3px solid var(--or-fonce); outline-offset: -4px; border-radius: 16px; }
.gd-lanceur img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 9px rgba(255, 214, 130, .55)) drop-shadow(0 6px 10px rgba(30, 18, 6, .35)); }
.gd-lueur { position: absolute; left: 59%; top: 8%; width: 42%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 196, 92, .75), rgba(255, 170, 60, .28) 42%, transparent 70%); animation: gd-lueur 2.6s ease-in-out infinite; }
@keyframes gd-lueur { 0%, 100% { opacity: .5; } 45% { opacity: 1; } 62% { opacity: .72; } 78% { opacity: .95; } }
.gd-bulle { position: absolute; right: 88%; top: 36%; padding: 8px 13px; border-radius: 14px 14px 3px 14px; background: var(--blanc); box-shadow: 0 0 0 1px var(--filet-2), 0 10px 24px -10px rgba(58, 38, 17, .55); font: 600 14px/1.2 var(--sans); color: var(--brun); white-space: nowrap; animation: gd-bulle .35s ease-out; }
.gd-bulle[hidden] { display: none; }
@keyframes gd-bulle { from { opacity: 0; translate: 6px 0; } }
.gd.est-ouvert .gd-lanceur { visibility: hidden; }

.gd-panneau { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; width: min(392px, calc(100vw - 32px)); height: min(640px, calc(100vh - var(--entete) - 32px)); height: min(640px, calc(100dvh - var(--entete) - 32px)); overflow: hidden; border-radius: 22px; background: var(--creme); box-shadow: 0 0 0 1px rgba(184, 134, 47, .45), 0 34px 80px -24px rgba(30, 18, 6, .7); font: 15px/1.5 var(--sans); color: var(--texte); }
.gd-panneau[hidden] { display: none; }

.gd-tete { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; background: var(--nuit-1); color: #f6e7c8; }
.gd-visage { flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 60% 30%, #4a3214, #1c1208); box-shadow: 0 0 0 1px rgba(240, 196, 94, .6); }
.gd-visage img { display: block; width: 100%; height: auto; margin-top: 2px; }
.gd-tete p { flex: 1; min-width: 0; margin: 0; }
.gd-tete b { display: block; font: 700 18px/1.15 var(--serif); color: var(--or-vif); }
.gd-tete small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.25; color: #d9c5a0; }
.gd-fermer { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #f6e7c8; font: 400 28px/1 var(--sans); cursor: pointer; }
.gd-fermer:hover { background: rgba(255, 255, 255, .1); }
.gd-fermer:focus-visible { outline: 2px solid var(--or-vif); outline-offset: -3px; }

.gd-fil { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 10px; }
.gd-fil:focus { outline: none; }
.gd-msg { flex: none; max-width: 88%; margin: 0; padding: 10px 13px; animation: gd-msg .22s ease-out; overflow-wrap: anywhere; }
@keyframes gd-msg { from { opacity: 0; translate: 0 6px; } }
.gd-msg--lui { align-self: flex-start; border-radius: 4px 16px 16px 16px; background: var(--blanc); box-shadow: 0 0 0 1px var(--filet); }
.gd-msg--vous { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: var(--brun); color: #fff3dc; }
.gd-points { display: flex; gap: 5px; padding: 14px 15px; }
.gd-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--or-fonce); animation: gd-point 1s infinite; }
.gd-points i:nth-child(2) { animation-delay: .15s; }
.gd-points i:nth-child(3) { animation-delay: .3s; }
@keyframes gd-point { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.gd-choix { flex: 0 0 auto; max-height: 56%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 4px 14px 12px; }
.gd-choix:empty { display: none; }
.gd-option { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 15px; border: 1.5px solid var(--or-fonce); border-radius: 999px; background: var(--blanc); color: var(--brun); font: 600 14.5px/1.25 var(--sans); text-align: left; text-decoration: none; cursor: pointer; transition: background .15s; }
.gd-option:hover { background: var(--miel-2); }
.gd-option:focus-visible, .gd-envoi:focus-visible { outline: 3px solid var(--or-fonce); outline-offset: 2px; }
.gd-option--lien::after { content: '→'; margin-left: 8px; }
.gd-option--fort { border-color: var(--braise); background: var(--braise); color: #fff; }
.gd-option--fort:hover { border-color: var(--braise-h); background: var(--braise-h); }

.gd-form-prenom, .gd-lettre { width: 100%; margin: 0; }
.gd-form-prenom { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gd-ligne { display: flex; gap: 8px; width: 100%; }
.gd-ligne input { flex: 1; min-width: 0; height: 46px; padding: 0 13px; border: 1.5px solid var(--filet-2); border-radius: 12px; background: #fff; color: var(--encre); font: 500 16px/1 var(--sans); }
.gd-ligne input:focus { outline: none; border-color: var(--or-fonce); box-shadow: 0 0 0 3px rgba(224, 180, 90, .32); }
.gd-envoi { flex: none; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--braise); color: #fff; font: 600 14.5px/1 var(--sans); cursor: pointer; }
.gd-envoi:hover { background: var(--braise-h); }
.gd-envoi:disabled { opacity: .6; cursor: default; }
.gd-note { align-self: stretch; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--doux); }
.gd-lettre .accord { margin-top: 10px; font-size: 13.5px; line-height: 1.4; }
.gd-lettre .mentions { margin-top: 8px; font-size: 11.5px; line-height: 1.45; }
.gd-joint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--doux); }
.gd-joint[hidden] { display: none; }
.gd-joint button { padding: 0; border: 0; background: none; color: var(--brun); font: 600 12.5px/1.4 var(--sans); text-decoration: underline; cursor: pointer; }
.gd-lettre .lettre-msg { margin-top: 8px; font-size: 14px; }

.gd-pied { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filet); background: var(--creme-2); font-size: 12.5px; }
.gd-pied a, .gd-pied button { min-height: 28px; padding: 0; border: 0; background: none; color: var(--brun); font: 500 12.5px/28px var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gd-pied button[hidden] { display: none; }

@media (max-width: 640px) {
  .gd-lanceur { width: 96px; padding: 10px 8px 0; }
  .gd-panneau { left: 0; right: 0; bottom: 0; width: 100%; height: 84vh; height: 84dvh; border-radius: 22px 22px 0 0; }
  .gd-choix { max-height: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-lueur, .gd-msg, .gd-bulle, .gd-points i { animation: none; }
  .gd-lanceur { transition: none; }
}
@media print { .gd { display: none; } }