/* ===================== Maison Lila — bento / dashboard doux ===================== */
:root{
  --display: 'Quicksand', sans-serif;
  --body: 'Mulish', sans-serif;
  --ink: #2D2B3A;
  --ink-soft: #5B5770;
  --bg: #FAF9F6;
  --card-bg: #FFFFFF;
  --accent: #8A6FAE;
  --accent-dark: #6E5590;
  --lilac: #EAE1F5;
  --peach: #FFE3D1;
  --mint: #D9F2E6;
  --butter: #FFF3C4;
  --sky: #DCEBFF;
  --radius: 28px;
  --radius-sm: 18px;
  --shadow: 0 10px 30px -12px rgba(45,43,58,.16);
  --shadow-lg: 0 18px 44px -16px rgba(45,43,58,.22);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  margin:0;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family: var(--display); font-weight:700; color:var(--ink); line-height:1.2; margin:0 0 .5em; }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{width:min(1240px, calc(100% - 40px));margin-left:auto;margin-right:auto;}

/* ---- reveal on-load ---- */
.reveal{ opacity:0; transform:translateY(16px) scale(.99); transition:opacity .7s ease-out, transform .7s ease-out; }
.reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }

/* ===================== HEADER ===================== */
.ml-header{ background:var(--bg); position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(45,43,58,.06); }
.ml-header-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; }
.ml-logo{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:20px; }
.ml-logo img{ border-radius:10px; }
.ml-logo em{ font-style:normal; color:var(--accent); }
.ml-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.ml-nav a{ font-weight:600; font-size:15px; padding:8px 4px; }
.ml-nav a:hover{ color:var(--accent); }
.ml-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.ml-burger span{ width:22px; height:2px; background:var(--ink); display:block; border-radius:2px; }
.ml-nav-mobile{ display:none; flex-direction:column; padding:0 20px 16px; }
.ml-nav-mobile a{ padding:10px 0; font-weight:600; border-bottom:1px solid rgba(45,43,58,.06); }

@media (max-width: 860px){
  .ml-nav{ display:none; }
  .ml-burger{ display:flex; }
  .ml-header.is-open .ml-nav-mobile{ display:flex; }
}

/* ===================== BUTTONS / LINKS ===================== */
.ml-btn{ display:inline-flex; align-items:center; gap:8px; padding:16px 30px; border-radius:999px; font-weight:700; font-size:15px; transition:.18s ease; }
.ml-btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow); }
.ml-btn--primary:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.ml-btn--ghost{ background:#fff; color:var(--accent-dark); border:2px solid var(--lilac); }
.ml-btn--ghost:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.ml-link{ display:inline-block; margin-top:14px; font-weight:700; color:var(--accent-dark); }
.ml-link:hover{ text-decoration:underline; }
.ml-kicker{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--accent-dark); margin:0 0 8px; }

/* ===================== HERO ===================== */
.ml-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:min(1240px, calc(100% - 40px)); margin:32px auto 60px; }
.ml-hero-badge{ display:inline-block; background:var(--lilac); color:var(--accent-dark); font-weight:700; font-size:13px; padding:8px 16px; border-radius:999px; margin-bottom:18px; }
.ml-hero h1{ font-size:clamp(32px,4.2vw,52px); margin-bottom:18px; }
.ml-hero-dek{ font-size:17px; color:var(--ink-soft); max-width:52ch; margin-bottom:26px; }
.ml-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.ml-hero-media{ position:relative; }
.ml-hero-media img{ width:100%; height:min(72vh,620px); object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
@media (max-width:900px){ .ml-hero{ grid-template-columns:1fr; } .ml-hero-media img{ height:340px; } }

/* ===================== ABOUT / QUI SOMMES-NOUS ===================== */
.ml-about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; width:min(1240px, calc(100% - 40px)); margin:0 auto 70px; }
.ml-about-media img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; height:420px; object-fit:cover; }
@media (max-width:900px){ .ml-about{ grid-template-columns:1fr; } .ml-about-media img{ height:280px; } }

/* ===================== GUIDE (comparateur + timeline) ===================== */
.ml-guide{ width:min(1240px, calc(100% - 40px)); margin:0 auto 70px; background:var(--lilac); border-radius:var(--radius); padding:48px; }
.ml-section-head{ text-align:center; margin-bottom:34px; }
.ml-guide-sub{ text-align:center; margin:44px 0 30px; font-size:22px; }

