/* ============================================================================
   ecran-pilotage.css - complément de l'écran Pilotage (spec §5 S7).
   Dépend de tokens.css et app.css. Aucune couleur, taille, espacement ou rayon
   hors token. Toutes les classes sont préfixées ecran-pilotage__.
   L'accent client n'apparaît pas ici : ses 3 usages sont déjà câblés ailleurs.
   ========================================================================== */

/* --- 1. Bandeau métier (en tête, avant tout le reste) ---------------------- */

.ecran-pilotage__bandeau {
  align-items: flex-start;
  padding: var(--carte-pad);
  border-left-color: var(--encre);
}
.ecran-pilotage__bandeau .bandeau__titre { margin-bottom: var(--sp-3); }

.ecran-pilotage__bilan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
}
.ecran-pilotage__bilan-item { display: block; min-width: 0; }

.ecran-pilotage__bilan-chiffre {
  display: block;
  font-size: var(--fs-titre);
  line-height: 1.15;
  font-weight: var(--gras-titre);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.ecran-pilotage__bilan-libelle {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

/* --- 2. Panneau de bloc (ni carte, ni file : Pilotage ne décide de rien) --- */

.ecran-pilotage__bloc {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  box-shadow: var(--ombre-1);
  padding: var(--carte-pad);
}

/* Variante à lignes pleine largeur (interrupteurs). */
.ecran-pilotage__bloc--plat { padding: 0; overflow: hidden; }

/* --- 3. Textes d'appui ----------------------------------------------------- */

.ecran-pilotage__aide {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}
.ecran-pilotage__aide strong { font-weight: var(--gras-titre); color: var(--encre); }

.ecran-pilotage__aide--pied {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ligne);
}
.ecran-pilotage__bloc--plat .ecran-pilotage__aide--pied {
  margin-top: 0;
  padding: var(--sp-3) var(--carte-pad);
}
.ecran-pilotage__aide--libre { margin-top: var(--sp-3); }

.ecran-pilotage__marque { display: inline-flex; margin-left: var(--sp-2); }

/* --- 4. Ligne de mesure (taux d'acceptation ET motifs de mise à l'écart) --- */

.ecran-pilotage__ligne { margin-top: var(--sp-3); }

.ecran-pilotage__ligne-tete {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.ecran-pilotage__ligne-nom {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-corps);
  font-weight: var(--gras-appui);
  color: var(--encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecran-pilotage__ligne-valeur {
  flex: none;
  font-size: var(--fs-corps);
  font-weight: var(--gras-titre);
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.ecran-pilotage__ligne-note {
  margin-top: var(--sp-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

/* --- 5. Jauge -------------------------------------------------------------- */

.ecran-pilotage__jauge {
  width: 100%;
  height: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-appui);
  overflow: hidden;
}
.ecran-pilotage__jauge-part {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--encre);
}
.ecran-pilotage__jauge--attention .ecran-pilotage__jauge-part { background: var(--alerte-encre); }
.ecran-pilotage__jauge--pause .ecran-pilotage__jauge-part { background: var(--ligne-forte); }

/* --- 6. Consommation ------------------------------------------------------- */

.ecran-pilotage__valeur {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ecran-pilotage__valeur-chiffre {
  font-size: var(--fs-titre);
  font-weight: var(--gras-titre);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.ecran-pilotage__valeur-note {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

.ecran-pilotage__jauge + .ecran-pilotage__aide { margin-top: var(--sp-3); }
.ecran-pilotage__aide + .ecran-pilotage__aide { margin-top: var(--sp-1); }

.ecran-pilotage__outils {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* --- 7. Interrupteur de mise en service ------------------------------------ */

.ecran-pilotage__inter {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--cible);
  padding: var(--sp-2) var(--carte-pad);
  text-align: left;
  color: var(--encre);
  border-top: 1px solid var(--ligne);
  transition: background var(--duree-1) var(--courbe);
}
.ecran-pilotage__inter:first-child { border-top: 0; }
.ecran-pilotage__inter:hover { background: var(--surface-creuse); }

.ecran-pilotage__inter-corps { flex: 1 1 auto; min-width: 0; }
.ecran-pilotage__inter-nom {
  display: block;
  font-size: var(--fs-corps);
  font-weight: var(--gras-appui);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecran-pilotage__inter-etat {
  display: block;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

/* Piste 44 x 24, pastille 16, course 20 : uniquement des tokens. */
.ecran-pilotage__piste {
  flex: none;
  display: flex;
  align-items: center;
  width: var(--cible);
  height: var(--sp-6);
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface-appui);
  box-shadow: inset 0 0 0 1px var(--ligne-forte);
  transition: background var(--duree-2) var(--courbe),
              box-shadow var(--duree-2) var(--courbe);
}
.ecran-pilotage__pastille {
  width: var(--sp-4);
  height: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ligne-forte);
  transition: transform var(--duree-2) var(--courbe);
}
.ecran-pilotage__inter[aria-checked="true"] .ecran-pilotage__piste {
  background: var(--encre);
  box-shadow: inset 0 0 0 1px var(--encre);
}
.ecran-pilotage__inter[aria-checked="true"] .ecran-pilotage__pastille {
  transform: translateX(var(--sp-5));
  box-shadow: none;
}

/* --- 8. Retours négatifs --------------------------------------------------- */

.ecran-pilotage__resume {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-corps);
  font-weight: var(--gras-appui);
  color: var(--encre);
}
.ecran-pilotage__resume-icone { color: var(--encre-douce); }

.ecran-pilotage__derniers {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.ecran-pilotage__dernier {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-creuse);
  border-radius: var(--r-1);
}
.ecran-pilotage__dernier-titre {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-meta);
  font-weight: var(--gras-titre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecran-pilotage__dernier-note {
  flex: none;
  font-size: var(--fs-meta);
  color: var(--encre-douce);
}

/* --- 9. Rangée « Bientôt » (tuiles inertes, sans date) --------------------- */

.ecran-pilotage__bientot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--carte-gap);
}
.ecran-pilotage__tuile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--carte-pad);
  background: var(--surface);
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--r-2);
}
.ecran-pilotage__tuile-icone { color: var(--ligne-forte); }
.ecran-pilotage__tuile-nom {
  font-size: var(--fs-corps);
  font-weight: var(--gras-appui);
  line-height: 1.25;
  color: var(--encre-douce);
}

/* --- 9 bis. Entonnoir du rapprochement -------------------------------------
   Les six étapes empruntent la ligne de mesure des blocs 2 et 5 : mêmes
   jauges, même échelle, aucune brique de plus. Seul le pied est nouveau. Il
   porte le taux de retrait, une lecture de l'entonnoir et non une septième
   étape, et le filet suffit à le dire.
   -------------------------------------------------------------------------- */

.ecran-pilotage__retrait {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ligne);
}
.ecran-pilotage__retrait .ecran-pilotage__valeur { margin-bottom: var(--sp-1); }

/* L'état vide vit DANS le panneau, sans le cadre ni le fond qu'il porte
   ailleurs : le panneau les porte déjà, et deux cadres emboîtés donneraient à
   une absence de données l'importance d'un résultat. */
.ecran-pilotage__bloc .etat-vide {
  padding: var(--sp-4) 0;
  border: 0;
  background: none;
}

/* --- 10. Desktop ----------------------------------------------------------- */

@media (min-width: 840px) {
  .ecran-pilotage__bilan { grid-template-columns: repeat(4, 1fr); }
}

/* --- 11. Garde-fou 320 px -------------------------------------------------- */

@media (max-width: 359px) {
  .ecran-pilotage__bilan { grid-template-columns: 1fr; gap: var(--sp-2); }
  .ecran-pilotage__bientot { grid-template-columns: 1fr; }
  .ecran-pilotage__dernier { flex-wrap: wrap; }
}

/* ===========================================================================
   RÉGLAGES DU RAPPROCHEMENT - une ligne par paramètre, la valeur à droite.
   Cibles pleines : toute la ligne ouvre la feuille de choix.
   ======================================================================== */

/* Un intertitre par famille de réglages. Douze lignes plates se cherchent ;
   trois paquets de trois ou quatre se parcourent. L'intertitre reste inerte :
   pas de survol, pas de chevron, pas de curseur main. */
.reglage-groupe {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--ligne);
  background: var(--surface-creuse);
  color: var(--encre-douce);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: var(--gras-appui);
}

