/* =========================================================
   Les jardins de Busy · feuille de styles
   Palette tirée du logo : panier terracotta, blé, maïs, rose, salade, radis
   ========================================================= */
:root{
  --paper:#F5EFE3; --paper-2:#ECE3D0; --paper-3:#E2D7BF;
  --ink:#14231A; --ink-soft:#3D4B41;
  --forest:#0F1F16; --forest-2:#172E21; --forest-3:#21402E;
  --terracotta:#D4694A; --terracotta-d:#B9512F;
  --corn:#E5AE38; --wheat:#CDBF7A; --rose:#D46BA8; --radish:#9A62B8; --leaf:#6FAE5E;
  --cream:#FBF7EE;
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:"Caveat", "Bradley Hand", cursive;
  --r-lg:28px; --r-md:20px; --r-sm:12px;
  --gutter:clamp(18px, 4vw, 48px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --shadow:0 1px 2px rgba(20,35,26,.06), 0 12px 32px -12px rgba(20,35,26,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:clamp(17px, 1.05vw + 13px, 19px); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,video,svg{display:block; max-width:100%}
img{height:auto}
h1,h2,h3,p,ol,ul,blockquote,fieldset{margin:0; padding:0; border:0}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
em{font-style:italic}
::selection{background:var(--terracotta); color:var(--cream)}
:focus-visible{outline:3px solid var(--corn); outline-offset:3px; border-radius:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip{position:fixed; left:12px; top:-60px; z-index:100; background:var(--cream); padding:10px 16px; border-radius:10px; transition:top .2s}
.skip:focus{top:12px}
.wrap{width:min(1240px, 100%); margin-inline:auto; padding-inline:var(--gutter)}
.ico{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.hand{font-family:var(--hand); font-size:1.55em; line-height:1.15; color:var(--terracotta-d)}
.c-wheat{color:var(--wheat)} .c-terracotta{color:var(--terracotta)} .c-radish{color:var(--radish)} .c-leaf{color:var(--leaf)}

/* ---------- Titres ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:400; font-variation-settings:"SOFT" 60, "opsz" 144; letter-spacing:-.025em; line-height:1.02; text-wrap:balance}
h2{font-size:clamp(2.2rem, 5.6vw, 4.6rem)}
h2 em, h1 em, .story-line em{color:var(--terracotta); font-variation-settings:"SOFT" 100, "opsz" 144}
h3{font-size:clamp(1.45rem, 2.2vw, 2rem); line-height:1.1}
.kicker{font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta-d); margin-bottom:18px}
.sub{font-size:1.12em; color:var(--ink-soft); max-width:60ch; margin-top:22px; text-wrap:pretty}
.section{padding-block:clamp(80px, 11vw, 168px)}
.section-head{margin-bottom:clamp(36px, 5vw, 72px)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:52px; padding:.8em 1.5em; border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none; white-space:nowrap; transition:transform .35s var(--ease), background .25s, color .25s, box-shadow .25s}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)}
.btn .ico{transition:transform .35s var(--ease)} .btn:hover .ico{transform:translateX(4px)}
.btn-sm{min-height:44px; padding:.5em 1.15em; font-size:.92rem}
.btn-lg{min-height:60px; padding:.9em 1.8em; font-size:1.06rem}
.btn-terracotta{background:var(--terracotta); color:#fff; box-shadow:0 10px 30px -10px rgba(212,105,74,.7)} .btn-terracotta:hover{background:var(--terracotta-d)}
.btn-cream{background:var(--cream); color:var(--forest)}
.btn-forest{background:var(--forest); color:var(--cream)} .btn-forest:hover{background:var(--forest-3)}
.btn-ghost{color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(251,247,238,.35)} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cream)}
.btn-ghost-dark{color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(251,247,238,.3)}
.link-cta{display:inline-flex; align-items:center; gap:.5em; font-weight:600; min-height:44px; color:var(--ink); border-bottom:2px solid var(--accent, var(--terracotta)); padding-bottom:2px; margin-top:auto; align-self:flex-start}
.link-cta .ico{transition:transform .35s var(--ease)} .link-cta:hover .ico{transform:translateX(5px)}

/* ---------- Navigation ---------- */
.nav{position:fixed; inset:12px var(--gutter) auto; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 8px 8px 20px; border-radius:999px; color:var(--cream); background:rgba(15,31,22,.35); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); box-shadow:inset 0 0 0 1px rgba(251,247,238,.12); transition:background .4s, color .4s, box-shadow .4s, transform .5s var(--ease); max-width:1240px; margin-inline:auto}
.nav.is-light{background:rgba(245,239,227,.78); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(20,35,26,.08), var(--shadow)}
.nav.is-light .btn-cream{background:var(--forest); color:var(--cream)}
.nav.is-hidden{transform:translateY(-140%)}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em; text-decoration:none; white-space:nowrap}
.brand em{opacity:.7}
.brand-ico{width:28px; height:28px; color:var(--terracotta)}
.brand-lg{font-size:1.7rem} .brand-lg .brand-ico{width:40px; height:40px}
.nav-links{display:none; gap:28px; font-size:.95rem; font-weight:500}
.nav-links a{text-decoration:none; opacity:.85; padding:10px 0; transition:opacity .2s} .nav-links a:hover{opacity:1}
@media (min-width:900px){.nav-links{display:flex}}
@media (max-width:520px){.hide-xs{display:none}.nav{padding-left:14px}.brand{font-size:1.05rem}}

/* ---------- Hero ---------- */
.hero{position:relative; background:radial-gradient(120% 80% at 80% 0%, #24492F 0%, transparent 60%), radial-gradient(90% 70% at 0% 30%, #1B3A27 0%, transparent 55%), var(--forest); color:var(--cream); padding-top:clamp(120px, 17vh, 190px); overflow:clip}
.hero-inner{width:min(1240px,100%); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:.86rem; font-weight:500; letter-spacing:.04em; padding:8px 16px 8px 12px; border-radius:999px; background:rgba(251,247,238,.08); box-shadow:inset 0 0 0 1px rgba(251,247,238,.14); margin-bottom:clamp(24px,4vw,40px)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--leaf); box-shadow:0 0 0 0 rgba(111,174,94,.7); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(111,174,94,0)}100%{box-shadow:0 0 0 0 rgba(111,174,94,0)}}
.display{font-size:clamp(3.3rem, 11.5vw, 10.5rem); line-height:.92; letter-spacing:-.04em; font-weight:300}
.display .line{display:block; overflow:hidden; padding-bottom:.08em}
.display .line>span{display:block; transform:translateY(110%); animation:rise 1.1s var(--ease) forwards}
.display .line:nth-child(2)>span{animation-delay:.12s} .display .line:nth-child(3)>span{animation-delay:.26s}
.display .small{font-size:.36em; letter-spacing:-.02em; line-height:1.15; margin-top:.5em; color:rgba(251,247,238,.78); font-style:italic}
@keyframes rise{to{transform:none}}
.lead{max-width:56ch; font-size:clamp(1.08rem, 1.4vw, 1.3rem); color:rgba(251,247,238,.82); margin-top:clamp(24px,3vw,40px); opacity:0; animation:fade .9s .55s forwards; text-wrap:pretty}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; opacity:0; animation:fade .9s .7s forwards}
.hero-proof{margin-top:30px; font-size:.98rem; color:rgba(251,247,238,.85); max-width:62ch; opacity:0; animation:fade .9s .85s forwards}
.hero-proof .stars{color:var(--corn); letter-spacing:.12em; margin-right:6px}
.hero-proof small{display:block; opacity:.6; font-size:.85em; margin-top:2px}
@keyframes fade{to{opacity:1}}
.hero-media-wrap{padding:clamp(48px,7vw,96px) var(--gutter) 0; margin-bottom:-1px; background:linear-gradient(to bottom, transparent 55%, var(--paper) 55%)}
.hero-media{position:relative; width:min(1320px,100%); margin-inline:auto; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 100px -30px rgba(0,0,0,.6); transform-origin:50% 100%}
@media (max-width:640px){.hero-media{aspect-ratio:4/5}}
.hero-media>img{object-position:50% 68%}
.slot-caption{position:absolute; left:20px; bottom:18px; right:20px; z-index:3; font-family:var(--hand); font-size:clamp(1.2rem,2.2vw,1.7rem); color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.55)}

/* ---------- Emplacements photo (avec habillage de secours) ---------- */
.slot{position:relative; overflow:hidden; background:var(--forest-2); isolation:isolate}
.slot>img,.slot>video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; transition:opacity .8s, transform 1.2s var(--ease)}
.slot.has-media>img,.slot.has-media>video{opacity:1}
.slot.has-media .slot-art{opacity:0}
.slot.has-media::after{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(10,20,14,.55), transparent 45%); pointer-events:none}
.slot-art{position:absolute; inset:0; display:grid; place-items:center; transition:opacity .6s; background:radial-gradient(80% 80% at 70% 20%, color-mix(in oklab, var(--accent, var(--leaf)) 38%, transparent), transparent 70%), radial-gradient(70% 70% at 10% 100%, color-mix(in oklab, var(--accent, var(--terracotta)) 22%, transparent), transparent 70%), var(--forest-2)}
.slot-art>.ico{width:min(42%,190px); height:auto; aspect-ratio:1; stroke-width:.9; color:color-mix(in oklab, var(--accent, var(--cream)) 75%, var(--cream)); opacity:.9; transition:transform 1s var(--ease)}
.hero-media .slot-art{background:radial-gradient(60% 80% at 50% 50%, #2A5538 0%, transparent 70%), var(--forest-2)}
.orbit{position:absolute; width:min(78%,640px); animation:spin 60s linear infinite}
.orbit text{font-family:var(--serif); font-size:25px; letter-spacing:.2em; fill:rgba(251,247,238,.5); text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-icons{display:flex; align-items:center; gap:clamp(10px,3vw,34px)}
.orbit-icons .ico{width:clamp(40px,7vw,84px); height:auto; aspect-ratio:1; stroke-width:1.1; animation:bob 6s ease-in-out infinite}
.orbit-icons .ico.big{width:clamp(70px,12vw,150px)}
.orbit-icons .ico:nth-child(2){animation-delay:-1.5s}.orbit-icons .ico:nth-child(3){animation-delay:-3s}.orbit-icons .ico:nth-child(4){animation-delay:-4.5s}
@keyframes bob{50%{transform:translateY(-10px) rotate(3deg)}}

/* ---------- Bandeau défilant ---------- */
.marquee{overflow:hidden; padding-block:clamp(28px,4vw,48px); border-bottom:1px solid rgba(20,35,26,.1)}
.marquee-track{display:flex; align-items:center; gap:clamp(24px,3vw,48px); width:max-content; animation:slide 38s linear infinite; font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,2rem); font-style:italic; white-space:nowrap}
.marquee-track i{color:var(--terracotta); font-style:normal}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- SOS plante ---------- */
.chips{display:flex; gap:10px; overflow-x:auto; padding:4px var(--gutter) 18px; margin-inline:calc(var(--gutter) * -1); scrollbar-width:none; scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; scroll-snap-align:start; min-height:50px; padding:.6em 1.25em; border-radius:999px; font-weight:500; background:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(20,35,26,.14); transition:all .3s var(--ease)}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip[aria-selected="true"]{background:var(--forest); color:var(--cream); box-shadow:none}
@media (min-width:900px){.chips{flex-wrap:wrap; overflow:visible}}
.sos-card{display:grid; gap:0; margin-top:14px; background:var(--cream); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
@media (min-width:900px){.sos-card{grid-template-columns:1.15fr .85fr}}
.sos-main{padding:clamp(26px,4vw,56px)}
.sos-main h3{font-size:clamp(1.8rem,3.2vw,2.8rem); margin-top:10px}
.sos-why{margin-top:16px; color:var(--ink-soft); font-size:1.08em}
.sos-steps{margin-top:30px; display:grid; gap:18px; counter-reset:s}
.sos-steps li{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; counter-increment:s}
.sos-steps li::before{content:counter(s); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; font-family:var(--serif); font-size:1.25rem; background:var(--paper-2); color:var(--terracotta-d)}
.sos-steps b{display:block; font-weight:600}
.sos-side{background:var(--forest); color:var(--cream); padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; gap:22px}
.sos-video{position:relative; display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/9; background:var(--forest-3); text-decoration:none}
.sos-video img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.sos-video:hover img{transform:scale(1.05)}
.playbtn{position:absolute; inset:auto auto 14px 14px; display:inline-flex; align-items:center; gap:8px; padding:8px 16px 8px 10px; border-radius:999px; background:rgba(251,247,238,.94); color:var(--forest); font-weight:600; font-size:.9rem}
.playbtn .ico{fill:currentColor; stroke:none; width:1.1em; height:1.1em}
.sos-product{border-top:1px solid rgba(251,247,238,.16); padding-top:22px}
.sos-product .tag{color:var(--corn)}
.sos-product p{margin-block:6px 16px; font-family:var(--serif); font-size:1.35rem; line-height:1.2}
.sos-anim{animation:sosin .6s var(--ease)}
@keyframes sosin{from{opacity:0; transform:translateY(14px)}}

/* ---------- Saison ---------- */
.season{background:var(--paper-2); border-radius:clamp(28px,5vw,64px); margin-inline:clamp(8px,1.5vw,24px)}
.season-grid{display:grid; gap:clamp(32px,5vw,64px)}
@media (min-width:960px){.season-grid{grid-template-columns:1fr 1.1fr; align-items:start}.season-cta{grid-column:2}}
.h-serif #season-month{color:var(--terracotta); font-style:italic}
.season-list{display:grid; gap:0}
.season-list li{display:flex; gap:18px; padding:20px 0; border-bottom:1px solid rgba(20,35,26,.14); font-size:1.12em}
.season-list li::before{content:"✺"; color:var(--terracotta)}
.season-cta{display:grid; gap:16px; justify-items:start}

/* ---------- Bento boutique ---------- */
.tag{font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in oklab, var(--accent, var(--terracotta)) 70%, var(--ink))}
.bento{display:grid; gap:clamp(14px,1.6vw,22px); grid-template-columns:1fr}
@media (min-width:720px){.bento{grid-template-columns:repeat(2,1fr)}.card-xl,.card-wide{grid-column:span 2}}
@media (min-width:1080px){.bento{grid-template-columns:repeat(3,1fr)}.card-xl{grid-column:span 2; grid-row:span 2}.card-wide{grid-column:span 2}}
.card{position:relative; display:flex; flex-direction:column; background:var(--cream); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.card::before{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%); opacity:0; transition:opacity .4s}
.card:hover{transform:translateY(-6px); box-shadow:0 2px 4px rgba(20,35,26,.06), 0 30px 60px -20px rgba(20,35,26,.3)}
.card:hover::before{opacity:1}
.card:hover .slot-art>.ico,.card:hover .slot>img{transform:scale(1.06)}
.card-media{aspect-ratio:16/10}
.card-xl .card-media{aspect-ratio:16/9; flex:1; min-height:280px}
.card-body{display:flex; flex-direction:column; gap:12px; padding:clamp(22px,2.4vw,34px); flex:1}
.card-body p:not(.tag){color:var(--ink-soft)}
.card-xl h3{font-size:clamp(1.9rem,3.4vw,3rem)}
@media (min-width:720px){.card-wide{flex-direction:row}.card-wide .card-media{flex:1 1 45%; aspect-ratio:auto; min-height:260px}.card-wide .card-body{flex:1 1 55%; justify-content:center}}

/* ---------- Récit Busy ---------- */
.story{background:var(--forest); color:var(--cream); padding-block:clamp(80px,11vw,160px)}
.story .kicker{color:var(--corn)}
.story-grid{display:grid; gap:clamp(40px,6vw,96px)}
@media (min-width:960px){.story-grid{grid-template-columns:.8fr 1.2fr}.story-sticky{position:sticky; top:110px; align-self:start}}
.story-photo{aspect-ratio:4/5; border-radius:var(--r-lg); --accent:var(--leaf)}
.story-note{margin-top:20px; color:var(--corn); transform:rotate(-2deg)}
.story-lines{display:grid; gap:clamp(40px,9vh,110px)}
.story-line{font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.6vw,3.3rem); line-height:1.12; letter-spacing:-.02em; text-wrap:balance}
.story-line em{color:var(--corn)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .story-line{animation:lineIn linear both; animation-timeline:view(); animation-range:entry 10% cover 45%}
    @keyframes lineIn{from{opacity:.12; transform:translateY(30px)}to{opacity:1; transform:none}}
    .hero-media{animation:heroGrow linear both; animation-timeline:view(); animation-range:entry 0% cover 45%}
    @keyframes heroGrow{from{transform:scale(.86); border-radius:48px}to{transform:scale(1)}}
    .secret-media{animation:kenburns linear both; animation-timeline:view(); animation-range:entry 0% exit 100%}
    @keyframes kenburns{from{transform:scale(1.18)}to{transform:scale(1)}}
  }
}

