/* rcu_macro — dashboard. Tokens du design system GD uniquement
   (colors_and_type.css) : jamais de couleur en dur hors palette pôles,
   qui vit dans poles.yaml et arrive par l'API. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-elevated); }

/* --- en-tête ---------------------------------------------------------- */
.entete { background: var(--gd-navy-800); }
.entete__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--s-3) var(--container-gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.entete__marque {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--fg-inverse); font-size: var(--fs-h4); text-decoration: none;
}
.entete__marque:hover { color: var(--fg-inverse); text-decoration: none; }
.entete__logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gd-white); border-radius: var(--radius-sm);
  padding: 2px 8px; height: 34px;
}
.entete__logo { max-height: 28px; max-width: 110px; object-fit: contain; }
.entete__nav { display: flex; align-items: center; gap: var(--s-4); }
.entete__lien {
  color: var(--fg-inverse-muted); font-size: var(--fs-small); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.entete__lien:hover { color: var(--fg-inverse); text-decoration: none; }
.entete__lien--actif { color: var(--fg-inverse); border-bottom-color: var(--gd-yellow-400); }
.entete__user { color: var(--fg-inverse-muted); font-size: var(--fs-small); }
.entete__logout { color: var(--gd-yellow-400); font-size: var(--fs-small); }

main { max-width: var(--container-max); margin: 0 auto; padding: var(--s-5) var(--container-gutter) var(--s-8); }

/* --- login ------------------------------------------------------------ */
.login-page { display: grid; place-items: center; min-height: 70vh; }
.login-carte {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--s-7); max-width: 26rem; text-align: center;
}
.bouton-sso {
  display: inline-block; margin-top: var(--s-5); padding: var(--s-3) var(--s-6);
  background: var(--gd-navy-800); color: var(--fg-inverse); border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
}
.bouton-sso:hover { background: var(--gd-navy-700); color: var(--fg-inverse); text-decoration: none; }
.login-note { margin-top: var(--s-4); font-size: var(--fs-micro); color: var(--fg-muted); }
.login-logo { max-height: 56px; max-width: 220px; object-fit: contain; margin-bottom: var(--s-4); }

/* --- badge filiale fixe (gauche) ---------------------------------------- */
.filiale-badge {
  position: fixed; left: var(--s-4); top: 40%; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--s-3); width: 9rem;
}
/* display:flex écraserait le display:none de l'attribut hidden — rétabli ici */
.filiale-badge[hidden], .filtres__logo[hidden] { display: none; }
.filiale-badge img { max-width: 100%; max-height: 72px; object-fit: contain; }
.filiale-badge span {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--fg);
  text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
}
/* Écran trop étroit : le badge chevaucherait le contenu (1280px + 2 marges) */
@media (max-width: 1620px) { .filiale-badge { display: none; } }
.messages { margin-bottom: var(--s-4); }
.message--error {
  background: #FDECEA; border: 1px solid #F5C6C0; color: #8A1A0F;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
}

/* --- structure dashboard ---------------------------------------------- */
.dash__tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.dash__snapshot { color: var(--fg-muted); font-size: var(--fs-small); margin: 0; }
.dash__snapshot-note { display: block; font-size: var(--fs-micro); }

.filtres {
  display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
  position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm);
}
.filtres label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); color: var(--fg-muted);
}
/* `display: flex` ci-dessus écrase l'attribut `hidden` (filtre point de vente,
   masqué hors de la vue CRM) : le rétablir explicitement. */
.filtres label[hidden] { display: none; }
.filtres select {
  font: inherit; color: var(--fg); padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--bg);
}
.filtres__note { font-size: var(--fs-micro); color: var(--fg-muted); font-style: italic; }
.filtres__etat { font-size: var(--fs-micro); color: var(--fg-muted); margin-left: auto; }
.filtres__logo { max-height: 34px; max-width: 96px; object-fit: contain; }

.section { margin-bottom: var(--s-7); }
.section h3 { margin-bottom: var(--s-4); }
.section__periode {
  font-size: var(--fs-micro); font-weight: var(--fw-regular); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-overline); margin-left: var(--s-2);
}

/* Sous-titre de bloc de tuiles : hiérarchie sous le h3 de section, sans
   concurrencer les chiffres — même encre récessive que les libellés de tuile. */
