/* ============================================================================
   DEVOIRATI — DESIGN SYSTEM
   devoirati-design-system.css
   ----------------------------------------------------------------------------
   Construit UNIQUEMENT à partir des composants réellement observés sur le site
   (audit 244 CSS + 27 913 pages en périmètre, dossier Devoirati_audit_composants_ui).

   PRINCIPE DE SÛRETÉ : tout est préfixé --dv-* / .dv-* → AUCUNE collision avec
   les styles existants. Ce fichier peut être chargé sur n'importe quelle page
   SANS en modifier l'apparence tant qu'une classe .dv-* n'est pas utilisée.
   Il ne restyle jamais les balises nues (button, h1, table, input…).

   RTL-first : propriétés logiques (padding-inline, margin-inline, inset-*).
   Couleurs unifiées à partir des dominantes réelles :
     marque   #667eea → #764ba2 (gradient signature, 143 fichiers)  · accent #f093fb
     succès   #28a745 · danger #dc3545 · avertissement #ffc107 · info #3498db
     (les variantes flat #4caf50/#ff6b6b/#f39c12/#2196f3… sont documentées comme alias)
   ============================================================================ */

:root {
  /* — MARQUE ————————————————————————————————————————————————— */
  --dv-primary:            #667eea;   /* indigo — couleur la plus fréquente (603 occ.) */
  --dv-primary-strong:     #764ba2;   /* violet — partenaire du gradient (353 occ.)   */
  --dv-primary-darker:     #4a3570;   /* violet foncé — accents/texte « dark » (remap --dk/--teal-dark, contraste ≥9:1) */
  --dv-primary-050:        #f8f9ff;   /* teinte indigo très claire (surfaces)          */
  --dv-primary-100:        rgba(102,126,234,.10);  /* survol/sélection légère           */
  --dv-primary-200:        rgba(102,126,234,.20);
  --dv-accent:             #f093fb;   /* rose — accent « extraordinaire »              */
  --dv-gradient-primary:   linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --dv-gradient-accent:    linear-gradient(135deg, #f093fb 0%, #764ba2 100%);

  /* — TEXTE & SURFACES ——————————————————————————————————————— */
  --dv-text:               #333333;   /* corps (138 occ.)          */
  --dv-text-strong:        #2c3e50;   /* titres — bleu ardoise (102 occ.) */
  --dv-text-muted:         #666666;   /* secondaire (104 occ.)     */
  --dv-text-on-brand:      #ffffff;   /* texte sur fond de marque  */
  --dv-surface:            #ffffff;   /* cartes/panneaux (433 occ.) */
  --dv-surface-alt:        #f8f9fa;   /* surface grise claire (131) */
  --dv-bg:                 #f8f9fa;   /* fond de page              */
  --dv-border:             #e0e0e0;   /* bordure standard (117)    */
  --dv-border-soft:        #e9ecef;   /* variante claire (87)      */
  --dv-border-strong:      #dee2e6;   /* variante marquée (52)     */

  /* — SÉMANTIQUE (système bootstrap observé, tints assortis) ————— */
  --dv-success:            #28a745;   --dv-success-bg: #d4edda;  --dv-success-text: #155724;
  --dv-danger:             #dc3545;   --dv-danger-bg:  #f8d7da;  --dv-danger-text:  #721c24;
  --dv-warning:            #ffc107;   --dv-warning-bg: #fff3cd;  --dv-warning-text: #856404;
  --dv-info:               #3498db;   --dv-info-bg:    #d1ecf1;  --dv-info-text:    #0c5460;
  --dv-on-success: #fff;  --dv-on-danger: #fff;  --dv-on-warning: #1a1a1a;  --dv-on-info: #fff;

  /* — TYPOGRAPHIE (polices réellement présentes) ————————————————— */
  --dv-font-ar:   'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;  /* arabe UI */
  --dv-font-serif-ar: 'Amiri', 'Scheherazade New', serif;             /* arabe « livre » */
  --dv-font-ui:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    /* latin/UI */
  --dv-font-mono: 'Courier New', ui-monospace, monospace;

  --dv-fs-xs:  .85em;  --dv-fs-sm: .9em;   --dv-fs-base: 1em;   --dv-fs-md: 1.1em;
  --dv-fs-lg:  1.2em;  --dv-fs-xl: 1.3em;  --dv-fs-2xl: 1.5em;  --dv-fs-3xl: 2em;  --dv-fs-4xl: 2.5em;
  --dv-lh-tight: 1.25; --dv-lh-normal: 1.6;
  --dv-fw-normal: 400; --dv-fw-medium: 600; --dv-fw-bold: 700; --dv-fw-black: 800;

  /* — ESPACEMENTS (rythme réel : 4/8/10/12/15/20/25/30/40) ————————— */
  --dv-space-xxs: 4px;  --dv-space-xs: 8px;  --dv-space-sm: 10px; --dv-space-md: 12px;
  --dv-space:     15px; --dv-space-lg: 20px; --dv-space-xl: 25px; --dv-space-2xl: 30px; --dv-space-3xl: 40px;

  /* — RAYONS (10/12/15/20 dominants ; 50%/999px cercles/pilules) ——— */
  --dv-radius-sm: 8px;  --dv-radius: 12px;  --dv-radius-lg: 15px;  --dv-radius-xl: 20px;
  --dv-radius-pill: 999px;  --dv-radius-circle: 50%;

  /* — OMBRES (valeurs des variables existantes --shadow-*) ——————————— */
  --dv-shadow-sm:    0 2px 4px rgba(0,0,0,.05);
  --dv-shadow-md:    0 4px 12px rgba(0,0,0,.1);
  --dv-shadow-lg:    0 10px 30px rgba(0,0,0,.1);   /* = --shadow-soft observé */
  --dv-shadow-hover: 0 18px 45px rgba(0,0,0,.12);  /* = --shadow-hover observé */

  /* — DIVERS ———————————————————————————————————————————————— */
  --dv-transition: all .3s ease;             /* = --transition observé (41 occ.) */
  --dv-transition-fast: all .15s ease;
  --dv-ring: 0 0 0 3px var(--dv-primary-200); /* anneau de focus accessible */
  --dv-container: 1100px;
}

/* Confort de lecture math/arabe sans imposer de style global : opt-in via .dv-scope */
.dv-scope { color: var(--dv-text); font-family: var(--dv-font-ar); line-height: var(--dv-lh-normal); }

/* ===========================================================================
   BOUTONS  — modèle dominant : rounded/pilule, gradient de marque, ombre,
   survol translateY(-2px). Base neutre + variantes sémantiques + tailles.
   =========================================================================== */
.dv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dv-space-xs);
  font-family: inherit; font-size: var(--dv-fs-md); font-weight: var(--dv-fw-medium);
  line-height: 1; text-decoration: none; cursor: pointer; user-select: none;
  padding-block: 12px; padding-inline: 24px;
  border: 1px solid transparent; border-radius: var(--dv-radius);
  background: var(--dv-surface-alt); color: var(--dv-text-strong);
  box-shadow: var(--dv-shadow-sm); transition: var(--dv-transition);
  -webkit-tap-highlight-color: transparent;
}
.dv-btn:hover     { transform: translateY(-2px); box-shadow: var(--dv-shadow-md); }
.dv-btn:active    { transform: translateY(0); box-shadow: var(--dv-shadow-sm); }
.dv-btn:focus-visible { outline: none; box-shadow: var(--dv-ring), var(--dv-shadow-md); }
.dv-btn:disabled, .dv-btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.dv-btn--primary   { background: var(--dv-gradient-primary); color: var(--dv-text-on-brand); border-color: transparent; }
.dv-btn--secondary { background: var(--dv-surface); color: var(--dv-primary-strong); border-color: var(--dv-border); }
.dv-btn--success   { background: var(--dv-success); color: var(--dv-on-success); }
.dv-btn--danger    { background: var(--dv-danger);  color: var(--dv-on-danger); }
.dv-btn--warning   { background: var(--dv-warning); color: var(--dv-on-warning); }
.dv-btn--info      { background: var(--dv-info);    color: var(--dv-on-info); }
.dv-btn--ghost     { background: transparent; color: var(--dv-primary-strong); box-shadow: none; }
.dv-btn--ghost:hover { background: var(--dv-primary-100); }
/* tailles */
.dv-btn--sm { font-size: var(--dv-fs-sm); padding-block: 8px;  padding-inline: 16px; border-radius: var(--dv-radius-sm); }
.dv-btn--lg { font-size: var(--dv-fs-lg); padding-block: 15px; padding-inline: 32px; }
.dv-btn--block { display: flex; width: 100%; }
.dv-btn--pill  { border-radius: var(--dv-radius-pill); }
/* bouton icône seul (rond) */
.dv-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: none; cursor: pointer;
  border-radius: var(--dv-radius-circle); background: var(--dv-gradient-primary);
  color: #fff; font-size: var(--dv-fs-lg); box-shadow: var(--dv-shadow-md);
  transition: var(--dv-transition);
}
.dv-btn-icon:hover { transform: scale(1.08); }
.dv-btn-icon:focus-visible { outline: none; box-shadow: var(--dv-ring), var(--dv-shadow-md); }

