/* =====================================================================
   ALCHIMIEAPP V2 — PAGES DE CONTENU (Comprendre, Écouter, Retenir,
   Agir, Valider, Évaluation, Quiz, Attestation)
   Décline le design system validé sur le parcours pédagogique.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO DE PAGE DE CONTENU (bandeau tinté par étape + illustration)
   --------------------------------------------------------------------- */
.content-hero {
    background: var(--_accent-bg, var(--brand-purple-50));
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    position: relative; overflow: hidden;
    margin-bottom: var(--space-8);
}
.content-hero .ch-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-7); align-items:center; }
.content-hero .step-badge { margin-bottom: var(--space-4); }
.content-hero h1 { margin: 0 0 var(--space-4); }
.content-hero .ch-desc { color: var(--text-muted); font-size: var(--fs-lead); max-width: 52ch; margin: 0 0 var(--space-5); }
.content-hero .ch-meta { display:flex; flex-wrap:wrap; gap: var(--space-3); }
.content-hero .ch-illus { justify-self:center; }
.content-hero .ch-illus img { width:100%; max-width: 340px; filter: drop-shadow(0 18px 36px rgba(27,35,80,.12)); }
@media (max-width: 900px){ .content-hero .ch-grid { grid-template-columns:1fr; } .content-hero .ch-illus { order:-1; } .content-hero { padding: var(--space-6); } }

/* ---------------------------------------------------------------------
   MISE EN PAGE ARTICLE (contenu + sommaire sticky)
   --------------------------------------------------------------------- */
