/* =====================================================================
   ALCHIMIEAPP V2 — COMPOSANTS
   Primitives réutilisables. Chaque composant lit les tokens de v2-tokens.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   BOUTONS
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm);
    line-height: 1; cursor: pointer; white-space: nowrap;
    padding: .85rem 1.4rem; border-radius: var(--radius-pill);
    border: 1.5px solid transparent; transition: transform .12s ease, background .15s, box-shadow .15s, border-color .15s;
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; }

.btn-primary { background: var(--brand-purple); color: #fff; box-shadow: 0 6px 16px rgba(110,26,255,.28); }
.btn-primary:hover { background: var(--brand-purple-600); color: #fff; box-shadow: 0 8px 22px rgba(110,26,255,.34); }

.btn-outline { background: #fff; color: var(--brand-purple); border-color: #e2ddf3; }
.btn-outline:hover { border-color: var(--brand-purple); background: var(--brand-purple-50); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--bg-tint); }

.btn-white { background: #fff; color: var(--brand-purple); }
.btn-white:hover { background: #fff; box-shadow: var(--shadow); }

.btn-lg { padding: 1.05rem 1.8rem; font-size: 1rem; }
.btn-sm { padding: .6rem 1rem; font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Boutons teintés par étape (utilisés sur les CTA « suivant ») */
.btn-step-ecouter { background: var(--step-ecouter); color:#fff; box-shadow:0 6px 16px rgba(242,104,60,.3); }
.btn-step-ecouter:hover { filter: brightness(.96); color:#fff; }
.btn-step-agir { background: var(--step-agir); color:#fff; box-shadow:0 6px 16px rgba(245,165,36,.3); }
.btn-step-agir:hover { filter: brightness(.96); color:#fff; }

/* ---------------------------------------------------------------------
   BADGES & CHIPS
   --------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs);
    letter-spacing: .04em; padding: .4rem .8rem; border-radius: var(--radius-pill);
    background: var(--brand-purple-100); color: var(--brand-purple-700);
    text-transform: uppercase;
}
.badge-soft { text-transform: none; letter-spacing: 0; }
.badge-success { background: var(--success-bg); color: #12704a; text-transform:none; letter-spacing:0; }
.badge-warning { background: var(--warning-bg); color: #8a5a12; }
.badge-placeholder { background: #fff7e6; color: #8a5a12; border: 1px dashed #e0b25a; text-transform:none; letter-spacing:0; }

/* Méta-chips (durée, niveau, nb ressources) — cartes blanches à icône */
.chip {
    display: inline-flex; align-items: center; gap: .55rem;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: .7rem 1rem;
    font-size: var(--fs-sm); color: var(--text); box-shadow: var(--shadow-xs);
}
.chip .chip-ico { width: 20px; height: 20px; color: var(--brand-purple); flex: none; }
.chip strong { color: var(--ink); font-weight: 700; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip.success { background: var(--success-bg); border-color: var(--success-border); color:#12704a; }
.chip.success .chip-ico { color: var(--success); }

/* ---------------------------------------------------------------------
   CARTES
   --------------------------------------------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-6);
    box-shadow: var(--shadow-card);
}
.card-flat { box-shadow: none; }
.card-link { display: block; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.card-link:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow); border-color: #e0dbf2; }

/* ---------------------------------------------------------------------
   CARTE RESSOURCE (numérotée 01–05, accent par étape)
   --------------------------------------------------------------------- */
.resource-card {
    position: relative; display: flex; flex-direction: column;
    background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg);
    padding: var(--space-5); box-shadow: var(--shadow-card); height: 100%;
    border-top: 4px solid var(--_accent, var(--brand-purple));
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
}
.resource-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); text-decoration:none; }
.resource-card .rc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-4); }
.resource-card .rc-num {
    font-family: var(--font-sans); font-weight:800; font-size:.82rem; color:#fff;
    width: 32px; height: 32px; border-radius: 50%; display:grid; place-items:center;
    background: var(--_accent, var(--brand-purple));
}
.resource-card .rc-ico {
    width: 56px; height: 56px; border-radius: var(--radius); display:grid; place-items:center;
    background: var(--_accent-bg, var(--brand-purple-100)); color: var(--_accent, var(--brand-purple));
}
.resource-card .rc-ico svg { width: 30px; height: 30px; }
.resource-card h3 { color: var(--_accent, var(--brand-purple)); margin: 0 0 .45rem; font-size: 1.2rem; }
.resource-card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--space-5); flex:1; line-height:1.55; }
.resource-card .rc-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top: var(--space-3); border-top:1px solid var(--border-soft); }
.resource-card .rc-cta { font-weight:700; font-size:var(--fs-sm); color: var(--_accent, var(--brand-purple)); display:inline-flex; align-items:center; gap:.35rem; }
.resource-card .rc-meta { font-size: var(--fs-xs); color: var(--text-faint); white-space:nowrap; }