/* ---------- Jardin secret ---------- */
.secret{position:relative; min-height:min(100svh,900px); display:grid; place-items:center; text-align:center; color:var(--cream); overflow:hidden; background:var(--forest)}
.secret-media{position:absolute; inset:0}
.secret-media::before{content:""; position:absolute; inset:0; z-index:2; background:radial-gradient(70% 60% at 50% 50%, rgba(10,20,14,.62), rgba(10,20,14,.92))}
.topo{position:absolute; inset:-10%; opacity:.5; background:repeating-radial-gradient(circle at 30% 40%, transparent 0 22px, rgba(251,247,238,.09) 22px 23px), repeating-radial-gradient(circle at 75% 65%, transparent 0 30px, rgba(229,174,56,.09) 30px 31px)}
.secret-content{position:relative; z-index:3; padding:120px var(--gutter); max-width:900px}
.secret-lock{width:44px; height:44px; margin-inline:auto; color:var(--corn)}
.coords{font-family:ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.14em; font-size:.9rem; opacity:.7; margin:18px 0 26px}
.secret-content p:last-child{margin:26px auto 0; max-width:58ch; color:rgba(251,247,238,.85); font-size:1.1em}

/* ---------- Thèmes (rail horizontal) ---------- */
.rail{display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; padding:6px max(var(--gutter), calc((100vw - 1240px)/2 + var(--gutter))) 30px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.theme{position:relative; flex:none; width:min(82vw,400px); scroll-snap-align:center; display:flex; flex-direction:column; gap:10px}
.theme-media{aspect-ratio:3/4; border-radius:var(--r-lg); margin-bottom:12px}
.theme .num{position:absolute; top:18px; left:20px; z-index:3; font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--cream)}
.theme p{color:var(--ink-soft)}