.sous-titre {
  margin: 0 0 var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-overline);
  color: var(--fg-subtle);
}
.sous-titre[hidden] { display: none; }
/* Un sous-titre qui suit une carte doit respirer : .carte-graph a margin:0 (figure
   dénudée) et .sous-titre aucune marge haute, donc « Sources » collait au
   graphique Clients/prospects qui le précède. Les grilles, elles, ont déjà leur
   marge basse — et des marges de frères adjacents fusionnent, donc pas de
   double espace là où les deux règles se rencontrent. */
.carte-graph + .sous-titre { margin-top: var(--s-6); }

/* --- tuiles (pattern gdlivraisons) ------------------------------------- */
/* 6 colonnes sur grand écran (auto-fill : les tracks vides restent, donc un
   bloc de 3 tuiles garde la largeur d'un bloc de 6). Tuiles resserrées pour
   qu'un sous-bloc tienne sur UNE rangée jusqu'à 6 indicateurs. */
.tuiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.tuiles--5 { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
/* Portefeuille : 2 tuiles seulement, mais elles portent une barre — auto-fit (et
   non auto-fill) pour qu'elles prennent la largeur au lieu de rester deux
   vignettes de 11rem collées à gauche. */
.tuiles--large { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
/* display:grid écraserait l'attribut hidden — un bloc vide garderait sa marge */
.tuiles[hidden] { display: none; }
@media (max-width: 1100px) { .tuiles, .tuiles--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tuiles, .tuiles--5 { grid-template-columns: 1fr; } }
.tuiles--colonne { grid-template-columns: 1fr; align-content: start; margin-bottom: 0; }
.tuile {
  padding: var(--s-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg);
}
.tuile__valeur {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h4); line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg);
}
.tuile__libelle {
  margin: 0 0 var(--s-2); font-size: var(--fs-micro);
  letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--fg-muted);
  /* Hauteur de 2 lignes réservée : en grille resserrée certains libellés
     passent à la ligne, et sans ça les chiffres d'une même rangée ne
     s'alignent plus (celui de la tuile au libellé long descend). */
  line-height: 1.3; min-height: 2.6em;
}
.tuile__note { margin: var(--s-1) 0 0; font-size: var(--fs-micro); color: var(--fg-muted); }

/* --- infobulles ---------------------------------------------------------
   Les définitions du RCU ne sont pas devinables (source ≠ statut, opt-out
   par blacklist, actifs vs inscrits) : chaque chiffre ambigu porte son « i ».
   Déclenchée au survol ET au focus clavier ; le texte est aussi dans
   aria-label pour les lecteurs d'écran. */
.aide {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; margin-left: var(--s-1); vertical-align: middle;
  border: 1px solid var(--border-strong); border-radius: var(--radius-circle);
  font-size: 10px; font-weight: var(--fw-bold); line-height: 1;
  color: var(--fg-muted); background: var(--bg); cursor: help;
  text-transform: none; letter-spacing: 0;
}
.aide::before { content: 'i'; }
.aide:hover, .aide:focus-visible { color: var(--fg); border-color: var(--gd-navy-600); }
.aide::after {
  content: attr(data-aide);
  position: absolute; z-index: 20;
  left: calc(100% + var(--s-2)); top: 50%; transform: translateY(-50%);
  width: max-content; max-width: 18rem; padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm); background: var(--bg-inverse);
  color: var(--fg-inverse); font-size: var(--fs-micro); font-weight: var(--fw-regular);
  line-height: var(--lh-normal); letter-spacing: 0; text-align: left;
  text-transform: none; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-std);
}
.aide:hover::after, .aide:focus-visible::after { opacity: 1; visibility: visible; }
.tuile__ligne {
  margin: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2); font-size: var(--fs-small); color: var(--fg-muted);
}
.tuile__ligne > span { white-space: nowrap; }
.tuile__ligne strong {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  color: var(--fg); white-space: nowrap;
}

/* --- barres empilées « part de 100 % » ----------------------------------
   Une barre = un pôle = 100 % du dénominateur. Remplace les rangées de
   tuiles-pourcentages de « Données & qualité », où six cases isolées ne
   portaient que quatre nombres indépendants et où aucun écart inter-pôles
   n'était lisible. Couleur = pôle (comme partout sur le site), MOTIF =
   catégorie : plein = la part qui compte, hachuré = la part perdue, fond nu =
   l'absence — donc discriminable en niveaux de gris et en vision daltonienne. */
