/* ==========================================================================
   Cocoaprotect — feuille de style unique
   Palette : papier chaud, vert cabosse, soleil, cabosse mûre
   ========================================================================== */

:root{
  --paper:#FFFAF0;
  --paper-2:#FFF4DF;
  --surface:#FFFFFF;
  --ink:#14301F;
  --muted:#5A6B58;
  --leaf:#0F7B4B;
  --leaf-deep:#0A3B29;
  --leaf-soft:#DDF0E2;
  --sun:#FFC42E;
  --sun-soft:#FFF0C2;
  --pod:#E4592F;
  --pod-soft:#FCE3D9;
  --sky:#CFEAF2;
  --line:color-mix(in oklab, var(--ink) 14%, transparent);
  --line-soft:color-mix(in oklab, var(--ink) 8%, transparent);

  --step--1:clamp(.74rem,.7rem + .16vw,.82rem);
  --step-0:clamp(1rem,.96rem + .26vw,1.08rem);
  --step-1:clamp(1.14rem,1.05rem + .45vw,1.38rem);
  --step-2:clamp(1.42rem,1.22rem + 1vw,2.05rem);
  --step-3:clamp(1.85rem,1.4rem + 2.3vw,3rem);
  --step-4:clamp(2.2rem,1.45rem + 3.7vw,4.4rem);

  --space:clamp(1rem,.86rem + .8vw,1.6rem);
  --radius:14px;
  --radius-lg:22px;
  --radius-xl:30px;
  --shadow-sm:0 1px 2px rgba(20,48,31,.06);
  --shadow:0 1px 2px rgba(20,48,31,.05), 0 16px 34px -26px rgba(20,48,31,.55);
  --shadow-lg:0 2px 6px rgba(20,48,31,.06), 0 44px 70px -46px rgba(20,48,31,.6);
  --wrap:74rem;
  --display:"Gabarito","Trebuchet MS","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --text:"Manrope","Segoe UI","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--step-0);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid var(--pod);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.6rem)}
.wrap-narrow{max-width:56rem;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.6rem)}
section{padding-block:clamp(3rem,1.7rem + 5vw,6rem);position:relative}
.band-tint{background:var(--paper-2)}
.band-white{background:var(--surface)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--surface);padding:.7rem 1rem;border-radius:10px;box-shadow:var(--shadow)}

/* --- type helpers ------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--leaf);
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--sun)}
.on-dark .eyebrow{color:#FFD97A}
.on-dark .eyebrow::before{background:var(--sun)}
.lead{font-size:var(--step-1);line-height:1.55;color:var(--muted);max-width:60ch}
.sec-head{display:grid;gap:1rem;max-width:58rem;margin-bottom:clamp(1.8rem,1.3rem + 2vw,3.2rem)}
.sec-head h2{font-size:var(--step-3)}
.sec-head .lead{margin-top:.2rem}
.hl{position:relative;display:inline-block;color:var(--leaf-deep);white-space:nowrap}
.hl::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.42em;
  background:var(--sun);border-radius:4px;z-index:-1;transform:rotate(-.6deg);
  opacity:.85;
}
.hl{isolation:isolate}
.tag{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.34rem .8rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:var(--step--1);font-weight:700;letter-spacing:.04em;color:var(--muted);
}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pod)}

/* --- cocoa row divider (signature) ------------------------------------- */
.row-rule{
  height:26px;width:100%;
  background-image:radial-gradient(circle at 13px 26px, var(--leaf) 2.2px, transparent 3px);
  background-size:26px 26px;background-repeat:repeat-x;
  opacity:.28;
}

