/* ============================================================
   THEME — SOURCE DE VÉRITÉ UNIQUE DES COULEURS
   ============================================================
   Toutes les couleurs de l'application sont définies ICI.
   Aucun autre fichier ne doit contenir de code hexadécimal.

   Pour changer l'identité visuelle : modifier UNIQUEMENT le
   bloc « PALETTE DE MARQUE » ci-dessous. Tout le reste suit.

   Chargé en premier par partials/head.php.
   ============================================================ */

:root {
  /* ---------- PALETTE DE MARQUE ----------
     Le seul bloc à modifier pour rhabiller l'application. */
  --oneci-green:  #25D366;
  --oneci-orange: #FF8D00;

  --brand-50:  #E8FBEF;
  --brand-100: #C6F5D8;
  --brand-200: #91E9B3;
  --brand-300: #5DDA8D;
  --brand-400: #3ACD72;
  --brand-500: var(--oneci-green);
  --brand-600: #12A852;
  --brand-700: #0A6B35;
  --brand-800: #084F27;
  --brand-900: #05341A;

  --accent-50:  #FFF4E6;
  --accent-100: #FFE3BD;
  --accent-200: #FFC97A;
  --accent-300: #FFAD3D;
  --accent-400: #FF991A;
  --accent-500: var(--oneci-orange);
  --accent-600: #F07D00;
  --accent-700: #C6650A;
  --accent-800: #7A4300;
  --accent-900: #4C2A00;

  /* Aplats des modules, distincts du vert et de l'orange ONECI.
     Chaque ton a une variante « soft » (fond clair transparent, dans
     l'esprit du badge vert historique --brand-soft) utilisee par les
     cartes point-du-jour : fond pastel, icone et texte dans la teinte
     pleine, bordure teintee. */
  --module-indigo:        #5B4DFF;
  --module-indigo-soft:   #5B4DFF1F;
  --module-blue:          #0EA5E9;
  --module-blue-soft:     #0EA5E91F;
  --module-berry:         #F43F79;
  --module-berry-soft:    #F43F791F;
  --module-teal:          #06B6D4;
  --module-teal-soft:     #06B6D41F;
  --module-purple:        #A855F7;
  --module-purple-soft:   #A855F71F;
  --module-steel:         #3B6FA0;
  --module-steel-soft:    #3B6FA01F;
  --module-earth:         #F4511E;
  --module-earth-soft:    #F4511E1F;
  --module-slate:         #34495E;
  --module-slate-soft:    #34495E1F;

  /* 30 tons supplementaires pour les scenarios personnalises. */
  --module-corail:        #FF6B5B;
  --module-corail-soft:   #FF6B5B1F;
  --module-citron:        #FACC15;
  --module-citron-soft:   #FACC151F;
  --module-emeraude:      #10B981;
  --module-emeraude-soft: #10B9811F;
  --module-cyan:          #22D3EE;
  --module-cyan-soft:     #22D3EE1F;
  --module-saphir:        #2563EB;
  --module-saphir-soft:   #2563EB1F;
  --module-lavande:       #8B5CF6;
  --module-lavande-soft:  #8B5CF61F;
  --module-rose:          #EC4899;
  --module-rose-soft:     #EC48991F;
  --module-rouille:       #C2410C;
  --module-rouille-soft:  #C2410C1F;
  --module-olive:         #65A30D;
  --module-olive-soft:    #65A30D1F;
  --module-menthe:        #34D399;
  --module-menthe-soft:   #34D3991F;
  --module-turquoise:     #14B8A6;
  --module-turquoise-soft: #14B8A61F;
  --module-cobalt:        #1D4ED8;
  --module-cobalt-soft:   #1D4ED81F;
  --module-prune:         #7C3AED;
  --module-prune-soft:    #7C3AED1F;
  --module-magenta:       #D946EF;
  --module-magenta-soft:  #D946EF1F;
  --module-cerise:        #E11D48;
  --module-cerise-soft:   #E11D481F;
  --module-ambre:         #F59E0B;
  --module-ambre-soft:    #F59E0B1F;
  --module-moutarde:      #D4A017;
  --module-moutarde-soft: #D4A0171F;
  --module-kaki:          #808000;
  --module-kaki-soft:     #8080001F;
  --module-jade:          #00A86B;
  --module-jade-soft:     #00A86B1F;
  --module-azur:          #007FFF;
  --module-azur-soft:     #007FFF1F;
  --module-marine:        #1E3A8A;
  --module-marine-soft:   #1E3A8A1F;
  --module-lilas:         #C084FC;
  --module-lilas-soft:    #C084FC1F;
  --module-fuchsia:       #C026D3;
  --module-fuchsia-soft:  #C026D31F;
  --module-grenat:        #7F1D1D;
  --module-grenat-soft:   #7F1D1D1F;
  --module-bronze:        #CD7F32;
  --module-bronze-soft:   #CD7F321F;
  --module-cuivre:        #B87333;
  --module-cuivre-soft:   #B873331F;
  --module-sable:         #C2B280;
  --module-sable-soft:    #C2B2801F;
  --module-perle:         #A9A9A9;
  --module-perle-soft:    #A9A9A91F;
  --module-graphite:      #4B5563;
  --module-graphite-soft: #4B55631F;
  --module-anthracite:    #2E2E2E;
  --module-anthracite-soft: #2E2E2E1F;

  --module-on:        #FFFFFF;
  --module-icon-bg:   rgba(255, 255, 255, .17);
  --module-border:    rgba(255, 255, 255, .32);
  --module-shadow:    0 8px 22px rgba(23, 22, 30, .14);
  --module-shadow-up: 0 14px 32px rgba(23, 22, 30, .22);
  --module-focus-edge: #17161E;

  /* ---------- NEUTRES ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FDFDFD;
  --neutral-50:  #FCFCFC;
  --neutral-100: #F5F4F9;
  --neutral-150: #F3F2F7;
  --neutral-200: #ECEAF3;
  --neutral-300: #D0D6DE;
  --neutral-400: #B9BBBD;
  --neutral-500: #A3A3A3;
  --neutral-600: #6E6A7C;
  --neutral-700: #464255;
  --neutral-800: #3B3741;
  --neutral-900: #17161E;

  /* ---------- STATUTS ---------- */
  --success-500: #00A389;
  --warning-500: #FFD942;
  --danger-500:  #FF5B5B;
  --danger-700:  #D10000;   /* rouge soutenu : alertes urgentes */
  --info-500:    #58CDFF;

  /* Texte à poser SUR un aplat de statut (contraste garanti). */
  --on-brand:   #FFFFFF;
  --on-accent:  #17161E;
  --on-success: #FFFFFF;
  --on-warning: #4A3B00;   /* le jaune exige un texte foncé */
  --on-danger:  #FFFFFF;
  --on-info:    #0B3A4D;

  /* Aplats translucides (fonds de badges, survols). */
  --brand-soft:   #25D36626;
  --accent-soft:  #FF8D0026;
  --success-soft: #00A38926;
  --warning-soft: #FFD94226;
  --danger-soft:  #FF5B5B26;
  --info-soft:    #58CDFF26;
  --dark-soft:    #17161E26;

  /* ---------- RÔLES SÉMANTIQUES ----------
     Ce que le reste du CSS doit utiliser au quotidien. */
  --bg-page:      var(--neutral-150);
  --bg-surface:   var(--neutral-0);
  --bg-raised:    var(--neutral-25);
  --bg-sidebar:   var(--neutral-50);
  --bg-subtle:    var(--neutral-100);

  --text-strong:  var(--neutral-900);
  --text-default: var(--neutral-700);
  --text-muted:   var(--neutral-500);
  --text-invert:  var(--neutral-0);
  --text-link:    var(--brand-600);

  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--brand-500);

  /* Bandeau d'alerte défilant (« Flash Info »). */
  --banner-alert-bg:   var(--danger-700);
  --banner-alert-text: var(--neutral-0);

  /* En-têtes de tableaux : fond clair, texte foncé, lisible. */
  --table-head-bg:    var(--brand-50);
  --table-head-text:  var(--brand-800);
  --table-stripe:     var(--neutral-25);
  --table-hover:      var(--brand-50);
  --table-border:     var(--neutral-200);

  /* Ombres — teintées avec le neutre de la marque. */
  --shadow-sm: 0 3px 10px rgba(70, 66, 85, .05);
  --shadow-md: 0 8px 24px rgba(70, 66, 85, .07);
  --shadow-lg: 0 20px 56px rgba(70, 66, 85, .18);
  --shadow-sidebar: 8px 0 28px rgba(70, 66, 85, .09);

  --focus-ring: 0 0 0 3px rgba(0, 146, 37, .24);
}