.cmp-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cmp-stat-item{ background:#fff; border-radius:var(--radius-sm); padding:24px; text-align:center; box-shadow:var(--shadow); }
.cmp-stat-num{ display:block; font-family:var(--display); font-weight:700; font-size:34px; color:var(--accent-dark); }
.cmp-stat-label{ font-size:13px; color:var(--ink-soft); }
@media (max-width:760px){ .cmp-stat-grid{ grid-template-columns:1fr 1fr; } }

.cmp-bar-list{ display:flex; flex-direction:column; gap:14px; }
.cmp-bar-item{ background:#fff; border-radius:var(--radius-sm); padding:16px 20px; }
.cmp-bar-track{ background:var(--sky); border-radius:999px; height:10px; margin-top:8px; overflow:hidden; }
.cmp-bar-fill{ background:var(--accent); height:100%; border-radius:999px; transition:width 1.2s ease; }

.cmp-matrix-scroll{ overflow-x:auto; }
.cmp-matrix-card{ width:100%; min-width:520px; border-collapse:collapse; background:#fff; border-radius:var(--radius-sm); overflow:hidden; }
.cmp-matrix-card td{ padding:14px 18px; }
.cmp-matrix-bar{ background:var(--sky); border-radius:999px; height:10px; overflow:hidden; }
.cmp-matrix-bar-fill{ background:var(--accent); height:100%; }

.gauge-row{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.gauge{ background:#fff; border-radius:var(--radius-sm); padding:20px 28px; text-align:center; box-shadow:var(--shadow); }
.gauge strong{ display:block; font-family:var(--display); font-size:28px; color:var(--accent-dark); }

/* Timeline zigzag (variant 1 — used on this site) */
.tl-zigzag{ display:flex; flex-direction:column; gap:0; max-width:920px; margin:0 auto; }
.tl-zigzag-item{ display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; min-height:96px; }
.tl-zigzag-dot{ width:16px; height:16px; border-radius:50%; background:var(--accent); margin:auto; box-shadow:0 0 0 6px #fff, 0 0 0 8px var(--lilac); }
.tl-zigzag-card{ background:#fff; border-radius:var(--radius-sm); padding:18px 22px; box-shadow:var(--shadow); }
.tl-zigzag-item--l .tl-zigzag-card{ grid-column:1; text-align:right; }
.tl-zigzag-item--r{ direction:rtl; }
.tl-zigzag-item--r .tl-zigzag-card{ grid-column:3; direction:ltr; text-align:left; }
.tl-zigzag-item--l > *:nth-child(3), .tl-zigzag-item--r > *:nth-child(1){ visibility:hidden; }
@media (max-width:700px){
  .tl-zigzag-item, .tl-zigzag-item--r{ grid-template-columns:44px 1fr; direction:ltr; }
  .tl-zigzag-item--l .tl-zigzag-card, .tl-zigzag-item--r .tl-zigzag-card{ grid-column:2; text-align:left; }
  .tl-zigzag-dot{ grid-column:1; }
}

/* Timeline axis (variant 2, kept for dispatcher completeness) */
.tl-axis-scroll{ overflow-x:auto; scroll-snap-type:x mandatory; position:relative; }
.tl-axis{ display:flex; gap:26px; padding:40px 10px; position:relative; }
.tl-axis:before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--lilac); }
.tl-axis-item{ scroll-snap-align:start; scroll-snap-stop:always; min-width:220px; display:flex; flex-direction:column; align-items:center; }
.tl-axis-dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); }
.tl-axis-card{ background:#fff; border-radius:var(--radius-sm); padding:16px; box-shadow:var(--shadow); margin-top:10px; }
.tl-hscroll{ display:flex; gap:18px; }
.tl-card{ background:#fff; min-width:220px; border-radius:var(--radius-sm); padding:18px; box-shadow:var(--shadow); }
[data-hscroll]{ position:relative; }
[data-hscroll]:before, [data-hscroll]:after{ content:""; position:absolute; top:0; bottom:0; width:36px; pointer-events:none; opacity:0; transition:opacity .2s; z-index:2; }
[data-hscroll]:before{ left:0; background:linear-gradient(90deg, var(--lilac), transparent); }
[data-hscroll]:after{ right:0; background:linear-gradient(-90deg, var(--lilac), transparent); }
[data-hscroll].is-scrolled:before{ opacity:1; }
[data-hscroll]:not(.is-end):after{ opacity:1; }

/* ===================== IMAGE-TEXTE ===================== */
.ml-imgtext{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; width:min(1240px, calc(100% - 40px)); margin:0 auto 70px; }
.ml-imgtext--rev{ direction:rtl; }
.ml-imgtext--rev > *{ direction:ltr; }
.ml-imgtext-media img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; height:380px; object-fit:cover; }
@media (max-width:900px){ .ml-imgtext{ grid-template-columns:1fr; direction:ltr!important; } .ml-imgtext-media img{ height:260px; } }

/* ===================== TÉMOIGNAGES ===================== */
.ml-testi{ width:min(1240px, calc(100% - 40px)); margin:0 auto 70px; }
.ml-testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ml-testi-card{ position:relative; border-radius:var(--radius); padding:30px 26px; margin:0; box-shadow:var(--shadow); }
.ml-testi-card p{ font-size:15px; color:var(--ink-soft); }
.ml-testi-quote-mark{ font-family:var(--display); font-size:46px; color:var(--accent); opacity:.35; line-height:1; }
.ml-testi-card footer strong{ display:block; font-family:var(--display); }
.ml-testi-card footer span{ font-size:13px; color:var(--ink-soft); }
.ml-tint-0{ background:var(--lilac); } .ml-tint-1{ background:var(--peach); } .ml-tint-2{ background:var(--mint); } .ml-tint-3{ background:var(--butter); }
@media (max-width:900px){ .ml-testi-grid{ grid-template-columns:1fr; } }

/* ===================== RUBRIQUES (bento category blocks) ===================== */
.ml-cats{ width:min(1240px, calc(100% - 40px)); margin:0 auto; }
.bcp{ margin-bottom:64px; padding:40px; border-radius:var(--radius); background:var(--card-bg); box-shadow:var(--shadow); }
.bcp-head{ margin-bottom:24px; }
.bcp-head--center{ text-align:center; }
.bcp-kicker{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--accent-dark); }
.bcp-desc{ color:var(--ink-soft); max-width:64ch; }
.bcp-link{ display:inline-block; margin-top:20px; font-weight:700; color:var(--accent-dark); }
.bcp-link--center{ display:block; text-align:center; }
.bcp-tile{ display:block; border-radius:var(--radius-sm); overflow:hidden; box-shadow:0 6px 18px -8px rgba(45,43,58,.14); transition:transform .2s, box-shadow .2s; }
.bcp-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.bcp-tile-photo{ display:block; }
.bcp-tile-photo img{ width:100%; height:180px; object-fit:cover; display:block; }
.bcp-tile h4{ font-size:16px; margin:14px 16px 4px; }
.bcp-tile p{ font-size:13px; color:var(--ink-soft); margin:0 16px 16px; }

/* variant 0 — feature bento */
.bcp-bento-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:auto auto; gap:20px; }
.bcp-tile--big{ grid-row:span 2; background:var(--lilac); }
.bcp-tile--small{ padding:22px 18px; }
.bcp-tile--small h4{ margin:10px 0 0; }
.bcp-tile-icon{ font-size:22px; color:var(--accent); }
.bcp-tint-0{ background:var(--peach); } .bcp-tint-1{ background:var(--mint); } .bcp-tint-2{ background:var(--sky); }
@media (max-width:900px){ .bcp-bento-grid{ grid-template-columns:1fr; } .bcp-tile--big{ grid-row:auto; } }

/* variant 1 — stat dashboard */
.bcp-chip-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.bcp-chip{ background:var(--butter); border-radius:999px; padding:8px 18px; font-size:13px; font-weight:700; color:var(--ink); }
.bcp-rail-scroll{ overflow-x:auto; scroll-snap-type:x mandatory; }
.bcp-rail{ display:flex; gap:20px; padding-bottom:8px; }
.bcp-tile--rail{ min-width:240px; scroll-snap-align:start; scroll-snap-stop:always; background:var(--mint); flex:0 0 auto; }
.bcp-pastel-chip{ display:inline-block; margin:12px 16px 0; background:#fff; color:var(--accent-dark); font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; }

/* variant 2 — split spotlight */
.bcp-split{ display:grid; grid-template-columns:1.2fr 1fr; gap:30px; }
.bcp-tile--spotlight{ background:var(--sky); padding-bottom:20px; }
.bcp-tile--spotlight h4{ font-size:20px; }
.bcp-list-col h3{ margin-bottom:6px; }
.bcp-list-item{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(45,43,58,.08); font-weight:600; }
.bcp-list-item time{ color:var(--ink-soft); font-weight:400; font-size:13px; }
@media (max-width:900px){ .bcp-split{ grid-template-columns:1fr; } }

/* variant 3 — masonry bento */
.bcp-masonry{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:160px; gap:18px; }
.bcp-mas{ position:relative; }
.bcp-mas .bcp-tile-photo, .bcp-mas .bcp-tile-photo img{ height:100%; }
.bcp-mas h4, .bcp-mas .bcp-pastel-chip{ position:absolute; left:14px; z-index:2; margin:0; }
.bcp-mas .bcp-pastel-chip{ top:12px; }
.bcp-mas h4{ bottom:12px; right:14px; left:14px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); background:none; margin:0; padding:0; }
.bcp-mas--tall{ grid-row:span 2; }
.bcp-mas--wide{ grid-column:span 2; }
@media (max-width:760px){ .bcp-masonry{ grid-template-columns:1fr 1fr; } .bcp-mas--wide{ grid-column:span 2; } }

/* ===================== RESSOURCES EXTERNES ===================== */
.ml-resources{ width:min(1240px, calc(100% - 40px)); margin:70px auto; }
.ml-resources-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ml-resource-card{ background:var(--sky); border-radius:var(--radius-sm); padding:22px; box-shadow:var(--shadow); transition:transform .2s; }
.ml-resource-card:hover{ transform:translateY(-3px); }
.ml-resource-card p{ font-size:13px; color:var(--ink-soft); margin:8px 0 0; }
@media (max-width:900px){ .ml-resources-grid{ grid-template-columns:1fr; } }

/* ===================== FOOTER ===================== */
.ml-footer{ background:#fff; margin-top:60px; padding-top:56px; border-top:1px solid rgba(45,43,58,.06); }
.ml-footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding-bottom:36px; }
.ml-footer-col h4{ font-size:15px; margin-bottom:14px; }
.ml-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ml-footer-col a{ color:var(--ink-soft); font-size:14px; }
.ml-footer-col a:hover{ color:var(--accent-dark); }
.ml-footer-brand p{ color:var(--ink-soft); font-size:14px; max-width:34ch; }
.ml-footer-note{ font-size:12px; color:var(--ink-soft); padding:16px 0; border-top:1px solid rgba(45,43,58,.06); }
.ml-footer-bottom{ display:flex; justify-content:space-between; padding:18px 0; font-size:13px; color:var(--ink-soft); }
@media (max-width:860px){ .ml-footer-cols{ grid-template-columns:1fr 1fr; } }

/* ===================== ARTICLE / SINGLE ===================== */
.ml-main--single, .ml-main--page{ width:min(820px, calc(100% - 40px)); margin:44px auto 80px; }
.ml-article-cat{ display:inline-block; background:var(--lilac); color:var(--accent-dark); font-weight:700; font-size:12px; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.ml-article-header h1{ font-size:clamp(26px,4vw,40px); }
.ml-article-meta{ color:var(--ink-soft); font-size:14px; }
.ml-article-cover img{ width:100%; border-radius:var(--radius); margin:22px 0; height:400px; object-fit:cover; }
.ml-article-content h2{ margin-top:1.6em; font-size:24px; }
.ml-article-content p{ font-size:17px; color:var(--ink-soft); }
.bt-disclaimer{ background:var(--butter); border-radius:var(--radius-sm); padding:20px 24px; margin-top:40px; font-size:14px; }
.bt-disclaimer p{ margin:0; color:var(--ink); }

/* FAQ accordion */
.faq-block{ margin-top:20px; }
.faq-item{ background:#fff; border:1px solid rgba(45,43,58,.1); border-radius:var(--radius-sm); padding:6px 22px; margin-bottom:14px; }
.faq-item summary{ cursor:pointer; font-family:var(--display); font-weight:700; padding:16px 0; list-style:none; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:after{ content:"+"; position:absolute; right:0; top:14px; font-size:22px; color:var(--accent); transition:transform .2s; }
.faq-item[open] summary:after{ content:"–"; }
.faq-answer{ padding-bottom:18px; color:var(--ink-soft); }

/* ===================== CATEGORY / ARCHIVE LISTS ===================== */
.ml-main--category, .ml-main--archive{ width:min(1240px, calc(100% - 40px)); margin:44px auto 80px; }
.ml-cat-hero{ text-align:center; margin-bottom:44px; }
.ml-cat-kicker{ font-family:var(--display); font-weight:700; text-transform:uppercase; color:var(--accent-dark); letter-spacing:.08em; font-size:13px; }
.ml-articles-grid{ display:grid; gap:24px; }
.ml-articles-grid--3{ grid-template-columns:repeat(3,1fr); }
.ml-article-card{ display:block; background:#fff; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s; }
.ml-article-card:hover{ transform:translateY(-4px); }
.ml-article-thumb img{ width:100%; height:190px; object-fit:cover; display:block; }
.ml-article-card h3{ font-size:16px; margin:16px 16px 6px; }
.ml-article-card p{ font-size:13px; color:var(--ink-soft); margin:0 16px 16px; }
@media (max-width:900px){ .ml-articles-grid--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .ml-articles-grid--3{ grid-template-columns:1fr; } }