/* --- nav --------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:1.5rem;height:68px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img,.brand svg{width:34px;height:34px;flex:none}
.brand b{font-family:var(--display);font-size:1.12rem;letter-spacing:-.02em;font-weight:700}
.nav-links{display:flex;gap:1.4rem;margin-left:auto}
.nav-links a{
  text-decoration:none;font-size:.92rem;font-weight:600;color:var(--muted);
  padding-block:.4rem;border-bottom:2px solid transparent;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);border-bottom-color:var(--sun)}
.nav .btn{margin-left:.2rem}
@media (max-width:900px){
  .nav-links{display:none}
  .nav .btn{margin-left:auto}
}

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--text);font-weight:700;font-size:.95rem;
  padding:.82rem 1.35rem;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--leaf);color:#F4FFF7;box-shadow:0 1px 2px rgba(10,59,41,.2), 0 12px 22px -16px rgba(10,59,41,.9)}
.btn-primary:hover{background:var(--leaf-deep);transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(10,59,41,.85)}
.btn-sun{background:var(--sun);color:#2A1C00;box-shadow:0 1px 2px rgba(120,80,0,.18), 0 12px 22px -16px rgba(150,100,0,.8)}
.btn-sun:hover{background:#FFD24F;transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-light{background:transparent;color:#F4FFF7;border-color:rgba(255,255,255,.4)}
.btn-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-sm{padding:.55rem 1rem;font-size:.88rem}
.btn-block{width:100%}

/* --- hero -------------------------------------------------------------- */
.hero{padding-block:clamp(2rem,.8rem + 4vw,4rem) clamp(4.5rem,3rem + 9vw,9.5rem);overflow:hidden}
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 88% 8%, color-mix(in oklab,var(--sun) 34%, transparent), transparent 62%),
    radial-gradient(50rem 26rem at 4% 78%, color-mix(in oklab,var(--leaf) 12%, transparent), transparent 66%);
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(1.8rem,1rem + 4vw,4rem);align-items:center;
}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:var(--step-4);margin-block:.9rem 1.1rem;letter-spacing:-.035em}
.hero .lead{max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.hero-note{
  margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;
  font-size:.88rem;color:var(--muted);font-weight:600;
}
.hero-note span{display:inline-flex;align-items:center;gap:.45rem}
.hero-note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf);flex:none}
.hero-scene{
  position:absolute;left:50%;bottom:0;width:min(1600px,190%);transform:translateX(-50%);
  height:clamp(190px,26vw,360px);overflow:hidden;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 42%, #000);
  mask-image:linear-gradient(to bottom, transparent, #000 42%, #000);
}
.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:center 72%}
@media (max-width:700px){.hero-scene{height:150px;opacity:.85}}

