/* Digital Food Ops — feuille de style unique.
   Mode jour par défaut, mode sombre en variante (menu du compte). */

:root {
  /* Mode jour par défaut. Le sombre reste disponible d'un clic depuis le menu
     du compte : toute la couleur passe par ces variables, aucune règle plus
     bas ne code une couleur en dur — c'est ce qui rend la bascule possible. */
  --fond:        #f5f6f8;
  --fond-2:      #ffffff;
  --fond-3:      #eef0f4;
  --fond-entete: rgba(255, 255, 255, .92);
  --bordure:     #dee2e9;
  --texte:       #1a1e26;
  --texte-2:     #58616f;
  --texte-3:     #667085;

  /* Orange de la marque Digital Food. */
  --accent:      #f0522a;
  --accent-fonce:#d2431d;
  /* L'accent en aplat passe partout, mais en TEXTE sur fond blanc l'orange
     tombe sous le seuil lisible. D'où une déclinaison plus sombre réservée au
     texte et aux bordures fines. */
  --accent-texte:#b23412;
  /* Ce qui s'écrit SUR un aplat d'accent. Blanc : sur l'orange de la marque,
     un texte sombre se lit mal et salit la couleur. */
  --sur-accent:  #ffffff;
  /* Orange des aplats QUI PORTENT du texte. L'orange de marque plein donne
     3,5:1 avec du blanc, sous le seuil lisible ; ce ton à peine plus soutenu
     atteint 4,6:1 sans qu'on le distingue de la marque à l'œil. Les traits,
     bordures et jauges, eux, gardent l'orange pur. */
  --accent-aplat:#d2431d;

  --alerte:      #d92d20;
  --ambre:       #b26f00;
  --bleu:        #1a73e8;

  /* Pastilles : fond, texte et bordure par couleur. */
  --accent-fond: rgba(240, 82, 42, .10);    --accent-doux:  #b23412;  --accent-bord: rgba(240, 82, 42, .32);
  --bleu-fond:   rgba(26, 115, 232, .10);   --bleu-texte:   #1558b0;  --bleu-bord:   rgba(26, 115, 232, .3);
  --ambre-fond:  rgba(178, 111, 0, .12);    --ambre-texte:  #8a5600;  --ambre-bord:  rgba(178, 111, 0, .3);
  --rouge-fond:  rgba(217, 45, 32, .10);    --rouge-texte:  #b42318;  --rouge-bord:  rgba(217, 45, 32, .28);
  --vert-fond:   rgba(18, 128, 92, .10);    --vert-texte:   #0f7a55;  --vert-bord:   rgba(18, 128, 92, .3);

  /* Couleurs des plateformes, pas les nôtres : le vert d'Uber Eats et le
     turquoise de Deliveroo. Elles n'ont pas suivi le passage à l'orange —
     c'est à leur couleur qu'on reconnaît une plateforme d'un coup d'œil. */
  --ue-fond:     rgba(6, 193, 103, .12);    --ue-texte:     #05743f;  --ue-bord:     rgba(6, 193, 103, .35);
  --deliveroo-fond: rgba(0, 204, 188, .12); --deliveroo-texte: #00706a; --deliveroo-bord: rgba(0, 204, 188, .35);

  /* Le violet de ce qui est PROMIS : un rappel ou un rendez-vous pris ne se
     lit ni comme une alerte ni comme un appel à passer sur-le-champ. */
  --violet-fond: rgba(109, 75, 184, .10);   --violet-texte: #5b3da1;  --violet-bord: rgba(109, 75, 184, .3);
  --violet:      #6d4bb8;

  /* Le turquoise du RENDEZ-VOUS. L'orange de la maison le confondait avec un
     bouton d'action, et le vert avec un appel abouti : il lui fallait une
     couleur à lui, que rien d'autre ne porte dans l'outil. */
  --turquoise-fond: rgba(13, 148, 136, .10); --turquoise-texte: #0b7f74; --turquoise-bord: rgba(13, 148, 136, .32);
  --turquoise:      #0d9488;

  --voile:       rgba(26, 30, 38, .45);
  --rayon:       10px;
  --ombre:       0 6px 20px rgba(26, 30, 38, .10);
}

:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond:        #0f1115;
  --fond-2:      #161a21;
  --fond-3:      #1d222b;
  --fond-entete: rgba(15, 17, 21, .92);
  --bordure:     #262d38;
  --texte:       #e6e9ef;
  --texte-2:     #9aa4b4;
  --texte-3:     #838da0;

  --accent:      #f0522a;
  --accent-fonce:#d2431d;
  --accent-texte:#ff7a52;
  --sur-accent:  #ffffff;
  --accent-aplat:#d2431d;

  --alerte:      #f0574d;
  --ambre:       #e0a300;
  --bleu:        #4a90e2;

  --accent-fond: rgba(240, 82, 42, .16);    --accent-doux:  #ff8a66;  --accent-bord: rgba(240, 82, 42, .32);
  --bleu-fond:   rgba(74, 144, 226, .14);   --bleu-texte:   #7db3ec;  --bleu-bord:   rgba(74, 144, 226, .3);
  --ambre-fond:  rgba(224, 163, 0, .14);    --ambre-texte:  #e8bd4a;  --ambre-bord:  rgba(224, 163, 0, .3);
  --rouge-fond:  rgba(240, 87, 77, .12);    --rouge-texte:  #f28a83;  --rouge-bord:  rgba(240, 87, 77, .28);
  --vert-fond:   rgba(74, 222, 128, .14);   --vert-texte:   #4ade80;  --vert-bord:   rgba(74, 222, 128, .3);

  --ue-fond:     rgba(6, 193, 103, .16);    --ue-texte:     #4ade80;  --ue-bord:     rgba(6, 193, 103, .32);
  --deliveroo-fond: rgba(0, 204, 188, .16); --deliveroo-texte: #3fd8cb; --deliveroo-bord: rgba(0, 204, 188, .32);

  --violet-fond: rgba(154, 126, 224, .16);  --violet-texte: #b9a3f0;  --violet-bord: rgba(154, 126, 224, .32);
  --violet:      #9a7ee0;

  --turquoise-fond: rgba(45, 212, 191, .16); --turquoise-texte: #5eead4; --turquoise-bord: rgba(45, 212, 191, .32);
  --turquoise:      #14b8a6;

  --voile:       rgba(0, 0, 0, .6);
  --ombre:       0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

h1 { font-size: 1.35rem; margin: 0; font-weight: 650; }
h2 { font-size: 1.1rem;  margin: 0; font-weight: 600; }
h3 { font-size: .95rem;  margin: 0; font-weight: 600; }

a { color: var(--bleu); }

/* ----------------------------------------------------------------- login */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-carte {
  width: min(380px, 100%);
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-marque, .entete-marque {
  font-weight: 700;
  letter-spacing: -.02em;
}
.login-marque { font-size: 1.5rem; margin-bottom: 12px; }
.login-marque span, .entete-marque span { color: var(--accent-texte); margin-left: 6px; }

.login-carte label { font-size: .85rem; color: var(--texte-2); }

#champ-code {
  font-size: 1.25rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  padding: 14px;
}

/* ---------------------------------------------------------------- entête */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: var(--fond-entete);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}

.onglets { display: flex; gap: 4px; flex: 1; }

.onglet {
  background: none;
  border: 0;
  color: var(--texte-2);
  font: inherit;
  font-weight: 550;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.onglet:hover { background: var(--fond-3); color: var(--texte); }
.onglet.actif { background: var(--fond-3); color: var(--texte); font-weight: 650; box-shadow: inset 0 0 0 1px var(--bordure); }

.entete-compte { display: flex; align-items: center; gap: 10px; }
.moi-nom { font-size: .9rem; color: var(--texte-2); }

/* Largeur de travail. 1240 px datait d'une maquette et laissait un tiers de
   l'écran vide sur un poste large, ce qui comprimait les tableaux au point de
   faire passer les boutons d'action à la ligne. L'outil affiche des tableaux,
   pas de la prose : il occupe la place disponible. */
main { padding: 24px 24px 64px; max-width: 1800px; margin: 0 auto; }

/* L'en-tête suit la même largeur, sinon la marque flotte tout à gauche pendant
   que le contenu commence 200 px plus loin. */
.entete { padding-left: max(20px, calc((100vw - 1800px) / 2 + 24px)); }

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.barre-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.periode { min-width: 130px; text-align: center; font-weight: 600; text-transform: capitalize; }

/* -------------------------------------------------------------- contrôles */

input, select, textarea {
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--texte);
  font: inherit;
  padding: 9px 11px;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}
textarea { resize: vertical; min-height: 94px; }
select { cursor: pointer; }
/* Le champ heure garde la hauteur des autres contrôles : sans cette ligne,
   l'horloge native l'épaissit d'un pixel ou deux et la paire date/heure
   cesse d'être alignée. */

.barre-actions input, .barre-actions select { width: auto; min-width: 190px; }

.btn {
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--texte);
  font: inherit;
  font-weight: 550;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--texte-3); }
.btn-primaire { background: var(--accent-aplat); border-color: var(--accent-aplat); color: var(--sur-accent); }
.btn-primaire:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.btn-discret { background: none; border-color: transparent; color: var(--texte-2); }
.btn-discret:hover { background: var(--fond-3); color: var(--texte); border-color: transparent; }
.btn-danger { color: var(--alerte); }

/* Un bouton d'action rouge PLEIN garde un texte blanc : sans cela, la règle
   `.btn-danger` repeignait le libellé en rouge sur un fond rouge. */
.btn-primaire.btn-danger {
  background: var(--alerte);
  border-color: var(--alerte);
  color: #fff;
}
.btn-primaire.btn-danger:hover { filter: brightness(.93); }
.btn-petit { padding: 5px 10px; font-size: .85rem; }
/* État retenu d'un bouton de choix (largeur d'une carte de skill). */
.btn-actif { border-color: var(--accent-texte); color: var(--accent-texte); }

.erreur { color: var(--alerte); font-size: .88rem; margin: 4px 0 0; min-height: 1.2em; }

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--fond-3);
  color: var(--texte-2);
  border: 1px solid var(--bordure);
}
.badge-actif     { background: var(--vert-fond);   color: var(--vert-texte);  border-color: var(--vert-bord); }
.badge-prospect  { background: var(--bleu-fond);  color: var(--bleu-texte);  border-color: var(--bleu-bord); }
.badge-pause     { background: var(--ambre-fond); color: var(--ambre-texte); border-color: var(--ambre-bord); }
.badge-perdu     { background: var(--rouge-fond); color: var(--rouge-texte); border-color: var(--rouge-bord); }
.badge-doublon,
.badge-obsolete  { background: var(--rouge-fond); color: var(--rouge-texte); border-color: var(--rouge-bord); }
.badge-brouillon { background: var(--ambre-fond); color: var(--ambre-texte); border-color: var(--ambre-bord); }
.badge-ubereats  { background: var(--ue-fond);        color: var(--ue-texte);        border-color: var(--ue-bord); }
.badge-deliveroo { background: var(--deliveroo-fond); color: var(--deliveroo-texte); border-color: var(--deliveroo-bord); }

/* ------------------------------------------------------------------ KPI */

.kpi-groupe { margin-bottom: 28px; }
.kpi-groupe > h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texte-3);
  margin-bottom: 10px;
}

.kpi-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.kpi-carte {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px;
}
.kpi-libelle { font-size: .85rem; color: var(--texte-2); margin-bottom: 8px; }
.kpi-valeur  { font-size: 1.75rem; font-weight: 680; letter-spacing: -.02em; }
.kpi-valeur.vide { color: var(--texte-3); font-weight: 400; font-size: 1.2rem; }
.kpi-carte input { margin-top: 6px; font-size: 1.1rem; font-weight: 600; }
.kpi-source {
  float: right;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-3);
}

/* -------------------------------------------------------------- clients */

.client-carte {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-bottom: 12px;
  overflow: hidden;
}

.client-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.client-tete:hover { background: var(--fond-3); }
.client-nom { font-weight: 620; font-size: 1.02rem; }
.client-resume { color: var(--texte-2); font-size: .87rem; margin-left: auto; text-align: right; }
.chevron { color: var(--texte-3); transition: transform .15s; }
.client-carte.ouvert .chevron { transform: rotate(90deg); }

.client-corps { padding: 0 16px 16px; border-top: 1px solid var(--bordure); }

/* Un dossier archivé reste lisible mais visiblement hors du travail courant.
   L'opacité ne porte que sur l'en-tête : une fois ouvert, on consulte son
   historique et il doit se lire normalement. */
.client-carte.archive > .client-tete { opacity: .55; }
.client-carte.archive { border-style: dashed; }

.bloc { margin-top: 16px; }
.bloc-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bloc-tete h3 { color: var(--texte-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }

.ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ligne-principal { font-weight: 580; }
.ligne-detail { color: var(--texte-2); font-size: .87rem; }
.ligne-actions { margin-left: auto; display: flex; gap: 4px; }
.ligne .prestations { width: 100%; color: var(--texte-3); }

.ligne-montant { font-weight: 650; font-variant-numeric: tabular-nums; }

.vide-message {
  color: var(--texte-3);
  font-size: .9rem;
  padding: 10px 12px;
  border: 1px dashed var(--bordure);
  border-radius: 8px;
}

/* --------------------------------------------------------------- skills */

/* Six colonnes : le plus petit nombre divisible par 2 et par 3, donc le seul
   qui permette à la fois des demies et des tiers. Les cartes d'une même rangée
   sont étirées à la hauteur de la plus haute — c'est ce qui aligne les boutons
   de pied malgré des descriptions de longueurs très inégales. */
.skills-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: stretch;
}

.skill-carte[draggable=true] { cursor: grab; }
.skill-carte.en-deplacement { opacity: .4; outline: 2px dashed var(--accent); }

.poignee { color: var(--texte-3); cursor: grab; user-select: none; letter-spacing: -2px; }

/* Les réglages d'agencement sont poussés à droite du pied de carte, à côté des
   actions, et restent alignés d'une carte à l'autre grâce à l'étirement. */
.reglages { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.largeurs, .decalage { display: flex; gap: 2px; }
.decalage .btn { padding: 5px 9px; }
.largeurs { display: flex; gap: 2px; margin-left: auto; }

.skill-carte {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skill-carte.pale { opacity: .58; }
.skill-tete { display: flex; align-items: start; gap: 8px; flex-wrap: wrap; }
.skill-tete h3 { flex: 1; min-width: 160px; }
.skill-slug {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .76rem;
  color: var(--texte-3);
}
.skill-resume { font-size: .89rem; color: var(--texte-2); }
.skill-declencheurs {
  font-size: .84rem;
  color: var(--texte-2);
  background: var(--fond-3);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
}
.skill-notes {
  font-size: .84rem;
  color: var(--ambre-texte);
  background: var(--ambre-fond);
  border-radius: 6px;
  padding: 8px 10px;
}
/* margin-top:auto colle le pied en bas de carte : avec des cartes étirées à la
   même hauteur, les boutons s'alignent d'une carte à l'autre. Le retour à la
   ligne évite que les réglages débordent d'une carte au tiers de largeur. */
.skill-pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

/* --------------------------------------------------------------- équipe */

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.table th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--bordure); }
.table tr:last-child td { border-bottom: 0; }
.table tr.inactif { opacity: .5; }

