/* ProspectAI — feuille de style.
 *
 * Un seul fichier, incorporé au binaire. Pas de compilation, pas de Tailwind,
 * pas de node_modules : ce qui est écrit ici est ce qui arrive au navigateur.
 *
 * Les couleurs sont des jetons. Changer l'or de la marque se fait à un seul
 * endroit, et rien ne code une couleur en dur ailleurs. */

:root {
  /* Fonds, du plus profond au plus clair. L'écart entre --fond et --carte est
     volontairement faible : sur un écran sombre, un contraste trop fort entre
     surfaces fatigue au bout d'une heure de suivi d'appels. */
  --fond: #0a0d14;
  --barre: #0d1119;
  --carte: #111621;
  --carte-haut: #161c28;
  --trait: #1f2634;
  --trait-vif: #2b3446;

  /* Textes */
  --texte: #eef2f8;
  --texte-doux: #9aa4b5;
  --texte-faible: #626d80;

  /* Accents. L'or est la marque ; le vert dit le succès, le rouge le refus.
     Chacun a une variante « voile » pour les fonds de pastille. */
  --or: #f5a623;
  --or-voile: #f5a6231f;
  --vert: #2fd68a;
  --vert-voile: #2fd68a1f;
  --rouge: #f0616b;
  --rouge-voile: #f0616b1f;
  --bleu: #6b8afd;
  --bleu-voile: #6b8afd1f;

  /* Échelle d'espacement. Des multiples de 4 : tout s'aligne sans réfléchir. */
  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px; --e6: 32px;  --e7: 48px;

  /* Rayon général relevé de 10 à 12 px : Telnyx arrondit plus franchement,
     et c'est ce qui adoucit l'ensemble sans toucher aux couleurs. */
  --rond: 12px;
  --rond-l: 14px;

  --ombre: 0 1px 2px #0006, 0 8px 24px #0003;
  --transition: 140ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Un tableau large doit défiler dans sa propre carte, jamais pousser la page
     entière : sinon l'entête et ses boutons sortent de l'écran. */
  overflow-x: hidden;
  background: var(--fond);
  color: var(--texte);
  /* Inter **en premier**, avant `system-ui` : c'est la fonte du tableau de bord
     Telnyx. Placée après, elle n'était jamais atteinte — `system-ui` résout
     toujours, et sur cette machine il rendait Noto Sans. La ligne existait,
     elle ne servait à rien.
     Absente du poste, la pile système reprend la main sans rien casser : on ne
     charge aucun fichier, le CSP des pages l'interdirait et il n'y a pas de
     Node pour en construire un. */
  font: 14px/1.6 "Inter", "Inter Variable", ui-sans-serif, system-ui,
        "SF Pro Text", -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;
  /* Les chiffres alignés en colonne : sans ça, un tableau de durées danse. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ------------------------------------------------------------------ barre */

.barre {
  position: fixed;
  inset: 0 auto 0 0;
  width: 232px;
  background: var(--barre);
  border-right: 1px solid var(--trait);
  padding: var(--e5) var(--e3);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.marque {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0 var(--e3) var(--e6);
}
.marque .point {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 4px var(--or-voile);
  flex: none;
}
.marque b { font-size: 15px; letter-spacing: -.2px; display: block; }
.marque small {
  display: block;
  color: var(--texte-faible);
  font-size: 10px;
  letter-spacing: 1.4px;
  margin-top: 1px;
}

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 10px var(--e3);
  border-radius: var(--rond);
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 13px;
  transition: background var(--transition), color var(--transition);
}
.menu a:hover { background: var(--carte); color: var(--texte); }
.menu a.actif {
  background: var(--carte-haut);
  color: var(--texte);
  box-shadow: inset 2px 0 var(--or);
}
.menu .ico { width: 16px; text-align: center; opacity: .85; flex: none; }

.bas { margin-top: auto; }
.solde {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rond);
  padding: var(--e3);
  margin-bottom: var(--e2);
}
.solde span {
  font-size: 10px;
  color: var(--texte-faible);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.solde b { display: block; font-size: 17px; margin-top: var(--e1); }

/* ------------------------------------------------------------------ page */

.page { margin-left: 232px; min-height: 100vh; min-width: 0; }

.entete {
  height: 64px;
  border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--barre) 85%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0 var(--e6);
  position: sticky;
  top: 0;
  z-index: 10;
}
.pastille {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--texte-faible);
  flex: none;
  transition: background var(--transition), box-shadow var(--transition);
}
.pastille.active {
  background: var(--vert);
  box-shadow: 0 0 0 4px var(--vert-voile);
  /* Le battement dit « ça tourne » sans avoir à lire. */
  animation: souffle 2.4s ease-in-out infinite;
}
@keyframes souffle { 50% { box-shadow: 0 0 0 7px transparent; } }