/* --- phone ------------------------------------------------------------- */
.stage{position:relative;display:flex;justify-content:center;padding-block:.6rem 2rem}
.phone{
  position:relative;width:min(300px,84vw);aspect-ratio:9/18.4;
  background:linear-gradient(165deg,#1C3A2A,#0B2A1C 62%);
  border-radius:36px;padding:9px;
  box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(255,255,255,.1);
  transform:rotate(-1.6deg);
}
.phone::after{
  content:"";position:absolute;inset:0;border-radius:36px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
}
.screen{
  position:relative;height:100%;border-radius:28px;overflow:hidden;
  background:var(--paper);display:flex;flex-direction:column;
}
.app-bar{
  display:flex;align-items:center;gap:.45rem;padding:.8rem .85rem .6rem;
  font-family:var(--text);font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--leaf-deep);
}
.app-bar i{width:8px;height:8px;border-radius:50%;background:var(--pod);flex:none}
.view{
  position:relative;flex:1;min-height:0;overflow:hidden;
  background:radial-gradient(120% 90% at 55% 18%, rgba(255,196,46,.35), transparent 62%),
             radial-gradient(100% 80% at 25% 84%, rgba(15,123,75,.45), transparent 66%),
             #12331F;
}
.view img{position:absolute;inset:9% 12% 14% 12%;width:76%;height:auto;object-fit:contain}
.frame{position:absolute;inset:12px;pointer-events:none}
.frame::before,.frame::after{content:"";position:absolute;width:22px;height:22px;border:2.5px solid var(--sun);border-radius:3px}
.frame::before{top:0;left:0;border-right:0;border-bottom:0}
.frame::after{bottom:0;right:0;border-left:0;border-top:0}
.frame-b{position:absolute;inset:12px;pointer-events:none}
.frame-b::before,.frame-b::after{content:"";position:absolute;width:22px;height:22px;border:2.5px solid var(--sun);border-radius:3px}
.frame-b::before{top:0;right:0;border-left:0;border-bottom:0}
.frame-b::after{bottom:0;left:0;border-right:0;border-top:0}
.scan{position:absolute;left:14px;right:14px;top:34%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sun),transparent);opacity:.9}
.view-tag{
  position:absolute;top:20px;left:20px;font-size:.58rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#FFE6A8;
}
.sheet{
  margin:0 8px 8px;padding:.8rem .85rem .9rem;border-radius:18px 18px 22px 22px;
  background:var(--surface);box-shadow:0 -14px 26px -20px rgba(0,0,0,.5);
}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.sheet-k{font-size:.56rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ok{display:inline-flex;align-items:center;gap:.3rem;font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf)}
.sheet-title{font-family:var(--display);font-weight:700;font-size:.92rem;line-height:1.2;margin:.4rem 0 .15rem;color:var(--ink)}
.sheet p{font-size:.68rem;line-height:1.45;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.chip{
  font-size:.56rem;font-weight:700;padding:.22rem .45rem;border-radius:6px;
  background:var(--leaf-soft);color:var(--leaf-deep);border:1px solid color-mix(in oklab,var(--leaf) 22%,transparent);
}
.chip-sun{background:var(--sun-soft);color:#6B4A00;border-color:color-mix(in oklab,var(--sun) 60%,transparent)}
.float{
  position:absolute;max-width:184px;padding:.75rem .85rem;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow);font-size:.76rem;line-height:1.45;color:var(--muted);
}
.float b{display:block;font-family:var(--display);font-size:.84rem;color:var(--ink);margin-bottom:.1rem}
.float-a{right:0;top:12%}
.float-b{left:0;bottom:16%}
@media (max-width:640px){.float{display:none}}

/* --- strip ------------------------------------------------------------- */
.strip{background:var(--surface);border-block:1px solid var(--line-soft)}
.strip ul{display:grid;grid-template-columns:repeat(4,1fr)}
.strip li{padding:1.4rem clamp(.7rem,2vw,1.6rem);border-left:1px solid var(--line-soft)}
.strip li:first-child{border-left:0;padding-left:0}
.strip b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.55rem,1.15rem + 1.4vw,2.3rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--leaf-deep);
}
.strip small{display:block;margin-top:.5rem;font-size:.84rem;line-height:1.45;color:var(--muted)}
@media (max-width:780px){
  .strip ul{grid-template-columns:1fr 1fr}
  .strip li{padding-inline:0 1rem}
  .strip li:nth-child(2n){padding-left:1rem}
  .strip li:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .strip li:nth-child(3){border-left:0}
  .strip li:nth-child(3){padding-left:0}
}