/* Les colonnes de chiffres sont alignées à droite et en chasse tabulaire :
   sans ça les montants ne s'empilent pas et on ne peut pas comparer deux
   lignes d'un coup d'œil. */
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .num.negatif { color: var(--alerte); }
.table .tronque { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .part { width: 130px; }

.jauge {
  display: block;
  height: 7px;
  min-width: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-fonce), var(--accent));
}

/* Un tableau large ne doit jamais élargir la page : il défile dans son coin. */
.kpi-groupe > .table,
.kpi-groupe .table { display: table; }
.kpi-groupe { overflow-x: auto; }

.code-affiche {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.4rem;
  letter-spacing: .1em;
  text-align: center;
  background: var(--fond-3);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  user-select: all;
}

/* ---------------------------------------------------------------- modal */

.modal-fond {
  position: fixed;
  inset: 0;
  background: var(--voile);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  box-shadow: var(--ombre);
}
.modal-entete {
  position: sticky;
  top: 0;
  background: var(--fond-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--bordure);
}
#modal-corps { padding: 20px; }

.champ { margin-bottom: 14px; }
.champ > label {
  display: block;
  font-size: .82rem;
  color: var(--texte-2);
  margin-bottom: 5px;
}
.champ-aide { font-size: .78rem; color: var(--texte-3); margin-top: 4px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cases { display: flex; gap: 16px; padding-top: 4px; }
.cases label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: .92rem; }
.cases input { width: auto; }

.modal-pied {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
}

/* Le bouton de retour : présent partout, discret, jamais dans le chemin.
   Il se tient à droite, là où la barre flottante de prospection ne va pas. */
.btn-flottant {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  color: var(--texte-2);
  box-shadow: var(--ombre);
  cursor: pointer;
}
.btn-flottant:hover { color: var(--accent-texte); border-color: var(--accent-bord); }
.btn-flottant svg { width: 21px; height: 21px; }

.retours-bloc { padding: 14px 16px 16px; margin-bottom: 16px; }
.retour {
  padding: 12px 0;
  border-top: 1px solid var(--bordure);
}
.retour.traite { opacity: .6; }
.retour-tete { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.retour-qui { font-weight: 650; }
.retour-ou {
  padding: 1px 8px; border-radius: 999px;
  background: var(--fond-3); border: 1px solid var(--bordure);
  font-size: .76rem; color: var(--texte-2);
}
.retour-quand { margin-left: auto; font-size: .78rem; color: var(--texte-3); }
.retour-texte { margin: 7px 0 9px; line-height: 1.55; white-space: pre-line; }
.retour-actions { display: flex; gap: 8px; }

.bloc-reglage { padding: 16px 18px 18px; margin-bottom: 16px; max-width: 640px; }
.reglage-intro { margin: 2px 0 14px; }
.reglage-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.notif-ligne {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--bordure); font-size: .88rem;
}
.notif-statut {
  padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 650;
  background: var(--vert-fond); color: var(--vert-texte); border: 1px solid var(--vert-bord);
}
.notif-ligne.echec .notif-statut {
  background: var(--rouge-fond); color: var(--rouge-texte); border-color: var(--rouge-bord);
}
.notif-sujet { font-weight: 600; }
.notif-num { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.notif-quand { margin-left: auto; font-size: .78rem; color: var(--texte-3); }
/* L'erreur de Meta, en entier : c'est elle qui dit quoi corriger. */
.notif-erreur {
  flex-basis: 100%; margin-top: 4px; font-size: .8rem; line-height: 1.45;
  color: var(--rouge-texte);
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 11px 18px;
  box-shadow: var(--ombre);
  z-index: 100;
}
.toast.erreur-toast { border-color: var(--alerte); color: var(--rouge-texte); }

/* La barre des étapes flotte en bas de l'écran de prospection : un message
   posé à vingt-quatre pixels du bord lui tombait dessus et masquait la
   moitié des étapes. Il se range au-dessus d'elle, et nulle part ailleurs. */
body:has(#vue-prospection:not(.hidden) .pros-dock) .toast { bottom: 96px; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 720px) {
  .entete { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
  .onglets { order: 3; width: 100%; overflow-x: auto; }
  .entete-compte { margin-left: auto; }
  main { padding: 16px 14px 48px; }
  .champs-2 { grid-template-columns: 1fr; }
  .client-resume { margin-left: 0; width: 100%; text-align: left; }
  .barre-actions { width: 100%; }
  .barre-actions input, .barre-actions select { flex: 1; min-width: 0; }
}


/* ------------------------------------------------------- avatar & compte */

.compte { position: relative; }

/* Orange volontairement : c'est le seul élément de l'interface qui identifie
   la personne, il ne doit se confondre ni avec le vert des actions ni avec le
   rouge des alertes. */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--accent-aplat);
  color: var(--sur-accent);
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  cursor: pointer;
}
.avatar:hover { filter: brightness(1.08); }
.avatar:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }

.menu-compte {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  box-shadow: var(--ombre);
  padding: 6px;
  z-index: 40;
}
.menu-compte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 6px;
}
.menu-compte-nom { font-weight: 600; }
.menu-compte-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--texte);
  font: inherit;
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
}
.menu-compte-item:hover { background: var(--fond-3); }
.menu-compte-aide { color: var(--texte-3); font-size: .8rem; }

/* ---------------------------------------------------------- sous-onglets */

.sous-onglets {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 20px;
}
.sous-onglet {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--texte-2);
  font: inherit;
  font-weight: 550;
  padding: 9px 14px;
  margin-bottom: -1px;
  cursor: pointer;
}
.sous-onglet:hover { color: var(--texte); }
.sous-onglet.actif { color: var(--texte); border-bottom-color: var(--accent); }

/* --------------------------------------------------- agencement Activity */

/* Les deux réglages de l'écran — quels clients, quelles semaines — restent
   visibles en permanence : le portefeuille à gauche, le calendrier à droite.
   Les panneaux dépliants d'avant les cachaient derrière un clic chacun. */
.activity-agencement {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.lateral { position: sticky; top: 76px; }

.etab-liste { max-height: calc(100vh - 320px); overflow-y: auto; }

.etab-tous {
  width: 100%;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--accent-texte);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  margin-bottom: 4px;
  cursor: pointer;
}
.etab-tous:hover:not(:disabled) { background: var(--fond-3); }
.etab-tous:disabled { color: var(--texte-3); cursor: default; }

.etab-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .89rem;
}
.etab-ligne:hover { background: var(--fond-3); }

/* La case native est masquée sans être retirée du DOM : elle reste la source
   de vérité pour l'état coché et pour le clavier. */
.etab-ligne input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.coche {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--texte-3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .12s, border-color .12s;
}
.etab-ligne input:checked + .coche {
  background: var(--accent-aplat);
  border-color: var(--accent-aplat);
}
.coche::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--sur-accent);
  border-bottom: 2px solid var(--sur-accent);
  border-radius: 1px;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity .12s;
}
.etab-ligne input:checked + .coche::after { opacity: 1; }
.etab-ligne input:focus-visible + .coche { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Les enseignes sont longues et le panneau est étroit : on tronque plutôt que
   de laisser le nom passer à la ligne et casser l'alignement des cases. */
.etab-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------- périodes (semaines / mois) */

/* La bascule Semaine / Mois, en tête du cadre de droite. */
.bascule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--fond-3);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 12px;
}
.bascule-btn {
  border: 0;
  background: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  color: var(--texte-2);
  padding: 7px 0;
  cursor: pointer;
}
.bascule-btn:hover { color: var(--texte); }
.bascule-btn.actif { background: var(--accent-aplat); color: var(--sur-accent); }

/* Une frame par période, la sélection en accent. */
.periode-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}
.periode-cadre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 10px 14px;
  font: inherit;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s;
}
.periode-cadre:hover { border-color: var(--accent-bord); }
.periode-cadre.sel {
  background: var(--accent-aplat);
  border-color: var(--accent-aplat);
  color: var(--sur-accent);
}
.periode-cadre-nom { font-weight: 600; }
.periode-cadre-nom.mois { text-transform: capitalize; }
.periode-cadre-aide { font-size: .78rem; color: var(--texte-3); }
.periode-cadre.sel .periode-cadre-aide { color: rgba(255, 255, 255, .82); }

/* -------------------------------------------------- agencement Activité */

/* Trois colonnes, trois questions : ce qui arrive, ce que je dois faire, ce
   que je ne dois pas perdre de vue. */
.activite-agencement {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.echeance {
  padding: 10px 2px;
  border-top: 1px solid var(--bordure);
}
.echeance:first-child { border-top: 0; }
.echeance-quand {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texte-3);
}
/* Ce qui tombe aujourd'hui se distingue : c'est la seule ligne sur laquelle
   il est trop tard pour prévenir le client. */
.echeance-quand.aujourdhui { color: var(--accent-texte); }
.echeance-qui { font-weight: 580; margin-top: 2px; }
.echeance-detail { color: var(--texte-2); font-size: .84rem; }
.echeance-montant {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 650;
  margin-top: 2px;
}

/* --------------------------------------------------- cadres portefeuille */

/* Un cadre par client : la frontière entre deux dossiers se voit sans qu'on
   ait à tracer un trait, et un dossier déplié ne déborde plus sur le suivant.
   À l'intérieur, les niveaux se distinguent par leur retrait et leur graisse. */
.cadre-dossier { padding: 0; overflow: hidden; }

.dossier-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
}
.dossier-tete:hover { background: var(--fond-3); }
.nom-dossier { font-weight: 620; }
.compte-marques { color: var(--texte-2); font-size: .88rem; }

/* Pousse ce qui suit à droite : pastilles et compteur s'alignent quel que
   soit le nom du dossier. */
.niv-droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}

.dossier-corps { border-top: 1px solid var(--bordure); padding: 4px 0; }

.niv-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
}
.niv-2:hover { background: var(--fond-3); }
.niv-2 .niv-nom { font-weight: 560; }

.niv-3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  color: var(--texte-2);
  font-size: .92rem;
}

.chevron { color: var(--texte-3); transition: transform .15s; display: inline-block; }
.cadre-dossier.ouvert > .dossier-tete > .chevron,
.niv-2.ouvert > .chevron { transform: rotate(90deg); }

.indent-1 { padding-left: 42px; }
.indent-2 { padding-left: 68px; }

/* ------------------------------------------------ fiche établissement */

/* Le nom d'une fiche EST son titre : on le corrige en cliquant dessus, sans
   le réécrire une seconde fois dans le corps. */
.titre-editable { cursor: text; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.titre-editable:hover { background: var(--fond-3); }
.titre-champ {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--fond-3);
  border: 0;
  padding: 0;
  width: 100%;
}

/* Chaque bloc porte son crayon, visible en permanence : le chercher au survol
   revient à ne pas savoir qu'il existe. */
