/* ============================================================
   STYLE.CSS — Kadea Finance : Observatoire des devises
   Thème premium sombre (navy / bleu électrique / or) — identité visuelle
   officielle et unique du projet Kadea Finance.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --fond: #0b1220;
  --fond-degrade: radial-gradient(circle at top left, #101b33 0%, #0b1220 55%);
  --panneau: #111a2e;
  --panneau-clair: #16213a;
  --bordure: #1c2740;
  --texte: #e8edf7;
  --texte-attenue: #93a1c2;
  --bleu: #3ea6ff;
  --or: #e8b64c;
  --vert: #3ecf8e;
  --rouge: #ef5a6f;
  --violet: #b57bff;
  --rayon: 14px;
  --ombre: 0 10px 30px rgba(0, 0, 0, 0.35);
  --transition: all 0.18s ease;
}

* {
  box-sizing: border-box;
}

html, body {
  background: var(--fond-degrade) fixed;
  color: var(--texte);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  margin: 0;
  min-height: 100vh;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--fond);
}
::-webkit-scrollbar-thumb {
  background: #223154;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bleu);
}

/* ---------------- Mise en page générale ---------------- */
.conteneur-application {
  display: flex;
  min-height: 100vh;
}

.zone-contenu {
  flex: 1;
  padding: 28px 34px 48px;
  max-width: 100%;
  overflow-x: hidden;
  animation: apparition 0.35s ease;
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- Barre latérale ---------------- */
.barre-laterale {
  width: 268px;
  min-width: 268px;
  background: linear-gradient(180deg, #0d1526 0%, #0a0f1d 100%);
  border-right: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  min-height: 100vh;
}

.logo-conteneur {
  padding: 6px 10px 14px;
}

.logo-texte {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, var(--or), #f7d98a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo-sous-texte {
  font-size: 0.72rem;
  color: var(--texte-attenue);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

.separateur-barre-laterale {
  border-color: var(--bordure);
  opacity: 1;
  margin: 10px 0;
}

.nav-barre-laterale {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.lien-barre-laterale {
  color: var(--texte-attenue) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.92rem;
  font-weight: 500;
  transition: var(--transition);
}

.lien-barre-laterale:hover {
  background: rgba(62, 166, 255, 0.1) !important;
  color: var(--texte) !important;
  transform: translateX(2px);
}

.lien-barre-laterale.active {
  background: linear-gradient(90deg, rgba(62, 166, 255, 0.22), rgba(62, 166, 255, 0.02)) !important;
  color: var(--bleu) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--bleu);
}

.pied-barre-laterale {
  margin-top: auto;
  padding-top: 8px;
}

.badge-source-donnees {
  font-size: 0.78rem;
  color: var(--texte-attenue);
  padding: 6px 10px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.bouton-actualiser {
  width: 100%;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
}

.texte-confirmation {
  font-size: 0.72rem;
  color: var(--vert);
  margin-top: 6px;
  min-height: 1em;
}

.pied-signature {
  padding: 14px 10px 4px;
  border-top: 1px solid var(--bordure);
  margin-top: 12px;
}

.pied-nom {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texte);
}

.pied-mention {
  font-size: 0.72rem;
  color: var(--texte-attenue);
  margin-top: 2px;
}

/* ---------------- En-têtes de page ---------------- */
.en-tete-page {
  margin-bottom: 22px;
}

.titre-page-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.titre-page {
  font-weight: 800;
  font-size: 1.65rem;
  margin: 0;
  letter-spacing: -0.01em;
}

.badge-tp {
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 10px;
}

.sous-titre-page {
  color: var(--texte-attenue);
  margin-top: 6px;
  font-size: 0.95rem;
  max-width: 780px;
}

/* ---------------- Cartes KPI ---------------- */
.carte-kpi {
  background: linear-gradient(160deg, var(--panneau) 0%, var(--panneau-clair) 100%);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px 20px;
  height: 100%;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.carte-kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre);
  border-color: rgba(62, 166, 255, 0.35);
}

.kpi-icone {
  font-size: 1.4rem;
  margin-bottom: 8px;
  opacity: 0.9;
}

.kpi-titre {
  font-size: 0.78rem;
  color: var(--texte-attenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.kpi-valeur {
  font-size: 1.55rem;
  font-weight: 800;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

.kpi-sous-texte {
  font-size: 0.78rem;
  color: var(--texte-attenue);
  margin-top: 4px;
}

/* ---------------- Panneaux génériques ---------------- */
.panneau {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px 20px;
  height: 100%;
  transition: var(--transition);
}

.panneau:hover {
  border-color: rgba(62, 166, 255, 0.25);
}

.carte-titre-section {
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 10px;
}

/* Ligne "Source : ..." affichée sous un graphique (dev-source-classement,
   dev-source-variation, etc.) — jusqu'ici cette classe n'existait pas du
   tout dans la feuille de style, donc ce texte s'affichait sans aucune
   séparation visuelle avec ce qui suit (bloc suivant collé juste en
   dessous, effet de "chevauchement"). On lui donne ici une présentation
   de note de bas de graphique claire : espace au-dessus, fine ligne de
   séparation, typographie plus petite/atténuée/italique. */
.panneau .source {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-attenue);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.5;
}

.texte-attenue {
  color: var(--texte-attenue);
  font-size: 0.9rem;
  line-height: 1.55;
}

.texte-note-provenance {
  color: var(--texte-attenue);
  font-size: 0.78rem;
  font-style: italic;
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--bordure);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 8px 8px 0;
}

/* ---------------- Filtres ---------------- */
.etiquette-filtre {
  font-size: 0.8rem;
  color: var(--texte-attenue);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.filtre-dropdown .Select-control,
.filtre-dropdown .Select-menu-outer {
  background-color: var(--panneau-clair) !important;
}

/* Dash core-components (react-select) : rendu sombre */
.filtre-dropdown div[class*="-control"] {
  background-color: var(--panneau-clair) !important;
  border-color: var(--bordure) !important;
  border-radius: 10px !important;
}
.filtre-dropdown div[class*="-menu"] {
  background-color: var(--panneau-clair) !important;
  z-index: 20;
}
.filtre-dropdown div[class*="-option"] {
  background-color: var(--panneau-clair) !important;
  color: var(--texte) !important;
}
.filtre-dropdown div[class*="-option"]:hover {
  background-color: rgba(62, 166, 255, 0.15) !important;
}
.filtre-dropdown div[class*="-singleValue"],
.filtre-dropdown div[class*="-multiValue"] {
  color: var(--texte) !important;
  background-color: rgba(62, 166, 255, 0.15) !important;
}
.filtre-dropdown input {
  color: var(--texte) !important;
}

/* Ajouté le 15/09/2026 (convertisseur de devises) : premier champ de saisie
   numérique (dcc.Input, pas un react-select) du dashboard — même thème sombre
   que .filtre-dropdown ci-dessus, pour ne jamais reproduire le bug de fond
   blanc déjà corrigé une fois sur le sélecteur de fuseau horaire. */
.filtre-input {
  width: 100%;
  background-color: var(--panneau-clair);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  color: var(--texte);
  padding: 8px 12px;
  font-size: 0.95rem;
}
.filtre-input:focus {
  outline: none;
  border-color: var(--bleu);
}

/* Résultat du convertisseur de devises */
.conv-resultat-valeur {
  color: var(--texte);
  margin-bottom: 8px;
}

/* ---------------- Cartes de conclusion (Aide à la décision) ---------------- */
.carte-conclusion {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu);
  border-radius: var(--rayon);
  padding: 18px 20px;
  height: 100%;
  transition: var(--transition);
}

.carte-conclusion:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre);
}

.conclusion-entete {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.conclusion-titre {
  font-weight: 700;
  font-size: 1rem;
}

.conclusion-reponse {
  font-size: 0.92rem;
  color: var(--texte);
  margin-bottom: 8px;
}

.conclusion-details {
  margin: 0;
  padding-left: 18px;
  color: var(--texte-attenue);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ---------------- Messages d'état ---------------- */
.message-vide {
  color: var(--texte-attenue);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  padding: 22px;
  text-align: center;
  font-size: 0.92rem;
}

/* ---------------- Tableaux Dash (surcharges légères) ---------------- */
.dash-table-container .previous-next-container {
  color: var(--texte-attenue) !important;
}
.dash-table-container .export {
  background-color: var(--panneau-clair) !important;
  color: var(--texte) !important;
  border: 1px solid var(--bordure) !important;
  border-radius: 8px !important;
}

/* ---------------- Chargement (indicateur global Dash) ---------------- */
._dash-loading {
  color: var(--bleu);
  font-weight: 600;
  padding: 40px;
  text-align: center;
}
.dash-spinner {
  border-top-color: var(--bleu) !important;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991px) {
  .conteneur-application {
    flex-direction: column;
  }
  .barre-laterale {
    width: 100%;
    min-width: 0;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
  }
  .nav-barre-laterale {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    order: 3;
  }
  .pied-barre-laterale, .pied-signature {
    display: none;
  }
  .zone-contenu {
    padding: 20px 16px 36px;
  }
  .titre-page {
    font-size: 1.35rem;
  }
}

@media (max-width: 575px) {
  .kpi-valeur {
    font-size: 1.25rem;
  }
  .carte-kpi, .panneau, .carte-conclusion {
    padding: 14px 16px;
  }
}

/* ------------------------------------------------------------------
   Petites cartes MAE (comparaison des modèles de prévision) — page
   "Visualisations obligatoires", graphique 4. Couleur de la bordure
   gauche alignée sur la couleur de la courbe correspondante, pour
   relier visuellement carte et courbe sans avoir à se souvenir de rien.
   ------------------------------------------------------------------ */
.mae-carte {
  background: var(--panneau-clair);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu);
  border-radius: var(--rayon);
  padding: 12px 16px;
}

.mae-carte-titre {
  font-size: 0.78rem;
  color: var(--texte-attenue);
  font-weight: 600;
  margin-bottom: 4px;
}

.mae-carte-valeur {
  font-size: 1.35rem;
  font-weight: 800;
}

/* ------------------------------------------------------------------
   Encadrés pédagogiques (« Comment lire ce graphique ? », « À
   retenir ») et légende couleur par devise — réutilisés sur les pages
   à graphiques (voir dash_app/ui_helpers.encadre_explicatif /
   encadre_a_retenir / legende_devises).
   ------------------------------------------------------------------ */
.encadre-explicatif {
  background: var(--panneau-clair);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px 20px;
  margin-top: 14px;
}

.encadre-a-retenir {
  border-left: 3px solid var(--or);
}

.encadre-entete {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--texte);
  margin-bottom: 8px;
}

.encadre-entete-retenir {
  color: var(--or);
}

.encadre-paragraphe {
  font-size: 0.88rem;
  color: var(--texte-attenue);
  line-height: 1.55;
  margin: 0 0 8px;
}

.encadre-liste {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--texte-attenue);
  line-height: 1.6;
}

