/* =====================================================================
   CRM CBC — habillage de l'interface
   S'appuie entièrement sur les jetons de charte-cbc.css : aucune couleur
   n'est écrite en dur ici, pour que le mode sombre et un éventuel
   changement de charte n'aient qu'un seul fichier à toucher.

   Écran agent : un centre d'appels regarde cet écran huit heures par
   jour. Les contrastes sont donc francs, les surfaces calmes, et rien
   ne clignote.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--cb-police);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cb-encre);
  background: var(--cb-gris-fond);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cb-bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--cb-police-titre);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cb-encre);
  margin: 0 0 0.6rem;
}
h1 { font-size: 1.55rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
h3 { font-size: 1rem; }

/* ---------------------------------------------------------------------
   Ossature : barre latérale fixe + contenu
   --------------------------------------------------------------------- */
.cadre { display: flex; min-height: 100vh; }

.barre {
  width: 232px;
  flex: 0 0 232px;
  background: var(--cb-bleu-nuit);
  color: #CBD8F0;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
}

.marque {
  padding: 0 1.25rem 1.5rem;
  line-height: 1.15;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 1rem;
}
.marque span { display: block; }
.marque-cb       { font-family: var(--cb-police-titre); font-size: 1.1rem; color: #fff; }
.marque-business { font-family: var(--cb-police-titre); font-size: 1.1rem; color: var(--cb-ambre); }
.marque-pays     { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
                   color: #8DA4CC; margin-top: 0.3rem; }

.barre nav { display: flex; flex-direction: column; flex: 1; }
.barre nav a {
  padding: 0.62rem 1.25rem;
  color: #CBD8F0;
  border-left: 3px solid transparent;
  font-size: 0.93rem;
}
.barre nav a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
.barre nav a.actif {
  background: rgba(255,255,255,0.10);
  border-left-color: var(--cb-ambre);
  color: #fff;
  font-weight: 500;
}

.barre-pied {
  padding: 1rem 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 0.82rem;
}
.barre-pied .qui  { color: #fff; font-weight: 500; }
.barre-pied .role { color: #8DA4CC; text-transform: capitalize; margin-bottom: 0.6rem; }
.barre-pied .deconnexion { color: #8DA4CC; font-size: 0.8rem; }

.contenu { flex: 1; padding: 1.75rem 2rem 4rem; max-width: 1180px; min-width: 0; }

/* ---------------------------------------------------------------------
   Bandeaux de message
   --------------------------------------------------------------------- */
.bandeau {
  padding: 0.7rem 0.95rem;
  border-radius: 6px;
  margin: 0 0 1.25rem;
  border-left: 4px solid var(--cb-bleu);
  background: var(--cb-bleu-clair);
  color: var(--cb-bleu-nuit);
  font-size: 0.92rem;
}
.bandeau-erreur  { border-left-color: var(--cb-danger); background: #FBEAE6; color: #5E1F14; }
.bandeau-alerte  { border-left-color: var(--cb-ambre-moyen); background: #FEF4E0; color: #6B4506; }

/* ---------------------------------------------------------------------
   Cartes et tuiles de chiffres
   --------------------------------------------------------------------- */
.carte {
  background: var(--cb-blanc);
  border: 1px solid var(--cb-gris-bord);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; margin-bottom: 1.5rem; }
.tuile {
  background: var(--cb-blanc);
  border: 1px solid var(--cb-gris-bord);
  border-radius: 8px;
  padding: 0.95rem 1.1rem;
}
.tuile .valeur {
  font-family: var(--cb-police-titre);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--cb-bleu-nuit);
}
.tuile .etiquette {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb-gris-texte);
  margin-top: 0.25rem;
}
.tuile.accent .valeur { color: var(--cb-bleu); }
.tuile.alerte .valeur { color: var(--cb-danger); }

/* ---------------------------------------------------------------------
   Tableaux
   --------------------------------------------------------------------- */
.tableau-cadre { overflow-x: auto; background: var(--cb-blanc);
                 border: 1px solid var(--cb-gris-bord); border-radius: 8px; }
table.liste { width: 100%; border-collapse: collapse; font-size: 0.91rem; }
table.liste th {
  text-align: left;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cb-gris-texte);
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--cb-gris-ligne);
  white-space: nowrap;
}
table.liste td { padding: 0.62rem 0.85rem; border-bottom: 1px solid var(--cb-gris-bord); vertical-align: top; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tbody tr:hover { background: var(--cb-gris-fond); }
table.liste .num { font-family: var(--cb-police-mono); font-size: 0.87rem; white-space: nowrap; }
table.liste .discret { color: var(--cb-gris-texte); font-size: 0.85rem; }

.vide { padding: 2.5rem 1rem; text-align: center; color: var(--cb-gris-texte); }
.vide p { margin: 0.3rem 0; }

/* ---------------------------------------------------------------------
   Pastilles
   --------------------------------------------------------------------- */
.pastille {
  --teinte: var(--cb-gris-texte);
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--teinte);
  border: 1px solid var(--teinte);
  background: color-mix(in srgb, var(--teinte) 9%, transparent);
}

/* ---------------------------------------------------------------------
   Formulaires
   --------------------------------------------------------------------- */
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem 1.1rem; }
.champ { display: flex; flex-direction: column; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cb-gris-texte);
  margin-bottom: 0.25rem;
}
.champ .aide { font-size: 0.78rem; color: var(--cb-gris-texte); margin-top: 0.2rem; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  font-family: inherit;
  font-size: 0.93rem;
  color: var(--cb-encre);
  background: var(--cb-blanc);
  border: 1px solid var(--cb-gris-ligne);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cb-bleu);
  outline-offset: -1px;
  border-color: var(--cb-bleu);
}
textarea { min-height: 5.5rem; resize: vertical; }