/* --- problem ----------------------------------------------------------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,1rem + 3vw,4rem);align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.prob-list{display:grid;gap:1rem}
.prob-list li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;
  padding-top:1rem;border-top:1px solid var(--line-soft);
}
.prob-list li:first-child{border-top:0;padding-top:0}
.prob-list h3{font-size:1.02rem;font-family:var(--text);font-weight:800;margin-bottom:.2rem;letter-spacing:-.01em}
.prob-list p{font-size:.94rem;color:var(--muted)}
.pip{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--sun-soft);color:#6B4A00;flex:none}
.pip svg{width:18px;height:18px}
.pip-pod{background:var(--pod-soft);color:#8A2F13}
.pip-leaf{background:var(--leaf-soft);color:var(--leaf-deep)}
.figure{margin:0}
.figure img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.figure figcaption{margin-top:.7rem;font-size:.82rem;color:var(--muted)}

/* --- steps ------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.6rem + 2vw,1.8rem)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{
  position:relative;padding:1.5rem 1.5rem 1.6rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow);
}
.step-n{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--leaf-deep);color:#FFF6DC;font-family:var(--display);font-weight:800;font-size:.95rem;
  margin-bottom:1rem;
}
.step h3{font-size:var(--step-1);margin-bottom:.45rem}
.step p{font-size:.94rem;color:var(--muted)}
.step img{width:100%;border-radius:12px;margin-bottom:1rem;background:var(--paper-2)}
.note{
  margin-top:clamp(1.4rem,1rem + 1.4vw,2rem);
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:1.1rem 1.3rem;border-radius:var(--radius);
  background:var(--leaf-soft);border:1px solid color-mix(in oklab,var(--leaf) 22%,transparent);
  font-size:.95rem;
}
.note svg{width:20px;height:20px;color:var(--leaf-deep);margin-top:.15rem;flex:none}
.note b{color:var(--leaf-deep)}

/* --- modes ------------------------------------------------------------- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,.6rem + 2vw,1.8rem)}
@media (max-width:900px){.modes{grid-template-columns:1fr}}
.mode{
  border-radius:var(--radius-lg);padding:clamp(1.3rem,1rem + 1.4vw,2rem);
  border:1px solid var(--line);background:var(--surface);display:grid;gap:.8rem;align-content:start;
}
.mode-b{background:var(--leaf-deep);color:#EAF6EC;border-color:var(--leaf-deep)}
.mode-k{font-size:var(--step--1);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.mode-b .mode-k{color:#FFD97A}
.mode h3{font-size:var(--step-2)}
.mode > p{font-size:.96rem;color:var(--muted)}
.mode-b > p{color:#C6DCCB}
.mode ul{display:grid;gap:.6rem;margin-top:.2rem}
.mode li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;font-size:.93rem;line-height:1.5}
.mode li::before{
  content:"";width:8px;height:8px;margin-top:.5rem;border-radius:2px;
  background:var(--sun);transform:rotate(45deg);flex:none;
}
.mode li b{font-weight:800}

/* --- index list -------------------------------------------------------- */
.idx{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.6rem,1rem + 3vw,3.4rem)}
@media (max-width:820px){.idx{grid-template-columns:1fr}}
.idx-row{padding-block:1.15rem;border-top:1px solid var(--line-soft);display:grid;gap:.25rem}
.idx-row h3{font-family:var(--text);font-size:1rem;font-weight:800;display:flex;gap:.55rem;align-items:baseline;line-height:1.3}
.idx-row h3::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--pod);flex:none;transform:translateY(-4px)}
.idx-row p{font-size:.9rem;color:var(--muted);padding-left:calc(14px + .55rem)}

