:root{
  --bg:#f5f6f7;
  --panel:#ffffff;
  --ink:#1d2a36;
  --muted:#546472;
  --line:#dbe5e8;
  --teal:#6aa8ad;
  --teal-dark:#4a8188;
  --soft:#eff7f8;
  --soft-peach:#fff4ec;
  --shadow:0 12px 30px rgba(29,42,54,.08);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Fredoka',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 480px at 90% 0%, #eef7f7, transparent 55%),
    radial-gradient(900px 520px at 0% 100%, #fff4ed, transparent 58%),
    var(--bg);
}
a{color:inherit}
img{max-width:100%; display:block}
.container{width:min(1080px, calc(100% - 32px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800}
.brand-dot{width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--teal),#8ad5d0); box-shadow:0 0 0 8px rgba(106,168,173,.14)}
.brand-name{font-size:1.2rem}
.header-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nav-link{padding:10px 12px; border-radius:14px; text-decoration:none; color:var(--muted); font-weight:600}
.nav-link:hover{background:rgba(106,168,173,.10); color:var(--ink)}
.nav-cta{background:linear-gradient(135deg,var(--teal),#7fc1c5); color:#fff!important}
.hero{padding:42px 0 20px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start}
.hero-copy,.hero-side .mini-card,.intro-box,.card,.step-card,.feature-card,.note-box,.trousse-box,.final-cta,details{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-copy{padding:28px}
.breadcrumbs{font-size:14px; color:var(--muted); margin:0 0 12px}
.breadcrumbs a{text-decoration:none; color:var(--teal-dark); font-weight:700}
.kicker,.section-tag,.small-label,.eyebrow{
  display:inline-flex; align-items:center;
  padding:7px 12px; border-radius:999px;
  background:rgba(106,168,173,.12);
  color:var(--teal-dark);
  font-size:14px; font-weight:700;
}
h1{font-size:clamp(2.3rem,4.7vw,4rem); line-height:1.02; margin:12px 0 16px}
h2{font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.1; margin:0 0 14px}
h3{font-size:1.25rem; margin:0 0 8px}
p, li{font-size:1.1rem; line-height:1.7; color:var(--muted)}
p{margin:10px 0}
strong{color:var(--ink)}
.lead{font-size:1.25rem; color:#42515e}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.centered{justify-content:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 18px; border-radius:16px; text-decoration:none;
  font-weight:700; border:1px solid var(--line); transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--teal),#84c8cb); color:#fff; border-color:transparent}
.btn-ghost{background:#fff; color:var(--ink)}
.micro{font-size:14px; margin-top:14px}
.hero-side{display:grid; gap:16px}
.mini-card{padding:20px}
.trousse-logo{width:min(100%, 380px); margin:0 auto 12px}
.trousse-logo.small{width:260px; margin:0}
.mini-title{font-size:1.02rem; font-weight:700; color:var(--ink); margin:0 0 6px}
.text-link{font-weight:700; color:var(--teal-dark); text-decoration:none}
.text-link:hover{text-decoration:underline}
.section{padding:26px 0}
.intro-box{padding:22px; display:grid; grid-template-columns:160px 1fr; gap:22px; align-items:center}
.audrey-avatar-wrap{display:flex; justify-content:center}
.audrey-avatar{width:140px; height:140px; object-fit:cover; border-radius:50%; border:4px solid #fff; box-shadow:0 10px 24px rgba(29,42,54,.12)}
.cards{display:grid; gap:16px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{padding:20px}
.icon-badge{width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:var(--soft); font-size:24px; margin-bottom:12px}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step-card{padding:22px; position:relative}
.step-no{width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--teal),#84c8cb); color:#fff; font-weight:700; margin-bottom:14px}
.note-box{padding:20px; margin-top:16px; background:linear-gradient(180deg,var(--soft),#fff)}
.feature-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:stretch}
.feature-card{padding:26px; display:grid; align-content:center; background:linear-gradient(135deg,var(--soft-peach),#fff)}
.big-quote{font-size:1.6rem; line-height:1.35; color:var(--ink); margin:6px 0 0}
.feature-image-card{background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px; display:flex; align-items:center; justify-content:center}
.feature-image-card img{width:100%; height:auto; border-radius:18px; display:block}
.checklist{list-style:none; padding:0; margin:14px 0 0}
.checklist li{position:relative; padding-left:28px; margin:8px 0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--teal-dark); font-weight:700}
.trousse-box{padding:22px; display:grid; grid-template-columns:280px 1fr; gap:22px; align-items:center}
.faq-list{display:grid; gap:12px}
details{padding:16px 18px}
summary{cursor:pointer; font-weight:700; font-size:1.12rem; color:var(--ink)}
details p{margin-bottom:0; margin-top:10px}
.final-cta{padding:30px; text-align:center; background:linear-gradient(180deg,#fff,#eef7f7); margin-bottom:24px}
.site-footer{border-top:1px solid var(--line); background:rgba(255,255,255,.85); padding:26px 0}
.footer-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:18px}
.footer-title{font-size:1.15rem; font-weight:700; margin:0 0 8px}
.footer-text{font-size:1rem; margin:0}
.footer-links{list-style:none; margin:0; padding:0}
.footer-links li{margin:8px 0}
.footer-links a{text-decoration:none; color:var(--muted)}
.footer-links a:hover{text-decoration:underline; color:var(--teal-dark)}
@media (max-width:900px){
  .hero-grid,.cards-3,.steps-grid,.feature-grid,.trousse-box,.footer-grid{grid-template-columns:1fr}
  .intro-box{grid-template-columns:1fr; text-align:left}
  .audrey-avatar-wrap{justify-content:flex-start}
}
@media (max-width:640px){
  .container{width:min(100% - 22px, 1080px)}
  .header-row{flex-direction:column; align-items:flex-start}
  .hero{padding-top:24px}
  .hero-copy,.hero-side .mini-card,.intro-box,.card,.step-card,.feature-card,.note-box,.trousse-box,.final-cta,details{border-radius:20px}
  p,li{font-size:1.02rem}
  .lead{font-size:1.14rem}
  .btn{width:100%}
  .trousse-logo.small{width:220px}
}

.feature-image-link{text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.feature-image-link:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(29,42,54,.12)}


/* Ajustements ton blog : moins institutionnel, plus lecture calme */
.hero-copy{
  position:relative;
}
.hero-copy::after{
  content:"";
  position:absolute;
  right:24px;
  bottom:18px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(106,168,173,.12), transparent 68%);
  pointer-events:none;
}
.blog-note{
  background:linear-gradient(180deg,#fff,var(--soft));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-top:16px;
}
.blog-note p{
  margin:0;
}
.card--simple .icon-badge{
  width:42px;
  height:42px;
  border-radius:14px;
  font-size:21px;
}
.trousse-logo{
  width:min(100%, 420px);
}
.feature-text{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px;
}
.mini-card-logo{
  overflow:hidden;
}
.mini-card-logo .trousse-logo{
  margin-bottom:16px;
}
@media (max-width:640px){
  .feature-text{padding:20px}
}