.barre-bloc + .barre-bloc { margin-top: var(--s-3); }
.barre-tete {
  margin: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2); font-size: var(--fs-small); color: var(--fg-muted);
}
.barre-tete > span { white-space: nowrap; }
/* Même taille que .tuile__valeur : le grand chiffre reste le grand chiffre,
   la barre ne l'a pas remplacé, elle le décompose. */
.barre-tete strong {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h4); line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg);
}
.barre {
  display: flex; height: 0.7rem; margin-top: var(--s-1);
  border-radius: var(--radius-xs); overflow: hidden; background: var(--border);
}
.barre__seg { height: 100%; min-width: 1px; }
/* Filet clair entre segments : deux paliers de clarté voisins restent séparés */
.barre__seg + .barre__seg { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.75); }
/* Libellés écrits sous la barre plutôt qu'en légende : la couleur variant avec
   le pôle, une légende partagée serait ambiguë en vue multi-pôles. */
.barre__detail {
  margin: var(--s-1) 0 0; display: flex; flex-wrap: wrap; gap: 2px var(--s-3);
  font-size: var(--fs-micro); color: var(--fg-muted);
}
.barre__item { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }
.barre__item[title] { cursor: help; }
.barre__chip {
  width: 9px; height: 9px; flex: none; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* --- cartes graphiques -------------------------------------------------- */
.grille-2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-5);
}
/* `display:grid` écrase l'attribut HTML hidden — sans ça, la comparaison
   inter-filiales resterait visible quand une filiale est sélectionnée. */
.grille-2[hidden] { display: none; }
.grille-pdv { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: var(--s-4); }
@media (max-width: 760px) { .grille-pdv { grid-template-columns: 1fr; } }

.carte-graph {
  margin: 0; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--s-4);
}
.carte-graph h4 { margin: 0; }
.carte-graph__note { margin: var(--s-1) 0 var(--s-3); font-size: var(--fs-micro); color: var(--fg-muted); }
.graph-conteneur { position: relative; height: 20rem; }
.graph-conteneur--court { height: 14rem; }

.selecteur-metrique { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.selecteur-metrique button {
  font: inherit; font-size: var(--fs-small); color: var(--fg-muted);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: var(--s-1) var(--s-4); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-std);
}
.selecteur-metrique button:hover { color: var(--fg); border-color: var(--gd-navy-600); }
.selecteur-metrique button[hidden] { display: none; }
.selecteur-metrique button.actif {
  background: var(--gd-navy-800); border-color: var(--gd-navy-800);
  color: var(--fg-inverse); font-weight: var(--fw-bold);
}

/* Sélecteur de période : même pastilles que le sélecteur de métrique, mais poussé
   à droite — c'est un réglage de cadrage, pas le sujet du graphique. */
.selecteur-periode {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  justify-content: flex-end; margin: var(--s-2) 0 var(--s-3);
}
.selecteur-periode button {
  font: inherit; font-size: var(--fs-micro); color: var(--fg-muted);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 2px var(--s-3); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-std);
}
.selecteur-periode button:hover { color: var(--fg); border-color: var(--gd-navy-600); }
.selecteur-periode button.actif {
  background: var(--gd-navy-800); border-color: var(--gd-navy-800);
  color: var(--fg-inverse); font-weight: var(--fw-bold);
}

/* --- boutons ------------------------------------------------------------- */
/* Définis ICI et pas dans rapport.css : dashboard.css est chargé sur toutes les
   pages (base.html), rapport.css seulement sur « Générer rapport ».
   Les onglets d'outil de la section Utilisation partagent ces règles au lieu d'en
   recopier les valeurs : un bouton du dashboard et un bouton du rapport ne peuvent
   donc pas diverger. Onglet actif = bouton principal, inactif = bouton secondaire. */
