/* ===================================================================
   AIDEDEVOIRS.FR · Parent SEO Sprint 1 · style.css — REFONTE WOW
   Aligné DS V2 Allo Education : chrome VIOLET (violet→coral),
   accents sémantiques (gold = maintenant, mint = ce qui aide,
   coral = à éviter, sky = à dire). Sans header/footer (sites déjà
   en place). max-width 1120, responsive, mobile-first.
   =================================================================== */
.ecp-page {
  /* — DS V2 tokens — */
  --violet:#7B61FF;   --violet-deep:#5538D9;   --violet-soft:#EDE9FF;
  --coral:#FF6B7E;    --coral-deep:#F0496B;
  --gold:#FFB73D;     --gold-deep:#F59300;     --gold-soft:#FFF1D6;
  --mint:#1FCBB0;     --mint-deep:#0E9C84;     --mint-soft:#E4FBF4;
  --sky:#4DA8FF;      --sky-deep:#2486E6;      --sky-soft:#EAF5FF;
  --magenta:#B23CE0;

  --ink:#241D49;      --ink-soft:#4a4470;      --muted:#8E89AE;
  --bg:#F2F1FA;       --surface:#F7F6FC;       --card:#FFFFFF;
  --line:#E8E5F4;     --line-strong:#DAD3F0;

  --display:'Nunito','Trebuchet MS',sans-serif;
  --body:'DM Sans','Segoe UI',system-ui,sans-serif;

  --r-sm:11px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --sh-sm:0 8px 20px -14px rgba(50,32,110,.5);
  --sh-md:0 18px 38px -24px rgba(50,32,110,.55);
  --sh-lg:0 28px 60px -30px rgba(50,32,110,.6);
  --ease:cubic-bezier(.2,1.3,.4,1);
  --ease-soft:cubic-bezier(.34,1.15,.5,1);
  --maxw:1120px;
  --read:780px;
}
.ecp-page * {box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
.ecp-page {scroll-behavior:smooth}
.ecp-page {
  font-family:var(--body); color:var(--ink); line-height:1.62; font-size:17px;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
  background:
    radial-gradient(820px 520px at 8% -8%, rgba(123,97,255,.18), transparent 60%),
    radial-gradient(700px 520px at 100% 2%, rgba(255,107,126,.13), transparent 62%),
    radial-gradient(680px 600px at 50% 120%, rgba(31,203,176,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  padding-bottom:50px;
}
.ecp-page img {max-width:100%;display:block}
.ecp-page a {color:var(--violet-deep)}
.ecp-page a:focus-visible, .ecp-page button:focus-visible, .ecp-page summary:focus-visible {
  outline:3px solid var(--violet); outline-offset:2px; border-radius:8px;
}
.ecp-page h1, .ecp-page h2, .ecp-page h3 {font-family:var(--display); color:var(--ink); line-height:1.14; letter-spacing:-.015em; text-wrap:balance}
.ecp-page h1 {font-size:clamp(30px,5.2vw,46px); font-weight:900}
.ecp-page h2 {font-size:clamp(23px,3.4vw,30px); font-weight:900; margin-top:6px}
.ecp-page h3 {font-size:clamp(17px,2.4vw,20px); font-weight:800}
.ecp-page p {margin:0}
.ecp-page .wrap {max-width:var(--maxw); margin:0 auto; padding:0 22px}
.ecp-page .prose {max-width:var(--read)}
/* ============ Prototype page switcher (flottant, propre) ============ */
.ecp-page .proto-tabs {position:sticky; top:14px; z-index:35; max-width:var(--maxw); margin:14px auto 0; padding:0 22px}
.ecp-page .proto-tabs .inner {display:flex; gap:6px; padding:7px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:16px; overflow-x:auto; scrollbar-width:none; box-shadow:var(--sh-md)}
.ecp-page .proto-tabs .inner::-webkit-scrollbar {display:none}
.ecp-page .proto-tabs button {flex:0 0 auto; font-family:var(--display); font-weight:800; font-size:12px; color:var(--muted); background:transparent; border:none; border-radius:10px; padding:9px 14px; cursor:pointer; white-space:nowrap; transition:.18s var(--ease)}
.ecp-page .proto-tabs button:hover {color:var(--violet-deep); background:var(--surface)}
.ecp-page .proto-tabs button[aria-current="true"] {background:linear-gradient(135deg,var(--violet),var(--violet-deep)); color:#fff; box-shadow:0 8px 16px -7px var(--violet)}
.ecp-page .proto-note {font-size:11px; color:var(--muted); padding:9px 22px 0; text-align:center; max-width:var(--maxw); margin:0 auto}
/* page visibility */
.ecp-page .page {display:none}
.ecp-page .page.is-active {display:block; animation:fade .4s var(--ease)}
@keyframes fade {from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.ecp-page main {display:block}
/* ============ Breadcrumb ============ */
.ecp-page .breadcrumb {padding:22px 0 4px}
.ecp-page .breadcrumb ol {list-style:none; display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:12.5px; font-weight:600; color:var(--muted)}
.ecp-page .breadcrumb a {color:var(--muted); text-decoration:none}
.ecp-page .breadcrumb a:hover {color:var(--violet-deep); text-decoration:underline}
.ecp-page .breadcrumb .sep {opacity:.5}
.ecp-page .breadcrumb [aria-current] {color:var(--violet-deep); font-weight:800}
/* ============ Hero Parent — WOW ============ */
.ecp-page .hero {position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(28px,4vw,52px); margin:14px 0 26px;
  background:linear-gradient(150deg, #fff 0%, var(--violet-soft) 60%, #FBE9EC 100%);
  border:1px solid var(--line); box-shadow:var(--sh-lg)}
.ecp-page .hero::before {content:""; position:absolute; right:-80px; top:-90px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(123,97,255,.28), transparent 68%); pointer-events:none}
.ecp-page .hero::after {content:""; position:absolute; left:-60px; bottom:-90px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,126,.22), transparent 68%); pointer-events:none}
.ecp-page .hero > * {position:relative}
.ecp-page .hero .eyebrow {display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:900; font-size:12px;
  letter-spacing:.02em; color:var(--violet-deep); background:linear-gradient(180deg,#fff,var(--violet-soft));
  border:1px solid var(--line-strong); border-radius:99px; padding:7px 14px; margin-bottom:16px; box-shadow:var(--sh-sm)}
.ecp-page .hero .eyebrow svg {color:var(--coral)}
.ecp-page .hero h1 {margin-bottom:14px; max-width:18ch}
.ecp-page .hero h1 .g {background:linear-gradient(95deg,var(--violet),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ecp-page .hero .lead {font-size:clamp(16px,1.6vw,19px); line-height:1.55; color:var(--ink-soft); max-width:56ch; margin-bottom:24px}
.ecp-page .hero .actions {display:flex; flex-wrap:wrap; gap:12px}
/* ============ Buttons (DS V2 sweep) ============ */
.ecp-page .btn {font-family:var(--display); font-weight:900; font-size:15px; border-radius:14px; padding:14px 22px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px; border:1.6px solid transparent;
  position:relative; overflow:hidden; transition:transform .15s var(--ease), filter .15s, box-shadow .2s}
.ecp-page .btn:active {transform:scale(.97)}
.ecp-page .btn-primary {color:#fff; background:linear-gradient(135deg,var(--violet),var(--coral));
  box-shadow:0 14px 26px -10px rgba(123,97,255,.85), inset 0 2px 3px rgba(255,255,255,.35)}
.ecp-page .btn-primary:hover {transform:translateY(-2px); filter:brightness(1.06)}
.ecp-page .btn-primary::after {content:""; position:absolute; top:0; left:-45%; width:26%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:sweep 3s ease-in-out infinite}
@keyframes sweep {0%{left:-45%}55%,100%{left:135%}}
.ecp-page .btn-ghost {color:var(--violet-deep); background:linear-gradient(180deg,#fff,var(--surface)); border-color:var(--line-strong); box-shadow:var(--sh-sm)}
.ecp-page .btn-ghost:hover {border-color:var(--violet); transform:translateY(-2px)}
.ecp-page .btn-warm {color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); box-shadow:0 14px 26px -10px rgba(245,147,0,.7)}
.ecp-page .btn-warm:hover {transform:translateY(-2px); filter:brightness(1.05)}
/* ============ Sections ============ */
.ecp-page section {padding:24px 0}
.ecp-page .section-kicker {display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:900; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--violet-deep); margin-bottom:10px}
.ecp-page .section-kicker::before {content:"◆"; color:var(--coral); font-size:8px}
.ecp-page .prose p {margin:14px 0; color:var(--ink-soft)}
.ecp-page .prose h2 {margin:30px 0 6px}
.ecp-page .prose h3 {margin:22px 0 4px}
.ecp-page .prose ul {margin:14px 0 14px 4px; padding-left:22px; color:var(--ink-soft)}
.ecp-page .prose li {margin:8px 0}
.ecp-page .prose strong {color:var(--ink); font-weight:700}
/* ============ "Maintenant" — Checklist (gold) ============ */
.ecp-page .now-block {position:relative; overflow:hidden; background:linear-gradient(160deg,var(--gold-soft),#fff); border:1px solid #F6DCAE;
  border-radius:var(--r-xl); padding:clamp(20px,2.5vw,28px); margin:18px 0; box-shadow:var(--sh-md)}
.ecp-page .now-block::before {content:""; position:absolute; right:-50px; top:-50px; width:150px; height:150px; border-radius:50%; background:rgba(255,183,61,.16)}
.ecp-page .now-block .head {position:relative; display:flex; align-items:center; gap:13px; margin-bottom:16px}
.ecp-page .now-block .ico {width:46px; height:46px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--gold),var(--gold-deep)); box-shadow:0 10px 20px -8px var(--gold), inset 0 2px 3px rgba(255,255,255,.4)}
.ecp-page .now-block h2 {font-size:21px; margin:0}
.ecp-page .checklist {position:relative; list-style:none; display:grid; gap:11px}
.ecp-page .checklist li {display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid #F6DCAE; border-radius:var(--r-md);
  padding:15px 17px; box-shadow:var(--sh-sm); transition:transform .16s var(--ease), box-shadow .2s}
.ecp-page .checklist li:hover {transform:translateY(-2px); box-shadow:var(--sh-md)}
.ecp-page .checklist .tick {flex:0 0 auto; width:28px; height:28px; border-radius:9px; background:var(--gold-soft); display:grid; place-items:center; margin-top:1px;
  font-family:var(--display); font-weight:900; color:var(--gold-deep); font-size:14px}
.ecp-page .checklist b {font-family:var(--display); display:block; color:var(--ink); font-size:15.5px}
.ecp-page .checklist small {color:var(--ink-soft); font-size:14px; line-height:1.5}
/* ============ Card douleur parent ============ */
.ecp-page .pain-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:15px; margin:18px 0}
.ecp-page .pain-card {position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--sh-sm); overflow:hidden; transition:transform .16s var(--ease), box-shadow .2s}
.ecp-page .pain-card::before {content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--coral),var(--coral-deep))}
.ecp-page .pain-card:hover {transform:translateY(-3px); box-shadow:var(--sh-md)}
.ecp-page .pain-card .q {font-family:var(--display); font-weight:900; color:var(--ink); font-size:16px; margin-bottom:7px}
.ecp-page .pain-card p {font-size:14.5px; color:var(--ink-soft)}
/* ============ Méthode 15/30/45 ============ */
.ecp-page .method {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; margin:18px 0}
.ecp-page .method-card {position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px;
  box-shadow:var(--sh-sm); overflow:hidden; transition:transform .16s var(--ease), box-shadow .2s}
.ecp-page .method-card:hover {transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--violet)}
.ecp-page .method-card .time {display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:900; font-size:15px;
  color:#fff; background:linear-gradient(135deg,var(--violet),var(--violet-deep)); border-radius:99px; padding:7px 14px; margin-bottom:13px;
  box-shadow:0 8px 16px -8px var(--violet)}