.encadre-liste li {
  margin-bottom: 4px;
}

.legende-devises {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--bordure);
}

.legende-devises-note {
  display: block;
  font-size: 0.76rem;
  color: var(--texte-attenue);
  margin-bottom: 8px;
}

.legende-devises-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.legende-devise-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--texte);
}

.puce-legende-devise {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}

/* ------------------------------------------------------------------
   En-tête général du dashboard — visible UNIQUEMENT sur la copie
   publiée (voir dash_app/ui_helpers.bandeau_publication_cloud), jamais
   en local. Refonte du 30/08/2026 : en-tête premium sobre et
   institutionnel (identité + statut), un avertissement discret sur la
   nature des données, et les détails techniques repliés par défaut.
   ------------------------------------------------------------------ */
.bandeau-publication-cloud {
  background: linear-gradient(100deg, #101c36 0%, #0d1730 100%);
  border-bottom: 1px solid rgba(232, 182, 76, 0.35);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  padding: 14px 28px;
}

/* --- Ligne principale : identité (gauche) + badges de statut (droite) --- */
.bandeau-entete-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.bandeau-identite {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bandeau-icone {
  font-size: 1.5rem;
  color: var(--or);
  flex-shrink: 0;
}

.bandeau-marque-textes {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.bandeau-marque {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--or);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bandeau-sous-marque {
  font-size: 0.78rem;
  color: var(--texte-attenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bandeau-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.badge-entete {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.76rem;
  color: var(--texte-attenue);
  white-space: nowrap;
}

.badge-entete-version {
  color: var(--texte);
  border-color: rgba(232, 182, 76, 0.4);
}

.point-statut-operationnel {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 6px rgba(62, 207, 142, 0.7);
  margin-right: 6px;
}

/* --- Avertissement discret sur la nature des données (plus de rouge dominant) --- */
.bandeau-avertissement-discret {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--texte-attenue);
  background: rgba(232, 182, 76, 0.08);
  border: 1px solid rgba(232, 182, 76, 0.25);
  border-radius: 8px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
}

/* --- Détails techniques repliés (Plotly Cloud, source exacte...) --- */
.bandeau-details {
  margin-top: 8px;
}

.bandeau-details-resume {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-attenue);
  opacity: 0.75;
}

.bandeau-details-contenu {
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--bordure);
  border-radius: 0 8px 8px 0;
}

.bandeau-details-ligne {
  font-size: 0.76rem;
  color: var(--texte-attenue);
  margin: 0 0 4px;
}

.bandeau-details-ligne:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .bandeau-entete-principal {
    flex-direction: column;
    align-items: flex-start;
  }
  .bandeau-badges {
    width: 100%;
  }
}

/* --- Filet de sécurité global : message d'erreur convivial (fiabilité) --- */
.conteneur-erreur-globale {
  position: sticky;
  top: 0;
  z-index: 1050;
}

.conteneur-erreur-globale .alerte-erreur-globale {
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--or);
  background: rgba(232, 182, 76, 0.14);
  color: var(--texte);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------
   Refonte professionnelle de la page d'accueil (17/09/2026) — audité
   avant modification (voir dash_app/pages/accueil.py). N'écrase aucune
   règle existante : chaque sélecteur ci-dessous est scopé à une classe
   conteneur propre à cette page (.zone-hero, .zone-market-pulse,
   .zone-etat-systeme...), donc sans effet sur .carte-kpi ou .panneau
   utilisés par les 6 autres pages du dashboard.
   ------------------------------------------------------------------ */

/* Bloc Hero USD/CDF : les cartes les plus importantes de la page, mises
   en avant par une taille de valeur plus grande et un léger relief —
   répond au "principe des 5 secondes" (comprendre l'essentiel d'un
   coup d'œil). */
.zone-hero .carte-kpi {
  padding: 24px 24px;
  border-color: rgba(232, 182, 76, 0.28);
}

.zone-hero .kpi-valeur {
  font-size: 2.15rem;
}

.zone-hero .kpi-titre {
  font-size: 0.82rem;
}

/* Panneau contenant le graphique d'évolution USD/CDF + son sélecteur
   de période. */
.zone-graphique-cdf .entete-graphique-cdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.selecteur-periode-graphique {
  min-width: 160px;
}

/* Aperçu des devises (Market Pulse) : cartes plus compactes que le
   Hero, pour rester secondaires dans la hiérarchie visuelle. */
.zone-market-pulse .carte-kpi {
  padding: 14px 16px;
}

.zone-market-pulse .kpi-valeur {
  font-size: 1.3rem;
}

/* État du système : volontairement discret (technique, pas financier)
   — cartes plus petites, texte atténué, pour ne pas concurrencer les
   indicateurs financiers au-dessus. */
.titre-section-discret {
  color: var(--texte-attenue);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.zone-etat-systeme .carte-kpi {
  padding: 10px 14px;
}

.zone-etat-systeme .kpi-icone {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.zone-etat-systeme .kpi-titre {
  font-size: 0.72rem;
}

.zone-etat-systeme .kpi-valeur {
  font-size: 1.05rem;
}

@media (max-width: 575px) {
  /* Sur mobile, le Hero doit rester visiblement prioritaire malgré la
     règle générale qui réduit .kpi-valeur à 1.25rem (voir plus haut) —
     point 25 de l'audit du 17/09/2026 (comportement mobile). */
  .zone-hero .kpi-valeur {
    font-size: 1.7rem;
  }
  .zone-graphique-cdf .entete-graphique-cdf {
    flex-direction: column;
    align-items: flex-start;
  }
  .selecteur-periode-graphique {
    width: 100%;
  }
}

/* Ajouté le 19/09/2026 (section « Historique des prévisions »,
   dash_app/pages/previsions_modele.py) : simple séparateur visuel discret
   entre le panneau existant (inchangé) et la nouvelle section additive,
   cohérent avec la palette sombre du dashboard plutôt que le trait par
   défaut du navigateur. */
.separateur-section {
  border: none;
  border-top: 1px solid #1c2740;
  margin: 32px 0 24px;
}