.bouton-principal,
.onglets-vue button.actif {
  background: var(--gd-navy-800); color: var(--fg-inverse); border: 1px solid var(--gd-navy-800);
  border-radius: 6px; padding: 0.6em 1.2em; font: inherit; cursor: pointer;
}
.bouton-principal:hover,
.onglets-vue button.actif:hover { background: var(--gd-navy-700); border-color: var(--gd-navy-700); color: var(--fg-inverse); }
.bouton-principal:disabled { opacity: 0.55; cursor: wait; }
.bouton-secondaire,
.onglets-vue button {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 0.55em 1em; font: inherit; font-size: var(--fs-small);
  color: var(--fg-muted); cursor: pointer;
}
.bouton-secondaire:hover,
.onglets-vue button:hover { color: var(--fg); border-color: var(--gd-navy-600); }
.bouton-danger:hover { color: #b3261e; border-color: #b3261e; }

/* Onglets de vue RCU / CRM (RCU-188), au-dessus de la barre de filtres qu'ils
   partagent. Le remplissage navy de l'onglet actif suffit à le désigner. */
.onglets-vue { display: flex; gap: var(--s-2); margin: 0 0 var(--s-4); }
.onglets-vue button { font-size: var(--fs-body); padding: 0.55em 1.6em; min-width: 7rem; }
.onglets-vue button.actif { font-size: var(--fs-body); padding: 0.55em 1.6em; font-weight: var(--fw-bold); }
/* Le remplissage marque l'onglet actif, pas le focus clavier : à lui son repère. */
.onglets-vue button:focus-visible {
  outline: 2px solid var(--gd-navy-600); outline-offset: 2px;
}
.dash__objectif { margin: var(--s-1) 0 0; color: var(--fg-muted); font-size: var(--fs-small); max-width: 46rem; }

/* --- tables -------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.table-scroll--haut { max-height: 24rem; overflow-y: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th {
  text-align: left; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-overline); color: var(--fg-muted);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border-strong);
  position: sticky; top: 0; background: var(--bg);
}
.table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); }
.table .num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: var(--bg-elevated); }
.table tr.ligne-inactive td { color: var(--text-muted, #777); }

/* En-têtes triables (RCU-189) : tout l'en-tête est un bouton, le sens courant est
   une flèche. Le style reste celui d'un en-tête, pas d'un bouton. */
.table th button.tri {
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit;
  display: inline-flex; gap: 4px; align-items: baseline;
}
.table th.num button.tri { flex-direction: row-reverse; }
.table th button.tri:hover { color: var(--fg); }
.table th button.tri:focus-visible { outline: 2px solid var(--gd-navy-600); outline-offset: 2px; }
.table th[aria-sort] { color: var(--fg); }
.tri__sens { font-size: 9px; }

/* Nom d'utilisateur cliquable (vue CRM) : ouvre ses fonctionnalités. */
.lien-utilisateur {
  font: inherit; color: var(--fg-link); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.ligne-inactive .lien-utilisateur { color: inherit; }

/* --- fonctionnalités et synthèse IA (vue CRM, RCU-190) ------------------- */
.barre-reglages {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3);
}
.barre-reglages .selecteur-periode { margin: 0; }
.reglage {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); color: var(--fg-muted);
}
.reglage select {
  font: inherit; color: var(--fg); padding: var(--s-1) var(--s-2); max-width: 16rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--bg);
}
.bloc-fonctionnalites { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
/* Un élément de grille prend par défaut la largeur de son contenu : sans ce
   min-width, le tableau élargit la page au lieu de défiler dans sa carte. */
.bloc-fonctionnalites > *, .synthese > * { min-width: 0; }
.note-ligne { font-size: var(--fs-micro); color: var(--fg-muted); font-style: italic; margin-left: var(--s-1); }
.sparkline { display: block; }
.synthese { display: grid; gap: var(--s-4); }
.synthese .grille-2 { gap: var(--s-4); margin-bottom: 0; }
.synthese__constat { margin: 0; font-size: var(--fs-body); line-height: var(--lh-normal); }
.synthese__liste { margin: 0; padding-left: 1.1em; font-size: var(--fs-small); line-height: var(--lh-normal); }
.synthese__liste li + li { margin-top: var(--s-2); }

@media (max-width: 640px) {
  .onglets-vue button, .onglets-vue button.actif { flex: 1; min-width: 0; }
  .barre-reglages { align-items: stretch; }
}

.pastille-pole {
  display: inline-block; width: 10px; height: 10px;
  border-radius: var(--radius-circle); margin-right: var(--s-2); vertical-align: baseline;
}