.bloc-fiche { position: relative; }
.bloc-fiche .kpi-libelle { display: flex; align-items: center; gap: 6px; }
.bloc-crayon {
  background: none;
  border: 0;
  color: var(--texte-3);
  font-size: .85rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.bloc-crayon:hover { color: var(--accent-texte); background: var(--fond-3); }

/* L'archivage ferme la fiche par une ligne discrète : c'est un état, pas une
   donnée de contrat, et lui donner une carte au milieu des autres le mettait
   au même rang que le prix. En rouge quand même — c'est cette date qui gèle
   la LTV. */
.mention-archive {
  margin: 16px 0 0;
  font-size: .84rem;
  color: var(--alerte);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mention-date { display: inline-block; min-width: 160px; }
.mention-date .datepicker-champ {
  padding: 3px 8px;
  font-size: .84rem;
  color: var(--alerte);
  border-color: var(--rouge-bord);
  background: var(--rouge-fond);
}
.mention-date .datepicker-champ.vide .datepicker-valeur { color: var(--alerte); }

.bloc-editeur { margin-top: 6px; }
.bloc-editeur input, .bloc-editeur select { font-size: .95rem; padding: 6px 9px; }

/* L'écran de gestion : les chiffres en tête, le détail marque par marque.
   Deux cartes se modifient — la date de démarrage à tout moment, la LTV
   seulement quand on le demande explicitement. */
.gestion-chiffres .kpi-carte { display: flex; flex-direction: column; }


.gestion-chiffres { margin-bottom: 18px; }
.gestion .bloc { margin-top: 0; }

/* ------------------------------------------------------------ paiements */

/* Une échéance encaissée s'efface visuellement : ce qui reste à faire doit
   ressortir du tableau, pas se noyer dans ce qui est fait. */
.ligne-paiement.payee td { color: var(--texte-2); }
.paye-le { color: var(--ue-texte); font-weight: 550; }

/* --------------------------------------------------------------- rappels */


.rappel-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-top: 1px solid var(--bordure);
}
.rappel-ligne:first-child { border-top: 0; }
.rappel-texte { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rappel-titre { font-weight: 580; }
.rappel-quand { font-size: .84rem; color: var(--texte-2); }
.rappel-ligne.pale .rappel-titre { color: var(--texte-3); text-decoration: line-through; }

.rappels-archives { margin-top: 14px; }
.rappels-archives summary {
  cursor: pointer;
  color: var(--texte-2);
  font-size: .9rem;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------- pilotage */

.pilotage-mois {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

/* Le filtre de Growth : deux dates, et un raccourci pour cadrer sur un mois
   entier. Les dates restent la référence — le raccourci ne fait que les
   remplir, ce qui évite deux états de filtre concurrents. */
.growth-filtre {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.growth-filtre .champ { margin: 0; }
.growth-filtre .champ input { width: 160px; }
.growth-filtre .btn { text-transform: capitalize; }

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

/* Deux ou trois options tiennent côte à côte : une liste déroulante ajouterait
   un clic pour révéler ce qui rentre déjà sur une ligne. */
.choix { display: flex; gap: 8px; flex-wrap: wrap; }

/* Les options se partagent la largeur à parts égales : deux boutons font
   moitié-moitié, trois font un tiers chacun. Aucune option ne paraît plus
   importante qu'une autre du seul fait de la longueur de son mot. */
.choix-parts .choix-btn { flex: 1 1 0; min-width: 0; }

.choix-btn {
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--texte-2);
  font: inherit;
  font-size: .88rem;
  font-weight: 550;
  padding: 11px 16px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.choix-btn:hover { border-color: var(--texte-3); color: var(--texte); }

/* Sélection en orange TEINTÉ, pas en aplat plein : ces boutons vivent au
   milieu d'un formulaire, un à-plat de marque y crie plus qu'il n'informe. */
.choix-btn.actif {
  background: var(--accent-fond);
  border-color: var(--accent);
  color: var(--accent-texte);
  font-weight: 650;
}

/* Un service garde la couleur de sa plateforme une fois choisi : c'est à
   elle qu'on le reconnaît partout ailleurs dans l'outil. */
.choix-btn.choix-ubereats.actif {
  background: var(--ue-fond); border-color: var(--ue-bord); color: var(--ue-texte);
}
.choix-btn.choix-deliveroo.actif {
  background: var(--deliveroo-fond); border-color: var(--deliveroo-bord); color: var(--deliveroo-texte);
}

/* ------------------------------------------------------------ calendrier */

/* Le calendrier du navigateur ne se laisse pas habiller : celui-ci est du
   HTML ordinaire, il suit donc les mêmes variables que le reste — accent
   orange, mode sombre compris. */
.datepicker { position: relative; }

.datepicker-champ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--texte);
  font: inherit;
  padding: 9px 11px;
  cursor: pointer;
  text-align: left;
}
.datepicker-champ:hover { border-color: var(--texte-3); }
.datepicker-champ:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.datepicker-champ.vide .datepicker-valeur { color: var(--texte-3); }
.datepicker-icone { color: var(--texte-3); font-size: .7rem; }

.datepicker-panneau {
  position: absolute;
  /* Au-dessus de la fenêtre modale (50), qu'ils débordent volontairement. */
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: 268px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  box-shadow: var(--ombre);
  padding: 10px;
}

.datepicker-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.datepicker-mois { font-weight: 600; text-transform: capitalize; font-size: .95rem; }

.datepicker-jours, .datepicker-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datepicker-jours span {
  text-align: center;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--texte-3);
  padding-bottom: 4px;
}

.datepicker-jour {
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--texte);
  font: inherit;
  font-size: .86rem;
  padding: 7px 0;
  cursor: pointer;
}
.datepicker-jour:hover { background: var(--fond-3); }
.datepicker-jour.hors-mois { color: var(--texte-3); opacity: .5; }
/* Un jour passé reste lisible — on voit où l'on est dans le mois — mais ne
   se clique pas : on ne programme pas un rappel pour avant-hier. */
.datepicker-jour:disabled { opacity: .3; cursor: default; }
.datepicker-jour:disabled:hover { background: none; }
/* Aujourd'hui se repère à son cerne, la sélection à son aplat : deux
   informations différentes, deux traitements différents. */
.datepicker-jour.aujourdhui { box-shadow: inset 0 0 0 1.5px var(--accent-bord); font-weight: 650; }
.datepicker-jour.sel {
  background: var(--accent-aplat);
  color: var(--sur-accent);
  font-weight: 650;
  box-shadow: none;
}

.datepicker-pied {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bordure);
}
.datepicker-lien {
  background: none;
  border: 0;
  color: var(--accent-texte);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.datepicker-lien:hover { background: var(--fond-3); }

/* ---------------------------------------------------------------- courbe */

.courbe-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* La carte d'une métrique est aussi le bouton qui la trace : celle qui est à
   l'écran se marque, les autres restent des cartes ordinaires. */
.carte-metrique {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  border: 1px solid var(--bordure);
  transition: border-color .12s;
}
.carte-metrique:hover { border-color: var(--texte-3); }
.carte-metrique.actif {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.carte-metrique.actif .kpi-libelle { color: var(--accent-texte); font-weight: 650; }

/* Le graphique a son propre fond blanc : posé à même la page, il flottait
   sans limite visible. */
.courbe-cadre {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px 18px;
  margin-top: 18px;
}

/* Métrique, granularité et période : trois réglages qui posent la question,
   au-dessus du tracé qui y répond. */
.courbe-reglages {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.courbe-reglages .champ { margin: 0; }
.courbe-reglages .champ label { font-size: .78rem; }
.courbe-reglages .datepicker-champ { padding: 5px 9px; font-size: .85rem; min-width: 150px; }
.bascule-courbe { margin-bottom: 0; padding: 3px; }
.bascule-courbe .bascule-btn { padding: 5px 14px; font-size: .82rem; }

.courbe-axe-y { text-anchor: start !important; }
.courbe-btn {
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--texte-2);
  font: inherit;
  font-size: .82rem;
  font-weight: 550;
  padding: 5px 12px;
  cursor: pointer;
}
.courbe-btn:hover { color: var(--texte); }
.courbe-btn.actif {
  background: var(--accent-aplat);
  border-color: var(--accent-aplat);
  color: var(--sur-accent);
}

.courbe { width: 100%; height: auto; max-height: 260px; display: block; }
.courbe-axe { stroke: var(--bordure); stroke-width: 1; }
.courbe-trace {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.courbe-point { fill: var(--accent); }
.courbe-legende {
  fill: var(--texte-3);
  font-size: 11px;
  text-anchor: middle;
  font-family: inherit;
}

/* ---------------------------------------------------------- à construire */

.a-venir {
  background: var(--fond-2);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  padding: 28px;
  max-width: 640px;
}
.a-venir h2 { margin-bottom: 10px; }
.a-venir p { color: var(--texte-2); margin: 0 0 12px; }

/* Sous 1200 px les trois colonnes ne tiennent plus : les cadres latéraux
   passent au-dessus du contenu, dans l'ordre de lecture. */
@media (max-width: 1200px) {
  .activity-agencement, .activite-agencement { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .etab-liste { max-height: 288px; }
}

@media (max-width: 720px) {
  /* Sur mobile la grille tombe à une colonne : largeurs et décalages n'ont
     plus de sens sur 375 px de large, chaque carte prend toute la place. */
  .skills-grille { grid-template-columns: 1fr; }
  .skills-grille .skill-carte { grid-column: 1 / -1 !important; }
}

/* --------------------------------------------------------- prospection */

.compteur-etape {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--fond-3);
  color: var(--texte-2);
  font-size: .7rem;
  font-weight: 700;
}
.sous-onglet.actif .compteur-etape { background: var(--accent-aplat); color: var(--sur-accent); }

/* Les rappels en retard sont des engagements pris avec quelqu'un : le bandeau
   les annonce au lieu de bloquer la saisie, comme le faisait le Sheet en
   grisant les numéros — un blocage sans explication laisse chercher. */
.alerte-retard {
  background: var(--ambre-fond);
  border: 1px solid var(--ambre-bord);
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin-bottom: 18px;
  color: var(--texte);
  font-size: .92rem;
}
.alerte-retard strong { color: var(--ambre-texte); }

.echeance-passee { color: var(--ambre-texte); font-weight: 600; }

.tel {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--texte);
  text-decoration: none;
}
.tel:hover { color: var(--bleu); text-decoration: underline; }

/* Les actions restent sur une seule ligne, à droite : c'est la colonne qu'on
   parcourt du regard en enchaînant les appels. */
/* Les actions tiennent sur une ligne : les voir se replier en deux rangées
   décalait la hauteur des lignes et cassait la lecture en enfilade. Le
   conteneur défilant plus bas prend le relais si l'écran est vraiment étroit. */
.actions-prospect {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Un tableau large défile dans son cadre plutôt que d'élargir la page. */
.table-defilante { overflow-x: auto; }
.table-defilante > .table { min-width: 760px; }

/* ----------------------------------------------------- rattachements */

/* Un libellé sans marque est un trou dans les chiffres : il se voit, dans le
   filtre comme dans les tableaux, au lieu de se fondre dans la liste. */
.puce-orpheline { color: var(--ambre-texte); font-size: 1.2rem; line-height: 0; margin-left: auto; }

.etab-rattachement { display: flex; align-items: center; gap: 8px; }
.etab-rattachement select { min-width: 190px; }
.etab-rattachement select.vide { border-color: var(--ambre-bord); color: var(--ambre-texte); }

.libelle-brut {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem;
}

/* ---------------------------------------------------- menu contextuel */

#menu-contextuel {
  position: fixed;
  top: 0;
  left: 0;
  /* `.menu-compte` ancre son bord droit à 0 pour tomber sous l'avatar. Ici la
     position vient du curseur : sans annuler ce `right`, l'élément est tenu par
     ses deux bords à la fois et s'étire sur toute la largeur de la fenêtre. */
  right: auto;
  width: max-content;
  min-width: 210px;
  max-width: 280px;
  z-index: 60;
}

/* Un client masqué reste lisible mais visiblement mis de côté. Il n'est pas
   grisé comme un archivé : il est toujours actif, seulement rangé. */
.client-carte.masque > .client-tete { opacity: .6; }
.client-carte.masque { border-left: 3px solid var(--texte-3); }

.pied-masques {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--texte-2);
  font-size: .88rem;
}

/* Une action irréversible ne se signale pas seulement par une couleur de
   texte : le bouton est plein, on ne le confond pas avec « Annuler ». */
.btn-supprimer {
  background: var(--alerte);
  border-color: var(--alerte);
  color: #fff;
}
.btn-supprimer:hover { filter: brightness(.92); border-color: var(--alerte); }
.menu-compte-danger { color: var(--alerte); }

/* ------------------------------------------------------ cadres & niveaux */

/* Un cadre = un domaine métier (Contestation, Chiffres…) ou un groupe
   d'établissements. Le contenant est discret, le contenu est la vedette. */
.cadre {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.cadre-titre {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 650;
  font-size: 1.02rem;
  margin-bottom: 10px;
}
.cadre-titre-aide {
  font-size: .74rem;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-3);
}

/* Lignes compactes des skills : le détail s'ouvre par ligne. */
.skill-ligne { border-top: 1px solid var(--bordure); }
.skill-ligne:first-of-type { border-top: 0; }
.skill-ligne-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  cursor: pointer;
}
.skill-ligne-tete:hover { background: var(--fond-3); border-radius: 6px; }
.skill-ligne-nom { font-weight: 580; }
.skill-ligne-tete .skill-slug { margin-left: auto; }
.skill-ligne-corps { padding: 4px 8px 12px 26px; display: flex; flex-direction: column; gap: 8px; }