.ecp-page .method-card .time svg {color:#fff}
.ecp-page .method-card h3 {margin-bottom:10px}
.ecp-page .method-card ul {list-style:none; display:flex; flex-direction:column; gap:9px}
.ecp-page .method-card li {display:flex; gap:10px; font-size:14.5px; color:var(--ink-soft); align-items:flex-start}
.ecp-page .method-card li::before {content:""; flex:0 0 auto; width:7px; height:7px; border-radius:99px; background:var(--violet); margin-top:8px}
/* ============ "À dire à l'enfant" (sky) ============ */
.ecp-page .say-block {position:relative; overflow:hidden; background:linear-gradient(160deg,var(--sky-soft),#fff); border:1px solid #CFE6FB;
  border-radius:var(--r-xl); padding:clamp(20px,2.5vw,28px); margin:18px 0; box-shadow:var(--sh-md)}
.ecp-page .say-block::before {content:""; position:absolute; right:-50px; bottom:-50px; width:150px; height:150px; border-radius:50%; background:rgba(77,168,255,.14)}
.ecp-page .say-block .head {position:relative; display:flex; align-items:center; gap:13px; margin-bottom:16px}
.ecp-page .say-block .ico {width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--sky),var(--sky-deep));box-shadow:0 10px 20px -8px var(--sky), inset 0 2px 3px rgba(255,255,255,.4)}
.ecp-page .say-block h2 {font-size:21px;margin:0}
.ecp-page .say-list {position:relative; display:grid; gap:11px}
.ecp-page .say-list .quote {background:#fff; border:1px solid #CFE6FB; border-radius:var(--r-md); padding:14px 18px 14px 40px; font-size:15.5px;
  color:var(--ink); position:relative; box-shadow:var(--sh-sm)}