.reading-layout { display:grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items:start; }
@media (max-width: 900px){ .reading-layout { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Prose éditoriale */
.prose { max-width: 72ch; color: var(--text); font-size: 1.06rem; line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-family: var(--font-serif); font-weight:400; color: var(--ink); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height:1.12; margin: 2.4rem 0 1rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h3 { font-family: var(--font-sans); font-weight:700; color: var(--ink-soft); font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.prose p { margin: 0 0 1.15rem; }
.prose a { color: var(--brand-purple); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .5rem; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 1.6rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--brand-purple-300); background: var(--brand-purple-50); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-serif); font-size: 1.2rem; color: var(--ink-soft); }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose hr { border:none; border-top:1px solid var(--border); margin: 2rem 0; }
.prose .article-lead { font-size: 1.25rem; color: var(--text-muted); font-family: var(--font-serif); font-style: italic; line-height:1.5; margin-bottom: 1.8rem; }
/* Encart éditorial dans l'article */
.prose .article-callout {
    margin: 1.8rem 0; padding: var(--space-5) var(--space-6);
    background: var(--brand-purple-50); border: 1px solid #e6ddff;
    border-radius: var(--radius-lg); position: relative;
}
.prose .article-callout::before {
    content: "!"; position:absolute; top: -14px; left: 24px;
    width: 30px; height: 30px; border-radius: 50%; background: var(--brand-purple); color:#fff;
    display:grid; place-items:center; font-weight:800; font-family: var(--font-sans);
}
.prose .article-callout p:last-child { margin-bottom: 0; }

/* Sommaire sticky (réutilise .toc de components) */
.reading-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
@media (max-width: 900px){
    .reading-toc { position: static; margin-bottom: var(--space-4); background: var(--bg-tint); border-radius: var(--radius); padding: var(--space-4); }
    .reading-toc details summary { cursor:pointer; font-weight:700; color: var(--ink-soft); }
}

/* ---------------------------------------------------------------------
   LECTEUR AUDIO (Écouter)
   --------------------------------------------------------------------- */
.audio-card { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); }
.audio-top { display:flex; align-items:center; gap: var(--space-4); margin-bottom: var(--space-5); }
.audio-top .at-cover { width: 84px; height: 84px; border-radius: var(--radius-lg); overflow:hidden; flex:none; background: var(--step-ecouter-bg); display:grid; place-items:center; }
.audio-top .at-cover img { width:100%; height:100%; object-fit:cover; }
.audio-top h2 { margin:0 0 .25rem; font-size: 1.3rem; }
.audio-top .at-sub { color: var(--text-muted); font-size: var(--fs-sm); margin:0; }
.audio-player { display:flex; align-items:center; gap: var(--space-4); }
.audio-player audio { width:100%; }
.audio-native { width:100%; margin-top: var(--space-4); }

/* Chapitrage */
.chapters { margin-top: var(--space-6); }
.chapters h3 { font-family: var(--font-sans); font-size: var(--fs-sm); text-transform:uppercase; letter-spacing:.08em; color: var(--text-faint); margin-bottom: var(--space-3); }
.chapter { display:flex; gap: var(--space-4); align-items:baseline; padding:.7rem .9rem; border-radius: var(--radius); transition: background .15s; }
.chapter:hover { background: var(--step-ecouter-bg); }
.chapter .ch-time { font-variant-numeric: tabular-nums; font-weight:700; color: var(--step-ecouter); font-size: var(--fs-sm); flex:none; min-width: 48px; }
.chapter .ch-info h4 { margin:0 0 .1rem; font-size: .98rem; font-family: var(--font-sans); color: var(--ink); }
.chapter .ch-info p { margin:0; font-size: var(--fs-sm); color: var(--text-muted); }
.chapter .ch-len { margin-left:auto; font-size: var(--fs-xs); color: var(--text-faint); flex:none; }

/* ---------------------------------------------------------------------
   BLOC IDÉES CLÉS (partagé Écouter/Retenir)
   --------------------------------------------------------------------- */
.key-ideas { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-6); }
.key-idea { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.key-idea .ki-ico { width:48px; height:48px; border-radius: var(--radius); background: var(--brand-purple-100); color: var(--brand-purple); display:grid; place-items:center; margin-bottom: var(--space-3); }
.key-idea .ki-ico svg { width:24px; height:24px; }
.key-idea h3 { font-size: 1.05rem; margin:0 0 .4rem; }
.key-idea p { font-size: var(--fs-sm); color: var(--text-muted); margin:0; }
@media (max-width: 900px){ .key-ideas { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   NAVIGATION BAS DE PARCOURS (précédent / suivant)
   --------------------------------------------------------------------- */
.parcours-nav { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.parcours-nav .pn-prev a { color: var(--ink-soft); font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
.parcours-nav .pn-prev small { display:block; color: var(--text-faint); font-weight:400; margin-top:.15rem; }
@media (max-width: 620px){ .parcours-nav { flex-direction:column-reverse; align-items:stretch; } .parcours-nav .btn { width:100%; } }

/* Bandeau contenu de démonstration (rappel) */
.demo-note { display:inline-flex; align-items:center; gap:.5rem; font-size: var(--fs-xs); color:#8a5a12; background: var(--warning-bg); border:1px solid var(--warning-border); border-radius: var(--radius-pill); padding:.3rem .8rem; margin-bottom: var(--space-4); }
.demo-note svg { width:1em; height:1em; }

/* =====================================================================
   CHECKPOINT A — enrichissement éditorial Comprendre + Écouter
   ===================================================================== */

/* --- Zone éditoriale élargie (Comprendre) --- */
.reading-layout-wide { display:grid; grid-template-columns: 280px 1fr; gap: var(--space-8); align-items:start; max-width: 1180px; }
@media (max-width: 960px){ .reading-layout-wide { grid-template-columns: 1fr; gap: var(--space-5); } }
.editorial { max-width: none; }
.editorial > *:first-child { margin-top: 0; }

/* --- Citation d'ouverture --- */
.editorial-lead {
    position: relative; display:grid; grid-template-columns: 1fr auto; gap: var(--space-5);
    align-items:start; padding: 0 0 var(--space-6); margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}
.editorial-lead .el-quote { display:flex; gap: var(--space-3); }
.editorial-lead .el-mark { font-family: var(--font-serif); color: var(--brand-purple-300); font-size: 3rem; line-height:.8; flex:none; }
.editorial-lead p { font-family: var(--font-serif); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height:1.4; color: var(--ink-soft); margin:0; font-style: italic; }
.editorial-lead .el-dots { width:100px; height:60px; opacity:.5; background-image: radial-gradient(var(--brand-purple-300) 1.5px, transparent 1.5px); background-size: 14px 14px; align-self:center; }
@media (max-width: 620px){ .editorial-lead { grid-template-columns:1fr; } .editorial-lead .el-dots { display:none; } }

/* --- Section éditoriale : titre + corps, avec variantes --- */
.ed-section { margin: var(--space-7) 0; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.ed-section > h2 { font-family: var(--font-serif); font-weight:400; color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); line-height:1.14; margin:0 0 1rem; position:relative; padding-top:.4rem; }
.ed-section > h2::before { content:""; position:absolute; top:-2px; left:0; width:44px; height:4px; border-radius:2px; background: var(--brand-purple); }
.ed-prose p { margin:0 0 1.1rem; line-height:1.75; color: var(--text); }
.ed-prose p:last-child { margin-bottom:0; }
.ed-prose a { color: var(--brand-purple); text-decoration:underline; text-underline-offset:2px; }
.ed-prose strong { color: var(--ink); }
.ed-prose ul, .ed-prose ol { margin:0 0 1.1rem; padding-left:1.4rem; }
.ed-prose li { margin-bottom:.5rem; }
.ed-prose em { color: var(--ink-soft); }
.ed-prose .article-lead { font-family: var(--font-serif); font-style:italic; font-size:1.15rem; color: var(--text-muted); }
.ed-prose .article-callout { margin:1.4rem 0; padding: var(--space-4) var(--space-5); background: var(--brand-purple-50); border:1px solid #e6ddff; border-radius: var(--radius-lg); }
.ed-prose .article-callout p:last-child { margin-bottom:0; }

/* Disposition texte + encart (2 colonnes) */
.ed-split { display:grid; grid-template-columns: 1fr 300px; gap: var(--space-6); align-items:start; }
.ed-split.left { grid-template-columns: 300px 1fr; }
@media (max-width: 820px){ .ed-split, .ed-split.left { grid-template-columns: 1fr; } }

/* Disposition texte + illustration */
.ed-figure { display:grid; grid-template-columns: 300px 1fr; gap: var(--space-6); align-items:center; }
.ed-figure.right { grid-template-columns: 1fr 300px; }
.ed-figure img { width:100%; border-radius: var(--radius-lg); background: var(--brand-purple-50); }
@media (max-width: 820px){ .ed-figure, .ed-figure.right { grid-template-columns: 1fr; } .ed-figure img { max-width: 360px; margin:0 auto; } }

/* --- Encarts éditoriaux typés --- */
.ed-callout { border-radius: var(--radius-lg); padding: var(--space-5); border:1px solid transparent; }
.ed-callout .ec-head { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:.95rem; margin-bottom:.6rem; font-family: var(--font-sans); }
.ed-callout .ec-head svg { width:1.2em; height:1.2em; }
.ed-callout p { margin:0; font-size:.95rem; line-height:1.6; color: var(--text); }
.ed-callout.wide { margin: var(--space-5) 0; }
.ec-retenir  { background: var(--brand-purple-50); border-color:#e6ddff; } .ec-retenir .ec-head { color: var(--brand-purple); }
.ec-pratique { background: var(--step-agir-bg); border-color: var(--step-agir); } .ec-pratique .ec-head { color:#b9791b; }
.ec-savoir   { background: var(--step-retenir-bg); border-color:#c4ece7; } .ec-savoir .ec-head { color:#0f8a7f; }
.ec-tete     { background: var(--step-ecouter-bg); border-color:#ffd9c8; } .ec-tete .ec-head { color:#d05a2c; }
/* Encart "En pratique" pleine largeur = bandeau */
.ed-callout.banner { display:flex; align-items:center; gap:.75rem; padding:.9rem 1.25rem; }
.ed-callout.banner .ec-head { margin:0; flex:none; }
.ed-callout.banner p { font-size:.92rem; }
@media (max-width: 620px){ .ed-callout.banner { flex-direction:column; align-items:flex-start; } }

/* Bouton télécharger dans le sommaire */
.toc-download { display:flex; align-items:center; gap:.6rem; margin-top: var(--space-5); padding: var(--space-3) var(--space-4); background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); font-size: var(--fs-sm); color: var(--ink-soft); }
.toc-download svg { width:22px; height:22px; color: var(--brand-purple); flex:none; }
.toc-download small { display:block; color: var(--text-faint); font-weight:400; }

/* =====================================================================
   ÉCOUTER — grand composant média + waveform
   ===================================================================== */
.ecoute-hero-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-7); align-items:stretch; }
@media (max-width: 960px){ .ecoute-hero-grid { grid-template-columns:1fr; } }

/* Carte média (portrait + player orange) */
.media-card { background:#fff; border:1px solid var(--border-soft); border-radius: 28px; box-shadow: var(--shadow); display:flex; flex-direction:column; justify-content:center; padding: 26px; }
.media-top { display:grid; grid-template-columns: auto 1fr; gap: var(--space-6); padding: 6px 6px 22px; align-items:center; position:relative; }
/* Portrait + halo rose + décorations */
.media-portrait-wrap { position:relative; flex:none; }
.media-portrait { width:130px; height:130px; border-radius:50%; object-fit:cover; object-position:center top; background: var(--step-ecouter-bg); box-shadow: 0 0 0 8px #fde7db; display:block; }
.media-deco { position:absolute; top:-6px; right:-14px; width:40px; height:40px; color: var(--step-ecouter); overflow:visible; }
/* Meta */
.media-meta .mm-eyebrow { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--step-ecouter); background: var(--step-ecouter-bg); padding:.35rem .8rem; border-radius: var(--radius-pill); margin-bottom:.7rem; }
.media-meta h2 { margin:0 0 .5rem; font-family: var(--font-serif); font-weight:400; font-size:1.75rem; color: var(--ink); line-height:1.1; }
.media-meta p { margin:0; color: var(--text-muted); font-size:1rem; line-height:1.4; }
@media (max-width: 520px){ .media-top { grid-template-columns:1fr; text-align:center; padding-bottom:16px; } .media-portrait-wrap { margin:0 auto; } .media-meta .mm-eyebrow { }
}

/* Barre player orange flottante (marge autour) */
.media-player { background: linear-gradient(100deg, #ff8a3c, var(--step-ecouter) 55%, #f5651f); border-radius: 20px; padding: 18px 24px; display:flex; align-items:center; gap: 18px; color:#fff; box-shadow: 0 10px 24px rgba(240,104,60,.28); }
.media-play { width:60px; height:60px; border-radius:50%; background:#fff; color: var(--step-ecouter); border:none; cursor:pointer; display:grid; place-items:center; flex:none; box-shadow:0 6px 16px rgba(0,0,0,.18); transition: transform .12s; }
.media-play:hover { transform: scale(1.05); }
.media-play svg { width:26px; height:26px; margin-left:3px; }
.media-time { font-variant-numeric: tabular-nums; font-weight:700; font-size:.95rem; flex:none; }
.waveform { flex:1; display:flex; align-items:center; gap:2px; height:44px; overflow:hidden; }
.waveform span { flex:1; min-width:2px; max-width:4px; background: rgba(255,255,255,.5); border-radius:3px; }
.waveform span.played { background:#fff; }
.media-sep { width:1px; height:28px; background: rgba(255,255,255,.4); flex:none; }
.media-speed { background: rgba(255,255,255,.25); border:none; color:#fff; font-weight:700; font-size:.85rem; padding:.5rem .9rem; border-radius: var(--radius-pill); cursor:pointer; flex:none; }
.media-speed:hover { background: rgba(255,255,255,.32); }

/* --- Au programme : 2 colonnes --- */
.programme-grid { display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); align-items:start; }
@media (max-width: 900px){ .programme-grid { grid-template-columns:1fr; } }
.chapters-card { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-card); }
.chapters-card .chapter { border-bottom:1px solid var(--border-soft); }
.chapters-card .chapter:last-child { border-bottom:none; }
.chapter .ch-play { width:30px; height:30px; border-radius:50%; background: var(--step-ecouter-bg); color: var(--step-ecouter); display:grid; place-items:center; flex:none; border:none; }
.chapter .ch-play svg { width:15px; height:15px; margin-left:1px; }

/* Encart à propos de l'interview */
.about-interview { background: var(--brand-purple-50); border-radius: var(--radius-xl); padding: var(--space-6); }
.about-interview h3 { font-size:1.15rem; margin:0 0 var(--space-3); }
.about-interview p { font-size: var(--fs-sm); color: var(--text-muted); line-height:1.6; margin:0 0 var(--space-4); }
.about-interview img { width:70%; max-width:200px; margin:0 auto; display:block; }

/* --- 3 idées clés --- */
.ideas-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
@media (max-width: 900px){ .ideas-grid { grid-template-columns:1fr; } }
.idea-card { border-radius: var(--radius-xl); padding: var(--space-6); position:relative; text-align:center; overflow:hidden; }
.idea-card .ic-dots { position:absolute; top:16px; right:16px; width:44px; height:28px; opacity:.4; background-image: radial-gradient(currentColor 1.4px, transparent 1.4px); background-size:12px 12px; }
.idea-card .ic-num { width:34px; height:34px; border-radius:50%; color:#fff; font-weight:800; display:grid; place-items:center; margin:0 auto var(--space-4); }
.idea-card .ic-ico { width:64px; height:64px; border-radius:50%; background:#fff; display:grid; place-items:center; margin:0 auto var(--space-4); box-shadow: var(--shadow-xs); }
.idea-card .ic-ico svg { width:30px; height:30px; }
.idea-card h3 { font-size:1.1rem; margin:0 0 .5rem; }
.idea-card p { font-size:.9rem; color: var(--text-muted); margin:0; line-height:1.55; }
.idea-1 { background: var(--brand-purple-50); color: var(--brand-purple); } .idea-1 .ic-num { background: var(--brand-purple); } .idea-1 h3 { color: var(--brand-purple); } .idea-1 .ic-ico { color: var(--brand-purple); }
.idea-2 { background: var(--step-ecouter-bg); color: var(--step-ecouter); } .idea-2 .ic-num { background: var(--step-ecouter); } .idea-2 h3 { color: var(--step-ecouter); } .idea-2 .ic-ico { color: var(--step-ecouter); }
.idea-3 { background: var(--step-retenir-bg); color: var(--step-retenir); } .idea-3 .ic-num { background: var(--step-retenir); } .idea-3 h3 { color: var(--step-retenir); } .idea-3 .ic-ico { color: var(--step-retenir); }
.idea-card p { color: var(--text-muted); }

/* --- À écouter aussi (carousel) --- */
.listen-card { width: 260px; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); display:flex; flex-direction:column; gap: var(--space-3); }
.listen-card .lc-top { display:grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items:start; }
.listen-card .lc-tag { font-size: var(--fs-xs); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--brand-purple); display:inline-flex; align-items:center; gap:.3rem; margin-bottom:.4rem; }
.listen-card .lc-tag svg { width:1em; height:1em; }
.listen-card h3 { font-size:.98rem; margin:0 0 .3rem; line-height:1.25; }
.listen-card .lc-expert { font-size: var(--fs-xs); color: var(--text-muted); }
.listen-card .lc-portrait { width:52px; height:52px; border-radius: var(--radius); object-fit:cover; background: var(--brand-purple-50); flex:none; }
.listen-card .lc-foot { display:flex; align-items:center; gap:.5rem; padding-top: var(--space-3); border-top:1px solid var(--border-soft); }
.listen-card .lc-play { width:30px; height:30px; border-radius:50%; background: var(--brand-purple); color:#fff; border:none; display:grid; place-items:center; flex:none; }
.listen-card .lc-play svg { width:14px; height:14px; margin-left:1px; }
.listen-card .lc-wave { flex:1; display:flex; align-items:center; gap:1.5px; height:22px; }
.listen-card .lc-wave span { flex:1; background: var(--brand-purple-300); border-radius:1px; opacity:.6; }
.listen-card .lc-dur { font-size: var(--fs-xs); color: var(--text-faint); margin-left:auto; }

/* =====================================================================
   PHASE B — RETENIR (carte mentale) + AGIR (fiche terrain)
   ===================================================================== */

/* --- Boutons d'action hero (Agrandir / Télécharger / Imprimer) --- */
.hero-actions { display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-5); }

/* =====================================================================
   RETENIR — carte mentale radiale
   ===================================================================== */
.mindmap-wrap { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: var(--space-7); position:relative; overflow:hidden; }
.mindmap-wrap .mm-dots { position:absolute; top:24px; right:28px; width:70px; height:44px; opacity:.4; background-image: radial-gradient(var(--brand-purple-300) 1.5px, transparent 1.5px); background-size:14px 14px; }

/* Grille radiale : 2 colonnes de branches autour d'un centre */
.mindmap { display:grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-6) var(--space-5); align-items:center; }
.mindmap .mm-center { text-align:center; }
.mm-center .mm-core { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:190px; height:190px; border-radius:50%; background: linear-gradient(150deg, #1fb3a6, var(--step-retenir)); color:#fff; box-shadow:0 14px 30px rgba(23,163,152,.32); padding: var(--space-4); }
.mm-core strong { font-family: var(--font-serif); font-weight:400; font-size:1.4rem; line-height:1.1; }
.mm-core span { font-size:.72rem; opacity:.9; margin-top:.4rem; letter-spacing:.03em; }

/* Colonnes de branches */
.mm-col { display:flex; flex-direction:column; gap: var(--space-6); }
.mm-branch { position:relative; }
.mm-branch .mm-node { display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:.95rem; padding:.6rem 1.1rem; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.mm-branch .mm-node .mm-ico { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; }
.mm-branch .mm-node .mm-ico svg { width:16px; height:16px; }
.mm-leaves { display:flex; flex-direction:column; gap:.5rem; }
.mm-leaf { display:flex; align-items:center; gap:.6rem; background: var(--bg-tint); border:1px solid var(--border-soft); border-radius: var(--radius); padding:.6rem .8rem; font-size:.85rem; color: var(--ink-soft); line-height:1.3; }
.mm-leaf .lf-ico { width:26px; height:26px; border-radius: var(--radius-sm); display:grid; place-items:center; flex:none; }
.mm-leaf .lf-ico svg { width:15px; height:15px; }
/* right column aligns leaves to the right edge */
.mm-col.right .mm-branch { text-align:right; }
.mm-col.right .mm-node { flex-direction:row-reverse; }
.mm-col.right .mm-leaf { flex-direction:row-reverse; text-align:right; }

/* Accents de branche (cyclique) */
.mm-b1 .mm-node { background: var(--brand-purple-100); color: var(--brand-purple); } .mm-b1 .mm-node .mm-ico { color: var(--brand-purple); } .mm-b1 .lf-ico { background: var(--brand-purple-100); color: var(--brand-purple); }
.mm-b2 .mm-node { background: var(--step-ecouter-bg); color: var(--step-ecouter); } .mm-b2 .mm-node .mm-ico { color: var(--step-ecouter); } .mm-b2 .lf-ico { background: var(--step-ecouter-bg); color: var(--step-ecouter); }
.mm-b3 .mm-node { background: var(--step-retenir-bg); color: var(--step-retenir); } .mm-b3 .mm-node .mm-ico { color: var(--step-retenir); } .mm-b3 .lf-ico { background: var(--step-retenir-bg); color: var(--step-retenir); }
.mm-b4 .mm-node { background: var(--step-agir-bg); color:#b9791b; } .mm-b4 .mm-node .mm-ico { color: var(--step-agir); } .mm-b4 .lf-ico { background: var(--step-agir-bg); color:#b9791b; }

@media (max-width: 900px){
  .mindmap { grid-template-columns: 1fr; }
  .mm-center { order:-1; margin-bottom: var(--space-4); }
  .mm-col.right .mm-branch { text-align:left; }
  .mm-col.right .mm-node, .mm-col.right .mm-leaf { flex-direction:row; text-align:left; }
}

/* Modale d'agrandissement */
.mm-modal { position:fixed; inset:0; background:rgba(27,35,80,.6); z-index:100; display:none; align-items:center; justify-content:center; padding: var(--space-5); }
.mm-modal.open { display:flex; }
.mm-modal-inner { background:#fff; border-radius: var(--radius-xl); max-width:1100px; width:100%; max-height:90vh; overflow:auto; padding: var(--space-6); position:relative; }
.mm-modal-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; display:grid; place-items:center; }

/* =====================================================================
   AGIR — fiche terrain
   ===================================================================== */
/* 4 questions clés */
.questions-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 620px){ .questions-grid { grid-template-columns: 1fr; } }
.question-card { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); border-top:4px solid var(--_qc, var(--brand-purple)); }
.question-card .qc-head { display:flex; align-items:flex-start; gap:.7rem; }
.question-card .qc-ico { width:38px; height:38px; border-radius:50%; background: var(--_qcbg, var(--brand-purple-50)); color: var(--_qc, var(--brand-purple)); display:grid; place-items:center; flex:none; }
.question-card .qc-ico svg { width:20px; height:20px; }
.question-card h3 { color: var(--ink); font-weight:700; font-size:1.02rem; margin:.35rem 0 0; line-height:1.35; }
.question-card .qc-desc { font-size:.9rem; color: var(--text-muted); margin:.6rem 0 0; line-height:1.5; padding-left:calc(38px + .7rem); }
.qc-1 { --_qc: var(--brand-purple); --_qcbg: var(--brand-purple-50); }
.qc-2 { --_qc: var(--step-ecouter); --_qcbg: var(--step-ecouter-bg); }
.qc-3 { --_qc: var(--step-retenir); --_qcbg: var(--step-retenir-bg); }
.qc-4 { --_qc: var(--step-agir); --_qcbg: var(--step-agir-bg); }

/* Blocs Quand tout va bien / Points de vigilance */
.balance-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 820px){ .balance-grid { grid-template-columns: 1fr; } }
.balance-card { border-radius: var(--radius-xl); padding: var(--space-6); }
.balance-card h3 { display:flex; align-items:center; gap:.5rem; font-size:1.15rem; margin:0 0 .3rem; }
.balance-card .bc-sub { font-size: 0.95rem; margin:0 0 var(--space-4); }
.balance-card .bc-item { display:flex; gap:.7rem; padding:.6rem 0; }
.balance-card .bc-item .bi-ico { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; }
.balance-card .bc-item .bi-ico svg { width:18px; height:18px; }
.balance-card .bc-item strong { display:block; font-size:1rem; color: var(--ink); margin-bottom:.1rem; }
.balance-card .bc-item p { margin:0; font-size:.95rem; color: var(--text-muted); line-height:1.55; }
.balance-good { background: var(--step-retenir-bg); } .balance-good h3, .balance-good .bc-sub { color: var(--step-retenir); } .balance-good .bi-ico { background:#fff; color: var(--step-retenir); }
.balance-warn { background: var(--step-agir-bg); } .balance-warn h3, .balance-warn .bc-sub { color:#b9791b; } .balance-warn .bi-ico { background:#fff; color: var(--step-agir); }

/* Pourquoi c'est important : synthèse visuelle scannable */
.why-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 820px){ .why-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px){ .why-grid { grid-template-columns: 1fr; } }
.why-card { text-align:center; padding: var(--space-5) var(--space-4); }
.why-card .wc-ico { width:76px; height:76px; border-radius:50%; margin:0 auto var(--space-4); display:grid; place-items:center; background: var(--brand-purple-50); color: var(--brand-purple); }
.why-card .wc-ico svg { width:38px; height:38px; }
.why-card p { font-size:.92rem; color: var(--text-muted); margin:0; line-height:1.5; }
.why-card p strong { display:block; color: var(--ink); font-size:1.02rem; line-height:1.25; margin-bottom:.4rem; }
/* rotation de teintes */
.why-card:nth-child(5n+2) .wc-ico { background: var(--step-ecouter-bg); color: var(--step-ecouter); }
.why-card:nth-child(5n+3) .wc-ico { background: var(--step-retenir-bg); color: var(--step-retenir); }
.why-card:nth-child(5n+4) .wc-ico { background: var(--step-agir-bg); color:#b9791b; }
.why-card:nth-child(5n+5) .wc-ico { background: var(--brand-purple-100); color: var(--brand-purple); }

/* Dans ma pratique au quotidien */
.daily-wrap { background: var(--brand-purple-50); border-radius: var(--radius-2xl); padding: var(--space-7); position:relative; overflow:hidden; }
.daily-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); position:relative; z-index:1; }
@media (max-width: 820px){ .daily-grid { grid-template-columns:1fr; } }
.daily-col h3 { display:flex; align-items:center; gap:.5rem; font-family: var(--font-sans); font-size:1.05rem; color: var(--brand-purple); margin:0 0 var(--space-3); }
.daily-col .dc-ico { width:40px; height:40px; border-radius: var(--radius); background:#fff; color: var(--brand-purple); display:grid; place-items:center; flex:none; }
.daily-col .dc-ico svg { width:20px; height:20px; }
.daily-col ul { list-style:none; margin:0; padding:0; }
.daily-col li { position:relative; padding-left:1.1rem; margin-bottom:.55rem; font-size:.95rem; color: var(--text); line-height:1.5; }
.daily-col li::before { content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background: var(--brand-purple-300); }

/* Ressources associées (mini-cards) */
.related-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
@media (max-width: 900px){ .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .related-grid { grid-template-columns: 1fr; } }
.related-card { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); text-decoration:none; display:block; transition: transform .15s, box-shadow .15s; }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration:none; }
.related-card .rl-tag { display:inline-flex; align-items:center; gap:.3rem; font-size: var(--fs-xs); font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.5rem; }
.related-card .rl-tag svg { width:1em; height:1em; }
.related-card h4 { font-family: var(--font-sans); font-size:1rem; color: var(--ink); margin:0 0 .3rem; line-height:1.25; }
.related-card p { font-size: 0.85rem; color: var(--text-muted); margin:0; }

/* --- Impression propre (Agir surtout) --- */
@media print {
  .site-header, .site-footer, .parcours-nav, .reading-toc, .hero-actions, .demo-note, .mm-modal { display:none !important; }
  .content-hero { background:#fff !important; padding:0 0 1rem !important; }
  .content-hero .ch-illus { display:none; }
  .reading-layout-wide { grid-template-columns:1fr !important; }
  .question-card, .balance-card, .why-card, .daily-wrap, .related-card, .mindmap-wrap { box-shadow:none !important; border:1px solid #ddd !important; break-inside: avoid; }
  .daily-wrap, .balance-good, .balance-warn { background:#fff !important; }
  body { font-size:11pt; }
  a { text-decoration:none; color:inherit; }
}

/* =====================================================================
   PHASE C — VALIDER (parcours) + Évaluations + Quiz + Attestation
   Accent violet (ferme la boucle du parcours).
   ===================================================================== */

/* --- Parcours de validation : stepper 4 étapes --- */
.validate-path { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: var(--space-7); }
.validate-path > h2 { margin:0 0 .3rem; }
.validate-path > .vp-sub { color: var(--text-muted); margin:0 0 var(--space-6); }
.vsteps { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.vstep { position:relative; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); text-align:center; box-shadow: var(--shadow-xs); }
.vstep .vs-badge { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; margin:0 auto var(--space-4); font-weight:800; font-size:.9rem; }
.vstep .vs-ico { width:60px; height:60px; border-radius: var(--radius-lg); display:grid; place-items:center; margin:0 auto var(--space-4); }
.vstep .vs-ico svg { width:30px; height:30px; }
.vstep h3 { font-size:1.05rem; margin:0 0 .4rem; }
.vstep p { font-size:.9rem; color: var(--text-muted); margin:0 0 var(--space-4); line-height:1.5; }
.vstep .vs-status { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; padding:.4rem .8rem; border-radius: var(--radius-pill); }
.vstep .vs-status svg { width:1em; height:1em; }
.vstep .vs-date { display:block; font-size: var(--fs-xs); color: var(--text-faint); margin-top:.5rem; }
.vstep .vs-hint { display:block; font-size: var(--fs-xs); color: var(--text-faint); margin-top:.4rem; }
/* Connecteur entre étapes */
.vstep::after { content:""; position:absolute; top: 54px; right:-8px; width:16px; height:2px; background: var(--brand-purple-300); z-index:1; }
.vsteps .vstep:last-child::after { display:none; }

/* États */
.vstep.is-done .vs-badge { background: var(--step-retenir); color:#fff; }
.vstep.is-done .vs-ico { background: var(--step-retenir-bg); color: var(--step-retenir); }
.vstep.is-done .vs-status { background: var(--step-retenir-bg); color: var(--step-retenir); }
.vstep.is-current { border-color: var(--brand-purple-300); box-shadow: 0 0 0 3px var(--brand-purple-50); }
.vstep.is-current .vs-badge { background: var(--brand-purple); color:#fff; }
.vstep.is-current .vs-ico { background: var(--brand-purple-100); color: var(--brand-purple); }
.vstep.is-current .vs-status { background: var(--brand-purple-100); color: var(--brand-purple); }
.vstep.is-locked { background: var(--bg-tint); }
.vstep.is-locked .vs-badge { background: #e6e3f0; color: var(--text-faint); }
.vstep.is-locked .vs-ico { background: #eeecf5; color: var(--text-faint); }
.vstep.is-locked h3, .vstep.is-locked p { color: var(--text-faint); }
.vstep.is-locked .vs-status { background: #eeecf5; color: var(--text-faint); }
.vstep.is-locked::after { background: #e0dcec; }
.vstep.is-retry .vs-badge { background: var(--step-agir); color:#fff; }
.vstep.is-retry .vs-ico { background: var(--step-agir-bg); color: var(--step-agir); }
.vstep.is-retry .vs-status { background: var(--step-agir-bg); color:#b9791b; }
.vstep .vs-cta { margin-top: var(--space-3); }

@media (max-width: 900px){ .vsteps { grid-template-columns: 1fr; } .vstep::after { top:auto; right:auto; bottom:-10px; left:50%; width:2px; height:16px; transform:translateX(-50%); } }

/* --- Formulaires (évaluation + quiz) --- */
.form-intro-tip { display:flex; gap:.8rem; background: var(--step-agir-bg); border:1px solid var(--step-agir); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6); }
.form-intro-tip .fit-ico { color:#b9791b; flex:none; } .form-intro-tip .fit-ico svg { width:22px; height:22px; }
.form-intro-tip h3 { font-family: var(--font-sans); font-size:1rem; color:#b9791b; margin:0 0 .4rem; }
.form-intro-tip ul { margin:0; padding-left:1.1rem; font-size:.9rem; color: var(--text); }
.form-intro-tip li { margin-bottom:.25rem; }

.qcard { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-card); margin-bottom: var(--space-5); }
.qcard .q-head { display:flex; gap:.8rem; align-items:flex-start; margin-bottom: var(--space-4); }
.qcard .q-num { width:30px; height:30px; border-radius:50%; background: var(--brand-purple); color:#fff; font-weight:800; font-size:.85rem; display:grid; place-items:center; flex:none; }
.qcard .q-prompt { font-weight:700; color: var(--ink); font-size:1.05rem; line-height:1.35; margin:0; padding-top:.15rem; }
.qcard .q-help { font-size:.88rem; color: var(--text-muted); margin:.3rem 0 0; }
.qcard textarea, .qcard input[type=text] { width:100%; border:1px solid var(--border); border-radius: var(--radius); padding:.8rem 1rem; font:inherit; font-size:.95rem; color: var(--ink); resize:vertical; min-height:110px; background: var(--bg-tint); }
.qcard input[type=text] { min-height:0; }
.qcard textarea:focus, .qcard input:focus { outline:2px solid var(--brand-purple-300); outline-offset:1px; border-color: var(--brand-purple); background:#fff; }
.qcard .q-counter { text-align:right; font-size: var(--fs-xs); color: var(--text-faint); margin-top:.4rem; }
.qcard .q-counter.over { color: var(--danger, #d64545); font-weight:700; }

/* Options radio/checkbox */
.opt-list { display:flex; flex-direction:column; gap:.6rem; }
.opt { display:flex; align-items:center; gap:.8rem; border:1px solid var(--border); border-radius: var(--radius); padding:.8rem 1rem; cursor:pointer; transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--brand-purple-300); background: var(--brand-purple-50); }
.opt input { position:absolute; opacity:0; width:0; height:0; }
.opt .opt-mark { width:22px; height:22px; border:2px solid var(--border-strong, #c8c3da); border-radius:50%; flex:none; display:grid; place-items:center; transition: all .12s; }
.opt.is-checkbox .opt-mark { border-radius: 6px; }
.opt .opt-mark svg { width:13px; height:13px; color:#fff; opacity:0; }
.opt .opt-label { font-size:.98rem; color: var(--ink-soft); }
.opt input:checked ~ .opt-mark { background: var(--brand-purple); border-color: var(--brand-purple); }
.opt input:checked ~ .opt-mark svg { opacity:1; }
.opt:has(input:checked) { border-color: var(--brand-purple); background: var(--brand-purple-50); box-shadow: 0 0 0 2px var(--brand-purple-100); }
.opt input:focus-visible ~ .opt-mark { outline:2px solid var(--brand-purple-300); outline-offset:2px; }

/* Échelle */
.scale-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.scale-opt { flex:1; min-width:52px; text-align:center; border:1px solid var(--border); border-radius: var(--radius); padding:.7rem .3rem; cursor:pointer; font-weight:700; color: var(--ink-soft); }
.scale-opt:hover { border-color: var(--brand-purple-300); background: var(--brand-purple-50); }
.scale-opt input { position:absolute; opacity:0; }
.scale-opt:has(input:checked) { background: var(--brand-purple); color:#fff; border-color: var(--brand-purple); }

/* Barre d'actions formulaire */
.form-actions { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 620px){ .form-actions { flex-direction:column-reverse; } .form-actions .btn { width:100%; } }

/* Erreurs de validation */
.field-error { color: var(--danger, #d64545); font-size:.85rem; margin-top:.4rem; display:none; }
.qcard.has-error { border-color: var(--danger, #d64545); box-shadow: 0 0 0 2px #fbe4e4; }
.qcard.has-error .field-error { display:block; }
.form-error-summary { background:#fbe4e4; border:1px solid #f2b8b8; color:#a12d2d; border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-5); font-size:.92rem; display:none; }
.form-error-summary.show { display:block; }

/* --- Résultat du quiz --- */
.result-hero { border-radius: var(--radius-2xl); padding: var(--space-8); text-align:center; margin-bottom: var(--space-6); }
.result-hero.pass { background: linear-gradient(160deg, var(--step-retenir-bg), #e7f7f4); }
.result-hero.fail { background: linear-gradient(160deg, var(--step-agir-bg), #fdefd6); }
.result-hero .rh-ring { width:120px; height:120px; border-radius:50%; margin:0 auto var(--space-4); display:grid; place-items:center; background:#fff; box-shadow: var(--shadow); position:relative; }
.result-hero .rh-score { font-family: var(--font-serif); font-size:2.4rem; line-height:1; color: var(--ink); }
.result-hero .rh-pct { font-size:.85rem; color: var(--text-muted); }
.result-hero h1 { margin:.5rem 0; }
.result-hero.pass h1 { color: var(--step-retenir); }
.result-hero.fail h1 { color:#b9791b; }
.result-hero p { color: var(--text-muted); margin:0 auto var(--space-5); max-width:52ch; }
.result-hero .rh-frac { font-weight:800; color: var(--ink); }

/* Correction */
.correction-item { border-left:4px solid var(--border); padding:.4rem 0 .4rem 1rem; margin-bottom: var(--space-4); }
.correction-item.ok { border-color: var(--step-retenir); }
.correction-item.ko { border-color: var(--danger, #d64545); }
.correction-item .ci-status { font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.35rem; }
.correction-item.ok .ci-status { color: var(--step-retenir); }
.correction-item.ko .ci-status { color: var(--danger, #d64545); }
.correction-item .ci-prompt { font-weight:700; color: var(--ink); margin:.3rem 0; }
.correction-item .ci-line { font-size:.9rem; margin:.15rem 0; color: var(--text); }
.correction-item .ci-expl { font-size:.88rem; color: var(--text-muted); background: var(--bg-tint); border-radius: var(--radius-sm); padding:.6rem .8rem; margin-top:.5rem; }

/* --- Attestation (écran de réussite) --- */
.attest-hero { text-align:center; padding: var(--space-8) var(--space-6); }
.attest-badge { width:130px; height:130px; margin:0 auto var(--space-5); position:relative; display:grid; place-items:center; }
.attest-badge .ab-disc { position:absolute; inset:0; border-radius:50%; background: linear-gradient(150deg, var(--brand-purple-100), var(--step-retenir-bg)); }
.attest-badge svg { width:64px; height:64px; color: var(--brand-purple); position:relative; }
.attest-hero h1 { margin:0 0 var(--space-3); }
.attest-hero .ah-sub { color: var(--text-muted); font-size: var(--fs-lead); max-width:52ch; margin:0 auto var(--space-5); }
.attest-card { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-2xl); box-shadow: var(--shadow); padding: var(--space-7); max-width:720px; margin:0 auto; }
.attest-card .ac-ribbon { width:70px; height:70px; margin:0 auto var(--space-4); color: var(--brand-purple); }
.attest-card .ac-ribbon svg { width:100%; height:100%; }
.attest-meta { display:flex; flex-wrap:wrap; justify-content:center; gap: var(--space-5); margin: var(--space-5) 0; }
.attest-meta .am-item { text-align:center; }
.attest-meta .am-label { font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); }
.attest-meta .am-value { font-weight:700; color: var(--ink); }
.attest-actions { display:flex; gap: var(--space-3); justify-content:center; flex-wrap:wrap; margin-top: var(--space-5); }

/* =====================================================================
   PHASE D — Pages plateforme (Accueil connecté, Thèmes, Mes parcours,
   Mon compte, Administration). Réutilise tokens/cards/boutons existants.
   ===================================================================== */

/* --- Mini-stepper de progression (partagé) --- */
.tp-stepper { display:flex; align-items:flex-start; gap:0; }
.tp-step { display:flex; flex-direction:column; align-items:center; position:relative; flex:1; min-width:0; }
.tp-step .tp-dot { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; border:2px solid var(--brand-purple-100); background:#fff; z-index:1; }
.tp-step .tp-dot svg { width:13px; height:13px; }
.tp-step .tp-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top:.4rem; text-align:center; white-space:nowrap; }
.tp-step .tp-line { position:absolute; top:12px; left:50%; width:100%; height:2px; background: var(--border); z-index:0; }
.tp-step.is-done .tp-dot { background: var(--brand-purple); border-color: var(--brand-purple); color:#fff; }
.tp-step.is-done .tp-label { color: var(--brand-purple); font-weight:600; }
.tp-step.is-done .tp-line { background: var(--brand-purple); }
.tp-step.is-current .tp-dot { border-color: var(--brand-purple); background:#fff; box-shadow:0 0 0 3px var(--brand-purple-100); }
.tp-step.is-current .tp-label { color: var(--brand-purple); font-weight:700; }
.tp-step.is-todo .tp-dot { color: var(--brand-purple-300); border-color: var(--brand-purple-100); }
.tp-stepper.is-compact .tp-step .tp-dot { width:20px; height:20px; } .tp-stepper.is-compact .tp-line { top:9px; }

/* --- Dashboard : hero de recherche (Accueil connecté) --- */
.dash-hero { background: var(--brand-purple-50); border-radius: var(--radius-2xl); padding: var(--space-8); margin-bottom: var(--space-7); }
.dash-hero .dh-grid { display:grid; grid-template-columns: 1.4fr .6fr; gap: var(--space-6); align-items:center; }
.dash-hero .dh-greet { color: var(--brand-purple); font-weight:700; margin:0 0 var(--space-3); }
.dash-hero h1 { margin:0 0 var(--space-3); }
.dash-hero .dh-sub { color: var(--text-muted); margin:0 0 var(--space-5); max-width:48ch; }
.dash-search { display:flex; gap: var(--space-3); max-width:640px; }
.dash-search input { flex:1; border:1px solid var(--border); border-radius: var(--radius-pill); padding:.9rem 1.4rem; font:inherit; background:#fff; }
.dash-search input:focus { outline:2px solid var(--brand-purple-300); border-color: var(--brand-purple); }
.dash-examples { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top: var(--space-4); }
.dash-examples .de-label { font-size: var(--fs-sm); color: var(--text-faint); }
.dash-chip { display:inline-block; background:#fff; border:1px solid var(--border); border-radius: var(--radius-pill); padding:.35rem .9rem; font-size: var(--fs-sm); color: var(--ink-soft); text-decoration:none; transition: all .12s; }
.dash-chip:hover { border-color: var(--brand-purple-300); background: var(--brand-purple-50); color: var(--brand-purple); text-decoration:none; }
.dash-hero .dh-illus img { width:100%; max-width:260px; margin:0 auto; display:block; }
@media (max-width: 900px){ .dash-hero .dh-grid { grid-template-columns:1fr; } .dash-hero .dh-illus { display:none; } .dash-hero { padding: var(--space-6); } .dash-search { flex-direction:column; } .dash-search .btn { width:100%; } }

/* Section header avec « Voir tout » */
.sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-5); }
.sec-head h2 { margin:0; }
.sec-head .see-all { font-size: var(--fs-sm); font-weight:600; color: var(--brand-purple); text-decoration:none; white-space:nowrap; }
.sec-head .see-all:hover { text-decoration:underline; }

/* --- Carte « Reprendre ma formation » --- */
.resume-card { display:grid; grid-template-columns: 150px 1fr auto; gap: var(--space-5); align-items:center; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-card); }
.resume-card .rc-illus { width:150px; height:110px; border-radius: var(--radius-lg); object-fit:cover; background: var(--brand-purple-50); }
.resume-card .rc-body h3 { margin:0 0 .2rem; font-size:1.2rem; }
.resume-card .rc-where { font-size: var(--fs-sm); color: var(--text-muted); margin:0 0 var(--space-4); }
.resume-card .rc-right { text-align:center; display:flex; flex-direction:column; gap:var(--space-3); align-items:center; }
.resume-card .rc-pct { font-family: var(--font-sans); font-weight:800; font-size:1.7rem; color: var(--brand-purple); line-height:1; }
@media (max-width: 820px){ .resume-card { grid-template-columns:1fr; text-align:center; } .resume-card .rc-illus { width:100%; height:150px; } .resume-card .tp-stepper { max-width:420px; margin:0 auto; } }

/* --- Grille de cards de thèmes (catalogue + recommandés) --- */
.themes-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 1024px){ .themes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .themes-grid { grid-template-columns: 1fr; } }
.theme-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s; text-decoration:none; }
.theme-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration:none; }
.theme-card .tc-top { padding: var(--space-5) var(--space-5) 0; display:flex; gap: var(--space-4); }
.theme-card .tc-info { flex:1; min-width:0; }
.theme-card .tc-cat { display:inline-block; font-size: var(--fs-xs); font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--brand-purple); background: var(--brand-purple-50); border-radius: var(--radius-pill); padding:.25rem .7rem; margin-bottom:.6rem; }
.theme-card h3 { font-family: var(--font-serif); font-weight:400; color: var(--ink); font-size:1.25rem; line-height:1.15; margin:0 0 .5rem; }
.theme-card .tc-meta { font-size: var(--fs-sm); color: var(--text-muted); }
.theme-card .tc-illus { width:96px; height:96px; border-radius: var(--radius-lg); object-fit:cover; background: var(--brand-purple-50); flex:none; }
.theme-card .tc-foot { margin-top:auto; padding: var(--space-4) var(--space-5); border-top:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); }
.theme-card .tc-progress { flex:1; }
.theme-card .tc-bar { height:6px; border-radius:3px; background: var(--bg-tint); overflow:hidden; }
.theme-card .tc-bar span { display:block; height:100%; background: var(--brand-purple); border-radius:3px; }
.theme-card .tc-pct { font-size: var(--fs-xs); color: var(--text-muted); margin-top:.3rem; display:block; }
.theme-card .tc-status { font-size: var(--fs-xs); font-weight:700; padding:.35rem .8rem; border-radius: var(--radius-pill); white-space:nowrap; }
.tc-status.todo { background: var(--bg-tint); color: var(--text-muted); }
.tc-status.in_progress { background: var(--brand-purple-50); color: var(--brand-purple); }
.tc-status.done { background: var(--brand-purple-100); color: var(--brand-purple-700, #4c1fb3); }
/* accent par card via nth (les 3 recommandés) */
.themes-grid.reco .theme-card:nth-child(1) { background: linear-gradient(180deg,#f3fbf9,#fff 40%); }
.themes-grid.reco .theme-card:nth-child(2) { background: linear-gradient(180deg,#fff4ee,#fff 40%); }
.themes-grid.reco .theme-card:nth-child(3) { background: linear-gradient(180deg,#f4f0ff,#fff 40%); }

/* Barre de recherche + filtre (catalogue) */
.catalog-tools { display:flex; gap: var(--space-3); margin-bottom: var(--space-6); }
.catalog-tools .ct-search { flex:1; position:relative; }
.catalog-tools .ct-search svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color: var(--text-faint); }
.catalog-tools .ct-search input { width:100%; border:1px solid var(--border); border-radius: var(--radius-pill); padding:.8rem 1.2rem .8rem 2.6rem; font:inherit; background:#fff; }
.catalog-tools select { border:1px solid var(--border); border-radius: var(--radius-pill); padding:.8rem 1.2rem; font:inherit; background:#fff; color: var(--ink-soft); }
.catalog-tools input:focus, .catalog-tools select:focus { outline:2px solid var(--brand-purple-300); border-color: var(--brand-purple); }
@media (max-width: 680px){ .catalog-tools { flex-direction:column; } }

/* --- Mes parcours : cards horizontales --- */
.parcours-card { display:grid; grid-template-columns: 110px 1fr auto; gap: var(--space-5); align-items:center; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-card); margin-bottom: var(--space-4); }
.parcours-card .pc-illus { width:110px; height:110px; border-radius: var(--radius-lg); object-fit:cover; background: var(--brand-purple-50); }
.parcours-card .pc-body h3 { margin:0 0 .2rem; font-size:1.15rem; }
.parcours-card .pc-last { font-size: var(--fs-sm); color: var(--text-muted); margin:0 0 var(--space-4); }
.parcours-card .pc-right { text-align:center; }
.parcours-card .pc-pct { font-family: var(--font-sans); font-weight:800; font-size:1.5rem; color: var(--brand-purple); line-height:1; margin-bottom: var(--space-3); }
@media (max-width: 820px){ .parcours-card { grid-template-columns:1fr; text-align:center; } .parcours-card .pc-illus { width:100%; height:150px; } .parcours-card .tp-stepper { max-width:420px; margin:0 auto var(--space-4); } }

/* --- Mon compte : 2 cards formulaire --- */
.account-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items:start; }
@media (max-width: 820px){ .account-grid { grid-template-columns:1fr; } }
.account-card { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); }
.account-card h2 { font-size:1.25rem; margin:0 0 var(--space-5); }
.field { margin-bottom: var(--space-4); }
.field label { display:block; font-size: var(--fs-sm); font-weight:600; color: var(--ink-soft); margin-bottom:.4rem; }
.field input { width:100%; border:1px solid var(--border); border-radius: var(--radius); padding:.75rem 1rem; font:inherit; background: var(--bg-tint); }
.field input:focus { outline:2px solid var(--brand-purple-300); border-color: var(--brand-purple); background:#fff; }
.field input:disabled, .field input[readonly] { background: var(--bg-tint); color: var(--text-muted); cursor:not-allowed; }
.field .field-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top:.35rem; }
.account-note { font-size: var(--fs-sm); color: var(--text-muted); font-style:italic; }

/* --- Administration : tabs + tableau --- */
.admin-tabs { display:flex; gap: var(--space-5); border-bottom:1px solid var(--border); margin-bottom: var(--space-6); }
.admin-tab { padding:.7rem 0; font-weight:600; color: var(--text-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.admin-tab.active { color: var(--brand-purple); border-color: var(--brand-purple); }
.admin-tab:hover { color: var(--brand-purple); text-decoration:none; }
.admin-panel { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); margin-bottom: var(--space-6); }
.admin-panel h2 { margin:0 0 var(--space-4); }
.admin-form-row { display:grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--space-3); align-items:end; }
@media (max-width: 900px){ .admin-form-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .admin-form-row { grid-template-columns: 1fr; } }
.admin-table-wrap { overflow-x:auto; border:1px solid var(--border-soft); border-radius: var(--radius-lg); }
.admin-table { width:100%; border-collapse:collapse; min-width:720px; }
.admin-table th { text-align:left; font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); padding: var(--space-4); border-bottom:1px solid var(--border); font-weight:700; }
.admin-table td { padding: var(--space-4); border-bottom:1px solid var(--border-soft); font-size:.92rem; color: var(--ink-soft); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.badge-role { font-size: var(--fs-xs); font-weight:700; padding:.2rem .6rem; border-radius: var(--radius-pill); background: var(--brand-purple-50); color: var(--brand-purple); }
.badge-status { font-size: var(--fs-xs); font-weight:700; padding:.25rem .7rem; border-radius: var(--radius-pill); }
.badge-status.actif { background: var(--step-retenir-bg); color: var(--step-retenir); }
.badge-status.invite { background: var(--step-agir-bg); color:#b9791b; }
.badge-status.inactif { background: var(--bg-tint); color: var(--text-muted); }
.admin-actions-cell { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Bandeau POC retiré en prod : classe utilitaire pour masquer */
.poc-note { display:none; }

/* =====================================================================
   AUTHENTIFICATION — V2 (login, activation, mot de passe oublié…)
   ===================================================================== */
.auth-body { margin:0; }
.auth-v2 { min-height:100vh; display:grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px){ .auth-v2 { grid-template-columns: 1fr; } }

/* Panneau de marque */
.auth-v2-brand { background: linear-gradient(160deg, var(--brand-purple-700,#4c1fb3), var(--brand-purple)); color:#fff; padding: clamp(2rem, 5vw, 4.5rem); display:flex; flex-direction:column; justify-content:center; gap: var(--space-5); }
@media (max-width: 860px){ .auth-v2-brand { padding: 2.5rem 1.5rem; } }
.auth-v2-logo { display:inline-block; }
.auth-v2-logo img { height:38px; width:auto; }
.auth-v2-brand h1 { font-family: var(--font-serif); font-weight:400; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height:1.1; margin:0; color:#fff; }
.auth-v2-brand p { color: rgba(255,255,255,.85); max-width:44ch; margin:0; line-height:1.6; }
.auth-v2-steps { display:flex; flex-wrap:wrap; gap:.5rem; margin-top: var(--space-3); }
.auth-v2-steps .av-step { font-size: var(--fs-sm); font-weight:700; padding:.35rem .9rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); color:#fff; }

/* Panneau formulaire */
.auth-v2-panel { display:flex; align-items:center; justify-content:center; padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--bg-page,#faf9ff); }
.auth-v2-card { width:100%; max-width:420px; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-2xl); box-shadow: var(--shadow); padding: clamp(1.5rem, 3vw, 2.5rem); }
.auth-v2-head h2 { font-size:1.6rem; margin:0 0 .3rem; }
.auth-v2-head p { color: var(--text-muted); margin:0 0 var(--space-5); }
.auth-v2-form .field { margin-bottom: var(--space-4); }
.auth-v2-form label { display:block; font-size: var(--fs-sm); font-weight:600; color: var(--ink-soft); margin-bottom:.4rem; }
.auth-v2-form input { width:100%; border:1px solid var(--border); border-radius: var(--radius); padding:.8rem 1rem; font:inherit; background: var(--bg-tint); }
.auth-v2-form input:focus { outline:2px solid var(--brand-purple-300); border-color: var(--brand-purple); background:#fff; }
.auth-v2-links { margin-top: var(--space-4); text-align:center; }
.auth-v2-links a { color: var(--brand-purple); font-size: var(--fs-sm); font-weight:600; text-decoration:none; }
.auth-v2-links a:hover { text-decoration:underline; }
.auth-v2-divider { border:none; border-top:1px solid var(--border-soft); margin: var(--space-5) 0; }
.auth-v2-note { font-size: var(--fs-sm); color: var(--text-muted); text-align:center; margin:0; line-height:1.5; }

/* Compat : styliser les templates auth V1 (activate/forgot/reset/token_invalid)
   rendus dans le layout auth V2, sans les réécrire. */
.auth-v2-card h2 { font-size:1.6rem; margin:0 0 .3rem; }
.auth-v2-card > p.muted { color: var(--text-muted); margin:0 0 var(--space-5); }
.auth-v2-card .stack .field { margin-bottom: var(--space-4); }
.auth-v2-card .field label { display:block; font-size: var(--fs-sm); font-weight:600; color: var(--ink-soft); margin-bottom:.4rem; }
.auth-v2-card .field input { width:100%; border:1px solid var(--border); border-radius: var(--radius); padding:.8rem 1rem; font:inherit; background: var(--bg-tint); }
.auth-v2-card .field input:focus { outline:2px solid var(--brand-purple-300); border-color: var(--brand-purple); background:#fff; }
.auth-v2-card .btn-block { width:100%; }
.auth-v2-card .auth-links { margin-top: var(--space-4); text-align:center; }
.auth-v2-card .auth-links a { color: var(--brand-purple); font-size: var(--fs-sm); font-weight:600; text-decoration:none; }
.auth-v2-card .auth-links a:hover { text-decoration:underline; }
.auth-v2-card .divider { border:none; border-top:1px solid var(--border-soft); margin: var(--space-5) 0; }

/* --- Pages légales --- */
.legal-prose { color: var(--text); line-height:1.7; }
.legal-prose h2 { font-family: var(--font-sans); font-size:1.15rem; color: var(--ink); margin: var(--space-6) 0 var(--space-3); font-weight:700; }
.legal-prose p { margin:0 0 var(--space-4); }
.legal-prose ul { margin:0 0 var(--space-4); padding-left:1.4rem; }
.legal-prose li { margin-bottom:.4rem; }
.legal-prose a { color: var(--brand-purple); }
.legal-prose .article-lead { font-size:1.05rem; color: var(--ink-soft); border-left:3px solid var(--brand-purple-300); padding-left:1rem; font-style:italic; }
.legal-cross a { color: var(--brand-purple); }

/* --- Liens légaux sous le login --- */
.auth-v2-legal { margin-top: var(--space-5); text-align:center; font-size: var(--fs-xs); color: var(--text-faint); }
.auth-v2-legal a { color: var(--text-muted); text-decoration:none; }
.auth-v2-legal a:hover { color: var(--brand-purple); text-decoration:underline; }

/* --- Cartes de thème avec visuel identitaire (catalogue V2) --- */
.theme-card .tc-visual { width:100%; aspect-ratio:4/3; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.theme-card .tc-visual img { width:100%; height:100%; object-fit:cover; object-position:center; }
.theme-card .tc-body { padding: var(--space-4) var(--space-5) 0; }
.theme-card .tc-body .tc-cat { display:inline-block; font-size: var(--fs-xs); font-weight:800; letter-spacing:.03em; text-transform:uppercase; border-radius: var(--radius-pill); padding:.25rem .7rem; margin-bottom:.5rem; }
.theme-card .tc-body h3 { font-family: var(--font-serif); font-weight:400; color: var(--ink); font-size:1.2rem; line-height:1.15; margin:0 0 .4rem; }
.theme-card .tc-body .tc-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-3); }


/* --- Landing : section recherche (feature unique) --- */
.search-feature { max-width:820px; margin:0 auto; text-align:center; }
.search-feature h2 { margin:0 0 var(--space-4); }
.search-feature-lead { color: var(--text-muted); font-size:1.05rem; max-width:60ch; margin:0 auto var(--space-6); }
.search-feature-bar { display:flex; align-items:center; gap:.5rem; background:#fff; border:2px solid var(--brand-purple-100); border-radius: var(--radius-pill); padding:.5rem .5rem .5rem 1.2rem; box-shadow: var(--shadow); max-width:680px; margin:0 auto var(--space-5); transition:border-color .15s; }
.search-feature-bar:focus-within { border-color: var(--brand-purple); }
.search-feature-bar .sfb-ico { width:22px; height:22px; color: var(--brand-purple); flex:none; }
.search-feature-bar input { flex:1; border:none; outline:none; font:inherit; font-size:1.02rem; background:none; padding:.6rem 0; min-width:0; }
.search-feature-bar .btn { flex:none; }
.search-feature-examples { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; max-width:640px; margin:0 auto var(--space-4); }
.sfe-chip { display:inline-block; background: var(--brand-purple-50); color: var(--brand-purple); border-radius: var(--radius-pill); padding:.35rem .9rem; font-size:.9rem; text-decoration:none; transition: all .12s; }
.sfe-chip:hover { background: var(--brand-purple-100); text-decoration:none; }
.search-feature-micro { font-size: var(--fs-sm); color: var(--text-faint); margin:0; }
@media (max-width:600px){ .search-feature-bar { flex-wrap:wrap; border-radius: var(--radius-lg); } .search-feature-bar input { width:100%; } .search-feature-bar .btn { width:100%; } }

/* --- Landing : intro de section + bio experts --- */
.section-intro { color: var(--text-muted); max-width:70ch; margin: var(--space-3) auto 0; font-size:1rem; line-height:1.6; }
.expert-card-v .ecv-bio { font-size:.85rem; color: var(--text-muted); line-height:1.5; margin: var(--space-2) 0 var(--space-3); }
/* Portraits experts : cadrage CSS uniquement, fichiers PNG intacts */
.expert-card-v .ecv-portrait img { width:110px; height:110px; border-radius:50%; object-fit:cover; object-position:center top; }

/* --- Landing : logos de confiance --- */
.trust-item.trust-logo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; }
.trust-item .ti-logo { max-width:120px; max-height:70px; width:auto; height:auto; object-fit:contain; }
.trust-note { text-align:center; font-size: var(--fs-sm); color: var(--text-muted); max-width:70ch; margin: var(--space-6) auto 0; line-height:1.5; }

/* --- Accueil connecté : hero recherche centré (sans illustration) --- */
.dash-hero-centered { text-align:center; }
.dash-hero-centered .dh-inner { max-width:760px; margin:0 auto; }
.dash-hero-centered .dh-sub { margin-left:auto; margin-right:auto; }
.dash-search-lg { display:flex; align-items:center; gap:.5rem; background:#fff; border:2px solid var(--brand-purple-100); border-radius: var(--radius-pill); padding:.5rem .5rem .5rem 1.2rem; box-shadow: var(--shadow); max-width:640px; margin:0 auto var(--space-4); transition:border-color .15s; }
.dash-search-lg:focus-within { border-color: var(--brand-purple); }
.dash-search-lg .ds-ico { width:22px; height:22px; color: var(--brand-purple); flex:none; }
.dash-search-lg input { flex:1; border:none; outline:none; background:none; font:inherit; font-size:1.05rem; padding:.7rem 0; min-width:0; }
.dash-search-lg .btn { flex:none; }
.dash-hero-centered .dash-examples { justify-content:center; }
@media (max-width:600px){ .dash-search-lg { flex-wrap:wrap; border-radius:var(--radius-lg); } .dash-search-lg input { width:100%; } .dash-search-lg .btn { width:100%; } }

/* --- Programme audio : chapitres cliquables (V2 patch) --- */
.programme-grid:not(:has(.chapters-card)) { grid-template-columns: 1fr; }
button.chapter { width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--border-soft); cursor:pointer; font:inherit; display:flex; gap: var(--space-4); align-items:center; padding:.7rem .9rem; border-radius: var(--radius); transition: background .15s; }
button.chapter:last-child { border-bottom:none; }
button.chapter:hover { background: var(--step-ecouter-bg); }
button.chapter .ch-play { width:34px; height:34px; border-radius:50%; background: var(--step-ecouter-bg); color: var(--step-ecouter); display:grid; place-items:center; flex:none; transition: all .15s; }
button.chapter .ch-play svg { width:15px; height:15px; }
button.chapter.is-active { background: var(--step-ecouter-bg); }
button.chapter.is-active .ch-play { background: var(--step-ecouter); color:#fff; }
button.chapter.is-active .ch-info h4 { color: var(--step-ecouter); }
button.chapter:focus-visible { outline:2px solid var(--step-ecouter); outline-offset:2px; }

/* --- Listing thèmes : grille 4 colonnes compacte (corrections V2) --- */
#themes-grid.themes-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); }
@media (max-width: 1200px){ #themes-grid.themes-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){ #themes-grid.themes-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ #themes-grid.themes-grid { grid-template-columns: 1fr; } }
/* cartes plus compactes dans le catalogue */
#themes-grid .theme-card .tc-visual { aspect-ratio: 16/10; }
#themes-grid .theme-card .tc-body { padding: var(--space-3) var(--space-4) 0; }
#themes-grid .theme-card .tc-body h3 { font-size:1.05rem; }
#themes-grid .theme-card .tc-body .tc-cat { font-size:10px; padding:.2rem .55rem; margin-bottom:.4rem; }
#themes-grid .theme-card .tc-body .tc-meta { font-size: var(--fs-xs); margin-bottom: var(--space-2); }
#themes-grid .theme-card .tc-foot { padding: var(--space-3) var(--space-4); }
#themes-grid .theme-card .tc-status { font-size:10px; padding:.25rem .6rem; }

/* --- Bloc résultats de recherche (accueil, corrections V2) --- */
.search-results { background: #f0fbf6; border:none; border-radius: var(--radius-2xl); padding: var(--space-6) var(--space-6) var(--space-7); margin: var(--space-7) 0; }
.search-results .sr-head { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap:wrap; }
.search-results .sr-count { color: var(--text-muted); font-size: var(--fs-sm); margin:.3rem 0 0; }
.search-results .sr-clear { display:inline-flex; align-items:center; gap:.4rem; font-size: var(--fs-sm); font-weight:600; color: var(--brand-purple); text-decoration:none; white-space:nowrap; padding:.5rem .9rem; border-radius: var(--radius-pill); background:#fff; border:1px solid var(--border-soft); }
.search-results .sr-clear:hover { background: var(--brand-purple-50); text-decoration:none; }
.sr-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); }
@media (max-width:1100px){ .sr-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .sr-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .sr-grid { grid-template-columns: 1fr; } }
.search-results .sr-empty { text-align:center; padding: var(--space-6) 0; }
.search-results .sr-empty p { color: var(--text-muted); margin:0 0 var(--space-4); }
/* carte compacte (résultats) */
.theme-card-compact .tc-visual { aspect-ratio: 16/10; }
.theme-card-compact .tc-body { padding: var(--space-3) var(--space-4) 0; }
.theme-card-compact .tc-body h3 { font-size:1rem; }

/* --- Mes parcours : badge terminé + empty state (corrections V2) --- */
.parcours-card .pc-title-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.parcours-card .pc-badge-done { display:inline-flex; align-items:center; gap:.3rem; font-size: var(--fs-xs); font-weight:700; color: var(--step-retenir); background: var(--step-retenir-bg); padding:.2rem .6rem; border-radius: var(--radius-pill); }
.parcours-card .pc-badge-done svg { width:1em; height:1em; }
.parcours-card.is-done { border-color:#c4ece7; }
.parcours-empty { text-align:center; padding: var(--space-8) var(--space-5); background: var(--brand-purple-50); border-radius: var(--radius-2xl); margin-top: var(--space-6); }
.parcours-empty p { color: var(--text-muted); margin:0 0 var(--space-4); }

/* --- Photo experte réelle dans le lecteur (cadrage CSS, PNG intact) --- */
.media-portrait { object-fit:cover; object-position:center top; border-radius:50%; }


/* --- Photo experte réelle dans la citation (page thème) --- */
.eq-portrait { object-fit:cover; object-position:center top; border-radius:50%; }

/* --- Vignettes master transparentes : contain + padding (corrections finales) --- */
.theme-card .tc-visual { padding: 8px; }
.theme-card .tc-visual img { object-fit: contain !important; width:100%; height:100%; }
#themes-grid .theme-card .tc-visual, .sr-grid .theme-card .tc-visual { padding: 6px; }
.resume-card .rc-illus, .parcours-card .pc-illus { object-fit: contain; background: linear-gradient(160deg, var(--brand-purple-50), #fff); padding:6px; }


/* =====================================================================
   TrainingProgressCard — progression globale 5 étapes (partagé)
   ===================================================================== */
.tpc { display:grid; grid-template-columns: minmax(190px,1fr) minmax(520px,4fr) minmax(140px,auto); gap: var(--space-6); align-items:center; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 26px 30px; box-shadow: var(--shadow-card); margin-bottom: var(--space-4); }
.tpc.is-done { border-color: var(--brand-purple-100); }

/* Zone 1 — infos */
.tpc-info { display:flex; align-items:center; gap: var(--space-4); min-width:0; }
.tpc-thumb { width:76px; height:76px; border-radius: var(--radius-lg); object-fit:contain; background: linear-gradient(160deg, var(--brand-purple-50), #fff); padding:6px; flex:none; }
.tpc-meta { min-width:0; }
.tpc-meta h3 { margin:0 0 .2rem; font-size:1.1rem; line-height:1.2; }
.tpc-meta .tpc-last { margin:0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Zone 2 — timeline 5 étapes */
.tpc-timeline { display:flex; align-items:flex-start; }
.tpc-step { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
.tpc-step .tpc-dot { width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--brand-purple-100); display:grid; place-items:center; z-index:1; }
.tpc-step .tpc-dot svg { width:14px; height:14px; }
.tpc-step .tpc-label { margin-top:.5rem; font-size:.78rem; line-height:1.25; text-align:center; color: var(--text-muted); max-width:120px; }
.tpc-step .tpc-line { position:absolute; top:13px; left:50%; width:100%; height:2px; background: var(--brand-purple-50); z-index:0; }
/* états */
.tpc-step.is-done .tpc-dot { background: var(--brand-purple); border-color: var(--brand-purple); color:#fff; }
.tpc-step.is-done .tpc-label { color: var(--brand-purple); font-weight:600; }
.tpc-step.is-done .tpc-line { background: var(--brand-purple); }
.tpc-step.is-current .tpc-dot { border-color: var(--brand-purple); box-shadow:0 0 0 4px var(--brand-purple-100); }
.tpc-step.is-current .tpc-label { color: var(--brand-purple); font-weight:600; }
.tpc-step.is-todo .tpc-dot { border-color: var(--brand-purple-100); }
.tpc-step.is-todo .tpc-label { color: var(--text-faint); }

/* Zone 3 — % + CTA regroupés, alignés */
.tpc-action { display:flex; flex-direction:column; align-items:center; gap:.6rem; min-width:140px; }
.tpc-action .tpc-pct { font-family: var(--font-sans); font-weight:800; font-size:30px; line-height:1; color: var(--brand-purple); }
.tpc-action .tpc-cta { min-width:130px; text-align:center; border-radius: var(--radius-pill); padding:.7rem 1.4rem; }
.tpc-action .tpc-cert { font-size: var(--fs-sm); color: var(--brand-purple); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; }
.tpc-action .tpc-cert:hover { text-decoration:underline; }

/* --- Responsive --- */
@media (max-width: 1080px){
  .tpc { grid-template-columns: minmax(180px,1.4fr) minmax(0,3fr); grid-template-areas: "info action" "timeline timeline"; row-gap: var(--space-5); }
  .tpc-info { grid-area:info; }
  .tpc-action { grid-area:action; align-items:flex-end; }
  .tpc-timeline { grid-area:timeline; }
}
@media (max-width: 620px){
  .tpc { grid-template-columns: 1fr; grid-template-areas: "info" "timeline" "action"; text-align:left; padding: 20px; }
  .tpc-action { flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .tpc-step .tpc-label { font-size:.7rem; max-width:64px; }
}

/* --- Cards thèmes : titre agrandi + description + footer aligné (corrections finales) --- */
#themes-grid .theme-card { display:flex; flex-direction:column; height:100%; }
#themes-grid .theme-card .tc-body { flex:1; }
#themes-grid .theme-card .tc-body h3 { font-size:1.2rem; font-weight:700; line-height:1.25; margin:0 0 .4rem; }
.theme-card .tc-desc { font-size:.86rem; color: var(--text-muted); line-height:1.45; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* footer aligné : barre pleine largeur + ligne %/statut */
.theme-card .tc-foot { display:block; padding: var(--space-4) var(--space-5); border-top:1px solid var(--border-soft); }
.theme-card .tc-foot .tc-bar { height:6px; border-radius:3px; background: var(--bg-tint); overflow:hidden; margin-bottom:.5rem; }
.theme-card .tc-foot .tc-bar span { display:block; height:100%; background: var(--brand-purple); border-radius:3px; }
.theme-card .tc-foot-row { display:flex; align-items:center; justify-content:space-between; }
.theme-card .tc-foot-row .tc-pct { font-family: var(--font-sans); font-weight:700; font-size:.85rem; color: var(--brand-purple); }

/* --- Cartes ressources (page thème) : tag de type au lieu du numéro --- */
.resource-card .rc-type { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.25rem .6rem; border-radius: var(--radius-pill); background: var(--brand-purple-50); color: var(--brand-purple); }
.resource-card.accent-ecouter .rc-type { background: var(--step-ecouter-bg); color: var(--step-ecouter); }
.resource-card.accent-retenir .rc-type { background: var(--step-retenir-bg); color: var(--step-retenir); }
.resource-card.accent-agir .rc-type { background: var(--step-agir-bg); color:#b9791b; }
.resource-card.accent-valider .rc-type { background: var(--brand-purple-50); color: var(--brand-purple); }

/* =====================================================================
   FLASHCARDS (Retenir) — hauteur définitive, faces 100 %, affordance nette
   ===================================================================== */
.flashcards-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items:stretch; }
@media (max-width: 900px){ .flashcards-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .flashcards-grid { grid-template-columns: 1fr; } }

.flashcard { perspective: 1200px; cursor:pointer; min-height:500px; border:none; background:none; padding:0; outline:none; }
.flashcard:focus-visible { outline:2px solid var(--brand-purple); outline-offset:3px; border-radius: var(--radius-xl); }

.fc-inner { position:relative; width:100%; height:100%; min-height:500px; transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.flashcard.is-flipped .fc-inner { transform: rotateY(180deg); }

/* Les 2 faces : 100 % de la carte, même hauteur, contenu centré, sans overflow */
.fc-face { position:absolute; inset:0; width:100%; height:100%; padding:36px 32px; display:flex; flex-direction:column; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); border:1px solid var(--border-soft); overflow:hidden; }

.fc-front { background: linear-gradient(160deg, var(--brand-purple-50), #fff); align-items:center; text-align:center; }
.fc-front .fc-ico { width:72px; height:72px; border-radius:50%; background:#fff; color: var(--brand-purple); display:grid; place-items:center; margin-bottom: var(--space-4); box-shadow: var(--shadow-xs); }
.fc-front .fc-ico svg { width:34px; height:34px; }
.fc-front h3 { font-family: var(--font-serif); font-weight:400; font-size:1.45rem; color: var(--ink); margin:0 0 var(--space-3); line-height:1.2; }
.fc-front .fc-hint { font-size:.85rem; color: var(--brand-purple); font-weight:600; display:inline-flex; align-items:center; gap:.35rem; }
/* icône flip visible + micro-oscillation */
.fc-front .fc-flip-hint { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background: var(--brand-purple-50); color: var(--brand-purple); display:grid; place-items:center; animation: fcFlipNudge 4s ease-in-out infinite; }
.fc-front .fc-flip-hint svg { width:17px; height:17px; }
@keyframes fcFlipNudge { 0%,88%,100%{ transform: rotate(0); } 92%{ transform: rotate(-18deg); } 96%{ transform: rotate(10deg); } }

.fc-back { background:#fff; transform: rotateY(180deg); }
.fc-back h4 { font-family: var(--font-sans); font-size:1.05rem; color: var(--brand-purple); margin:0 0 var(--space-4); font-weight:800; }
.fc-back ul { margin:0; padding-left:1.1rem; }
.fc-back li { font-size:.95rem; color: var(--text); margin-bottom:.6rem; line-height:1.5; }

/* Affordance : élévation permanente + hover renforcé */
.flashcard .fc-inner { box-shadow: 0 3px 12px rgba(108,44,255,.06); }
.flashcard:hover .fc-inner { transform: translateY(-4px); }
.flashcard.is-flipped:hover .fc-inner { transform: rotateY(180deg) translateY(-4px); }
.flashcard:hover .fc-front { border-color: var(--brand-purple-300); box-shadow: 0 12px 30px rgba(108,44,255,.14); }

@media (max-width: 600px){ .flashcard, .fc-inner { min-height:340px; } .fc-face { padding:30px 26px; } }
@media (prefers-reduced-motion: reduce) {
  .fc-inner { transition:none; }
  .fc-front .fc-flip-hint { animation:none; }
  .flashcard:hover .fc-inner { transform:none; }
  .flashcard.is-flipped:hover .fc-inner { transform: rotateY(180deg); }
}

/* --- Landing : tag de type de contenu sur les cartes formats --- */
.teaser-card .tc-tag-type { display:inline-flex; align-items:center; width:fit-content; font-size:11px; font-weight:700; letter-spacing:.05em; color:#fff; padding:.3rem .8rem; border-radius:999px; margin-bottom:.6rem; text-transform:uppercase; line-height:1; }

/* --- Experts : mise en avant des infos clés --- */
.ecv-role .hl, .ecv-bio .hl { color: var(--brand-purple); font-weight:600; }

/* --- Home post-login : hero recherche 2 colonnes, hauteur réduite (corrections finales) --- */
.dash-hero-2col { display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; padding: 40px 44px; }
.dash-hero-2col .dh-left h1 { margin:.3rem 0 .6rem; }
.dash-hero-2col .dh-left .dh-sub { margin:0; max-width:42ch; }
.dash-hero-2col .dh-right { width:100%; }
.dash-hero-2col .dash-search-lg { max-width:none; margin:0 0 var(--space-4); }
.dash-hero-2col .dash-examples { justify-content:flex-start; }
@media (max-width: 900px){
  .dash-hero-2col { grid-template-columns:1fr; gap: var(--space-5); padding: 28px 24px; }
}

/* --- Carousel dots : max 3, actif capsule violette (corrections finales) --- */
.carousel-dots { display:flex; gap:.4rem; justify-content:center; margin-top: var(--space-4); }
.carousel-dots button { width:8px; height:8px; border-radius:999px; border:none; background: var(--brand-purple-100); cursor:pointer; padding:0; transition: all .2s; }
.carousel-dots button[aria-current="true"] { width:22px; background: var(--brand-purple); }

/* --- Landing CTA final : titre 50px desktop, responsive (corrections finales) --- */
.cta-copy h2 { font-size:50px; line-height:1.05; }
@media (max-width: 1024px){ .cta-copy h2 { font-size:42px; } }
@media (max-width: 720px){ .cta-copy h2 { font-size:36px; } }
@media (max-width: 480px){ .cta-copy h2 { font-size:34px; } }

/* --- Single thème : forme fluide (blob) derrière le PNG (corrections finales) --- */
.theme-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:340px; max-height:460px; }
.theme-visual .theme-blob {
  position:absolute; z-index:0; width:min(420px, 90%); height:340px;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background: linear-gradient(150deg, var(--blob-a, var(--brand-purple-50)), color-mix(in srgb, var(--blob-b, var(--brand-purple-300)) 35%, #fff));
  border-radius: 58% 42% 62% 38% / 45% 58% 42% 55%;
  filter: blur(2px); opacity:.55;
  animation: themeBlobMorph 11s ease-in-out infinite alternate;
}
.theme-visual img { position:relative; z-index:1; object-fit:contain; max-width:100%; max-height:420px; width:auto; height:auto; }
@keyframes themeBlobMorph {
  0%   { border-radius: 58% 42% 62% 38% / 45% 58% 42% 55%; }
  50%  { border-radius: 45% 55% 48% 52% / 55% 45% 60% 40%; }
  100% { border-radius: 62% 38% 55% 45% / 48% 62% 40% 55%; }
}
@media (prefers-reduced-motion: reduce) { .theme-visual .theme-blob { animation:none; } }
@media (max-width: 820px){ .theme-visual { min-height:280px; } .theme-visual .theme-blob { height:280px; } }

/* --- Single thème : À propos + Expert en 2 colonnes compactes (corrections finales) --- */
.about-expert-grid { display:grid; grid-template-columns: 58% 42%; gap: var(--space-6); align-items:stretch; }
@media (max-width: 860px){ .about-expert-grid { grid-template-columns:1fr; } }
.about-expert-grid .about-col { background: var(--brand-purple-50); border-radius: var(--radius-xl); padding:30px; }
.about-expert-grid .about-col h2 { margin-top:0; }
.about-expert-grid .about-col p { margin:0; color: var(--text-muted); line-height:1.6; }
.expert-card-single { background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding:28px; box-shadow: var(--shadow-card); text-align:center; display:flex; flex-direction:column; align-items:center; }
.expert-card-single .ecs-portrait { width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:center top; margin-bottom: var(--space-3); }
.expert-card-single .ecs-name { font-family: var(--font-serif); font-size:1.2rem; color: var(--ink); }
.expert-card-single .ecs-role { font-size: var(--fs-sm); color: var(--text-muted); margin:.2rem 0 var(--space-3); }
.expert-card-single .expert-tag { margin-bottom: var(--space-4); }
.expert-card-single .ecs-cta { margin-top:auto; }

/* --- Formation 100 % terminée = VERT (token --success) --- */
.tpc.is-complete .tpc-step.is-done .tpc-dot { background: var(--success); border-color: var(--success); }
.tpc.is-complete .tpc-step.is-done .tpc-label { color: var(--success); }
.tpc.is-complete .tpc-step.is-done .tpc-line { background: var(--success); }
.tpc.is-complete .tpc-action .tpc-pct { color: var(--success); }
.tpc.is-complete .tpc-action .tpc-cta { background: var(--success); border-color: var(--success); }
.tpc.is-complete .tpc-action .tpc-cta:hover { background: #128a59; }
.tpc.is-complete .tpc-action .tpc-cert { color: var(--success); }
.tpc.is-complete { border-color: var(--success-border); }

/* --- Engagements : structure homogène (zone visuelle hauteur fixe + titre + texte) --- */
.trust-item { text-align:center; display:flex; flex-direction:column; align-items:center; }
.trust-item .ti-visual { height:64px; display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-3); }
.trust-item .ti-visual .ti-ico { width:52px; height:52px; border-radius:50%; background: var(--brand-purple-50); color: var(--brand-purple); display:grid; place-items:center; }
.trust-item .ti-visual .ti-ico svg { width:24px; height:24px; }
.trust-item .ti-visual .ti-logo { max-height:56px; max-width:110px; width:auto; object-fit:contain; }
.trust-item h4 { font-size:.95rem; margin:0 0 .3rem; min-height:2.4em; display:flex; align-items:center; }
.trust-item p { font-size: var(--fs-sm); color: var(--text-muted); margin:0; }

/* --- Catalogue : select catégories seul, padding droit sur la flèche --- */
.catalog-tools { display:block; margin-bottom: var(--space-6); }
.catalog-tools .cat-select { width:100%; border:1px solid var(--border); border-radius: var(--radius-pill); padding:.85rem 2.8rem .85rem 1.3rem; font:inherit; background:#fff; color: var(--ink-soft); cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C2CFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1.3rem center; }
.catalog-tools .cat-select:focus { outline:2px solid var(--brand-purple-300); border-color: var(--brand-purple); }

/* --- Hero catalogue : hauteur réduite (moins de padding vertical) --- */
.content-hero.content-hero-compact { padding: var(--space-5) var(--space-8); }
.content-hero.content-hero-compact h1 { margin-top:0; margin-bottom:.4rem; }
.content-hero.content-hero-compact .ch-desc { margin-bottom:0; }
@media (max-width: 900px){ .content-hero.content-hero-compact { padding: var(--space-5); } }

/* --- Hero compact serré (Mes parcours) : padding 14px 64px --- */
.content-hero.content-hero-tight { padding: 14px 64px; }
.content-hero.content-hero-tight h1 { margin-top:0; margin-bottom:.4rem; }
.content-hero.content-hero-tight .ch-desc { margin-bottom:0; }
@media (max-width: 900px){ .content-hero.content-hero-tight { padding: 20px 24px; } }


/* =====================================================================
   FICHE PRATIQUE (Agir) — calqué sur le template design maître
   ===================================================================== */
.fp-sec { margin-bottom: var(--space-8); }
/* En-tête de section : trait violet + picto rond + eyebrow */
.fp-sec-head { display:flex; align-items:center; gap:.7rem; margin-bottom: var(--space-3); position:relative; padding-top:.8rem; }
.fp-sec-head::before { content:""; position:absolute; top:0; left:0; width:44px; height:4px; border-radius:2px; background: var(--brand-purple); }
.fp-sec-ico { width:44px; height:44px; border-radius: var(--radius); display:grid; place-items:center; flex:none; background: var(--brand-purple-100); color: var(--brand-purple); }
.fp-sec-ico.accent-agir { background: var(--step-agir-bg); color:#d99a17; }
.fp-sec-ico.accent-retenir { background: var(--step-retenir-bg); color: var(--step-retenir); }
.fp-sec-ico svg { width:22px; height:22px; }
.fp-eyebrow { font-size: var(--fs-sm); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--brand-purple); }
.fp-eyebrow-amber { color:#d99a17; }
.fp-eyebrow-teal { color: var(--step-retenir); }
.fp-title { font-family: var(--font-serif); font-weight:400; color: var(--ink); font-size:1.55rem; line-height:1.15; margin:0 0 var(--space-3); }
.fp-lead { color: var(--text); line-height:1.7; margin:0; max-width:70ch; }

/* Équilibre / déséquilibre : 2 grandes cartes */
.fp-balance { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 820px){ .fp-balance { grid-template-columns: 1fr; } }
.fp-bcard { border-radius: var(--radius-2xl); padding: var(--space-6); position:relative; overflow:hidden; }
.fp-bcard h3 { font-family: var(--font-serif); font-weight:400; font-size:1.25rem; line-height:1.2; margin:0 0 var(--space-3); color: var(--ink); }
.fp-bcard p { margin:0 0 var(--space-3); line-height:1.6; color: var(--ink-soft); font-size:.97rem; }
.fp-bcard p:last-child { margin-bottom:0; }
.fp-bicon { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin-bottom: var(--space-3); }
.fp-bicon svg { width:24px; height:24px; }
.fp-bgood { background: var(--step-retenir-bg); }
.fp-bgood .fp-bicon { background: var(--step-retenir); color:#fff; }
.fp-bwarn { background: #fdece7; }
.fp-bwarn .fp-bicon { background: var(--step-ecouter); color:#fff; }

/* Cartes numérotées (questions + pourquoi) en 2×2 */
.fp-cards { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px){ .fp-cards { grid-template-columns: 1fr; } }
.fp-card { display:flex; gap: var(--space-4); align-items:center; background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.fp-card p { margin:0; line-height:1.45; color: var(--ink); }
.fp-num { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:800; font-size:1rem; }
.fp-num-q { background: var(--brand-purple-50); color: var(--brand-purple); }
.fp-num-why { background: var(--step-agir-bg); color:#d99a17; }
.fp-cards-q .fp-card p { font-weight:600; }

/* Repères pratiques (à retenir) : bloc lavande + puces cochées */
.fp-retenir { background: var(--brand-purple-50); border:1px solid #e6ddff; border-radius: var(--radius-2xl); padding: var(--space-6); }
.fp-retenir ul { list-style:none; margin:0; padding:0; }
.fp-retenir li { display:flex; gap:.6rem; align-items:flex-start; margin-bottom: var(--space-3); line-height:1.55; color: var(--ink-soft); }
.fp-retenir li:last-child { margin-bottom:0; }
.fp-retenir li svg { width:20px; height:20px; color: var(--brand-purple); flex:none; margin-top:.15rem; }

/* Impression propre */
@media print {
  .reading-toc, .hero-actions, .parcours-nav, .site-header, .site-footer, .breadcrumb { display:none !important; }
  .content-hero { background:#fff !important; padding:0 0 1rem !important; box-shadow:none !important; }
  .fp-sec, .fp-bcard, .fp-card, .fp-retenir { break-inside: avoid; page-break-inside: avoid; }
  .fp-card, .fp-bcard { box-shadow:none !important; }
}