.reglage {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  min-height: var(--cible);
  padding: var(--sp-2) var(--sp-3);
  border: 0; border-bottom: 1px solid var(--ligne);
  background: none; color: var(--encre);
  font: inherit; text-align: left;
  cursor: pointer;
}
.reglage:last-child { border-bottom: 0; }
.reglage:hover { background: var(--surface-appui); }
.reglage:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: calc(var(--focus-ecart) * -1);
}
.reglage__corps { flex: 1 1 auto; min-width: 0; }
.reglage__label { display: block; font-weight: var(--gras-appui); }
.reglage__aide {
  display: block;
  font-size: var(--fs-meta); line-height: var(--lh-meta);
  color: var(--encre-douce);
}
.reglage__valeur {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--gras-titre);
  white-space: nowrap;
}
.reglage__chevron { flex: none; color: var(--encre-douce); }

/* ===========================================================================
   TABLEAU D'ÉQUIPE - l'activité de chaque broker de l'agence.

   Ce que le manager lit chaque matin : une ligne par personne, quatre
   chiffres, rien à déplier. Toute la mise en forme sert la comparaison
   verticale - chiffres alignés à droite, chasse tabulaire, filets légers.
   ======================================================================== */

/* Cinq colonnes ne tiennent pas à 320 px : le tableau défile DANS son cadre,
   jamais dans la page. Le cadre est focalisable pour que le défilement soit
   atteignable au clavier (sinon, contenu inaccessible sans souris). */