/* ============================================================
   MODE SOMBRE
   Seuls les rôles sémantiques sont réassignés : la palette de
   marque reste identique, donc rien d'autre n'est à maintenir.
   ============================================================ */
html[data-theme="dark"] {
  --bg-page:    #101914;
  --bg-surface: #19261F;
  --bg-raised:  #1D2C24;
  --bg-sidebar: #16211B;
  --bg-subtle:  #25372F;

  --text-strong:  #F4FAF7;
  --text-default: #EDF4F0;
  --text-muted:   #AEBCB5;
  --text-invert:  #101914;
  --text-link:    var(--brand-300);

  --border-default: #30443B;
  --border-strong:  #3D544A;

  --table-head-bg:   #25372F;
  --table-head-text: #DCE8E2;
  --table-stripe:    #1D2C24;
  --table-hover:     #22332A;
  --table-border:    #30443B;

  --shadow-sm: 0 3px 10px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .55);
  --shadow-sidebar: 8px 0 28px rgba(0, 0, 0, .45);
}

/* ============================================================
   COMPATIBILITÉ — anciens noms de variables du thème d'origine.
   Conservés pour ne rien casser, mais ils ne portent plus de
   valeur propre : ils pointent vers la palette ci-dessus.
   ============================================================ */
:root {
  --primary-color:     var(--brand-500);
  --secondary-color:   var(--accent-500);
  --accent-color:      var(--accent-500);
  --dark-color:        var(--neutral-900);
  --body-color:        var(--text-default);
  --desc-color:        var(--neutral-800);
  --sec-color:         var(--text-muted);
  --gray-color:        var(--neutral-200);
  --grayTwo-color:     var(--neutral-300);
  --grayThree-color:   var(--neutral-400);
  --section-color:     var(--neutral-150);
  --sectionTwo-color:  var(--neutral-100);
  --sectionThree-color: var(--neutral-50);
  --light-color:       var(--neutral-25);
  --white-color:       var(--neutral-0);
  --success-color:     var(--success-500);
  --warning-color:     var(--warning-500);
  --danger-color:      var(--danger-500);
  --info-color:        var(--info-500);
  --gold-color:        var(--warning-500);
  --pink-color:        #FF68B5;
  --tertiary-color:    #EF9A91;
  --quatinery-color:   #F1E6B9;

  /* --title-color etait utilisee par style.css sans jamais avoir ete
     definie : les titres concernes heritaient d'une couleur au hasard. */
  --title-color:       var(--text-strong);

  /* Police historique du theme, referencee par style.css. */
  --poppins: 'Poppins', sans-serif;

  --dark-color-transparent:    var(--dark-soft);
  --primary-color-transparent: var(--brand-soft);
  --success-color-transparent: var(--success-soft);
  --warning-color-transparent: var(--warning-soft);
  --info-color-transparent:    var(--info-soft);
  --danger-color-transparent:  var(--danger-soft);
}

