/* AJOUT (typographie, demande directe de David, 22/07/2026) : Manrope pour
     les titres (h1-h6), Inter pour le corps de texte - @import doit rester
     la toute premiere regle du fichier (contrainte CSS), pour que TOUTE
     page utilisant css/styles.css recoive les deux polices sans qu'aucun
     fichier HTML n'ait besoin d'etre modifie. */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

  /* ---- NOUVEAU (demande directe de David, 28/07/2026) : ecran de
     chargement - remplace le simple mot "Chargement..." par le logo
     Pharmeval, qui pulse d'une teinte grise vers sa couleur reelle. Une
     boucle continue plutot qu'une transition unique : la duree reelle du
     chargement varie d'une page a l'autre, jamais synchronisee de facon
     fiable avec une seule animation "one-shot". ---- */
  .app-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 60vh;
  }
  .app-loading-logo {
    width: 64px; height: 64px;
    animation: app-loading-pulse 1.6s ease-in-out infinite;
  }
  @keyframes app-loading-pulse {
    0%, 100% { filter: grayscale(1) opacity(0.35); }
    50% { filter: grayscale(0) opacity(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-loading-logo { animation: none; filter: grayscale(0); }
  }

  /* AJOUT (bibliotheque d'icones, remplace les emojis) : alignement generique
     de TOUTE icone inline venant de js/icons.js (icon()/dotIcon()/renderAnyIcon())
     - reconnue par ses attributs communs (aria-hidden+focusable), jamais par
     une classe a ajouter partout ou elle est utilisee (souvent au milieu d'un
     texte construit par concatenation de chaines, ex. badge.emoji + ' ' + badge.label). */
  svg[aria-hidden="true"][focusable="false"] { vertical-align: -3px; flex-shrink: 0; }
  /* AJOUT (nouvelle identite visuelle sombre) : meme alignement generique
     que ci-dessus, pour les icones Tabler (js/icons.js#icon(), balise <i>
     plutot que <svg> depuis ce chantier) - reconnues par le meme
     attribut aria-hidden commun. */
  i.ti[aria-hidden="true"] { vertical-align: -3px; flex-shrink: 0; display: inline-block; line-height: 1; }

  /* CORRECTIF (theme sombre, demande directe de David, 29/07/2026) :
     David a vu l'ecran de connexion (fond degrade marine #0f172a->#1e293b,
     cartes semi-transparentes claires, texte blanc/gris clair - deja en
     place depuis Sprint 1 pour #auth-screen/#onboarding-screen ci-dessous)
     et a demande d'etendre EXACTEMENT cette meme palette a toute
     l'application, qui restait jusqu'ici sur le theme clair creme/sable de
     la refonte visuelle (phases 1-3). Remplace le theme clair : plus une
     variante a cote de l'autre (pas de bascule clair/sombre demandee).
     --xxx-light passent de teintes pastel SOLIDES a des rgba() TRANSLUCIDES
     de la couleur pleine correspondante (meme principe deja utilise ad hoc
     ailleurs dans ce fichier, ex. rgba(29,158,117,.12/.15/.2)) : un badge
     ainsi teinte s'adapte automatiquement a la surface (claire ou sombre)
     qu'il recouvre, au lieu de rester fige sur un pastel pense pour un fond
     blanc. Les teintes d'accent utilisees comme COULEUR DE TEXTE directe
     (pas seulement en badge) sont eclaircies (--green-dark, --accent-*) :
     leurs anciennes valeurs "foncees" (pensees pour rester lisibles sur un
     fond blanc) devenaient illisibles une fois --surface/--bg assombris. */
  :root {
    --green: #1D9E75;
    --green-dark: #34D399;
    --green-light: rgba(29,158,117,.18);
    --red-light: rgba(226,75,74,.16);
    --red: #E24B4A;
    --surface: #1E293B;
    --surface2: #263449;
    --border: rgba(255,255,255,0.09);
    --border2: rgba(255,255,255,0.16);
    --text: #EEF2F8;
    --text2: #94A3B8;
    --radius: 10px;
    --radius-lg: 14px;
    /* AJOUT (refonte visuelle, phase 3 - mockup mobile ideal fourni par
       David, 27/07/2026) : arrondi plus prononce pour les cartes
       principales (tuiles de tableau de bord, cartes de contenu) - le
       reste de l'echelle (--radius/--radius-lg) reste inchange pour ne
       pas perturber les elements plus petits (boutons, badges, champs)
       qui n'ont pas besoin d'un arrondi aussi marque. */
    --radius-xl: 22px;
    --accent-yellow: #FBBF24;
    --accent-yellow-light: rgba(251,191,36,.18);

    /* AJOUT (refonte visuelle, phase 1) : teintes d'accent pour les icones
       de tuiles/cartes du nouveau tableau de bord - reprend EXACTEMENT les
       memes hex que COMPETENCY_COLOR_HEX/PARCOURS_COLOR_HEX (js/services/
       competency-metadata-service.js, parcours-metadata-service.js),
       jamais de nouvelle couleur inventee, pour rester tracable a une
       seule palette dans toute l'appli. */
    --accent-blue: #60A5FA;
    --accent-blue-light: rgba(96,165,250,.18);
    --accent-orange: #FB923C;
    --accent-orange-light: rgba(251,146,60,.18);
    --accent-purple: #C084FC;
    --accent-purple-light: rgba(192,132,252,.18);

    /* AJOUT : petite echelle d'espacement - remplace les marges/paddings
       inline ad hoc (ex. style="margin:24px 0 12px 0" dans index.html)
       par des valeurs partagees, sans devenir un systeme de design complet. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    --bg: #0F172A;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.65);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Dégradé tres subtil (pas une nouvelle couleur, juste une variation
       de luminosite de --bg lui-meme) - casse la platitude d'un aplat
       unique sans jamais nuire a la lisibilite. */
    background: linear-gradient(180deg, #17233d 0%, var(--bg) 420px, var(--bg) 100%);
    color: var(--text);
    min-height: 100vh;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 700;
  }

  /* AJOUT (refonte visuelle, phase 1) : base de carte/tuile commune -
     remplace progressivement les classes de carte quasi-dupliquees
     (.import-card, .bank-detail-card, .pv-header-card, .mesparcours-card,
     .pv-stat-card) au fur et a mesure du deploiement page par page.
     ADDITIF : les anciennes classes restent en place tant qu'une page
     n'est pas encore migree, rien n'est casse entre-temps. */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    /* CORRECTIF (refonte visuelle, phase 3) : --shadow-* existait deja
       dans :root depuis la phase 2 ("les cartes doivent flotter") mais
       n'etait en realite jamais applique nulle part - les cartes
       restaient a plat (bordure seule). Ombre douce, jamais --shadow-md/lg
       ici (reserves aux elements VRAIMENT au-dessus du reste - popups,
       menus deroulants). */
    box-shadow: var(--shadow-sm);
  }
  .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--green);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    box-shadow: var(--shadow-sm);
  }
  /* ---- NOUVEAU (demande directe de David, 28/07/2026) : tuiles de
     statistiques de l'accueil cliquables (voir js/home.js) - vers
     l'ecran reel correspondant, jamais un lien factice. ---- */
  .stat-card-link { text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
  .stat-card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

  /* ---- NOUVEAU (chantier graphique, demande directe de David) : badge
     colore autour de l'icone de titre de page - une couleur d'identite
     par grande section (Defi = orange, Mes parcours = bleu, Mes
     competences = violet, Entrainement libre = vert, deja la couleur de
     marque). ---- */
  .page-header-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    vertical-align: -9px; margin-right: 4px;
  }
  .page-header-icon img { width: 20px; height: 20px; display: block; }
  .page-header-icon i { font-size: 18px; }
  .page-header-icon-green { background: var(--green-light); color: var(--green-dark); }
  .page-header-icon-orange { background: var(--accent-orange-light); color: var(--accent-orange); }
  .page-header-icon-blue { background: var(--accent-blue-light); color: var(--accent-blue); }
  .page-header-icon-purple { background: var(--accent-purple-light); color: var(--accent-purple); }

  .stat-card-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    margin-bottom: var(--space-1);
  }
  .stat-card-icon-green { background: var(--green-light); color: var(--green-dark); }
  .stat-card-icon-blue { background: var(--accent-blue-light); color: var(--accent-blue); }
  .stat-card-icon-orange { background: var(--accent-orange-light); color: var(--accent-orange); }
  .stat-card-icon-purple { background: var(--accent-purple-light); color: var(--accent-purple); }
  /* ---- NOUVEAU (chantier graphique, demande directe de David) : chaque
     tuile de stat reprend la couleur de sa propre icone au lieu d'un vert
     uniforme partout - point 9 de l'audit ("pas assez de couleurs
     secondaires"). ---- */
  .stat-card-accent-blue { border-top-color: var(--accent-blue); }
  .stat-card-accent-orange { border-top-color: var(--accent-orange); }
  .stat-card-accent-purple { border-top-color: var(--accent-purple); }
  .stat-card-value { font-size: 24px; font-weight: 700; color: var(--text); }
  .stat-card-label { font-size: 12px; color: var(--text2); }
  .stat-card-sub { font-size: 11px; color: var(--green-dark); margin-top: 2px; }
  .stat-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
  }
  /* ---- CORRECTIF (demande directe de David, 28/07/2026) : "ca fait trop
     vide" - sur mobile, minmax(180px,1fr) ne laissait passer qu'une seule
     colonne (3 cartes empilees, beaucoup de vide vertical). Force les 3
     tuiles sur UNE MEME ligne, resserrees, plutot que de les empiler. ---- */
  @media (max-width: 480px) {
    .stat-card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
    .stat-card-grid .stat-card { padding: var(--space-2); }
    .stat-card-grid .stat-card-icon { width: 28px; height: 28px; font-size: 14px; margin-bottom: 2px; }
    .stat-card-grid .stat-card-value { font-size: 17px; }
    .stat-card-grid .stat-card-label { font-size: 10px; line-height: 1.2; }
  }

  /* AJOUT : donut "progression globale" (js/mastery-donut-chart.js),
     partage entre l'accueil et "Mes compétences". */
  .mastery-donut-widget { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  .mastery-donut-legend { display: flex; flex-direction: column; gap: var(--space-2); }
  .mastery-donut-legend-row { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
  .mastery-donut-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .mastery-donut-legend-label { color: var(--text); flex: 1; }
  .mastery-donut-legend-value { color: var(--text2); font-weight: 600; }
  .mastery-donut-empty { text-align: center; padding: var(--space-4) var(--space-3); }
  .mastery-donut-empty-icon { font-size: 32px; margin-bottom: var(--space-2); }
  .mastery-donut-empty-title { font-weight: 600; margin-bottom: 4px; }

  /* AJOUT (refonte visuelle, phase 1) : tuiles de source documentaire -
     nom GENERIQUE (pas "etl-...") car reutilisees a l'identique par
     l'entrainement libre (selection multiple) ET admin/document-sources.js
     (liste + statut), decision validee avec David ("presentation comme
     entrainement libre"). */
  .source-tile-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .source-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 96px; padding: var(--space-2); border: 1.5px solid var(--border2); border-radius: var(--radius);
    background: var(--surface2); color: var(--text); cursor: pointer; text-align: center; position: relative;
  }
  .source-tile:hover { border-color: var(--green); }
  .source-tile-emoji { font-size: 24px; }
  .source-tile-name { font-size: 11px; color: var(--text); font-weight: 500; line-height: 1.3; word-break: break-word; }
  .source-tile.source-tile-selected { border-color: var(--green); background: var(--green-light); }
  .source-tile.source-tile-selected .source-tile-name { color: var(--green-dark); font-weight: 700; }
  .source-tile-status-dot { position: absolute; top: 4px; right: 6px; font-size: 10px; }
  /* AJOUT (demande directe de David, 22/07/2026) : pastille "masquée de
     l'entraînement libre" - coin OPPOSE du badge de statut ci-dessus,
     jamais le meme coin (risque de superposition). */
  .source-tile-hidden-dot { position: absolute; top: 4px; left: 6px; color: var(--text2); }

  /* AJOUT : selecteur d'emoji cliquable (admin/document-sources.js) - une
     palette curatee, jamais un picker Unicode exhaustif. */
  .emoji-picker {
    grid-template-columns: repeat(10, 1fr); gap: 4px;
    max-width: 420px; margin-top: var(--space-2); padding: var(--space-2);
    border: 1px solid var(--border2); border-radius: var(--radius); background: var(--surface2);
  }
  .emoji-picker-btn {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    font-size: 18px; padding: 6px; cursor: pointer; line-height: 1;
  }
  .emoji-picker-btn:hover { border-color: var(--green); background: var(--green-light); }

  /* ---- SIDEBAR (mockup valide avec David, 22/07/2026 - remplace la barre
     horizontale de la phase 1) : fixee a gauche, verticale, sur TOUTE
     page (js/site-header.js, injectee dans #site-header-mount). Decale le
     CONTENU normal de chaque page via `body` ci-dessous - AUCUNE page n'a
     besoin de changer sa propre structure HTML. ---- */
  :root {
    --sidebar-width: 232px;
    --sidebar-width-collapsed: 76px;
  }
  body { padding-left: var(--sidebar-width); }

  .site-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
    z-index: 100;
  }
  .logo { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; }
  .sh-logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-bottom: var(--space-4); padding: 0 var(--space-1); }
  .sh-logo-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .sh-app-name { font-size: 16px; font-weight: 700; }
  .sh-app-tagline { font-size: 9px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .02em; white-space: normal; }

  .sh-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .sh-nav-link {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--radius);
    color: var(--text2); text-decoration: none; font-size: 13px; font-weight: 500;
    transition: background .15s, color .15s;
  }
  .sh-nav-link:hover { background: var(--surface2); color: var(--text); }
  .sh-nav-link.sh-nav-active { background: var(--green-light); color: var(--green-dark); font-weight: 700; }
  .sh-nav-icon { display: flex; flex-shrink: 0; align-items: center; }
  .sh-nav-icon svg { display: block; }

  /* AJOUT : grand avatar de la page "Mon profil" (le pied de sidebar avec
     un avatar plus petit a ete retire - chantier graphique, demande
     directe de David, 28/07/2026 - deja consultable ici). */
  .mp-avatar {
    width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border2);
    background: var(--surface2); overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: var(--text2);
  }
  .mp-avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* AJOUT (refonte visuelle, phase 3, mockup mobile fourni par David,
     27/07/2026) : "Mon profil" devient le point d'acces pour Mes
     competences/Mes evaluations/Administration (voir js/mon-profil.js). */
  .mp-menu-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 4px; border-bottom: 1px solid var(--border);
    background: none; border-left: none; border-right: none; border-top: none;
    text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: left;
  }
  .mp-menu-row:last-child { border-bottom: none; }
  .mp-menu-row:hover { color: var(--green-dark); }
  .mp-menu-row-icon { display: flex; color: var(--green-dark); flex-shrink: 0; }
  .mp-menu-row-label { flex: 1; }
  .mp-menu-row-logout { color: var(--red); }
  .mp-menu-row-logout .mp-menu-row-icon { color: var(--red); }
  .mp-menu-row-logout:hover { color: #B23A39; }

  /* Mobile/tablette : la sidebar devient une barre de navigation FIXEE EN
     BAS de l'ecran (retour utilisateur, 27/07/2026 : la colonne d'icones a
     gauche "ne fait pas assez app mobile" et grignote une largeur precieuse
     sur un ecran etroit) - reutilise EXACTEMENT le meme HTML (site-header.js
     n'est pas modifie), uniquement reagence par CSS : la sidebar passe
     d'une colonne (gauche) a une rangee (bas), le logo disparait (plus de
     place utile, l'utilisateur sait deja ou il est une fois connecte). */
  @media (max-width: 780px) {
    /* AJOUT (demande directe de David, 29/07/2026, "sur la version mobile
       éclaircis un tout petit peu les cadres") : cartes legerement plus
       claires qu'au format desktop - se distinguent mieux du fond de page
       sur un petit ecran, jamais un changement de theme (desktop inchange). */
    :root { --bottom-nav-height: 60px; --surface: #263449; --surface2: #2E3D54; }
    body { padding-left: 0; padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }

    .site-sidebar {
      top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto;
      flex-direction: row; align-items: center;
      border-right: none; border-top: 1px solid var(--border);
      padding: 6px var(--space-2);
      padding-bottom: calc(6px + env(safe-area-inset-bottom));
      overflow: visible;
    }
    .sh-logo-link { display: none; }
    .sh-nav { flex-direction: row; flex: 1; gap: 0; justify-content: space-around; }
    .sh-nav-link { justify-content: center; padding: 8px; }
    .sh-nav-label { display: none; }
  }

  .container { max-width: 820px; margin: 0 auto; padding: 28px 20px; }

  /* CORRECTIF (retour mobile, 27/07/2026) : la rangee "Progression globale
     / Defi du jour / Activite recente" (index.html) etait en 3 colonnes
     figees par un style EN LIGNE (jamais adaptee au mobile, contrairement
     au reste du site) - chaque carte se retrouvait ecrasee sur ~100px de
     large sur un telephone. Regle deplacee ici pour pouvoir la surcharger
     proprement en media query. */
  /* CORRECTIF (demande directe de David, 29/07/2026, "l'un a cote de
     l'autre" meme sur mobile) : ces deux cartes restent cote a cote a
     toutes les largeurs - l'empilement en 1 colonne sous 700px a ete
     retire expressement. */
  .home-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

  /* VIEWS */
  #home-view { display: block; }
  #quiz-view, #results-view { display: none; }

  /* AJOUT (demande directe de David, 29/07/2026) : sur mobile, "Vos
     parcours" remonte AVANT "Votre progression globale"/"Activité
     récente" - le reste (bienvenue, stats, entraînement libre) garde son
     ordre naturel (order:0 par defaut, jamais touche ici). Placee APRES
     "#home-view { display: block; }" ci-dessus (meme specificite : la
     regle la PLUS TARDIVE dans le fichier l'emporte, y compris sous une
     media query - jamais avant, sans quoi ce display:flex serait
     silencieusement ecrase). */
  @media (max-width: 780px) {
    #home-view { display: flex; flex-direction: column; }
    .home-parcours-card { order: 1; }
    .home-duo-grid { order: 2; }
  }

  /* HOME */
  .section-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text2);
    margin-bottom: 12px;
  }

  /* ── THEME TABS ── */
  /* ── GROUPED THEME SELECTOR ── */
  .theme-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }
  .theme-group {
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .theme-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface2);
    border-bottom: 1.5px solid var(--border2);
    cursor: default;
    user-select: none;
  }
  .theme-group-icon { font-size: 18px; }
  .theme-group-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text1);
    flex: 1;
  }
  .theme-group-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    background: var(--surface);
    border-radius: 99px;
    padding: 2px 9px;
  }
  .theme-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .theme-tab {
    flex: 1;
    min-width: 130px;
    background: var(--surface);
    border: none;
    border-right: 1.5px solid var(--border2);
    border-radius: 0;
    padding: 11px 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    position: relative;
    text-align: left;
  }
  .theme-tab:last-child { border-right: none; }
  .theme-tab::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 3px;
    background: transparent;
    transition: background .15s;
  }
  .theme-tab:hover { background: var(--green-light); }
  .theme-tab.active { background: var(--green-light); }
  .theme-tab.active::before { background: var(--green); }
  .theme-tab-icon { font-size: 18px; margin-bottom: 3px; }
  .theme-tab-name { font-size: 12px; font-weight: 700; margin-bottom: 2px; line-height: 1.2; }
  .theme-tab-desc { font-size: 10px; color: var(--text2); line-height: 1.3; }
  .theme-tab-count {
    display: inline-block; margin-top: 4px;
    font-size: 10px; font-weight: 600;
    background: var(--surface2);
    border-radius: 99px;
    padding: 2px 7px;
  }
  .theme-tab.active .theme-tab-count { background: rgba(29,158,117,.2); color: var(--green-dark); }

  /* ── SUB-THEME GRID ── */
  .cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
  }
  .cat-card {
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: var(--radius);
    padding: 12px 14px;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    user-select: none;
  }
  .cat-card:hover { border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,158,117,.1); }
  .cat-card.selected { border-color: var(--green); background: var(--green-light); }
  .cat-card.selected .cat-check { opacity:1; }
  .cat-check {
    position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px;
    background: var(--green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 11px;
    opacity: 0;
    transition: opacity .15s;
  }
  .cat-icon { font-size: 20px; margin-bottom: 6px; }
  .cat-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
  .cat-count { font-size: 11px; color: var(--text2); }
  .cat-tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
  .cat-tag {
    font-size: 10px; padding: 2px 6px;
    background: var(--surface2);
    border-radius: 99px;
    color: var(--text2);
  }
  /* Select-all row */
  .subtheme-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .select-all-btn {
    font-size: 12px; color: var(--green);
    background: none; border: none; cursor: pointer;
    font-weight: 600; padding: 0;
  }
  .select-all-btn:hover { text-decoration: underline; }

  /* DIFFICULTY TOGGLE */
  .diff-row { display:flex; gap:8px; margin-bottom:24px; align-items:center; }
  .diff-btn {
    padding: 6px 16px;
    border-radius: 99px;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    font-size: 13px; cursor: pointer;
    color: var(--text2);
    transition: all .12s;
  }
  .diff-btn.active { background: var(--green); border-color: var(--green); color: white; font-weight: 600; }

  /* ACTION BUTTONS */
  .btn-row { display:flex; gap:10px; flex-wrap:wrap; }
  .btn-primary {
    background: var(--green); color: white;
    border: none; border-radius: var(--radius);
    padding: 11px 22px; font-size: 15px; font-weight: 600;
    cursor: pointer; display:inline-flex; align-items:center; gap:7px;
    text-decoration: none;
    transition: background .15s, box-shadow .15s, transform .15s;
  }
  .btn-primary:hover { background: var(--green-dark); box-shadow: var(--shadow-sm); transform: translateY(-1px); text-decoration: none; }
  .btn-primary:active { transform: translateY(0); box-shadow: none; }
  .btn-secondary {
    background: var(--surface); color: var(--text);
    border: 1.5px solid var(--border2);
    border-radius: var(--radius);
    padding: 10px 20px; font-size: 14px; font-weight: 500;
    cursor: pointer; display:inline-flex; align-items:center; gap:7px;
    text-decoration: none;
    transition: all .15s;
  }
  .btn-secondary:hover { border-color: var(--green); color: var(--green); box-shadow: var(--shadow-xs); text-decoration: none; }

  /* QUIZ VIEW */
  .quiz-panel { }
  .quiz-topbar {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 10px;
  }
  .q-counter { font-size: 13px; color: var(--text2); font-weight: 500; }
  .progress-bar-wrap {
    height: 5px; background: var(--surface2);
    border-radius: 99px; margin-bottom: 22px; overflow:hidden;
  }
  .progress-bar {
    height: 100%; background: var(--green);
    border-radius: 99px;
    transition: width .4s ease;
  }
  .question-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 16px;
  }
  .q-meta { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
  .q-badge {
    font-size: 11px; font-weight: 600; letter-spacing:.04em;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--green-light);
    color: var(--green-dark);
  }
  .q-diff-badge {
    font-size: 11px; padding: 3px 10px; border-radius: 99px;
    background: var(--surface2); color: var(--text2);
  }
  .q-text { font-size: 17px; font-weight: 500; line-height: 1.5; }
  .answers-grid {
    display: grid; gap: 9px;
    margin-bottom: 16px;
  }
  .ans-btn {
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: var(--radius);
    padding: 13px 18px;
    text-align: left; font-size: 14px;
    cursor: pointer;
    transition: all .12s;
    display:flex; align-items:center; gap:12px;
  }
  .ans-btn:hover:not(:disabled) { border-color: var(--green); background: var(--green-light); }
  .ans-btn:disabled { cursor: default; }
  .ans-btn.correct { border-color: var(--green); background: var(--green-light); }
  .ans-btn.wrong { border-color: var(--red); background: var(--red-light); }
  .ans-letter {
    width: 24px; height: 24px; min-width:24px;
    border-radius: 50%;
    background: var(--surface2);
    display:flex; align-items:center; justify-content:center;
    font-size: 12px; font-weight: 700; color: var(--text2);
  }
  .ans-btn.correct .ans-letter { background: var(--green); color: white; }
  .ans-btn.wrong .ans-letter { background: var(--red); color: white; }
  .explanation {
    background: var(--surface2);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 12px 16px;
    font-size: 14px; line-height: 1.6;
    display: none;
    margin-bottom: 16px;
  }
  .explanation.show { display: block; }
  .explanation strong { color: var(--green-dark); }
  .explanation.explanation-incorrect { background: var(--red-light); border-left-color: var(--red); }
  .explanation.explanation-incorrect strong { color: var(--red); }
  .explanation .point-pratique {
    display: block;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(29,158,117,.1);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--green-dark);
  }
  .nav-row { display:flex; justify-content:flex-end; }

  /* RESULTS */
  .results-panel { text-align:center; padding: 40px 0; }
  .score-circle {
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 6px solid var(--green);
    display:inline-flex; flex-direction:column;
    align-items:center; justify-content:center;
    margin-bottom: 24px;
  }
  .score-pct { font-size: 36px; font-weight: 700; color: var(--green); }
  .score-sub { font-size: 13px; color: var(--text2); }
  .results-msg { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
  .results-detail { font-size: 15px; color: var(--text2); margin-bottom: 28px; }

  @media(max-width:600px){
    .cats-grid { grid-template-columns: 1fr 1fr; }
    .site-header h1 { font-size:15px; }
    .q-text { font-size:15px; }
  }

/* ── FICHE GALLERY ─────────────────────────────────────────────────── */
.fiche-gallery {
  margin-top: 16px;
  border-top: 2px dashed #C7D2FE;
  padding-top: 14px;
}
.fiche-gallery-title {
  font-size: 11px;
  font-weight: 700;
  color: #6366F1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.fiche-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.fiche-img-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fiche-img-ctx {
  font-size: 10px;
  color: #6B7280;
  font-style: italic;
  line-height: 1.3;
}
.fiche-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  border: 1.5px solid #E5E7EB;
  cursor: zoom-in;
  transition: transform 0.15s, box-shadow 0.15s;
  background: #F3F4F6;
}
.fiche-img:hover {
  transform: scale(1.02);
  box-shadow: 0 3px 14px rgba(0,0,0,0.18);
  border-color: #6366F1;
}

