/* =====================================================================
   ALCHIMIEAPP — DESIGN SYSTEM V2
   Socle unique : tokens, typographie, primitives, composants.
   Source de vérité visuelle = maquettes V2.
   Aucune couleur/valeur métier codée en dur dans les templates :
   tout passe par ces variables et ces classes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. POLICES (auto-hébergées, sous-ensemble latin + français)
   - Titres éditoriaux : DM Serif Display (serif à fort contraste, élégante).
   - Interface / texte  : DM Sans (sans-serif géométrique variable, très lisible).
   Le contraste serif / sans-serif est volontaire (éditorial vs interface).
   --------------------------------------------------------------------- */
@font-face {
    font-family: "DM Serif Display";
    src: url("../fonts/DMSerifDisplay.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DM Serif Display";
    src: url("../fonts/DMSerifDisplay-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans.woff2") format("woff2-variations");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-Italic.woff2") format("woff2-variations");
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------------
   2. TOKENS
   --------------------------------------------------------------------- */
:root {
    /* — Marque — */
    --brand-purple:       #6C2CFF;   /* violet Alchimie (maquettes V2) */
    --brand-purple-600:   #5a1fe6;
    --brand-purple-700:   #4a17c0;
    --brand-purple-300:   #a97dff;
    --brand-purple-100:   #ece5ff;   /* fond violet clair */
    --brand-purple-50:    #f6f2ff;   /* fond violet très clair (lavande) */

    /* — Encre / titres (navy chaud des maquettes, pas noir pur) — */
    --ink:                #1b2350;   /* titres serif */
    --ink-soft:           #2f3a63;
    --text:               #3b4361;   /* texte courant */
    --text-muted:         #6b7392;
    --text-faint:         #9aa1bd;

    /* — Accents des 5 étapes pédagogiques — */
    --step-comprendre:    #7c3aed;   /* violet   (01) */
    --step-comprendre-bg: #f3edff;
    --step-ecouter:       #f2683c;   /* orange   (02) */
    --step-ecouter-bg:    #fff0e9;
    --step-retenir:       #17a398;   /* teal     (03) */
    --step-retenir-bg:    #e5f6f4;
    --step-agir:          #f5a524;   /* ambre    (04) */
    --step-agir-bg:       #fff5e2;
    --step-valider:       #6E1AFF;   /* violet   (05) */
    --step-valider-bg:    #efe9ff;

    /* — Neutres — */
    --white:              #ffffff;
    --surface:            #ffffff;   /* cartes */
    --bg:                 #ffffff;   /* fond général clair */
    --bg-tint:            #f7f5fb;   /* sections alternées (léger violet/gris) */
    --bg-tint-2:          #f4f6fb;   /* variante froide */
    --border:             #ebe9f2;   /* bordures cartes */
    --border-soft:        #f1eff7;

    /* — Feedback — */
    --success:            #17a36b;
    --success-bg:         #e6f7ef;
    --success-border:     #b9e6d1;
    --warning:            #d98a1f;
    --warning-bg:         #fff6e5;
    --warning-border:     #ffe1a8;
    --danger:             #d6455b;
    --danger-bg:          #fdecef;
    --danger-border:      #f5c2cb;
    --info:               #3f6fed;
    --info-bg:            #ecf1fe;

    /* — Institutionnel (footer bleu nuit des maquettes) — */
    --navy:               #141a3a;
    --navy-soft:          #232a52;
    --navy-text:          #b7bdd8;

    /* — Typographie — */
    --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Échelle typographique (fluide via clamp) — DM Serif Display porte les titres.
       H1 desktop ≈ 56-68px, line-height serré. */
    --fs-display:  clamp(2.8rem, 1.9rem + 3.4vw, 4.25rem);  /* héro landing ~68px */
    --fs-h1:       clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);  /* titres de page serif ~56px */
    --fs-h2:       clamp(1.75rem, 1.35rem + 1.4vw, 2.6rem); /* ~40px */
    --fs-h3:       clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    --fs-lead:     clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --fs-body:     1rem;
    --fs-sm:       0.9rem;
    --fs-xs:       0.8rem;

    /* — Espacements (rythme généreux : la DA « respire ») — */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5.5rem;    /* padding vertical des grandes sections (desktop) */
    --space-10: 7rem;

    /* — Rayons — */
    --radius-sm:  10px;
    --radius:     16px;
    --radius-lg:  22px;
    --radius-xl:  28px;
    --radius-2xl: 36px;
    --radius-pill: 999px;

    /* — Ombres (douces, diffuses) — */
    --shadow-xs: 0 1px 2px rgba(27, 35, 80, .05);
    --shadow-sm: 0 2px 8px rgba(27, 35, 80, .06);
    --shadow:    0 8px 26px rgba(27, 35, 80, .08);
    --shadow-lg: 0 20px 50px rgba(110, 26, 255, .14);
    --shadow-card: 0 4px 18px rgba(27, 35, 80, .07);

    /* — Layout — */
    --container:        1320px;
    --container-narrow: 960px;
    --container-text:   760px;
    --header-h:         80px;
}

/* ---------------------------------------------------------------------
   3. RESET & BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    color: var(--ink);
    font-weight: 400;               /* DM Serif Display : une seule graisse */
    line-height: 1.06;
    margin: 0 0 var(--space-4);
    letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-h1); line-height: 1.03; }
h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-size: var(--fs-h3); font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); }
strong { font-weight: 700; color: var(--ink-soft); }
::selection { background: var(--brand-purple-100); color: var(--ink); }

/* Focus visible accessible */
:focus-visible {
    outline: 3px solid var(--brand-purple-300);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Icônes SVG : taille par défaut (currentColor). Empêche tout débordement. */
.ico { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; fill: none; flex: none; }
svg.ico use { color: inherit; }

/* ---------------------------------------------------------------------
   4. UTILITAIRES DE MISE EN PAGE
   --------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--container-narrow); }
.container-text { max-width: var(--container-text); }

/* Sections : grand rythme vertical (respiration = signature de la DA) */
.section { padding: var(--space-9) 0; }
.section-sm { padding: var(--space-8) 0; }
.section-tint { background: var(--bg-tint); }
.section-tint-2 { background: var(--bg-tint-2); }

.stack > * + * { margin-top: var(--space-4); }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.serif { font-family: var(--font-serif); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* En-tête de section centré (eyebrow + titre) */
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); }
.section-head.left { text-align: left; margin-left: 0; }
.eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-purple);
    margin-bottom: var(--space-3);
}
.section-head h2 { margin: 0; }
.section-head .lead { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-lead); }

/* Petit trait décoratif sous certains titres (visible sur les maquettes) */
.title-rule::after {
    content: "";
    display: block;
    width: 54px; height: 4px;
    border-radius: var(--radius-pill);
    background: var(--brand-purple);
    margin-top: var(--space-3);
}
.title-rule.center::after { margin-left: auto; margin-right: auto; }