.boutons { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }

.bouton {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 1.05rem;
  border-radius: 6px;
  border: 1px solid var(--cb-bleu);
  background: var(--cb-bleu);
  color: #fff;
  cursor: pointer;
  display: inline-block;
}
.bouton:hover { background: var(--cb-bleu-fonce); border-color: var(--cb-bleu-fonce); text-decoration: none; }
.bouton.second { background: transparent; color: var(--cb-bleu); }
.bouton.second:hover { background: var(--cb-bleu-clair); }
.bouton.danger { background: var(--cb-danger); border-color: var(--cb-danger); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Barre d'outils (recherche + actions)
   --------------------------------------------------------------------- */
.outils { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.1rem; }
.outils .champ { min-width: 160px; }
.outils form { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.pousse { margin-left: auto; }

.pagination {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  padding: 1rem 0; font-size: 0.88rem; color: var(--cb-gris-texte);
}

/* ---------------------------------------------------------------------
   Fiche contact : deux colonnes qui se replient
   --------------------------------------------------------------------- */
.fiche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.paires { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; font-size: 0.92rem; }
.paires dt { color: var(--cb-gris-texte); white-space: nowrap; }
.paires dd { margin: 0; }

.fil { list-style: none; margin: 0; padding: 0; }
.fil li { padding: 0.65rem 0; border-bottom: 1px solid var(--cb-gris-bord); font-size: 0.9rem; }
.fil li:last-child { border-bottom: none; }
.fil .quand { color: var(--cb-gris-texte); font-size: 0.8rem; }

/* Avertissement de conformité : visible sans être criard. */
.conformite { font-size: 0.88rem; padding: 0.6rem 0.8rem; border-radius: 6px; margin-top: 0.8rem; }
.conformite.permis { background: color-mix(in srgb, var(--cb-succes) 10%, transparent); color: var(--cb-succes); }
.conformite.refuse { background: color-mix(in srgb, var(--cb-danger) 10%, transparent); color: var(--cb-danger); font-weight: 500; }
.conformite.estime { background: color-mix(in srgb, var(--cb-ambre-fonce) 12%, transparent); color: var(--cb-ambre-fonce); }

/* ---------------------------------------------------------------------
   Page de connexion
   --------------------------------------------------------------------- */
.cadre-nu {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: linear-gradient(160deg, var(--cb-bleu-nuit) 0%, var(--cb-bleu-fonce) 100%);
}
.connexion {
  width: 100%; max-width: 390px;
  background: var(--cb-blanc);
  border-radius: 10px;
  padding: 2rem 1.9rem 1.8rem;
  box-shadow: 0 18px 50px rgba(8, 18, 40, 0.35);
}
.connexion .marque { border: none; padding: 0 0 1.4rem; margin: 0 0 1.2rem;
                     border-bottom: 1px solid var(--cb-gris-bord); }
.connexion .marque-cb       { color: var(--cb-bleu-nuit); font-size: 1.25rem; }
.connexion .marque-business { color: var(--cb-ambre-fonce); font-size: 1.25rem; }
.connexion .marque-pays     { color: var(--cb-gris-texte); }
.connexion h1 { font-size: 1.05rem; margin-bottom: 1rem; }
.connexion .champ { margin-bottom: 0.9rem; }
.connexion .bouton { width: 100%; text-align: center; padding: 0.6rem; }
.connexion .note { font-size: 0.78rem; color: var(--cb-gris-texte); margin-top: 1.1rem; text-align: center; }

/* ---------------------------------------------------------------------
   Écrans étroits : la barre passe en bandeau horizontal
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  .cadre { flex-direction: column; }
  .barre { width: auto; flex: none; padding: 0.9rem 0 0.5rem; }
  .marque { padding-bottom: 0.8rem; margin-bottom: 0.6rem; }
  .barre nav { flex-direction: row; overflow-x: auto; }
  .barre nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .barre nav a.actif { border-left: none; border-bottom-color: var(--cb-ambre); }
  .barre-pied { display: flex; gap: 0.8rem; align-items: baseline; padding-top: 0.7rem; }
  .barre-pied .role { margin: 0; }
  .contenu { padding: 1.2rem 1rem 3rem; }
  .fiche { grid-template-columns: 1fr; }
}

/* Logo officiel, quand il a été déposé par deployer-web.sh. */
.marque-image img { display: block; width: 100%; max-width: 168px; height: auto; }
.connexion .marque-image { padding: 0 0 1.2rem; margin-bottom: 1.2rem; }
.connexion .marque-image img { max-width: 210px; margin: 0 auto; }

/* ---------------------------------------------------------------------
   Navigation par espaces
   Les intitulés de groupe séparent ce qu'on surveille, ce qu'on gère et
   ce qu'on configure. Un agent n'en voit qu'un.
   --------------------------------------------------------------------- */
.barre .groupe {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #6F86AE;
  padding: 1rem 1.25rem 0.35rem;
}
.barre .groupe:first-of-type { padding-top: 0.2rem; }
.barre nav a.lien { display: flex; align-items: center; gap: 0.4rem; }
.barre nav a .externe { font-size: 0.78rem; opacity: 0.65; margin-left: auto; }

/* ---------------------------------------------------------------------
   Panneau live en fenêtre séparée : pas de barre latérale, en-tête
   compact. Un superviseur le pose sur son deuxième écran.
   --------------------------------------------------------------------- */
.fenetre-live { padding: 0.9rem 1rem 2rem; }
.fenetre-live .entete {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--cb-gris-ligne);
  padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.fenetre-live .entete h1 { font-size: 1.15rem; margin: 0; }
.fenetre-live .entete .marque-mini {
  font-family: var(--cb-police-titre); color: var(--cb-bleu-nuit);
}
.fenetre-live .entete .marque-mini span { color: var(--cb-ambre-fonce); }

/* ---------------------------------------------------------------------
   Barres de répartition
   Une seule série : toutes les barres portent la même teinte, et
   l'identité vient de l'intitulé en regard, jamais de la couleur seule.
   La pastille reprend la couleur de la qualification telle qu'elle est
   réglée en base — repère secondaire, toujours doublé du texte.
   La barre est fine, son extrémité arrondie, et elle part du même bord
   pour toutes les lignes : c'est ce qui rend la comparaison instantanée.
   --------------------------------------------------------------------- */
table.barres { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.barres th {
  text-align: left; font-weight: 400; color: var(--cb-encre);
  padding: 0.3rem 0.8rem 0.3rem 0; white-space: nowrap;
}
table.barres td { padding: 0.3rem 0; vertical-align: middle; }
table.barres .puce {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 0.45rem; vertical-align: baseline;
}
table.barres .piste { width: 100%; }
table.barres .barre {
  height: 10px;
  border-radius: 0 4px 4px 0;
  background: var(--cb-bleu);
  min-width: 2px;
}
table.barres .valeur-barre {
  font-variant-numeric: tabular-nums; padding-left: 0.9rem; font-weight: 600;
}
table.barres .discret { padding-left: 0.7rem; white-space: nowrap; }