/* ==========================================================================
   Outil de suivi commercial Prism — feuille de style
   --------------------------------------------------------------------------
   Reprise de la DA du site (DECISIONS.md §6), relevée dans
   ~/Desktop/prism-site/da/systeme/ : fond clair #F4F6F8, cartes blanches,
   Unbounded / Geologica / Satoshi servies depuis ce dossier, cyan #19C8E6
   en accent et #0C7186 dès qu'il faut du texte coloré.

   ⚠️ L'ÉCHELLE. Thomas : « tout fait gros, on dirait qu'on est zoomé ».
   Les repères de la page en ligne (H1 58, titre de section 40, titre de
   carte 19) sont ceux d'une page d'accueil marketing. Ici c'est un outil
   dense, consulté tous les jours : l'échelle est descendue d'un cran et
   les tailles ci-dessous sont posées une fois pour toutes. Aucune taille ne
   s'invente ailleurs dans la feuille — on prend un jeton.
   ========================================================================== */

@font-face {
  font-family: 'Unbounded';
  src: url('/statique/polices/unbounded.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geologica';
  src: url('/statique/polices/geologica.woff2') format('woff2');
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/statique/polices/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/statique/polices/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/statique/polices/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs — fond clair du système */
  --fond: #F4F6F8;
  --carte: #FFFFFF;
  --surface: #F1F4F7;
  --bascule: #E7EAEE;
  --filet: #DFE3E7;
  --filet-fort: rgba(11, 16, 22, .14);

  --encre: #070A0E;
  --encre-2: #494C50;
  --encre-3: #616467;
  --encre-4: #7E8083;

  --cyan: #19C8E6;
  --cyan-txt: #0C7186;      /* la seule valeur lisible pour du texte coloré */
  --positif: #3FD69C;
  /* ⛔ Le dégradé de marque (cyan → bleu → violet) est écarté DANS CET OUTIL :
     Thomas, le 04/11, « le dégradé vers le violet je n'aime pas du tout ». Les
     remplissages — anneau, barres, filet — sont en cyan plein. Le dégradé reste
     celui de la marque sur le site, il n'a simplement pas sa place ici. */
  --remplissage: #19C8E6;

  /* Formes */
  --r: 16px;
  --r-sm: 11px;
  --r-xs: 8px;
  --ombre-carte: 0 1px 2px rgba(10, 15, 22, .04), 0 10px 26px -18px rgba(10, 15, 22, .16);
  --ombre-flottant: 0 1px 2px rgba(10, 15, 22, .06), 0 30px 70px -28px rgba(10, 15, 22, .34);

  /* Polices */
  --f-titre: 'Unbounded', system-ui, sans-serif;
  --f-accroche: 'Geologica', system-ui, sans-serif;
  --f-texte: 'Satoshi', system-ui, sans-serif;

  /* Tailles — le jeu complet, rien au-delà */
  --t-page: 25px;      /* titre de page */
  --t-sec: 15px;       /* titre de section */
  --t-carte: 14px;     /* titre de carte */
  --t-chiffre-xl: 34px;
  --t-chiffre: 26px;
  --t-chiffre-sm: 19px;
  --t-texte: 13.5px;
  --t-cellule: 13px;
  --t-meta: 12.5px;
  --t-micro: 10.5px;   /* intitulés en capitales */

  --utile: 1320px;
  --courbe: cubic-bezier(.16, .72, .22, 1);
}

/* ===== Socle ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-texte);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan-txt); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-family: var(--f-titre); font-weight: 700; }
h1 { font-size: var(--t-page); letter-spacing: -.045em; line-height: 1.12; }
h2 { font-size: var(--t-sec); letter-spacing: -.03em; line-height: 1.2; }
h3 {
  font-family: var(--f-accroche); font-weight: 600;
  font-size: var(--t-carte); letter-spacing: -.012em; line-height: 1.3;
}

:focus-visible { outline: 2px solid var(--cyan-txt); outline-offset: 2px; }

.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== En-tête ========================================================== */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--filet);
}
.entete-dedans {
  max-width: var(--utile); margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; gap: 26px;
}
.marque { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.marque img { height: 21px; width: auto; display: block; }
.marque .mot {
  font-family: var(--f-accroche); font-weight: 500; font-size: var(--t-meta);
  color: var(--encre-4); padding-left: 10px; border-left: 1px solid var(--filet);
  letter-spacing: -.01em;
}

.navigation { display: flex; gap: 2px; margin-right: auto; }
.navigation a {
  display: block; padding: 6px 11px; border-radius: var(--r-sm);
  font-size: var(--t-texte); font-weight: 500; color: var(--encre-3);
  transition: background .18s var(--courbe), color .18s var(--courbe);
}
.navigation a:hover { background: var(--surface); color: var(--encre); text-decoration: none; }
.navigation a[aria-current="page"] { background: var(--bascule); color: var(--encre); }

.qui { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.qui .nom { font-size: var(--t-meta); font-weight: 500; color: var(--encre-2); }
.qui form { margin: 0; }
.deconnexion {
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font-family: var(--f-texte); font-size: var(--t-meta); color: var(--encre-4);
  border-radius: var(--r-xs);
}
.deconnexion:hover { color: var(--encre); background: var(--surface); }

.pastille-qui {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-accroche); font-weight: 600; font-size: 11px; color: #fff;
  background: var(--remplissage); flex: 0 0 auto;
}

/* En-tête en fenêtre étroite : on retire ce qui se devine (le sous-titre de
   la marque, le prénom à côté de la pastille) et on raccourcit le libellé du
   bouton, plutôt que de laisser la barre se casser. */
.etiquette-courte { display: none; }
@media (max-width: 920px) {
  .entete-dedans { gap: 14px; padding: 0 16px; }
  .marque .mot { display: none; }
  .qui .nom { display: none; }
  .etiquette-longue { display: none; }
  .etiquette-courte { display: inline; }
  .page { padding-left: 16px; padding-right: 16px; }
  .pied-page { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 620px) {
  .navigation a { padding: 6px 8px; }
  .titre-page { align-items: flex-start; }
}

/* ===== Mise en page ===================================================== */

.page { max-width: var(--utile); margin: 0 auto; padding: 22px 24px 64px; }

.titre-page {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.titre-page .sous {
  margin: 5px 0 0; font-size: var(--t-meta); color: var(--encre-3);
}

.colonnes {
  display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) { .colonnes { grid-template-columns: minmax(0, 1fr); } }

.pile { display: grid; gap: 18px; }

/* ===== Cartes =========================================================== */

.carte {
  background: var(--carte); border-radius: var(--r);
  box-shadow: var(--ombre-carte); padding: 16px 18px;
}
/* ⚠️ `clip` et non `hidden` : `hidden` ferait de la carte le repère des
   en-têtes collants du tableau, qui descendraient alors par-dessus la
   première ligne. `clip` arrondit les coins sans créer ce repère. */
.carte-serree { padding: 0; overflow: clip; }

.tete-carte {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.tete-carte .appoint { font-size: var(--t-meta); color: var(--encre-4); }

.intitule {
  font-family: var(--f-texte); font-weight: 500; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .09em; color: var(--encre-4);
}

/* ===== Boutons ========================================================== */

.bouton {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  white-space: nowrap;  /* un libellé de bouton ne se casse jamais en lignes */
  font-family: var(--f-texte); font-size: var(--t-texte); font-weight: 500;
  padding: 7px 13px; border-radius: var(--r-sm); border: 1px solid var(--filet-fort);
  background: var(--carte); color: var(--encre);
  transition: background .18s var(--courbe), border-color .18s var(--courbe),
              box-shadow .18s var(--courbe), transform .18s var(--courbe);
}
.bouton:hover { background: var(--surface); border-color: rgba(11, 16, 22, .26); text-decoration: none; }
.bouton:active { transform: translateY(1px); }

/* L'accent de la marque sur fond clair : fond cyan, texte blanc, halo porté
   par la boîte (cf. accentuation.md §3). Tenu volontairement plus sobre que
   sur le site : ce bouton est présent sur toutes les vues. */
/* Le halo est porté par la boîte, pas par le texte (accentuation.md §3). Il
   est resserré par rapport au site : un bouton présent sur toutes les vues ne
   peut pas rayonner comme un mot de titre. Le liseré clair en haut et l'ombre
   basse lui donnent une épaisseur — sans halo seul, ça flotte. */
.bouton-accent {
  background: var(--cyan); border-color: transparent; color: #fff; font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 1px 2px rgba(10, 15, 22, .14),
    0 4px 10px -3px rgba(18, 150, 175, .42),
    0 0 14px -2px rgba(25, 200, 230, .5);
}
.bouton-accent:hover {
  background: #1ACEED; border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 1px 2px rgba(10, 15, 22, .14),
    0 6px 14px -4px rgba(18, 150, 175, .46),
    0 0 20px -2px rgba(25, 200, 230, .62);
}
.bouton-accent:active {
  box-shadow:
    inset 0 1px 2px rgba(6, 90, 106, .28),
    0 1px 2px rgba(10, 15, 22, .12);
}
.bouton-discret {
  border-color: transparent; background: var(--surface); color: var(--encre-2);
}
.bouton-discret:hover { background: var(--bascule); border-color: transparent; color: var(--encre); }
.bouton-sm { padding: 4px 9px; font-size: var(--t-meta); border-radius: var(--r-xs); }

.bouton-plus {
  width: 25px; height: 25px; padding: 0; justify-content: center;
  border-radius: var(--r-xs); font-size: 15px; line-height: 1;
  color: var(--encre-4); background: var(--carte); border: 1px solid var(--filet);
}
.bouton-plus:hover { color: var(--cyan-txt); border-color: var(--cyan); background: rgba(25, 200, 230, .07); }

/* ===== Formulaires ====================================================== */

label { display: block; }
.champ { display: grid; gap: 5px; }
.champ > .intitule { margin-bottom: 1px; }
.aide-champ { font-size: var(--t-meta); color: var(--encre-4); line-height: 1.5; }
.aide-champ a { color: var(--encre-3); }

/* Pagination d'une liste longue. Des liens, jamais du script. */
.pages {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px; border-top: 1px solid var(--filet);
}
.pages .rang {
  font-size: var(--t-meta); color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.pages [aria-disabled="true"] { opacity: .4; pointer-events: none; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%; font-family: var(--f-texte); font-size: var(--t-texte);
  color: var(--encre); background: var(--carte);
  border: 1px solid var(--filet-fort); border-radius: var(--r-sm);
  padding: 7px 10px; line-height: 1.4;
  /* Un creux d'un pixel : le champ se lit comme un puits, pas comme un
     rectangle dessiné. C'est à peine visible et ça change tout. */
  box-shadow: inset 0 1px 2px rgba(11, 16, 22, .045);
  transition: border-color .18s var(--courbe), box-shadow .18s var(--courbe);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: rgba(11, 16, 22, .26);
}
textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
select { appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-4) 50%),
                    linear-gradient(135deg, var(--encre-4) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 11px) 52%;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cyan);
  /* Le creux est conservé sous l'anneau : sans lui le champ « remonte »
     au moment où on clique dedans. */
  box-shadow: inset 0 1px 2px rgba(11, 16, 22, .04), 0 0 0 3px rgba(25, 200, 230, .16);
}
::placeholder { color: var(--encre-4); opacity: 1; }

.grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grille-champs .pleine { grid-column: 1 / -1; }

.message {
  padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--t-meta);
  background: var(--surface); border: 1px solid var(--filet); color: var(--encre-2);
}
.message-refus { background: #FDF0F4; border-color: #F4D3DF; color: #8A2447; }
.message-fait { background: #EEFBF5; border-color: #CBEEDF; color: #156A4A; }

/* ===== Barre de filtres ================================================= */

/* Les onglets d'avancement : où on en est, avant même de filtrer.
   Même grammaire que la bascule de « Ma journée » — piste grise, pastille
   blanche en relief pour l'onglet courant. ⛔ Pas de fond noir : le §6 et
   Thomas, le 04/11, sur les pastilles de type. */
.segments {
  display: flex; flex-wrap: wrap; gap: 3px;
  background: var(--bascule); border-radius: var(--r-sm);
  padding: 3px; margin-bottom: 10px;
}
.segment {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 9px;
  font-size: var(--t-meta); font-weight: 500; color: var(--encre-3);
  text-decoration: none; white-space: nowrap;
}
.segment:hover { color: var(--encre); text-decoration: none; }
.segment .combien {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  padding: 0 5px; border-radius: 999px;
  background: var(--filet); color: var(--encre-2);
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.segment .combien-zero { color: var(--encre-4); }
.segment-actif, .segment-actif:hover {
  background: var(--carte); color: var(--encre);
  box-shadow: 0 1px 2px rgba(10, 15, 22, .08);
}
.segment-actif .combien {
  background: color-mix(in srgb, var(--cyan) 17%, #fff);
  color: var(--cyan-txt);
}

.filtres {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--carte); border-radius: var(--r); padding: 11px 13px;
  box-shadow: var(--ombre-carte); margin-bottom: 14px;
}
.filtres .recherche { flex: 1 1 230px; min-width: 180px; }
.filtres select { width: auto; min-width: 128px; }
.filtres .appoint { margin-left: auto; font-size: var(--t-meta); color: var(--encre-4); }

/* ===== Tableau ========================================================== */

/* ⚠️ Pas d'`overflow` ici en grand écran : un conteneur qui défile devient le
   repère des en-têtes collants, et le `top:54px` les décalerait vers le bas,
   par-dessus la première ligne. Le défilement latéral n'apparaît qu'en petite
   largeur, où les en-têtes cessent d'être collants. */
table.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-cellule); }
table.tableau th {
  text-align: left; padding: 9px 12px; white-space: nowrap;
  font-family: var(--f-texte); font-weight: 500; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .08em; color: var(--encre-4);
  background: var(--surface); border-bottom: 1px solid var(--filet);
  position: sticky; top: 60px; z-index: 2;
}
table.tableau th a { color: inherit; }
table.tableau th a:hover { color: var(--encre); text-decoration: none; }
table.tableau th .fleche { color: var(--cyan-txt); }
table.tableau td {
  padding: 9px 12px; border-bottom: 1px solid var(--filet);
  vertical-align: middle; color: var(--encre-2);
}
table.tableau tbody tr:last-child td { border-bottom: 0; }
table.tableau tbody tr:hover td { background: #FAFBFC; }
table.tableau .principal { color: var(--encre); font-weight: 500; }
table.tableau .principal a { color: inherit; }
table.tableau .secondaire { display: block; color: var(--encre-4); font-size: var(--t-meta); }
/* Une ligne, toujours : le libellé se tronque plutôt que de repousser ce qui
   le suit à la ligne du dessous. */
table.tableau .ligne-secondaire { display: flex; align-items: baseline; gap: 5px; }
table.tableau .ligne-secondaire .texte {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
table.tableau td.actions { width: 1%; white-space: nowrap; text-align: right; }
/* Repris ici pour passer devant `table.tableau .secondaire`, de même poids. */
table.tableau .echeance-retard { color: #A8325A; font-weight: 500; }
table.tableau .echeance-jour { color: var(--cyan-txt); font-weight: 500; }

@media (max-width: 1180px) {
  .tableau-enveloppe { overflow-x: auto; }
  .tableau-enveloppe table.tableau { min-width: 980px; }
  table.tableau th { position: static; }
}

/* ===== Jetons d'état ==================================================== */

.jeton {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: var(--t-meta); font-weight: 500;
  background: var(--surface); color: var(--encre-2); border: 1px solid var(--filet);
}
.jeton .point { width: 6px; height: 6px; border-radius: 50%; background: var(--encre-4); flex: 0 0 auto; }
.jeton-neutre  .point { background: #A9B2BE; }
.jeton-attente .point { background: #F5B942; }
.jeton-vivant  .point { background: #6E8BFF; }
.jeton-gagne { background: #EEFBF5; border-color: #CBEEDF; color: #125C40; }
.jeton-gagne .point { background: var(--positif); }
.jeton-perdu { color: var(--encre-4); }
.jeton-perdu .point { background: #BFC4C9; }
/* « Ne plus contacter » n'est pas « perdu » : c'est une demande de la
   personne. Elle se voit, et elle ne se rouvre pas. */
.jeton-exclu { background: #FDF0F4; border-color: #EBCBD6; color: #8A2447; }
.jeton-exclu .point { background: #C2555F; }

.porteur {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--t-meta); color: var(--encre-2);
}
.porteur .initiale {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-accroche); font-weight: 600; font-size: 9.5px; color: #fff;
  background: var(--encre-4); flex: 0 0 auto;
}
.porteur-1 .initiale { background: #6E8BFF; }
.porteur-2 .initiale { background: #A66BFF; }
.porteur-3 .initiale { background: #19C8E6; }

.echeance { white-space: nowrap; font-variant-numeric: tabular-nums; }
.echeance-retard { color: #A8325A; font-weight: 500; }
.echeance-jour { color: var(--cyan-txt); font-weight: 500; }

/* ===== Objectifs ======================================================== */

.objectif-tete {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px;
  align-items: center;
}
@media (max-width: 560px) { .objectif-tete { grid-template-columns: minmax(0, 1fr); } }

/* L'anneau : cyan plein sur la part faite, piste grise sur le reste.
   `--part` est l'angle fait, écrit en ligne. */
.anneau {
  --part: 0deg;
  width: 112px; height: 112px; border-radius: 50%; position: relative;
  display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(
    var(--remplissage) 0deg var(--part),
    var(--bascule) var(--part) 360deg);
}
.anneau::after {
  /* le disque intérieur, qui fait l'épaisseur de l'anneau */
  content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--carte);
}
.anneau .dedans { position: relative; z-index: 1; text-align: center; line-height: 1; }
.anneau .valeur {
  display: block; font-family: var(--f-titre); font-weight: 700;
  font-size: var(--t-chiffre); letter-spacing: -.04em; color: var(--encre);
}
.anneau .sur { display: block; margin-top: 3px; font-size: var(--t-meta); color: var(--encre-4); }

.objectif-tete .libelle {
  font-family: var(--f-accroche); font-weight: 600; font-size: 17px;
  letter-spacing: -.015em; line-height: 1.25;
}
.objectif-tete .explique { margin: 6px 0 0; font-size: var(--t-meta); color: var(--encre-3); }
.objectif-tete .reste { margin-top: 9px; font-size: var(--t-texte); color: var(--encre-2); }
.objectif-tete .reste b { font-weight: 700; color: var(--encre); }

.objectifs-liste { display: grid; gap: 13px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--filet); }
.objectif-ligne .haut {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 5px;
}
.objectif-ligne .nom { font-size: var(--t-texte); font-weight: 500; color: var(--encre); }
.objectif-ligne .nom .pour { font-weight: 400; color: var(--encre-4); }
.objectif-ligne .chiffres { font-size: var(--t-meta); color: var(--encre-3); font-variant-numeric: tabular-nums; }
.objectif-ligne .chiffres b {
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-chiffre-sm);
  letter-spacing: -.04em; color: var(--encre);
}

.barre { height: 7px; border-radius: 999px; background: var(--bascule); overflow: hidden; }
.barre > span { display: block; height: 100%; border-radius: 999px; background: var(--remplissage); }
.barre-pleine > span { background: linear-gradient(100deg, #3FD69C, #46E0A0); }

/* ===== Compteurs de la semaine ========================================== */

.compteurs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--filet); border-radius: var(--r-sm); overflow: hidden;
}
@media (max-width: 760px) { .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compteur { background: var(--carte); padding: 12px 13px 13px; }
.compteur .valeur {
  display: block; font-family: var(--f-titre); font-weight: 700;
  font-size: var(--t-chiffre); letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.compteur .valeur-zero { color: var(--encre-4); }
.compteur .nom { display: block; margin-top: 6px; font-size: var(--t-meta); color: var(--encre-3); }
.compteur .ecart { display: block; margin-top: 5px; font-size: var(--t-meta); color: var(--encre-4); }
.compteur .ecart-haut { color: #156A4A; }
.compteur .ecart-bas { color: #A8325A; }

/* ===== Les huit semaines (le seul graphique) ============================ */

.semaines { display: flex; align-items: flex-end; gap: 7px; margin-top: 4px; }
.semaines .colonne { flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; }
/* ⚠️ La hauteur en % a besoin d'une piste à hauteur fixe : sans elle, les
   tiges se font écraser par le chiffre et la légende, et toutes les semaines
   rendent la même barre. */
.semaines .piste { height: 46px; display: flex; align-items: flex-end; }
.semaines .tige {
  width: 100%; border-radius: 5px 5px 3px 3px; background: #D7DDE4; min-height: 3px;
  transition: height .3s var(--courbe);
}
.semaines .colonne-courante .tige { background: var(--remplissage); }
.semaines .legende {
  text-align: center; font-size: var(--t-micro); color: var(--encre-4);
  font-variant-numeric: tabular-nums;
}
.semaines .colonne-courante .legende { color: var(--encre-2); font-weight: 500; }
.semaines-chiffre {
  text-align: center; font-size: var(--t-meta); font-weight: 500; color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}

/* ===== Série (le petit ressort) ========================================= */

.serie {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px;
  border-radius: 999px; background: var(--carte); border: 1px solid var(--filet);
  box-shadow: var(--ombre-carte); font-size: var(--t-meta); color: var(--encre-2);
}
.serie .flamme { font-size: 13px; line-height: 1; }
.serie b { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-texte); letter-spacing: -.03em; color: var(--encre); }

/* ===== Qui a fait quoi ================================================== */

.personnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .personnes { grid-template-columns: minmax(0, 1fr); } }
.personne { border: 1px solid var(--filet); border-radius: var(--r-sm); padding: 12px 13px; }
.personne .haut { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.personne .nom { font-family: var(--f-accroche); font-weight: 600; font-size: var(--t-carte); }
.personne .total {
  margin-left: auto; font-family: var(--f-titre); font-weight: 700;
  font-size: var(--t-chiffre-sm); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.personne .total-zero { color: var(--encre-4); }
.personne .detail { display: grid; gap: 4px; margin-top: 10px; }
.personne .detail div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-meta); color: var(--encre-3); }
.personne .detail b { font-weight: 500; color: var(--encre); font-variant-numeric: tabular-nums; }
.personne .portefeuille { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--filet); font-size: var(--t-meta); color: var(--encre-4); }

/* ===== Files d'attente (colonne de droite) ============================== */

.file { display: grid; gap: 0; }
.file-groupe + .file-groupe { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--filet); }
.file-groupe .intitule { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.file-groupe .compte {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--bascule); color: var(--encre-2);
  font-size: 10px; font-weight: 700; letter-spacing: 0;
}
.file-groupe-retard .compte { background: #F7DCE5; color: #8A2447; }
.ligne-file {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--filet);
}
.ligne-file:last-child { border-bottom: 0; }
.ligne-file .corps { min-width: 0; flex: 1 1 auto; }
.ligne-file .qui-quoi { font-size: var(--t-texte); font-weight: 500; color: var(--encre); }
.ligne-file .qui-quoi a { color: inherit; }
.ligne-file .quoi { display: block; font-size: var(--t-meta); color: var(--encre-3); margin-top: 1px; }
.ligne-file .quand { display: block; font-size: var(--t-meta); color: var(--encre-4); margin-top: 2px; }
/* Le reste d'une file tronquée. Discret : c'est une mesure, pas une alerte. */
.reste-file {
  display: inline-block; margin-top: 8px;
  font-size: var(--t-meta); color: var(--encre-3);
}

/* ===== Chronologie ====================================================== */

.chrono { position: relative; padding-left: 21px; }
.chrono::before {
  content: ''; position: absolute; left: 4px; top: 7px; bottom: 7px; width: 1px;
  background: var(--filet);
}
.chrono-item { position: relative; padding: 0 0 15px; }
.chrono-item:last-child { padding-bottom: 0; }
.chrono-item .puce {
  position: absolute; left: -21px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--encre-4); box-shadow: 0 0 0 3px var(--carte);
}
.chrono-item .haut {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.chrono-item .quoi { font-family: var(--f-accroche); font-weight: 600; font-size: var(--t-texte); }
.chrono-item .quand { font-size: var(--t-meta); color: var(--encre-4); font-variant-numeric: tabular-nums; }
.chrono-item .par { font-size: var(--t-meta); color: var(--encre-3); }
.chrono-item .mot { margin: 4px 0 0; font-size: var(--t-texte); color: var(--encre-2); white-space: pre-line; }
.chrono-item .suite {
  margin-top: 7px; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--t-meta); color: var(--encre-2);
}
.chrono-item .suite .intitule { display: block; margin-bottom: 2px; }

/* ===== Fiche ============================================================ */

.fiche-tete { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.fiche-tete .identite { min-width: 0; flex: 1 1 260px; }
.fiche-tete h1 { font-size: 23px; }
.fiche-tete .poste { margin: 5px 0 0; font-size: var(--t-texte); color: var(--encre-3); }
.fiche-tete .outils { display: flex; gap: 7px; flex-wrap: wrap; }

.coordonnees { display: grid; gap: 9px; }
.coordonnees div { display: grid; gap: 1px; }
.coordonnees .valeur { font-size: var(--t-texte); color: var(--encre); word-break: break-word; }
.coordonnees .valeur-vide { color: var(--encre-4); }

.resume-fiche {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--filet); border-radius: var(--r-sm); overflow: hidden; margin-top: 14px;
}
.resume-fiche div { background: var(--carte); padding: 10px 12px; }
.resume-fiche .valeur {
  display: block; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-chiffre-sm);
  letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.resume-fiche .valeur-texte { font-family: var(--f-accroche); font-size: var(--t-carte); letter-spacing: -.01em; }

/* ===== États vides ====================================================== */

.vide { text-align: center; padding: 26px 20px; }
.vide-serre { padding: 16px 12px; text-align: left; }
.vide .dessin {
  width: 34px; height: 34px; margin: 0 auto 11px; border-radius: var(--r-sm);
  background: var(--surface); display: grid; place-items: center; color: var(--encre-4);
  font-size: 16px;
}
.vide .titre {
  font-family: var(--f-accroche); font-weight: 600; font-size: var(--t-carte); color: var(--encre);
}
.vide .mot { margin: 5px auto 0; font-size: var(--t-meta); color: var(--encre-3); max-width: 42ch; }
.vide .bouton { margin-top: 13px; }
.vide-serre .mot { margin-left: 0; }

/* ===== Dialogue de saisie rapide ======================================== */

dialog.volet {
  border: 0; padding: 0; border-radius: var(--r); background: var(--carte);
  box-shadow: var(--ombre-flottant); width: min(520px, calc(100vw - 32px));
  color: var(--encre);
}
dialog.volet::backdrop { background: rgba(7, 10, 14, .34); backdrop-filter: blur(2px); }
.volet-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px 13px; border-bottom: 1px solid var(--filet);
}
.volet-corps { padding: 16px 18px; display: grid; gap: 12px; }
.volet-pied {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding: 13px 18px; border-top: 1px solid var(--filet); background: var(--surface);
  border-radius: 0 0 var(--r) var(--r);
}
.volet-pied .aide { margin-right: auto; font-size: var(--t-meta); color: var(--encre-4); }
.fermer {
  background: none; border: 0; cursor: pointer; padding: 3px 7px; border-radius: var(--r-xs);
  font-family: var(--f-texte); font-size: 17px; line-height: 1; color: var(--encre-4);
}
.fermer:hover { background: var(--bascule); color: var(--encre); }

/* Choix du type d'événement : des pastilles, pas une liste déroulante —
   c'est le geste le plus fréquent de l'outil. */
.choix-type { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-type label { position: relative; }
.choix-type input { position: absolute; opacity: 0; pointer-events: none; }
.choix-type span {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; font-size: var(--t-meta); font-weight: 500;
  border: 1px solid var(--filet); background: var(--carte); color: var(--encre-2);
  transition: border-color .18s var(--courbe), background .18s var(--courbe);
}
.choix-type span::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teinte, var(--encre-4));
}
.choix-type label:hover span { border-color: var(--filet-fort); background: var(--surface); }
/* ⭐ Le choisi ne se noircit pas : il s'allume de SA couleur. Un fond noir
   écrase la pastille et ne dit rien du type retenu ; un fond teinté et un
   trait net disent lequel, et restent lisibles — le texte garde l'encre. */
.choix-type input:checked + span {
  color: var(--encre); font-weight: 700;
  border-color: var(--teinte, var(--encre-4));
  background: color-mix(in srgb, var(--teinte, #000) 13%, #fff);
  box-shadow: inset 0 0 0 1px var(--teinte, transparent);
}
.choix-type input:checked + span::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.choix-type input:focus-visible + span { outline: 2px solid var(--cyan-txt); outline-offset: 2px; }

/* ===== Ma journée ======================================================= */

.bascule-vue {
  display: inline-flex; background: var(--bascule); border-radius: var(--r-sm);
  padding: 2px;
}
.bascule-vue a {
  padding: 4px 11px; border-radius: 9px; font-size: var(--t-meta); font-weight: 500;
  color: var(--encre-3); text-decoration: none;
}
.bascule-vue a:hover { color: var(--encre); text-decoration: none; }
.bascule-vue a[aria-current] {
  background: var(--carte); color: var(--encre);
  box-shadow: 0 1px 2px rgba(10, 15, 22, .08);
}

.bandeau-jour { margin-bottom: 18px; }
.bandeau-jour-principal {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center;
}
.compte-jour {
  display: flex; align-items: baseline; gap: 3px; flex: 0 0 auto;
  font-family: var(--f-titre); font-weight: 700; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.compte-jour .valeur { font-size: 40px; line-height: 1; color: var(--encre); }
.compte-jour .sur { font-size: var(--t-chiffre-sm); color: var(--encre-4); }
.bandeau-jour-texte .libelle {
  margin: 0 0 8px; font-family: var(--f-accroche); font-weight: 600;
  font-size: 16px; letter-spacing: -.015em;
}
.bandeau-jour-texte .explique {
  margin: 8px 0 0; font-size: var(--t-meta); color: var(--encre-3);
}
.bandeau-jour-texte .explique b { color: var(--encre); font-weight: 700; }
.barre-haute { height: 10px; }

.autres-jour {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--filet);
}
.autre-jour .haut {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px;
  font-size: var(--t-meta);
}
.autre-jour .nom { color: var(--encre-2); }
.autre-jour .chiffres { color: var(--encre-4); font-variant-numeric: tabular-nums; }

/* La carte du contact à traiter */
.carte-geste { padding-top: 0; }
.motif {
  display: inline-block; margin: 0 -18px 15px; padding: 9px 18px;
  font-size: var(--t-micro); font-weight: 500; text-transform: uppercase;
  letter-spacing: .09em; color: var(--encre-3);
  background: var(--surface); border-radius: var(--r) 0 var(--r-sm) 0;
}
.motif-retard { background: #FDF0F4; color: #8A2447; }
.motif-aujourdhui { background: #E9F9FD; color: #0C7186; }

.geste-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.geste-nom {
  font-family: var(--f-titre); font-weight: 700; font-size: 22px;
  letter-spacing: -.045em; line-height: 1.15;
}
.geste-nom a { color: inherit; }
.geste-nom a:hover { color: var(--cyan-txt); text-decoration: none; }
.geste-poste { margin: 5px 0 0; font-size: var(--t-texte); color: var(--encre-3); }

.geste-liens { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.geste-afaire {
  margin: 14px 0 0; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--t-texte); color: var(--encre);
}
.geste-afaire .intitule { display: block; margin-bottom: 2px; }

.geste-histoire { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filet); }
.geste-histoire > .intitule { display: block; margin-bottom: 9px; }
.histoire-ligne {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; font-size: var(--t-meta); border-bottom: 1px solid var(--filet);
}
.histoire-ligne:last-child { border-bottom: 0; }
.histoire-ligne .puce {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; align-self: center;
}
.histoire-ligne .quoi { font-weight: 500; color: var(--encre); }
.histoire-ligne .quand { color: var(--encre-4); }
.histoire-ligne .par { color: var(--encre-4); }
.histoire-ligne .mot { color: var(--encre-3); flex: 1 1 100%; padding-left: 15px; }
.geste-histoire-vide {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--filet);
  font-size: var(--t-meta); color: var(--encre-4);
}

/* Les gestes : un bouton = un événement enregistré + la suite programmée */
.gestes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.geste-note { margin-bottom: 14px; }
.gestes-rangee { display: grid; gap: 7px; }
.gestes-rangee + .gestes-rangee { margin-top: 13px; }
.gestes-rangee-fin { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--filet); }
.gestes-boutons { display: flex; flex-wrap: wrap; gap: 7px; }

.geste {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  white-space: nowrap; font-family: var(--f-texte); font-size: var(--t-texte);
  font-weight: 500; padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--filet-fort); background: var(--carte); color: var(--encre);
  transition: background .18s var(--courbe), border-color .18s var(--courbe),
              box-shadow .18s var(--courbe), transform .18s var(--courbe);
}
.geste::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teinte, var(--encre-4)); flex: 0 0 auto;
}
.geste:hover {
  border-color: var(--teinte, var(--filet-fort));
  background: color-mix(in srgb, var(--teinte, #000) 9%, #fff);
  box-shadow: inset 0 0 0 1px var(--teinte, transparent);
}
.geste:active { transform: translateY(1px); }
.geste-discret { color: var(--encre-3); }
.geste-discret::before { display: none; }
.geste-refus::before { display: none; }
.geste-refus { color: #8A2447; border-color: #EBCBD6; }
.geste-refus:hover { background: #FDF0F4; border-color: #D98BA2; box-shadow: none; }

.ligne-ignoree td { color: var(--encre-4); background: var(--surface); }

/* Le décor de démonstration, signalé partout où il apparaît. Discret, mais
   jamais absent : personne ne doit prendre une fiche inventée pour un vrai
   prospect — ni cliquer sur « Écrire » en croyant écrire à quelqu'un. */
/* La nature d'une organisation : entreprise, club, institution. Un trait de
   sa couleur, pas une pastille pleine — elle accompagne l'information, elle
   ne lui dispute pas la place. */
.jeton-nature {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  flex: 0 0 auto; font-size: var(--t-micro); font-weight: 500;
  padding: 0 7px 1px 6px; border-radius: 999px; line-height: 1.6;
  color: var(--encre-2); background: var(--carte);
  border: 1px solid var(--teinte, var(--filet));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teinte, #fff) 10%, #fff);
}
.jeton-nature::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teinte, var(--encre-4)); flex: 0 0 auto;
}

.point-nature {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}

.bandeau-demo {
  margin: 0 0 16px; padding: 11px 14px; border-radius: var(--r-sm);
  background: #FCF3DC; border: 1px solid #F0DFB0; color: #6B5610;
  font-size: var(--t-meta); line-height: 1.55;
}
.bandeau-demo b { color: #4F3F08; }
/* ⛔ Pas de chasse fixe, nulle part (DECISIONS.md §6) — y compris pour
   désigner une commande. On la distingue par le fond, pas par la police. */
.bandeau-demo .commande {
  font-weight: 500; padding: 1px 6px; border-radius: 5px;
  background: rgba(107, 86, 16, .12); white-space: nowrap;
}

.marque-demo {
  display: inline-block; vertical-align: baseline; margin-left: 5px;
  padding: 0 5px 1px; border-radius: 4px;
  font-family: var(--f-texte); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; line-height: 1.5;
  color: #7E6514; background: #FCF3DC; border: 1px solid #F0DFB0;
}
h1 .marque-demo, .geste-nom .marque-demo {
  font-size: 10px; padding: 1px 7px 2px; margin-left: 9px;
  vertical-align: middle; letter-spacing: .08em;
}

/* ===== Connexion ======================================================== */

.connexion-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.connexion-boite { width: min(372px, 100%); }
.connexion-boite .marque { justify-content: center; margin-bottom: 28px; }
.connexion-boite .marque img { height: 30px; }

.connexion-carte {
  padding: 0; position: relative; overflow: clip;
  /* Trois couches plutôt qu'une : un filet net, une diffusion courte, une
     ombre portée longue. C'est ce qui pose la carte sur le fond au lieu de
     la faire flotter. */
  box-shadow:
    0 0 0 1px rgba(11, 16, 22, .04),
    0 2px 6px rgba(10, 15, 22, .04),
    0 26px 52px -26px rgba(10, 15, 22, .26);
}
/* La signature de la marque, en filet de 2 px sur la tranche haute. */
.connexion-carte::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--remplissage);
}

.connexion-dedans { padding: 26px 28px 24px; }
.connexion-carte h1 { font-size: 20px; margin-bottom: 5px; }
.connexion-carte .mot {
  font-family: var(--f-accroche); font-weight: 400;
  font-size: var(--t-meta); color: var(--encre-3); margin: 0;
}

.connexion-champs {
  margin-top: 21px; padding-top: 20px; border-top: 1px solid var(--filet);
}
.connexion-carte .champ + .champ { margin-top: 14px; }
.connexion-carte .intitule { color: var(--encre-3); }
.connexion-carte input[type="text"],
.connexion-carte input[type="password"] { padding: 9px 11px; }
.connexion-carte .bouton { width: 100%; justify-content: center; margin-top: 21px; padding: 9px 13px; }

.connexion-pied {
  margin-top: 18px; text-align: center; font-size: var(--t-meta);
  color: var(--encre-4);
}

/* ===== Pied ============================================================= */

.pied-page {
  max-width: var(--utile); margin: 0 auto; padding: 0 24px 30px;
  font-size: var(--t-meta); color: var(--encre-4);
  display: flex; gap: 14px; flex-wrap: wrap;
}

@media print { .entete, .bouton, .filtres { display: none; } }