/* Alias de la couche « professional-ui » vers la même palette. */
:root {
  --ui-brand:      var(--brand-500);
  --ui-brand-dark: var(--brand-600);
  --ui-brand-soft: var(--brand-soft);
  --ui-accent:     var(--accent-500);
  --ui-warning:    var(--warning-500);
  --ui-info:       var(--info-500);
  --ui-text:       var(--text-default);
  --ui-muted:      var(--text-muted);
  --ui-border:     var(--border-default);
  --ui-bg:         var(--bg-page);
  --ui-surface:    var(--bg-surface);
  --ui-sidebar:    var(--bg-sidebar);
  --ui-shadow:     var(--shadow-md);
}

/* ============================================================
   UTILITAIRES BOOTSTRAP RECOLORÉS
   Bootstrap impose ses propres bleus/verts : on les rattache à
   la palette pour que .bg-primary & co suivent la marque.
   ============================================================ */
.bg-primary   { background-color: var(--brand-600) !important; color: var(--on-brand) !important; }
.bg-secondary { background-color: var(--accent-500) !important; color: var(--on-accent) !important; }
.bg-success   { background-color: var(--success-500) !important; color: var(--on-success) !important; }
.bg-warning   { background-color: var(--warning-500) !important; color: var(--on-warning) !important; }
.bg-danger    { background-color: var(--danger-500) !important; color: var(--on-danger) !important; }
.bg-info      { background-color: var(--info-500) !important; color: var(--on-info) !important; }
.bg-light     { background-color: var(--bg-subtle) !important; color: var(--text-default) !important; }
.bg-dark      { background-color: var(--neutral-900) !important; color: var(--text-invert) !important; }

