/* Cabane Créative, registre BRAND. Palette full-color OKLCH, type a caractere, layout asymetrique.
   Référence de lane: brand chaleureux-joyeux pour parents (KiwiCo x Lovevery), pas magazine-serif. */
:root{
  /* palette accordee au logo Cabane Creative : vert pin + corail + creme */
  --cream:oklch(0.972 0.014 82);
  --cream-2:oklch(0.95 0.02 80);
  --paper:oklch(0.996 0.005 85);
  --ink:oklch(0.30 0.045 178);     /* vert pin profond (maison du logo) */
  --ink-soft:oklch(0.46 0.03 176);
  --tang:oklch(0.66 0.15 36);      /* corail (crayon/fenetres) = accent + CTA */
  --tang-d:oklch(0.565 0.16 34);
  --teal:oklch(0.45 0.075 178);    /* vert pin secondaire */
  --leaf:oklch(0.66 0.09 150);     /* sauge */
  --sun:oklch(0.83 0.13 86);       /* moutarde douce */
  --rose:oklch(0.84 0.07 20);      /* rose tendre */
  --line:oklch(0.89 0.02 82);
  --shadow:oklch(0.5 0.08 36 / 0.16);
  --read:66ch;
  --pagepad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:clamp(17px,1.05vw + 14px,19px);line-height:1.6;font-weight:400;
  background-image:
    radial-gradient(60% 50% at 85% -5%, oklch(0.83 0.13 86 / 0.26), transparent 70%),
    radial-gradient(48% 42% at -6% 6%, oklch(0.45 0.075 178 / 0.10), transparent 70%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;line-height:1.04;letter-spacing:-0.02em;font-weight:700;color:var(--ink);text-wrap:balance}
p{margin:0 0 1em;max-width:var(--read)}
a{color:var(--tang-d);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--tang)}
img,svg{max-width:100%;display:block}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pagepad)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  max-width:1180px;margin-inline:auto;padding:22px var(--pagepad)}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.55rem;letter-spacing:-0.03em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.brand .dot{width:.7em;height:.7em;border-radius:50% 50% 50% 8px;background:var(--tang);transform:rotate(-12deg)}
.brand img{height:38px;width:auto;display:block}
.nav nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem;padding:.55em 1em;border-radius:99px;min-height:44px;display:inline-flex;align-items:center}
.nav nav a:hover{background:oklch(0.705 0.18 48 / 0.12)}
.nav nav a[aria-current=page]{background:var(--ink);color:var(--cream)}

/* ---------- hero (asymétrique) ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;
  max-width:1180px;margin:clamp(16px,3vw,40px) auto clamp(40px,6vw,84px);padding-inline:var(--pagepad)}
.eyebrow{font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--tang-d);
  display:inline-flex;align-items:center;gap:.5em;margin:0 0 .8rem;text-transform:none}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--tang);border-radius:2px}
.hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);margin:0 0 .35em}
.hero h1 .hl{position:relative;color:var(--tang-d);white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.06em;height:.28em;
  background:var(--sun);z-index:-1;border-radius:99px;transform:rotate(-1.2deg)}
.hero .lede{font-size:clamp(1.1rem,1.4vw,1.32rem);color:var(--ink-soft);max-width:34ch;margin-bottom:1.6rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.3rem}
.hero-proof{list-style:none;display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:0;font-size:.95rem;color:var(--ink-soft);font-weight:600}
.hero-proof li{display:inline-flex;align-items:center;gap:.45em}
.hero-proof li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--leaf)}
.hero-art{position:relative}
.hero-photo{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:28px;box-shadow:0 22px 48px var(--shadow);display:block}
.hero-art .badge{position:absolute;left:-14px;bottom:24px;background:var(--paper);border-radius:16px;padding:10px 16px;box-shadow:0 12px 28px var(--shadow);font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.5em}
.hero-art .badge::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--leaf)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:52px;padding:.7em 1.5em;border-radius:99px;
  font-weight:700;font-size:1.05rem;text-decoration:none;border:2px solid transparent;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .2s}
.btn-pri{background:var(--tang);color:var(--cream);box-shadow:0 10px 24px var(--shadow)}
.btn-pri:hover{transform:translateY(-3px);box-shadow:0 16px 32px var(--shadow);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}

/* ---------- age strip ---------- */
.ages{max-width:1180px;margin:0 auto clamp(40px,6vw,80px);padding:clamp(22px,3vw,34px) var(--pagepad);
  background:var(--ink);color:var(--cream);border-radius:28px}