/* ---------- Vidéos ---------- */
.video-grid{display:grid; gap:clamp(14px,1.6vw,22px); grid-template-columns:1fr}
@media (min-width:560px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.video-grid{grid-template-columns:repeat(4,1fr)}}
.vcard{display:flex; flex-direction:column; gap:14px; text-decoration:none}
.vthumb{position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; background:var(--forest-2)}
.vthumb img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.vcard:hover .vthumb img{transform:scale(1.06)}
.vviews{position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:999px; background:rgba(15,31,22,.78); color:var(--cream); font-size:.82rem; font-weight:600; backdrop-filter:blur(6px)}
.vcard h3{font-family:var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:0; line-height:1.35}
.stats{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:clamp(48px,7vw,96px); padding-top:clamp(32px,4vw,56px); border-top:1px solid rgba(20,35,26,.14)}
.stats b{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(2.8rem,6vw,5rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stats span{color:var(--ink-soft)}

/* ---------- Témoignages ---------- */
.voices{background:var(--paper-2)}
.quotes{columns:1; column-gap:clamp(14px,1.6vw,22px)}
@media (min-width:720px){.quotes{columns:2}} @media (min-width:1080px){.quotes{columns:3}}
.quote{break-inside:avoid; margin-bottom:clamp(14px,1.6vw,22px); padding:clamp(24px,2.6vw,36px); border-radius:var(--r-lg); background:var(--cream); box-shadow:var(--shadow)}
.quote p{font-family:var(--serif); font-size:1.35rem; line-height:1.3; letter-spacing:-.01em}
.quote p::before{content:"«\00a0"} .quote p::after{content:"\00a0»"}
.quote cite{display:block; margin-top:18px; font-style:normal; font-size:.9rem; color:var(--ink-soft)}
.quote-big{background:var(--forest); color:var(--cream)} .quote-big p{font-size:clamp(1.6rem,2.4vw,2.1rem)} .quote-big cite{color:var(--corn)}

/* ---------- Inscription ---------- */
.join{background:var(--forest); color:var(--cream); border-radius:clamp(28px,5vw,64px) clamp(28px,5vw,64px) 0 0}
.join .kicker{color:var(--corn)}
.join-grid{display:grid; gap:clamp(36px,5vw,80px); align-items:center}
@media (min-width:960px){.join-grid{grid-template-columns:1.1fr .9fr}}
.ticks{display:grid; gap:14px; margin-top:32px}
.ticks li{display:flex; gap:14px; align-items:flex-start; color:rgba(251,247,238,.88)}
.ticks .ico{color:var(--leaf); margin-top:.2em; stroke-width:2.6}
.join-form{background:rgba(251,247,238,.06); box-shadow:inset 0 0 0 1px rgba(251,247,238,.14); border-radius:var(--r-lg); padding:clamp(24px,3vw,44px)}
.join-form>label{display:block; font-weight:600; margin-bottom:12px}
.field{display:flex; flex-wrap:wrap; gap:10px}
.field input{flex:1 1 220px; min-height:56px; padding:0 22px; border-radius:999px; border:0; font:inherit; background:var(--cream); color:var(--ink)}
.field input::placeholder{color:#8a9188}
.field .btn{flex:1 1 auto; min-height:56px}
.fine{font-size:.86rem; opacity:.65; margin-top:14px}
.form-msg{min-height:0; margin-top:0; font-weight:600; transition:all .3s}
.form-msg.is-ok,.form-msg.is-err{margin-top:14px} .form-msg.is-ok{color:var(--leaf)} .form-msg.is-err{color:#ff9d84}
.form-msg small{display:block; font-weight:400; opacity:.75; margin-top:4px}

/* ---------- FAQ ---------- */
.faq{background:var(--forest); color:var(--cream); padding-top:0}
.faq .kicker{color:var(--corn)}
.faq-wrap{display:grid; gap:clamp(24px,4vw,64px)} @media (min-width:960px){.faq-wrap{grid-template-columns:.8fr 1.2fr}}
.faq .section-head{margin:0} .faq h2{font-size:clamp(2rem,4vw,3.4rem)}
details{border-bottom:1px solid rgba(251,247,238,.16)}
summary{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; cursor:pointer; list-style:none; font-family:var(--serif); font-size:clamp(1.2rem,1.8vw,1.5rem)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; flex:none; font-family:var(--sans); font-size:1.6rem; line-height:1; transition:transform .4s var(--ease); color:var(--corn)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 40px 26px 0; color:rgba(251,247,238,.8); max-width:64ch}
details::details-content{opacity:0; transition:opacity .4s, content-visibility .4s allow-discrete} details[open]::details-content{opacity:1}

/* ---------- Pied de page ---------- */
.footer{background:#0A1610; color:var(--cream); padding-block:clamp(48px,6vw,88px) calc(110px + env(safe-area-inset-bottom))}
@media (min-width:900px){.footer{padding-bottom:48px}}
.footer-grid{display:grid; gap:36px} @media (min-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr; align-items:start}}
.footer-tag{font-family:var(--hand); font-size:1.7rem; color:var(--corn); margin-top:10px}
.socials,.legal{display:grid; gap:4px}
.socials a,.legal a{display:inline-flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; opacity:.85} .socials a:hover,.legal a:hover{opacity:1; color:var(--corn)}
.copyright{margin-top:48px; font-size:.86rem; opacity:.5}

/* ---------- Barre mobile ---------- */
.dock{position:fixed; z-index:40; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; gap:8px; padding:8px; border-radius:999px; background:rgba(15,31,22,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 20px 50px -10px rgba(0,0,0,.5); transform:translateY(160%); transition:transform .6s var(--ease)}
.dock.is-on{transform:none}
.dock .btn{flex:1; min-height:50px; font-size:.95rem; padding-inline:1em}
@media (min-width:900px){.dock{display:none}}

/* ---------- Fenêtre d'inscription ---------- */
.modal{width:min(560px, calc(100vw - 24px)); border:0; border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); background:var(--forest); color:var(--cream); box-shadow:0 40px 120px rgba(0,0,0,.5)}
.modal::backdrop{background:rgba(10,20,14,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.modal[open]{animation:modalIn .5s var(--ease)}
@keyframes modalIn{from{opacity:0; transform:translateY(30px) scale(.97)}}
.modal .kicker{color:var(--corn)} .modal h2{font-size:clamp(1.9rem,4vw,2.6rem)}
.modal-sub{margin:14px 0 22px; color:rgba(251,247,238,.8)}
.modal-close{position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; font-size:1.7rem; line-height:1; background:rgba(251,247,238,.08)}
.interest-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.interest-chips input{position:absolute; opacity:0}
.interest-chips span{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; font-size:.95rem; cursor:pointer; box-shadow:inset 0 0 0 1.5px rgba(251,247,238,.25); transition:all .25s}
.interest-chips input:checked+span{background:var(--corn); color:var(--forest); box-shadow:none; font-weight:600}
.interest-chips input:focus-visible+span{outline:3px solid var(--corn); outline-offset:3px}

/* ---------- Apparitions au scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1; transform:none}
.no-js .reveal{opacity:1; transform:none}

/* ---------- Grain ---------- */
.grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.07; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .display .line>span{transform:none} .lead,.cta-row,.hero-proof{opacity:1} .reveal{opacity:1; transform:none}
}

/* =========================================================
   BLOG
   ========================================================= */
.wrap-narrow{width:min(820px,100%)}
.head-row{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px}
.head-row .link-cta{margin:0}
.nav-links a[aria-current="page"]{opacity:1; box-shadow:0 2px 0 var(--terracotta)}

/* ---------- En-tête de page ---------- */
.page-hero{background:radial-gradient(120% 90% at 85% 0%, #24492F 0%, transparent 60%), var(--forest); color:var(--cream); padding:clamp(130px,18vh,200px) 0 clamp(56px,8vw,110px); border-radius:0 0 clamp(28px,5vw,64px) clamp(28px,5vw,64px)}
.page-hero .kicker{color:var(--corn)}
.display-md{font-size:clamp(2.6rem,7.4vw,6.4rem); line-height:.98}
.page-hero .lead{opacity:1; animation:none}

/* ---------- Cartes d'articles ---------- */
.blog{padding-top:clamp(40px,5vw,72px)}
.posts{display:grid; gap:clamp(18px,2vw,30px); grid-template-columns:1fr; margin-top:clamp(18px,3vw,36px)}
@media (min-width:680px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{display:flex; flex-direction:column; text-decoration:none; background:var(--cream); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.post:hover{transform:translateY(-6px); box-shadow:0 2px 4px rgba(20,35,26,.06), 0 30px 60px -20px rgba(20,35,26,.3)}
.post:hover .slot>img{transform:scale(1.06)}
.post-media{display:block; aspect-ratio:16/10}
.post-body{display:flex; flex-direction:column; gap:10px; padding:clamp(20px,2.2vw,30px); flex:1}
.post-body h3{font-size:clamp(1.35rem,1.9vw,1.7rem)}
.post-body p{color:var(--ink-soft)}
.post-meta{margin-top:auto; padding-top:10px; font-size:.86rem; color:var(--ink-soft); opacity:.85}
@media (min-width:680px){
  .post-big{grid-column:1/-1; flex-direction:row}
  .post-big .post-media{flex:1 1 58%; aspect-ratio:auto; min-height:380px}
  .post-big .post-body{flex:1 1 42%; justify-content:center; padding:clamp(28px,4vw,56px)}
  .post-big h3{font-size:clamp(1.9rem,3.2vw,2.9rem)}
  .post-big .post-meta{margin-top:10px}
}
.blog-empty{display:grid; justify-items:center; gap:18px; text-align:center; padding:clamp(48px,8vw,110px) 20px; margin-top:24px; border-radius:var(--r-lg); background:var(--paper-2)}
.blog-empty[hidden],.posts[hidden]{display:none}
.blog-empty .ico{width:64px; height:64px; stroke-width:1.1; color:var(--leaf)}
.blog-empty p{max-width:46ch; color:var(--ink-soft)}
.home-blog{padding-top:0}

/* ---------- Article ---------- */
.read-bar{position:fixed; inset:0 0 auto 0; height:4px; z-index:70; background:var(--terracotta); transform:scaleX(0); transform-origin:0 50%}
.article-hero{padding-bottom:clamp(90px,12vw,170px)}
.article-hero h1{font-size:clamp(2.3rem,5.6vw,4.4rem); line-height:1.03}
.crumbs{font-size:.9rem; margin-bottom:22px; color:rgba(251,247,238,.7)}
.crumbs a{text-decoration:none; color:var(--corn)} .crumbs a:hover{text-decoration:underline} .crumbs span{margin-inline:6px; opacity:.5}
.article-meta{margin-top:22px; color:rgba(251,247,238,.75); font-size:.98rem}
.article-cover{aspect-ratio:16/9; border-radius:var(--r-lg); margin:calc(clamp(60px,8vw,120px) * -1) 0 0; box-shadow:0 40px 80px -30px rgba(10,20,14,.55)}
.prose{padding-block:clamp(40px,6vw,80px); font-size:clamp(1.1rem,1vw + .9rem,1.24rem); line-height:1.75}
.prose>*+*{margin-top:1.25em}
.prose .chapo{font-family:var(--serif); font-size:1.4em; line-height:1.4; letter-spacing:-.01em; color:var(--ink)}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.1; margin-top:2.2em}
.prose h3{font-size:clamp(1.35rem,2.2vw,1.7rem); margin-top:1.8em}
.prose a:not(.btn):not(.video-link){color:var(--terracotta-d); text-decoration-thickness:2px; text-underline-offset:3px}
.prose ul,.prose ol{display:grid; gap:.6em; padding-left:0}
.prose ul li{position:relative; padding-left:1.6em}
.prose ul li::before{content:"✺"; position:absolute; left:0; color:var(--terracotta); font-size:.85em; top:.12em}
.prose ol{counter-reset:p}
.prose ol li{position:relative; padding-left:3em; counter-increment:p; min-height:2.2em}
.prose ol li::before{content:counter(p); position:absolute; left:0; top:-.05em; display:grid; place-items:center; width:2.1em; height:2.1em; border-radius:50%; background:var(--paper-2); color:var(--terracotta-d); font-family:var(--serif)}
.prose img{border-radius:var(--r-md)}
.prose blockquote{margin-block:2em; padding-left:clamp(18px,3vw,32px); border-left:4px solid var(--terracotta); font-family:var(--serif); font-size:1.5em; line-height:1.25; letter-spacing:-.015em}
.note{padding:clamp(20px,2.6vw,30px); border-radius:var(--r-md); margin-block:2em}
.note-title{font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px}
.note-busy{background:color-mix(in oklab, var(--leaf) 16%, var(--cream))} .note-busy .note-title{color:#3F7A33}
.note-warn{background:color-mix(in oklab, var(--corn) 22%, var(--cream))} .note-warn .note-title{color:#8A5A00}
.video-link{display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:18px; align-items:center; padding:12px; border-radius:var(--r-md); background:var(--forest); color:var(--cream); text-decoration:none; margin-block:2em}
.video-link img{border-radius:14px; aspect-ratio:16/9; object-fit:cover; width:100%}
.video-link .tag{display:block; color:var(--corn); margin-bottom:6px}
.video-link strong{font-weight:600; line-height:1.3; display:block; font-size:.95em}
.product-box{display:grid; gap:10px; justify-items:start; padding:clamp(24px,3vw,40px); border-radius:var(--r-lg); background:var(--cream); box-shadow:var(--shadow); margin-block:2.4em}
.product-box h3{margin:0} .product-box p:not(.tag){color:var(--ink-soft); margin:0 0 8px}
.next{background:var(--paper-2); border-radius:clamp(28px,5vw,64px) clamp(28px,5vw,64px) 0 0}
.next+.join{border-radius:0}


/* =========================================================
   AJOUTS : transitions entre pages, Olaf, galerie, partage, 404
   ========================================================= */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

.olaf{position:relative; width:46%; margin:-22% 0 0 auto; transform:rotate(3deg); z-index:2}
.olaf img{width:100%; border-radius:var(--r-md); border:5px solid var(--cream); box-shadow:0 24px 50px -18px rgba(0,0,0,.7); aspect-ratio:1; object-fit:cover}
.olaf figcaption{margin-top:8px; font-size:1.25rem; color:var(--cream); text-align:right}
.story-note{margin-top:4px}

.galerie{padding-bottom:clamp(60px,8vw,120px)}
.film{overflow:hidden; mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)}
.film-track{display:flex; gap:clamp(10px,1.2vw,18px); width:max-content; animation:slide 80s linear infinite}
.film:hover .film-track{animation-play-state:paused}
.film img{width:clamp(180px,22vw,300px); height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md); flex:none}
.film img:nth-child(odd){margin-top:clamp(14px,2vw,32px)}
.film-note{margin-top:clamp(24px,3vw,40px); text-align:center}
.join-proof{margin-top:20px; color:var(--corn); font-weight:500}

.share{display:inline-flex; align-items:center; gap:10px; min-height:48px; margin-top:28px; padding:0 18px 0 14px; border-radius:999px; font-weight:600; font-size:.95rem; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(20,35,26,.18); transition:box-shadow .25s, background .25s}
.share:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.share .ico{transform:rotate(-45deg); color:var(--terracotta-d)}

.lost{min-height:100svh; display:grid; place-items:center; text-align:center; border-radius:0}
.lost .cta-row{justify-content:center; opacity:1; animation:none}
.lost .lead{margin-inline:auto}