/* navigation précédent / suivant / retour — motif récurrent des pages d'exos */
.dv-prevnext { display: flex; gap: var(--dv-space-sm); justify-content: space-between; margin-block: var(--dv-space-lg); }
.dv-btn-retour { /* retour index chapitre */ }

/* ===========================================================================
   CARTES & PANNEAUX — surface blanche, rayon, ombre douce, padding.
   Variantes : exercice (barre d'accent au bord de début), correction (succès).
   =========================================================================== */
.dv-card {
  background: var(--dv-surface); border: 1px solid var(--dv-border-soft);
  border-radius: var(--dv-radius-lg); box-shadow: var(--dv-shadow-lg);
  padding: var(--dv-space-lg); margin-block: var(--dv-space);
}
.dv-card--flat  { box-shadow: none; }
.dv-card--tint  { background: var(--dv-primary-050); }
.dv-card--exercice {
  border-inline-start: 5px solid var(--dv-primary);
  background: var(--dv-primary-050);
}
.dv-card--correction {
  border-inline-start: 5px solid var(--dv-success);
  background: var(--dv-success-bg);
}
.dv-card__title { font-size: var(--dv-fs-lg); font-weight: var(--dv-fw-bold); color: var(--dv-text-strong); margin: 0 0 var(--dv-space-sm); }