.ages h2{color:var(--cream);font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 .2em}
.ages p{color:oklch(0.9 0.02 75);margin:0 0 1.3rem}
.age-row{display:flex;gap:14px;flex-wrap:wrap}
.age-chip{flex:1 1 180px;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:.2em;
  padding:18px 22px;border-radius:18px;text-decoration:none;color:var(--ink);
  background:var(--cream);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.age-chip:hover{transform:translateY(-4px);color:var(--ink)}
.age-chip b{font-family:"Bricolage Grotesque";font-size:1.5rem}
.age-chip span{color:var(--ink-soft);font-size:.95rem}
.age-chip:nth-child(1){background:var(--sun)}
.age-chip:nth-child(2){background:var(--rose)}
.age-chip:nth-child(3){background:oklch(0.8 0.09 200)}

/* ---------- featured (éditorial, non-grille) ---------- */
.section-head{max-width:1180px;margin:0 auto;padding-inline:var(--pagepad);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0}
.section-head .kicker{font-weight:700;color:var(--tang-d);margin:0 0 .2em}
.featured{max-width:1180px;margin:18px auto clamp(40px,6vw,80px);padding-inline:var(--pagepad);
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.feat-main{text-decoration:none;color:var(--ink);display:block;border-radius:26px;overflow:hidden;background:var(--paper);
  box-shadow:0 18px 40px oklch(0.5 0.08 50 / 0.10);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.feat-main:hover{transform:translateY(-5px);color:var(--ink)}
.feat-cover{aspect-ratio:16/10;display:grid;place-items:center;position:relative;overflow:hidden}
.feat-cover img,.feat-item .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.feat-main:hover .feat-cover img{transform:scale(1.03)}
.feat-cover img{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.feat-body{padding:24px 26px 28px}
.feat-body .tag{display:inline-block;font-weight:700;font-size:.82rem;color:var(--tang-d);background:oklch(0.705 0.18 48 / 0.14);padding:.3em .8em;border-radius:99px;margin-bottom:.7em}
.feat-body h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 .35em}
.feat-body p{color:var(--ink-soft);margin:0}
.feat-list{display:flex;flex-direction:column;gap:6px}
.feat-item{text-decoration:none;color:var(--ink);display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;
  padding:16px;border-radius:18px;transition:background .2s}
.feat-item:hover{background:var(--paper);color:var(--ink)}
.feat-item .thumb{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem}
.feat-item h4{font-size:1.12rem;margin:0 0 .15em;line-height:1.15}
.feat-item span{color:var(--ink-soft);font-size:.92rem}

/* ---------- reassurance (adresse les peurs) ---------- */
.reassure{background:var(--paper);border-block:1px solid var(--line)}
.reassure-in{max-width:1180px;margin-inline:auto;padding:clamp(40px,6vw,72px) var(--pagepad)}
.reassure h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:18ch;margin:0 0 1.6rem}
.fear-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,2.5vw,30px)}
.fear h3{font-size:1.2rem;margin:0 0 .3em;display:flex;align-items:center;gap:.5em}
.fear h3::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--leaf);flex:none;rotate:8deg}
.fear p{color:var(--ink-soft);margin:0}

/* ---------- newsletter ---------- */
.news{max-width:1180px;margin:clamp(40px,6vw,80px) auto;padding-inline:var(--pagepad)}
.news-in{background:linear-gradient(135deg, var(--tang), var(--tang-d));color:var(--cream);
  border-radius:28px;padding:clamp(30px,5vw,56px);display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
.news-in h2{color:var(--cream);font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 .3em}
.news-in p{color:oklch(0.95 0.03 80);margin:0;max-width:36ch}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1 1 200px;min-height:52px;border:none;border-radius:99px;padding:0 20px;font-size:1rem;font-family:inherit;color:var(--ink)}
.news .btn-pri{background:var(--ink);color:var(--cream)}

/* ---------- article (lecture) ---------- */
article{max-width:var(--read);margin:8px auto;padding-inline:var(--pagepad)}
article .hero{display:block;text-align:left;margin:0 auto;padding-inline:0;max-width:none}
.byline{color:var(--ink-soft);font-size:.95rem;font-weight:600;margin:.2em 0 .6em}
.tldr{background:var(--paper);border:2px solid var(--sun);border-radius:20px;padding:20px 24px;margin:22px 0}
.tldr h2{margin:.1em 0 .4em;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tang-d)}
.tldr ul,article ul,article ol{padding-left:1.25em}
.tldr li,article li{margin:.35em 0}
article h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:1.7em 0 .4em}
.note{font-size:.92rem;color:var(--ink-soft);background:var(--cream-2);border-radius:12px;padding:12px 16px}
.cta{margin:2em 0}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:oklch(0.9 0.02 75);margin-top:clamp(48px,8vw,90px)}
.site-foot .wrap{padding-block:40px}
.site-foot a{color:var(--sun)}
.site-foot .foot-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.site-foot .brand{color:var(--cream)}
.site-foot .editeur{font-size:.95rem;max-width:48ch}
.site-foot .mentions{font-size:.84rem;color:oklch(0.78 0.02 75)}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{animation:rise .7s cubic-bezier(.22,1,.36,1) both}
.reveal:nth-child(2){animation-delay:.06s}.reveal:nth-child(3){animation-delay:.12s}.reveal:nth-child(4){animation-delay:.18s}

@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:420px}
  .featured{grid-template-columns:1fr}
  .news-in{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}