/* Modificateurs d'accent par étape (appliqués via une classe) */
.accent-comprendre { --_accent: var(--step-comprendre); --_accent-bg: var(--step-comprendre-bg); }
.accent-ecouter    { --_accent: var(--step-ecouter);    --_accent-bg: var(--step-ecouter-bg); }
.accent-retenir    { --_accent: var(--step-retenir);    --_accent-bg: var(--step-retenir-bg); }
.accent-agir       { --_accent: var(--step-agir);       --_accent-bg: var(--step-agir-bg); }
.accent-valider    { --_accent: var(--step-valider);    --_accent-bg: var(--step-valider-bg); }

/* ---------------------------------------------------------------------
   BADGE D'ÉTAPE (hero des pages ressource : « 01 · COMPRENDRE »)
   --------------------------------------------------------------------- */
.step-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    font-family: var(--font-sans); font-weight:700; font-size:var(--fs-xs);
    letter-spacing:.1em; text-transform:uppercase;
    padding:.5rem .9rem; border-radius: var(--radius-pill);
    background: var(--_accent-bg, var(--brand-purple-100)); color: var(--_accent, var(--brand-purple));
}
.step-badge svg { width: 1.1em; height: 1.1em; }

/* ---------------------------------------------------------------------
   ENCARTS ÉDITORIAUX TYPÉS (À retenir / En pratique / Bon à savoir / À garder en tête)
   --------------------------------------------------------------------- */
.callout {
    border-radius: var(--radius-lg); padding: var(--space-5);
    margin: var(--space-5) 0; border: 1px solid transparent;
}
.callout .callout-head {
    display:flex; align-items:center; gap:.5rem;
    font-family: var(--font-sans); font-weight:800; font-size:var(--fs-sm);
    margin-bottom:.5rem;
}
.callout .callout-head svg { width:1.2em; height:1.2em; }
.callout p:last-child { margin-bottom: 0; }

.callout-retenir   { background: var(--brand-purple-50); border-color:#e6ddff; }
.callout-retenir .callout-head { color: var(--brand-purple); }
.callout-pratique  { background: var(--warning-bg); border-color: var(--warning-border); }
.callout-pratique .callout-head { color: #b9791b; }
.callout-savoir    { background: var(--step-retenir-bg); border-color:#c4ece7; }
.callout-savoir .callout-head { color: #0f8a7f; }
.callout-tete      { background: var(--step-ecouter-bg); border-color:#ffd9c8; }
.callout-tete .callout-head { color: #d05a2c; }

/* ---------------------------------------------------------------------
   HERO DE PAGE RESSOURCE (bandeau tinté + illustration)
   --------------------------------------------------------------------- */
.page-hero {
    background: var(--_accent-bg, var(--brand-purple-50));
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    position: relative; overflow: hidden;
}
.page-hero .ph-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-6); align-items:center; }
.page-hero h1 { margin: var(--space-3) 0; }
.page-hero .ph-desc { color: var(--text-muted); font-size: var(--fs-lead); max-width: 46ch; margin-bottom: var(--space-4); }
.page-hero .ph-illus { justify-self: center; }
.page-hero .ph-illus svg, .page-hero .ph-illus img { width: 100%; max-width: 420px; }

/* ---------------------------------------------------------------------
   FIL D'ARIANE
   --------------------------------------------------------------------- */
.breadcrumb { font-size: var(--fs-sm); color: var(--text-faint); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand-purple); }
.breadcrumb .sep { margin: 0 .4rem; color: var(--text-faint); }

/* ---------------------------------------------------------------------
   NAVIGATION PRÉCÉDENT / SUIVANT (bas de page ressource)
   --------------------------------------------------------------------- */
.step-nav { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); margin-top: var(--space-8); }
.step-nav .prev { color: var(--text-muted); font-size: var(--fs-sm); }
.step-nav .prev a { color: var(--ink-soft); font-weight:600; }
.step-nav .prev small { display:block; color: var(--text-faint); font-weight:400; }

/* ---------------------------------------------------------------------
   SOMMAIRE STICKY (pages Comprendre / Agir)
   --------------------------------------------------------------------- */
.toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); font-size: var(--fs-sm); }
.toc h4 { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); margin:0 0 var(--space-3); }
.toc ul { list-style:none; margin:0; padding:0; }
.toc li { margin-bottom: .15rem; }
.toc a { display:block; padding:.5rem .8rem; border-radius: var(--radius-sm); color: var(--text-muted); border-left: 2px solid transparent; line-height:1.35; }
.toc a:hover, .toc a.active { background: var(--brand-purple-50); color: var(--brand-purple-700); border-left-color: var(--brand-purple); text-decoration:none; }
.toc-toggle { display:none; }

