/* ==========================================================================
   design-system.css — Variables partagées ADMIN + ESPACE ÉLÈVE
   --------------------------------------------------------------------------
   Phase 2 du Road to V2.

   POURQUOI CE FICHIER EXISTE
   Le dark mode est prévu en Phase 10, sur l'admin ET sur /app. Le rétro-adapter
   à ce moment-là voudrait dire repasser sur chaque couleur codée en dur dans
   des dizaines de fichiers. Définir les variables maintenant — même si un seul
   thème est utilisé aujourd'hui — rend la Phase 10 quasi gratuite.

   RÈGLE : à partir de maintenant, aucune couleur en dur dans le nouveau code.
   Toujours var(--quelque-chose). Les pages V1 existantes seront converties
   progressivement, sans urgence.

   THÈMES
     :root                       thème clair (défaut)
     [data-theme="dark"]         thème sombre, forcé par l'attribut
     @media prefers-color-scheme respecte le réglage système tant que l'élève
                                 n'a rien choisi explicitement
   ========================================================================== */

:root {
    /* --- Marque ---------------------------------------------------------- */
    --brand:            #6c5ce7;
    --brand-hover:      #5849c7;
    --brand-contrast:   #ffffff;
    --accent:           #00d2d3;
    --gold:             #ffd700;   /* l'éclair impulsion.tv */

    /* --- Surfaces -------------------------------------------------------- */
    --bg:               #f5f6fa;
    --bg-elevated:      #ffffff;
    --bg-sunken:        #eceef5;
    --surface-hover:    #f0f1f8;

    /* --- Texte ----------------------------------------------------------- */
    --text:             #1a1a2e;
    --text-muted:       #6b6b85;
    --text-subtle:      #9a9ab0;
    --text-on-brand:    #ffffff;

    /* --- Bordures -------------------------------------------------------- */
    --border:           #e1e3ee;
    --border-strong:    #c9ccdd;

    /* --- États ----------------------------------------------------------- */
    --success:          #16a34a;
    --success-bg:       #dcfce7;
    --warning:          #d97706;
    --warning-bg:       #fef3c7;
    --danger:           #dc2626;
    --danger-bg:        #fee2e2;
    --info:             #0284c7;
    --info-bg:          #e0f2fe;

    /* --- Rayons ---------------------------------------------------------- */
    --radius-sm:        6px;
    --radius:           12px;
    --radius-lg:        16px;
    --radius-full:      999px;

    /* --- Espacements (échelle de 4) -------------------------------------- */
    --space-1:          4px;
    --space-2:          8px;
    --space-3:          12px;
    --space-4:          16px;
    --space-5:          24px;
    --space-6:          32px;
    --space-7:          48px;
    --space-8:          64px;

    /* --- Ombres ---------------------------------------------------------- */
    --shadow-sm:        0 1px 2px rgba(16, 18, 40, .06);
    --shadow:           0 4px 16px rgba(16, 18, 40, .08);
    --shadow-lg:        0 12px 40px rgba(16, 18, 40, .14);

    /* --- Typographie ----------------------------------------------------- */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --text-xs:          12px;
    --text-sm:          14px;
    --text-base:        16px;
    --text-lg:          18px;
    --text-xl:          22px;
    --text-2xl:         28px;
    --text-3xl:         36px;

    /* --- Mouvement ------------------------------------------------------- */
    --transition:       160ms cubic-bezier(.4, 0, .2, 1);

    /* --- Divers ---------------------------------------------------------- */
    --focus-ring:       0 0 0 3px rgba(108, 92, 231, .35);
    --max-width:        1200px;
    --header-height:    64px;
}