/* Les trois niveaux du portefeuille. */
.niveau-1 { font-weight: 650; }
.niveau-marque { border-top: 1px dashed var(--bordure); padding: 8px 0 8px 14px; }
.niveau-2 { font-weight: 580; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.niveau-3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 0 5px 18px;
  font-size: .92rem;
}
.champ-mp { width: 220px; padding: 5px 9px; font-size: .88rem; }
.champ-mp.champ-id { width: 260px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.libelles-lies { flex-basis: 100%; padding-left: 2px; }

/* Indentation de l'arbre des ventes. */
.ligne-groupe td:first-child { font-weight: 600; }
.ligne-marque td, .ligne-plateforme td { border-bottom-style: dashed; }
.indent-1 { padding-left: 22px; }
.indent-2 { padding-left: 44px; }
.ligne-plateforme { color: var(--texte-2); }
.etab-ligne-marque { padding-left: 30px; }

/* Couleurs de ROI — seuils métier : ≥3 rentable, 1–3 à surveiller, <1 à perte. */
.roi-bon     { color: var(--ue-texte); font-weight: 650; }
.roi-moyen   { color: var(--ambre-texte); font-weight: 650; }
.roi-mauvais { color: var(--alerte); font-weight: 650; }

/* ------------------------------------------------- détail d'un prospect */

.rdv-adresse { margin-top: 2px; }

/* Le chevron pivote vers le bas quand le dépliant est ouvert : l'état se lit
   sans avoir à comparer avec les lignes voisines. */
.chevron-detail {
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 7px;
  transition: transform .15s ease;
}
.chevron-detail.ouvert { transform: rotate(90deg); }

.ligne-detail-prospect > td {
  background: var(--fond-3);
  padding: 10px 14px 12px;
  border-top: 0;
}
.detail-ligne { color: var(--texte-2); font-size: .87rem; line-height: 1.5; }
.detail-ligne + .detail-ligne { margin-top: 4px; }
.detail-titre {
  display: inline-block;
  min-width: 92px;
  color: var(--texte-3);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.etoiles { color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.etoile-vide { color: var(--bordure); }

/* ------------------------------------------------ zone d'activité */

.section-activite + .section-activite { margin-top: 22px; }

.section-tete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.section-tete h3 {
  color: var(--texte-2);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Une section verrouillée reste lisible : on doit voir ce qui attend derrière,
   sans pouvoir y toucher tant que la précédente n'est pas soldée. */
.section-activite.verrouillee .section-tete { opacity: .55; }
.cadenas { font-size: .8rem; line-height: 1; }

/* --------------------------------------------- Pilotage test (maquette) */

.ptest-agencement {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 250px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) { .ptest-agencement { grid-template-columns: 1fr; } }

.ptest-liste h3,
.ptest-panneau h3 {
  color: var(--texte-2);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}

.ptest-metrique {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .9rem;
  font-weight: 550;
  color: var(--texte-2);
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .12s;
}
.ptest-metrique:hover { border-color: var(--texte-3); color: var(--texte); }
.ptest-metrique.actif {
  background: var(--accent-fond);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent-texte);
  font-weight: 650;
}

.ptest-tete h2 { font-size: 1.5rem; letter-spacing: -.01em; }
.ptest-description { color: var(--texte-2); font-size: .9rem; margin-top: 2px; }
.ptest-valeur { font-size: 2rem; font-weight: 680; letter-spacing: -.02em; margin-top: 10px; }
.ptest-sous { color: var(--texte-3); font-size: .85rem; margin-left: 6px; font-weight: 400; }
.ptest-variation { display: block; margin-top: 4px; font-size: .85rem; font-weight: 600; }
.ptest-variation.bonne { color: var(--vert-texte); }
.ptest-variation.mauvaise { color: var(--rouge-texte); }
.ptest-variation.neutre { color: var(--texte-3); }

.ptest-graph { max-height: 380px; }
.ptest-barre { fill: var(--accent); }
.ptest-annotation { fill: var(--texte-2); font-weight: 600; }
.ptest-ratio { fill: var(--texte-3); }

.ptest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ptest-panneau .champ { margin-bottom: 12px; }
.ptest-panneau .datepicker-champ { width: 100%; }
.ptest-panneau select { width: 100%; }
.ptest-note { color: var(--texte-3); font-size: .87rem; }

.ptest-info {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  box-shadow: var(--ombre);
  padding: 5px 10px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.ptest-barre:hover { fill: var(--accent-fonce); }
.ptest-point { cursor: pointer; }

/* ------------------------------------------------ Acquisition (maquette) */

/* Un jour sous le seuil reste visible mais ne compte pas : il se grise. */
.ptest-barre.muette { fill: var(--bordure); }
.ptest-barre.muette:hover { fill: var(--texte-3); }

.acq-etape { display: flex; align-items: center; gap: 12px; }
.acq-etape-libelle {
  width: 128px;
  text-align: right;
  color: var(--texte-2);
  font-size: .88rem;
  font-weight: 550;
}
.acq-etape-piste { flex: 1; display: flex; align-items: center; gap: 10px; }
.acq-etape-barre {
  display: block;
  height: 34px;
  border-radius: 6px;
  background: var(--accent);
}
.acq-etape-valeur { font-weight: 680; font-size: 1.1rem; }
.acq-passage {
  margin: 10px 0 10px 140px;
  color: var(--texte-2);
  font-size: .85rem;
}
.acq-passage strong { color: var(--texte); }

/* --------------------------------------------------- Clients (maquette) */

.ptest-agencement.sans-panneau { grid-template-columns: 210px minmax(0, 1fr); }
/* La refonte a remonté les rubriques dans l'entête de la page : la colonne de
   gauche n'a plus rien à porter. */
.ptest-agencement.deux-colonnes { grid-template-columns: minmax(0, 1fr) 260px; }

.cli-graph { max-height: 420px; }
.cli-nom { text-anchor: end; font-size: 11.5px; }
.cli-ubereats { fill: var(--ue-texte); }
.cli-deliveroo { fill: var(--deliveroo-texte); }

.cli-legende {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
  color: var(--texte-2);
  font-size: .82rem;
}
.cli-pastille {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.badge-resilie { background: var(--rouge-fond); color: var(--rouge-texte); border-color: var(--rouge-bord); }

/* Un triangle discret : il manque une info sur cet établissement. Le survol
   dit laquelle. */
.alerte-manque { color: var(--ambre); font-size: .95rem; cursor: help; line-height: 1; }

/* Une période finie mais jamais importée : visible, pas cliquable. */
.periode-cadre.indisponible {
  opacity: .55;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Une ligne d'établissement arrêté : présente, assourdie. */
.ligne.inactif { opacity: .55; }

/* Les corrections d'exception restent pliées : rares par définition. */
details.exceptions { margin-top: 4px; }
details.exceptions summary {
  cursor: pointer;
  color: var(--texte-3);
  font-size: .82rem;
  font-weight: 600;
}

/* Les bandeaux d'hygiène : au-dessus de tout, centrés, une colonne sobre. */
#activite-alertes {
  max-width: 720px;
  margin: 0 auto 16px;
}
#activite-alertes .alerte-retard { text-align: center; }

/* Le + des rappels : petit, aligné à droite du titre. */
.cadre-titre { display: flex; align-items: center; gap: 8px; }
.cadre-titre .btn-plus {
  margin-left: auto;
  padding: 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ------------------------------- zone de prospection : file + à-venir */

.prospection-agencement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
  align-items: start;
}
.prospection-agencement.seule { grid-template-columns: 1fr; }
/* Sous 1200 px, la table des prospects et ses boutons d'action ne tiennent
   plus à côté du cadre : celui-ci passe dessous plutôt que de la rogner. */
@media (max-width: 1200px) {
  .prospection-agencement { grid-template-columns: 1fr; }
}

.rappel-avenir { padding: 9px 0; border-bottom: 1px solid var(--bordure); }
.rappel-avenir:last-child { border-bottom: 0; padding-bottom: 0; }
.rappel-avenir-quand {
  color: var(--accent-texte);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rappel-avenir-qui { font-weight: 600; margin: 1px 0; }

/* Une section repliée d'admin s'ouvre au clic ; celle du prospecteur non. */
.section-activite.repliee .section-tete {
  opacity: .75;
  cursor: pointer;
}
.section-activite.repliee .section-tete:hover { opacity: 1; }

/* ------------------------------------------------ la fenêtre d'appel */

.appel-numero {
  display: block;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent-texte);
  text-decoration: none;
  padding: 6px 0 2px;
}
.appel-aide { text-align: center; margin-bottom: 14px; }
.appel-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.appel-choix {
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  color: var(--texte);
  background: var(--fond-3);
  border: 2px solid var(--bordure);
  border-radius: 12px;
  padding: 18px 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.appel-choix:hover {
  border-color: var(--accent);
  background: var(--accent-fond);
  color: var(--accent-texte);
}
.appel-choix.danger { color: var(--alerte); }
.appel-choix.danger:hover { border-color: var(--alerte); background: var(--rouge-fond); }

/* Le numéro est devenu un bouton : il doit rester un lien à l'œil. */
button.tel {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--bleu-texte);
  text-align: left;
}
button.tel:hover { text-decoration: underline; }

.pagination-rappels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-2);
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pagination-rappels .btn[disabled] { opacity: .35; cursor: default; }

/* ------------------------------------------------- mails à envoyer */

.cadre-courriers { margin-bottom: 16px; }
.cadre-courriers .ligne { flex-wrap: nowrap; }
.cadre-courriers .ligne-detail { color: var(--texte-3); }

.courrier-sujet {
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 600;
}
textarea.courrier-corps {
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* L'icône qui ouvre la page plateforme, accrochée au titre de la fenêtre. */
.titre-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 6px;
  background: var(--fond-3);
  color: var(--texte-2);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: 2px;
}
.titre-lien:hover { background: var(--accent-fond); color: var(--accent-texte); }

/* ------------------------------------------------- console d'appel */

/* La bascule console / tableau, dans la barre de l'écran Prospection. */
.bascule-mode {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  border-radius: 9px;
}
.bascule-choix {
  font: inherit;
  font-size: .9rem;
  padding: 5px 13px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--texte-2);
  cursor: pointer;
}
.bascule-choix:hover { color: var(--texte); }
.bascule-choix.actif {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  padding: 4px 12px;
  font-weight: 600;
  color: var(--texte);
}

/* Le fil du jour à gauche, la fiche au centre. */
.console {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.console-cote > .cadre:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .console { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ le fil du jour */

.console-fil-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bordure);
}

.console-fil-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--bordure);
}
.console-fil-ligne:first-of-type { border-top: 0; }
.console-fil-qui { flex: 1; min-width: 0; }
.console-fil-nom {
  font-size: .92rem;
  color: var(--texte-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-fil-ligne.active .console-fil-nom { font-weight: 650; color: var(--texte); }
.console-fil-num {
  margin-top: 2px;
  font-size: .78rem;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}
.console-fil-rang {
  font-size: .76rem;
  color: var(--texte-3);
  white-space: nowrap;
}
.console-fil-rang.vif {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-fond);
  border: 1px solid var(--accent-bord);
  color: var(--accent-texte);
  font-weight: 650;
}

/* ----------------------------------------------------------- la fiche */

.console-fiche {
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.console-vide { padding: 48px 26px; text-align: center; }

.console-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 26px 16px;
}
.console-nom {
  margin: 0;
  flex: 1;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.console-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .console-colonnes { grid-template-columns: 1fr; }
}

.console-identite,
.console-suivi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 26px 22px;
}
.console-identite { border-right: 1px solid var(--bordure); }
@media (max-width: 900px) {
  .console-identite { border-right: 0; border-bottom: 1px solid var(--bordure); }
}

.console-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texte-3);
}

/* Un numéro qu'il ne faut pas composer se barre : la consigne doit tenir
   sans être lue, du coin de l'œil, au moment où la main part sur le clavier. */
.console-numero-valeur.barre {
  text-decoration: line-through;
  text-decoration-color: var(--rouge-texte);
  text-decoration-thickness: 2.5px;
  opacity: .55;
}

/* L'avertissement de carte : il passe avant le numéro parce qu'il se lit
   avant l'appel. Rouge, il ferme ; ambre, il oriente. */
.alerte-menu {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: var(--rayon);
  border: 1px solid;
}
.alerte-menu.porc { background: var(--rouge-fond); border-color: var(--rouge-bord); }
.alerte-menu.alcool { background: var(--ambre-fond); border-color: var(--ambre-bord); }
.alerte-titre { font-weight: 700; font-size: .95rem; }
.alerte-menu.porc .alerte-titre { color: var(--rouge-texte); }
.alerte-menu.alcool .alerte-titre { color: var(--ambre-texte); }
.alerte-conduite { margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--texte); }
.alerte-preuves {
  margin-top: 7px; font-size: .78rem; color: var(--texte-2);
  font-style: italic; line-height: 1.45;
}

.console-numero-valeur {
  margin-top: -6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: -.01em;
  color: var(--texte);
}
.console-manque { color: var(--texte-3); font-style: italic; font-size: .92rem; }

/* La distance jusqu'à nous : une mention, pas une étiquette. Le vert dit
   « on est du quartier » ; entre cinq et douze kilomètres le chiffre se lit
   sans couleur, parce qu'il n'est ni un argument ni un obstacle. */
.proximite { font-size: .82rem; white-space: nowrap; font-weight: 600; }
.proximite.pres    { color: var(--vert-texte); }
.proximite.secteur { color: var(--texte); }
.proximite.loin    { color: var(--rouge-texte); }
/* Cliquable, mais sans le bleu ni le souligné permanent d'un lien : la
   couleur dit déjà la proximité, c'est elle qu'on lit en premier. */
a.proximite.trajet { text-decoration: none; cursor: pointer; }
a.proximite.trajet:hover { text-decoration: underline; }


.console-coord {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .92rem;
  color: var(--texte-2);
}
.console-completer { align-self: flex-start; }

.console-faits { display: flex; gap: 22px; }
.console-faits > div { min-width: 0; }

.console-note {
  padding: 11px 13px;
  background: var(--fond-3);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  line-height: 1.5;
  white-space: pre-line;
}

/* ----------------------------------------------------------- le suivi */

.console-journal { display: flex; flex-direction: column; gap: 7px; }
.console-appel {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.console-appel.en-cours {
  border-style: dashed;
  border-color: var(--bleu-bord);
  background: var(--bleu-fond);
}
.console-appel-rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--fond-3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .72rem;
  font-weight: 600;
  color: var(--texte-2);
}
.console-appel-rang.vif {
  background: var(--bleu);
  color: #fff;
}
/* Quelqu'un a décroché : le combiné passe au vert. Muet, il reste gris —
   c'est la seule chose que le numéro d'ordre ne disait pas. */
.console-appel-rang.joint { background: var(--vert-fond); color: var(--vert-texte); }
/* Personne n'a décroché : rouge. Un appel qui n'a pas abouti se repère au
   premier coup d'œil dans une colonne d'appels qui, eux, ont abouti. */
.console-appel-rang.manque { background: var(--rouge-fond); color: var(--rouge-texte); }
/* La rencontre a eu lieu : turquoise, comme le rendez-vous qu'elle conclut. */
.console-appel-rang.tenu { background: var(--turquoise-fond); color: var(--turquoise-texte); }
.console-appel-issue.fin-tenu {
  background: var(--turquoise-fond); border-color: var(--turquoise-bord); color: var(--turquoise-texte);
}
.console-appel-titre { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; }
.console-appel.en-cours .console-appel-titre { color: var(--bleu-texte); }
.console-appel.en-cours .console-appel-quand { color: var(--bleu-texte); opacity: .75; }

/* Un rappel promis : violet. Le bleu reste l'appel qu'on passe maintenant,
   et le rendez-vous prend le turquoise — l'issue qu'on vise mérite sa propre
   couleur, qu'on ne confonde ni avec un rappel ni avec un bouton d'action. */
.console-appel.en-cours.rendezvous { border-color: var(--turquoise-bord); background: var(--turquoise-fond); }
.console-appel.en-cours.rendezvous .console-appel-titre { color: var(--turquoise-texte); }
.console-appel.en-cours.rendezvous .console-appel-quand { color: var(--turquoise-texte); opacity: .8; }
.console-appel.en-cours.rendezvous .console-appel-rang.vif { background: var(--turquoise); }

.console-appel.en-cours.programme { border-color: var(--violet-bord); background: var(--violet-fond); }
.console-appel.en-cours.programme .console-appel-titre { color: var(--violet-texte); }
.console-appel.en-cours.programme .console-appel-quand { color: var(--violet-texte); opacity: .8; }
.console-appel.en-cours.programme .console-appel-rang.vif { background: var(--violet); }

/* Une fiche archivée : il n'y a plus d'appel à préparer, donc plus de
   pointillé qui attend. Le trait se ferme, et la pastille porte le signe du
   sort — une croix pour un refus, une coche pour une signature. */
.console-appel.en-cours.perdu, .console-appel.en-cours.signe { border-style: solid; }
.console-appel.en-cours.perdu { border-color: var(--rouge-bord); background: var(--rouge-fond); }
.console-appel.en-cours.perdu .console-appel-titre { color: var(--rouge-texte); }
.console-appel.en-cours.perdu .console-appel-rang.vif {
  background: transparent; border: 1px solid var(--rouge-bord); color: var(--rouge-texte);
}
.console-appel.en-cours.perdu .console-appel-issue {
  background: transparent; border-color: var(--rouge-bord); color: var(--rouge-texte);
}
.console-appel.en-cours.signe { border-color: var(--vert-bord); background: var(--vert-fond); }
.console-appel.en-cours.signe .console-appel-titre { color: var(--vert-texte); }
.console-appel.en-cours.signe .console-appel-rang.vif {
  background: transparent; border: 1px solid var(--vert-bord); color: var(--vert-texte);
}
.console-appel.en-cours.signe .console-appel-issue {
  background: transparent; border-color: var(--vert-bord); color: var(--vert-texte);
}

/* Le même signal sur la ligne d'historique qui a clos la fiche : on doit
   voir où le fil s'arrête sans lire les notes. */
.console-appel-issue.fin-perdu {
  background: var(--rouge-fond); border-color: var(--rouge-bord); color: var(--rouge-texte);
}
.console-appel-issue.fin-signe {
  background: var(--vert-fond); border-color: var(--vert-bord); color: var(--vert-texte);
}
.console-appel-issue {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  font-size: .76rem;
  font-weight: 600;
  color: var(--texte-2);
}
.console-appel-quand {
  font-size: .78rem;
  color: var(--texte-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* La note d'un moment : du texte qu'on peut rouvrir, pas un bouton qui en a
   l'air. Elle garde l'allure d'une note tant qu'on ne la survole pas. */
button.console-appel-mot {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 7px;
  font-family: inherit; cursor: pointer;
}
button.console-appel-mot:hover { background: var(--fond-3); }
button.console-appel-mot.vide { color: var(--texte-3); font-style: italic; }
.console-appel-mot {
  flex-basis: 100%;
  padding-left: 31px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--texte-2);
  white-space: pre-line;
}

/* ------------------------------------------------- la barre des issues */

.console-barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-top: 1px solid var(--bordure);
  background: var(--fond-3);
}
.console-choix {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 1;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  cursor: pointer;
}
.console-choix:hover { border-color: var(--texte-3); }
.console-choix.primaire {
  flex: 1.3;
  background: var(--accent-aplat);
  border-color: var(--accent-aplat);
  color: var(--sur-accent);
}
.console-choix.primaire:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.console-choix.danger { color: var(--rouge-texte); border-color: var(--rouge-bord); }

.console-choix kbd,
.console-passer kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .72rem;
  padding: 1px 6px;
  border: 1px solid var(--bordure);
  border-radius: 5px;
  background: var(--fond-3);
  color: var(--texte-2);
}
.console-choix.primaire kbd {
  background: transparent;
  border-color: var(--sur-accent);
  color: var(--sur-accent);
}
.console-passer { min-height: 48px; padding: 0 16px; }

/* --------------------------------------- import d'une liste collée */

/* Une zone éditable, pas un textarea : c'est le seul moyen de recevoir le
   presse-papier HTML du tableur, et donc les liens portés par les noms. */