/* --- catalogue --------------------------------------------------------- */
.families{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.families li{
  font-size:.84rem;font-weight:700;padding:.45rem .85rem;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
.families li::before{content:"· ";color:var(--pod);font-weight:800}
.examples{margin-top:1.1rem;font-size:.94rem;color:var(--muted);max-width:64ch}

/* --- dark band --------------------------------------------------------- */
.band-dark{background:var(--leaf-deep);color:#EAF6EC;overflow:hidden}
.band-dark h2{color:#fff}
.band-dark .lead{color:#C6DCCB}
.band-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.6rem,1rem + 3vw,3.6rem);align-items:center}
@media (max-width:920px){.band-in{grid-template-columns:1fr}}
.band-points{display:grid;gap:.8rem;margin-top:1.5rem}
.band-points li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;font-size:.94rem;color:#C6DCCB;line-height:1.5}
.band-points li b{color:#fff;font-weight:800}
.band-points li::before{content:"";width:7px;height:7px;margin-top:.5rem;border-radius:50%;background:var(--sun);flex:none}
.dark-card{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);padding:1rem}
.dark-cap{margin-top:.7rem;font-size:.78rem;color:#A9C7B2}
.band-dark .btn-light{border-color:rgba(255,255,255,.45)}

/* --- faq --------------------------------------------------------------- */
.faq{display:grid;gap:.7rem;max-width:52rem}
.faq details{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:1rem 1.2rem;box-shadow:var(--shadow-sm);
}
.faq details[open]{border-color:color-mix(in oklab,var(--leaf) 40%,transparent);box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.02rem;
  list-style:none;display:flex;align-items:center;gap:.8rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-size:1.25rem;line-height:1;color:var(--leaf);font-family:var(--text);
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:.7rem;font-size:.94rem;color:var(--muted);max-width:62ch}

/* --- download ---------------------------------------------------------- */
.dl-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,1rem + 2.5vw,3rem);align-items:end;margin-bottom:clamp(1.6rem,1.2rem + 2vw,2.6rem)}
@media (max-width:900px){.dl-head{grid-template-columns:1fr}}
.dl-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1rem,.6rem + 2vw,1.6rem)}
@media (max-width:900px){.dl-grid{grid-template-columns:1fr}}
.store{
  border-radius:var(--radius-lg);padding:clamp(1.3rem,1rem + 1.4vw,2rem);
  border:1px solid var(--line);background:var(--surface);display:grid;gap:1rem;align-content:start;
  box-shadow:var(--shadow);
}
.store-main{
  background:linear-gradient(165deg,#FFFFFF,#FFF7E2);
  box-shadow:var(--shadow-lg);border-color:color-mix(in oklab,var(--sun) 60%,transparent);
}
.store-k{font-size:var(--step--1);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.store h3{font-size:var(--step-1)}
.store p{font-size:.92rem;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:.6rem}
.badge{
  display:inline-flex;align-items:center;gap:.65rem;padding:.68rem 1.05rem;border-radius:12px;
  background:var(--ink);color:#FFF9EE;text-decoration:none;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease;
}
.badge:hover{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(0,0,0,.7)}
.badge svg{width:20px;height:20px;flex:none}
.badge span{display:grid;line-height:1.15;text-align:left}
.badge small{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.badge b{font-size:.92rem;font-weight:800}
.badge-alt{background:var(--surface);color:var(--ink);border-color:var(--line)}
.badge-alt:hover{box-shadow:var(--shadow)}
.checklist{display:grid;gap:.55rem}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.55rem;font-size:.9rem;color:var(--muted);align-items:start}
.checklist li::before{
  content:"✓";color:var(--leaf);font-weight:800;font-size:.9rem;line-height:1.45;flex:none;
}
.coop{
  margin-top:clamp(1rem,.6rem + 1.5vw,1.4rem);
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1.25rem 1.4rem;border-radius:var(--radius-lg);
  background:var(--sun-soft);border:1px solid color-mix(in oklab,var(--sun) 55%,transparent);
}
.coop p{font-size:.94rem;color:#5B4409}
.coop b{color:#2E2200}
.coop a{white-space:nowrap}
@media (max-width:760px){.coop{grid-template-columns:1fr}}

/* --- contact ----------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,.8rem + 2.5vw,2.6rem);align-items:start}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}
.form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.3rem,1rem + 1.6vw,2.2rem);box-shadow:var(--shadow-lg);
  display:grid;gap:1rem;
}
.field{display:grid;gap:.4rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}
.field label{font-size:.86rem;font-weight:800;color:var(--ink)}
.field label span{color:var(--pod)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:.72rem .85rem;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--leaf);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--leaf) 22%,transparent);
}
.hint{font-size:.78rem;color:var(--muted)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.86rem;color:var(--muted)}
.consent input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--leaf)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.banner{
  border-radius:12px;padding:.9rem 1.1rem;font-size:.92rem;font-weight:600;
  border:1px solid transparent;display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
}
.banner svg{width:18px;height:18px;margin-top:.1rem;flex:none}
.banner-ok{background:var(--leaf-soft);border-color:color-mix(in oklab,var(--leaf) 35%,transparent);color:var(--leaf-deep)}
.banner-ko{background:var(--pod-soft);border-color:color-mix(in oklab,var(--pod) 35%,transparent);color:#7A2A10}
.side{display:grid;gap:1rem}
.side-card{
  border-radius:var(--radius-lg);padding:1.3rem 1.4rem;border:1px solid var(--line);
  background:var(--surface);display:grid;gap:.5rem;
}
.side-card h3{font-size:1.05rem;font-family:var(--text);font-weight:800}
.side-card p{font-size:.9rem;color:var(--muted)}
.side-card a{color:var(--leaf);font-weight:800;text-decoration:none;border-bottom:2px solid var(--sun)}
.side-card a:hover{color:var(--leaf-deep)}
.side-dark{background:var(--leaf-deep);border-color:var(--leaf-deep);color:#EAF6EC}
.side-dark h3,.side-dark p{color:#EAF6EC}
.side-dark p{color:#C6DCCB}

/* --- footer ------------------------------------------------------------ */
footer{background:var(--leaf-deep);color:#EAF6EC;padding-block:clamp(2.2rem,1.5rem + 3vw,3.6rem) 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:2rem;align-items:start}
@media (max-width:780px){.foot-grid{grid-template-columns:1fr}}
footer .brand b{color:#fff}
footer p{color:#C6DCCB;font-size:.9rem;max-width:46ch}
.foot-domain{
  display:inline-block;margin-top:1rem;font-family:var(--display);font-weight:800;
  font-size:var(--step-2);letter-spacing:-.02em;color:#fff;text-decoration:none;
  border-bottom:2px solid var(--sun);padding-bottom:.1rem;
}
.foot-domain:hover{color:var(--sun)}
.foot-links{display:grid;gap:.55rem;font-size:.9rem}
.foot-links a{color:#C6DCCB;text-decoration:none}
.foot-links a:hover{color:var(--sun)}
.foot-bottom{
  margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  font-size:.82rem;color:#A9C7B2;
}
.foot-bottom a{color:#EAF6EC;text-decoration:none;font-weight:700;border-bottom:1px solid rgba(255,255,255,.35)}
.foot-bottom a:hover{color:var(--sun);border-bottom-color:var(--sun)}

/* --- legal / long text ------------------------------------------------- */
.prose{max-width:68ch}
.prose h2{font-size:var(--step-2);margin-bottom:.7rem}
.prose h3{font-family:var(--text);font-size:1.05rem;font-weight:800;margin-block:1.4rem .4rem}
.prose p,.prose li{font-size:.96rem;color:var(--muted);margin-bottom:.7rem}
.prose ul{list-style:disc;padding-left:1.2rem}
.prose li{margin-bottom:.35rem}
.prose a{color:var(--leaf);font-weight:700}

/* --- reveal ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
  .js .reveal.is-visible{opacity:1;transform:none}
  .js .float-a{animation:drift 7s ease-in-out infinite}
  .js .float-b{animation:drift 8.5s ease-in-out infinite reverse}
  @keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

/* --- print ------------------------------------------------------------- */
@media print{
  body{background:#fff}
  .nav,.hero-cta,.badges,.no-print,.float{display:none !important}
  section{padding-block:1rem}
  .band-dark,footer{background:#fff;color:#111}
  .band-dark p,.band-dark .lead,.band-dark .band-points li,footer p{color:#333}
  .band-dark h2,footer .brand b,.foot-domain{color:#111}
  .step,.mode,.store,.form{box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}
@page{size:A4;margin:16mm}