.entete b { font-size: 13px; font-weight: 600; }
.entete small { display: block; color: var(--texte-faible); font-size: 11px; }
.entete .droite { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }

.corps { padding: var(--e6); max-width: 1440px; min-width: 0; }

h1 {
  /* Ce qui donne l'air « produit » n'est pas la fonte mais l'échelle : un titre
     grand, dense, et de l'air en dessous. Sans le resserrement, une grande
     taille en pile système paraît étalée. */
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 var(--e1);
}
.chapo {
  color: var(--texte-doux);
  font-size: 14px;
  line-height: 1.6;
  margin-top: var(--e2);
  margin-bottom: var(--e6, var(--e5));
}

/* --------------------------------------------------------------- mesures */

.mesures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e5);
}
.mesure {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rond-l);
  padding: var(--e4);
  transition: border-color var(--transition);
}
.mesure:hover { border-color: var(--trait-vif); }
.mesure small {
  display: block;
  color: var(--texte-faible);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.mesure b {
  display: block;
  font-size: 26px;
  font-weight: 620;
  margin-top: var(--e2);
  letter-spacing: -.6px;
}
.mesure em { font-style: normal; font-size: 11px; color: var(--texte-faible); }

/* La mesure principale se distingue : c'est l'objectif de la campagne. */
.mesure.phare { border-color: color-mix(in srgb, var(--or) 35%, var(--trait)); }
.mesure.phare b { color: var(--or); }

.vert { color: var(--vert); }
.or   { color: var(--or); }
.rouge{ color: var(--rouge); }

/* --------------------------------------------------------------- cartes */

.carte {
  min-width: 0;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rond-l);
  overflow: hidden;
  /* Les cartes s'espacent : c'est ce qui fait respirer une page dense, plus
     que la taille des titres. */
  margin-bottom: var(--e5);
}
.carte > .tete {
  padding: var(--e5) var(--e5) var(--e4);
  border-bottom: 1px solid var(--trait);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texte-doux);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.carte > .contenu { padding: var(--e5); }

.duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--e4); align-items: start; }
/* Sans min-width:0, une colonne de grille prend la largeur de son contenu le
   plus large — un nom d'entreprise Google Maps de 90 caractères, ici. */
.duo > * { min-width: 0; }

/* -------------------------------------------------------------- tableaux */

.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--texte-faible);
  font-weight: 600;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
.tableau td {
  line-height: 1.7;
  /* Deux pixels de plus en vertical : une ligne de tableau serrée est ce qui
     fait paraître une page « administrative ». L'horizontal ne bouge pas. */
  padding: 14px var(--e4);
  border-bottom: 1px solid var(--trait);
  font-size: 13px;
  vertical-align: middle;
}
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr { transition: background var(--transition); }
.tableau tbody tr:hover { background: var(--carte-haut); }
.tableau .nom b { display: block; font-weight: 550; }
.tableau .nom span { font-size: 11px; color: var(--texte-faible); }
/* Le conteneur de défilement. `max-width:100%` est ce qui empêche le tableau
   de pousser la carte, et donc la page. */
.defile { overflow-x: auto; max-width: 100%; }
.defile .tableau { min-width: 720px; }

/* Une ligne qui vient d'arriver par SSE : elle se signale sans clignoter. */
.neuf { animation: entree 320ms cubic-bezier(.2, .8, .2, 1); }
@keyframes entree {
  from { opacity: 0; transform: translateY(-6px); background: var(--or-voile); }
}

/* -------------------------------------------------------------- pastilles */

.et {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--carte-haut);
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.et.vert  { background: var(--vert-voile);  color: var(--vert); }
.et.or    { background: var(--or-voile);    color: var(--or); }
.et.rouge { background: var(--rouge-voile); color: var(--rouge); }
.et.bleu  { background: var(--bleu-voile);  color: var(--bleu); }

/* --------------------------------------------------------------- boutons */