.zone-collage {
  min-height: 92px;
  max-height: 180px;
  overflow: auto;
  padding: 12px 14px;
  background: var(--fond-3);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--texte-2);
  outline: none;
}
.zone-collage:focus { border-color: var(--accent); border-style: solid; }
.zone-collage:empty::before {
  content: "Collez ici";
  color: var(--texte-3);
}

.import-tete {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.import-tete h3 { margin: 0 0 2px; font-size: 1.05rem; }
.import-tete .champ-aide { margin: 0; }
.import-boutons {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.import-entetes,
.import-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
}
.import-entetes {
  padding: 0 12px 6px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texte-3);
}
.import-ligne {
  padding: 9px 12px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-bottom: 6px;
}
/* Une ligne déjà connue se voit : c'est elle qu'on ne veut pas réimporter. */
.import-ligne.connue {
  background: var(--ambre-fond);
  border-color: var(--ambre-bord);
}

.import-cote { min-width: 0; }
.import-nom {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-num {
  margin-top: 2px;
  font-size: .82rem;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}
.import-motif {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--fond-3);
  border: 1px solid var(--bordure);
  font-size: .72rem;
  font-weight: 600;
  color: var(--texte-2);
  font-variant-numeric: normal;
}
.import-neuf {
  font-size: .85rem;
  font-style: italic;
  color: var(--texte-3);
}

@media (max-width: 760px) {
  .import-entetes { display: none; }
  .import-ligne { grid-template-columns: minmax(0, 1fr) 36px; }
}


/* =======================================================================
   REFONTE — septembre 2026

   Barre verticale à gauche, une page par menu à droite. Ce bloc vient APRÈS
   tout le reste : il redéfinit les variables et la mise en page générale sans
   toucher aux règles d'origine, qui continuent d'habiller les composants
   (tableaux, boutons, modales, console d'appel) que la refonte réutilise.
   ======================================================================= */

:root {
  /* Un fond légèrement chaud plutôt que bleuté, des traits plus fins : l'écran
     affiche des tableaux toute la journée, le gris froid les durcissait. */
  --fond:        #f7f7f5;
  --fond-2:      #ffffff;
  --fond-3:      #efeeea;
  --fond-tete:   #fbfbfa;   /* l'en-tête et le pied d'un tableau */
  --bordure:     #e5e4e0;
  --ligne:       #f3f2ef;   /* le trait entre deux lignes d'une liste */
  --texte:       #17171a;
  --texte-2:     #55595f;
  --texte-3:     #70747c;
  --rayon:       12px;
  /* La semaine jamais importée : hachurée, pas grise. Un vide gris se lit
     comme un zéro, une hachure se lit comme une absence. */
  --hachure:     repeating-linear-gradient(135deg, #fdf9f3, #fdf9f3 5px, #f7efe4 5px, #f7efe4 10px);
}

:root[data-theme="sombre"] {
  --fond-tete:   #1a1f27;
  --ligne:       #20262f;
  --hachure:     repeating-linear-gradient(135deg, #1d1a15, #1d1a15 5px, #241f17 5px, #241f17 10px);
}

body {
  font-family: 'Instrument Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}

/* Les chiffres passent en chasse fixe : c'est ce qui permet de comparer deux
   montants empilés sans les lire. */
.mono, .bande-val, .mat-val, .gros {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ la coquille */

#app { display: flex; align-items: flex-start; min-height: 100vh; }

main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; }

.rail {
  position: sticky;
  top: 0;
  flex: 0 0 248px;
  width: 248px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 16px;
  background: var(--fond-2);
  border-right: 1px solid var(--bordure);
  z-index: 30;
}

.rail-tete { display: flex; align-items: center; gap: 8px; padding: 0 4px 18px 8px; }
.rail-marque { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.rail-marque span { color: var(--accent-texte); margin-left: 5px; }

.rail-logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; }

.rail-plier {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--texte-3); cursor: pointer;
}
.rail-plier:hover { background: var(--fond-3); color: var(--texte); }

.rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }

.rail-nav .onglet {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 12px;
  border: 0; border-radius: 10px;
  background: none; box-shadow: none;
  color: var(--texte-2);
  font: inherit; font-size: 15px; font-weight: 500;
  text-align: left;
}
.rail-nav .onglet svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--texte-3); }
.rail-nav .onglet > span:not(.rail-compteur) {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-nav .onglet:hover { background: var(--fond-3); color: var(--texte); }
.rail-nav .onglet:hover svg { color: var(--texte-2); }
.rail-nav .onglet.actif {
  background: var(--fond-3); color: var(--texte); font-weight: 650; box-shadow: none;
}
.rail-nav .onglet.actif svg { color: var(--texte); stroke-width: 1.9; }

/* Settings est un menu comme les autres, mais il tombe en bas : ce n'est pas
   un écran qu'on parcourt, c'est celui où l'on va régler quelque chose. */
.onglet-pied { margin-top: auto; }

.rail-compteur {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  padding: 1px 7px; border-radius: 6px;
  background: var(--ambre-fond); border: 1px solid var(--ambre-bord); color: var(--ambre-texte);
}

.rail-moi {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ligne);
}
.rail-moi .avatar { width: 36px; height: 36px; flex-shrink: 0; }
.rail-moi-texte { min-width: 0; display: flex; flex-direction: column; }
.rail-moi-nom { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-moi-role { font-size: 12.5px; color: var(--texte-3); }

/* ----- le rail réduit : les icônes seules, et la largeur rendue au contenu */

:root[data-rail="reduit"] .rail {
  flex-basis: 76px; width: 76px; align-items: center; padding: 20px 0 16px;
}
:root[data-rail="reduit"] .rail-tete { flex-direction: column; gap: 12px; padding: 0 0 16px; }
:root[data-rail="reduit"] .rail-logo { width: 38px; height: 38px; border-radius: 10px; }
:root[data-rail="reduit"] .rail-marque,
:root[data-rail="reduit"] .rail-moi-texte,
:root[data-rail="reduit"] .rail-nav .onglet > span:not(.rail-compteur) { display: none; }
:root[data-rail="reduit"] .rail-plier svg { transform: scaleX(-1); }
:root[data-rail="reduit"] .rail-nav { align-items: center; }
:root[data-rail="reduit"] .rail-nav .onglet { width: 46px; height: 46px; padding: 0; justify-content: center; }
:root[data-rail="reduit"] .rail-moi { justify-content: center; width: 44px; }
/* Le compteur devient une pastille sur l'icône : il ne doit pas disparaître
   avec le libellé, c'est la seule alerte du rail. */
:root[data-rail="reduit"] .rail-compteur {
  position: absolute; top: 3px; right: 1px;
  min-width: 19px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-aplat); border: 2px solid var(--fond-2); border-radius: 999px;
  color: #fff; font-size: 10.5px;
}

/* --------------------------------------------------------- l'entête d'une page */

.entete-page {
  position: sticky; top: 0; z-index: 12;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px;
  padding: 22px 30px 18px;
  background: var(--fond-2);
  border-bottom: 1px solid var(--bordure);
}
.entete-page h1 { font-size: 27px; font-weight: 650; letter-spacing: -.025em; }
.entete-titre { min-width: 0; }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entete-actions input[type="search"] { width: 250px; }
.entete-actions select { width: auto; }

/* Les rubriques d'un écran : sous le titre, dans le même bandeau blanc. */
.onglets-page { flex: 1 0 100%; display: flex; gap: 22px; margin: 14px 0 -18px; }
.onglets-page button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0 2px 13px; font: inherit; font-size: 15.5px; font-weight: 500;
  color: var(--texte-2); cursor: pointer;
}
.onglets-page button:hover { color: var(--texte); }
.onglets-page button.actif { color: var(--texte); font-weight: 650; border-bottom-color: var(--accent-aplat); }

.page-corps { padding: 20px 30px 40px; display: flex; flex-direction: column; gap: 16px; }
/* Les écrans qui tiennent dans la hauteur de la fenêtre et défilent à
   l'intérieur : la console d'appel ne doit pas faire défiler la page. */
.page-corps-plein { padding-bottom: 20px; }

.pastille-rappels {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 10px;
  background: var(--accent-fond); border: 1px solid var(--accent-bord);
  color: var(--accent-texte); font-size: 14px; font-weight: 600;
}

/* ------------------------------------------------------- briques communes */

.bande { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.bande-c { background: var(--fond-2); border: 1px solid var(--bordure); border-radius: 13px; padding: 14px 16px; }
.bande-lib { font-size: 13px; color: var(--texte-2); }
.bande-val { margin-top: 5px; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.bande-note { margin-top: 5px; font-size: 12px; color: var(--texte-3); }
.bande-c.ambre { border-color: var(--ambre-bord); }
.bande-c.ambre .bande-lib, .bande-c.ambre .bande-val, .bande-c.ambre .bande-note { color: var(--ambre-texte); }
.bande-c.rouge { border-color: var(--rouge-bord); }
.bande-c.rouge .bande-lib, .bande-c.rouge .bande-val, .bande-c.rouge .bande-note { color: var(--rouge-texte); }

.carte { background: var(--fond-2); border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; }
.carte-tete { display: flex; align-items: center; gap: 12px; padding: 17px 22px 14px; border-bottom: 1px solid var(--ligne); }
.carte-tete h2 { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.carte-tete p { margin: 4px 0 0; font-size: 13.5px; color: var(--texte-2); }
.carte-tete .btn { margin-left: auto; }
.carte-tete .carte-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.carte-corps { padding: 18px 22px; }
.carte-pied { padding: 13px 22px; background: var(--fond-tete); border-top: 1px solid var(--ligne); font-size: 13.5px; color: var(--texte-2); }
.pastille-nb {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  color: var(--texte-2); background: var(--fond-3); border-radius: 7px; padding: 2px 8px;
}
.pastille-nb.vif { background: var(--accent-fond); color: var(--accent-texte); }

.groupe-titre {
  padding: 11px 22px 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-3);
}
.groupe-titre.rouge { color: var(--rouge-texte); }

.pion {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: #fff;
  /* Un gris sombre fixe : `var(--texte)` s'éclaircit en mode sombre et le
     texte blanc y disparaissait. */
  background: #3a3d43;
}
.pion.vif { background: var(--accent-aplat); }

.nom-fort { font-size: 16px; font-weight: 650; }
.sous-ligne { margin-top: 2px; font-size: 12.5px; color: var(--texte-3); }
.gros { font-size: 16.5px; font-weight: 650; }

.pf-mini { padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pf-ue { background: var(--ue-fond); border: 1px solid var(--ue-bord); color: var(--ue-texte); }
.pf-dlv { background: var(--deliveroo-fond); border: 1px solid var(--deliveroo-bord); color: var(--deliveroo-texte); }

/* Tableaux de la refonte : plus aérés, entête posée, ligne survolée. */
.table-r th { background: var(--fond-tete); font-size: .72rem; padding: 11px 16px; }
.table-r td { padding: 14px 16px; border-bottom: 1px solid var(--ligne); font-size: 14.5px; vertical-align: middle; }
.table-r tbody tr:last-child td { border-bottom: 0; }
.table-r tbody tr.cliquable { cursor: pointer; }
.table-r tbody tr.cliquable:hover { background: var(--fond-tete); }
.table-r tbody tr.rouge { background: var(--rouge-fond); }
.table-r tbody tr.ambre { background: var(--ambre-fond); }

/* Le choix d'un réglage : le courant en bouton, les autres dans un cadre
   qui s'ouvre. */
.deroulant { position: relative; }
.deroulant > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--texte);
}
.deroulant > summary::-webkit-details-marker { display: none; }
.deroulant > summary::after { content: '▾'; font-size: 11px; color: var(--texte-3); }
.deroulant > summary:hover { border-color: var(--texte-3); }
.deroulant[open] > summary { border-color: var(--texte); }
.deroulant-corps {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 190px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-radius: 11px; box-shadow: var(--ombre);
}
.deroulant-corps button {
  text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 14px; color: var(--texte-2); cursor: pointer;
}
.deroulant-corps button:hover { background: var(--fond-3); color: var(--texte); }
.deroulant-corps button.actif { background: var(--fond-3); color: var(--texte); font-weight: 650; }

/* ------------------------------------------------------------- Pilotage */

.mat { overflow-x: auto; }
.mat-grille { display: grid; min-width: 100%; }
.mat-nom {
  position: sticky; left: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 11px 16px;
  background: var(--fond-2);
  border-bottom: 1px solid var(--ligne);
  font-size: 15px; font-weight: 600;
}
.mat-c {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 8px;
  border-left: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
}
.mat-tete .mat-nom, .mat-tete .mat-c {
  background: var(--fond-tete); border-bottom: 1px solid var(--bordure);
  font-size: 13.5px; font-weight: 600;
}
.mat-tete .mat-nom { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); }
.mat-tete .mat-c.absente { color: var(--ambre-texte); background: var(--ambre-fond); }
.mat-tete .mat-c small { font-weight: 500; font-size: 11px; }
.mat-c.absente { background: var(--hachure); }
.mat-val { font-size: 14.5px; font-weight: 600; }
.mat-var { font-size: 11.5px; font-weight: 600; color: var(--texte-3); font-variant-numeric: tabular-nums; }

/* La rubrique Offre : une coche ou une croix, et le détail au clic. */
.offre-oui { color: var(--vert-texte); display: inline-flex; }
.offre-non { color: var(--rouge-texte); opacity: .55; display: inline-flex; }
.mat-offre { position: relative; background: none; border: 0; border-left: 1px solid var(--ligne);
             border-bottom: 1px solid var(--ligne); font: inherit; cursor: pointer; }
.mat-tag { position: absolute; top: 4px; right: 5px; display: flex; gap: 3px; }
.mat-tag i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.tag-ue { color: var(--ue-texte); }
.tag-dlv { color: var(--deliveroo-texte); }
.mat-offre:hover { background: var(--vert-fond); }
.legende-offres { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texte-2); }
.legende-offres .offre-non { margin-left: 10px; }
.var-haut { color: var(--vert-texte); }
.var-bas  { color: var(--rouge-texte); }
.mat-pied .mat-nom, .mat-pied .mat-c {
  background: var(--fond-tete); border-top: 1px solid var(--bordure); border-bottom: 0;
  font-weight: 650;
}
.mat-vide-lib { font-size: 12px; color: var(--ambre-texte); }

/* -------------------------------------------------------------- Activité */

.act-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.act-alerte {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 13px; border: 1px solid var(--bordure);
  background: var(--fond-2); text-align: left; font: inherit; cursor: pointer; width: 100%;
}
.act-alerte.rouge { background: var(--rouge-fond); border-color: var(--rouge-bord); color: var(--rouge-texte); }
.act-alerte.ambre { background: var(--ambre-fond); border-color: var(--ambre-bord); color: var(--ambre-texte); }
.act-alerte-t { font-size: 15.5px; font-weight: 650; }
.act-alerte-s { margin-top: 3px; font-size: 13px; }