.text-primary { color: var(--brand-600) !important; }
.text-success { color: var(--success-500) !important; }
.text-warning { color: #9A7B00 !important; }
.text-danger  { color: var(--danger-500) !important; }
.text-info    { color: #1B7FA8 !important; }
.text-muted   { color: var(--text-muted) !important; }

/* ------------------------------------------------------------
   EN-TÊTES DE TABLEAUX SUR APLAT DE COULEUR

   Les pages écrivent <tr class="bg-primary"><th>…</th></tr>.
   L'habillage général donne aux <th> un fond clair et un texte
   foncé ; sur un aplat de couleur ce texte deviendrait illisible.
   Ces sélecteurs sont volontairement plus spécifiques que
   « .table thead th » pour reprendre la main sur les deux
   propriétés à la fois — fond ET texte restent cohérents.
   ------------------------------------------------------------ */
.table thead tr.bg-primary th, .table tr.bg-primary th, tr.bg-primary th,
.table thead tr.bg-secondary th, .table tr.bg-secondary th, tr.bg-secondary th,
.table thead tr.bg-success th, .table tr.bg-success th, tr.bg-success th,
.table thead tr.bg-danger th, .table tr.bg-danger th, tr.bg-danger th {
  color: var(--on-brand) !important;
  background-color: transparent;
}
.table thead tr.bg-primary th, .table tr.bg-primary th, tr.bg-primary th { background-color: var(--brand-600) !important; }
.table thead tr.bg-secondary th, .table tr.bg-secondary th, tr.bg-secondary th { background-color: var(--accent-500) !important; }
.table thead tr.bg-success th, .table tr.bg-success th, tr.bg-success th { background-color: var(--success-500) !important; }
.table thead tr.bg-danger th, .table tr.bg-danger th, tr.bg-danger th { background-color: var(--danger-500) !important; }

.table thead tr.bg-warning th, .table tr.bg-warning th, tr.bg-warning th {
  color: var(--on-warning) !important;
  background-color: var(--warning-500) !important;
}
.table thead tr.bg-info th, .table tr.bg-info th, tr.bg-info th {
  color: var(--on-info) !important;
  background-color: var(--info-500) !important;
}
.table thead tr.bg-secondary th, .table tr.bg-secondary th, tr.bg-secondary th {
  color: var(--on-accent) !important;
}

/* Nom de l'auteur d'un message dans le forum. */
.author-name { color: var(--brand-600); font-weight: 700; font-style: normal; }

/* Hors tableau, un aplat colore aussi le texte qu'il contient. */
.bg-primary { color: var(--on-brand); }
.bg-secondary { color: var(--on-accent); }
.bg-success { color: var(--on-success); }
.bg-danger { color: var(--on-danger); }
.bg-warning { color: var(--on-warning); }
.bg-info { color: var(--on-info); }