.btn {
  border: 1px solid var(--trait-vif);
  background: var(--carte-haut);
  color: var(--texte);
  /* Pilule pleine, comme chez Telnyx. Sur les petits boutons de tableau et le
     « ✕ » des boîtes, le rayon donne un cercle — c'est le rendu voulu. */
  border-radius: 999px;
  padding: 10px var(--e5);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition);
}
.btn:hover { background: var(--trait); border-color: var(--texte-faible); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.or {
  background: var(--or);
  border-color: var(--or);
  color: #1a1204;
  font-weight: 650;
}
.btn.or:hover { background: color-mix(in srgb, var(--or) 88%, #fff); }

.btn.discret { background: transparent; border-color: var(--trait); }

/* ------------------------------------------------------------ formulaires */

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e4); }

.champ { margin-bottom: var(--e4); }
.champ label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
/* Non scopée à `.champ` : l'aide sert aussi dans les boîtes de dialogue et les
   écrans d'import, où elle s'affichait alors en blanc, à taille pleine —
   c'est-à-dire plus visible que le texte qu'elle commente. */
.aide { font-size: 11px; color: var(--texte-faible); margin-top: 5px; line-height: 1.4; }

input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--trait-vif);
  border-radius: var(--rond);
  color: var(--texte);
  padding: 10px var(--e3);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-voile);
}
input:read-only, textarea:read-only {
  color: var(--texte-doux);
  border-style: dashed;
  cursor: default;
}
textarea { resize: vertical; min-height: 90px; }
textarea.code {
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  min-height: 320px;
}

.bascule { display: flex; align-items: center; gap: var(--e2); font-size: 13px; color: var(--texte-doux); }
.bascule input { accent-color: var(--or); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- divers */

.vide {
  padding: var(--e6);
  text-align: center;
  color: var(--texte-faible);
  font-size: 13px;
}
.vide .grand { font-size: 28px; display: block; margin-bottom: var(--e2); opacity: .5; }

.avis {
  display: flex;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--rond);
  font-size: 13px;
  margin-bottom: var(--e4);
  border: 1px solid;
}
/* Ni le plafond du lot d'essai ni un écart de configuration ne sont des
   erreurs : ce sont des états. Un aplat pleine largeur leur donnait le poids
   d'une alarme et salissait l'écran. Reste un filet et du texte doux — la
   phrase est conservée, c'est elle qui porte l'information. */
.avis.attention, .avis.info {
  background: none;
  border: 0;
  border-left: 2px solid var(--trait);
  border-radius: 0;
  padding: var(--e2) 0 var(--e2) var(--e3);
  color: var(--texte-doux);
}
.avis.attention { border-left-color: #f5a62366; }
.avis.info { border-left-color: #6b8afd66; }
.avis.attention b, .avis.info b { color: var(--texte); font-weight: 600; }

/* `danger` garde son fond : un import échoué ou une suppression refusée doit
   se voir. C'est le seul cas où l'aplat se justifie. */

/* Les créneaux */
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--e3); }
.creneau {
  background: var(--carte-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rond);
  padding: var(--e3) var(--e4);
  transition: border-color var(--transition);
}
.creneau b { font-size: 15px; font-weight: 560; }
.creneau span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--texte-faible);
  margin-top: var(--e1);
}
.creneau.pris { background: var(--or-voile); border-color: #f5a62340; }
.creneau.pris span { color: var(--or); }

/* Le message éphémère */
.mot {
  position: fixed;
  right: var(--e5);
  bottom: var(--e5);
  background: var(--carte-haut);
  border: 1px solid var(--trait-vif);
  border-radius: var(--rond);
  padding: var(--e3) var(--e4);
  font-size: 13px;
  box-shadow: var(--ombre);
  z-index: 50;
  animation: entree 240ms ease;
}

/* L'indicateur HTMX : visible seulement pendant une requête en vol. */
.htmx-indicator { opacity: 0; transition: opacity var(--transition); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* --------------------------------------------------------------- écrans */

@media (max-width: 1000px) {
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .barre { width: 60px; padding: var(--e4) var(--e2); }
  .marque div, .menu a span:not(.ico), .bas { display: none; }
  .menu a { justify-content: center; padding: 11px 0; }
  .page { margin-left: 60px; }
  .corps { padding: var(--e4); }
  .entete { padding: 0 var(--e4); }
}
@media (max-width: 520px) {
  .mesures { grid-template-columns: repeat(2, 1fr); }
  .entete .droite .btn { padding: 8px 10px; font-size: 12px; }
}

/* Certains suivent des appels toute la journée : le mouvement se coupe si le
   système le demande. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ------------------------------------------------------- fenêtre modale */

/* Le voile assombrit la page derrière : la fenêtre demande une décision, et
   rien d'autre ne doit attirer l'œil pendant qu'on la prend. */
.voile {
  position: fixed;
  inset: 0;
  background: #05070ccc;
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: var(--e4);
  z-index: 60;
  animation: paraitre 160ms ease;
}
.voile[hidden] { display: none; }
@keyframes paraitre { from { opacity: 0 } }

.fenetre {
  background: var(--carte);
  border: 1px solid var(--trait-vif);
  border-radius: var(--rond-l);
  box-shadow: var(--ombre);
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  animation: monter 200ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes monter { from { opacity: 0; transform: translateY(12px) } }

.fenetre > .tete {
  padding: var(--e4);
  border-bottom: 1px solid var(--trait);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--texte);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fenetre > .contenu { padding: var(--e5); }

/* ------------------------------------------------- barre de progression */

.bar {
  height: 6px;
  background: var(--carte-haut);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 4px;
}
.fill {
  height: 100%;
  background: var(--or);
  border-radius: 99px;
  transition: width var(--transition);
}

/* --------------------------------------------------------- fil d'étapes */

.etapes {
  display: flex;
  gap: var(--e2);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rond-l);
  padding: var(--e2);
  margin-bottom: var(--e5);
  overflow-x: auto;
}
.etape {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--rond);
  color: var(--texte-faible);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.etape:hover { color: var(--texte-doux); }
.etape i {
  font-style: normal;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--carte-haut);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  flex: none;
}
/* L'étape courante se distingue par le fond ; les étapes franchies par la
   pastille verte. On voit d'un coup où l'on est et ce qui reste. */
.etape.actif { background: var(--carte-haut); color: var(--texte); }
.etape.actif i { background: var(--vert); color: #06210f; }
.etape.fait i { background: var(--vert-voile); color: var(--vert); }

@media (max-width: 820px) {
  .etape span { display: none; }
  .etape { min-width: 0; justify-content: center; }
}

/* ------------------------------------------------------------ pagination */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--trait);
  font-size: 12px;
  color: var(--texte-faible);
  flex-wrap: wrap;
}
.pagination .btn { padding: 5px 12px; font-size: 12px; text-decoration: none; }

