/* style/theme.css */

/* === POLICES LOCALES === */
@font-face {
    font-family: 'Marianne';
    src: url('../assets/fonts/Marianne-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  /* ================================================ */
  /* === VARIABLES CSS GLOBALES                   === */
  /* ================================================ */
  :root {
      /*Police*/
      --font-main: 'Marianne', sans-serif;
      
      /* Couleurs principales */
      --color-primary-dark: #005f99;       /* Bleu foncé */
      --color-primary-light: #0077b6;      /* Bleu clair */
      --color-background: #f8f9fa;      /* Blanc cassé */
      --color-border: #e9ecef;          /* Gris clair */
      --color-accent: #ff8c42;          /* Orange doux */
  
      /* Couleurs Texte */
      --color-text: #212529;            /* Texte principal */
      --color-text-muted: #6c757d;      /* Texte secondaire */
      --color-text-on-dark: #f8f9fa;     /* Texte sur fonds très sombres (ex: sidebar) */
      --color-text-on-primary: #ffffff;  /* Texte sur fonds primaires (ex: boutons) */
  
      /* Couleurs Sémantiques (Fonds) */
      --color-success-bg: #e6f7ec;      /* Fond succès pâle */
      --color-danger-bg: #fdecea;       /* Fond danger pâle */
      --color-info-bg: #e7f5ff;         /* Fond info pâle */
      --color-grey-note: #f1f3f5;       /* Fond note grisée */
      --color-tile-background: #ffffff; /* Fond des tuiles/cartes par défaut */
  
      /* Couleurs Sémantiques (Texte/Bordure Vifs) */
      --color-success: #28a745;          /* Vert */
      --color-danger: #dc3545;           /* Rouge */
      --color-info: #17a2b8;            /* Bleu/Cyan */
  
      /* Versions RGB pour transparence (rgba) */
      --color-success-rgb: 40, 167, 69;
      --color-danger-rgb: 220, 53, 69;
      --color-info-rgb: 23, 162, 184;
  
      /* Typographie */
      --font-main: 'Marianne', sans-serif; /* Police principale */
  
      /* Dimensions Layout */
      --sidebar-width: 250px;           /* Largeur barre latérale */
      --privacy-notice-height: 40px;       /* Hauteur bandeau RGPD */
  }
  
  
  /* Encarts d'information (style général) */
  .info-note {
    margin-top: 1em;
    font-size: 0.9em;
    padding: 0.6em 0.8em;
    border-left: 4px solid var(--color-info);
    border-radius: 4px;
    background-color: var(--color-info-bg);
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
  }
  
  .info-note i {
    color: var(--color-info);
    margin-top: 0.1em;
  }
  
  
  /* Encarts d'information (style général) */
  .info-rgpd {
    margin-top: 1em;
    font-size: 0.9em;
    padding: 0.6em 0.8em;
    border-left: 4px solid var(--color-info);
    border-radius: 4px;
    background-color: var(--color-info-bg);
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
  }
  
  .info-rgpd i {
    color: var(--color-info);
    margin-top: 0.1em;
  }
  
  /* ================================================ */
  /* === STYLES DE BASE HTML & BODY               === */
  /* ================================================ */
  *, *:before, *:after {
      box-sizing: border-box;
  }
  
  html {
      box-sizing: border-box;
      font-size: 16px; /* Taille de base */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  body {
      font-family: 'Marianne', sans-serif;
      color: var(--color-text);
      background-color: var(--color-background);
      margin: 0;
      padding: 0;
      line-height: 1.5; /* Interligne par défaut */
      /* display: flex et min-height sont gérés dans main.css pour le layout */
      /* padding-bottom pour RGPD banner est géré dans main.css si besoin */
  }
  
  /* ================================================ */
  /* === THEME SOMBRE                             === */
  /* ================================================ */
  
  body[data-theme="dark"] {
      /* --- Redéfinition des Variables pour le Thème Sombre --- */
      --color-primary-dark: #1e88e5;       /* Bleu un peu plus vif */
      --color-primary-light: #64b5f6;      /* Bleu clair */
      --color-background: #121212;      /* Fond très sombre */
      --color-border: #424242;          /* Gris foncé pour les bordures */
      --color-accent: #ffa726;          /* Orange (peut nécessiter ajustement) */
      --color-text: #e0e0e0;            /* Texte gris clair (presque blanc) */
      --color-text-muted: #9e9e9e;      /* Texte secondaire gris un peu plus clair */
      --color-text-on-dark: #e0e0e0;     /* Texte sur sidebar/fonds sombres */
      --color-text-on-primary: #ffffff;  /* Texte sur boutons/etc. */
  
      --color-success-bg: #1c3a27;      /* Fond succès très sombre */
      --color-danger-bg: #3e1c1f;       /* Fond danger très sombre */
      --color-info-bg: #1a3a4a;         /* Fond info très sombre */
      --color-grey-note: #212121;       /* Fond note un peu moins sombre */
      --color-tile-background: #1e1e1e; /* Fond des tuiles/cartes sombre */
  
      --color-success: #66bb6a;         /* Vert plus clair */
      --color-danger: #ef5350;          /* Rouge plus clair */
      --color-info: #42a5f5;           /* Bleu info plus clair */
  
      --color-success-rgb: 102, 187, 106;
      --color-danger-rgb: 239, 83, 80;
      --color-info-rgb: 66, 165, 245;
  }
  
  /* --- Styles Spécifiques appliquant les Variables Sombres --- */
  
  /* Fond global et texte global */
  body[data-theme="dark"] {
      background-color: var(--color-background);
      color: var(--color-text);
  }
  
  /* Fond des éléments principaux (tuiles, conteneurs de tableau/graphiques, etc.) */
  body[data-theme="dark"] .tile,
  body[data-theme="dark"] .stat-tile,
  body[data-theme="dark"] .chart-container,
  body[data-theme="dark"] .competency-tiles-container,
  body[data-theme="dark"] .table-container,
  body[data-theme="dark"] .collapsible-content, /* Fond des filtres dépliés */
  body[data-theme="dark"] .pagination-controls select,
  body[data-theme="dark"] .resource-tile /* Tuiles ressources */ {
      background-color: var(--color-tile-background);
      border-color: var(--color-border);
  }
  
  /* Texte sur ces fonds sombres (Titres H3, valeurs stats, etc.) */
  body[data-theme="dark"] .tile h3,
  body[data-theme="dark"] .stat-value,
  body[data-theme="dark"] .chart-container h3,
  body[data-theme="dark"] .competency-tiles-container h3,
  body[data-theme="dark"] .filter-group-label,
  body[data-theme="dark"] .filter-checkbox-item label,
  body[data-theme="dark"] .class-filter-fieldset legend,
  body[data-theme="dark"] .population-title,
  body[data-theme="dark"] .resource-tile h4 {
      color: var(--color-text);
  }
  /* Styles spécifiques titres H2 de section et tableau */
  body[data-theme="dark"] .content-section h2 { color: var(--color-primary-light); }
  body[data-theme="dark"] .results-table th { color: var(--color-text); } /* Texte en-tête tableau */
  body[data-theme="dark"] .results-table td { color: var(--color-text); } /* Texte cellules tableau */
  
  /* Texte "muted" sur fonds sombres */
  body[data-theme="dark"] .tile p,
  body[data-theme="dark"] .stat-label,
  body[data-theme="dark"] .drop-zone p,
  body[data-theme="dark"] .import-timestamp,
  body[data-theme="dark"] .file-list-area em,
  body[data-theme="dark"] .info-note p,
  body[data-theme="dark"] .count-indicator,
  body[data-theme="dark"] .pagination-controls,
  body[data-theme="dark"] .population-subtitle,
  body[data-theme="dark"] .filter-placeholder,
  body[data-theme="dark"] .import-time,
  body[data-theme="dark"] .resource-tile p {
      color: var(--color-text-muted);
  }
  
  /* Sidebar */
  body[data-theme="dark"] .sidebar {
      background-color: #1f1f1f; /* Fond sidebar légèrement différent */
      color: var(--color-text-on-dark);
      border-right: 1px solid var(--color-border);
  }
  body[data-theme="dark"] .sidebar .app-title { color: var(--color-text-on-dark); }
  body[data-theme="dark"] .sidebar .main-nav .nav-link { color: var(--color-text-on-dark); }
  body[data-theme="dark"] .main-nav .nav-link:hover,
  body[data-theme="dark"] .main-nav .nav-link.active {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff;
  }
  body[data-theme="dark"] .sidebar-footer { color: var(--color-text-muted); border-top-color: var(--color-border);}
  body[data-theme="dark"] .sidebar-footer strong { color: var(--color-text); }
  body[data-theme="dark"] .sidebar-footer .footer-contact-link { color: var(--color-text-muted); }
  body[data-theme="dark"] .sidebar-footer .footer-contact-link:hover { color: var(--color-primary-light); background-color: rgba(0, 0, 0, 0.15); }
  
  /* Tableau Résultats */
  body[data-theme="dark"] .results-table thead th {
      background-color: #2a2a2a;
      border-color: var(--color-border);
  }
  body[data-theme="dark"] .results-table thead th:hover {
      background-color: #3a3a3a; /* Un gris un peu plus clair que le fond #2a2a2a */
  }
  body[data-theme="dark"] .results-table td { border-color: var(--color-border); }
  body[data-theme="dark"] .results-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); }
  /* Conserver les fonds de ligne ou pas ? Par défaut, on les garde mais adaptés */
  body[data-theme="dark"] .results-table tbody tr.status-validee { background-color: var(--color-success-bg); }
  body[data-theme="dark"] .results-table tbody tr.status-rejetee { background-color: var(--color-danger-bg); }
  body[data-theme="dark"] .results-table tbody tr.status-non-presentee { background-color: var(--color-info-bg); }
  /* Styles badges sombres */
  body[data-theme="dark"] .status-badge { border-color: rgba(255, 255, 255, 0.2); }
  body[data-theme="dark"] .status-validee { background-color: var(--color-success); color: var(--color-text-on-primary); }
  body[data-theme="dark"] .status-rejetee { background-color: var(--color-danger); color: var(--color-text-on-primary); }
  body[data-theme="dark"] .status-non-presentee { background-color: var(--color-info); color: var(--color-text-on-primary); }
  body[data-theme="dark"] .status-na { background-color: #5a6268; color: var(--color-text); }
  
  
  /* Drop Zones */
  body[data-theme="dark"] .drop-zone,
  body[data-theme="dark"] .file-drop-zone {
      background-color: var(--color-tile-background);
      border-color: var(--color-border);
  }
  body[data-theme="dark"] .drop-zone:hover,
  body[data-theme="dark"] .drop-zone.dragover,
  body[data-theme="dark"] .file-drop-zone:hover,
  body[data-theme="dark"] .file-drop-zone.dragover {
      background-color: rgba(var(--color-info-rgb), 0.15);
      border-color: var(--color-primary-light);
  }
  body[data-theme="dark"] .file-input-label { color: var(--color-primary-light); }
  
  /* Filtres */
  body[data-theme="dark"] .class-filter-fieldset { border-color: var(--color-border); }
  body[data-theme="dark"] .filter-checkbox-item input[type="checkbox"] {
      accent-color: var(--color-primary-light);
      background-color: #555; /* Fond case à cocher */
      border: 1px solid var(--color-border);
      border-radius: 2px;
  }
  body[data-theme="dark"] .btn-filter-all,
  body[data-theme="dark"] .btn-filter-none {
      background-color: var(--color-tile-background);
      color: var(--color-text-muted);
      border-color: var(--color-border);
  }
  body[data-theme="dark"] .btn-filter-all:hover { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
  body[data-theme="dark"] .btn-filter-none:hover { background-color: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
  
  /* Inputs et Selects */
  body[data-theme="dark"] input[type="text"],
  body[data-theme="dark"] input[type="search"],
  body[data-theme="dark"] input[type="number"],
  body[data-theme="dark"] select {
      background-color: #333;
      color: var(--color-text);
      border: 1px solid var(--color-border);
      border-radius: 4px;
  }
  body[data-theme="dark"] input[type="text"]:focus,
  body[data-theme="dark"] input[type="search"]:focus,
  body[data-theme="dark"] input[type="number"]:focus,
  body[data-theme="dark"] select:focus {
       border-color: var(--color-primary-light);
       box-shadow: 0 0 0 2px rgba(var(--color-primary-light-rgb, 100, 181, 246), 0.2); /* Ajouter variable RGB si besoin */
       outline: none;
  }
  body[data-theme="dark"] ::placeholder { color: var(--color-text-muted); opacity: 0.7; }
  
  /* Boutons */
  body[data-theme="dark"] .button-secondary, /* Style de base pour les boutons secondaires */
  body[data-theme="dark"] .btn-toggle-filters { /* Bouton filtre */
      background-color: #333;
      color: var(--color-text);
      border-color: var(--color-border);
  }
  body[data-theme="dark"] .button-secondary:hover,
  body[data-theme="dark"] .btn-toggle-filters:not(:disabled):hover {
      background-color: #444;
      border-color: #555;
  }
  /* Boutons d'action principaux (Import, Export) */
  body[data-theme="dark"] .btn-import { /* Utilise --color-primary-light */ }
  body[data-theme="dark"] .btn-export { /* Style bouton export gris */
      background-color: #5a6268;
      color: var(--color-text);
      border: 1px solid #444;
  }
   body[data-theme="dark"] .btn-export:hover { background-color: #6c757d; }
   body[data-theme="dark"] .btn-export:disabled { background-color: #495057; opacity: 0.6; }
  
  /* Bandeau RGPD */
  body[data-theme="dark"] .privacy-notice {
      background-color: #212121;
      color: var(--color-text-muted);
      border-top-color: var(--color-border);
  }
  body[data-theme="dark"] .privacy-notice i { color: var(--color-primary-light); }
  
  /* Compétences (texte seulement car fond déjà coloré) */
  body[data-theme="dark"] .competency-tile { color: #fff; }
  body[data-theme="dark"] .competency-average { color: #fff; }
  
  /* Onglets Aide */
  body[data-theme="dark"] .aide-tab-button { color: var(--color-text-muted); }
  body[data-theme="dark"] .aide-tab-button:hover { background-color: #2a2a2a; color: var(--color-text); }
  body[data-theme="dark"] .aide-tab-button.active {
      background-color: var(--color-tile-background);
      color: var(--color-primary-light);
      border-color: var(--color-border);
      border-bottom-color: var(--color-tile-background);
  }
  body[data-theme="dark"] .aide-tabs { border-bottom-color: var(--color-border); }
  
  body[data-theme="dark"] .file-list-area {
      background-color: #2a2a2a;
      border-color: var(--color-border);
  }
  
  /* Assurer que le titre "Fichier(s)..." est lisible */
  body[data-theme="dark"] .file-list-area p strong {
      color: var(--color-text);
  }
  
  /* Fond sombre pour la liste UL elle-même */
  body[data-theme="dark"] .file-list-area ul {
      background-color: #333; 
      border-color: #555; 
  }
  
  /* Texte et séparateur des éléments LI */
  body[data-theme="dark"] .file-list-area ul li {
      color: var(--color-text); 
      border-bottom-color: #444; 
  }
  
  /* Styles pour les détails dans le LI (nom, icône, compte) */
  body[data-theme="dark"] .file-list-name {
       color: var(--color-text);
  }
  body[data-theme="dark"] .file-list-name i {
       color: var(--color-text-muted);
  }
  body[data-theme="dark"] .file-list-count {
       color: var(--color-primary-light); /* Compte en couleur thème */
  }
  
  /* Texte en italique "Dernier fichier..." */
  body[data-theme="dark"] .file-list-area em {
      color: var(--color-text-muted);
  }