/* --------------------------------------------------------------------------
   Thème sombre
   Deux déclencheurs :
     1. le réglage système, tant que l'élève n'a rien choisi ;
     2. data-theme="dark" posé sur <html>, qui a toujours le dernier mot.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:             #12131f;
        --bg-elevated:    #1b1d2e;
        --bg-sunken:      #0d0e18;
        --surface-hover:  #24263a;

        --text:           #eceef8;
        --text-muted:     #9fa3bd;
        --text-subtle:    #6e7290;

        --border:         #2a2d44;
        --border-strong:  #3d4160;

        --brand:          #8b7cf0;
        --brand-hover:    #9d90f5;

        --success-bg:     #0f2f1d;
        --warning-bg:     #3a2a08;
        --danger-bg:      #3a1414;
        --info-bg:        #0a2634;

        --shadow-sm:      0 1px 2px rgba(0, 0, 0, .4);
        --shadow:         0 4px 16px rgba(0, 0, 0, .45);
        --shadow-lg:      0 12px 40px rgba(0, 0, 0, .6);

        --focus-ring:     0 0 0 3px rgba(139, 124, 240, .45);
    }
}

:root[data-theme="dark"] {
    --bg:             #12131f;
    --bg-elevated:    #1b1d2e;
    --bg-sunken:      #0d0e18;
    --surface-hover:  #24263a;

    --text:           #eceef8;
    --text-muted:     #9fa3bd;
    --text-subtle:    #6e7290;

    --border:         #2a2d44;
    --border-strong:  #3d4160;

    --brand:          #8b7cf0;
    --brand-hover:    #9d90f5;

    --success-bg:     #0f2f1d;
    --warning-bg:     #3a2a08;
    --danger-bg:      #3a1414;
    --info-bg:        #0a2634;

    --shadow-sm:      0 1px 2px rgba(0, 0, 0, .4);
    --shadow:         0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg:      0 12px 40px rgba(0, 0, 0, .6);

    --focus-ring:     0 0 0 3px rgba(139, 124, 240, .45);
}

/* --------------------------------------------------------------------------
   Réinitialisation minimale
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    color-scheme: light dark;
}

/* Quand un thème est choisi explicitement, on le dit au navigateur : sans ça,
   les contrôles natifs (barres de défilement, sélecteurs de date, saisie
   automatique) continuent de suivre le réglage SYSTÈME et détonnent au milieu
   d'une page dont le thème a été forcé. */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

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

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Respecte les utilisateurs qui ont demandé moins d'animations.
   Ce n'est pas cosmétique : les animations déclenchent des migraines et des
   nausées chez les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Checklists cochables                                           (2026-08-02)
   ───────────────────────────────────────────────────────────────────────────
   Rendues par includes/nova_renderer.php uniquement dans l'espace élève et
   dans l'aperçu de cours. Sur une page de vente, une checklist énumère le
   contenu de l'offre : elle y reste un simple glyphe, non cliquable.

   Aucune couleur en dur — le thème clair/sombre de l'élève est piloté par les
   variables de design-system.css.
   ═══════════════════════════════════════════════════════════════════════════ */
.nova-checklist {
    list-style: none;
    margin: var(--space-5) 0;
    padding: 0;
}

.nova-checklist__item {
    margin: 0;
    border-radius: var(--radius-sm, 8px);
    transition: background-color .15s ease, opacity .15s ease;
}

/* La zone cliquable est le <label> ENTIER, pas la seule case : sur téléphone,
   viser une case de 18 px au pouce est un exercice d'adresse. La cible fait
   ici toute la largeur de la ligne. */
.nova-checklist__label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    /* Sans ça, cocher/décocher vite surligne le texte des lignes traversées. */
    -webkit-user-select: none;
    user-select: none;
}

@media (hover: hover) {
    .nova-checklist__label:hover {
        background: var(--surface-hover, rgba(127, 127, 127, .08));
        border-radius: var(--radius-sm, 8px);
    }
}

.nova-checklist__box {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .2rem;
    accent-color: var(--brand);
    cursor: pointer;
}

.nova-checklist__text {
    flex: 1 1 auto;
    line-height: 1.6;
}

/* Coché : texte barré et atténué. L'état doit se lire d'un coup d'œil sur une
   liste de quinze lignes, sans avoir à inspecter chaque case. */
.nova-checklist__item.is-checked .nova-checklist__text {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Enregistrement en cours. Discret volontairement : l'écrasante majorité des
   appels aboutit en moins de 200 ms, et un indicateur voyant ferait clignoter
   la page à chaque clic. */
.nova-checklist__item.is-saving {
    opacity: .6;
}

/* Échec : la case est revenue à son état antérieur, il faut le signaler —
   sinon l'élève croit son travail enregistré. */
.nova-checklist__item.is-error {
    background: var(--danger-dim, rgba(220, 38, 38, .12));
    box-shadow: inset 2px 0 0 var(--danger, #dc2626);
}