/* Un import échoué n'est pas un avertissement : il faut qu'il se distingue de
   « déjà versé », sinon on relance en croyant que rien n'a été fait. */
.avis.danger { background: var(--rouge-voile); border-color: #ff6b6b40; color: #ffb3b3; }

/* Jauge indéterminée : la barre balaie tant que la tâche tourne. Un pourcentage
   exigerait de connaître le total avant d'avoir lu le fichier. */
.jauge { height: 4px; border-radius: 2px; background: var(--trait); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 35%; border-radius: 2px;
           background: var(--or); animation: balaye 1.2s ease-in-out infinite; }
@keyframes balaye { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ------------------------------------------------------- boîtes de dialogue */

/* `<dialog>` natif : centrage, pile d'affichage et fermeture par Échap sont
   gérés par le navigateur. Rien à charger, rien à superviser.
   Les boîtes sont rendues hors du tableau : dépliées dans une ligne, elles
   élargissaient le tableau au-delà de l'écran et la page partait en défilement
   horizontal — l'en-tête s'en trouvait coupé. */
dialog.boite {
  width: min(560px, calc(100vw - 2 * var(--e4)));
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--carte);
  color: var(--texte);
  box-shadow: 0 24px 60px #00000080;
}
dialog.boite::backdrop { background: #060911cc; }

.boite-tete {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4);
  border-bottom: 1px solid var(--trait);
}
.boite-tete > div { min-width: 0; flex: 1; }
.boite-tete b { display: block; font-size: 14px; }
.boite-tete span {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--texte-faible);
}

.boite-corps { padding: var(--e4); display: grid; gap: var(--e4); }

/* Champ et bouton sur une seule ligne, qui se replie sur les écrans étroits
   plutôt que de déborder. */
.ligne-champ { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.ligne-champ input, .ligne-champ select { flex: 1; min-width: 130px; }

/* La suppression est séparée du reste : sur une carte uniforme, le bouton
   rouge se cliquait en croyant refermer la boîte. */
.zone-danger {
  border: 1px solid #f0616b33;
  border-radius: 10px;
  background: var(--rouge-voile);
  padding: var(--e4);
}
.zone-danger b { display: block; color: var(--rouge); font-size: 13px; }
.zone-danger p {
  margin: var(--e2) 0 var(--e3);
  font-size: 12px; line-height: 1.6; color: var(--texte-faible);
}
.zone-danger .bascule { font-size: 12px; margin-bottom: var(--e3); }
.btn.danger { border-color: #f0616b66; color: var(--rouge); }
.btn.danger:hover { background: var(--rouge-voile); border-color: var(--rouge); }

/* Intitulé de groupe dans le menu. Discret volontairement : il classe, il ne
   se clique pas. Trop contrasté, il concurrence les entrées elles-mêmes. */
.menu .groupe {
  padding: var(--e4) var(--e4) var(--e2);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  opacity: .65;
}
.menu .groupe:first-child { padding-top: var(--e2); }

/* Le menu garde son rayon d'origine. Une pilule dans une liste verticale
   serrée ressemble à un bouton flottant, pas à une entrée de navigation. */
.menu a, .bas .btn { border-radius: var(--rond); }