.act-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.act-cote { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1240px) { .act-grille { grid-template-columns: 1fr; } }

.tache { display: flex; align-items: center; gap: 13px; padding: 13px 22px; border-bottom: 1px solid var(--ligne); }
.tache:last-child { border-bottom: 0; }
.tache:hover { background: var(--fond-tete); }
.tache input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent-aplat); }
.tache-txt { flex: 1; min-width: 0; }
.tache-titre { font-size: 15px; font-weight: 600; }
.tache-ou { margin-top: 3px; font-size: 12.5px; color: var(--texte-3); }
.tache.retard { background: var(--rouge-fond); }
.tache.retard .tache-ou { color: var(--rouge-texte); }
.tache.faite .tache-titre { text-decoration: line-through; color: var(--texte-3); }

.heure { width: 56px; flex-shrink: 0; text-align: center; }
.heure-h { font-family: 'JetBrains Mono', monospace; font-size: 14.5px; font-weight: 650; }
.heure-j { font-size: 12px; color: var(--texte-3); }
.heure.due .heure-h { color: var(--accent-texte); }
.heure.passee .heure-h, .heure.passee .heure-j { color: var(--rouge-texte); }

.ligne-r { display: flex; align-items: center; gap: 13px; padding: 12px 22px; border-bottom: 1px solid var(--ligne); }
.ligne-r:last-child { border-bottom: 0; }
.ligne-r.rouge { background: var(--rouge-fond); }
.ligne-r-txt { flex: 1; min-width: 0; }

/* --------------------------------------------------------------- Clients */

.dossier-r { display: flex; gap: 18px; align-items: flex-start; }
.dossier-cote { width: 296px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.dossier-cote .carte { padding: 7px; }
.dossier-panneau { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .dossier-r { flex-direction: column; } .dossier-cote { width: 100%; } }

.volet {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border-radius: 9px;
  background: none; border: 1px solid transparent;
  font: inherit; font-size: 15px; color: var(--texte-2);
  text-align: left; cursor: pointer;
}
.volet:hover { background: var(--fond-3); color: var(--texte); }
.volet.actif { background: var(--accent-fond); border-color: var(--accent-bord); color: var(--accent-texte); font-weight: 650; }
.volet-nb { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

.marque-carte {
  display: block; width: 100%; padding: 12px; border-radius: 10px;
  background: none; border: 1px solid transparent; font: inherit; text-align: left; cursor: pointer;
}
.marque-carte:hover { background: var(--fond-3); }
.marque-carte.actif { background: var(--accent-fond); border-color: var(--accent-bord); }
.marque-carte.actif .marque-nom { color: var(--accent-texte); }
.marque-nom { font-size: 15px; font-weight: 600; }
.marque-ligne { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.marque-tarif { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--texte-2); }

.fiche-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.fiche-bloc { border: 1px solid var(--bordure); border-radius: 13px; overflow: hidden; }
.fiche-bloc-tete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bordure); font-size: 15px; font-weight: 650; }
.fiche-bloc-tete a { margin-left: auto; font-size: 13.5px; text-decoration: none; }
.fiche-bloc.ue .fiche-bloc-tete { background: var(--ue-fond); border-color: var(--ue-bord); color: var(--ue-texte); }
.fiche-bloc.ue { border-color: var(--ue-bord); }
.fiche-bloc.dlv .fiche-bloc-tete { background: var(--deliveroo-fond); border-color: var(--deliveroo-bord); color: var(--deliveroo-texte); }
.fiche-bloc.dlv { border-color: var(--deliveroo-bord); }
.fiche-bloc-corps { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.fiche-l { display: flex; align-items: center; gap: 10px; }
.fiche-l span:first-child { flex: 1; color: var(--texte-2); }
.fiche-l b { font-weight: 600; }

/* --------------------------------------------------------------- Agence */

.agence-duo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1240px) { .agence-duo { grid-template-columns: 1fr; } }

.barres { display: flex; align-items: flex-end; gap: 18px; height: 200px; }
.barres-c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.barres-v { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; }
.barres-b { width: 100%; background: var(--accent-aplat); border-radius: 7px 7px 0 0; min-height: 3px; }
.barres-b.claire { background: var(--accent-fond); border: 1px solid var(--accent-bord); border-radius: 7px 7px 0 0; }
.barres-l { font-size: 12.5px; color: var(--texte-3); }
.barres-c.vif .barres-l { color: var(--texte); font-weight: 600; }