.ecp-page .say-list .quote::before {content:"“"; position:absolute; left:13px; top:6px; font-family:var(--display); font-weight:900; font-size:30px; color:var(--sky); line-height:1.4}
/* ============ "À éviter" (coral doux) ============ */
.ecp-page .avoid-block {position:relative; overflow:hidden; background:linear-gradient(160deg,#FFEEF0,#fff); border:1px solid #FBD0D7;
  border-radius:var(--r-xl); padding:clamp(20px,2.5vw,28px); margin:18px 0; box-shadow:var(--sh-md)}
.ecp-page .avoid-block .head {display:flex; align-items:center; gap:13px; margin-bottom:16px}
.ecp-page .avoid-block .ico {width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--coral),var(--coral-deep));box-shadow:0 10px 20px -8px var(--coral), inset 0 2px 3px rgba(255,255,255,.35)}
.ecp-page .avoid-block h2 {font-size:21px;margin:0}
.ecp-page .avoid-list {list-style:none; display:grid; gap:10px}
.ecp-page .avoid-list li {display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft); background:#fff;
  border:1px solid #FBD0D7; border-radius:var(--r-md); padding:13px 16px}
.ecp-page .avoid-list .x {flex:0 0 auto; width:25px; height:25px; border-radius:8px; background:#FFEEF0; display:grid; place-items:center; margin-top:1px}
/* ============ Prudence ============ */
.ecp-page .caution {display:flex; gap:14px; align-items:flex-start; background:#fff; border:1.5px dashed var(--line-strong);
  border-radius:var(--r-lg); padding:18px 20px; margin:18px 0; box-shadow:var(--sh-sm)}
.ecp-page .caution .ico {flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--surface); display:grid; place-items:center}
.ecp-page .caution p {font-size:14.5px; color:var(--ink-soft)}
.ecp-page .caution b {color:var(--ink); font-family:var(--display)}
.ecp-page .caution a {font-weight:700}
/* ============ "Aider sans faire à la place" (signature, mint/coral) ============ */
.ecp-page .sans-faire {position:relative; overflow:hidden; background:linear-gradient(155deg,var(--violet-soft),#fff 70%); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(22px,3vw,32px); margin:22px 0; box-shadow:var(--sh-lg)}
.ecp-page .sans-faire::before {content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(123,97,255,.18),transparent 68%)}
.ecp-page .sans-faire > * {position:relative}
.ecp-page .sans-faire h2 {margin-bottom:6px}
.ecp-page .sans-faire .two {display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:18px}
.ecp-page .sans-faire .col {background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-sm)}
.ecp-page .sans-faire .col.good {border-top:4px solid var(--mint)}
.ecp-page .sans-faire .col.bad {border-top:4px solid var(--coral)}
.ecp-page .sans-faire .col h3 {font-size:15.5px; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.ecp-page .sans-faire .col.good h3 {color:var(--mint-deep)}
.ecp-page .sans-faire .col.good h3::before {content:"✓"; width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--mint),var(--mint-deep));font-size:13px}
.ecp-page .sans-faire .col.bad h3 {color:var(--coral-deep)}
.ecp-page .sans-faire .col.bad h3::before {content:"✕"; width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--coral),var(--coral-deep));font-size:13px}
.ecp-page .sans-faire .col ul {list-style:none; display:flex; flex-direction:column; gap:9px}
.ecp-page .sans-faire .col li {font-size:14.5px; color:var(--ink-soft); display:flex; gap:9px; align-items:flex-start}
.ecp-page .sans-faire .col li::before {flex:0 0 auto; margin-top:1px; font-weight:900}
.ecp-page .sans-faire .col.good li::before {content:"✓"; color:var(--mint-deep)}
.ecp-page .sans-faire .col.bad li::before {content:"✕"; color:var(--coral-deep)}
/* ============ CTA dashboard (violet WOW) ============ */
.ecp-page .cta-dash {position:relative; overflow:hidden; background:linear-gradient(135deg,var(--violet),var(--violet-deep) 60%,var(--magenta));
  border-radius:var(--r-xl); padding:clamp(26px,3.5vw,40px); margin:24px 0; color:#fff; box-shadow:0 30px 60px -28px rgba(85,56,217,.8)}
.ecp-page .cta-dash::before {content:""; position:absolute; right:-40px; top:-60px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,183,61,.3),transparent 65%)}
.ecp-page .cta-dash::after {content:""; position:absolute; left:-50px; bottom:-70px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%)}
.ecp-page .cta-dash .inner {position:relative}
.ecp-page .cta-dash h2 {color:#fff; margin-bottom:9px}
.ecp-page .cta-dash p {color:rgba(255,255,255,.94); font-size:15.5px; max-width:52ch; margin-bottom:20px}
.ecp-page .cta-dash .btns {display:flex; flex-wrap:wrap; gap:11px}
.ecp-page .cta-dash .btn-white {background:#fff; color:var(--violet-deep); box-shadow:0 12px 24px -10px rgba(0,0,0,.35), inset 0 -2px 3px rgba(123,97,255,.12)}
.ecp-page .cta-dash .btn-white:hover {transform:translateY(-2px); filter:brightness(1.03)}
.ecp-page .cta-dash .btn-line {background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.4)}
.ecp-page .cta-dash .btn-line:hover {background:rgba(255,255,255,.22); transform:translateY(-2px)}
/* ============ CTA Premium (doux, gold) ============ */
.ecp-page .cta-premium {position:relative; overflow:hidden; background:linear-gradient(150deg,#fff,var(--gold-soft)); border:1px solid #F6DCAE;
  border-radius:var(--r-xl); padding:24px; margin:22px 0; box-shadow:var(--sh-md); display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.ecp-page .cta-premium .ico {flex:0 0 auto; width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--gold),var(--gold-deep)); box-shadow:0 10px 20px -8px var(--gold), inset 0 2px 3px rgba(255,255,255,.4)}
.ecp-page .cta-premium .txt {flex:1; min-width:220px}
.ecp-page .cta-premium .txt b {font-family:var(--display); font-size:16.5px; color:var(--ink); display:block; margin-top:5px}
.ecp-page .cta-premium .txt small {font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.ecp-page .cta-premium .tag {display:inline-block; font-size:10.5px; font-weight:900; color:var(--gold-deep); background:#fff; border:1px solid #F6DCAE;
  border-radius:99px; padding:4px 11px; font-family:var(--display); letter-spacing:.04em}
/* ============ FAQ accordion (FAQPage-ready) ============ */
.ecp-page .faq {margin:18px 0; max-width:var(--read)}
.ecp-page .faq details {background:#fff; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:11px; overflow:hidden; box-shadow:var(--sh-sm); transition:.2s}
.ecp-page .faq details[open] {border-color:var(--violet); box-shadow:var(--sh-md)}
.ecp-page .faq summary {list-style:none; cursor:pointer; padding:17px 19px; display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800; font-size:16px; color:var(--ink)}
.ecp-page .faq summary::-webkit-details-marker {display:none}
.ecp-page .faq summary .chev {margin-left:auto; flex:0 0 auto; width:28px; height:28px; border-radius:9px; background:var(--surface); display:grid; place-items:center; transition:.25s var(--ease)}
.ecp-page .faq details[open] summary .chev {transform:rotate(180deg); background:var(--violet-soft)}
.ecp-page .faq details[open] summary .chev svg {stroke:var(--violet-deep)}
.ecp-page .faq .answer {padding:0 19px 17px; color:var(--ink-soft); font-size:15px}
/* ============ Maillage interne ============ */
.ecp-page .mesh {display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:13px; margin:16px 0}
.ecp-page .mesh a {position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px;
  text-decoration:none; transition:transform .18s var(--ease), box-shadow .2s, border-color .2s; box-shadow:var(--sh-sm); display:block}
.ecp-page .mesh a:hover {transform:translateY(-4px); border-color:var(--violet); box-shadow:var(--sh-md)}
.ecp-page .mesh .label {display:inline-block; font-size:10px; font-weight:900; color:var(--violet-deep); font-family:var(--display); text-transform:uppercase;
  letter-spacing:.06em; background:var(--violet-soft); border-radius:7px; padding:3px 8px}
.ecp-page .mesh .title {font-family:var(--display); font-weight:900; color:var(--ink); font-size:15.5px; margin:9px 0 6px}
.ecp-page .mesh .arrow {color:var(--violet-deep); font-weight:800; font-size:13px}
/* réseau discret */
.ecp-page .mesh-net {margin:16px 0; padding:15px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); font-size:13.5px; color:var(--muted)}
.ecp-page .mesh-net a {color:var(--violet-deep); font-weight:700}
/* ============ Responsive ============ */
@media (max-width:680px) {
.ecp-page {font-size:16px}
.ecp-page .sans-faire .two {grid-template-columns:1fr}
.ecp-page .hero {padding:24px 20px}
}
@media (prefers-reduced-motion:reduce) {
.ecp-page * {animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
.ecp-page .sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:430px) {
.ecp-page .hero h1 {font-size:clamp(25px,8vw,32px);overflow-wrap:anywhere}
.ecp-page .method {grid-template-columns:1fr}
}
/* ===================================================================
   ECP BLOCKS EXTRA — Classes orphelines non présentes dans anchor_parent.css
   Source : anchor_eleve.css (.reassure)
             anchor_common.css (.preview-mock, .pm-row, .pm-card, .lab, .big,
                                .pm-bar, .badge)
   Complement : .box (carte neutre inventée)

   Tokens utilisés : ceux définis dans anchor_parent.css (:root de référence).
   Ce fichier est INJECTÉ APRÈS le CSS anchor principal —
   il complète, ne remplace pas.
   =================================================================== */
/* ── .reassure ── source: anchor_eleve.css (bloc réassurance mint motivant) */
.ecp-page .reassure {
  position:relative;
  overflow:hidden;
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:linear-gradient(160deg,var(--mint-soft),#fff);
  border:1px solid #BFEFE2;
  border-radius:var(--r-xl);
  padding:22px 24px;
  margin:18px 0;
  box-shadow:var(--sh-md);
}
.ecp-page .reassure .ico {
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(150deg,var(--mint),var(--mint-deep));
  box-shadow:0 10px 20px -8px var(--mint);
}
.ecp-page .reassure h2 {
  font-size:20px;
  color:var(--mint-deep);
  margin-bottom:5px;
}
.ecp-page .reassure p {
  font-size:15px;
  color:#1a6b58;
  line-height:1.55;
}
/* ── .preview-mock ── source: anchor_common.css (aperçu dashboard statique) */
.ecp-page .preview-mock {
  margin-top:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px;
  position:relative;
}
/* ── .badge ── source: anchor_common.css (pastille "aperçu" dans preview-mock) */
.ecp-page .badge {
  position:absolute;
  top:10px;
  right:12px;
  font-family:var(--body);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:3px 8px;
}
/* ── .pm-row ── source: anchor_common.css (ligne de mini-cartes stats) */
.ecp-page .pm-row {
  display:flex;
  gap:10px;
  margin-top:10px;
}
/* ── .pm-card ── source: anchor_common.css (mini-carte stat individuelle) */
.ecp-page .pm-card {
  flex:1;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px;
}
/* ── .lab ── source: anchor_common.css (libellé mono dans pm-card) */
.ecp-page .lab {
  font-family:var(--body);
  font-size:10px;
  color:var(--muted);
}
/* ── .big ── source: anchor_common.css (grande valeur chiffrée dans pm-card) */
.ecp-page .big {
  font-family:var(--display);
  font-weight:900;
  font-size:22px;
  color:var(--ink);
  margin-top:3px;
}
/* ── .pm-bar ── source: anchor_common.css (barre de progression dans preview-mock) */
.ecp-page .pm-bar {
  height:8px;
  border-radius:99px;
  background:var(--line);
  margin-top:9px;
  overflow:hidden;
}
.ecp-page .pm-bar i {
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--violet-deep));
}
/* ── .box ── classe inventée : carte neutre générique */
.ecp-page .box {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px 20px;
  box-shadow:var(--sh-sm);
}
/* ── .lead-list ── liste « Label — explication » à label gras (évite le mur de texte) */
.ecp-page .lead-list {list-style:none; margin:14px 0; padding:0; display:grid; gap:9px}
.ecp-page .lead-list li {position:relative; padding-left:18px; color:var(--ink-soft); font-size:14.5px; line-height:1.55}
.ecp-page .lead-list li::before {content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--coral)}
.ecp-page .lead-list strong {color:var(--ink); font-weight:800}
/* ── aération du texte dans .box (paragraphes + citations + listes) ── */
.ecp-page .box > p {margin:11px 0; color:var(--ink-soft); font-size:14.5px; line-height:1.55}
.ecp-page .box > p:first-of-type {margin-top:0}
.ecp-page .box .say-list {margin:14px 0}
.ecp-page .box .lead-list {margin:14px 0}
/* ── « À lire aussi » / .mesh : bg distinct pour qu'on VOIE que ce sont des liens (Boss 24/06) ── */
.ecp-page .mesh a { background:linear-gradient(160deg,var(--violet-soft),#fff 85%); border:1.5px solid var(--line-strong); }
.ecp-page .mesh a::after { content:"→"; position:absolute; right:16px; top:16px; color:var(--violet-deep); font-weight:900; font-size:15px; opacity:.55; transition:transform .18s var(--ease),opacity .2s; }
.ecp-page .mesh a:hover { background:#fff; border-color:var(--violet); }
.ecp-page .mesh a:hover::after { transform:translateX(4px); opacity:1; }
.ecp-page .mesh .arrow { color:var(--violet-deep); }
/* ============================================================
   ECP HUB — composant COMMON (hub parent /guides/parents)
   Classes issues du SHELL_PARENT_HUB verrouillé, stylées avec les
   tokens verrouillés (anchor_parent :root). AUCUN design nouveau —
   on complète la CSS common pour les classes hub absentes des anchors.
   ============================================================ */
/* Hero variante douce (modifie .hero existant, ne le remplace pas) */
.ecp-page .hero.calm {
  background:linear-gradient(160deg,var(--violet-soft),#fff 72%);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
/* Grille de cartes guides — alimentée dynamiquement par le JSON */
.ecp-page .need-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:16px;
  margin:18px 0;
}
.ecp-page .need-card {
  position:relative;
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
  box-shadow:var(--sh-sm);
  text-decoration:none;
  color:var(--ink);
  transition:transform .16s var(--ease), box-shadow .2s, border-color .2s;
}
.ecp-page .need-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--line-strong); }
.ecp-page .need-card:focus-visible { outline:3px solid var(--violet); outline-offset:3px; }
.ecp-page .need-card .ico {
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:14px; flex:0 0 auto;
}
.ecp-page .need-card .ico.g { background:linear-gradient(150deg,var(--gold),var(--gold-deep)); }
.ecp-page .need-card .ico.v { background:linear-gradient(150deg,var(--violet),var(--violet-deep)); }
.ecp-page .need-card .ico.s { background:linear-gradient(150deg,var(--sky),var(--sky-deep)); }
.ecp-page .need-card .ico.m { background:linear-gradient(150deg,var(--coral),var(--coral-deep)); }
.ecp-page .need-card .card-eyebrow {
  font-family:var(--display); font-weight:800; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--violet-deep);
  margin-bottom:6px;
}
.ecp-page .need-card h3 { font-family:var(--display); font-weight:900; font-size:17px; line-height:1.25; margin:0 0 7px; color:var(--ink); }
.ecp-page .need-card p { font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px; flex:1 0 auto; }
.ecp-page .need-card .go { font-family:var(--display); font-weight:800; font-size:14px; color:var(--coral-deep); margin-top:auto; }
.ecp-page .need-card:hover .go { color:var(--violet-deep); }
/* Rangée niveaux (présente dans le shell, optionnelle) */
.ecp-page .level-row { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0; }
.ecp-page .level-chip {
  display:flex; flex-direction:column; gap:2px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 16px; text-decoration:none; color:var(--ink);
  transition:transform .16s var(--ease), box-shadow .2s;
}
.ecp-page .level-chip:hover { transform:translateY(-2px); box-shadow:var(--sh-sm); }
.ecp-page .level-chip b { font-family:var(--display); font-weight:900; font-size:15px; }
.ecp-page .level-chip span { font-size:13px; color:var(--ink-soft); }