/* Panneau Fahmi / aide — accent secondaire, coin arrondi prononcé */
.dv-panel-fahmi {
  background: var(--dv-surface); border: 2px solid var(--dv-primary-200);
  border-radius: var(--dv-radius-xl); box-shadow: var(--dv-shadow-md);
  padding: var(--dv-space-lg);
}

/* ===========================================================================
   TITRES — hiérarchie visuelle explicite (opt-in, ne touche pas h1/h2/h3 nus).
   Titre principal : texte en gradient de marque (motif très présent).
   =========================================================================== */
.dv-h1, .dv-h2, .dv-h3 { font-family: inherit; color: var(--dv-text-strong); line-height: var(--dv-lh-tight); margin: 0 0 var(--dv-space); font-weight: var(--dv-fw-bold); }
.dv-h1 { font-size: var(--dv-fs-4xl); font-weight: var(--dv-fw-black); }
.dv-h2 { font-size: var(--dv-fs-2xl); }
.dv-h3 { font-size: var(--dv-fs-xl); color: var(--dv-primary-strong); }
.dv-title-gradient {
  background: var(--dv-gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.dv-subtitle { color: var(--dv-text-muted); font-size: var(--dv-fs-md); font-weight: var(--dv-fw-normal); }

/* ===========================================================================
   ALERTES / MESSAGES — système bootstrap observé (tints assortis).
   =========================================================================== */
.dv-alert { border-radius: var(--dv-radius); padding: var(--dv-space-md) var(--dv-space); margin-block: var(--dv-space-sm); border: 1px solid transparent; font-size: var(--dv-fs-base); }
.dv-alert--success { background: var(--dv-success-bg); color: var(--dv-success-text); border-color: var(--dv-success); }
.dv-alert--danger  { background: var(--dv-danger-bg);  color: var(--dv-danger-text);  border-color: var(--dv-danger); }
.dv-alert--warning { background: var(--dv-warning-bg); color: var(--dv-warning-text); border-color: var(--dv-warning); }
.dv-alert--info    { background: var(--dv-info-bg);    color: var(--dv-info-text);    border-color: var(--dv-info); }

/* pastilles / badges */
.dv-badge { display: inline-block; padding: 3px 10px; border-radius: var(--dv-radius-pill); font-size: var(--dv-fs-xs); font-weight: var(--dv-fw-bold); background: var(--dv-primary-100); color: var(--dv-primary-strong); }
.dv-badge--success { background: var(--dv-success-bg); color: var(--dv-success-text); }
.dv-badge--danger  { background: var(--dv-danger-bg);  color: var(--dv-danger-text); }

/* ===========================================================================
   FORMULAIRES — champ standard, focus en indigo de marque. Compatible ERC.
   =========================================================================== */
.dv-field { display: flex; flex-direction: column; gap: var(--dv-space-xs); margin-block: var(--dv-space-sm); }
.dv-label { font-weight: var(--dv-fw-medium); color: var(--dv-text-strong); font-size: var(--dv-fs-sm); }
.dv-input, .dv-textarea, .dv-select {
  font-family: inherit; font-size: var(--dv-fs-md); color: var(--dv-text);
  background: var(--dv-surface); border: 2px solid var(--dv-border);
  border-radius: var(--dv-radius-sm); padding: 10px 12px; width: 100%;
  transition: var(--dv-transition-fast);
}
.dv-input:focus, .dv-textarea:focus, .dv-select:focus {
  outline: none; border-color: var(--dv-primary); box-shadow: var(--dv-ring);
}
.dv-input--error { border-color: var(--dv-danger); }
.dv-error-msg { color: var(--dv-danger); font-size: var(--dv-fs-sm); }

/* ===========================================================================
   TABLEAUX — wrapper responsive (26 k pages ont un risque de débordement).
   =========================================================================== */
.dv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--dv-space); border-radius: var(--dv-radius-sm); }
.dv-table { width: 100%; border-collapse: collapse; font-size: var(--dv-fs-base); background: var(--dv-surface); }
.dv-table th, .dv-table td { padding: var(--dv-space-xs) var(--dv-space-md); border: 1px solid var(--dv-border); text-align: start; }
.dv-table th { background: var(--dv-surface-alt); color: var(--dv-text-strong); font-weight: var(--dv-fw-bold); }
.dv-table tbody tr:nth-child(even) { background: var(--dv-surface-alt); }