.etape { margin-bottom: 14px; }
.etape-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 14.5px; }
.etape-tete .etape-n { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 650; }
.etape-tete .etape-t { font-size: 13px; color: var(--texte-3); }
.etape-b { height: 28px; border-radius: 7px; background: var(--accent-aplat); min-width: 4px; }
.etape-b.deux { background: #e4834f; }
.etape-b.trois { background: #efc1a5; }

/* ---------------------------------------------------------- Prospection */

/* Trois colonnes : la file, la fiche au centre, les arguments à droite.
   La fiche est celle qu'on lit en parlant — elle prend la place qui reste. */
.pros { display: grid; grid-template-columns: 340px minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.pros-colonne { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pros-file { display: flex; flex-direction: column; }
.pros-file-liste { overflow-y: auto; }
.pros-fiche { min-width: 0; display: flex; }
.pros-fiche > .console-fiche { flex: 1; min-width: 0; }
.pros-args { min-width: 0; }

/* Sous 1450 px, les arguments passent sous la fiche plutôt que de comprimer
   le numéro de téléphone, qui est la seule chose qu'on lit à voix haute. */
@media (max-width: 1450px) {
  .pros { grid-template-columns: 340px minmax(0, 1fr); }
  .pros-args { grid-column: 1 / -1; }
}
@media (max-width: 1100px) { .pros { grid-template-columns: 1fr; } }

.arg { border-bottom: 1px solid var(--ligne); }
.arg:last-child { border-bottom: 0; }
.arg > summary, .arg-fixe {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 13px 20px;
}
.arg-fixe { cursor: default; }
.arg > summary::-webkit-details-marker { display: none; }
.arg > summary::after {
  content: '▾'; margin-left: auto; font-size: 12px; color: var(--texte-3);
  transition: transform .15s;
}
.arg[open] > summary::after { transform: rotate(180deg); }
.arg > summary:hover { background: var(--fond-tete); }
.arg-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.arg-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

/* L'argument que la fiche appelle : ouvert, et teinté pour qu'on le voie en
   arrivant. Ceux qui ne s'appliquent pas ne sont pas grisés — ils ne sont
   pas là. */
.arg-cible > summary { background: var(--vert-fond); }
.arg-titre { font-size: 15px; font-weight: 600; }
.arg-corps { padding: 0 20px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.arg-detail { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--texte-2); }
.arg-plus { font-size: 20px; line-height: 1; padding: 2px 10px 5px; }
.arg-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Un rappel à venir s'ouvre au clic : la carte entière est la cible, le
   numéro gardant son propre bouton. */
.rappel-avenir-ouvrir {
  display: block; width: 100%; padding: 0;
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.rappel-avenir-ouvrir:hover .rappel-avenir-qui { color: var(--accent-texte); }
.rappel-avenir-ouvrir .rappel-avenir-quand,
.rappel-avenir-ouvrir .rappel-avenir-qui { display: block; }
.rappel-avenir.actif { background: var(--fond-tete); border-left: 3px solid var(--accent-aplat); padding-left: 9px; }

.pros-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 11px 14px 13px; }

/* La barre des étapes flotte au-dessus de l'écran, centrée sur la zone de
   travail et non sur la fenêtre : avec un rail de 248 px, un centrage à la
   fenêtre la poserait visiblement de travers. */
.pros-dock {
  position: fixed; left: 248px; right: 0; bottom: 0; z-index: 25;
  display: flex; justify-content: center;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
:root[data-rail="reduit"] .pros-dock { left: 76px; }
@media (max-width: 1100px) { .pros-dock { left: 0; } }

.pros-dock-barre {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; max-width: 100%;
  padding: 8px 10px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: 26px;
  box-shadow: var(--ombre);
}
.pros-dock-sep { width: 1px; height: 22px; background: var(--bordure); margin: 0 3px; }

/* La pastille Liste s'ouvre vers le HAUT : la barre est posée en bas de
   l'écran, un menu vers le bas sortirait de la fenêtre. */
.deroulant-haut .deroulant-corps { top: auto; bottom: calc(100% + 8px); }

/* Un déroulant déguisé en pastille : même hauteur, même rondeur, même
   contraste que les étapes voisines. */
.chip-deroulant > summary {
  height: 30px; padding: 0 11px;
  border-radius: 999px;
  background: var(--texte); border-color: var(--texte);
  color: var(--fond-2); font-size: 12.5px; font-weight: 600;
}
.chip-deroulant > summary:hover { border-color: var(--texte); }
.chip-deroulant > summary::after { color: var(--fond-2); opacity: .7; }
.chip-deroulant[open] > summary { border-color: var(--texte); }


/* La barre flotte : sans cette réserve, elle recouvrirait les dernières
   lignes de la file. */
#vue-prospection .page-corps-plein { padding-bottom: 92px; }
.chip {
  height: 30px; padding: 0 11px; border-radius: 999px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  font: inherit; font-size: 12.5px; color: var(--texte-2); cursor: pointer;
}
.chip:hover { border-color: var(--texte-3); }
.chip.actif { background: var(--texte); border-color: var(--texte); color: var(--fond-2); font-weight: 600; }
/* Un raccourci, pas une étape : il se tient à part, en trait discontinu, et
   se retire sans laisser de trou dans la barre. PROVISOIRE. */
.chip-provisoire { border-style: dashed; }
.chip-provisoire.actif { border-style: solid; }

/* Deux vues d'une même colonne : ce qu'on appelle, ce qu'on a promis. Elles
   se tiennent au-dessus de la recherche, qui filtre celle qui est ouverte. */
.pros-bascule { display: flex; gap: 6px; padding: 13px 14px 0; }
.bascule {
  flex: 1; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--fond-3); border: 1px solid transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--texte-2);
  cursor: pointer;
}
.bascule:hover { border-color: var(--bordure); }
.bascule.actif { background: var(--texte); color: var(--fond-2); border-color: var(--texte); }
/* Fermée, pas absente : le prospecteur doit voir que la file existe et
   comprendre ce qui la lui ouvrira. */
.bascule:disabled { opacity: .45; cursor: not-allowed; }
.bascule:disabled:hover { border-color: transparent; }

.pros-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px;
  border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--ligne);
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.pros-ligne:hover { background: var(--fond-tete); }
.pros-ligne.actif { background: var(--fond-tete); border-left-color: var(--accent-aplat); }
.pros-qui { flex: 1; min-width: 0; }
/* `display: block` n'est pas décoratif : une span en ligne ne se coupe pas,
   et « Butcher Square Restauration Italienne Pates Pizza Fraiche Viande
   Halal » poussait la file entière en défilement horizontal. */
.pros-nom { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pros-ligne.actif .pros-nom { font-weight: 650; }

/* Un appel à la fois. La fiche en cours est la seule qui compte ; les
   suivantes s'effacent pour qu'on ne les choisisse pas au hasard — sans
   disparaître, parce qu'il faut voir ce qui attend. Le survol et la sélection
   les ramènent : la file reste navigable, elle cesse seulement d'être un menu. */
.un-par-un .pros-ligne { opacity: .42; transition: opacity .12s; }
.un-par-un .pros-ligne:first-child,
.un-par-un .pros-ligne.actif,
.un-par-un .pros-ligne:hover { opacity: 1; }
/* Lisible mais pas ouvrable : on voit ce qui attend, on ne le choisit pas. */
.pros-ligne:disabled { cursor: not-allowed; }
/* L'échéance, à droite : la date d'abord, le type dessous. Passée, elle
   prend l'accent — une file de rendez-vous se lit par ce qui est en retard. */
/* Le combiné barré d'une relance sans réponse : rouge, et à sa place dans
   la ligne — à gauche de l'échéance, puisque c'est lui qu'on lit d'abord. */
.pros-nrp,
.pros-issue {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%;
  background: var(--rouge-fond); color: var(--rouge-texte);
}
/* Comment l'affaire s'est terminée : signée, obtenue puis perdue, jamais
   décrochée, refusée. Quatre signes pour ne pas avoir à ouvrir la fiche. */
.pros-issue.gagne { background: var(--vert-fond); color: var(--vert-texte); }
.pros-issue.manque-court { background: var(--ambre-fond); color: var(--ambre-texte); }
.pros-quand { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.pros-quand-j {
  font-size: 12.5px; font-weight: 650; color: var(--texte);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pros-quand-t { font-size: 11px; color: var(--texte-3); text-transform: capitalize; }
.pros-quand.passe .pros-quand-j { color: var(--accent-texte); }
.pros-ou { display: block; margin-top: 3px; font-size: 12.5px; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le code couleur des restaurateurs. Note : 4,3 et plus, 3,6 à 4,2, en
   dessous. Avis : 500 et plus, 100 à 499, en dessous. La note et le volume
   se colorent chacun pour soi. */
.note-verte  { color: var(--vert-texte); }
.note-orange { color: var(--ambre-texte); }
.note-rouge  { color: var(--rouge-texte); }


/* La note et son volume d'avis, en tête de fiche. Le cadre reste neutre :
   c'est chaque chiffre qui porte sa couleur, et ils ne disent pas toujours
   la même chose. */
.cartouche-ue {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-radius: 13px;
  background: var(--fond-tete); border: 1px solid var(--bordure);
}
.cartouche-ue .sep { width: 1px; height: 34px; background: var(--bordure); }
.cartouche-c { text-align: center; }
.cartouche-v { display: flex; align-items: center; gap: 5px; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 650; }
.cartouche-l { margin-top: 1px; font-size: 11.5px; opacity: .8; }

/* ------------------------------------------------------------- Settings */

.set { display: flex; gap: 22px; align-items: flex-start; }
.set-nav { width: 226px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.set-panneau { flex: 1; min-width: 0; }
@media (max-width: 1000px) { .set { flex-direction: column; } .set-nav { width: 100%; } }
.set-champ { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--ligne); }
.set-champ:last-child { border-bottom: 0; }
.set-champ-txt { flex: 1; min-width: 0; }
.set-champ-l { font-size: 15px; font-weight: 600; }
.set-champ-a { margin-top: 3px; font-size: 13.5px; color: var(--texte-2); }

/* La console d'appel dans la refonte : la fiche occupe la colonne de droite,
   et la note de la plateforme se pose à droite du nom. */
.console-tete .cartouche-ue { margin-left: auto; }
.pros-fiche > .console-fiche { margin: 0; }
.pros-file .carte-pied { margin-top: auto; }

/* ------------------------------------------------------------- la marque */

/* L'écran de connexion porte le monogramme, pas le logo complet : le mot
   « DIGITAL FOOD » gravé dans l'image tombe sous quatre pixels de haut à
   cette taille. Le nom est donc écrit avec la typographie de l'outil. */
.login-logo {
  display: block;
  width: 76px; height: 76px;
  margin: 0 auto 2px;
  border-radius: 18px;
}
.login-carte .login-marque { text-align: center; font-size: 1.35rem; }

/* ------------------------------------- la matrice du résultat marketing */

/* Le retour sur dépense se lit à la couleur du CHIFFRE. Teinter la case
   entière faisait un damier qu'on lisait avant les nombres eux-mêmes. */
.mat-c .mat-sous { font-size: 11.5px; color: var(--texte-3); }

.legende-rdp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texte-2); }
.legende-rdp i { width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; background: currentColor; }
.legende-rdp i:first-child { margin-left: 0; }

/* ==================================================================
   PORTEFEUILLE ET RDV — les primes du prospecteur
   ==================================================================
   Trois tuiles pour le montant, des listes pour le détail. Le montant de
   la semaine est la seule chose qu'on doit pouvoir lire de loin : tout le
   reste est du justificatif, et se lit de près. */

.pf-semaine {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.pf-semaine h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.pf-pour {
  padding: 2px 9px; border-radius: 999px;
  background: var(--fond-3); border: 1px solid var(--bordure);
  font-size: 12px; color: var(--texte-2);
}

/* Les flèches sont sur le titre, pas dans la barre d'actions : on change
   de semaine à l'endroit où la semaine est écrite, et le regard n'a pas à
   faire l'aller-retour entre le coin de l'écran et ce qu'il commande. */
.pf-fleche {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bordure); border-radius: 7px;
  background: var(--fond-2); color: var(--texte-2);
  font-size: 11px; cursor: pointer;
}
.pf-fleche:hover:not(:disabled) {
  background: var(--accent-aplat); border-color: var(--accent-aplat); color: #fff;
}
/* Au bout de la série, la flèche reste visible mais cesse de répondre :
   la faire disparaître déplacerait le titre à chaque semaine. */
.pf-fleche:disabled { opacity: .35; cursor: default; }

.pf-tuiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.pf-tuile {
  padding: 14px 16px; border: 1px solid var(--bordure);
  border-radius: 12px; background: var(--fond-2);
}
/* Le total porte la couleur de l'outil : c'est le chiffre qu'on vient
   chercher, les deux autres l'expliquent. */
.pf-tuile.vedette { background: var(--vert-fond); border-color: var(--vert-bord); }
.pf-tuile-titre {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texte-3); font-weight: 650;
}
.pf-tuile-montant {
  margin-top: 5px; font-size: 25px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pf-tuile.vedette .pf-tuile-montant { color: var(--vert-texte); }
.pf-tuile-aide { margin-top: 3px; font-size: 12px; color: var(--texte-3); }

/* La carte n'a pas de rembourrage propre : sans celui-ci, les listes
   collaient au trait du cadre. Le rythme vertical vient du gap de
   .page-corps, pas de marges qui s'y ajouteraient. */
.pf-bloc { padding: 15px 20px 17px; }
.pf-aide { margin: 2px 0 12px; font-size: 12.5px; color: var(--texte-3); }

.pf-liste, .rdv-liste { list-style: none; margin: 0; padding: 0; }

.pf-ligne, .rdv-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--bordure);
}
.pf-ligne:last-child, .rdv-ligne:last-child { border-bottom: 0; }

/* Le nom au-dessus, le détail en dessous, le montant à droite.
   Côte à côte, un nom de restaurant un peu long écrasait le détail sur deux
   lignes et la colonne des montants se décalait d'une ligne à l'autre. */
.pf-ligne-txt {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.pf-ligne-nom, .rdv-nom { font-weight: 600; }
.pf-ligne-info, .rdv-info {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; font-size: 12.5px; color: var(--texte-3);
}
.pf-ligne-montant {
  font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap;
}
/* Un montant qui n'est pas encore dû ne doit pas se lire comme un acquis. */
.pf-ligne-montant.en-attente { font-weight: 500; color: var(--texte-3); }

.pf-sceau {
  padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  border: 1px solid var(--bordure);
}
.pf-sceau.qualifie { background: var(--vert-fond); color: var(--vert-texte); border-color: var(--vert-bord); }
.pf-sceau.simple { background: var(--ambre-fond); color: var(--ambre-texte); border-color: var(--ambre-bord); }
.pf-sceau.non-tenu { background: var(--fond-3); color: var(--texte-3); }

.pf-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-top: 10px; padding-top: 9px;
  border-top: 1.5px solid var(--texte);
  font-size: 12.5px; color: var(--texte-3);
}
.pf-total strong { font-size: 15px; color: var(--texte); font-variant-numeric: tabular-nums; }

/* L'historique se parcourt à la souris : chaque ligne ouvre sa semaine. */
.pf-histo tbody tr { cursor: pointer; }
.pf-histo tbody tr:hover { background: var(--fond-3); }
.pf-histo tbody tr.actif { background: var(--vert-fond); }
.pf-histo td.total { font-weight: 700; }

/* ------------------------------------------------------------- RDV */

.rdv-bloc { padding: 15px 20px 17px; }
.rdv-ligne.a-noter { padding: 15px 4px; }
.rdv-qui {
  padding: 1px 8px; border-radius: 999px; background: var(--fond-3);
  border: 1px solid var(--bordure); font-size: 11.5px;
}
.rdv-quand { font-variant-numeric: tabular-nums; color: var(--texte-3); font-size: 12.5px; }
.rdv-attente { font-size: 12px; color: var(--texte-3); font-style: italic; }
.rdv-mot { font-style: italic; }

/* --------------------------------------------- la grille de notation */

/* Les trois paliers tiennent sur une colonne : la phrase qui décrit le
   palier compte autant que le chiffre, et la tronquer ferait noter au
   hasard. */
.choix-paliers { display: grid; grid-template-columns: 1fr; gap: 6px; }
.choix-paliers .choix-btn {
  text-align: left; display: flex; align-items: baseline; gap: 9px;
  padding: 8px 11px; white-space: normal; line-height: 1.35;
}
.choix-paliers .choix-btn strong {
  min-width: 26px; font-variant-numeric: tabular-nums;
}

.note-bilan {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px; padding: 10px 13px; border-radius: 9px;
  background: var(--fond-3); border: 1px solid var(--bordure);
}
.note-bilan.qualifie { background: var(--vert-fond); border-color: var(--vert-bord); }
.note-bilan.simple { background: var(--ambre-fond); border-color: var(--ambre-bord); }
.note-total {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.note-bilan.qualifie .note-total { color: var(--vert-texte); }
.note-bilan.simple .note-total { color: var(--ambre-texte); }
.note-verdict { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.note-montant { font-weight: 700; font-variant-numeric: tabular-nums; }
.note-attente { font-size: 13px; color: var(--texte-3); }
.modal-chapo { margin-bottom: 14px; }

/* ------------------------------------------------ Settings → barème */

.bareme-champ { max-width: 320px; }
.bareme-saisie { display: flex; align-items: center; gap: 7px; }
.bareme-saisie input { max-width: 130px; font-variant-numeric: tabular-nums; }
.bareme-unite { color: var(--texte-3); font-weight: 600; }

.bareme-paliers { display: flex; gap: 12px; flex-wrap: wrap; }
.bareme-palier {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px solid var(--bordure);
  border-radius: 9px; background: var(--fond-2);
}
.bareme-palier-rang {
  font-size: 11.5px; font-weight: 700; color: var(--texte-3);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.bareme-escalier { margin-top: 10px; }
.bareme-histo-titre { margin-top: 20px; }

/* ==================================================================
   RETOURS — le fil de discussion
   ==================================================================
   Une conversation, pas une boîte à idées : on reconnaît qui parle à la
   place de la bulle, et un fil qui attend une réponse de soi se voit
   depuis le haut de la page. */

.retour.a-lire { border-left: 3px solid var(--accent-aplat); padding-left: 11px; }

.retour-neuf {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--accent-aplat); color: #fff;
}
.retour-nb { font-size: 11.5px; color: var(--texte-3); }

.bulle {
  margin: 8px 0; padding: 9px 12px; border-radius: 10px;
  background: var(--fond-3); border: 1px solid var(--bordure);
  max-width: 78%;
}
/* Mes messages à droite : c'est la convention de toutes les messageries,
   et elle évite de lire l'auteur à chaque ligne. */
.bulle.mienne {
  margin-left: auto; background: var(--vert-fond); border-color: var(--vert-bord);
}
.bulle-tete {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.bulle .retour-texte { margin: 0; white-space: pre-wrap; }

.pieces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Une capture se regarde, elle ne se télécharge pas : la vignette suffit à
   savoir de quel écran on parle, et le clic ouvre l'image entière. */
.piece-image {
  display: block; width: 128px; height: 86px; overflow: hidden;
  border-radius: 7px; border: 1px solid var(--bordure);
}
.piece-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.piece-lien {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--bordure); background: var(--fond-2);
  font-size: 12.5px; text-decoration: none; color: var(--texte);
}
.piece-lien:hover { background: var(--fond-3); }
.piece-taille { color: var(--texte-3); font-variant-numeric: tabular-nums; }

.retour-repondre {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordure);
}
.retour-repondre textarea { width: 100%; resize: vertical; }
.retour-repondre-pied {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px;
}
.pousse { flex: 1; }

/* Le libellé fait office de bouton : l'input natif est illisible et
   impossible à mettre à la charte. */
.piece-ajout { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.piece-choisies {
  font-size: 12px; color: var(--texte-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%;
}

/* ------------------------------------- le point d'interrogation et l'aide */

/* Rond, discret, en bout de barre d'actions : il doit se trouver sans se
   faire remarquer, parce qu'on ne le cherche qu'une fois. */
.btn-aide {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--bordure);
  background: var(--fond-2); color: var(--texte-2);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-aide:hover {
  background: var(--accent-aplat); border-color: var(--accent-aplat); color: #fff;
}

.aide { display: flex; flex-direction: column; gap: 2px; }
.aide-chapo { margin: 0 0 4px; color: var(--texte-2); }
.aide-titre {
  margin: 18px 0 7px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3);
}
.aide-texte { margin: 0 0 10px; font-size: 13px; color: var(--texte-2); }
.aide-sous { display: block; font-size: 11.5px; color: var(--texte-3); font-weight: 400; }
.aide-table td { padding: 9px 8px; }
.aide-table td.num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aide-grille th { font-size: 11px; }
.aide-grille td { vertical-align: top; }
.aide-palier { font-size: 12px; color: var(--texte-2); line-height: 1.35; }

/* L'escalier des signatures, en marches : la progression se voit mieux
   alignée qu'énumérée en phrase. */
.echelle { display: flex; gap: 8px; }
.marche {
  flex: 1; text-align: center; padding: 9px 6px;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond-3);
}
.marche.haut { background: var(--vert-fond); border-color: var(--vert-bord); }
.marche-n {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-3); font-weight: 650;
}
.marche-v {
  margin-top: 3px; font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.marche.haut .marche-v { color: var(--vert-texte); }
.marche-p { font-size: 10.5px; color: var(--texte-3); margin-top: 2px; }

.seuil-aide {
  display: flex; align-items: center; gap: 14px; margin-top: 14px;
  padding: 12px 15px; border-radius: 9px;
  background: var(--vert-fond); border: 1.5px solid var(--vert-bord);
  font-size: 13px; line-height: 1.45;
}
.seuil-aide .seuil-note {
  font-size: 19px; font-weight: 700; color: var(--vert-texte);
  letter-spacing: -.03em; white-space: nowrap;
}

/* « En cours » : savoir d'un coup d'œil si la semaine ouverte est close ou
   encore en train de se remplir. */
.pf-encours {
  padding: 2px 9px; border-radius: 999px;
  background: var(--ambre-fond); color: var(--ambre-texte);
  border: 1px solid var(--ambre-bord);
  font-size: 11.5px; font-weight: 650;
}

/* ------------------------------------ les lignes qui s'ouvrent, et leur pastille */

/* Une ligne cliquable doit se voir sans crier : le fond ne bouge qu'au
   survol, mais le chevron est là en permanence pour dire qu'il y a quelque
   chose dessous. */
.pf-ligne-clic {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--bordure); cursor: pointer;
  font: inherit; color: inherit; border-radius: 6px;
}
li:last-child > .pf-ligne-clic { border-bottom: 0; }
.pf-ligne-clic:hover { background: var(--fond-3); }
.pf-ligne-clic:focus-visible { outline: 2px solid var(--accent-aplat); outline-offset: -2px; }

.pf-chevron {
  flex-shrink: 0; color: var(--texte-3); font-size: 18px; line-height: 1;
  padding-left: 2px;
}
.pf-ligne-clic:hover .pf-chevron { color: var(--accent-aplat); }

/* Le point : discret mais à gauche du nom, là où l'œil commence la ligne. */
.pf-point {
  flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-aplat);
}
.pf-ligne-clic.neuf .pf-ligne-nom { font-weight: 700; }

.pastille-neuf {
  padding: 1px 9px; border-radius: 999px;
  background: var(--accent-aplat); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}

/* ------------------------------------------------- le détail d'une ligne */

.retour-verdict {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 2px 0 14px; padding: 12px 15px; border-radius: 9px;
  background: var(--fond-3); border: 1px solid var(--bordure);
}
.retour-verdict.qualifie { background: var(--vert-fond); border-color: var(--vert-bord); }
.retour-verdict.simple { background: var(--ambre-fond); border-color: var(--ambre-bord); }
.retour-note {
  font-size: 21px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.retour-verdict.qualifie .retour-note { color: var(--vert-texte); }
.retour-verdict.simple .retour-note { color: var(--ambre-texte); }
.retour-verdict-l { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.retour-verdict-m {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.retour-criteres { list-style: none; margin: 0; padding: 0; }
.retour-critere {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--bordure);
}
.retour-critere:last-child { border-bottom: 0; }
/* La note du critère porte la couleur de ce qu'elle vaut : un zéro se
   repère avant d'avoir lu la phrase qui l'explique. */
.retour-critere-n {
  flex-shrink: 0; width: 38px; text-align: center;
  padding: 3px 0; border-radius: 7px;
  background: var(--ambre-fond); color: var(--ambre-texte);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.retour-critere.plein .retour-critere-n { background: var(--vert-fond); color: var(--vert-texte); }
.retour-critere.zero .retour-critere-n { background: var(--rouge-fond); color: var(--rouge-texte); }
.retour-critere-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.retour-critere-txt span { font-size: 12.5px; color: var(--texte-3); }

/* Le mot de l'associé : la seule partie écrite à la main, elle se détache. */
.retour-mot {
  margin-top: 14px; padding: 11px 14px;
  border-left: 3px solid var(--accent-aplat); background: var(--fond-3);
  border-radius: 0 8px 8px 0;
}
.retour-mot-qui {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texte-3); font-weight: 700; margin-bottom: 3px;
}
.retour-mot p { margin: 0; font-size: 13.5px; line-height: 1.5; }

.retour-aide { margin: 12px 0 0; font-size: 12.5px; color: var(--texte-3); line-height: 1.5; }

/* --------------------------------------------- la fenêtre de notation */

/* Celui qui note lit la grille une fois, vite, entre deux rendez-vous. Les
   tailles par défaut des formulaires — .82rem pour le libellé, .78rem pour
   l'aide, en gris moyen — étaient faites pour des champs qu'on remplit en
   sachant déjà ce qu'on y met. Ici, c'est le texte lui-même qu'il faut
   peser : on monte la taille et on remonte le contraste. */
.form-note .champ { margin-bottom: 20px; }
.form-note .champ > label {
  font-size: 15px;
  font-weight: 650;
  color: var(--texte);
  margin-bottom: 2px;
  letter-spacing: -.01em;
}
.form-note .champ-aide {
  font-size: 13px;
  color: var(--texte-2);
  margin-top: 0;
  margin-bottom: 8px;
}
.form-note .modal-chapo { font-size: 13.5px; color: var(--texte-2); line-height: 1.5; }

/* Le palier : le chiffre pèse, la phrase se lit. L'un sans l'autre fait
   noter au jugé. */
.choix-paliers .choix-btn {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--texte);
  padding: 10px 13px;
}
.choix-paliers .choix-btn strong {
  min-width: 30px;
  font-size: 15px;
  font-weight: 700;
  color: var(--texte-2);
}
.choix-paliers .choix-btn.actif strong { color: inherit; }

/* Le bilan n'affiche plus de montant : il reste la note et le verdict, qui
   méritent alors toute la largeur. */
.form-note .note-verdict { font-size: 14.5px; }
.form-note .note-total { font-size: 21px; }

/* Le drapeau du dossier qui doit signer : violet, parce qu'il ne dit ni un
   succès ni un échec — il dit « pas fini ». */
.pf-sceau.attente-signature {
  background: var(--violet-fond);
  color: var(--violet-texte);
  border-color: var(--violet-bord);
}

/* ------------------------------------- le cadre replié, et celui qui presse */

/* « Notés » grossit chaque semaine et ne se consulte que ponctuellement :
   il se déplie à la demande. Le montant reste dans l'en-tête — replier une
   section ne doit pas cacher ce qu'elle rapporte. */
.pf-repli > summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
.pf-repli > summary::-webkit-details-marker { display: none; }
.pf-repli > summary::before {
  content: '›';
  display: inline-block;
  color: var(--texte-3);
  font-size: 17px;
  line-height: 1;
  transition: transform .15s;
}
.pf-repli[open] > summary::before { transform: rotate(90deg); }
.pf-repli[open] > summary { margin-bottom: 10px; }
.pf-repli-total {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Ce qui reste à jouer passe devant ce qui est joué : le cadre des
   signatures attendues se signale par sa bordure, sans crier. */
.pf-bloc-vif { border-color: var(--violet-bord); }
.pf-gain { color: var(--violet-texte); }

/* Un rendez-vous reporté n'est pas un rendez-vous perdu : il porte sa
   nouvelle date, et la couleur de ce qui est encore devant soi. */
.pf-sceau.reporte {
  background: var(--ambre-fond);
  color: var(--ambre-texte);
  border-color: var(--ambre-bord);
}
.manque-chapo { margin-bottom: 16px; font-size: 13.5px; }

/* ------------------------------------- les notes du prospecteur, en place */

/* Elles se lisent sous la ligne, en retrait : utiles quand on les cherche,
   silencieuses quand on parcourt la liste. */
.notes-pros {
  margin-top: 5px;
  padding-left: 9px;
  border-left: 2px solid var(--bordure);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--texte-2);
  line-height: 1.45;
}
.notes-pros-fiche { margin: 0; white-space: pre-wrap; }
.notes-pros-l { display: flex; gap: 8px; align-items: baseline; }
.notes-pros-q {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

/* Toute la ligne ouvre la fiche : viser un bouton pour le geste le plus
   courant de l'écran faisait perdre du temps à chaque rendez-vous. Les
   boutons qu'elle contient gardent leur propre clic. */
.rdv-ligne[data-fiche] { cursor: pointer; border-radius: 7px; }
.rdv-ligne[data-fiche]:hover { background: var(--fond-3); }


/* --------------------------------------------- la ligne de rendez-vous */

.rdv-tete { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Physique ou téléphonique : on se déplace, ou pas. C'est ce qui change le
   plus la journée, et une couleur le dit avant qu'on ait lu. */
.rdv-type {
  padding: 1px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650;
  border: 1px solid transparent; white-space: nowrap;
}
.rdv-type.sur-place {
  background: var(--violet-fond); color: var(--violet-texte); border-color: var(--violet-bord);
}
/* Le turquoise du rendez-vous, déjà utilisé ailleurs pour la même idée :
   un appel est un rendez-vous, pas une ligne de liste éteinte. */
.rdv-type.au-tel {
  background: var(--turquoise-fond); color: var(--turquoise-texte);
  border-color: var(--turquoise-bord);
}

/* L'intérêt du prospect, sous le nom : trois crans, et la couleur monte
   avec eux. Les étoiles vides restent visibles — sans elles, on ne sait pas
   si « une étoile » est un cran faible ou une échelle qui s'arrête là. */
.rdv-etoiles { display: inline-flex; align-items: center; gap: 2px; }
.rdv-etoiles i { display: inline-flex; color: var(--bordure); }
.rdv-etoiles i.pleine { color: var(--texte-3); }
.rdv-etoiles.cran-2 i.pleine { color: var(--ambre-texte); }
.rdv-etoiles.cran-3 i.pleine { color: var(--vert-texte); }
.rdv-etoiles svg { width: 13px; height: 13px; }

/* Le quand, à droite, à la même place sur chaque ligne : c'est la seule
   information qui décide de ce qu'on fait dans l'heure. */
.rdv-date {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rdv-date b { font-size: 13.5px; font-weight: 700; }
.rdv-heure { font-size: 13px; font-weight: 700; color: var(--accent-aplat); }

/* ==================================================================
   LE CALENDRIER
   ==================================================================
   Côté associés : une barre par personne et par jour, cliquable case par
   case. Côté prospecteur : les mêmes plages, fusionnées et anonymes. */

#rdv-corps { display: flex; flex-direction: column; gap: 16px; }

#rdv-dispos { padding: 15px 20px 18px; }

.disp-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.disp-nav { display: inline-flex; align-items: center; gap: 10px; }
.disp-poseur { display: inline-flex; align-items: center; gap: 9px; }
.disp-poseur .champ-aide { margin: 0; }

/* L'échelle des heures, alignée sur les cases : sans repère, une barre de
   vingt-quatre cases ne dit pas à quelle heure on clique. */
.disp-echelle {
  display: grid; grid-template-columns: repeat(12, 1fr);
  margin: 0 0 4px 128px; font-size: 10.5px; color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

/* Un trait entre les jours : quatre barres qui se suivent sans séparation
   se lisent comme une seule journée de seize heures. */
.disp-jour { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--bordure); }
.disp-jour:last-child { border-bottom: 0; margin-bottom: 0; }
.disp-jour-nom {
  font-size: 12px; font-weight: 650; color: var(--texte-2);
  text-transform: capitalize; margin-bottom: 3px;
}
.disp-barre { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.disp-qui {
  width: 96px; flex-shrink: 0; font-size: 12px; font-weight: 600;
  color: var(--texte-2); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}

/* Trois pixels entre les cases, pas un : à un seul, deux créneaux ouverts
   côte à côte se fondaient en une barre continue où l'on ne savait plus où
   cliquer. La demi-heure doit se voir. */
.disp-cells { flex: 1; display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
/* L'heure est écrite dans la case : avec vingt-quatre colonnes, viser
   16 h 30 en comptant depuis l'échelle se rate une fois sur trois. */
.disp-c {
  height: 21px; padding: 0; cursor: pointer; border-radius: 3px;
  user-select: none;
  background: var(--fond-3); border: 1px solid var(--bordure);
  font: inherit; font-size: 9.5px; font-weight: 600;
  color: var(--texte-3); font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap;
}
/* Ouverte, la case est pleine : le texte passe en blanc pour rester lisible. */
.disp-c.ouvert-tel, .disp-c.ouvert-physique, .disp-c.pris { color: #fff; }
.disp-c.pris { text-shadow: 0 0 2px rgba(0, 0, 0, .55); }
.disp-c:disabled { cursor: default; }
.disp-c.vide:hover:not(:disabled) { background: var(--bordure); }
.disp-c.ouvert-tel { background: var(--turquoise); border-color: var(--turquoise); }
.disp-c.ouvert-physique { background: var(--violet); border-color: var(--violet); }

/* La nature de la ligne, collée au nom : quatre lignes par jour ne se
   distinguent plus si rien ne dit laquelle ouvre quoi. */
.disp-nature {
  display: block; font-style: normal; font-size: 10px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
}
.disp-nature.tel { color: var(--turquoise-texte); }
.disp-nature.physique { color: var(--violet-texte); }

.disp-legende { display: inline-flex; gap: 14px; font-size: 11.5px; color: var(--texte-3); }
.disp-legende span { display: inline-flex; align-items: center; gap: 5px; }
.disp-legende i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.disp-legende i.tel { background: var(--turquoise); }
.disp-legende i.physique { background: var(--violet); }
.disp-legende i.pris {
  background: repeating-linear-gradient(45deg,
    var(--rouge-fond), var(--rouge-fond) 3px,
    var(--rouge-texte) 3px, var(--rouge-texte) 4px);
}
/* Pris : la case reste là, barrée. Un créneau qui disparaît quand on le
   réserve donne l'impression d'avoir perdu une disponibilité. */
.disp-c.pris {
  background: repeating-linear-gradient(45deg,
    var(--rouge-fond), var(--rouge-fond) 3px,
    var(--rouge-texte) 3px, var(--rouge-texte) 4px);
}

/* ------------------------------------------- la grille du prospecteur */

.cal-nav {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.cal-semaine {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px;
}
.cal-jour {
  border: 1px solid var(--bordure); border-radius: 8px;
  padding: 7px 5px; background: var(--fond-2); min-width: 0;
}
.cal-jour-nom {
  font-size: 10.5px; font-weight: 650; color: var(--texte-3);
  text-transform: capitalize; text-align: center; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-heures { display: flex; flex-direction: column; gap: 3px; }
.cal-h {
  border: 1px solid var(--turquoise-bord); border-radius: 5px;
  background: var(--turquoise-fond); color: var(--turquoise-texte);
  font: inherit; font-size: 11.5px; font-weight: 650;
  padding: 3px 0; cursor: pointer; font-variant-numeric: tabular-nums;
}
.cal-h:hover { background: var(--turquoise); color: #fff; }
.cal-h.actif { background: var(--accent-aplat); border-color: var(--accent-aplat); color: #fff; }
.cal-vide { margin: 0; text-align: center; color: var(--texte-3); font-size: 12px; }

.cal-choisi { margin: 10px 0 0; font-size: 13px; font-weight: 650; }
.cal-choisi.vide { font-weight: 400; color: var(--texte-3); }



/* L'échelle des heures se répète en pied de grille : sept jours plus bas,
   on ne sait plus quelle colonne vaut 16 h, et il fallait remonter pour
   viser juste. */
.disp-echelle.bas { margin-top: 2px; margin-bottom: 0; }

/* Le même créneau, mais qu'on regarde au lieu de le choisir : la couleur dit
   sa nature, et rien n'invite à cliquer. */
.cal-h.lecture { cursor: default; }
.cal-h.lecture.physique {
  background: var(--violet-fond); color: var(--violet-texte); border-color: var(--violet-bord);
}
.cal-h.lecture.deux {
  background: linear-gradient(90deg, var(--turquoise-fond) 50%, var(--violet-fond) 50%);
  color: var(--texte-2); border-color: var(--bordure);
}
.cal-h.lecture:hover { background: inherit; color: inherit; }
#calendrier-corps { padding: 15px 20px 18px; }

/* Le calendrier se pose À CÔTÉ de la fenêtre, pas dedans : la fiche reste
   centrée et à sa taille, et le volet prend la place qu'il lui faut. Les
   mettre dans la même boîte donnait soit une fenêtre démesurée, soit un
   calendrier illisible. */
.modal-fond.avec-volet { display: flex; align-items: center; justify-content: center; gap: 14px; }
.modal-fond.avec-volet .modal { flex: 0 1 560px; }

.cal-volet {
  flex: 0 1 460px; align-self: center;
  max-height: 88vh; overflow-y: auto;
  padding: 16px 18px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-radius: 14px; box-shadow: var(--ombre);
}
.cal-volet-tete { margin-bottom: 10px; }
.cal-volet-titre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-3);
}

/* Trop étroit pour deux boîtes côte à côte : le volet passe dessous. */
@media (max-width: 1040px) {
  .modal-fond.avec-volet { flex-direction: column; overflow-y: auto; }
  .modal-fond.avec-volet .modal, .cal-volet { flex: 0 0 auto; width: min(560px, 100%); }
}

/* Les sept jours en onglets, puis les heures du jour retenu. Sept colonnes
   de vingt-quatre heures dans une fenêtre donnaient des colonnes de trente
   pixels où les chiffres se chevauchaient. */
.cal-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; }
.cal-onglet {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 2px; border: 1px solid var(--bordure); border-radius: 8px;
  background: var(--fond-2); color: var(--texte-2); cursor: pointer; font: inherit;
}
.cal-onglet:hover:not(:disabled) { border-color: var(--texte-3); }
.cal-onglet.actif {
  background: var(--accent-aplat); border-color: var(--accent-aplat); color: #fff;
}
.cal-onglet.vide { opacity: .45; cursor: default; }
.cal-onglet-j { font-size: 11.5px; font-weight: 650; text-transform: capitalize; }
.cal-onglet-n { font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* Les heures du jour : une grille qui remplit la largeur, pas une colonne. */
.cal-heures {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 5px;
}


/* La plage en cours de tracé : on voit ce qu'on va poser avant de relâcher,
   et dans quel sens — ouvrir ou refermer. */
.disp-c.tire { outline: 2px solid var(--accent-aplat); outline-offset: -2px; }
.disp-c.tire-ouvre { background: var(--accent-aplat); border-color: var(--accent-aplat); color: #fff; }
.disp-c.tire-ferme { background: var(--fond-3); border-color: var(--accent-aplat); color: var(--texte-3); }
.disp-cells { touch-action: pan-y; }

/* Le trajet d'un rendez-vous physique : bloqué, mais ce n'est pas un
   rendez-vous. Hachures plus claires — on voit que la demi-heure est prise
   sans croire qu'il y a deux visites. */
.disp-c.trajet {
  background: repeating-linear-gradient(45deg,
    var(--fond-3), var(--fond-3) 3px,
    var(--bordure) 3px, var(--bordure) 5px);
  color: var(--texte-3); border-color: var(--bordure);
}
.disp-legende i.trajet {
  background: repeating-linear-gradient(45deg,
    var(--fond-3), var(--fond-3) 3px,
    var(--bordure) 3px, var(--bordure) 5px);
}