/* ---------------------------------------------------------------------
   STEPPER DE VALIDATION (4 étapes séquentielles)
   --------------------------------------------------------------------- */
.vsteps { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); position: relative; }
.vstep {
    position: relative; background:#fff; border:1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-5); text-align:center;
    box-shadow: var(--shadow-xs);
}
.vstep .vs-node {
    width: 54px; height: 54px; border-radius: 50%; display:grid; place-items:center;
    margin: 0 auto var(--space-3); font-family: var(--font-serif); font-weight:600; font-size:1.2rem;
}
.vstep .vs-ico { width: 26px; height: 26px; }
.vstep h3 { font-size: 1.05rem; margin:0 0 .35rem; }
.vstep p { font-size: var(--fs-sm); color: var(--text-muted); margin:0 0 var(--space-4); }
.vstep .vs-state { font-size: var(--fs-sm); font-weight:700; padding:.45rem .8rem; border-radius: var(--radius-pill); display:inline-block; }
.vstep .vs-sub { display:block; margin-top:.5rem; font-size:var(--fs-xs); color: var(--text-faint); font-weight:400; }

/* états */
.vstep.is-done { border-color: #c9e9d8; }
.vstep.is-done .vs-node { background: var(--success); color:#fff; }
.vstep.is-done .vs-state { background: var(--success-bg); color:#12704a; }
.vstep.is-available { border-color: var(--brand-purple-300); box-shadow: 0 8px 24px rgba(110,26,255,.12); }
.vstep.is-available .vs-node { background: var(--brand-purple); color:#fff; }
.vstep.is-available .vs-state { background: var(--brand-purple); color:#fff; }
.vstep.is-locked { opacity: .82; }
.vstep.is-locked .vs-node { background: #eef0f6; color: var(--text-faint); }
.vstep.is-locked h3 { color: var(--text-muted); }
.vstep.is-locked .vs-state { background: #f1f2f7; color: var(--text-faint); }
/* connecteurs */
.vstep::after {
    content:""; position:absolute; top: calc(var(--space-5) + 27px); right: calc(-1 * var(--space-4) / 2 - 1px);
    width: var(--space-4); height: 2px; background: var(--border);
    transform: translateX(50%);
}
.vstep:last-child::after { display:none; }
.vstep.is-done::after { background: var(--brand-purple-300); }

/* ---------------------------------------------------------------------
   CARROUSEL (léger, accessible, scroll-snap)
   --------------------------------------------------------------------- */
.carousel { position: relative; }
.carousel-track {
    display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: var(--space-2) var(--space-1) var(--space-5);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.carousel-nav { display:flex; gap:.5rem; }
.carousel-btn {
    width: 44px; height: 44px; border-radius: 50%; border:1px solid var(--border);
    background:#fff; color: var(--ink-soft); cursor:pointer; display:grid; place-items:center;
    box-shadow: var(--shadow-xs); transition: all .15s;
}
.carousel-btn:hover { border-color: var(--brand-purple); color: var(--brand-purple); background: var(--brand-purple-50); }
.carousel-btn:disabled { opacity:.4; cursor:not-allowed; }
.carousel-dots { display:flex; gap:.4rem; justify-content:center; margin-top: var(--space-4); }
.carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border:none; background: var(--border); cursor:pointer; padding:0; transition: all .2s; }
.carousel-dots button[aria-current="true"] { background: var(--brand-purple); width: 22px; border-radius: var(--radius-pill); }

/* ---------------------------------------------------------------------
   CARTE EXPERT
   --------------------------------------------------------------------- */
.expert-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); display:flex; gap: var(--space-4); align-items:flex-start; }
.expert-card .ec-portrait { width: 76px; height: 76px; border-radius: var(--radius); object-fit: cover; flex:none; background: var(--brand-purple-50); }
.expert-card h3 { font-size: 1.05rem; margin:0 0 .15rem; }
.expert-card .ec-role { font-size: var(--fs-sm); color: var(--text-muted); margin:0 0 .6rem; }
.expert-tag { display:inline-flex; align-items:center; gap:.35rem; font-size: var(--fs-xs); font-weight:700; padding:.28rem .6rem; border-radius: var(--radius-pill); }
.expert-tag.t1 { background: var(--step-agir-bg); color:#b9791b; }
.expert-tag.t2 { background: var(--brand-purple-100); color: var(--brand-purple-700); }
.expert-tag.t3 { background: var(--step-retenir-bg); color:#0f8a7f; }
.expert-tag.t4 { background: var(--step-agir-bg); color:#b9791b; }

/* ---------------------------------------------------------------------
   ALERTES / FLASH
   --------------------------------------------------------------------- */
.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: var(--space-5); font-size: var(--fs-sm); border:1px solid transparent; }
.alert-success { background: var(--success-bg); color:#12704a; border-color: var(--success-border); }
.alert-error   { background: var(--danger-bg); color:#a3283c; border-color: var(--danger-border); }
.alert-info    { background: var(--info-bg); color:#274fb0; border-color:#c6d5fb; }
.alert-warn    { background: var(--warning-bg); color:#8a5a12; border-color: var(--warning-border); }

/* Bandeau placeholder (contenu de démonstration) */
.placeholder-banner {
    background: repeating-linear-gradient(45deg, #fff7e6, #fff7e6 14px, #fff2d6 14px, #fff2d6 28px);
    border: 1px dashed #e0b25a; border-radius: var(--radius);
    padding: 1rem 1.25rem; font-size: var(--fs-sm); color:#8a5a12; margin-bottom: var(--space-5);
}
.placeholder-banner strong { color:#6b4500; }

/* ---------------------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------------------- */
.field { margin-bottom: var(--space-5); }
.field label { display:block; font-weight:700; font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom:.4rem; }
.input, input[type=text], input[type=email], input[type=password], input[type=file], select, textarea {
    width:100%; font: inherit; font-size: var(--fs-body); color: var(--text);
    padding: .8rem 1rem; border:1.5px solid var(--border); border-radius: var(--radius);
    background:#fff; transition: border-color .15s, box-shadow .15s;
}
.input:focus, input:focus, select:focus, textarea:focus {
    outline:none; border-color: var(--brand-purple); box-shadow: 0 0 0 3px var(--brand-purple-100);
}
textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top:.35rem; }

/* ---------------------------------------------------------------------
   TABLES (admin)
   --------------------------------------------------------------------- */
.data-table { width:100%; border-collapse:collapse; background:#fff; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
.data-table th, .data-table td { padding: .85rem 1rem; text-align:left; border-bottom:1px solid var(--border); font-size: var(--fs-sm); }
.data-table th { background: var(--bg-tint); font-weight:700; color: var(--ink-soft); font-family: var(--font-sans); }
.data-table tr:last-child td { border-bottom:none; }
.table-wrap { overflow-x:auto; }

.divider { height:1px; background: var(--border); border:none; margin: var(--space-6) 0; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); flex-wrap:wrap; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }