/* ==========================================================================
   ORBITECH AI ACADEMY — Design System
   Plateforme académique · ton institutionnel · refonte 2026
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap");

:root {
    /* ----- Palette éditoriale : encre & papier ---------------------------- */
    --ink:           #0A0E1A;   /* presque noir — titres, accents forts */
    --ink-soft:      #1E2230;   /* corps de texte principal */
    --ink-muted:     #525866;   /* texte secondaire, légendes */
    --ink-faint:     #8B8F9A;   /* texte tertiaire, désactivé */

    --paper:         #FAFAF7;   /* fond chaud type Le Monde / NYT */
    --paper-soft:    #F2F1EB;   /* surfaces, cards */
    --paper-card:    #FFFFFF;   /* cards en élévation */
    --rule:          #D8D4C7;   /* filets, séparateurs */
    --rule-soft:     #E8E5DA;   /* filets discrets */

    /* ----- Accent unique : bleu encre académique -------------------------- */
    --accent:        #15264D;   /* navy profond — fonds sombres, CTA dark, en-têtes de table */
    --accent-strong: #0F1B33;   /* hover, états pressés */
    --accent-soft:   #E5EAF2;   /* fonds informationnels */
    --accent-link:   #1F3A66;   /* liens texte légèrement plus clair */

    /* ----- Bleu VISIBLE (refonte juin 2026) — --accent #15264D est un navy quasi-invisible.
       Ces tokens sont LE bleu qui se lit : eyebrows, chiffres KPI, numéros, filets, accents. -- */
    --accent-bright:      #2563eb;  /* bleu royal lisible — eyebrows, KPI, numéros, filets, em des titres */
    --accent-bright-deep: #1d4ed8;  /* fills (CTA bleu, bulles IA) — contraste texte blanc sûr */
    --accent-wash:        #eef3fb;  /* fond de section teinté bleu (1 par page) */
    --accent-bubble:      #e7eefc;  /* bulles claires / surfaces bleutées */
    /* Ambre chaud — touches ÉMOTIONNELLES parcimonieuses (1-2/page : histoire, réussite). Le bleu rassure, l'ambre humanise. */
    --accent-warm:        #C8860D;
    --accent-warm-soft:   #fbf2de;

    /* ----- Or éditorial (parcimonie maximale) ----------------------------- */
    --gilt:          #B59410;   /* uniquement KPI hero ou citations */
    --gilt-soft:     #F5EFD7;

    /* ----- Sémantique sobre ---------------------------------------------- */
    --signal-ok:     #1D6F42;
    --signal-ok-bg:  #E6F2EC;
    --signal-warn:   #92400E;
    --signal-warn-bg:#FBEFD9;
    --signal-err:    #7F1D1D;
    --signal-err-bg: #FBE5E5;

    /* ----- Aliases legacy (compatibilité ascendante) ---------------------- */
    --primary:       var(--accent);
    --primary-light: var(--accent-link);
    --primary-dark:  var(--accent-strong);
    --secondary:     var(--ink-soft);
    --accent-color:  var(--gilt);
    --success:       var(--signal-ok);
    --dark:          var(--ink);
    --dark-light:    var(--ink-soft);
    --gray:          var(--ink-muted);
    --gray-light:    var(--rule);
    --gray-50:       var(--paper);
    --gray-100:      var(--paper-soft);
    --gray-200:      var(--rule-soft);
    --gray-300:      var(--rule);
    --gray-400:      var(--ink-faint);
    --gray-500:      var(--ink-muted);
    --gray-600:      #475569;
    --gray-700:      #334155;
    --gray-800:      var(--ink-soft);
    --gray-900:      var(--ink);
    --white:         var(--paper-card);
    --bg-light:      var(--paper);

    /* ----- Gradients (sobres, utilisés avec parcimonie) ------------------- */
    --gradient-main:    linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    --gradient-paper:   linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
    --gradient-ink:     linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
    --gradient-accent:  var(--gradient-main);
    --gradient-admin:   var(--gradient-ink);
    --gradient-purple:  var(--gradient-main);
    --gradient-sunset:  var(--gradient-main);
    --gradient-space:   var(--gradient-ink);
    --gradient-fire:    var(--gradient-main);
    --gradient-ocean:   var(--gradient-main);
    --gradient-success: linear-gradient(135deg, var(--signal-ok) 0%, #2A8C56 100%);
    --gradient-green:   var(--gradient-success);
    --gradient-yellow:  linear-gradient(135deg, var(--gilt) 0%, #C9A961 100%);
    --gradient-orange:  var(--gradient-main);

    /* ----- Espace ---------------------------------------------------------- */
    --space-xs:      8px;
    --space-sm:      16px;
    --space-md:      24px;
    --space-lg:      40px;
    --space-xl:      64px;
    --space-2xl:     96px;
    --space-3xl:     128px;

    /* ----- Ombres minimales (refus du shadow-glow) ------------------------ */
    --shadow-sm:     0 1px 2px rgba(10, 14, 26, 0.04), 0 1px 0 rgba(10, 14, 26, 0.03);
    --shadow-md:     0 2px 4px rgba(10, 14, 26, 0.05), 0 4px 12px rgba(10, 14, 26, 0.05);
    --shadow-lg:     0 8px 24px rgba(10, 14, 26, 0.08), 0 2px 4px rgba(10, 14, 26, 0.04);
    --shadow-xl:     0 16px 40px rgba(10, 14, 26, 0.10);
    --shadow-glow:   0 0 0 3px rgba(29, 53, 87, 0.12);

    /* ----- Rayons sobres -------------------------------------------------- */
    --radius-xs:     2px;
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --radius-xl:     16px;     /* exceptionnel */
    --radius-full:   9999px;   /* uniquement avatars / pills très spécifiques */

    /* ----- Mouvement (Apple Spring sobre) -------------------------------- */
    --ease-out:      cubic-bezier(0.32, 0.72, 0, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:   120ms var(--ease-out);
    --transition:        220ms var(--ease-out);
    --transition-slow:   400ms var(--ease-out);

    /* ----- Typographie ---------------------------------------------------- */
    --font-display:  'Fraunces', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Échelle typographique (modular scale 1.25 - quarte mineure) */
    --text-xs:       12px;
    --text-sm:       14px;
    --text-base:     16px;
    --text-md:       18px;
    --text-lg:       20px;
    --text-xl:       24px;
    --text-2xl:      30px;
    --text-3xl:      38px;
    --text-4xl:      48px;
    --text-5xl:      60px;
    --text-6xl:      76px;

    /* Line heights */
    --leading-tight:   1.15;
    --leading-snug:    1.35;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.025em;
    --tracking-caps:   0.08em;

    /* ----- Container ------------------------------------------------------ */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:   1024px;
    --container-xl:   1200px;
    --container-2xl:  1320px;
    --container-prose: 64ch;   /* lecture confortable */
}

/* ============================================================================
   Reset moderne
   ========================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--ink-soft);
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    text-rendering: optimizeLegibility;
}

/* ============================================================================
   Typographie de base (l'ADN éditorial)
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.heading {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 500;
    font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

h1, .h1 {
    font-size: clamp(var(--text-4xl), 5vw + 1rem, var(--text-6xl));
    font-weight: 500;
    font-variation-settings: 'opsz' 144, 'SOFT' 30;
    letter-spacing: -0.025em;
}

h2, .h2 {
    font-size: clamp(var(--text-2xl), 3vw + 0.5rem, var(--text-4xl));
    font-weight: 500;
}

h3, .h3 {
    font-size: clamp(var(--text-xl), 2vw + 0.5rem, var(--text-2xl));
    font-weight: 500;
}

h4, .h4 {
    font-size: var(--text-lg);
    font-weight: 600;
}

h5, .h5 {
    font-size: var(--text-md);
    font-weight: 600;
}

h6, .h6 {
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-body);
}

p {
    line-height: var(--leading-normal);
    color: var(--ink-soft);
}

p.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--ink-soft);
    max-width: var(--container-prose);
}

a {
    color: var(--accent-link);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
    color: var(--accent);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

strong, b {
    font-weight: 600;
    color: var(--ink);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

mark {
    background: var(--gilt-soft);
    color: var(--ink);
    padding: 0 0.2em;
    border-radius: var(--radius-xs);
}

code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

code {
    background: var(--paper-soft);
    color: var(--accent-strong);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-soft);
}

kbd {
    background: var(--ink);
    color: var(--paper);
    padding: 0.2em 0.5em;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 -1px 0 rgba(0,0,0,0.3) inset;
}

blockquote {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--ink);
    border-left: 2px solid var(--ink);
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    margin: var(--space-lg) 0;
    font-weight: 400;
    font-style: italic;
}

blockquote cite {
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--ink-muted);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: var(--space-xl) 0;
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

/* ============================================================================
   Composants éditoriaux distinctifs
   ========================================================================= */

/* Eyebrow — étiquette discrète au-dessus d'un H1/H2 */
.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--accent-bright);
    margin-bottom: var(--space-sm);
}

/* Bouton thème clair/sombre dans la navbar (lune/soleil) */
.nav-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1;
    padding: 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, background .2s ease;
}
.nav-theme-toggle:hover {
    color: var(--accent-bright);
    background: var(--accent-bubble);
}
[data-theme="dark"] .nav-theme-toggle {
    color: var(--paper);
}

/* Byline — métadonnée auteur/date sous H1 (signal éditorial) */
.byline {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-wide);
    margin: var(--space-sm) 0 var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--rule);
}

/* Pull-quote large pour citations de poids */
.pull-quote {
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
    line-height: var(--leading-snug);
    color: var(--ink);
    border-left: 3px solid var(--accent);
    padding: var(--space-md) var(--space-xl);
    margin: var(--space-2xl) 0;
    font-weight: 400;
    font-style: italic;
}

/* KPI sobres avec chiffres tabulaires */
.kpi {
    font-family: var(--font-body);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.kpi-value {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
    font-variation-settings: 'opsz' 144;
}

.kpi-label {
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-wide);
}

.kpi-source {
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--ink-faint);
    font-style: italic;
}

/* Filet de section éditorial */
.section-rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
}

.section-rule-double {
    border: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    height: 4px;
    margin: var(--space-xl) 0;
}

/* ============================================================================
   Animations — sobres, courtes, utiles
   ========================================================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pulse réduit (légèrement utilisable sur badge urgent) */
@keyframes pulseSubtle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Utilitaires d'accessibilité
   ========================================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-sm) var(--space-md);
    z-index: 100001;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Focus visible global */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================================================
   Hero hauteur typographique mobile — garde-fou
   ========================================================================= */

@media (max-width: 480px) {
    /* Force des tailles raisonnables pour tous les H1 hero, peu importe les
       overrides de page. Permet un rythme propre sur 375-414px. */
    .page-hero h1,
    .hero h1,
    .hero-presse h1,
    .a11y-hero h1,
    .hero-social h1,
    .quiz-hero h1,
    .rd-hero-container h1,
    .alterra-hero h1,
    .parents-hero h1,
    .dossier-header h1,
    main > section:first-of-type h1 {
        font-size: clamp(28px, 8.5vw, 40px) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }

    .page-hero .lead,
    .hero .lead {
        font-size: var(--text-base) !important;
        line-height: 1.5 !important;
    }
}