/* ===========================================================================
   MISE EN PAGE utilitaire minimale (opt-in)
   =========================================================================== */
.dv-container { max-width: var(--dv-container); margin-inline: auto; padding-inline: var(--dv-space); }
.dv-stack > * + * { margin-block-start: var(--dv-space); }
.dv-row { display: flex; flex-wrap: wrap; gap: var(--dv-space-sm); }

/* ===========================================================================
   IMPRESSION — masque les éléments interactifs marqués .dv-no-print
   =========================================================================== */
@media print {
  .dv-no-print { display: none !important; }
  .dv-card { box-shadow: none; border: 1px solid #ccc; }
  .dv-btn  { box-shadow: none; }
}

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
  .dv-btn, .dv-btn-icon, .dv-input, .dv-textarea, .dv-select { transition: none; }
  .dv-btn:hover, .dv-btn-icon:hover { transform: none; }
}

/* ============================================================================
   LA MOITIÉ SOMBRE DES JETONS  (ajoutée le 26/08/2026)
   ----------------------------------------------------------------------------
   🔑 CE BLOC NE CHANGE RIEN À L'APPARENCE D'UNE PAGE. Il ne redéfinit que des
   variables `--dv-*`, et une variable ne peint que là où quelqu'un s'en sert.
   La promesse d'en-tête tient : ce fichier reste chargeable partout sans effet.

   🔑 TROIS ÉTATS, PAS DEUX. « comme l'appareil » est le défaut, et c'est le cas
   le plus fréquent — la plupart des visiteurs n'ont jamais choisi. D'où :
     · `:root` nu           → la palette claire, complète ;
     · la requête média     → le sombre quand l'appareil est sombre, MAIS gardée
                              `:not([data-theme="light"])` pour qu'un choix
                              « clair » explicite l'emporte sur un système sombre ;
     · `[data-theme="dark"]`→ le sombre quand l'utilisateur l'a demandé, même sur
                              un appareil clair.
   ⛔ Aucune couleur ne doit être définie UNIQUEMENT ici : sinon elle n'existe
   pas dans l'état non estampillé, et la page rend le texte d'un thème sur le
   fond de l'autre.

   ⚠️ Les valeurs ne sont pas des inversions : `--dv-primary-darker` sert de
   couleur de TEXTE (contraste ≥9:1 sur clair) — sur fond sombre il doit donc
   devenir CLAIR, pas rester foncé. Une inversion mécanique l'aurait rendu
   illisible.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dv-primary:          #8a9cf0;
    --dv-primary-strong:   #a57fd1;
    --dv-primary-darker:   #c7b6e6;   /* texte : s'éclaircit, ne s'assombrit pas */
    --dv-primary-050:      #1c2030;
    --dv-primary-100:      rgba(138,156,240,.14);
    --dv-primary-200:      rgba(138,156,240,.26);
    --dv-accent:           #e9a6f2;

    --dv-text:             #e4e8ee;
    --dv-text-strong:      #f2f5f9;
    --dv-text-muted:       #a0aab8;
    --dv-surface:          #191f27;
    --dv-surface-alt:      #141a21;
    --dv-bg:               #0f141a;
    --dv-border:           #2c333d;
    --dv-border-soft:      #242b34;
    --dv-border-strong:    #38414d;

    --dv-success: #4cc46a;  --dv-success-bg: #14301d;  --dv-success-text: #9fe3b2;
    --dv-danger:  #f0616e;  --dv-danger-bg:  #35171b;  --dv-danger-text:  #f3b4ba;
    --dv-warning: #e9b93b;  --dv-warning-bg: #332b14;  --dv-warning-text: #eed79a;
    --dv-info:    #56aee8;  --dv-info-bg:    #12262e;  --dv-info-text:    #a9d9e6;

    --dv-shadow-sm:    0 2px 4px rgba(0,0,0,.45);
    --dv-shadow-md:    0 4px 12px rgba(0,0,0,.5);
    --dv-shadow-lg:    0 10px 30px rgba(0,0,0,.55);
    --dv-shadow-hover: 0 18px 45px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --dv-primary:          #8a9cf0;
  --dv-primary-strong:   #a57fd1;
  --dv-primary-darker:   #c7b6e6;
  --dv-primary-050:      #1c2030;
  --dv-primary-100:      rgba(138,156,240,.14);
  --dv-primary-200:      rgba(138,156,240,.26);
  --dv-accent:           #e9a6f2;

  --dv-text:             #e4e8ee;
  --dv-text-strong:      #f2f5f9;
  --dv-text-muted:       #a0aab8;
  --dv-surface:          #191f27;
  --dv-surface-alt:      #141a21;
  --dv-bg:               #0f141a;
  --dv-border:           #2c333d;
  --dv-border-soft:      #242b34;
  --dv-border-strong:    #38414d;

  --dv-success: #4cc46a;  --dv-success-bg: #14301d;  --dv-success-text: #9fe3b2;
  --dv-danger:  #f0616e;  --dv-danger-bg:  #35171b;  --dv-danger-text:  #f3b4ba;
  --dv-warning: #e9b93b;  --dv-warning-bg: #332b14;  --dv-warning-text: #eed79a;
  --dv-info:    #56aee8;  --dv-info-bg:    #12262e;  --dv-info-text:    #a9d9e6;

  --dv-shadow-sm:    0 2px 4px rgba(0,0,0,.45);
  --dv-shadow-md:    0 4px 12px rgba(0,0,0,.5);
  --dv-shadow-lg:    0 10px 30px rgba(0,0,0,.55);
  --dv-shadow-hover: 0 18px 45px rgba(0,0,0,.6);
}