.equipe__cadre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  background: var(--surface);
}
.equipe__cadre:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}

.equipe {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
}

/* La définition du taux vit sous le tableau, pas dans un astérisque : elle se
   lit une fois, elle ne se cherche pas. */
.equipe__legende {
  caption-side: bottom;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--ligne);
  color: var(--encre-douce);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  text-align: left;
}

/* Serré par défaut : à 375 px, la colonne qu'on vient comparer - le taux -
   doit être À L'ÉCRAN. Un tableau dont la dernière colonne se gagne au
   défilement horizontal ne se lit pas le matin, écran projeté. */
.equipe th,
.equipe td {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  vertical-align: middle;
}

/* Les intitulés se replient sur deux lignes plutôt que d'élargir la colonne :
   c'est la seule façon de garder « Ajoutés au CRM » en toutes lettres, et un
   intitulé abrégé se paierait en infobulle que personne n'ouvre. */
.equipe thead th {
  color: var(--encre-douce);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: var(--gras-appui);
  background: var(--surface-creuse);
  vertical-align: bottom;
}
.equipe thead .equipe__nombre { white-space: normal; }

/* Le nom passe avant tout : il peut se replier, jamais se tronquer. */
.equipe__qui { min-width: 80px; }
.equipe__nom {
  display: block;
  color: var(--encre);
  font-weight: var(--gras-appui);
}
.equipe__role {
  display: block;
  color: var(--encre-douce);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}

/* Chiffres à droite et en chasse fixe : c'est ce qui permet de comparer deux
   lignes d'un coup d'œil sans lire les nombres. */