/* ── REPORT BUTTON & MODAL ───────────────────────────────────────────── */
.btn-report {
  display: none !important;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  background: none;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11px;
  color: #9CA3AF;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.btn-report:hover {
  border-color: #F87171;
  color: #EF4444;
  background: #FFF5F5;
}
.btn-report.visible { display: inline-flex !important; }

.report-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 8000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.report-modal-overlay.active { display: flex; }
.report-modal {
  background: white;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}
.report-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-modal-sub {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 16px;
  line-height: 1.4;
}
.report-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.report-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  transition: all 0.12s;
  background: white;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.report-option:hover {
  border-color: #6366F1;
  background: #EEF2FF;
  color: #4338CA;
}
.report-option.selected {
  border-color: #6366F1;
  background: #EEF2FF;
  color: #4338CA;
  font-weight: 600;
}
.report-option .opt-icon { font-size: 16px; flex-shrink: 0; }
.report-textarea {
  width: 100%;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: inherit;
  color: #374151;
  resize: none;
  min-height: 60px;
  display: none;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.report-textarea.visible { display: block; }
.report-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.btn-report-cancel {
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: #6B7280;
}
.btn-report-send {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: #6366F1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: white;
  opacity: 0.5;
  pointer-events: none;
  transition: all 0.15s;
}
.btn-report-send.enabled {
  opacity: 1;
  pointer-events: auto;
}
.report-success {
  text-align: center;
  padding: 12px 0 4px;
  display: none;
}
.report-success.visible { display: block; }
.report-success .check { font-size: 36px; margin-bottom: 8px; }
.report-success p {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

  /* ── RELIER ── */
  .relier-wrap { display:flex; gap:12px; margin-bottom:16px; }
  .relier-col { flex:1; display:flex; flex-direction:column; gap:8px; }
  .relier-col-label {
    font-size:11px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text2);
    margin-bottom:2px;
  }
  .relier-item {
    background:var(--surface);
    border:1.5px solid var(--border2);
    border-radius:var(--radius);
    padding:10px 14px;
    font-size:13px; line-height:1.4;
    cursor:pointer;
    transition:all .12s;
    user-select:none;
    position:relative;
  }
  .relier-item:hover:not(.locked) { border-color:var(--green); background:var(--green-light); }
  .relier-item.selected-left {
    border-color:var(--green); background:var(--green-light);
    font-weight:600;
  }
  .relier-item.matched-ok {
    border-color:var(--green); background:var(--green-light);
    cursor:default;
  }
  .relier-item.matched-ok::after {
    content:'✓'; position:absolute; right:10px; top:50%;
    transform:translateY(-50%);
    color:var(--green); font-weight:700;
  }
  .relier-item.matched-wrong {
    border-color:var(--red); background:var(--red-light);
    cursor:default;
  }
  .relier-item.matched-wrong::after {
    content:'✗'; position:absolute; right:10px; top:50%;
    transform:translateY(-50%);
    color:var(--red); font-weight:700;
  }
  .relier-item.locked { cursor:default; }
  .relier-item.correct-reveal {
    border-color:var(--green); background:var(--green-light);
    cursor:default; opacity:.7;
  }
  .relier-score {
    text-align:center; margin-bottom:12px;
    font-size:14px; font-weight:600; color:var(--text2);
  }
  .relier-score span { color:var(--green-dark); font-size:18px; }

  /* ── FLUX ── */
  .flux-wrap { margin-bottom:16px; }
  .flux-steps {
    display:flex; flex-direction:column; gap:0;
    margin-bottom:16px;
  }
  .flux-step {
    display:flex; align-items:flex-start; gap:12px;
  }
  .flux-connector {
    display:flex; flex-direction:column; align-items:center;
    width:32px; flex-shrink:0;
  }
  .flux-dot {
    width:32px; height:32px; border-radius:50%;
    background:var(--surface2); border:2px solid var(--border2);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:var(--text2);
    flex-shrink:0;
  }
  .flux-dot.active {
    background:var(--green); border-color:var(--green); color:white;
  }
  .flux-dot.question-mark {
    background:var(--bg); border:2px dashed var(--border2);
    color:var(--text2); font-size:16px;
  }
  .flux-line {
    width:2px; flex:1; min-height:12px;
    background:var(--border2);
  }
  .flux-text {
    flex:1; padding:8px 0 16px 0;
    font-size:14px; line-height:1.4; color:var(--text);
  }
  .flux-text.missing {
    color:var(--text2); font-style:italic; font-weight:500;
  }
  .flux-text.missing strong {
    color:var(--green-dark); font-style:normal;
  }

  
  /* ── CAS ÉVOLUTIF ── */
  .cas-etape-header {
    background: var(--surface2, #f0f4f8);
    border-left: 4px solid var(--green, #1d9e75);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 12px;
    font-size: 0.82em;
    color: var(--text2, #555);
    font-weight: 600;
  }
  .cas-contexte {
    background: var(--surface2, #f0f4f8);
    border: 1.5px solid var(--border2, #dde3ec);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-style: italic;
    font-size: 0.92em;
    line-height: 1.5;
  }
  .cas-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
  }
  .cas-progress-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border2, #dde3ec);
    transition: background .2s;
  }
  .cas-progress-dot.active { background: var(--green, #1d9e75); }
  .cas-progress-dot.done   { background: var(--green-dark, #147a5a); }

  
  /* ── ARBRE DÉCISIONNEL ── */
  .arbre-wrap {
    background: var(--surface2, #f0f4f8);
    border: 1.5px solid var(--border2, #dde3ec);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 0.9em;
  }
  .arbre-situation {
    font-style: italic;
    color: var(--text2, #666);
    margin-bottom: 14px;
    font-size: 0.88em;
  }
  .arbre-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .arbre-node {
    background: var(--surface, #fff);
    border: 2px solid var(--border2, #dde3ec);
    border-radius: 8px;
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 0.92em;
    min-width: 160px;
    max-width: 260px;
  }
  .arbre-node.racine {
    border-color: var(--green, #1d9e75);
    background: rgba(29,158,117,.08);
  }
  .arbre-node.question {
    border-color: var(--blue, #3b82f6);
    background: rgba(59,130,246,.07);
    font-style: italic;
  }
  .arbre-node.missing {
    border-color: var(--orange, #f59e0b);
    background: rgba(245,158,11,.1);
    color: var(--orange, #d97706);
    font-weight: 700;
    letter-spacing: .03em;
  }
  .arbre-node.decision {
    border-color: var(--border2, #dde3ec);
    background: var(--surface, #fff);
    font-weight: 500;
    font-size: 0.88em;
  }
  .arbre-node.decision.alerte {
    border-color: #dd6b20;
    background: rgba(221,107,32,.09);
    color: #c05621;
  }
  .arbre-node.revealed-correct {
    border-color: var(--green, #1d9e75) !important;
    background: rgba(29,158,117,.15) !important;
    color: var(--green-dark, #147a5a) !important;
  }
  .arbre-node.revealed-wrong {
    border-color: #e53e3e !important;
    background: rgba(229,62,62,.12) !important;
    color: #c53030 !important;
  }
  .arbre-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
  }
  .arbre-vline {
    width: 2px;
    height: 16px;
    background: var(--border2, #ccc);
  }
  .arbre-branches {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    justify-content: center;
  }
  .arbre-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex: 1;
    max-width: 220px;
  }
  .arbre-branch-label {
    font-size: 0.78em;
    font-weight: 700;
    color: var(--text2, #888);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--border2, #e8ecf0);
    margin-bottom: 4px;
  }
  .arbre-branch-label.oui { color: var(--green, #1d9e75); background: rgba(29,158,117,.12); }
  .arbre-branch-label.non { color: var(--text2); }
  .arbre-hline {
    width: 100%;
    height: 2px;
    background: var(--border2, #ccc);
    margin-bottom: 0;
  }

  /* ---- Ecran de selection de profil (provisoire, remplace plus tard par Firebase Auth) ---- */
  #profile-selector {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: linear-gradient(135deg, var(--bg1, #0f172a), var(--bg2, #1e293b));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 28px;
    padding: 24px;
  }
  #profile-selector h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    text-align: center;
  }
  .profile-choice-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .profile-choice-btn {
    min-width: 180px;
    padding: 28px 32px;
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .profile-choice-btn:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
  }
  .profile-choice-icon { font-size: 34px; }
  #active-profile-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(255,255,255,0.15);
    color: var(--text2, #94a3b8);
    margin-left: 8px;
    vertical-align: middle;
  }
  /* ---- Authentification Firebase (Sprint 1) ---- */
  #auth-loading {
    position: fixed; inset: 0; z-index: 20000;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; text-align: center; padding: 24px;
  }
  #auth-screen {
    position: fixed; inset: 0; z-index: 15000;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  .auth-box {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    color: #fff;
  }
  .auth-box h2 { margin: 0 0 6px 0; font-size: 20px; font-weight: 700; text-align: center; }
  .auth-box p.auth-sub { margin: 0 0 20px 0; font-size: 12px; color: #94a3b8; text-align: center; }
  .auth-field { margin-bottom: 14px; }
  .auth-field label { display: block; font-size: 12px; margin-bottom: 4px; color: #cbd5e1; }
  .auth-field input {
    width: 100%; padding: 10px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08); color: #fff; font-size: 14px;
    box-sizing: border-box;
  }
  .auth-field input::placeholder { color: rgba(255,255,255,0.4); }
  .auth-btn-primary {
    width: 100%; padding: 11px; border-radius: 8px; border: none;
    background: var(--green, #1D9E75); color: #fff; font-weight: 600;
    font-size: 14px; cursor: pointer; margin-top: 6px;
  }
  .auth-btn-primary:hover { opacity: 0.9; }
  .auth-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
  .auth-btn-google {
    width: 100%; padding: 11px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08); color: #fff; font-weight: 600;
    font-size: 14px; cursor: pointer; margin-top: 10px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .auth-btn-google:hover { background: rgba(255,255,255,0.16); }
  .auth-switch { text-align: center; margin-top: 16px; font-size: 13px; color: #cbd5e1; }
  .auth-switch a { color: var(--green, #1D9E75); cursor: pointer; text-decoration: underline; }
  .auth-error {
    background: rgba(226,75,74,0.15); border: 1px solid rgba(226,75,74,0.4);
    color: #ffb4b3; padding: 8px 12px; border-radius: 8px; font-size: 12px;
    margin-bottom: 12px; display: none;
  }
  #user-email-display { font-size: 11px; color: var(--text2); margin-left: 10px; }

  /* ---- Zone d'administration (Sprint 3, base minimale) ---- */
  #admin-view { max-width: 640px; margin: 0 auto; padding: 24px 0; }
  #admin-view h2 { margin: 0 0 8px 0; font-size: 22px; font-weight: 700; }
  .admin-info-row { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .admin-info-row strong { margin-right: 6px; }

  /* ---- Indicateur discret de synchronisation (Sprint 4) ---- */
  .results-sync-status { font-size: 12px; color: var(--text2); text-align: center; margin-top: 8px; min-height: 16px; }

  /* ---- Centre de progression "Mes evaluations" (Sprint 5) ---- */
  #history-view { max-width: 780px; margin: 0 auto; padding: 24px 0; }
  #history-view h2 { margin: 0 0 16px 0; font-size: 22px; font-weight: 700; }

  .history-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    justify-content: space-between; margin-bottom: 18px;
  }
  .history-search-input {
    flex: 1; min-width: 180px; padding: 9px 12px; border-radius: var(--radius);
    border: 1.5px solid var(--border2); background: var(--surface); color: var(--text);
    font-size: 13px; box-sizing: border-box;
  }
  .history-filters { display: flex; gap: 6px; flex-wrap: wrap; }
  .history-filter-btn {
    padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--border2); background: var(--surface); color: var(--text2);
    cursor: pointer; transition: all .15s;
  }
  .history-filter-btn:hover { border-color: var(--green); }
  .history-filter-btn.active { background: var(--green); border-color: var(--green); color: #fff; }

  .history-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }
  .history-card {
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .history-card-date { font-size: 12px; color: var(--text2); font-weight: 600; }
  .history-card-space { font-size: 13px; font-weight: 700; }
  .history-card-pct { font-size: 26px; font-weight: 700; color: var(--green); margin-top: 4px; }
  .history-card-frac { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
  .history-card-detail-btn { align-self: flex-start; padding: 6px 12px; font-size: 12px; }

  .history-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 48px 16px; text-align: center; color: var(--text2);
  }
  .history-empty-icon { font-size: 40px; }
  .history-error, .history-no-match {
    grid-column: 1 / -1; text-align: center; color: var(--text2); font-size: 13px; padding: 24px 0;
  }

  #history-detail-section { padding-top: 8px; }
  .history-detail-summary {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
    padding: 20px; margin: 16px 0; text-align: center;
  }
  .history-detail-date { font-size: 13px; color: var(--text2); font-weight: 600; }
  .history-detail-space { font-size: 15px; font-weight: 700; margin-top: 2px; }
  .history-detail-pct { font-size: 34px; font-weight: 700; color: var(--green); margin-top: 8px; }
  .history-detail-frac { font-size: 13px; color: var(--text2); }
  .history-detail-params {
    display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text2);
    margin-bottom: 16px;
  }
  .history-detail-params strong { color: var(--text); }

  .history-detail-questions { display: flex; flex-direction: column; gap: 10px; }
  .history-question-row {
    background: var(--surface); border: 1.5px solid var(--border2); border-left: 4px solid var(--border2);
    border-radius: var(--radius); padding: 12px 14px; font-size: 13px;
  }
  .history-question-row.is-correct { border-left-color: var(--green); }
  .history-question-row.is-incorrect { border-left-color: #E24B4A; }
  .history-question-num { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; margin-bottom: 4px; }
  .history-question-text { font-weight: 600; margin-bottom: 6px; }
  .history-question-answer, .history-question-correct { color: var(--text2); margin-bottom: 2px; }
  .history-question-result { font-weight: 700; margin-top: 6px; }
  .history-question-row.is-correct .history-question-result { color: var(--green); }
  .history-question-row.is-incorrect .history-question-result { color: #E24B4A; }

  /* ---- Assistant de premiere connexion (Sprint 2) ----
     Meme identite graphique que l'ecran d'authentification (fond degrade
     sombre, carte semi-transparente), pour une transition visuelle coherente
     entre connexion -> onboarding -> application. */
  #onboarding-screen {
    position: fixed; inset: 0; z-index: 14000;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  .onboarding-box {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 460px;
    color: #fff;
  }
  .onboarding-box h2 { margin: 0 0 10px 0; font-size: 20px; font-weight: 700; text-align: center; }
  .onboarding-intro { font-size: 13px; color: #cbd5e1; text-align: center; line-height: 1.5; margin: 0 0 8px 0; }
  .onboarding-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
  .onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); }
  .onboarding-dot.active { background: var(--green, #1D9E75); }
  .onboarding-field-label { font-size: 12px; color: #cbd5e1; margin-bottom: 8px; }
  .onboarding-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .onboarding-choice {
    padding: 9px 14px; border-radius: 20px; font-size: 13px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06); color: #fff; cursor: pointer;
  }
  .onboarding-choice:hover { background: rgba(255,255,255,0.14); }
  .onboarding-choice.selected {
    background: var(--green, #1D9E75); border-color: var(--green, #1D9E75); font-weight: 600;
  }
  .onboarding-field { margin-bottom: 14px; }
  .onboarding-field label { display: block; font-size: 12px; margin-bottom: 4px; color: #cbd5e1; }
  .onboarding-field input[type="text"] {
    width: 100%; padding: 10px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08); color: #fff; font-size: 14px;
    box-sizing: border-box;
  }
  .onboarding-checkbox-row {
    display: flex; align-items: flex-start; gap: 10px; font-size: 13px;
    color: #e2e8f0; margin-bottom: 18px; cursor: pointer; line-height: 1.4;
  }
  .onboarding-checkbox-row input[type="checkbox"] { margin-top: 3px; }
  .onboarding-actions { display: flex; gap: 10px; margin-top: 8px; }
  .onboarding-btn-primary {
    flex: 1; padding: 11px; border-radius: 8px; border: none;
    background: var(--green, #1D9E75); color: #fff; font-weight: 600;
    font-size: 14px; cursor: pointer;
  }
  .onboarding-btn-primary:hover { opacity: 0.9; }
  .onboarding-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
  .onboarding-btn-secondary {
    padding: 11px 16px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent; color: #fff; font-size: 14px; cursor: pointer;
  }
  .onboarding-btn-secondary:hover { background: rgba(255,255,255,0.08); }
  .onboarding-error {
    background: rgba(226,75,74,0.15); border: 1px solid rgba(226,75,74,0.4);
    color: #ffb4b3; padding: 8px 12px; border-radius: 8px; font-size: 12px;
    margin-top: 12px; display: none;
  }

  /* ---- Niveaux de score partages (Sprint 6) : couleur + libelle, jamais
     la couleur seule (voir js/services/score-utils.js). ---- */
  .score-good   { color: var(--green); }
  .score-medium { color: var(--accent-yellow); }
  .score-weak   { color: #E24B4A; }
  .score-unknown { color: var(--text2); }

  /* ---- Analyse de progression (Sprint 6) ---- */
  .stats-section { margin-bottom: 28px; }
  .stats-section h3 { margin: 0 0 12px 0; font-size: 16px; font-weight: 700; }
  .stats-section-title { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; margin-bottom: 8px; }

  .stats-loading, .stats-error, .stats-empty {
    padding: 20px; text-align: center; color: var(--text2); font-size: 13px;
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
  }
  .stats-disclaimer { font-size: 11px; color: var(--text2); margin-bottom: 10px; font-style: italic; }

  .stats-overview-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px; margin-bottom: 16px;
  }
  .stats-card {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
    padding: 14px; text-align: center;
  }
  .stats-card-value { font-size: 24px; font-weight: 700; }
  .stats-card-value.stat-neutral { color: var(--text); }
  .stats-card-label { font-size: 11px; color: var(--text2); margin-top: 4px; }

  .stats-trend {
    background: var(--surface); border: 1.5px solid var(--border2); border-left: 4px solid var(--border2);
    border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
  }
  .stats-trend.trend-up { border-left-color: var(--green); }
  .stats-trend.trend-down { border-left-color: #E24B4A; }
  .stats-trend-message { font-size: 14px; font-weight: 600; }
  .stats-trend.trend-up .stats-trend-message { color: var(--green); }
  .stats-trend.trend-down .stats-trend-message { color: #E24B4A; }

  .stats-space-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  }
  .stats-space-card {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius);
    padding: 12px 14px;
  }
  .stats-space-name { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 2px; }
  .stats-space-pct { font-size: 22px; font-weight: 700; }
  .stats-space-detail { font-size: 11px; color: var(--text2); margin-top: 2px; }

  .stats-by-space, .stats-themes { margin-bottom: 16px; }
  .stats-themes-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .stats-theme-column { display: flex; flex-direction: column; gap: 6px; }
  .stats-themes-none, .stats-themes-insufficient {
    font-size: 12px; color: var(--text2); padding: 10px 0;
  }
  .stats-theme-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .stats-theme-name { flex: 0 0 auto; min-width: 90px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats-theme-bar-wrap { flex: 1; height: 6px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
  .stats-theme-bar { height: 100%; border-radius: 4px; }
  .stats-theme-bar.score-good { background: var(--green); }
  .stats-theme-bar.score-medium { background: var(--accent-yellow); }
  .stats-theme-bar.score-weak { background: #E24B4A; }
  .stats-theme-bar.score-unknown { background: var(--border2); }
  .stats-theme-pct { flex: 0 0 auto; font-weight: 700; min-width: 40px; text-align: right; }

  /* ---- Vos recommandations (Sprint 7) ---- */
  .reco-section { margin-bottom: 24px; }
  .reco-section h3 { margin: 0 0 12px 0; font-size: 16px; font-weight: 700; }

  .reco-loading, .reco-error, .reco-empty {
    padding: 20px; text-align: center; color: var(--text2); font-size: 13px;
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
  }
  .reco-empty p { margin: 2px 0; }

  /* ---- Correction : etat generique "Continuez vos evaluations" - carte
     plus compacte (evite une impression de vide) avec une petite icone. ---- */
  .reco-empty-compact { padding: 14px 20px; }
  .reco-empty-icon { display: block; font-size: 22px; margin-bottom: 4px; }

  .reco-card {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
    padding: 16px; margin-bottom: 12px;
  }
  .reco-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .reco-card-icon { font-size: 20px; }
  .reco-card-title { font-size: 14px; font-weight: 700; }
  .reco-card-description { font-size: 13px; color: var(--text); margin-bottom: 8px; line-height: 1.4; }
  .reco-card-confidence { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
  .reco-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .reco-action-btn, .reco-ignore-btn { padding: 8px 14px; font-size: 12px; }
  .reco-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .reco-why { font-size: 11px; color: var(--text2); }
  .reco-why summary { cursor: pointer; font-weight: 600; }
  .reco-why p { margin: 6px 0 0 0; }

  /* ---- Centre d'administration - gestion des utilisateurs (Sprint 8) ---- */
  #admin-view { max-width: 960px; }
  .admin-message {
    padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin: 12px 0;
  }
  .admin-message-success { background: rgba(29,158,117,.12); border: 1px solid var(--green); color: var(--green-dark); }
  .admin-message-error { background: rgba(226,75,74,0.12); border: 1px solid #E24B4A; color: #F87171; }
  .admin-message-denied { background: rgba(184,114,10,0.12); border: 1px solid var(--accent-yellow); color: #FBBF24; }

  .admin-users-section { margin-top: 20px; }
  .admin-users-section h3 { margin: 0 0 10px 0; font-size: 16px; font-weight: 700; }
  .admin-users-disclaimer { font-size: 11px; color: var(--text2); font-style: italic; margin-bottom: 8px; }

  .admin-users-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
  .admin-users-search-input {
    flex: 1; min-width: 200px; padding: 9px 12px; border-radius: var(--radius);
    border: 1.5px solid var(--border2); background: var(--surface); color: var(--text); font-size: 13px; box-sizing: border-box;
  }
  .admin-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .admin-filter-label { font-size: 11px; color: var(--text2); font-weight: 700; margin-right: 2px; }
  .admin-role-filter-btn, .admin-status-filter-btn {
    padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
    border: 1.5px solid var(--border2); background: var(--surface); color: var(--text2); cursor: pointer;
  }
  .admin-role-filter-btn:hover, .admin-status-filter-btn:hover { border-color: var(--green); }
  .admin-role-filter-btn.active, .admin-status-filter-btn.active { background: var(--green); border-color: var(--green); color: #fff; }

  .admin-users-table-wrap { overflow-x: auto; border: 1.5px solid var(--border2); border-radius: var(--radius-lg); }
  .admin-users-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .admin-users-table th {
    text-align: left; padding: 10px 12px; background: var(--surface2); font-size: 11px;
    text-transform: uppercase; color: var(--text2); border-bottom: 1.5px solid var(--border2); white-space: nowrap;
  }
  .admin-users-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .admin-user-row { cursor: pointer; }
  .admin-user-row:hover { background: var(--green-light); }
  .admin-users-loading, .admin-users-empty { padding: 20px; text-align: center; color: var(--text2); font-size: 13px; }

  .admin-badge {
    display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  }
  .admin-badge-role-user { background: var(--surface2); color: var(--text2); }
  .admin-badge-role-admin { background: rgba(29,158,117,.15); color: var(--green-dark); }
  .admin-badge-status-active { background: rgba(29,158,117,.15); color: var(--green-dark); }
  .admin-badge-status-pending { background: rgba(184,114,10,.15); color: #FBBF24; }
  .admin-badge-status-suspended { background: rgba(226,75,74,.15); color: #F87171; }

  .admin-users-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
  .admin-pagination-label { font-size: 12px; color: var(--text2); }

  /* ---- Modales (fiche utilisateur / confirmation) - Sprint 8 ---- */
  .admin-modal-overlay {
    position: fixed; inset: 0; z-index: 16000;
    background: rgba(0,0,0,0.5);
    display: none; align-items: center; justify-content: center; padding: 20px;
  }
  .admin-modal {
    background: var(--surface); border-radius: var(--radius-lg); padding: 24px;
    width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; position: relative;
  }
  .admin-modal h3 { margin: 0 0 14px 0; font-size: 17px; font-weight: 700; }
  .admin-modal-close {
    position: absolute; top: 14px; right: 14px; background: var(--surface2); border: none;
    border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center; color: var(--text2);
  }
  .admin-detail-row { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .admin-detail-row strong { margin-right: 4px; }
  .admin-detail-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
  .admin-detail-self-note { font-size: 12px; color: var(--text2); font-style: italic; margin: 0; }
  .admin-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .admin-confirm-modal p { font-size: 13px; line-height: 1.5; }

  /* ---- Ecran d'import de questions (Sprint 10, admin/import.html) ---- */
  .admin-nav-menu { margin: 14px 0 6px 0; }
  .admin-nav-section-label { width: 100%; margin: 4px 0 6px 0; font-weight: 700; font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: .03em; }
  #import-loading, #import-denied { text-align: center; padding: 60px 20px; color: var(--text2); }
  .import-page { max-width: 760px; margin: 0 auto; padding: 24px 20px; }
  .import-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
  .import-header h2 { margin: 0; }
  .import-intro { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 20px; }
  .import-intro code { background: var(--surface2); padding: 1px 6px; border-radius: 4px; }

  .import-card {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
    padding: 20px; margin-bottom: 16px;
  }
  .import-card h3 { margin: 0 0 14px 0; font-size: 15px; font-weight: 700; }
  .import-file-name { font-size: 12px; color: var(--text2); margin: 10px 0; }

  .import-errors-card { border-color: #E24B4A; }
  .import-errors-intro { font-size: 13px; color: var(--text2); margin: 0 0 10px 0; }
  .import-errors-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: #F87171; }

  .import-preview-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
  .import-preview-stat {
    flex: 1; min-width: 120px; text-align: center; padding: 14px; border-radius: var(--radius);
    background: var(--surface2);
  }
  .import-preview-stat span { display: block; font-size: 26px; font-weight: 800; }
  .import-preview-stat label { font-size: 11px; color: var(--text2); text-transform: uppercase; }
  .import-preview-new span { color: var(--green-dark); }
  .import-preview-update span { color: var(--accent-yellow); }

  .import-preview-breakdown { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; }
  .import-preview-breakdown > div { flex: 1; min-width: 220px; }
  .import-badge {
    display: inline-block; margin: 3px 4px 0 0; padding: 3px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 600; background: var(--surface2); color: var(--text2);
  }

  .import-report-summary { font-size: 14px; font-weight: 600; }
  .import-report-duration { font-size: 12px; color: var(--text2); }
  .import-report-error { color: #F87171; font-weight: 600; }
  .import-report-warning { font-size: 12px; color: #FBBF24; background: rgba(184,114,10,.1); padding: 8px 12px; border-radius: var(--radius); }

  /* ---- Banque de questions (Sprint 11, admin/bank.html) ---- */
  /* UX demandee : interface sobre, peu de couleurs - reservees
     exclusivement aux 4 statuts (draft/review/published/archived).
     Tout le reste de l'interface reste dans la palette neutre deja
     etablie (--surface/--surface2/--border/--text/--text2). */
  #bank-loading, #bank-denied { text-align: center; padding: 60px 20px; color: var(--text2); }
  .bank-page { max-width: 1400px; margin: 0 auto; padding: 24px 20px; }
  .bank-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .bank-header h2 { margin: 0; }

  .bank-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
  .bank-search-input { flex: 2; min-width: 240px; }
  .bank-select {
    padding: 8px 10px; border-radius: var(--radius); border: 1.5px solid var(--border2);
    background: var(--surface); font-size: 12px; color: var(--text); box-sizing: border-box;
  }
  .bank-author-input { min-width: 110px; }
  .bank-sort-dir-btn { padding: 8px 12px; }

  .bank-columns { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; }
  .bank-list-column { flex: 1; min-width: 320px; max-width: 640px; }
  .bank-detail-column { flex: 1.6; min-width: 380px; }

  .bank-list { max-height: 70vh; overflow-y: auto; overflow-x: auto; }
  .bank-list-loading, .bank-list-empty {
    padding: 24px; text-align: center; color: var(--text2); font-size: 13px;
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
  }

  /* CORRECTIF : liste de la Banque de questions passee d'un empilement de
     cartes a un tableau (colonnes Référentiel/Difficulté demandees en
     remplacement des filtres retires). */
  .bank-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--surface); }
  .bank-table th {
    text-align: left; padding: 8px 10px; font-size: 11px; color: var(--text2);
    border-bottom: 1.5px solid var(--border2); white-space: nowrap;
  }
  .bank-table td { padding: 8px 10px; border-bottom: 1px solid var(--border2); vertical-align: top; }
  .bank-row { cursor: pointer; transition: background-color .15s; }
  .bank-row:hover { background-color: var(--surface2); }
  .bank-row-selected { background-color: var(--surface2); }
  .bank-row-id { font-size: 11px; font-weight: 700; color: var(--text2); font-family: monospace; white-space: nowrap; }
  .bank-row-question { color: var(--text); line-height: 1.35; max-width: 260px; }

  /* AJOUT (demande directe de David, 23/07/2026) : nom d'une pre-provision
     en attente (liste secondaire, admin/users.js) - police normale,
     jamais .bank-row-id/monospace (une personne n'est pas un code). Le
     reste de la liste utilisateurs est une grille de tuiles, voir
     .source-tile (styles partages avec admin/document-sources.js). */
  .users-row-name { font-size: 13px; font-weight: 700; color: var(--text); }

  .bank-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
  .bank-pagination-label { font-size: 12px; color: var(--text2); }

  /* Badges de statut - SEULE source de couleur volontaire de cet ecran */
  .bank-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap;
  }
  .bank-badge svg { flex-shrink: 0; }
  .bank-badge-draft { background: rgba(212,160,23,.15); color: #FBBF24; }
  .bank-badge-review { background: rgba(37,110,214,.13); color: #60A5FA; }
  .bank-badge-published { background: rgba(29,158,117,.15); color: var(--green-dark); }
  .bank-badge-archived { background: rgba(255,255,255,.12); color: var(--text2); }
  .bank-badge-trash { background: rgba(226,75,74,.13); color: #F87171; }

  /* AJOUT (refonte visuelle, phase 1) : onglets de filtrage par statut
     (ex. "Mes formations" - En cours/À commencer/Terminées). */
  .bank-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
  .bank-tab {
    background: var(--surface); border: 1px solid var(--border2); border-radius: 999px;
    padding: 6px 16px; font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer;
    transition: all .15s;
  }
  .bank-tab:hover { border-color: var(--green); color: var(--green-dark); }
  .bank-tab-active { background: var(--green); border-color: var(--green); color: white; font-weight: 600; }

  /* ---- AJOUT (demande directe de David, 29/07/2026, "un systeme comme
     la capture" - module de navigation a onglets fourni en reference) :
     onglets "en fiche cartonnee" accroches au-dessus d'un panneau (voir
     mes-parcours.html/js) - l'onglet actif se fond avec le panneau
     (meme fond, aucune bordure basse), les inactifs restent en retrait
     (fond --bg, legerement recules). Volontairement DISTINCT de
     .bank-tab (pilules) juste en-dessous - deux niveaux de filtre
     differents ne doivent jamais se ressembler au point d'etre confondus. ---- */
  .folder-tabs { display: flex; gap: 3px; padding-left: var(--space-3); margin-bottom: -1px; position: relative; z-index: 1; }
  .folder-tab {
    padding: 10px 22px; font-size: 13px; font-weight: 700; color: var(--text2);
    background: var(--bg); border: 1.5px solid var(--border2); border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .folder-tab:hover { color: var(--text); }
  .folder-tab-active { color: var(--green-dark); background: var(--surface); }
  .mesparcours-panel { position: relative; z-index: 0; }


  /* Colonne droite : fiche produit */
  .bank-detail-placeholder {
    padding: 60px 20px; text-align: center; color: var(--text2); font-size: 13px;
    background: var(--surface); border: 1.5px dashed var(--border2); border-radius: var(--radius-lg);
  }
  .bank-detail-card {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
    padding: 22px; max-height: 78vh; overflow-y: auto;
  }
  .bank-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .bank-detail-header h3 { margin: 0; font-size: 16px; }
  .ds-name-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .ds-name-row input { flex: 1; min-width: 0; font-family: inherit; }
  .bank-detail-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
  .bank-chip {
    display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px;
    background: var(--surface2); color: var(--text2);
  }
  .bank-detail-section { padding: 14px 0; border-top: 1px solid var(--border); }
  .bank-detail-section:first-of-type { border-top: none; padding-top: 0; }
  .bank-detail-section h4 { margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text2); }
  .bank-detail-question { font-size: 15px; font-weight: 600; line-height: 1.5; margin: 0 0 10px 0; }
  .bank-detail-answers { list-style: none; margin: 0; padding: 0; font-size: 13px; }
  .bank-detail-answers li { padding: 6px 10px; border-radius: var(--radius); margin-bottom: 4px; background: var(--surface2); }
  .bank-answer-correct { background: var(--green-light) !important; font-weight: 600; }
  .bank-detail-row { font-size: 13px; padding: 4px 0; }
  .bank-detail-row strong { color: var(--text2); font-weight: 600; margin-right: 4px; }
  .bank-detail-row ul { margin: 4px 0 0 18px; padding: 0; }

  .bank-completeness-bar { font-family: monospace; font-size: 15px; letter-spacing: 1px; margin-bottom: 8px; }
  .bank-completeness-pct { font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: normal; }
  .bank-completeness-checklist { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text2); display: flex; flex-wrap: wrap; gap: 4px 16px; }

  .bank-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .bank-delete-btn { color: #F87171; border-color: rgba(226,75,74,.4); }

  .bank-edit-label { display: block; font-size: 11px; color: var(--text2); margin: 10px 0 4px 0; }
  .bank-edit-textarea {
    width: 100%; min-height: 80px; padding: 8px 10px; border-radius: var(--radius);
    border: 1.5px solid var(--border2); background: var(--surface); color: var(--text);
    font-size: 13px; font-family: inherit; box-sizing: border-box; resize: vertical;
  }

  @media (max-width: 900px) {
    .bank-columns { flex-direction: column; }
    .bank-list-column, .bank-detail-column { max-width: none; width: 100%; }
  }

  /* ---- Historique visuel (correctif Sprint 11) ---- */
  .bank-timeline { font-size: 12px; color: var(--text2); }
  .bank-timeline-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border2); }
  .bank-timeline-item { position: relative; padding: 4px 0 10px 16px; }
  .bank-timeline-item::before {
    content: ''; position: absolute; left: -5px; top: 8px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--text2);
  }
  .bank-timeline-date { font-size: 11px; color: var(--text2); }
  .bank-timeline-label { font-size: 13px; color: var(--text); font-weight: 600; }
  .bank-timeline-detail { font-size: 11px; color: var(--text2); font-style: italic; }

  .bank-trash-btn { color: #FBBF24; border-color: rgba(184,114,10,.4); }

  /* ---- Parcours (Sprint 12) - specifique aux competences uniquement ;
     le reste de l'ecran reutilise deliberement les classes .bank-*
     existantes (meme style que la Banque de questions, comme demande). ---- */
  .parcours-competency-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .parcours-competency-card {
    background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius);
    padding: 10px 12px;
  }
  .parcours-competency-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .parcours-competency-actions { display: flex; gap: 4px; }
  .parcours-competency-actions button { padding: 4px 8px; font-size: 12px; }
  .parcours-competency-description { font-size: 12px; color: var(--text2); margin: 4px 0; }
  .parcours-competency-questions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .parcours-competency-questions a { color: #F87171; text-decoration: none; margin-left: 4px; }

  /* ---- AJOUT (refonte de la liste des parcours, demande directe de
     David, 28/07/2026 - "pas très beau ou intuitif, et pas très
     flexible") : cases a cocher (selection multiple) + etoile de mise en
     avant, directement dans la ligne. Classes dediees .parcours-row-*
     plutot que de modifier .bank-row/.bank-row-top, partagees avec
     d'autres ecrans admin (Banque de questions, Utilisateurs) qui ne
     doivent jamais etre affectes par ce chantier. ---- */
  .parcours-select-all-label {
    display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2);
    margin-bottom: 6px; cursor: pointer; user-select: none;
  }
  .parcours-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px; border-radius: var(--radius); margin-bottom: 6px;
    border: 1.5px solid var(--border2); background: var(--surface);
    transition: background-color .15s, border-color .15s, box-shadow .2s ease, transform .2s ease;
  }
  .parcours-row:hover { background-color: var(--surface2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
  .parcours-row-selected { background-color: var(--surface2); border-color: var(--green); }
  .parcours-row-checkbox-wrap { flex-shrink: 0; padding-top: 3px; cursor: pointer; }
  .parcours-row-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }
  .parcours-row-body { flex: 1; min-width: 0; cursor: pointer; }
  .parcours-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .parcours-row-desc { color: var(--text); line-height: 1.35; margin-top: 4px; }
  .parcours-row-meta { font-size: 11.5px; color: var(--text2); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .parcours-row-star {
    flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 19px; line-height: 1;
    color: var(--border2); padding: 2px; transition: color .15s, transform .15s;
  }
  .parcours-row-star:hover { color: #FBBF24; transform: scale(1.12); }
  .parcours-row-star-active { color: #FBBF24; }
  .parcours-featured-badge { background: rgba(212,160,23,.15); color: #FBBF24; }

  .parcours-bulk-bar {
    align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 8px; background: var(--surface2);
    border: 1px solid var(--border2); border-radius: var(--radius); font-size: 12.5px;
  }
  .parcours-bulk-bar button { padding: 5px 10px; font-size: 12px; }

  /* ---- CORRECTIF : palette de couleurs fermee (pastilles cliquables) ---- */
  .parcours-color-picker { display: flex; gap: 8px; margin: 4px 0 10px 0; flex-wrap: wrap; }
  .parcours-color-swatch {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  }
  .parcours-color-swatch:hover { transform: scale(1.08); }
  .parcours-color-selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
  .parcours-color-none { background: var(--surface2); color: var(--text2); font-size: 13px; line-height: 24px; }

  /* ---- CORRECTIF : recapitulatif d'ajout multiple de competences ---- */
  .parcours-bulk-summary { font-size: 13px; }
  .parcours-bulk-summary ul { margin: 6px 0 12px 18px; padding: 0; }
  .parcours-bulk-summary-count { font-weight: 700; }
  .parcours-bulk-duplicates { color: #FBBF24; }
  .bank-timeline-partial-note { font-size: 11px; color: var(--text2); font-style: italic; margin-top: 6px; }

  /* ---- NOUVEAU (Sprint 15) : cartes "Mes parcours" (espace utilisateur) ---- */
  .mesparcours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
  .mesparcours-card {
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
    background: var(--surface); display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
  }
  .mesparcours-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .mesparcours-card-stripe { height: 6px; background: var(--border); }
  .mesparcours-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .mesparcours-card-body h3 { margin: 0; font-size: 14px; line-height: 1.3; }
  .mesparcours-card-body p { margin: 0; font-size: 13px; color: var(--text2); flex: 1; }
  .mesparcours-card-body .btn-primary { align-self: flex-start; margin-top: 4px; }
  /* ---- NOUVEAU (chantier graphique, demande directe de David) :
     medaillon icone colore (couleur reelle du parcours) + pills de
     progression, au lieu d'une simple icone 18px et d'une phrase brute. ---- */
  .mesparcours-card-header { display: flex; align-items: center; gap: 10px; }
  .mesparcours-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  }
  .mesparcours-pills { display: flex; gap: 6px; flex-wrap: wrap; }
  .mesparcours-pill {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    background: var(--surface2); color: var(--text2);
  }
  .mesparcours-pill-strong { background: var(--green-light); color: var(--green-dark); }
  .mesparcours-pill-active { background: var(--accent-orange-light); color: var(--accent-orange); }

  /* ---- AJOUT (demande directe de David, 29/07/2026) : parcours deja
     reussi a 100% (meilleur score) - teinte legerement verte + grisee
     pour signaler l'acquis sans masquer le contenu de la carte. ---- */
  .mesparcours-card-mastered { background: var(--green-light); filter: grayscale(35%); opacity: .85; }
  .mesparcours-card-mastered:hover { opacity: 1; }
  .mesparcours-medal { color: #FBBF24; font-size: 18px; margin-left: 4px; flex-shrink: 0; }

  /* ---- NOUVEAU (Sprint 16) : page de consultation d'un parcours ---- */
  .pv-page { max-width: 960px; margin: 0 auto; }

  .pv-breadcrumb { font-size: 13px; color: var(--text2); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
  .pv-breadcrumb a { color: var(--text2); text-decoration: none; }
  .pv-breadcrumb a:hover { text-decoration: underline; }

  .pv-header-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-bottom: 20px; }
  .pv-header-stripe { height: 6px; background: var(--border); }
  .pv-header-card h1 { margin: 16px 20px 4px 20px; font-size: 24px; }
  .pv-header-description { margin: 0 20px 12px 20px; color: var(--text2); font-size: 14px; }
  .pv-header-card .bank-detail-tags-row { margin: 0 20px 12px 20px; }
  .pv-header-meta { margin: 0 20px 16px 20px; font-size: 12px; color: var(--text2); display: flex; gap: 6px; flex-wrap: wrap; }

  .pv-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
  .pv-stat-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px; text-align: center; }
  .pv-stat-value { font-size: 20px; font-weight: 700; }
  .pv-stat-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }

  .pv-section { margin-bottom: 28px; }
  .pv-section h2 { font-size: 16px; margin-bottom: 12px; }

  .pv-competency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .pv-competency-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
  .pv-competency-card-stripe { height: 5px; background: var(--border); }
  .pv-competency-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
  .pv-competency-card-body h3 { margin: 0; font-size: 14px; }
  .pv-competency-card-body p { margin: 0; font-size: 12px; color: var(--text2); }

  .pv-evaluation-list { display: flex; flex-direction: column; gap: 8px; }
  .pv-evaluation-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 16px;
    text-decoration: none; color: inherit;
    transition: border-color .15s, background-color .15s;
  }
  /* AJOUT (historique des tentatives, demande directe de David) : ces
     lignes sont desormais aussi des liens (vers evaluation-result.html) -
     un survol coherent avec le reste des elements cliquables du site. */
  a.pv-evaluation-row:hover { border-color: var(--green); background: var(--green-light); }
  .pv-evaluation-name { font-size: 14px; font-weight: 600; }

  /* Tablette : statistiques sur 2 colonnes plutot que 4 */
  @media (max-width: 900px) {
    .pv-stats-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* Smartphone : en-tete et evaluations reflues sur une seule colonne */
  @media (max-width: 600px) {
    .pv-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pv-competency-grid { grid-template-columns: 1fr; }
    .pv-evaluation-row { flex-direction: column; align-items: flex-start; }
    .pv-header-card h1 { font-size: 20px; }
  }

  /* ---- NOUVEAU (Sprint 17) : page d'évaluation ---- */
  .ev-page { max-width: 760px; margin: 0 auto; }

  .ev-header { margin-bottom: 16px; }
  .ev-header h1 { margin: 0 0 4px 0; font-size: 22px; }

  .ev-progress-block { margin-bottom: 16px; }
  .ev-progress-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
  .ev-save-indicator { font-style: italic; min-height: 16px; }
  .ev-progress-bar-track { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
  .ev-progress-bar-fill { height: 100%; background: var(--accent, #1D9E75); transition: width .2s ease; }

  /* AJOUT : "Mes parcours" (Mes evaluations) - reutilise .ev-progress-bar-*
     ci-dessus tel quel, uniquement la disposition en arborescence est propre
     a cette section. */
  .mpc-parcours-card {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: var(--radius-lg);
    padding: 14px 16px; margin-bottom: 12px;
  }
  .mpc-parcours-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .mpc-parcours-link { color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
  .mpc-parcours-link:hover { color: var(--green-dark); text-decoration: underline; }
  .mpc-progress-row { display: flex; align-items: center; gap: 10px; }
  .mpc-progress-row .ev-progress-bar-track { flex: 1; }
  .mpc-progress-label { font-size: 12px; color: var(--text2); min-width: 40px; text-align: right; }

  .ev-question-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 20px; margin-bottom: 20px; }
  .ev-question-card h2 { margin: 0 0 16px 0; font-size: 17px; line-height: 1.4; }

  .ev-options { display: flex; flex-direction: column; gap: 10px; }
  .ev-option {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  }
  .ev-option:hover { border-color: var(--accent, #1D9E75); }
  .ev-option input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; }
  .ev-option input[type="radio"]:focus-visible { outline: 2px solid var(--accent, #1D9E75); outline-offset: 2px; }
  /* :not(:disabled) DELIBERE : cette surbrillance "selection en cours" ne
     doit plus s'appliquer une fois la reponse verrouillee (input disabled,
     voir applyAnswerFeedback() dans evaluation.js), sans quoi elle entre
     en conflit avec .ev-option-correct/-incorrect ci-dessous - et gagne
     meme malgre un selecteur plus specifique cote correct/incorrect, car
     :has() herite de la specificite de son propre contenu ("input:checked"
     compte un selecteur de type + un pseudo-classe, pas juste 1 classe). */
  .ev-option:has(input:checked:not(:disabled)) { border-color: var(--accent, #1D9E75); border-width: 2px; background: rgba(29,158,117,.08); }
  /* Retour immediat a la selection (reponse revelee, plus modifiable) -
     reutilise les memes tokens de couleur que l'ancien moteur de quiz. */
  .ev-option-correct { border-color: var(--green); border-width: 2px; background: var(--green-light); }
  .ev-option-incorrect { border-color: var(--red); border-width: 2px; background: var(--red-light); }
  .ev-option:has(input:disabled) { cursor: default; }

  .ev-actions-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
  .ev-actions-row .btn-primary, .ev-actions-row .btn-secondary { min-height: 44px; padding-left: 18px; padding-right: 18px; }
  #ev-btn-prev:disabled, #ev-btn-next:disabled { opacity: .4; cursor: not-allowed; }

  @media (max-width: 600px) {
    .ev-actions-row { flex-direction: column; }
    .ev-actions-row button { width: 100%; }
  }

  /* ---- NOUVEAU (Sprint 18) : page de résultat d'évaluation ---- */
  .er-score-card {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    padding: 20px; margin-bottom: 24px;
  }
  .er-score-chart { flex-shrink: 0; }
  .er-score-details { flex: 1; min-width: 200px; }
  .er-score-percent { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
  .er-score-breakdown { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
  .er-legend { display: flex; align-items: center; gap: 8px; }
  .er-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .er-dot-correct { background: #1D9E75; }
  .er-dot-incorrect { background: #E24B4A; }
  .er-dot-unanswered { background: #B0B7C3; }

  .er-question-list { display: flex; flex-direction: column; gap: 12px; }
  .er-question-card { border: 1px solid var(--border); border-left-width: 5px; border-radius: var(--radius); background: var(--surface); padding: 16px; }
  .er-q-correct { border-left-color: #1D9E75; }
  .er-q-incorrect { border-left-color: #E24B4A; }
  .er-q-unanswered { border-left-color: #B0B7C3; }
  .er-question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .er-question-statement { font-weight: 600; margin: 0 0 10px 0; }
  .er-question-answers { font-size: 13px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
  .er-question-explanation { font-size: 13px; color: var(--text2); background: rgba(29,158,117,.08); border-radius: 6px; padding: 10px 12px; }
  .er-question-explanation-image { display: block; max-width: 100%; height: auto; margin-top: var(--space-2); border: 1px solid var(--border2); border-radius: var(--radius); }

  /* AJOUT (demande directe de David, 23/07/2026, "bouton signaler la
     question") : voir js/question-report-widget.js, reutilise a
     l'identique sur evaluation.js ET evaluation-result.js. */
  .question-report { margin-top: var(--space-2); }
  .question-report-trigger {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12px; color: var(--text2); text-decoration: underline;
  }
  .question-report-trigger:hover { color: var(--red); }
  .question-report-form {
    margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--border2);
    border-radius: var(--radius); background: var(--surface2); max-width: 360px;
  }
  .question-report-error { font-size: 12px; color: var(--red); margin-top: 4px; }
  .question-report-confirmation { font-size: 12px; color: var(--green-dark); margin-top: var(--space-2); }

  @media (max-width: 600px) {
    .er-score-card { flex-direction: column; text-align: center; }
  }

  /* ---- NOUVEAU (Sprint 19) : page "Mes compétences" ---- */
  .mc-radar-card {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    padding: 20px; margin-bottom: 16px;
  }
  .mc-radar-legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; min-width: 180px; }
  .mc-radar-legend-item { color: var(--text2); }
  /* CORRECTIF (demande directe de David, 23/07/2026) : les noms de
     competences sont plus longs que les noms de source documentaire pour
     lesquels .source-tile (96px) a ete concu - elargi UNIQUEMENT ici pour
     eviter les coupures de mot disgracieuses, jamais en changeant la
     regle partagee (voir admin/document-sources.js). */
  #mc-list.source-tile-grid .source-tile { width: 132px; }
  /* CORRECTIF (demande directe de David, 23/07/2026) : une adresse e-mail
     n'a pas d'espace ou se couper proprement - tronquee sur une seule
     ligne avec "…" plutot que coupee au milieu d'un mot (l'adresse
     complete reste lisible au survol, voir title="" sur la tuile). */
  #users-list.source-tile-grid .source-tile-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }

  @media (max-width: 600px) {
    .mc-radar-card { flex-direction: column; text-align: center; }
  }

  /* =========================================================================
     REFONTE VISUELLE — PHASE 2 (profondeur/richesse, retour direct de David :
     "le style est un peu trop blanc")
     =========================================================================
     La phase 1 avait pose la structure (en-tete partage, cartes, icones) mais
     laissait --bg quasi identique a --surface et aucune carte n'avait
     d'ombre - tout se lisait comme une seule surface blanche plate. Ce bloc
     est deliberement ADDITIF et regroupe ELEVATION UNIQUEMENT (box-shadow,
     transition, quelques cercles de fond pour les icones d'etat vide) sur
     des selecteurs DEJA existants plus haut dans ce fichier - jamais de
     nouvelle couleur de marque, jamais de restructuration HTML/JS. Pense a
     ajouter le/les selecteur(s) d'une future nouvelle carte a la liste
     correspondante ci-dessous plutot que d'inventer une ombre ad hoc au cas
     par cas. */

  /* --- Cartes d'INFORMATION statiques (jamais cliquables elles-memes) :
     une seule ombre de repos, jamais de survol. --- */
  .card,
  .stat-card,
  .theme-group,
  .question-card,
  .stats-loading, .stats-error, .stats-empty, .stats-card, .stats-trend, .stats-space-card,
  .reco-loading, .reco-error, .reco-empty, .reco-card,
  .import-card,
  .bank-list-loading, .bank-list-empty, .bank-detail-placeholder, .bank-detail-card,
  .mesparcours-card,
  .pv-header-card, .pv-stat-card, .pv-competency-card, .pv-evaluation-row,
  .ev-question-card,
  .er-score-card, .er-question-card,
  .mc-radar-card,
  .history-card, .history-detail-summary, .history-question-row,
  .mpc-parcours-card,
  .parcours-competency-card {
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
  }

  /* --- Cartes/tuiles reellement CLIQUABLES : meme ombre de repos, plus
     nette et legerement soulevee au survol - reprend et enrichit les regles
     :hover deja existantes plus haut (border-color, background), n'entre en
     conflit avec aucune d'entre elles (proprietes disjointes). --- */
  .cat-card, .source-tile, .theme-tab, .admin-modal-close,
  .bank-row, .admin-user-row {
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s ease, transform .2s ease, border-color .15s, background-color .15s;
  }
  .cat-card:hover, .source-tile:hover, .theme-tab:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }

  /* --- Superpositions (modales) : ombre nettement plus marquee, coherente
     avec leur plan au-dessus de tout le reste de l'interface. --- */
  .admin-modal { box-shadow: var(--shadow-lg); }

  /* --- En-tete partage : une ombre tres legere remplace/complete le simple
     trait actuel, pour que le contenu se lise comme "sous" l'en-tete plutot
     que juste "apres" lui. --- */
  .site-header { box-shadow: 0 1px 0 var(--border), var(--shadow-xs); }

  /* --- Etats vides : l'icone (deja une icone du pack, voir js/icons.js)
     flottait seule sur fond blanc - un cercle de couleur douce derriere lui
     donne un point focal, meme principe que .stat-card-icon-* plus haut. --- */
  .mastery-donut-empty-icon, .history-empty-icon, .reco-empty-icon {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin: 0 auto 10px;
    border-radius: 50%; background: var(--green-light); color: var(--green-dark);
  }
  .reco-empty-compact .reco-empty-icon { width: 44px; height: 44px; margin-bottom: 8px; }

  /* --- Etats de focus clavier coherents (accessibilite + finition visuelle)
     sur tous les elements interactifs generiques - certains ecrans en
     avaient deja un bespoke (ev-option), la plupart n'en avaient aucun. --- */
  .btn-primary:focus-visible, .btn-secondary:focus-visible,
  .bank-select:focus-visible, .history-search-input:focus-visible,
  .admin-users-search-input:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }

  /* ---- NOUVEAU : Défi du jour (js/defi.js) ---- */
  .defi-streak-row { display: flex; gap: var(--space-3); text-align: center; margin-bottom: var(--space-3); }
  .defi-streak-block {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg); background: var(--surface2);
    transition: transform .15s;
  }
  .defi-streak-block:hover { transform: translateY(-2px); }
  /* ---- NOUVEAU (chantier graphique, demande directe de David) : badge
     colore par chiffre, meme vocabulaire visuel que .stat-card-icon-*. ---- */
  .defi-streak-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; margin-bottom: 4px;
  }
  .defi-streak-icon-orange { background: var(--accent-orange-light); color: var(--accent-orange); }
  .defi-streak-icon-yellow { background: var(--accent-yellow-light); color: var(--accent-yellow); }
  .defi-streak-icon-green { background: var(--green-light); color: var(--green-dark); }
  .defi-streak-value { font-size: 26px; font-weight: 700; color: var(--text); }
  .defi-streak-label { font-size: 11px; color: var(--text2); }

  .defi-start-block { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
  .defi-question-pill {
    display: inline-block; padding: 6px 14px;
    border-radius: 999px; background: var(--accent-orange-light); color: var(--accent-orange);
    font-size: 13px; font-weight: 700;
  }

  .defi-done-block { text-align: center; padding: var(--space-3) 0; color: var(--green-dark); }
  .defi-done-block svg { margin-bottom: 8px; }
  .defi-done-block p { margin-bottom: 8px; color: var(--text); }
  .defi-done-block .btn-secondary { margin-top: 8px; }

  .home-welcome-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .home-welcome-text { flex: 1; min-width: 0; }

  /* ---- NOUVEAU (chantier graphique, demande directe de David) : "hero
     card" de l'accueil - fusionne l'ancien bandeau de bienvenue et
     l'ancienne carte "Defi du jour" isolee en un seul point focal (voir
     js/home.js, renderHero()). Le badge affiche la serie REELLE
     (progress.currentStreak, deja calculee par daily-challenge-service.js)
     - jamais une valeur inventee. ---- */
  .home-hero-card { display: flex; align-items: center; gap: var(--space-4); }
  .home-hero-badge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-orange-light);
  }
  .home-hero-badge-icon { color: var(--accent-orange); display: flex; }
  .home-hero-badge-icon svg { animation: home-hero-flame-pulse 2.6s ease-in-out infinite; }
  @keyframes home-hero-flame-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  @media (prefers-reduced-motion: reduce) {
    .home-hero-badge-icon svg { animation: none; }
  }
  .home-hero-badge-value { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text); }
  .home-hero-badge-label { font-size: 8px; text-transform: uppercase; letter-spacing: .02em; color: var(--accent-orange); font-weight: 700; text-align: center; }
  .home-hero-text { flex: 1; min-width: 0; }
  .home-hero-defi-status { color: var(--text2); margin: 2px 0 var(--space-2); font-size: 13px; }
  @media (max-width: 700px) {
    .home-hero-card { flex-direction: column; text-align: center; }
  }


  /* ---- NOUVEAU (mockup, demande directe de David) : "Activité récente"
     de l'accueil (js/home.js). ---- */
  .home-activity-list { display: flex; flex-direction: column; gap: var(--space-3); max-height: 320px; overflow-y: auto; }
  .home-activity-row { display: flex; align-items: center; gap: var(--space-2); }
  .home-activity-text { flex: 1; min-width: 0; }
  .home-activity-label { font-size: 13px; font-weight: 600; color: var(--text); }
  .home-activity-detail { font-size: 12px; color: var(--text2); }
  .home-activity-time { font-size: 11px; color: var(--text2); white-space: nowrap; }