.equipe__nombre {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.equipe tbody .equipe__nombre { color: var(--encre); }

/* La colonne qu'on compare porte le poids - et elle reste À L'ÉCRAN.

   Sous 560 px, cinq colonnes ne tiennent pas : le tableau défile dans son
   cadre. Le taux est justement ce qu'on vient lire ; l'épingler à droite
   garantit qu'il est là quoi qu'il arrive, au lieu de se mériter par un
   défilement que personne ne fait en réunion. Chaque cellule épinglée porte
   son propre fond : sans lui, les colonnes défilantes passeraient dessous. */
.equipe__taux {
  font-weight: var(--gras-titre);
  position: sticky;
  right: 0;
  background: var(--surface);
  border-left: 1px solid var(--ligne);
}
.equipe thead .equipe__taux { background: var(--surface-creuse); }
.equipe tfoot .equipe__taux { background: var(--surface-creuse); }
.equipe tbody tr:hover .equipe__taux { background: var(--surface-creuse); }

.equipe tbody tr:hover { background: var(--surface-creuse); }

/* Le total se détache par un filet plein, pas par une couleur : c'est une
   somme, pas une alerte. */
.equipe tfoot td {
  border-top: 2px solid var(--ligne-forte);
  border-bottom: 0;
  font-weight: var(--gras-appui);
  background: var(--surface-creuse);
}
.equipe tfoot .equipe__nom { font-weight: var(--gras-titre); }

/* Dès qu'il y a de la place, le tableau respire et les intitulés reprennent
   leur ligne unique. */
@media (min-width: 560px) {
  .equipe__qui { min-width: 160px; }
  .equipe th,
  .equipe td { padding: var(--sp-3) var(--sp-4); }
  .equipe thead .equipe__nombre { white-space: nowrap; }
}

/* Au-delà, le tableau tient en entier : l'épinglage n'a plus d'objet et il
   se retire, sinon le filet de gauche ferait croire à un défilement. */
@media (min-width: 560px) {
  .equipe__taux {
    position: static;
    border-left: 0;
    background: transparent;
  }
}

/* --- Le sélecteur de période ----------------------------------------------
   Un menu déroulant natif dans une enveloppe habillée : le champ perd son
   habillage système (`appearance: none`) pour porter la typographie et les
   tokens du produit, mais reste un `<select>` - la liste qui se déroule est
   celle de l'OS, avec son clavier et son sélecteur roulant sur mobile.

   Le chevron est dessiné par-dessus et laisse passer les clics : sans
   `pointer-events: none`, il ouvrirait un trou mort au milieu de la cible.
   -------------------------------------------------------------------------- */

.equipe__periode {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-4);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  background: var(--surface);
  transition: border-color var(--duree-1) var(--courbe);
}
.equipe__periode:hover { border-color: var(--ligne-forte); }

/* Le libellé reste un vrai `<label for>` : il nomme le champ pour le lecteur
   d'écran, et il agrandit la zone de clic jusqu'au bord gauche. */
.equipe__periode-label {
  flex: none;
  color: var(--encre-douce);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  cursor: pointer;
}

.equipe__periode-champ {
  flex: 1;
  min-width: 0;
  min-height: var(--cible);
  /* Place pour le chevron, qui est posé par-dessus. */
  padding: 0 var(--sp-6) 0 0;
  border: 0;
  background: transparent;
  color: var(--encre);
  font: inherit;
  /* La valeur se lit à trois mètres : c'est elle qui dit ce que le tableau
     compte. Taille de titre, alignée à droite comme les chiffres. */
  font-size: var(--fs-titre);
  line-height: var(--lh-titre);
  font-weight: var(--gras-titre);
  text-align: right;
  text-align-last: right;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.equipe__periode-champ:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
  border-radius: var(--r-1);
}

/* La liste déroulée est rendue par le système : on ne peut pas la styler, et
   on ne le cherche pas. On garantit seulement qu'elle reste lisible. */
.equipe__periode-champ option {
  font-size: var(--fs-corps);
  color: var(--encre);
  background: var(--surface);
}

.equipe__periode-chevron {
  position: absolute;
  right: var(--sp-4);
  flex: none;
  color: var(--encre-douce);
  pointer-events: none;
}