:root { --bordeaux: #5F2E40; --sable: #F9E5D4; --camel: #BFA67B;
         --encre: #1F1D1A; --blanc: #FFFFFF; --gris-doux: #726052;
         --f-titre: 'New Amsterdam', Impact, Haettenschweiler, sans-serif;
         --f-corps: 'Open Sans', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin:0; font-family: var(--f-corps);
        background:#faf6f2; color:var(--encre); }
header { background:var(--bordeaux); color:var(--blanc); padding:14px 24px; display:flex;
          align-items:center; gap:24px; border-bottom:3px solid var(--camel); }
header .brand { display:flex; align-items:center; gap:11px; font-family:var(--f-titre);
                 font-weight:400; font-size:23px; letter-spacing:.6px; color:var(--blanc); }
header .brand img { height:34px; width:auto; display:block; }
/* Les modules, la zone administration et le compte vivent dans le RAIL (lot 4,
   4a, regles plus bas) : l'en-tete ne porte plus que la marque. */
.shell { display:flex; align-items:flex-start; gap:0; }
/* Les sections du module courant, dans le rail. Le compteur est une pastille a
   droite du libelle, pas un « (n) » dans le texte. */
nav.sidenav { display:flex; flex-direction:column; gap:3px; }
nav.sidenav a { text-decoration:none; padding:9px 13px; border-radius:9px; font-size:13.5px;
        color:#5b4636; display:flex; align-items:center; justify-content:space-between; gap:8px; }
nav.sidenav a:hover { background:#faf1ea; }
nav.sidenav a.on { background:var(--sable); color:var(--bordeaux); font-weight:700; }
nav.sidenav a.urgent { background:#fdeee9; color:#a3341f; font-weight:700; }
nav.sidenav a.urgent.on { background:#a3341f; color:#fff; }
/* ---- Module CRM : mise en page façon GymCRM (spec refonte-crm-cfh-gymcrm) ----
   Rail SOMBRE, zone de travail gris tres clair pour que les cartes blanches se
   detachent. Limite au seul module CRM : c'est le seul dont la refonte a ete
   demandee, repeindre les cinq autres serait hors perimetre. */
.shell.crm { background:#f2efec; }
.shell.crm .rail { background:#3f1e2b; border-right:1px solid #2e1420; }
.shell.crm .rail a, .shell.crm .rail summary, .shell.crm .rail form.logout button,
.shell.crm .rail .rail-marque, .shell.crm .rail .rail-role { color:#e9d8cd; }
.shell.crm .rail .rail-module, .shell.crm .rail .rail-nom { color:#fff; }
.shell.crm .rail a:hover, .shell.crm .rail summary:hover,
.shell.crm .rail form.logout button:hover { background:rgba(255,255,255,.10); color:#fff; }
.shell.crm .rail a.active, .shell.crm nav.sidenav a.on { background:var(--sable); color:var(--bordeaux); }
.shell.crm nav.sidenav a.urgent { background:rgba(200,80,50,.30); color:#ffd9cd; }
.shell.crm nav.sidenav a.urgent.on { background:#a3341f; color:#fff; }
.shell.crm .rail .rail-compte { border-top-color:#2e1420; }
/* Pastille d'initiales devant un nom (captures GymCRM). */
.ini { display:inline-flex; align-items:center; justify-content:center; width:30px;
        height:30px; border-radius:999px; background:var(--sable); color:var(--bordeaux);
        font-size:12px; font-weight:700; margin-right:9px; vertical-align:middle;
        flex:0 0 30px; }
td.nom { white-space:nowrap; }
/* LE NUMERO SE COMPOSE D'UN GESTE. Il etait dessine en gris muet dans quatre bacs
   sur cinq de « Ma journee » — un ecran dont le seul but est de faire passer des
   appels, et sur lequel on ne pouvait pas appeler. Il doit donc AVOIR L'AIR
   cliquable : un lien qui ressemble a du texte mort n'est clique par personne.
   Le petit combine le dit sans mot, et `white-space:nowrap` evite qu'un numero
   se casse en deux lignes au milieu — on le lit a haute voix quand on le compose. */
a.tel { color:var(--bordeaux); text-decoration:none; font-weight:600;
        white-space:nowrap; font-variant-numeric:tabular-nums; }
a.tel::before { content:"\260E\FE0E"; margin-right:5px; opacity:.55;
        font-weight:400; }
a.tel:hover { text-decoration:underline; }
h1.fiche-titre { display:flex; align-items:center; gap:2px; }
h1.fiche-titre .ini { width:38px; height:38px; flex:0 0 38px; font-size:14px; }
p.sous-titre { margin:-10px 0 16px; font-size:13.5px; }
.depuis { font-weight:600; color:#5b4636; }
/* La fiche prospect a deux colonnes (lot 4, 4c) : ses regles vivent dans le
   bloc « lot 4, 4c » en fin de feuille. */
/* Chronologie unique de la fiche (§ 2C/2D de la spec du 17/09/2026).
   Le rail vertical est un simple bord gauche sur le <ul> : pas d'image, pas de
   pseudo-element par ligne a recalculer, et il suit la hauteur reelle du bloc
   meme quand un onglet en masque la moitie. */
.chrono-onglets { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px; }
.chrono-onglet.actif { background:#5F2E40; color:#fff; border-color:#5F2E40; }
.chrono { list-style:none; margin:0; padding:0 0 0 22px; border-left:2px solid #eaddd3; }
.chrono-li { position:relative; display:flex; gap:10px; padding:10px 0;
        border-bottom:1px solid #f2e8e0; }
.chrono-li:last-child { border-bottom:none; }
.chrono-ico { position:absolute; left:-33px; width:22px; height:22px; line-height:22px;
        text-align:center; background:#fff; border:1px solid #eaddd3; border-radius:50%;
        font-size:12px; }
.chrono-corps { min-width:0; flex:1; }
.chrono-tete { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.chrono-ts { margin-left:auto; font-size:12px; white-space:nowrap; }
.chrono-txt { white-space:pre-wrap; word-break:break-word; margin-top:3px; }
.chrono-plus summary { cursor:pointer; color:#5F2E40; font-size:13px; }
.chrono-src { font-size:12px; margin-top:2px; }
/* Les textes de la cadence, prets a envoyer a la main (§ 125). Replie par defaut :
   sur la fiche la plus consultee du CRM, un bloc deplie de force pousserait les
   coordonnees hors de l'ecran pour un geste qui ne sert pas a chaque visite. */
.gabarits-prets summary { cursor:pointer; color:#5F2E40; font-size:13px; }
.ligne-gab { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
        margin-top:6px; }
/* Le parcours assiste (point 2.5 du CRM 2.0) : les donnees a recopier dans
   Sportigo. Les champs s'etirent jusqu'a une largeur lisible et pas au-dela : une
   adresse mail longue reste entiere sur un telephone de 320 px. */
.bloc-assiste { border-left:3px solid var(--camel); background:var(--sable);
        padding:10px 14px; margin:10px 0; border-radius:4px; }
.bloc-assiste summary { cursor:pointer; color:#5F2E40; font-size:13px; }
.recopie { border:none; }
.recopie th { text-align:left; font-weight:600; padding-right:12px; white-space:nowrap; }
.recopie input { width:100%; max-width:360px; box-sizing:border-box; }
/* « Activites a venir » de la fiche (§ 2B de la spec du 17/09/2026).
   Meme dessin que la chronologie, volontairement : ce sont les deux faces d'une
   meme histoire — ce qui est arrive, ce qui reste a faire. Deux mises en page
   differentes pour deux listes voisines se lisent comme deux sujets differents. */
.taches { list-style:none; margin:0 0 4px; padding:0; }
.tache { border:1px solid #eaddd3; border-radius:10px; padding:10px 12px;
        margin-bottom:8px; background:#fff; }
.tache.dort { background:#faf7f4; border-style:dashed; }
.tache-tete { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.tache-ech { margin-left:auto; font-size:13px; white-space:nowrap; }
.tache-actes { margin-top:8px; display:flex; flex-wrap:wrap; align-items:center;
        gap:6px; }
/* « Scenario en cours » : la barre en segments (§ 2G de la spec du 17/09/2026).
   Un segment par etape, larges a parts egales — leur NOMBRE est l'information,
   pas leur longueur : une barre continue a 40 % ne dit pas combien d'etapes
   restent, et c'etait la question posee. */
.scen-bar { display:flex; gap:3px; margin:8px 0 4px; }
.scen-seg { flex:1; height:10px; border-radius:3px; background:#eee2d8; }
.scen-seg.faite { background:#2f7a4d; }
.scen-seg.prochaine { background:#f0a24b; }
.scen-seg.arret { background:#d9c8bb; }
.scen-seg.nonjouee { background:repeating-linear-gradient(45deg,#e8b4a8 0 4px,#f4dcd4 4px 8px); }
.scen-etapes { list-style:none; margin:8px 0 0; padding:0; }
.scen-etape { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
        padding:5px 0; border-bottom:1px solid #f4ece5; font-size:14px; }
.scen-etape:last-child { border-bottom:none; }
.scen-etape.a-venir { opacity:.62; }
.scen-puce { width:20px; text-align:center; flex:none; }
.scen-jour { margin-left:auto; font-size:12px; white-space:nowrap; }
/* Pied de la liste Prospects (§ 3 de la meme spec). La phrase « de X a Y sur N »
   est a GAUCHE et la navigation a droite : c'est le chiffre qui compte, pas les
   boutons — on vient d'abord savoir combien il y en a. */
.pied-liste { display:flex; flex-wrap:wrap; align-items:center;
        justify-content:space-between; gap:10px; margin:10px 0 4px;
        font-size:14px; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.pagination .btn { padding:4px 9px; font-size:13px; }
/* La page courante n'est PAS un bouton : cliquer dessus ne mene nulle part, et un
   bouton qui ne fait rien se lit comme un bouton cassé. */
.page-courante { padding:4px 9px; font-size:13px; font-weight:600;
        border-radius:6px; background:var(--terre,#7a4b2a); color:#fff; }
/* Meme regle pour « Precedente » sur la page 1 : visible et inerte, jamais cachee.
   Une commande qui disparait fait douter de l'ecran ; une commande grisee explique. */
.page-morte { padding:4px 9px; font-size:13px; opacity:.45; cursor:not-allowed; }
.page-trou { padding:0 4px; opacity:.6; }
/* EN-TETES DE TRI (§ 3). La fleche doit se voir SANS couleur : c'est la seule
   marque qui dit dans quel sens la liste est rangee, et un tableau dont on ignore
   l'ordre se lit comme un tableau en desordre. Le fond de la colonne active est
   un renfort, jamais le porteur de l'information — au soleil, sur un telephone
   ou pour un daltonien, il ne reste que le triangle. */
.tri-col a { color:inherit; text-decoration:none; border-bottom:1px dotted #bfb3a6; }
.tri-col a:hover { border-bottom-style:solid; }
.tri-actif { background:#f6f1ec; }
.tri-fleche { font-size:11px; opacity:.85; }
/* Le chevron « cette colonne s'ordonne » : present, mais discret. Aussi noir que
   la fleche du tri EN COURS, il ferait croire que cinq colonnes sont triees a la
   fois — l'ecran repondrait cinq fois a une question qui n'a qu'une reponse. */
.tri-muet { opacity:.32; }
.tri-col:hover .tri-muet { opacity:.75; }
/* Le menu d'attribution dans la ligne : discret au repos, il ne doit pas
   transformer la liste en formulaire. */
.sel-vendeur { font-size:12px; padding:2px 4px; max-width:140px; }
/* Le compteur d'activites. Une ligne SANS chiffre est le cas courant : elle reste
   pale pour que les lignes qui en portent un sautent aux yeux. */
.act-vide { opacity:.45; }
.sous-nom { font-weight:400; }
/* JAMAIS CONSULTEE (§ 3). Meme regle que la fleche de tri : la couleur est un
   RENFORT, jamais le porteur de l'information. Ce qui dit « personne n'a ouvert
   cette fiche », c'est la pastille ronde et le titre au survol — retirez toute
   couleur a cette page et l'information est encore la. Une pastille qui ne se
   distinguerait que par un violet sur fond clair serait invisible au soleil, sur
   un ecran de telephone et pour une partie des gens, c'est-a-dire precisement
   dans les conditions ou l'on consulte cette liste. */
.point-nonlu { color:#784ccf; font-size:15px; line-height:1; margin-right:3px; }
.nonlu-nom a { font-weight:700; color:#5a33a8; }
/* Le lien du compteur de la banniere : c'est un filtre, il doit avoir l'air
   cliquable la ou il est, au milieu d'une phrase. */
.lien-nonlu { font-weight:700; }
.shell main { flex:1; min-width:0; }
main { max-width:1240px; margin:28px auto; padding:0 24px; }
/* Ecran etroit : le rail garde sa colonne jusqu'a 620 px (il tient a cote d'un
   contenu de 400 px) ; sous 620 px il se replie (bloc lot 4, 4a, plus bas). */
@media (max-width: 900px) {
  main { padding:0 14px; }
}
/* Un tableau large reste consultable au lieu de deborder hors de l'ecran. */
.tablewrap { overflow-x:auto; }
h1 { font-family:var(--f-titre); font-weight:400; font-size:31px; letter-spacing:.4px;
      color:var(--bordeaux); margin:0 0 18px; }
h2 { font-family:var(--f-titre); font-weight:400; font-size:22px; letter-spacing:.3px;
      color:var(--bordeaux); margin:26px 0 10px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
/* Six chiffres de l'entonnoir, en deux lignes de trois. En grille automatique, la
   sixieme carte tombait seule sur une deuxieme ligne a 1440 px. */
.cards.cartes3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { background:#fff; border:1px solid #eaddd3; border-radius:14px; padding:18px; }
.card .lbl { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-doux); }
.card .val { font-family:var(--f-titre); font-weight:400; font-size:30px; margin-top:6px;
              color:var(--bordeaux); letter-spacing:.3px; }
.card .val.neg { color:#a3341f; }
/* Carte de chiffre cle facon GymCRM : valeur, pastille de taux, carre d'icone. */
.card.chiffre { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card.chiffre .chiffre-txt { min-width:0; }
.card.chiffre .badge { display:inline-block; margin-top:6px; padding:2px 9px; border-radius:999px;
                    font-size:12px; font-weight:600; }
.card.chiffre .badge.ok { background:#e4f1e6; color:#2f6b3a; }
.card.chiffre .badge.moyen { background:#fdf0dc; color:#8a5a13; }
.card.chiffre .badge.bas { background:#fbe3dd; color:#a3341f; }
.card.chiffre .ico { flex:0 0 42px; width:42px; height:42px; border-radius:12px; display:inline-flex;
                  align-items:center; justify-content:center; font-size:19px;
                  background:var(--sable); color:var(--bordeaux); }
.card.chiffre .ico.camel { background:#f2e7d5; color:#7a5c2e; }
.card.chiffre .ico.vert { background:#e4f1e6; color:#2f6b3a; }
.card.chiffre .ico.rouge { background:#fbe3dd; color:#a3341f; }
/* Carte « Coordonnees » : les gestes possibles depuis la fiche (capture 4).
   Un geste impossible reste VISIBLE et inerte — cache, il laisserait croire que
   la fiche est complete. */
.card.coord { grid-column:span 2; }
.card.coord .gestes { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.card.coord .gestes .btn { padding:6px 12px; font-size:13px; text-decoration:none; }
.card.coord .muted { margin:8px 0 0; font-size:12px; }
/* Planning en colonnes par jour (capture 2 « Planning »). */
.semaine { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.semaine .jour { flex:0 0 200px; background:#fff; border:1px solid #eaddd3; border-radius:14px;
                  padding:12px; }
.semaine .jour h3 { margin:0 0 10px; font-size:13px; color:var(--bordeaux);
                     text-transform:capitalize; }
.semaine .jour.ko { border-color:#e7b9ad; background:#fdf3f0; }
.semaine .creneau { background:var(--sable); border-left:3px solid var(--camel);
                     border-radius:8px; padding:7px 9px; margin-bottom:7px; font-size:13px; }
.semaine .creneau.ko { background:#fbe3dd; border-left-color:#a3341f; }
.semaine .creneau .muted { display:block; font-size:11.5px; }
/* Le planning des essais : une colonne un peu plus large, parce qu'une carte
   porte maintenant un NOM et des boutons, pas seulement une heure. */
.semaine .jour { flex:0 0 232px; }
.semaine .creneau.essai a { font-weight:600; }
.essai-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.essai-actions .btn { padding:3px 8px; font-size:11.5px; }
table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden;
         border:1px solid #eaddd3; }
th,td { text-align:left; padding:10px 14px; font-size:14px; border-bottom:1px solid #f0e7df; }
th { background:var(--sable); color:#5b4636; font-weight:600; }
tr:last-child td { border-bottom:none; }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.pill.paid { background:#e3f3e6; color:#1f7a3d; }
.pill.unpaid { background:#fde9e4; color:#a3341f; }
.pill.to_validate { background:#fff2d6; color:#8a6300; }
.pill.emitted { background:#e3ecff; color:#274b9c; }
.pill.refused { background:#eee; color:#666; }
.pill.failed { background:#fde9e4; color:#a3341f; }
.pill.matched { background:#e3f3e6; color:#1f7a3d; }
.pill.unmatched { background:#fde9e4; color:#a3341f; }
.pill.assigned { background:#e3f3e6; color:#1f7a3d; }
.pill.open { background:#fff2d6; color:#8a6300; }
.pill.pending { background:#e9eef8; color:#274b9c; }
.pill.recue { background:#e3f3e6; color:#1f7a3d; }
.pill.ecart { background:#fde9e4; color:#a3341f; }
.pill.a_recevoir { background:#fff2d6; color:#8a6300; }
.pill.gerant { background:#efe3d9; color:#5b4636; }
.pill.independant { background:#e3ecff; color:#274b9c; }
.pill.flexi { background:#f0e6f2; color:#5F2E40; }
.pill.nouveau { background:#e9eef8; color:#274b9c; }
.pill.en_contact { background:#fff2d6; color:#8a6300; }
.pill.froid { background:#e6eef2; color:#37607a; }
.pill.rdv_essai { background:#e3ecff; color:#274b9c; }
.pill.essai_realise { background:#efe3f2; color:#6a2d7a; }
.pill.converti { background:#e3f3e6; color:#1f7a3d; }
.pill.integration { background:#e3f3e6; color:#1f7a3d; }
.pill.ne_plus_contacter { background:#eee; color:#666; }
.pill.perdu { background:#fde9e4; color:#a3341f; }
.pill.ancien_membre { background:#f0e6f2; color:#5F2E40; }
.pill.non_frequentant { background:#fff2d6; color:#8a6300; }
.pill.niv-rouge { background:#fde9e4; color:#a3341f; }
.pill.niv-orange { background:#fff2d6; color:#8a6300; }
.pill.niv-vert { background:#e3f3e6; color:#1f7a3d; }
/* GRIS, ET SURTOUT PAS VERT. 'inconnu' veut dire « la date etait illisible » :
   c'est une panne de mesure, pas une bonne nouvelle. Peinte en vert, elle se
   lirait « rien a faire », et une fiche qu'on ne sait plus dater disparaitrait
   sous la couleur la plus rassurante de l'ecran. */
.pill.niv-inconnu { background:#eceae7; color:#5b5750; }
/* ---- Ecran « Ma journee » ----------------------------------------------
   Des BACS, pas un tableau de bord. Un chiffre se regarde ; une liste de noms
   se traite. Chaque bac porte son titre, la raison pour laquelle il existe, et
   les gestes possibles SUR LA LIGNE — sans quoi il faut ouvrir la fiche, et un
   geste qui coute une page de plus est un geste qu'on ne fait pas. */
.bac { background:#fff; border:1px solid #eaddd3; border-radius:12px;
        margin:0 0 18px; overflow:hidden; }
.bac > summary { list-style:none; cursor:pointer; padding:14px 18px;
                  background:var(--sable); display:flex; align-items:baseline;
                  gap:10px; flex-wrap:wrap; }
.bac > summary::-webkit-details-marker { display:none; }
.bac > summary:hover { filter:brightness(0.97); }
.bac summary h2 { margin:0; font-size:17px; color:var(--bordeaux);
                   display:inline; }
.bac .compte { font-weight:700; font-size:15px; color:var(--bordeaux);
                background:#fff; border-radius:999px; padding:1px 11px;
                border:1px solid #e3d3c3; }
.bac .pourquoi { flex-basis:100%; font-size:12.5px; color:var(--gris-doux);
                  line-height:1.45; margin-top:2px; }
.bac table { border:none; border-radius:0; }
.bac .vide { padding:16px 18px; color:var(--gris-doux); font-size:13.5px; }
/* Le pied de bac qui avoue la coupe. Discret mais PAS gris pale : c'est la
   phrase qui empeche l'ecran de mentir sur l'ampleur du retard. */
.bac-reste { padding:10px 18px; border-top:1px dashed var(--camel);
              background:#fdf8f2; font-size:13px; color:#5a5049; }
.bac-reste b { color:var(--bordeaux); }
/* Le bandeau du haut : UNE phrase, pas six indicateurs. */
.jour-tete { background:var(--bordeaux); color:var(--sable); border-radius:12px;
              padding:16px 20px; margin:0 0 18px; }
.jour-tete b { color:#fff; }
.jour-tete .mesure { font-size:12.5px; opacity:.85; margin-top:6px;
                      line-height:1.5; }
/* Le partage « arrivé depuis 24 h » / arriéré. Plus lisible que la mesure du
   bas : c'est lui qui empeche de lire le gros chiffre comme une journee de
   travail, donc il doit etre lu, pas survole. */
.jour-tete .tete-detail { font-size:13.5px; margin-top:8px; line-height:1.55;
                           opacity:.95; }
.ligne-actions { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
/* La file d'appels ne deborde plus a 1440 px. La liste des sept resultats prenait
   260 px (la largeur de sa plus longue option) : ajoutee aux autres colonnes, la
   table depassait la page de 8 px. Le menu deroulant, lui, montre toujours les
   libelles en entier. */
.file-appels select { max-width:200px; }
.ligne-actions .btn { padding:3px 9px; font-size:11.5px; }
/* La note libre d'un appel (file, fiche, « Ma journee »). Le report, lui, ne vit
   plus a cote d'elle sur la ligne de la file : il est derriere le menu « ··· »
   (lot 4, 4b) — deux gestes de sens oppose colles l'un a l'autre se cliquent l'un
   pour l'autre. */
.note-appel { width:170px; padding:5px 7px; border:1px solid #eaddd3; border-radius:7px;
              font-size:12px; }
.via-fusion { color:#7e6336; font-weight:normal; display:block; margin-top:3px;
               line-height:1.35; }
/* Pourquoi cette tache d'appel est perimee, sur sa propre ligne. AUCUNE COULEUR
   NEUVE ici : var(--gris-doux) est deja mesuree par le § 129 sur les deux fonds
   ou cette phrase apparait. Une teinte inventee pour l'occasion ferait rougir le
   controle anti-pourriture, et c'est exactement son role. */
.perime-motif { color:var(--gris-doux); display:block; margin-top:3px;
                 font-size:12px; line-height:1.35; font-style:italic; }
.funnel { display:flex; flex-direction:column; gap:8px; margin:8px 0 18px; }
.funnel .stage { background:#fff; border:1px solid #eaddd3; border-radius:10px; padding:12px 16px;
                 display:flex; align-items:center; gap:14px; }
.funnel .bar { height:26px; background:var(--bordeaux); border-radius:6px; min-width:26px; }
.funnel .stage .lbl { width:150px; font-size:13px; color:#5b4636; }
.funnel .stage .val { font-weight:700; color:var(--bordeaux); }
.funnel .stage .rate { font-size:12px; color:var(--gris-doux); }
.msg-preview { white-space:pre-wrap; background:#fbf7f3; border:1px solid #eee0d5; border-radius:8px;
               padding:10px 12px; font-size:12px; color:#4a4038; max-height:130px; overflow:auto; }
/* Retouche d'un gabarit : le champ doit etre assez grand pour qu'on relise le
   message AVANT de l'envoyer a de vraies personnes. */
.msg-edit textarea { width:100%; min-height:180px; padding:10px 12px; font-size:13px;
               border:1px solid #d8c7ba; border-radius:8px; font-family:inherit; }
.msg-edit input[type=text] { width:100%; }
.bench.ok { color:#1f7a3d; } .bench.ko { color:#a3341f; }
.subtabs { display:flex; gap:8px; margin:0 0 18px; flex-wrap:wrap; }
.subtabs a { text-decoration:none; padding:7px 14px; border-radius:999px; font-size:13px;
             background:#efe3d9; color:#5b4636; }
.subtabs a.on { background:var(--bordeaux); color:#fff; }
select { padding:7px 10px; border:1px solid #d8c7ba; border-radius:8px; font-size:13px; }
input[type=date], input[type=text] { padding:8px 10px; border:1px solid #d8c7ba; border-radius:8px; font-size:13px; }
.grid2 { display:grid; grid-template-columns:180px 1fr; gap:10px 14px; align-items:center; }
.day-h { margin:18px 0 6px; font-weight:700; color:#5b4636; font-size:13px; }
/* Hierarchie des boutons a trois niveaux (spec refonte-navigation §2).
   Il n'y en avait que deux : « plein » et « pas plein ». Supprimer un coach et
   annuler un filtre se ressemblaient donc, alors que l'un se rattrape et l'autre
   pas. Le troisieme niveau existe pour cette difference-la.
     1. .primary   — l'action de la page, une seule par ecran. Plein bordeaux.
     2. .ghost     — les actions secondaires. Contour, sans aplat.
     3. .danger    — destructrice ou risquee. Ni bordeaux ni neutre : rouge brique,
                     pour qu'on ne la clique jamais par habitude de position. */
.btn { border:none; border-radius:9px; padding:9px 16px; font-size:14px; font-weight:600;
        cursor:pointer; border:1px solid transparent; }
.btn.primary { background:var(--bordeaux); color:#fff; border-color:var(--bordeaux); }
.btn.primary:hover { background:#4b2433; }
.btn.ghost { background:#fff; color:#5b4636; border-color:#d8c7ba; }
.btn.ghost:hover { background:#faf1ea; }
.btn.danger { background:#fff; color:#a3341f; border-color:#d99a8b; }
.btn.danger:hover { background:#a3341f; color:#fff; border-color:#a3341f; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
/* Cartes de KPI facon Tiab : grande valeur, libelle, et une pastille a droite.
   La pastille n'est pas decorative — c'est la zone qui porte le badge ou l'etat. */
.kpi { background:#fff; border:1px solid #eaddd3; border-radius:14px; padding:18px 20px;
        display:flex; align-items:flex-start; gap:14px; }
.kpi .body { flex:1; min-width:0; }
.kpi .val { font-family:var(--f-titre); font-weight:400; font-size:32px; line-height:1.05;
        color:var(--bordeaux); letter-spacing:.3px; }
.kpi .lbl { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-doux);
        margin-top:6px; }
.kpi .sub { font-size:12.5px; color:var(--gris-doux); margin-top:8px; }
.kpi .mark { flex:0 0 42px; height:42px; border-radius:11px; background:var(--sable);
        display:flex; align-items:center; justify-content:center; font-size:19px;
        color:var(--bordeaux); }
/* Carte sans source : elle existe, elle ne ment pas, et elle porte l'action qui
   la debloque (« option B » de la spec). Le tirete dit « pas de donnee » la ou un
   zero dirait « zero » — ce n'est pas la meme information. */
.kpi.vide { background:#fbf7f3; border-style:dashed; }
.kpi.vide .val { color:var(--gris-doux); }
.kpi.vide .mark { background:#f0e7df; color:var(--gris-doux); }
a.kpi-lien { text-decoration:none; display:block; }
a.kpi-lien:hover .kpi { border-color:var(--camel); }
/* Bande « A traiter ». Le liseré de gauche porte l'urgence : c'est le seul repère
   qui survive à un coup d'oeil de deux secondes. */
.todo { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.todo-ligne { display:flex; align-items:center; gap:14px; text-decoration:none;
        background:#fff; border:1px solid #eaddd3; border-left:5px solid var(--camel);
        border-radius:10px; padding:12px 16px; color:var(--encre); }
.todo-ligne:hover { background:#fffaf6; }
.todo-ligne.rouge { border-left-color:#a3341f; background:#fdf4f1; }
.todo-ligne .n { font-family:var(--f-titre); font-size:26px; color:var(--bordeaux);
        min-width:42px; text-align:center; }
.todo-ligne.rouge .n { color:#a3341f; }
.todo-ligne .t { display:flex; flex-direction:column; gap:2px; }
/* Bande « Ce qui derape » : les ecarts DEFAVORABLES contre le mois precedent, et
   rien d'autre. Vide quand rien ne derape — une bande qui s'allume tous les mois
   est une bande qu'on cesse de lire. */
.derape { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.derape .d { background:#fdf4f1; border:1px solid #f0bcae; border-left:5px solid #a3341f;
        border-radius:10px; padding:10px 14px; }
.derape .d b { display:block; font-size:13px; color:var(--bordeaux); }
.derape .d .ec { font-family:var(--f-titre); font-size:22px; color:#a3341f; }
/* Les arrivees mois par mois. Des batons, pas une jauge et pas un camembert :
   ce qui compte est la forme dans le temps, pas la part d'un tout. */
.arrivees { display:flex; align-items:flex-end; gap:3px; height:110px;
        border-bottom:1px solid #eaddd3; padding-bottom:2px; }
.arrivees .b { flex:1; background:var(--camel); border-radius:3px 3px 0 0; min-height:1px; }
.arrivees .b:hover { background:var(--bordeaux); }
/* Une ligne de tableau au-dela de 60 jours d'absence : un dossier, pas une relance. */
tr.rouge td { background:#fdf4f1; }
/* « Nos taches » : trois paniers, deux cadences chacun. */
.paniers { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.panier { background:#fff; border:1px solid #eaddd3; border-radius:14px; padding:16px 18px; }
.panier h3 { font-family:var(--f-titre); font-weight:400; font-size:19px; margin:0 0 6px;
        color:var(--bordeaux); }
.panier .cadence { margin-bottom:10px; }
ul.taches { list-style:none; margin:4px 0; padding:0; display:flex;
        flex-direction:column; gap:4px; }
ul.taches li { display:flex; align-items:center; gap:8px; font-size:13.5px; }
ul.taches li.faite span { text-decoration:line-through; color:var(--gris-doux); }
ul.taches .btn.coche { padding:2px 9px; font-size:13px; line-height:1.3; }
ul.taches li span { flex:1; }
ul.taches .btn.sup { padding:2px 8px; font-size:11px; }
form.ajout { display:flex; gap:6px; margin-top:4px; }
form.ajout input[type=text] { flex:1; min-width:0; }
.banner { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.banner.warn { background:#fff2d6; color:#8a6300; border:1px solid #f0d99a; }
.banner.ok { background:#e3f3e6; color:#1f7a3d; border:1px solid #b9e0c2; }
.banner.info { background:#e9eef8; color:#274b9c; border:1px solid #c3d2ef; }
.banner.grave { background:#fde9e4; color:#a3341f; border:1px solid #f0bcae; }
.login-wrap { max-width:360px; margin:8vh auto; background:#fff; padding:32px; border-radius:16px;
              border:1px solid #eaddd3; border-top:4px solid var(--camel); text-align:center; }
.login-wrap .login-logo { height:96px; width:auto; display:block; margin:0 auto 14px; }
.login-wrap form { text-align:left; }
.login-wrap label { font-size:13px; font-weight:600; color:#5b4636; }
.login-wrap input { width:100%; padding:11px; margin:6px 0 14px; border:1px solid #d8c7ba;
                     border-radius:9px; font-size:14px; }
.muted { color:var(--gris-doux); font-size:13px; }
.draft-box { background:#fff; border:1px solid #eaddd3; border-radius:14px; padding:20px; margin-bottom:16px; }
.draft-box .amount { font-size:22px; font-weight:700; color:var(--bordeaux); }
.pill.a_statuer { background:#fff2d6; color:#8a6300; }
.pill.prevu { background:#e3ecff; color:#274b9c; }
.pill.venu { background:#e3f3e6; color:#1f7a3d; }
.pill.pas_venu { background:#fde9e4; color:#a3341f; }
.pill.annule { background:#eee; color:#666; }
.pill.inscrit { background:#e3f3e6; color:#1f7a3d; }
.pill.rdv_non_honore { background:#fde9e4; color:#a3341f; }
.pill.rdv_annule { background:#eee; color:#666; }
.crm-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.crm-head .sync { font-size:12px; color:var(--gris-doux); }
.btn.count { background:var(--camel); color:#1F1D1A; }
.modal { position:fixed; inset:0; background:rgba(31,29,26,.55); z-index:50;
         display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; }
.modal[hidden] { display:none; }
.modal-card { background:#F9E5D4; border-radius:16px; border-top:5px solid var(--bordeaux);
              padding:24px 26px; max-width:940px; width:100%; max-height:80vh; overflow:auto;
              box-shadow:0 18px 48px rgba(31,29,26,.35); }
.modal-card h2 { margin-top:0; color:var(--bordeaux); }
.modal-card table { background:#fff; }
.modal-card .acts { display:flex; gap:6px; flex-wrap:wrap; }
.modal-card .acts .btn { padding:6px 12px; font-size:13px; }
/* Appel guide. Ce qu'il faut DIRE et ce qu'il faut SAVOIR ne se ressemblent pas :
   la phrase a prononcer est en grand, sur fond blanc, avec un filet bordeaux ; la
   consigne au vendeur reste en gris et en petit. Les confondre ferait lire a voix
   haute une note de service. */
.script-blocs { margin:0; padding-left:22px; }
.script-bloc { margin:0 0 18px; }
.script-bloc h3 { margin:0 0 6px; font-size:15px; color:var(--bordeaux); }
.script-dire { background:#fff; border-left:4px solid var(--bordeaux); margin:0 0 6px;
               padding:10px 14px; border-radius:0 8px 8px 0; font-size:16px;
               line-height:1.5; }
.script-note { margin:0 0 8px; font-size:13px; }
.script-q { display:block; margin:6px 0; font-size:14px; }
.script-q input { display:block; width:100%; margin-top:3px; }
.script-pied { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
               border-top:1px solid var(--camel); padding-top:14px; }
.script-pied .note-appel { flex:1 1 220px; }
/* Double appel (lot 3, 3.2) : la consigne et l'accuse prennent toute la largeur du
   pied, juste sous le menu du resultat qui les fait paraitre. */
.script-pied .double-appel { flex:1 1 100%; margin:0; }
.btn.script-ouvrir { display:block; width:100%; margin:6px 0; }
/* Boite de conversation WhatsApp (spec crm-boite-whatsapp §B2, §B4). La couleur
   n'est pas decorative : elle est le seul element de la page qui dise « celui-la
   attend depuis trop longtemps ». */
.subtabs a.urgent { background:#a3341f; color:#fff; }
.subtabs a.urgent.on { background:#7d2716; }
.wa-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.wa-row { background:#fff; border:1px solid #eaddd3; border-left:5px solid #eaddd3;
          border-radius:10px; padding:10px 14px; display:flex; gap:14px;
          align-items:flex-start; flex-wrap:wrap; }
.wa-row.rouge { border-left-color:#a3341f; background:#fdf4f1; }
.wa-row.or { border-left-color:var(--camel); }
.wa-row.lu { opacity:.72; }
.wa-row .who { min-width:200px; }
.wa-row .who a { color:var(--bordeaux); font-weight:700; text-decoration:none; font-size:15px; }
.wa-row .last { flex:1; min-width:220px; color:#4a4038; font-size:13px; }
.wa-row .meta { min-width:200px; text-align:right; font-size:12px; color:var(--gris-doux); }
.wa-row .attente { font-weight:700; color:#5b4636; }
.wa-row.rouge .attente { color:#a3341f; }
/* Onglets de tri de la boite (21/09/2026). Assez grands pour etre vus : le bloc
   qu'ils remplacent occupait le haut de l'ecran depuis 41 jours sans que personne
   ne trouve comment s'en debarrasser. */
.wa-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 6px; }
.wa-tabs a { padding:8px 16px; border-radius:999px; text-decoration:none;
             background:#fff; border:1px solid #eaddd3; color:#6b5b4e;
             font-size:14px; font-weight:600; }
.wa-tabs a.actif { background:var(--bordeaux); border-color:var(--bordeaux);
                   color:#fff; text-decoration:none; }
.wa-vendeurs { margin:0 0 14px; }
/* Une conversation rangee reste LISIBLE, juste en retrait : la griser jusqu'a
   l'illisible reviendrait a la cacher, et cacher est precisement ce qu'on refuse. */
.wa-row.range { background:#faf7f4; border-left-color:#d8c7ba; opacity:.85; }
.wa-list + p a, .wa-filtres a { color:var(--bordeaux); }
a.actif { font-weight:700; text-decoration:underline; color:var(--bordeaux); }
.wa-row.or .attente { color:#8a6300; }
.wa-flag { display:inline-block; background:#fde9e4; color:#a3341f; border-radius:999px;
           padding:2px 10px; font-size:12px; font-weight:600; margin-top:4px; }
.wa-flag.doute { background:#fff2d6; color:#8a6300; }
.wa-flag.info { background:#e9eef8; color:#274b9c; }
.wa-unread { display:inline-block; background:var(--bordeaux); color:#fff; border-radius:999px;
             padding:1px 8px; font-size:11px; font-weight:700; margin-left:6px; }
.wa-fil { display:flex; flex-direction:column; gap:8px; margin:12px 0 18px;
          max-height:52vh; overflow:auto; padding:6px; background:#fbf7f3;
          border:1px solid #eee0d5; border-radius:12px; }
.wa-msg { max-width:74%; border-radius:12px; padding:9px 13px; font-size:14px;
          white-space:pre-wrap; word-break:break-word; }
.wa-msg .h { display:block; font-size:11px; margin-top:5px; color:var(--gris-doux); }
.wa-msg.in { align-self:flex-start; background:#fff; border:1px solid #eaddd3; }
.wa-msg.out { align-self:flex-end; background:var(--bordeaux); color:#fff; }
.wa-msg.out .h { color:#e2cdd6; }
.wa-msg.echec { background:#fde9e4; color:#a3341f; border:1px solid #f0bcae; }
.wa-msg.echec .h { color:#a3341f; }
/* GARDE, pas en echec : ambre et non rouge, et un trait pointille — le message
   attend la reouverture de la fenetre Meta, personne n'a rien a faire. */
.wa-msg.attente { background:#fdf5e2; color:#7a5a12; border:1px dashed #e0c169; }
.wa-msg.attente .h { color:#7a5a12; }
.wa-compose textarea { width:100%; min-height:88px; padding:10px 12px; border:1px solid #d8c7ba;
                       border-radius:10px; font-size:14px; font-family:inherit; }
.wa-compose textarea:disabled { background:#f2ece7; color:var(--gris-doux); }
.wa-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; }
.wa-unknown { background:#fff; border:1px dashed #d8c7ba; border-radius:10px;
              padding:12px 14px; margin-bottom:8px; }
.wa-unknown .acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
/* Double authentification (spec double-authentification-admins). L'ecran est plus
   large que celui de connexion : il porte un secret a recopier a la main et dix
   codes a imprimer, que 360 px casseraient en fin de ligne. */
.deuxfa-wrap { max-width:560px; margin:6vh auto; background:#fff; padding:32px;
               border-radius:16px; border:1px solid #eaddd3;
               border-top:4px solid var(--camel); }
.deuxfa-wrap .login-logo { height:80px; width:auto; display:block; margin:0 auto 14px; }
.deuxfa-wrap h1 { text-align:center; }
.deuxfa-wrap label { font-size:13px; font-weight:600; color:#5b4636; }
.deuxfa-wrap input { width:100%; padding:11px; margin:6px 0 14px; border:1px solid #d8c7ba;
                     border-radius:9px; font-size:16px; }
.deuxfa-etape { border-left:3px solid var(--camel); padding:2px 0 2px 14px; margin:18px 0; }
.deuxfa-etape .num { font-family:var(--f-titre); font-size:20px; color:var(--bordeaux); }
.secret-clair { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                font-size:18px; letter-spacing:1px; background:#F9E5D4; color:#1F1D1A;
                border-radius:10px; padding:12px 14px; word-break:break-all;
                user-select:all; }
.codes-secours { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:14px 0; }
.codes-secours li { list-style:none; font-family:ui-monospace, SFMono-Regular, Menlo,
                    Consolas, monospace; font-size:17px; letter-spacing:2px;
                    background:#F9E5D4; border-radius:8px; padding:9px 12px; text-align:center;
                    user-select:all; }
/* -- Planning : grille de semaine (spec planning-integre-coaches) -----------
   Le tableau plat d'avant se lisait creneau par creneau. Une salle se pilote en
   regardant la semaine d'un bloc : jours en colonnes, heures en lignes, et le
   trou qui saute aux yeux sans qu'on ait a le chercher. */
.pl-wrap { display:grid; grid-template-columns:1fr 250px; gap:16px; align-items:start; }
.pl-scroll { overflow-x:auto; }
/* Piege classique des grilles CSS : une colonne `1fr` a une largeur minimale
   egale a son contenu, donc elle refuse de retrecir et le `overflow-x` ci-dessus
   ne sert a rien — c'est la page entiere qui part en travers au lieu de la seule
   grille. `min-width:0` rend aux colonnes le droit de retrecir. */
.pl-wrap > *, .wa-deux > * { min-width:0; }
.pl-grid { display:grid; grid-template-columns:54px repeat(7, minmax(96px,1fr));
           gap:3px; min-width:760px; }
.pl-h { background:var(--sable); color:#5b4636; font-weight:700; font-size:12px;
        text-align:center; padding:7px 4px; border-radius:8px; }
.pl-h.today { background:var(--bordeaux); color:#fff; }
.pl-h .d { display:block; font-size:16px; font-family:var(--f-titre); font-weight:400; }
.pl-hr { font-size:12px; color:var(--gris-doux); text-align:right; padding:8px 6px 0 0; font-weight:600; }
.pl-cell { background:#fff; border:1px solid #eee0d5; border-radius:8px; min-height:44px;
           padding:3px; display:flex; flex-direction:column; gap:3px; }
.pl-cell.vide { background:#fbf7f3; border-style:dashed; }
.pl-cell.survol { outline:2px dashed var(--camel); outline-offset:1px; }
.pl-slot { border-radius:6px; padding:4px 6px; font-size:12px; line-height:1.25;
           border-left:5px solid var(--c,#bbb); background:#fbf7f3; }
.pl-slot .co { font-weight:700; color:#3b332c; display:block; }
.pl-slot .ct { color:var(--gris-doux); font-size:11px; }
/* Rouge franc : c'est l'information la plus importante de l'ecran. */
.pl-slot.open { background:#fde9e4; border-left-color:#a3341f; }
.pl-slot.open .co { color:#a3341f; }
.pl-slot.pending { background:#fff2d6; border-left-color:#8a6300; }
.pl-slot.pending .co { color:#8a6300; }
.pl-slot.conflit { box-shadow:0 0 0 2px #a3341f inset; }
.pl-slot .edit { display:flex; gap:3px; margin-top:4px; }
.pl-slot select { padding:2px 4px; font-size:11px; border-radius:6px; max-width:100%; }
.pl-slot .btn { padding:2px 7px; font-size:11px; border-radius:6px; }
.pl-side .bloc { background:#fff; border:1px solid #eaddd3; border-radius:12px;
                 padding:12px 14px; margin-bottom:12px; }
.pl-side h3 { font-family:var(--f-titre); font-weight:400; font-size:16px;
              color:var(--bordeaux); margin:0 0 8px; }
.pl-chip { display:flex; align-items:center; gap:7px; padding:4px 6px; border-radius:8px;
           font-size:12px; cursor:grab; }
.pl-chip:hover { background:#fbf7f3; }
.pl-chip .pt { width:11px; height:11px; border-radius:3px; background:var(--c,#bbb); flex:none; }
.pl-chip .nm { flex:1; }
.pl-chip .hs { color:var(--gris-doux); font-variant-numeric:tabular-nums; }
.pl-side .abs { font-size:12px; padding:5px 0; border-bottom:1px solid #f4ece5; }
.pl-side .abs:last-child { border-bottom:none; }
.pl-side .att { font-size:12px; padding:7px 0; border-bottom:1px solid #f4ece5; }
.pl-side .att .acts { display:flex; gap:5px; margin-top:5px; }
.pl-side .att .btn { padding:3px 9px; font-size:11px; }
.pl-legende { font-size:12px; color:var(--gris-doux); margin:8px 0 0; }
/* -- Messagerie en deux volets (spec crm-messagerie-deux-volets) ----------- */
.wa-deux { display:grid; grid-template-columns:290px 1fr; gap:16px; align-items:start; }
.wa-col { max-height:74vh; overflow:auto; background:#fff; border:1px solid #eaddd3;
          border-radius:12px; }
.wa-col .wa-row { border-radius:0; border:none; border-bottom:1px solid #f4ece5;
                  grid-template-columns:1fr; gap:4px; padding:10px 12px; }
.wa-col .wa-row.ouverte { background:var(--sable); }
.wa-col .wa-row .last { font-size:12px; color:var(--gris-doux); }
.wa-fil-bas { display:flex; justify-content:center; margin:-6px 0 8px; }
.wa-fil-bas button { font-size:12px; padding:4px 12px; }
.wa-modeles { margin:0 0 8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.wa-modele { font-size:12px; padding:3px 9px; }
.wa-modeles-note { flex-basis:100%; font-size:12px; margin-top:2px; }
.wa-hors-ligne { display:none; }
.wa-hors-ligne.on { display:block; }
@media (max-width:900px) {
  .pl-wrap, .wa-deux { grid-template-columns:1fr; }
  .wa-col { max-height:34vh; }
  /* L'en-tete ne porte plus que la marque (lot 4, 4a) ; il garde le droit de
     revenir a la ligne plutot que de deborder. */
  header { flex-wrap:wrap; gap:10px 14px; padding:12px 16px; }
  main { padding:0 16px; }
}
/* ---- Acces au clavier, et au lecteur d'ecran (§ 134) ------------------------
   CE QUI MANQUAIT, mesure et non suppose : AUCUNE regle `:focus` de notre cru
   dans les 691 lignes de style. L'anneau etait donc celui que le navigateur
   dessine par defaut — un trait sombre. Sur fond clair il se voit ; sur le
   bandeau bordeaux, sur la laterale sombre du CRM et autour d'un bouton
   `.primary` plein, il n'a aucun contraste GARANTI. Quelqu'un qui se deplace a
   la tabulation y perd sa position, sur les ecrans ou il en a le plus besoin.

   L'ANNEAU A DEUX EPAISSEURS, et c'est toute la raison de sa forme : un lisere
   BLANC colle a l'element, puis un trait SOMBRE autour. Sur fond clair, le blanc
   se confond avec le fond et c'est le trait sombre qu'on voit ; sur fond sombre,
   le sombre se confond et c'est le lisere blanc qu'on voit. Les deux ne peuvent
   pas disparaitre ensemble — donc l'anneau reste visible SANS avoir a connaitre
   la couleur du fond, y compris sur les fonds qui n'existent pas encore. Un
   anneau d'une seule couleur, lui, obligerait a le re-regler a chaque fois qu'on
   repeint un bandeau, et se perdrait en silence le jour ou on oublie.

   `:focus-visible` et non `:focus` : le navigateur ne l'allume qu'au clavier (et
   toujours dans les champs de saisie, ou on veut le voir). Un anneau qui
   apparaitrait aussi au clic de souris serait pris pour un defaut d'affichage et
   finirait desactive — ce qui ramenerait exactement au point de depart. */
:focus-visible { outline:2px solid var(--encre); outline-offset:2px;
        box-shadow:0 0 0 2px var(--blanc); }
/* Boutons et liens de navigation ont deja leur arrondi : l'anneau suit le leur,
   sinon il deborde aux quatre coins. */
.btn:focus-visible, nav.modules a:focus-visible, nav.sidenav a:focus-visible,
.rail a:focus-visible, .barre-basse a:focus-visible, .subtabs a:focus-visible { border-radius:9px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-radius:8px; }
/* LE LIEN D'EVITEMENT. Chaque ecran commence par la zone admin, six onglets de
   module et jusqu'a une douzaine d'entrees laterales : au clavier, atteindre le
   contenu demandait une vingtaine de tabulations, sur CHAQUE page. Ce lien est la
   premiere chose focalisable du document et saute droit au contenu.
   Invisible tant qu'il n'a pas le focus — il ne coute donc rien a l'ecran — et
   pleinement visible des qu'on tabule dessus. Volontairement PAS `display:none`
   ni `visibility:hidden` : un element masque ainsi ne peut pas recevoir le
   focus, et le lien ne servirait alors a rien du tout. */
a.skip { position:absolute; left:-9999px; top:0; z-index:100;
        background:var(--bordeaux); color:var(--blanc); padding:11px 18px;
        border-radius:0 0 10px 0; font-size:14px; font-weight:600;
        text-decoration:none; }
a.skip:focus { left:0; }
/* La cible du saut porte `tabindex="-1"` — sans quoi certains navigateurs
   deplacent la vue mais PAS le focus, et la tabulation suivante repart du haut :
   le lien aurait l'air de marcher sans marcher. En revanche on n'entoure pas la
   zone de contenu de l'anneau : ce serait un cadre de deux pixels autour de tout
   l'ecran. Le titre de la page suit immediatement et dit ou l'on vient d'arriver. */
main:focus, main:focus-visible { outline:none; box-shadow:none; }
/* ---- Le palier TELEPHONE, sous 620 px (§ 134) -------------------------------
   Le palier 900 px existe deja et fait un vrai travail : la laterale passe en
   rangee defilante, le bandeau revient a la ligne. Ce qu'il ne traite pas, c'est
   le telephone tenu en main — 375 px de large, et le pouce pour viser.

   QUATRE GENES MESUREES a cette largeur, dans l'ordre de ce qu'elles coutent :

   1. `.grid2` garde sa colonne d'etiquettes de 180 px FIXES. Sur 375 px il reste
      ~170 px pour le champ lui-meme : on saisit un nom dans une case ou on ne
      relit pas ce qu'on tape. L'etiquette passe donc DESSUS le champ.
   2. Un champ dont le texte fait moins de 16 px declenche le zoom automatique
      d'iOS des qu'on le touche : la page saute, la mise en page est perdue, et il
      faut pincer pour revenir. Ce n'est pas un gout de typographie — 16 px est le
      seuil exact au-dela duquel Safari ne zoome plus.
   3. La barre de filtres du CRM porte SEPT commandes. Sur une ligne de 375 px
      elles se replient trois par trois et on ne sait plus laquelle est laquelle ;
      empilees, chacune reste identifiable. Visee sur `form.subtabs` seulement :
      les six `div.subtabs` sont des rangees de pastilles de navigation, et les
      empiler ferait six lignes hautes pour rien.
   4. Une cible de 30 px de haut se rate au pouce. 44 px est le minimum d'Apple
      et celui de la regle 2.5.8 des WCAG. On le donne aux boutons et aux champs,
      PAS aux liens de texte dans un tableau : les etirer defoncerait les lignes
      et rendrait les tableaux illisibles pour gagner sur des cibles qu'on touche
      rarement. */
@media (max-width:620px) {
  main { padding:0 12px; }
  h1 { font-size:25px; margin-bottom:14px; }
  h2 { font-size:19px; margin:20px 0 8px; }
  .grid2 { grid-template-columns:1fr; gap:3px 0; align-items:start; }
  input, select, textarea { font-size:16px; }
  .btn, select, input:not([type=checkbox]):not([type=radio]) { min-height:44px; }
  form.subtabs { flex-direction:column; align-items:stretch; }
  form.subtabs input, form.subtabs select, form.subtabs .btn,
  form.subtabs > a { width:100%; }
  form.subtabs > a { text-align:center; }
  .card { padding:14px; }
  .login-wrap { margin:4vh 12px; padding:22px 18px; }
  .login-wrap .login-logo { height:72px; }
  table { font-size:13px; }
  /* « Ma journee » sur telephone : chaque ligne d'un bac devient une carte
     empilee. Un bac rogne son contenu (overflow:hidden) : ses tableaux de 750 a
     1000 px cachaient le numero, le resultat d'appel et « Planifier » hors de
     l'ecran, sans barre de defilement pour les atteindre. */
  .bac table, .bac tbody, .bac tr, .bac td { display:block; width:100%; }
  .bac thead { display:none; }
  .bac tr { padding:10px 14px; border-bottom:1px solid #f0e7df; }
  .bac td { border:none; padding:3px 0; }
  .bac .note-appel { width:100%; flex:1 1 100%; }
  /* La liste des comptes (Parametres -> Utilisateurs) s'empile comme les bacs :
     six colonnes ne tiennent pas dans 320 px, et le bouton « Desactiver », en
     derniere colonne, sortait de l'ecran. */
  .comptes table, .comptes tbody, .comptes tr, .comptes td { display:block; width:100%; }
  .comptes thead { display:none; }
  .comptes tr { padding:8px 0; border-bottom:1px solid #f0e7df; }
  .comptes td { border:none; padding:2px 0; }
  .bac select { max-width:100%; }
  .cards.cartes3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* --- lot 4, 4a : debut --- */
/* LE RAIL (topo § 4.1). Une colonne collante : le compte reste en bas de l'ECRAN,
   pas en bas d'une page de trois metres. Le pli « Menu » n'existe que sur
   telephone ; ici il est cache et le rail reste deplie. */
.rail { flex:0 0 218px; align-self:stretch; background:#fff; border-right:1px solid #eaddd3;
         position:sticky; top:0; max-height:100vh; overflow-y:auto; }
.rail > summary.rail-pli { display:none; color:#5b4636; }
/* 65 px = la hauteur de l'en-tete (marque de 34 px + 2 x 14 px + filet de 3 px) :
   ainsi le compte affleure le bas du PREMIER ecran, sans defiler. Le filet avait ete
   oublie (62 px) : au navigateur, a 1440 x 900 (lot 4, 4e), chaque page mesurait
   903 px et defilait de 3 px, l'accueil compris. */
.rail-corps { display:flex; flex-direction:column; gap:12px; min-height:calc(100vh - 65px); padding:14px 12px; }
.rail-modules > summary, .rail-compte > summary { list-style:none; cursor:pointer; padding:8px 13px;
        border-radius:9px; display:flex; flex-direction:column; gap:1px; position:relative; }
.rail-modules > summary::-webkit-details-marker, .rail-compte > summary::-webkit-details-marker { display:none; }
.rail-modules > summary::after, .rail-compte > summary::after { content:"▾"; position:absolute; right:13px;
        top:50%; transform:translateY(-50%); font-size:13px; opacity:.8; }
.rail-modules > summary:hover, .rail-compte > summary:hover { background:#faf1ea; }
.rail-marque { font-family:var(--f-titre); font-size:13px; letter-spacing:.8px; color:var(--gris-doux); }
.rail-module, .rail-nom { font-weight:700; font-size:14.5px; color:var(--bordeaux); }
.rail-role { font-size:12px; color:var(--gris-doux); }
nav.modules { display:flex; flex-direction:column; gap:2px; padding:4px 0 0; }
nav.modules a, .rail-compte a, .rail-compte form.logout button { display:block; width:100%; text-align:left;
        text-decoration:none; padding:8px 13px; border-radius:9px; font-size:13.5px; color:#5b4636;
        background:none; border:0; font-family:inherit; cursor:pointer; }
nav.modules a:hover, .rail-compte a:hover, .rail-compte form.logout button:hover { background:#faf1ea; }
nav.modules a.active, .rail-compte a.active { background:var(--sable); color:var(--bordeaux); font-weight:700; }
.rail-compte { margin-top:auto; border-top:1px solid #eaddd3; padding-top:8px; }
.rail-compte nav.adminzone { display:flex; flex-direction:column; gap:2px; margin:2px 0; }
.rail-compte form.logout { margin:0; }
/* La pastille d'un compteur : nombre seul, jamais « (n) » dans le libelle. Rouge
   quand l'entree est urgente, sable sinon. */
.nb { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
       padding:0 7px; border-radius:999px; background:var(--sable); color:var(--bordeaux);
       font-size:12px; font-weight:700; flex:0 0 auto; }
a.urgent .nb { background:#a3341f; color:#fff; }
/* LE MESSAGE EN PLACE (remplace alert). Fixe en haut de la fenetre : visible d'ou
   qu'on ait clique, sans decaler la page. Vert pour un succes, rouge pour un
   refus ; il s'efface seul (app.js). */
.message { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60;
            max-width:min(680px, calc(100vw - 24px)); padding:12px 18px; border-radius:10px;
            font-size:14px; line-height:1.45; box-shadow:0 10px 30px rgba(31,29,26,.25);
            white-space:pre-line; }
.message[hidden] { display:none; }
.message.ok { background:#e3f3e6; color:#1f7a3d; border:1px solid #b9e0c2; }
.message.refus { background:#fde9e4; color:#a3341f; border:1px solid #f0bcae; }
/* LA CONFIRMATION DANS LA PAGE (remplace confirm), reservee aux gestes qui ne se
   defont pas. Meme voile que les autres fenetres de la plateforme. */
.confirmation-card { max-width:520px; }
#confirmation-texte { white-space:pre-line; font-size:15px; line-height:1.5; margin:0 0 16px; }
.barre-basse { display:none; }
.supprimer-motif input, .corr-motif { max-width:340px; }
.aide-pause { display:block; font-size:12.5px; margin-top:4px; }
/* TELEPHONE (topo § 4.6) : le rail se replie derriere « Menu », la barre basse
   porte les quatre ecrans du quotidien, chaque cible fait 44 px au moins, et le
   contenu defile DANS main plutot que d'emporter le cadre en largeur. */
@media (max-width:620px) {
  .shell { display:block; }
  .rail { position:static; max-height:none; overflow:visible; border-right:none;
           border-bottom:1px solid #eaddd3; }
  .rail > summary.rail-pli { display:flex; align-items:center; min-height:44px; padding:0 16px;
           cursor:pointer; font-weight:700; list-style:none; }
  .rail > summary.rail-pli::-webkit-details-marker { display:none; }
  .rail > summary.rail-pli::before { content:"☰"; margin-right:10px; }
  .rail-corps { min-height:0; padding:4px 12px 14px; }
  .rail a, .rail summary, .rail form.logout button { min-height:44px; }
  nav.modules a, nav.sidenav a, .rail-compte a, .rail-compte form.logout button { display:flex; align-items:center; }
  nav.sidenav a { justify-content:space-between; }
  main { overflow-x:auto; }
  .shell.crm main { padding-bottom:84px; }
  .shell.crm + .barre-basse { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
           background:#3f1e2b; border-top:1px solid #2e1420; }
  .barre-basse a { flex:1 1 0; min-height:56px; display:flex; flex-direction:column; align-items:center;
           justify-content:center; gap:2px; text-decoration:none; color:#e9d8cd; font-size:11.5px;
           padding:6px 2px; text-align:center; line-height:1.15; }
  .barre-basse a.on { color:#fff; background:rgba(255,255,255,.12); }
  .barre-basse a .nb { height:18px; min-width:18px; font-size:11px; }
  .message { top:8px; left:12px; right:12px; transform:none; max-width:none; }
}
/* --- lot 4, 4a : fin --- */
/* --- lot 4, 4g : debut --- */
/* PARAMETRES EN SIX ONGLETS (spec 4g). Les onglets sont les pastilles des
   `.subtabs`, le dessin des filtres des Activites ; sur telephone ils deviennent
   des cibles de 44 px, comme tout ce qu'on vise au pouce. La ligne d'aide colle a
   la rangee : elle dit ce que contient l'onglet ouvert, une ligne et pas plus. Le
   detail de chaque bloc est replie (details.aide), sa ligne « En savoir plus »
   fait elle aussi 44 px au pouce. */
.onglets-param a { display:inline-flex; align-items:center; }
.aide-onglet { margin:-8px 0 14px; }
.param-onglet details.aide, .param-onglet details.pli-form { margin:4px 0 12px; }
.param-onglet details > summary { cursor:pointer; }
.param-onglet a.btn { display:inline-flex; align-items:center; text-decoration:none; }
@media (max-width:620px) {
  .onglets-param a { min-height:44px; }
  .param-onglet summary { min-height:44px; padding:12px 0; box-sizing:border-box; }
  /* Les modeles de messages s'empilent comme la liste des comptes : cinq colonnes
     ne tiennent pas dans 351 px, et l'objet de chaque modele — ce qu'on touche pour
     l'ouvrir — tombait hors de l'ecran, a 497 px (mesure a 375 px). */
  .modeles table, .modeles tbody, .modeles tr, .modeles td { display:block; width:100%; }
  .modeles thead { display:none; }
  .modeles tr { padding:8px 0; border-bottom:1px solid #f0e7df; }
  .modeles td { border:none; padding:2px 0; }
}
/* --- lot 4, 4g : fin --- */
/* --- lot 4, 4b : debut --- */
/* LES ACTIVITES (topo § 4.3) : cinq onglets, puis une ligne compacte par tache.
   Les onglets et le filtre par vendeur partagent une rangee. La pastille d'un
   onglet est celle du rail (.nb), en plus petit et sur fond blanc pour se
   detacher de l'onglet eteint. */
.onglets-barre { display:flex; flex-wrap:wrap; align-items:flex-start;
        justify-content:space-between; gap:0 18px; }
.onglets-activites a { display:inline-flex; align-items:center; gap:7px; }
.onglets-activites a .nb { min-width:18px; height:18px; font-size:11px; background:#fff; }
.aide-onglet { margin:0 0 4px; }
details.banner > summary { cursor:pointer; }
.aide-onglet + h2 { margin-top:10px; }
/* LE CONTENEUR DEFILE, PAS LA TABLE. `overflow` pose sur une table ne la fait pas
   defiler, il la rogne : sous la largeur de ses colonnes, la file cachait le
   resultat d'appel hors de l'ecran, sans barre pour l'atteindre. Le cadre arrondi
   passe donc au conteneur. */
.file-defile { overflow-x:auto; border:1px solid #eaddd3; border-radius:12px; background:#fff; }
.file-defile > table { border:none; border-radius:0; overflow:visible; }
/* UNE LIGNE DE LA FILE EST BORNEE. Elle mesurait 179 px parce qu'elle portait six
   commandes ouvertes. Chaque texte tient desormais sur UNE ligne — sans retour,
   avec des points de suspension — dans un bloc de hauteur fixe, et les commandes
   sont repliees. Le compte, au pire (une tache perimee) : 2 x 9 px de marge
   + 20 + 32 + 20 = 90 px, sous les 96 px de la spec. Largeurs fixes : une colonne
   ne s'elargit pas pour un nom long, elle le coupe, et le texte entier reste dans
   l'infobulle. */
table.file-appels { table-layout:fixed; min-width:1000px; }
.file-appels th.c-nom { width:22%; }
.file-appels th.c-tel { width:180px; }
.file-appels th.c-gestes { width:420px; }
.file-appels th.c-res { width:200px; }
.file-appels th.c-quand { width:160px; }
.file-appels th.c-qui { width:170px; }
.file-appels td { padding:9px 12px; vertical-align:top; }
.file-appels .l1 { display:flex; align-items:center; height:30px; }
.file-appels .l1 > a { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-appels .l2 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:20px;
        line-height:20px; font-size:13px; }
.file-appels .pill { padding:1px 9px; line-height:16px; vertical-align:top; margin-top:1px; }
.file-appels .origine { margin-left:8px; color:var(--gris-doux); font-size:12px; }
.file-appels .perime-motif { margin:0; height:32px; line-height:16px; overflow:hidden; }
.file-appels td.numero { line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Les gestes de la ligne : un lien, deux pastilles, un menu — 32 px de haut tant
   qu'ils sont replies. Un pli s'ouvre SOUS sa pastille, DANS le flux : la ligne
   grandit le temps du geste, et rien ne passe sous le bord du conteneur. */
.gestes-ligne { display:flex; align-items:flex-start; justify-content:flex-end; gap:6px; }
.gestes-ligne .guide { flex:0 0 100px; height:32px; padding:0 6px; display:inline-flex;
        align-items:center; justify-content:center; font-size:12.5px; text-decoration:none; }
.menu-res { flex:0 0 120px; }
.menu-plus { flex:0 0 38px; }
.menu-res > summary, .menu-plus > summary { list-style:none; cursor:pointer; height:32px;
        display:flex; align-items:center; justify-content:center; border-radius:999px;
        font-size:12.5px; font-weight:700; white-space:nowrap; }
.menu-res > summary::-webkit-details-marker,
.menu-plus > summary::-webkit-details-marker { display:none; }
.menu-res > summary::after { content:"▾"; margin-left:6px; font-size:11px; }
.menu-res[open] > summary::after { content:"▴"; }
.menu-res.oui > summary { background:#e3f3e6; color:#1f7a3d; }
.menu-res.non > summary { background:#fde9e4; color:#a3341f; }
.menu-plus > summary { background:#fff; color:#5b4636; border:1px solid #d8c7ba; letter-spacing:1px; }
.menu-corps { display:flex; flex-direction:column; gap:5px; margin-top:6px; font-size:12.5px; }
.menu-corps label { display:flex; flex-direction:column; gap:2px; }
.menu-corps .btn { padding:6px 4px; font-size:12.5px; }
.menu-corps input, .menu-corps select { width:100%; }
/* Le menu « ··· » s'ouvre vers la GAUCHE : il est au bord droit de la ligne, et
   ses champs (une date, un motif, un vendeur) sont plus larges que son bouton. */
.menu-plus .menu-corps { width:230px; margin-left:calc(100% - 230px); }
.menu-rang { display:flex; flex-direction:column; gap:5px; padding-top:6px;
        border-top:1px dashed #eaddd3; }
/* TELEPHONE (topo § 4.6) : plus de tableau, une carte par personne — le numero en
   bouton pleine largeur, les deux pastilles dessous, chaque cible a 44 px. Les
   textes reviennent a la ligne au lieu d'etre coupes : rien ne sort de l'ecran. */
@media (max-width:620px) {
  .onglets-activites a { min-height:44px; }
  /* Le filtre par vendeur tient sur UNE rangee (le menu, puis son bouton) : empile
     comme les autres formulaires, il repoussait la premiere carte sous l'ecran. */
  .onglets-barre form.subtabs { flex-direction:row; flex-wrap:nowrap; align-items:flex-end; width:100%; }
  .onglets-barre form.subtabs label { flex:1 1 0; min-width:0; }
  .onglets-barre form.subtabs .btn { width:auto; flex:0 0 auto; }
  .file-defile { border:none; border-radius:0; background:none; }
  table.file-appels { min-width:0; }
  .file-appels, .file-appels tbody, .file-appels tr, .file-appels td { display:block; width:100%; }
  .file-appels thead { display:none; }
  .file-appels tr { background:#fff; border:1px solid #eaddd3; border-radius:12px;
        padding:10px 14px; margin:0 0 10px; }
  .file-appels td { border:none; padding:3px 0; }
  .file-appels .l1, .file-appels .l2, .file-appels .perime-motif { height:auto; }
  .file-appels .l1 > a, .file-appels .l2 { white-space:normal; }
  /* Le nom ouvre la fiche : au pouce, c'est une cible de 44 px comme les autres
     (fusion du lot 4 : au navigateur, a 375 px, le lien ne faisait que 19 px). */
  .file-appels .l1 > a { display:inline-flex; align-items:center; min-height:44px; }
  .file-appels td.numero a.tel { display:flex; align-items:center; justify-content:center;
        min-height:44px; border:1px solid #d8c7ba; border-radius:9px; }
  /* 16 px dans les champs des plis : en dessous, iOS zoome des qu'on les touche. */
  .file-appels .menu-corps input, .file-appels .menu-corps select { font-size:16px; }
  .gestes-ligne { flex-wrap:wrap; justify-content:flex-start; }
  .gestes-ligne .guide, .menu-res > summary, .menu-plus > summary { height:auto; min-height:44px; }
  .menu-res { flex:1 1 calc(50% - 3px); }
  .gestes-ligne .guide { order:3; flex:1 1 calc(100% - 54px); }
  .menu-plus { order:4; flex:0 0 48px; margin-left:auto; }
}
/* --- lot 4, 4b : fin --- */
/* --- lot 4, 4e : debut --- */
/* LE TABLEAU DE BORD TIENT EN UN ECRAN A 1440 x 900 (spec crm-2-0, lot 4). Les
   cartes de l'entonnoir y sont plus basses qu'au Pilotage — ce ne sont que six
   nombres a lire d'un coup d'oeil —, et des compteurs prennent la place des bacs :
   rien ne se deplie sur cet ecran, chaque ligne mene a sa liste. */
.tdb h1 { margin-bottom:8px; }
.tdb h2 { margin:0; font-size:19px; }
/* Mesure au navigateur a 1440 x 900 (lot 4, 4e), cas le plus charge (compteur d'essais, deux
   bannieres, six compteurs, portes) : 988 px de haut avec les cartes du Pilotage.
   Ce qui suit regagne la difference : la note de chaque carte sur la ligne de sa
   pastille, des bannieres moins epaisses, des compteurs de 38 px a la souris. */
.tdb .banner { margin-bottom:10px; padding:10px 14px; }
.tdb-titre { display:flex; align-items:baseline; justify-content:space-between; gap:6px 14px;
              flex-wrap:wrap; margin:0 0 8px; }
.tdb-titre a { font-size:13px; color:var(--bordeaux); }
.tdb .cards.cartes3 { gap:10px; }
.tdb .card.chiffre { padding:10px 16px; }
.tdb .card.chiffre .val { font-size:26px; margin-top:0; line-height:1.15; }
.tdb .card.chiffre .badge { margin-top:2px; }
.tdb .card.chiffre .muted { display:inline; margin-left:6px; }
/* Deux colonnes : la liste a traiter a gauche, ce qui se fait en un geste a
   droite. Sous 900 px, une seule colonne, la liste d'abord. */
.tdb-bas { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px;
            align-items:start; margin-top:14px; }
.tdb-afaire { background:#fff; border:1px solid #eaddd3; border-radius:14px; padding:12px 18px 14px; }
.tdb-afaire h2 { margin-bottom:4px; }
.tdb-liste { display:flex; flex-direction:column; }
/* Une ligne par compteur : 38 px a la souris, 44 px au pouce (plus bas, sous
   620 px). La fleche dit qu'elle mene quelque part. */
.tdb-compteur { display:flex; align-items:center; justify-content:space-between; gap:12px;
                 min-height:38px; padding:4px 6px; border-bottom:1px solid #f0e7df;
                 text-decoration:none; color:var(--encre); font-size:14.5px; }
.tdb-compteur:last-child { border-bottom:none; }
.tdb-compteur:hover { background:#faf1ea; }
.tdb-compteur .tdb-nb { font-weight:700; color:var(--bordeaux); font-variant-numeric:tabular-nums;
                         white-space:nowrap; }
.tdb-compteur .tdb-nb::after { content:"\2192"; margin-left:10px; font-weight:400; }
.tdb-rien { margin:8px 0 2px; font-size:14px; }
.tdb-portes { margin:8px 0 0; font-size:13px; line-height:2.2; }
.tdb-portes a { color:var(--bordeaux); }
.tdb-cote { display:flex; flex-direction:column; gap:12px; }
.tdb-tache { display:flex; align-items:center; gap:14px; min-height:44px; padding:10px 16px;
              background:#fff; border:1px solid #eaddd3; border-radius:14px;
              text-decoration:none; color:var(--encre); }
.tdb-tache:hover { background:#faf1ea; }
.tdb-tache .tdb-nb { font-family:var(--f-titre); font-size:30px; line-height:1; color:var(--bordeaux);
                      font-variant-numeric:tabular-nums; }
.tdb-tache.retard .tdb-nb { color:#a3341f; }
.tdb-cote .pli-nouveau { background:#fff; border:1px solid #eaddd3; border-radius:14px; }
.tdb-cote .pli-nouveau > summary { list-style:none; cursor:pointer; display:flex; align-items:center;
              min-height:44px; padding:10px 16px; font-weight:700; color:var(--bordeaux); }
.tdb-cote .pli-nouveau > summary::-webkit-details-marker { display:none; }
/* Ouvert, le formulaire empile ses champs dans la colonne etroite : une etiquette
   au-dessus de chaque case, plutot qu'un pele-mele de lignes coupees au hasard. */
.tdb-cote .pli-nouveau > form { margin:0; padding:0 16px 14px; flex-direction:column;
              align-items:stretch; }
.tdb-cote .pli-nouveau > form label { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.tdb-cote .pli-nouveau > form input, .tdb-cote .pli-nouveau > form select { width:100%; }
@media (max-width:900px) {
  .tdb-bas { grid-template-columns:minmax(0,1fr); }
}
/* Au pouce, chaque cible de l'accueil fait 44 px : les compteurs, et aussi les
   liens des portes et du Pilotage, qui ne seraient sinon qu'une ligne de texte de
   18 px (mesure a 375 px). */
@media (max-width:620px) {
  .tdb-compteur { min-height:44px; }
  .tdb-portes a, .tdb-titre a { display:inline-flex; align-items:center; gap:4px; min-height:44px; }
}
/* --- lot 4, 4e : fin --- */
/* --- lot 4, 4c : debut --- */
/* LA FICHE (topo § 4.4) : a gauche ce qu'on FAIT, a largeur fixe pour que le
   statut, l'appel guide, les bascules et les gestes ne bougent pas d'une fiche a
   l'autre ; a droite ce qu'on LIT. Une grille plutot qu'une ligne flexible :
   chaque colonne garde sa place quoi que contienne l'autre. Sous 1100 px, une
   seule colonne, les gestes d'abord. */
.fiche2 { display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr);
          gap:18px; align-items:start; }
.fiche2 .fiche-gauche { min-width:0; display:flex; flex-direction:column; gap:10px; }
.fiche2 .fiche-gauche .card { padding:12px 14px; }
.fiche2 .fiche-gauche h2 { margin:6px 0 4px; }
.fiche2 .fiche-droite { position:relative; min-width:0; background:#fff;
          border:1px solid #eaddd3; border-radius:14px; padding:12px 16px; }
.fiche2 .fiche-droite textarea { width:100%; }
.fiche2 .fiche-droite .wa-fil { max-height:46vh; overflow-y:auto; }
.fiche-statut .statut-ligne { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
          margin-top:6px; }
.fiche-statut .statut-seq { font-size:13px; margin-top:6px; }
.btn.appel-guide { width:100%; min-height:44px; font-size:15px; }
.appel-guide-off .muted { display:block; font-size:12.5px; margin-top:4px; }
/* Les cinq bascules : des boutons sur deux ou trois lignes, pas une colonne de
   cinq — c'est ce qui laisse les gestes de contact dans le premier ecran. */
.bascules-liste { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.bascules-liste .btn, .bascule-perdu > summary { padding:7px 11px; font-size:13px;
          min-height:36px; }
.bascule-perdu > summary { list-style:none; display:inline-flex; align-items:center;
          cursor:pointer; }
.bascule-perdu > summary::-webkit-details-marker { display:none; }
.bascule-perdu[open] { flex-basis:100%; }
.perdu-form { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 10px;
          align-items:center; margin-top:8px; padding:10px; background:#faf6f2;
          border-radius:10px; }
.perdu-form .btn, .perdu-form .muted { grid-column:1 / -1; justify-self:start; }
.perdu-form .muted { font-size:12px; }
.bascules-raisons { font-size:12px; line-height:1.5; margin:8px 0 0; }
.fiche-parcours { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.fiche-infos { margin:0; }
.fiche-essai { margin-bottom:12px; }
.fiche-essai .val { font-family:var(--f-corps); font-size:15px; color:var(--encre); }
/* LES PLIS : le titre du bloc devient le bouton qui l'ouvre (<details> natif). */
.fiche-pli { border-top:1px solid #eaddd3; padding:4px 0; }
.fiche-pli > summary { list-style:none; cursor:pointer; display:flex; align-items:center;
          gap:8px; min-height:36px; }
.fiche-pli > summary::-webkit-details-marker { display:none; }
.fiche-pli > summary::before { content:"▸"; color:#5b4636; }
.fiche-pli[open] > summary::before { content:"▾"; }
.fiche-pli > summary h2 { display:inline; font-size:17px; margin:0; }
.zone-danger > summary h2 { color:#a3341f; }
/* LES ONGLETS DE LA COLONNE DROITE, en HTML natif. Deux cases radio (Historique,
   WhatsApp) et deux cases a cocher (« + RDV », « + Activité »), ecrites AVANT
   les panneaux pour que « ~ » les atteigne. Les cases restent dans le parcours du
   clavier (opacite nulle, jamais display:none) : Tab y entre, les fleches
   changent d'onglet, Espace ouvre un formulaire. Sans feuille de style, tout se
   lit a la suite : rien n'est cache a qui n'a pas de CSS. */
.fo-ctl { position:absolute; top:12px; left:16px; opacity:0; width:1px; height:1px;
          margin:0; pointer-events:none; }
.fo-barre { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
          border-bottom:1px solid #eaddd3; padding-bottom:8px; margin-bottom:10px; }
.fo-onglet { cursor:pointer; padding:8px 14px; border-radius:9px; font-weight:600;
          font-size:14px; color:#5b4636; }
.fo-espace { flex:1 1 auto; }
.fo-plus { cursor:pointer; }
#fo-histo:checked ~ .fo-barre label[for="fo-histo"],
#fo-wa:checked ~ .fo-barre label[for="fo-wa"],
#fo-rdv:checked ~ .fo-barre label[for="fo-rdv"],
#fo-act:checked ~ .fo-barre label[for="fo-act"] { background:var(--sable);
          color:var(--bordeaux); }
#fo-histo:focus-visible ~ .fo-barre label[for="fo-histo"],
#fo-wa:focus-visible ~ .fo-barre label[for="fo-wa"],
#fo-rdv:focus-visible ~ .fo-barre label[for="fo-rdv"],
#fo-act:focus-visible ~ .fo-barre label[for="fo-act"] { outline:2px solid var(--bordeaux);
          outline-offset:2px; }
.fo-pan-rdv, .fo-pan-act, .fo-pan-wa { display:none; }
#fo-rdv:checked ~ .fo-pan-rdv, #fo-act:checked ~ .fo-pan-act,
#fo-wa:checked ~ .fo-pan-wa { display:block; }
#fo-wa:checked ~ .fo-pan-histo { display:none; }
.fo-pan-rdv, .fo-pan-act { background:#faf6f2; border-radius:10px; padding:10px 12px;
          margin-bottom:12px; }
.fo-pan h2 { margin:0 0 8px; font-size:18px; }
/* Une tache de « Activités à venir » est une ligne flexible (regle `ul.taches li`
   du tableau de bord, qui la vise aussi) : sur la fiche, elle passe a la ligne
   plutot que de pousser ses menus hors de l'ecran. */
.fiche2 ul.taches li.tache { flex-wrap:wrap; }
/* Les gestes manuels d'une tache, dans un pli (fusion du lot 4) : sur sa propre
   rangee, sous le bouton de l'appel guide. */
.tache-pli { flex-basis:100%; margin-top:8px; }
.tache-pli > summary { cursor:pointer; font-size:13px; display:inline-flex; align-items:center;
          min-height:32px; }
@media (max-width:1100px) {
  .fiche2 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px) {
  .bascules-liste .btn, .bascule-perdu > summary, .fo-onglet, .fo-plus,
  .fiche-pli > summary, .fiche-parcours .btn { min-height:44px; }
  .tache-pli > summary { min-height:44px; }
  .fiche2 .gabarits-prets > summary, .fiche2 .chrono-plus > summary { min-height:44px;
          padding:12px 0; }
  .fo-onglet, .fo-plus { display:inline-flex; align-items:center; }
}
/* --- lot 4, 4c : fin --- */
/* --- lot 4, 4d : debut --- */
/* APPEL GUIDE (topo § 4.5). La carte devient une colonne : tout le contenu defile,
   les deux boutons restent en pied, HORS du defilement — « Pas décroché » se note
   sans descendre au bas du script, et « Enregistrer et passer au suivant » est
   toujours a portee. La hauteur reste celle de toute carte (80vh). */
.modal-card.script-carte { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.script-defile { flex:1 1 auto; min-height:0; overflow:auto; padding:24px 26px 12px; }
.script-actions { flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
                   padding:12px 26px 16px; border-top:1px solid var(--camel); }
/* Le resultat EN TETE : la zone qui etait le pied passe sous le titre, separee du
   script par un filet au lieu d'en etre precedee. */
.script-pied.script-resultat { border-top:none; padding-top:0; padding-bottom:14px;
                                border-bottom:1px solid var(--camel); margin-bottom:16px; }
/* Ce qui est deja parti vers la personne : un encadre sobre, AVANT le script, pour
   qu'on le lise avant de parler. */
.deja-envoye { background:#fff; border:1px solid #eaddd3; border-radius:10px;
                padding:10px 14px; margin:0 0 16px; }
.deja-envoye h3 { margin:0 0 6px; font-size:14px; }
.deja-envoye ul { margin:0; padding-left:18px; font-size:14px; line-height:1.5; }
/* « Si messagerie » hors de la liste numerotee : un cadre en tirets, qu'on trouve
   d'un coup d'oeil quand personne ne decroche. */
.script-messagerie { border:2px dashed var(--camel); border-radius:10px; padding:10px 14px 4px;
                      margin:4px 0 8px; }
.script-messagerie h3 { margin:0 0 6px; font-size:15px; color:var(--bordeaux); }
/* La reservation, sous les questions du bloc qui fixe l'essai. Le libelle d'un
   creneau est long (« ven. 02/10 · 18h00 · CrossFit · 6 places ») : sans ces deux
   bornes, le menu imposait sa largeur et sortait de la carte a 375 px (mesure). */
.script-resa { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin:8px 0 0; }
.script-resa label { min-width:0; max-width:100%; }
.script-resa select { max-width:100%; }
/* La confirmation d'un geste lance DEPUIS le panneau (« Réserver ») doit passer
   AU-DESSUS de lui : meme couche (.modal), et le panneau vient plus loin dans la
   page — sans cette regle, la question s'ouvrirait cachee derriere lui. */
#confirmation { z-index:55; }
@media (max-width:620px) {
  .script-defile { padding:16px 16px 10px; }
  .script-actions { padding:10px 16px 12px; }
  .script-actions .btn, .script-resa .btn, .script-carte select { min-height:44px; }
  .script-actions .btn { flex:1 1 100%; }
  .script-resa label { flex:1 1 100%; }
  .script-resa select { display:block; width:100%; }
}
/* --- lot 4, 4d : fin --- */
/* --- lot 4, 4f : debut --- */
/* PROSPECTS ET PLANNING (spec crm-2-0, 4f ; topo § 3.3, principe 3 : « un
   formulaire s'ouvre quand on le demande, il n'attend pas ouvert »). Les trois
   plis de ces deux pages — « Filtres avancés », « + Nouveau prospect »,
   « + Nouveau RDV » — sont des <details> natifs : rien a charger, rien a
   autoriser sous la CSP. Leur titre se dessine comme un bouton discret, aux
   couleurs de .btn.ghost (couple deja juge au § 129) : un pli qu'on ne reconnait
   pas comme cliquable est un formulaire perdu. Pas de bouton plein : l'ecran en
   a deja un (topo § 3.3, principe 2). */
.filtres-avances > summary, .pli-nouveau > summary, .pli-rdv > summary {
        display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
        padding:8px 14px; border-radius:9px; border:1px solid #d8c7ba; background:#fff;
        color:#5b4636; font-size:14px; font-weight:600; }
.filtres-avances > summary::-webkit-details-marker, .pli-nouveau > summary::-webkit-details-marker,
.pli-rdv > summary::-webkit-details-marker { display:none; }
.filtres-avances > summary::after { content:"▾"; font-size:12px; }
.filtres-avances[open] > summary::after { content:"▴"; }
.filtres-avances > summary:hover, .pli-nouveau > summary:hover, .pli-rdv > summary:hover { background:#faf1ea; }
/* Ouvert, le pli des filtres prend TOUTE la ligne du formulaire : ses six menus
   reviennent a la ligne entre eux, et « Filtrer » se range apres eux — le bouton
   suit les menus qu'il applique. */
.filtres-avances[open] { flex:1 1 100%; }
.filtres-corps { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.pli-nouveau, .pli-rdv { margin:0 0 14px; }
.pli-corps { margin:10px 0 0; }
/* La liste DEFILE DANS SON CADRE quand ses dix colonnes ne tiennent pas (une
   tablette, une fenetre etroite) : c'est le tableau qui glisse, pas la page qui
   deborde en largeur (topo § 5). */
.liste-defile { overflow-x:auto; border-radius:12px; margin:0 0 14px; }
.liste-prospects td.tel-col { white-space:nowrap; }
/* Dix colonnes a 14 px de marge laterale font 1 190 px : 16 de trop pour l'ecran
   de 1440 x 900, et le bouton « Supprimer » passait sous le bord du cadre.
   10 px de chaque cote rendent 80 px — la liste tient, sans defiler. */
.liste-prospects th, .liste-prospects td { padding-left:10px; padding-right:10px; }
/* LE PLANNING : sept colonnes egales, du lundi au dimanche, jours vides compris.
   Une grille et non des colonnes de largeur fixe : sept fois 232 px font 1 624 px,
   le dimanche sortait de l'ecran de 1440 px. minmax(0, 1fr) laisse une colonne
   retrecir sous la largeur de son plus long mot au lieu d'elargir la semaine. */
.semaine.sept { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; }
.semaine.sept .jour { min-width:0; padding:10px; }
.semaine.sept .jour.vide { background:#fbf7f3; }
.semaine.sept .jour.aujourdhui { border-color:var(--camel); box-shadow:inset 0 3px 0 var(--camel); }
.semaine.sept .creneau { overflow-wrap:anywhere; }
/* Pilotage Falco : un libelle bancaire peut etre une suite de cinquante chiffres
   sans espace. Sans cette regle il pousse la page hors de l'ecran. */
.falco-libelle { overflow-wrap:anywhere; }
/* La navigation et « + Nouveau RDV » partagent UNE rangee : deux rangees de
   boutons poussaient la semaine sous le pli de l'ecran de 1440 x 900. Ouvert, le
   pli prend toute la largeur, sous la navigation. */
.planning-barre { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:0 0 14px; }
.planning-barre .pli-rdv { margin:0; }
.planning-barre .pli-rdv[open] { flex:1 1 100%; }
.semaine-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.semaine-nav .btn { text-decoration:none; }
.semaine-nav .semaine-ici { background:var(--sable); color:var(--bordeaux); cursor:default; }
.fiches-rdv { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:6px; }
.fiches-rdv li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fiches-rdv .btn { text-decoration:none; }
/* TELEPHONE (topo § 4.6 : « plus aucun tableau, une carte par personne, le
   numero en bouton pleine largeur »). Les colonnes SECONDAIRES sont masquees —
   Source (3), Mode (5), Activites (7), Sequence (8), Ajoute le (9) : elles sont
   sur la fiche — et chaque ligne restante devient une carte, comme les bacs de
   « Ma journée » au § 134. Une ligne de tableau de cinq cellules ne tient pas
   dans 351 px : le menu d'attribution et « Supprimer » sortaient de l'ecran,
   exactement ce que la definition de termine du lot 4 interdit. */
@media (max-width:620px) {
  .filtres-avances > summary, .pli-nouveau > summary, .pli-rdv > summary {
        min-height:44px; width:100%; justify-content:center; }
  /* La barre de la liste : la recherche et le pli sur toute la largeur, puis
     « Filtrer » et « Corbeille » COTE A COTE — empiles, ils repoussaient la
     premiere fiche d'une hauteur de bouton de plus sous le premier ecran. */
  form.filtres-liste { flex-direction:row; flex-wrap:wrap; }
  form.filtres-liste > label, form.filtres-liste > details { flex:1 1 100%; }
  form.filtres-liste > .btn, form.filtres-liste > a { flex:1 1 0; width:auto; display:inline-flex;
        align-items:center; justify-content:center; }
  .liste-prospects th:nth-child(3), .liste-prospects td:nth-child(3),
  .liste-prospects th:nth-child(5), .liste-prospects td:nth-child(5),
  .liste-prospects th:nth-child(7), .liste-prospects td:nth-child(7),
  .liste-prospects th:nth-child(8), .liste-prospects td:nth-child(8),
  .liste-prospects th:nth-child(9), .liste-prospects td:nth-child(9) { display:none; }
  .liste-prospects, .liste-prospects tbody, .liste-prospects tr, .liste-prospects td { display:block; width:100%; }
  .liste-prospects thead { display:none; }
  .liste-prospects tr { padding:10px 14px; border-bottom:1px solid #f0e7df; }
  .liste-prospects td { border:none; padding:3px 0; }
  .liste-prospects td.nom { white-space:normal; overflow-wrap:anywhere; }
  .liste-prospects td.nom a, .liste-prospects td.tel-col a.tel { display:inline-flex; align-items:center;
        min-height:44px; }
  .liste-prospects td.tel-col a.tel { width:100%; justify-content:center; border:1px solid #d8c7ba;
        border-radius:9px; background:#fff; }
  .liste-prospects .sel-vendeur { max-width:none; width:100%; }
  .semaine.sept { grid-template-columns:1fr; }
  /* Le bloc « À statuer » de tete garde sinon sa colonne de 232 px. */
  .semaine > .jour.ko { flex:1 1 auto; }
  .semaine.sept .jour.vide { padding:6px 12px; }
  .semaine.sept .jour.vide h3, .semaine.sept .jour.vide p { display:inline; margin:0 8px 0 0; }
  /* Les liens d'une carte d'essai — le nom, le numero —, dans la semaine ET dans
     le bloc « À statuer » de tete : mesures a 18 et 16 px de haut a 375 px. */
  .semaine .creneau a { display:inline-flex; align-items:center; min-height:44px; }
  /* Les liens de texte de la liste : « N jamais consulté(e)s » (19 px), « Tout
     effacer et revoir la liste complète » quand un filtre est actif, « Tout
     afficher » sous une recherche vide. */
  .banner a.lien-nonlu, #filtres-actifs a, .liste-prospects td[colspan] a { display:inline-flex;
        align-items:center; min-height:44px; }
  .fiches-rdv .btn { display:inline-flex; align-items:center; }
}
/* --- lot 4, 4f : fin --- */
/* --- lot 4, 4z : debut --- */
/* L'ASSEMBLAGE (fusion du lot 4 ; « 4z » n'est pas un point de la spec, c'est le bloc
   de la fusion). « A 375 px, sur chaque ecran du CRM : cibles de 44 px au moins » —
   au navigateur, trois familles de liens restaient en dessous sur des ecrans que les
   six points ne redessinaient pas : les onglets des Messages (37 px), les periodes
   du Pilotage (32 px) et les liens-boutons, dont « Ouvrir Sportigo » dans le panneau
   d'appel (39 px). La regle est limitee aux ecrans du CRM (.shell.crm) : les autres
   modules ne sont pas de ce lot. */
@media (max-width:620px) {
  .shell.crm .wa-tabs a { display:inline-flex; align-items:center; min-height:44px; }
  .shell.crm .subtabs a { display:inline-flex; align-items:center; min-height:44px; }
  .shell.crm a.btn { display:inline-flex; align-items:center; min-height:44px; }
}
/* --- lot 4, 4z : fin --- */
/* --- lot 5, 5c : debut --- */
/* La page publique du lien de desabonnement, dans la coque des ecrans de double
   authentification. Elle s'ouvre depuis un mail, donc le plus souvent au telephone :
   texte centre, et le bouton prend toute la largeur — sous 620 px, la regle
   generique des .btn lui donne en plus ses 44 px de haut. */
.desabo { text-align:center; }
.desabo form { margin:18px 0 6px; }
.desabo .btn { width:100%; }
/* --- lot 5, 5c : fin --- */
/* --- lot 5, 5d : debut --- */
/* L'analyse des envois. Dix colonnes ne tiennent pas a 375 px : le tableau defile
   dans son cadre (.tablewrap), la page ne deborde pas. Les nombres s'alignent a
   droite pour se comparer d'une ligne a l'autre. Le pli « Non partis » est un
   <details> natif : sa ligne de titre est la cible qu'on touche, 44 px au
   telephone — elle garde son affichage de liste, donc son triangle. */
.analyse-envois .chiffre { text-align:right; white-space:nowrap; }
/* Le nom du message garde une largeur lisible : sans elle, a 375 px, le tableau qui
   defile serrait la premiere colonne jusqu'a un mot par ligne. */
.analyse-envois td:first-child, .analyse-envois th:first-child { min-width:11em; }
.analyse-detail summary { cursor:pointer; }
.analyse-detail ul { margin:6px 0 4px; }
/* Le lien d'une campagne vers son bilan, sous son nom (assemblage du lot 5). */
.analyse-envois a.lien-bilan { font-size:12.5px; }
@media (max-width:620px) {
  .analyse-detail summary { min-height:44px; padding:12px 0; box-sizing:border-box; }
  .analyse-envois a.lien-bilan { display:inline-flex; align-items:center; min-height:44px; }
}
/* --- lot 5, 5d : fin --- */
/* --- lot 5, 5e : debut --- */
/* « Ranger les N tâches périmées », en tête de l'onglet « À ranger » : le bouton et,
   s'il est éteint, la phrase qui dit pourquoi, sur une rangée qui passe à la ligne
   au téléphone. Sous 620 px, la règle générique des .btn lui donne ses 44 px. */
.ranger-tout { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin:4px 0 12px; }
.ranger-tout p { margin:0; }
/* --- lot 5, 5e : fin --- */
/* --- lot 5, 5b : debut --- */
/* L'ECRAN DES CAMPAGNES. Le formulaire porte les deux blocs de texte, celui du mail
   et celui de WhatsApp : la feuille montre celui du canal choisi, et cache le champ
   « message » d'un gabarit qui n'en porte pas — par :has(), sans aucun script. Un
   navigateur qui ne connait pas :has() ignore la regle entiere et montre tout :
   rien n'est perdu, le serveur ne lit que les champs du canal choisi. */
.campagne-aide a { margin-left:6px; }
.form-campagne { display:flex; flex-direction:column; gap:10px; margin:12px 0 0; max-width:760px; }
.form-campagne label { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.form-campagne fieldset { border:1px solid #eaddd3; border-radius:10px; padding:10px 12px; margin:0; }
.form-campagne legend { font-size:13px; font-weight:600; padding:0 4px; }
.campagne-cases { display:flex; flex-wrap:wrap; gap:4px 16px; }
.form-campagne .campagne-cases label { flex-direction:row; align-items:center; gap:6px; }
.campagne-nombres { display:flex; flex-wrap:wrap; gap:10px; }
.form-campagne input[type=text], .form-campagne textarea { width:100%; box-sizing:border-box; }
/* (assemblage du lot 5) Mesure a 375 px, canal WhatsApp choisi : le menu des gabarits
   prenait la largeur de son plus long libelle (517 px) et son cadre le suivait —
   un fieldset ne retrecit pas sous son contenu tant qu'on ne le lui permet pas. Le
   menu, le champ du message et le bas du bloc sortaient de l'ecran, sans defilement
   pour les rejoindre. */
.form-campagne fieldset { min-width:0; }
.form-campagne select { width:100%; max-width:100%; box-sizing:border-box; }
.form-campagne textarea { padding:10px 12px; font-size:13px; border:1px solid #d8c7ba;
        border-radius:8px; font-family:inherit; }
.form-campagne input[type=number] { padding:8px 10px; border:1px solid #d8c7ba; border-radius:8px;
        font-size:13px; max-width:170px; }
.form-campagne:has(select[name=canal] option[value=whatsapp]:checked) .bloc-mail,
.form-campagne:has(select[name=canal] option[value=mail]:checked) .bloc-whatsapp,
.form-campagne:has(select[name=gabarit] option[data-message="0"]:checked) .champ-message { display:none; }
.campagne-resume { font-size:14px; }
.campagne-gestes { margin:14px 0; }
.campagne-geste { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 10px; }
.campagne-decompte, .campagne-apercu, .campagne-bilan { margin:0 0 14px; }
.apercu-msg { border-top:1px solid #f0e7df; padding:10px 0 0; margin:10px 0 0; }
.apercu-msg h3 { font-size:14px; margin:0 0 6px; }
.apercu-corps { white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:13px;
        background:#fbf7f3; border:1px solid #eee0d5; border-radius:8px; padding:10px 12px;
        margin:6px 0 0; }
.campagne-raisons { margin:6px 0 0; padding-left:20px; }
.campagne-bilan-t th { text-align:left; font-weight:600; padding-right:18px; }
/* TELEPHONE : 44 px pour chaque cible du lot — les cases a cocher (leur
   etiquette entiere est la cible), les liens de texte, et les champs de nombre en
   pleine largeur. Les plis (.pli-nouveau) et les boutons ont deja leurs 44 px. */
@media (max-width:620px) {
  .form-campagne .campagne-cases label, .campagne-retour a, .campagne-aide a,
  .liste-campagnes td.nom a { display:inline-flex; align-items:center; min-height:44px; }
  .form-campagne input[type=number] { max-width:none; width:100%; }
  .campagne-nombres label { flex:1 1 100%; }
  .campagne-geste .btn { width:100%; }
  /* (assemblage du lot 5) Les plis d'aide de ces deux ecrans — « En savoir plus »
     sous la ligne d'aide, « Le message » sous le bilan — : mesures a 22 px au
     telephone, la regle des 44 px de details.aide ne valant que dans Parametres. */
  .campagne-aide + details.aide > summary, details.campagne-texte > summary {
    min-height:44px; padding:12px 0; box-sizing:border-box; }
}
.campagne-aide + details.aide > summary, details.campagne-texte > summary { cursor:pointer; }
/* --- lot 5, 5b : fin --- */
/* --- coexistence, boite : debut --- */
/* Un message supprime depuis le telephone reste a sa place dans le fil : en italique,
   pour qu'on lise qu'il a existe et qu'il a ete retire, sans le prendre pour un
   message. Aucune couleur neuve : la bulle garde celles de son sens (in / out). */
.wa-msg.revoque { font-style:italic; }
/* Le lien du bandeau rouge vers la page de branchement (administrateur) : au
   telephone, une cible de 44 px comme les autres liens du CRM — mesure a 375 px avant
   cette regle : 19 px de haut. */
@media (max-width:620px) {
  .banner a.lien-coex { display:inline-flex; align-items:center; min-height:44px; }
}
/* --- coexistence, boite : fin --- */
/* --- coexistence, porte : debut --- */
/* La page de branchement du numero WhatsApp de la salle, et la page publique de
   confidentialite. AUCUNE couleur neuve : bandeaux, boutons et texte discret sont
   ceux de la charte, dont les contrastes sont deja juges (§ 129). La page de
   branchement garde une largeur de lecture ; la case « j'ai lu » est une cible de
   44 px au telephone, le bouton y prend toute la largeur. */
.coex { max-width:760px; }
.coex ul, .coex ol { padding-left:22px; }
.coex li { margin:5px 0; line-height:1.45; }
/* L'adresse de rappel et les identifiants Meta sont de longs mots sans espace : a
   375 px, l'adresse debordait de 36 px hors de l'ecran (mesure au navigateur). */
.coex code { overflow-wrap:anywhere; }
.coex-relier { display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin:12px 0 18px; }
.coex-lu { display:flex; align-items:flex-start; gap:8px; cursor:pointer; }
.coex-lu input { margin-top:3px; }
.coex-etapes { margin:4px 0 0; }
/* La politique de confidentialite vit dans la coque des ecrans sans navigation
   (_page_2fa), taillee pour un formulaire : un texte et un tableau de quatre colonnes
   y ont besoin de plus de largeur. Le tableau defile dans son cadre au telephone. */
.deuxfa-wrap:has(> .confidentialite) { max-width:780px; }
.confidentialite h2 { margin-top:22px; }
.confidentialite p, .confidentialite li { line-height:1.5; }
.confidentialite td { vertical-align:top; }
@media (max-width:620px) {
  .coex-lu { min-height:44px; align-items:center; }
  .coex-relier .btn { width:100%; }
}
/* --- coexistence, porte : fin --- */
/* --- lot 6, rentabilite : debut --- */
/* L'ECRAN RENTABILITE (lot 6, 6.1). Les quatre marches et les murs sont des cartes de
   la grille commune (.cards) : quatre de front a 1440 px, une par ligne au telephone,
   rien ne deborde. AUCUNE couleur neuve : le verdict reprend .bench.ok / .bench.ko, la
   phrase de tete les bandeaux de la charte, les etiquettes le gris discret (.muted),
   tous deja juges au § 129. Le formulaire suit la forme de celui des campagnes : une
   etiquette AU-DESSUS de chaque case, des blocs qui passent a la ligne. Au telephone,
   les cases et le bouton ont deja leurs 44 px par le palier commun (champs et .btn). */
.rentab-phrase { font-size:15px; line-height:1.45; }
.rentab-marche h3 { font-size:16px; margin:4px 0 2px; color:var(--bordeaux); }
.rentab-marche dl { display:grid; grid-template-columns:auto 1fr; gap:3px 10px;
  margin:10px 0 6px; font-size:13.5px; }
.rentab-marche dt { margin:0; }
.rentab-marche dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.rentab-verdict { font-weight:600; margin:6px 0 0; }
.rentab-pied { margin:6px 0 0; }
.rentab-murs .val { font-variant-numeric:tabular-nums; }
.rentab-lu { max-width:860px; }
.rentab-lu th { width:42%; }
.form-rentab { display:flex; flex-direction:column; gap:12px; margin:8px 0 24px; max-width:860px; }
.form-rentab fieldset { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px 14px; border:1px solid #eaddd3; border-radius:10px; padding:10px 12px; margin:0;
  min-width:0; }
.form-rentab legend { font-size:13px; font-weight:600; padding:0 4px; }
.form-rentab label { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.form-rentab input[type=text] { width:100%; box-sizing:border-box; }
.form-rentab .rentab-note { grid-column:1 / -1; margin:0; }
.form-rentab .btn { align-self:flex-start; }
@media (max-width:620px) {
  .rentab-lu th { width:auto; }
  .form-rentab .btn { width:100%; }
}
/* --- lot 6, rentabilite : fin --- */
/* --- lot 8, app : debut --- */
/* La page hors ligne de l'application installee, dans la coque des ecrans sans
   navigation (_page_2fa), comme le lien de desabonnement : texte centre. « Reessayer »
   est un LIEN dessine en bouton — il ne fait que rouvrir le tableau de bord, et la
   page ne porte aucun script. Centre dans sa boite pour que les 44 px du palier
   tactile (sous 620 px) ne decalent pas son texte. AUCUNE couleur neuve. */
.hors-ligne { text-align:center; }
.hors-ligne p { line-height:1.5; }
.hors-ligne .btn { display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; margin-top:10px; }
@media (max-width:620px) {
  .hors-ligne .btn { width:100%; }
}
/* --- lot 8, app : fin --- */
/* --- lot 7, site : debut --- */
/* La carte « Formulaire du site » (Parametres → Donnees). Le champ qui recoit
   l'adresse du webhook prend toute la largeur et une police a chasse fixe : une
   adresse de 90 signes se selectionne d'un clic et se relit sans la tronquer. Le
   bouton a deja ses 44 px par le palier commun (.btn). Aucune couleur neuve. */
.site-etat th { width:42%; }
.site-adresse { display:flex; flex-direction:column; gap:4px; max-width:860px; }
.site-adresse input { width:100%; box-sizing:border-box; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px; min-height:44px; }
@media (max-width:620px) {
  .site-etat th { width:auto; }
}
/* --- lot 7, site : fin --- */
/* --- lot 4 bis : debut --- */
/* Retouches du layout decidees apres le tour des ecrans du 07/10/2026, mesurees au
   navigateur a 1440, 1280 et 375 px (specs/crm-2-0-tour-ecrans-2026-10-07.md). */
/* (1) MESSAGES, numero inconnu : la liste « Fiche prospect » prenait la largeur de son
   option la plus longue (un nom a rallonge et un numero) — 476 px dans une carte de
   351 — et toute la page glissait sur le cote. Formulaires, etiquettes et champs
   peuvent maintenant retrecir jusqu'a la largeur de la carte. */
.wa-unknown form.acts, .wa-unknown label { min-width:0; max-width:100%; }
.wa-unknown select, .wa-unknown input[type=text] { min-width:0; max-width:100%; }
/* (2) ACTIVITES, ordinateur : le retard d'une tache ne se coupe plus. La ligne
   d'echeance est une rangee ou la DATE est seule a pouvoir retrecir (points de
   suspension) ; le motif passe sur deux lignes au plus, sauf sous « A ranger » ou le
   motif du perime occupe deja la place. Sous 1400 px la rangee passe a la ligne. */
.file-appels td.motif .l2.motif-2l { display:-webkit-box; -webkit-box-orient:vertical;
        -webkit-line-clamp:2; white-space:normal; height:auto; max-height:40px; }
.file-appels td.motif .l2.echeance { display:flex; align-items:flex-start; gap:4px; }
.file-appels td.motif .l2.echeance .pill, .file-appels td.motif .l2.echeance .retard { flex:0 0 auto; }
.file-appels td.motif .l2.echeance .date { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.file-appels th.c-nom { width:21%; }
@media (max-width:1399px) {
  .file-appels td.motif .l2.echeance { flex-wrap:wrap; height:auto; row-gap:2px; white-space:normal; }
  .file-appels th.c-nom { width:18%; }
}
/* (3) PROSPECTS, ordinateur : un nom a rallonge elargissait la colonne et poussait
   « Ajoute le » hors de la boite (33 px a 1440 px). Le nom se coupe a 300 px (l'infobulle
   garde le texte entier). Sous 1400 px, Mode et Sequence passent sous le Statut : la
   liste tient a 1280 px sans rien perdre. */
.liste-prospects td.nom { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* La mention « fiche fusionnee » (« c'est bien la meme personne ») n'est pas le nom : elle
   existe pour qu'on ne recree pas un doublon. Elle revient a la ligne dans la colonne au lieu
   d'etre rognee sans signe (relecture independante du 08/10/2026). */
.liste-prospects td.nom .via-fusion { white-space:normal; }
.liste-prospects .mode-seq-mini { display:none; }
@media (min-width:621px) and (max-width:1399px) {
  .liste-prospects th:nth-child(5), .liste-prospects td:nth-child(5),
  .liste-prospects th:nth-child(8), .liste-prospects td:nth-child(8) { display:none; }
  .liste-prospects .mode-seq-mini { display:block; margin-top:4px; white-space:nowrap; }
}
/* (7) Les plis « En savoir plus » : 44 px au pouce partout, pas seulement dans
   Parametres et Campagnes (Rentabilite les avait a 22 px). */
@media (max-width:620px) {
  details.aide > summary { min-height:44px; padding:12px 0; box-sizing:border-box; }
  .liste-prospects td.nom { max-width:none; overflow:visible; text-overflow:clip; white-space:normal; }
  .file-appels td.motif .l2.motif-2l { display:block; max-height:none; -webkit-line-clamp:unset; }
}
/* (8) PILOTAGE : les deux alertes (taches, WhatsApp) tiennent dans UN seul bandeau. */
.banner[data-bloc=synthese] > div + div { margin-top:6px; }
/* --- lot 4 bis : fin --- */
/* --- lot 4 ter : debut --- */
/* ACTIVITES AU TELEPHONE (lot 4 ter, maquettes du 08/10/2026). Tout ce qui suit ne vaut que SOUS
   620 px, sauf les regles « de repos » du debut : le bandeau du creneau et la tete de
   « Aujourd'hui » sont des plis OUVERTS dans le HTML (sans script, tout est lisible) que app.js
   replie sur un ecran etroit, comme le rail. A l'ordinateur ils se lisent comme avant, en
   paragraphe : leur resume n'a ni marqueur, ni clic. Les pieds de bac du telephone sont caches. */
details.creneau > summary, .tete-plus > summary { list-style:none; pointer-events:none; }
details.creneau > summary { display:inline; }
.tete-plus > summary { display:block; }
details.creneau > summary::-webkit-details-marker,
.tete-plus > summary::-webkit-details-marker { display:none; }
.tete-cue { display:none; }
.bac-pied-tel { display:none; }
/* Chrome range le contenu d'un pli dans un bloc a part (::details-content) : sans cette regle, le
   texte qui suit le resume du bandeau partirait sur une SECONDE ligne a l'ordinateur (45 px
   devenaient 64, mesure au navigateur a 1440 px). Seulement la ou le pli est toujours ouvert :
   `display:contents` annulerait le repli sur telephone. */
@media (min-width:621px) {
  details.creneau::details-content { display:contents; }
}
@media (max-width:620px) {
  /* (1) L'en-tete du CRM : « N essais a statuer » et la date de synchro sur UNE rangee ; le texte
     de synchro passe a la ligne a cote du bouton au lieu de le repousser sous lui. */
  .crm-head .sync { flex:1 1 140px; min-width:0; }
  /* (2) Le bandeau du creneau : sa premiere phrase et un geste pour lire la suite. Le resume est
     la cible (44 px), le marqueur est dessine, le bandeau garde tout son texte. */
  details.creneau { padding:0 14px; }
  details.creneau[open] { padding-bottom:12px; }
  details.creneau > summary { display:block; position:relative; box-sizing:border-box;
        min-height:44px; padding:12px 24px 12px 0; cursor:pointer; pointer-events:auto; }
  details.creneau > summary::after { content:"▾"; position:absolute; right:2px; top:12px; }
  details.creneau[open] > summary::after { content:"▴"; }
  /* (3) Les cinq onglets sur UNE rangee qui defile sur le cote (app.js ramene l'onglet ouvert en
     vue) ; le filtre par vendeur, son menu et son bouton, sans l'etiquette ecrite : le menu garde
     son nom (aria-label). */
  .onglets-barre { gap:0; }
  .onglets-activites { position:relative; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto;
        margin:0 0 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .onglets-activites::-webkit-scrollbar { display:none; }
  .onglets-activites a { flex:0 0 auto; white-space:nowrap; }
  .onglets-barre form.subtabs { margin-bottom:12px; }
  .onglets-barre form.subtabs .lbl-vendeur { display:none; }
  /* (4) La carte de tache compacte : le nom, le motif et l'echeance ; le numero et « Appel guide »
     COTE A COTE ; « Decroche », « Pas decroche » et « ··· » sur UNE rangee. Une grille de six
     colonnes ; le cadre des gestes disparait de l'arbre (display:contents) pour que ses boutons
     prennent leur place dans la grille. Le tableau des taches REALISEES n'a pas de gestes : il garde
     la carte empilee. Un pli ouvert prend toute la largeur, pour que sa note et ses boutons de
     resultat ne soient pas serres dans une colonne. */
  .file-appels tr:has(> td.gestes) { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)) minmax(44px, 1fr);
        gap:4px 6px; align-items:start; padding:8px 12px; margin-bottom:8px; }
  .file-appels tr:has(> td.gestes) > td { padding:0; min-width:0; }
  .file-appels td.nom, .file-appels td.motif { grid-column:1 / -1; }
  .file-appels td.numero { grid-column:span 3; }
  .file-appels td.gestes, .file-appels .gestes-ligne { display:contents; }
  .file-appels .gestes-ligne .guide { grid-column:span 3; flex:none; order:0; }
  .file-appels .menu-res.oui { grid-column:span 2; flex:none; }
  .file-appels .menu-res.non { grid-column:span 3; flex:none; }
  .file-appels .menu-plus { grid-column:span 1; flex:none; order:0; margin-left:0; }
  .file-appels tr:not(:has(td.numero a.tel)) .guide,
  .file-appels tr:not(:has(.guide)) td.numero { grid-column:1 / -1; }
  .file-appels .menu-res[open], .file-appels .menu-plus[open] { grid-column:1 / -1; }
  .file-appels .menu-plus .menu-corps { width:auto; margin-left:0; }
  /* (5) « Aujourd'hui » : l'encadre de tete sur sa premiere phrase (+ « detail ») ; un seul bac
     ouvert (app.js) ; l'explication d'un bac REPLIE sur deux lignes au plus — ouvert, le bac la
     montre en entier : rien n'est coupe sans qu'on puisse le lire ; dix cartes au plus par bac,
     et le pied du telephone, qui remplace celui de l'ordinateur, dit la coupe. */
  .jour-tete:has(> .tete-plus) { padding:4px 16px; }
  .tete-plus > summary { box-sizing:border-box; min-height:44px; padding:10px 0; cursor:pointer;
        pointer-events:auto; }
  .tete-plus[open] > summary { padding-bottom:2px; }
  .tete-plus .tete-detail { margin-top:2px; }
  .tete-plus .mesure:last-child { padding-bottom:10px; }
  .tete-cue { display:inline; font-size:13px; opacity:.85; white-space:nowrap; }
  .tete-cue::before { content:" "; }
  .tete-cue::after { content:" ▾"; }
  .tete-plus[open] .tete-cue::after { content:" ▴"; }
  .bac:not([open]) .pourquoi { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
        overflow:hidden; }
  .bac tbody tr:nth-child(n+11) { display:none; }
  .bac-reste-coupe { display:none; }
  .bac-pied-tel { display:block; padding:10px 18px; border-top:1px dashed var(--camel);
        background:#fdf8f2; font-size:13px; color:#5a5049; }
  .bac-pied-tel b { color:var(--bordeaux); }
  .bac-pied-tel a { display:flex; align-items:center; min-height:44px; }
}
/* --- lot 4 ter : fin --- */
@media print {
  header, .rail, .barre-basse, .no-print, a.skip { display:none !important; }
  body { background:#fff; }
  .deuxfa-wrap { border:none; margin:0; max-width:none; }
}

/* ============================================================================
   THÈME HERITAGE — l'apparence de la plateforme, et rien d'autre
   ============================================================================
   Ce fichier est AJOUTÉ EN DERNIER à la feuille de style servie (/assets/app.css) :
   templates.py le lit une fois au démarrage et le colle à la fin de BASE_CSS. Ses
   règles arrivent donc après toutes les autres et, à spécificité égale, l'emportent.
   Pour tout retirer d'un coup : supprimer ce fichier (le serveur démarre sans lui,
   la plateforme reprend son apparence d'avant).

   RÈGLE DU FICHIER : du CSS seulement. Aucun élément ajouté, renommé ou déplacé ;
   quand un effet demande un élément de plus, c'est ::before ou ::after. Aucune
   dépendance nouvelle (New Amsterdam est déjà auto-hébergée par fonts.css ; la
   CSP interdit de toute façon Google Fonts).

   PALETTE : bordeaux #5F2E40, sable #F9E5D4, rose #EF9393, or clair #BFA67B, or
   foncé #99876A, et les dérivés nommés par le brief (#3A1B27, #7A3D54, #6E3A4E,
   #8A4A62, #C9717A, #6B5A60, #7A6168, #1E0F15). Les quelques teintes claires de
   ce fichier (#F9E2DC, #EEE2D3…) sont des MÉLANGES de ces couleurs avec le fond.
   PLUS LES DEUX ACCENTS DU SITE, demandés par Gérome le 12/10/2026 (« utilise-les
   pour accentuer les contrastes ») : le rose vif #F168A2 (accent déclaré du site
   crossfitheritage.be, --ctb-accent) et le turquoise #41B6AB (la seule teinte
   turquoise que les styles du site déclarent ; à remplacer si la charte en nomme
   une autre). Le rose vif porte l'URGENT (barre du lien actif, compteurs, liserés
   d'alerte, focus) ; le turquoise porte le NOUVEAU et l'INFORMATION (pastilles,
   bandeau d'information, « jamais consulté »). Le § 214 mesure chaque teinte ;
   hors ces deux accents, rien n'est bleu, vert ni violet.

   CONTRASTE : chaque couple texte/fond est mesuré par le § 129 et le § 214 de
   tests/run_tests.py. Trois valeurs du brief rendaient moins de 4,5:1 et ont été
   corrigées au plus près, parce que le brief exige l'AA « partout » :
     - haut du dégradé de la barre latérale : rgba(122,61,84,.90) rendait 4,25 avec
       le sable ; rgba(98,48,74,.95) rend 6,59 ;
     - liens inactifs de la barre « sable à 70 % » : 3,57 ; à 85 % : 5,29 ;
     - texte sable sur or foncé (2,85) et sur rose foncé (2,81) : ces deux teintes
       portent le bordeaux nuit #1E0F15 (5,31 et 5,40).

   SECTIONS : 0 Jetons · 1 Fond · 2 Cartes · 3 Blocs sombres · 4 Vedette ·
   5 Barre latérale · 6 Mobile · 7 Boutons · 8 Pastilles et états · 9 Titres ·
   10 Formulaires · 11 Tableaux · 12 Divers · 13 Mouvement réduit · 14 Impression
   ============================================================================ */

/* ---- 0. JETONS ------------------------------------------------------------ */
:root {
  --bg: #F6EDE4;
  --surface: #FBF3EC;
  --card-top: #FFFCF8;
  --card-bot: #FBF3EC;
  --line: rgba(95, 46, 64, .10);
  --fg: #3A1B27;            /* texte principal, bordeaux très foncé */
  --muted: #7A6168;         /* texte secondaire : 5,12 sur --surface, 4,86 sur --bg, 4,60 sur sable */
  --bordeaux: #5F2E40; --sable: #F9E5D4; --rose: #EF9393; --or: #BFA67B; --or-fonce: #99876A;
  --dk-1: #7A3D54;          /* haut des dégradés sombres */
  --dk-2: #3A1B27;          /* bas des dégradés sombres */
  --sh-1: rgba(95, 46, 64, .06); --sh-2: rgba(95, 46, 64, .16); --sh-3: rgba(95, 46, 64, .30);
  --halo-a: rgba(239, 147, 147, .20);   /* halo rose */
  --halo-b: rgba(249, 229, 212, .90);   /* halo sable */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Les six teintes des pastilles, toujours dans cet ordre (brief, point 8). */
  --t1: #5F2E40; --t2: #41B6AB; --t3: #99876A; --t4: #BFA67B; --t5: #C9717A; --t6: #6B5A60;
  --nuit: #1E0F15;          /* texte sur t2, t3, t5 et le rose vif (le sable y rend moins de 3) */
  --rose-vif: #F168A2;      /* l'accent du site : fonds et liserés, jamais du texte sur fond clair (2,5) */
  --rose-vif-texte: #A83466;/* le même rose, assez foncé pour du texte : 5,42 sur --bg */
  --turquoise: #41B6AB;     /* l'accent turquoise : fond avec texte nuit (7,50) */
  --turquoise-clair: #D7F1EE;
  --turquoise-texte: #146B66; /* turquoise en texte sur fond clair : 5,46 sur --bg */
  --rouge-texte: #A83466;   /* un chiffre négatif, un retard : le rose vif en version texte */
  --r-card: 22px;           /* UN rayon pour toutes les cartes */
  --r-row: 14px;            /* les lignes-cartes (tâche, conversation, étape) */
  --r-champ: 11px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Les jetons de la charte d'origine suivent ceux du thème : tout ce qui lit
     var(--encre) ou var(--gris-doux) prend la couleur du thème sans être réécrit. */
  --encre: var(--fg);
  --gris-doux: var(--muted);
  --camel: var(--or);
  --f-corps: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- 1. FOND --------------------------------------------------------------- */
body {
  background: radial-gradient(60% 55% at 100% 0%, var(--halo-a), transparent 62%),
              radial-gradient(55% 60% at 0% 100%, var(--halo-b), transparent 62%),
              var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
/* La zone de travail du CRM posait un gris : les halos passent partout. */
.shell.crm { background: transparent; }

/* ---- 2. CARTES ET PANNEAUX ------------------------------------------------- */
.card, .kpi, .bac, .panier, .draft-box, .tdb-afaire, .tdb-tache, .tdb-cote .pli-nouveau,
.fiche2 .fiche-droite, .semaine .jour, .pl-side .bloc, .wa-col, .deja-envoye, .wa-unknown,
.login-wrap, .deuxfa-wrap, .modal-card, .file-defile, .liste-defile, .funnel .stage {
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px var(--sh-1),
              0 6px 14px -8px var(--sh-2), 0 24px 44px -28px var(--sh-3);
}
/* Les lignes qui sont des cartes en petit : même fond, rayon plus serré. */
.todo-ligne, .tache, .wa-row, .derape .d, .semaine .creneau, .pl-slot, .wa-msg.in,
.script-dire, .wa-fil, .perdu-form, .fo-pan-rdv, .fo-pan-act, .bloc-assiste,
.msg-preview, .apercu-corps, .pl-cell {
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border-color: var(--line);
  border-radius: var(--r-row);
}
.wa-fil, .perdu-form, .fo-pan-rdv, .fo-pan-act, .msg-preview, .apercu-corps, .pl-cell.vide,
.kpi.vide, .semaine.sept .jour.vide, .tache.dort, .wa-row.range, .bloc-assiste {
  background: var(--surface);
}
.bloc-assiste { border-left: 3px solid var(--or); }
.script-dire { border-left: 4px solid var(--bordeaux); border-radius: 0 var(--r-row) var(--r-row) 0; }
.deuxfa-etape { border-left: 3px solid var(--or); }
.tache.dort, .kpi.vide, .pl-cell.vide, .wa-unknown { border-style: dashed; }
/* Le pli ouvert d'une liste (filtres, nouveau prospect, nouveau RDV) : un panneau. */
.filtres-avances[open] > .filtres-corps, .pli-nouveau > .pli-corps, .pli-rdv > .pli-corps {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row);
  padding: 12px 14px;
}
.tdb-cote .pli-nouveau > .pli-corps { background: none; border: none; padding: 0; }
.fiche2 .fiche-gauche .card { padding: 14px 16px; }
/* Au survol, SEULEMENT ce qui se clique. */
a.kpi-lien .kpi, .tdb-tache, .todo-ligne, .tdb-compteur, .pl-chip, .wa-col .wa-row {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s var(--ease);
}
a.kpi-lien:hover .kpi, .tdb-tache:hover, .todo-ligne:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px var(--sh-1),
              0 10px 22px -10px var(--sh-2), 0 30px 54px -30px var(--sh-3);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
}
.tdb-compteur:hover, .pl-chip:hover { background: rgba(249, 229, 212, .55); }
.wa-col .wa-row { background: none; border-radius: 0; }
.wa-col .wa-row.ouverte { background: var(--sable); }
.bac > summary { background: linear-gradient(180deg, var(--sable), #F4DDCB); }
.bac > summary:hover { filter: none; background: linear-gradient(180deg, #F4DDCB, var(--sable)); }
.bac .compte { background: var(--card-top); border-color: var(--line); color: var(--bordeaux); }
.bac-reste, .bac-pied-tel { background: var(--surface); border-top: 1px dashed var(--or); color: var(--fg); }
.modal-card { border-top: none; padding-top: 26px;
  box-shadow: 0 1px 1px var(--sh-1), 0 24px 60px -24px rgba(58, 27, 39, .55); }
.modal-card.script-carte { padding-top: 0; }
.modal-card table { background: var(--card-top); }
.modal { background: rgba(58, 27, 39, .50); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.login-wrap, .deuxfa-wrap { border-top: 1px solid var(--line); }
.login-wrap::before, .deuxfa-wrap::before {
  content: ""; display: block; height: 4px; margin: -32px -32px 24px; border-radius: var(--r-card) var(--r-card) 0 0;
  background: linear-gradient(90deg, var(--dk-1), var(--rose), var(--or));
}

/* ---- 3. BLOCS SOMBRES MIS EN AVANT ---------------------------------------- */
header, .btn.primary, .subtabs a.on, .wa-tabs a.actif, .chrono-onglet.actif, .wa-msg.out,
.pl-h.today, .page-courante, .kpi .mark, .card.chiffre .ico, .funnel .bar, .wa-unread,
.subtabs a.urgent.on {
  background: radial-gradient(90% 90% at 100% 0%, rgba(249, 229, 212, .16), transparent 55%),
              linear-gradient(155deg, var(--dk-1), var(--dk-2));
  color: var(--sable);
  position: relative; overflow: hidden; isolation: isolate;
}
/* Le grain imprimé, par ::after : jamais un élément de plus. */
header::after, .btn.primary::after, .subtabs a.on::after, .wa-tabs a.actif::after, .wa-msg.out::after,
.pl-h.today::after, .kpi .mark::after, .card.chiffre .ico::after, .jour-tete::after,
.subtabs a.urgent.on::after, .chrono-onglet.actif::after {
  content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .10;
  mix-blend-mode: overlay; pointer-events: none; border-radius: inherit;
}
/* Le lien d'evitement garde sa position ABSOLUE (hors du flux) : en position relative il
   prendrait 19 px en haut de chaque page. Seules ses couleurs changent. */
a.skip { background: linear-gradient(155deg, var(--dk-1), var(--dk-2)); color: var(--sable); }
header { border-bottom: 1px solid rgba(249, 229, 212, .18); padding: 12px 24px;
  box-shadow: 0 2px 4px rgba(58, 27, 39, .18), 0 18px 40px -28px rgba(58, 27, 39, .6); }
header .brand { color: var(--sable); text-transform: uppercase; letter-spacing: 1.2px; font-size: 22px; }
.kpi .mark, .card.chiffre .ico { color: var(--sable); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(249, 229, 212, .18), 0 8px 18px -10px rgba(58, 27, 39, .6); }
.card.chiffre .ico.camel, .card.chiffre .ico.vert { background: linear-gradient(155deg, var(--or), var(--or-fonce)); color: var(--nuit); }
.card.chiffre .ico.rouge { background: linear-gradient(155deg, var(--rose-vif), var(--t5)); color: var(--nuit); }
.wa-msg.out .h { color: var(--sable); opacity: 1; }   /* a .78, 3,29 dans le coin clair de la bulle */
.wa-msg.out a { color: var(--sable); }
.funnel .bar { border-radius: 8px; }

/* ---- 4. L'ÉLÉMENT LE PLUS IMPORTANT MAINTENANT (vedette) -------------------- */
/* Le bandeau du haut d'« Aujourd'hui » : UNE phrase, celle qui dit ce qu'il y a à
   faire. Dégradé vivant très lent, lueur douce. Le point le plus clair du dégradé
   (#8A4A62) rend 5,31 avec le sable. */
.jour-tete {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sable); border-radius: var(--r-card);
  background: linear-gradient(120deg, #3A1B27, #6E3A4E, #8A4A62, #6E3A4E, #3A1B27);
  background-size: 320% 320%;
  animation: heritage-vedette 12s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(249, 229, 212, .2), 0 0 28px -4px rgba(241, 104, 162, .55),
              0 22px 40px -22px rgba(58, 27, 39, .8);
}
.jour-tete b { color: #fff; }
.jour-tete a { color: var(--sable); }
@keyframes heritage-vedette {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- 5. BARRE LATÉRALE : panneau flottant en verre dépoli ------------------- */
/* Les règles du CRM (.shell.crm .rail …) ont deux classes de spécificité : les
   nôtres en ont autant (.shell .rail …) et viennent après, donc elles l'emportent
   pour TOUS les modules, pas seulement le CRM. */
.shell .rail {
  margin: 14px 0 14px 14px; top: 14px; max-height: calc(100vh - 28px);
  border: 1px solid rgba(249, 229, 212, .14);
  border-radius: 26px; isolation: isolate;
  background: radial-gradient(120% 60% at 0% 0%, rgba(249, 229, 212, .05), transparent 60%),
              linear-gradient(180deg, rgba(98, 48, 74, .95), rgba(58, 27, 39, .96));
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(249, 229, 212, .16), 0 2px 4px rgba(58, 27, 39, .18),
              0 28px 56px -26px rgba(58, 27, 39, .7);
  scrollbar-width: thin; scrollbar-color: rgba(249, 229, 212, .3) transparent;
}
.shell .rail-corps { position: relative; min-height: calc(100vh - 65px - 28px); padding: 16px 14px; }
.shell .rail-corps::after {
  content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .08;
  mix-blend-mode: overlay; pointer-events: none; border-radius: inherit;
}
.shell .rail a, .shell .rail summary, .shell .rail form.logout button,
.shell .rail .rail-marque, .shell .rail .rail-role, .shell .rail .rail-module, .shell .rail .rail-nom,
.shell .rail > summary.rail-pli, .shell nav.sidenav a {
  color: var(--sable);
}
/* Liens inactifs en retrait (85 % : 5,29 au point le plus clair du panneau). */
.shell nav.sidenav a, .shell nav.modules a, .shell .rail-compte a, .shell .rail-compte form.logout button,
.shell .rail .rail-marque, .shell .rail .rail-role {
  opacity: .85; transition: background-color .25s var(--ease), opacity .25s var(--ease);
}
.shell nav.sidenav a, .shell nav.modules a, .shell .rail-compte a, .shell .rail-compte form.logout button {
  position: relative; border-radius: 999px; padding: 9px 14px;
}
.shell .rail-modules > summary, .shell .rail-compte > summary { border-radius: 16px; transition: background-color .25s var(--ease); }
.shell .rail a:hover, .shell .rail summary:hover, .shell .rail form.logout button:hover,
.shell nav.sidenav a:hover, .shell nav.modules a:hover, .shell .rail-compte a:hover,
.shell .rail-modules > summary:hover, .shell .rail-compte > summary:hover {
  background: rgba(249, 229, 212, .06); color: var(--sable); opacity: 1;
}
/* Le lien actif : pilule, et une barre rose de 4 px collée au bord gauche, avec sa lueur. */
.shell nav.sidenav a.on, .shell nav.modules a.active, .shell .rail-compte a.active, .shell .rail a.active {
  background: rgba(249, 229, 212, .12); color: var(--sable); opacity: 1; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(249, 229, 212, .14);
}
.shell nav.sidenav a.on::before, .shell nav.modules a.active::before, .shell .rail-compte a.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 60%; border-radius: 0 4px 4px 0; background: var(--rose-vif);
  box-shadow: 0 0 14px 2px rgba(241, 104, 162, .55);
}
/* Une entrée urgente : rose vif translucide, texte sable (5,22 et 4,77 au point le plus clair). */
.shell nav.sidenav a.urgent { background: rgba(241, 104, 162, .22); color: var(--sable); opacity: 1; }
.shell nav.sidenav a.urgent.on { background: rgba(241, 104, 162, .30); color: var(--sable); }
.shell .rail .nb { background: rgba(249, 229, 212, .92); color: var(--bordeaux); }
.shell .rail a.urgent .nb { background: var(--rose-vif); color: var(--nuit); }
.shell .rail .rail-compte { border-top: 1px solid rgba(249, 229, 212, .14); }
.shell .rail .rail-module, .shell .rail .rail-nom { opacity: 1; }
.shell .rail .rail-modules > summary::after, .shell .rail .rail-compte > summary::after { opacity: .7; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shell .rail { background: linear-gradient(180deg, #6E3A4E, #3A1B27); }
}

/* ---- 6. BARRE DE NAVIGATION MOBILE ----------------------------------------- */
@media (max-width: 620px) {
  .shell .rail {
    position: static; max-height: none; margin: 10px 12px 12px; border-radius: 18px;
    border-bottom: 1px solid rgba(249, 229, 212, .14);
  }
  .shell .rail-corps { min-height: 0; padding: 4px 12px 14px; }
  .shell .rail > summary.rail-pli { padding: 0 16px; color: var(--sable); }
  /* Même verre que la barre latérale, plus opaque (.90 / .92) : le sable y rend 5,64. */
  .shell + .barre-basse {
    background: linear-gradient(180deg, rgba(110, 58, 78, .90), rgba(58, 27, 39, .92));
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(249, 229, 212, .14);
    box-shadow: 0 -8px 28px -18px rgba(58, 27, 39, .7);
  }
  .barre-basse a { color: var(--sable); opacity: .85; }
  .barre-basse a.on { color: var(--sable); opacity: 1; background: rgba(249, 229, 212, .10);
    box-shadow: 0 0 18px -4px rgba(241, 104, 162, .5); }
  .barre-basse a .nb { background: rgba(249, 229, 212, .92); color: var(--bordeaux); }
  .barre-basse a.urgent .nb { background: var(--rose-vif); color: var(--nuit); }
  .login-wrap::before, .deuxfa-wrap::before { margin: -22px -18px 18px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shell + .barre-basse { background: linear-gradient(180deg, #6E3A4E, #3A1B27); }
}

/* ---- 7. BOUTONS ------------------------------------------------------------ */
.btn { border-radius: 999px; font-family: inherit;
  transition: transform .15s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
.btn.primary {
  color: var(--sable); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(249, 229, 212, .18), 0 8px 18px -10px rgba(58, 27, 39, .6);
}
.btn.primary:hover { background: radial-gradient(90% 90% at 100% 0%, rgba(249, 229, 212, .22), transparent 55%),
  linear-gradient(155deg, #86455E, var(--dk-2)); color: var(--sable);
  box-shadow: inset 0 1px 0 rgba(249, 229, 212, .18), 0 12px 24px -12px rgba(58, 27, 39, .7); }
/* Secondaire : fond carte, bordure fine, texte principal. Les plis-boutons des listes
   et les onglets-pastilles suivent le même dessin. */
.btn.ghost, .filtres-avances > summary, .pli-nouveau > summary, .pli-rdv > summary, .menu-plus > summary,
.wa-tabs a, .subtabs a, .chrono-onglet, .semaine-nav .btn {
  background: var(--card-top); border: 1px solid var(--line); color: var(--fg); border-radius: 999px;
  box-shadow: 0 1px 1px var(--sh-1);
}
.btn.ghost:hover, .filtres-avances > summary:hover, .pli-nouveau > summary:hover, .pli-rdv > summary:hover,
.wa-tabs a:hover, .subtabs a:hover, .menu-plus > summary:hover { background: var(--sable); color: var(--bordeaux); }
.subtabs a.on, .subtabs a.on:hover, .wa-tabs a.actif, .wa-tabs a.actif:hover, .chrono-onglet.actif,
.subtabs a.urgent.on, .subtabs a.urgent.on:hover { color: var(--sable); border-color: transparent;
  background: radial-gradient(90% 90% at 100% 0%, rgba(249, 229, 212, .16), transparent 55%),
              linear-gradient(155deg, var(--dk-1), var(--dk-2)); }
.subtabs a.urgent, .subtabs a.urgent:hover { background: var(--rose-vif); color: var(--nuit); border-color: transparent; }
.btn.danger { background: rgba(241, 104, 162, .18); color: var(--nuit); border-color: var(--rose-vif); }
.btn.danger:hover { background: var(--t5); color: var(--nuit); border-color: var(--t5); }
.btn.count { background: linear-gradient(155deg, var(--or), var(--or-fonce)); color: var(--nuit); border-color: transparent; }
.btn.count:hover { background: linear-gradient(155deg, var(--or-fonce), var(--or)); }
.btn:active, .filtres-avances > summary:active, .pli-nouveau > summary:active, .pli-rdv > summary:active { transform: scale(.97); }
.btn:disabled { opacity: .5; transform: none; }
.semaine-nav .semaine-ici, .semaine-nav .semaine-ici:hover { background: var(--sable); color: var(--bordeaux); }
.fo-onglet { color: var(--fg); border-radius: 999px; }
#fo-histo:checked ~ .fo-barre label[for="fo-histo"], #fo-wa:checked ~ .fo-barre label[for="fo-wa"],
#fo-rdv:checked ~ .fo-barre label[for="fo-rdv"], #fo-act:checked ~ .fo-barre label[for="fo-act"] {
  background: var(--sable); color: var(--bordeaux);
}
.tdb-cote .pli-nouveau > summary, .fiche-pli > summary h2 { color: var(--bordeaux); }
.pagination .btn, .page-courante, .page-morte, .menu-res > summary { border-radius: 999px; }
.menu-plus > summary { color: var(--fg); }
/* L'anneau de focus suit l'arrondi en pilule (le § 134 le dessinait à 9 px). */
.btn:focus-visible, nav.modules a:focus-visible, nav.sidenav a:focus-visible, .rail a:focus-visible,
.subtabs a:focus-visible { border-radius: 999px; }

/* ---- 8. PASTILLES, BADGES, ÉTATS ------------------------------------------- */
/* Six teintes, dans l'ordre : t1 bordeaux, t2 turquoise (accent du site), t3 or foncé,
   t4 or clair, t5 rose foncé, t6 gris prune. Texte sable sur t1 / t6, bordeaux nuit sur
   t2 / t3 / t5, bordeaux foncé sur t4. Le SENS des états est conservé :
     t1 = en cours (essai à venir, RDV prévu) et rôles principaux,
     t2 = nouveau, information (turquoise),
     t3 = en attente d'une réponse ou d'une action,
     t4 = fait, réussi, payé, devenu membre,
     t5 = en défaut, perdu, impayé,
     t6 = éteint, sans suite, inconnu. */
.pill, .badge, .wa-flag, .card.chiffre .badge { border-radius: 999px; font-weight: 600; }
/* t1 */
.pill.rdv_essai, .pill.prevu, .pill.gerant, .pill.flexi { background: var(--t1); color: var(--sable); }
/* t2 */
.pill.nouveau, .pill.pending, .pill.independant, .pill.emitted,
.wa-flag.info { background: var(--t2); color: var(--nuit); }
/* t3 */
.pill.to_validate, .pill.open, .pill.a_recevoir, .pill.en_contact, .pill.non_frequentant,
.pill.a_statuer, .pill.niv-orange, .card.chiffre .badge.moyen, .wa-flag.doute { background: var(--t3); color: var(--nuit); }
/* t4 */
.pill.paid, .pill.matched, .pill.assigned, .pill.recue, .pill.essai_realise, .pill.venu,
.pill.converti, .pill.integration, .pill.inscrit,
.pill.niv-vert, .card.chiffre .badge.ok, .menu-res.oui > summary { background: var(--t4); color: var(--fg); }
/* t5 */
.pill.unpaid, .pill.failed, .pill.unmatched, .pill.ecart, .pill.perdu, .pill.pas_venu,
.pill.rdv_non_honore, .pill.niv-rouge, .card.chiffre .badge.bas, .wa-flag, .menu-res.non > summary {
  background: var(--t5); color: var(--nuit);
}
/* t6 */
.pill.refused, .pill.ne_plus_contacter, .pill.annule, .pill.rdv_annule, .pill.niv-inconnu, .pill.froid,
.pill.ancien_membre { background: var(--t6); color: var(--sable); }
.ini, .nb { background: var(--sable); color: var(--bordeaux); }
a.urgent .nb, .onglets-activites a.urgent .nb { background: var(--rose-vif); color: var(--nuit); }
.onglets-activites a .nb { background: var(--card-top); }
/* Les segments du scénario et les créneaux du planning : mêmes rôles, mêmes teintes. */
.scen-seg { background: #EADBD0; }
.scen-seg.faite { background: var(--t4); }
.scen-seg.prochaine { background: var(--t3); }
.scen-seg.arret { background: #D9C8BB; }
.scen-seg.nonjouee { background: repeating-linear-gradient(45deg, #E8B4B4 0 4px, #F6DDD9 4px 8px); }
.pl-slot .co { color: var(--fg); }
.pl-slot.open { background: #F7D6D6; border-left-color: var(--rose-vif); }
.pl-slot.open .co { color: var(--nuit); }
.pl-slot.pending { background: #EEE4D4; border-left-color: var(--t3); }
.pl-slot.pending .co { color: var(--nuit); }
.pl-slot.conflit { box-shadow: 0 0 0 2px var(--t5) inset; }
.pl-h { background: var(--sable); color: var(--fg); }
.pl-h.today { color: var(--sable); }
.pl-cell.survol { outline: 2px dashed var(--or); }
.bench.ok { color: var(--bordeaux); }
.bench.ko { color: var(--rouge-texte); font-weight: 700; }
.card .val.neg, .todo-ligne.rouge .n, .derape .d .ec, .tdb-tache.retard .tdb-nb,
.wa-row.rouge .attente, .zone-danger > summary h2 { color: var(--rouge-texte); }
.todo-ligne { border-left: 5px solid var(--or); color: var(--fg); }
.todo-ligne.rouge { border-left-color: var(--rose-vif); background: linear-gradient(180deg, #FCE7E4, #F9E2DC); }
.derape .d { border-color: rgba(201, 113, 122, .45); border-left: 5px solid var(--rose-vif); background: linear-gradient(180deg, #FCE7E4, #F9E2DC); }
.derape .d b { color: var(--fg); }
tr.rouge td { background: #FCEBE8; }
.wa-row { border-left: 5px solid var(--line); color: var(--fg); }
.wa-row.rouge { border-left-color: var(--rose-vif); background: linear-gradient(180deg, #FCE7E4, #F9E2DC); }
.wa-row.or { border-left-color: var(--or); }
.wa-row.or .attente, .wa-row .attente, .wa-row .last { color: var(--fg); }
.wa-row .who a { color: var(--bordeaux); }
.wa-msg.echec { background: #F7D6D6; color: var(--nuit); border: 1px solid var(--rose-vif); }
.wa-msg.echec .h { color: var(--nuit); }
.wa-msg.attente { background: #F3E6D2; color: var(--nuit); border: 1px dashed var(--or-fonce); }
.wa-msg.attente .h { color: var(--nuit); }
.semaine .jour.ko { border-color: rgba(201, 113, 122, .55); background: linear-gradient(180deg, #FCE7E4, #F9E2DC); }
.semaine .creneau { background: var(--sable); border-left: 3px solid var(--or); }
.semaine .creneau.ko { background: #F7D6D6; border-left-color: var(--rose-vif); }
.semaine.sept .jour.aujourdhui { border-color: var(--or); box-shadow: inset 0 3px 0 var(--or); }
.kpi.vide .val, .kpi.vide .mark { color: var(--muted); }
.kpi.vide .mark { background: var(--surface); box-shadow: none; }
/* Le point et le nom « jamais consulté » : turquoise foncé au lieu de violet (5,75 sur --surface). */
.point-nonlu { color: var(--turquoise-texte); }
.nonlu-nom a { color: var(--turquoise-texte); }
.lien-nonlu, a.actif, .tdb-portes a, .tdb-titre a, .wa-list + p a, .wa-filtres a, .chrono-plus summary,
.gabarits-prets summary, .bloc-assiste summary, .tri-col a { color: var(--bordeaux); }
.via-fusion, .perime-motif, .file-appels .origine, .funnel .stage .rate { color: var(--muted); }
/* Bandeaux et message en place : teinte claire, texte bordeaux foncé, liseré de la teinte. */
.banner, .message { color: var(--fg); border-radius: var(--r-row); border: 1px solid var(--line);
  border-left: 5px solid var(--or); background: #EEE2D3; }
.banner.warn { background: #EEE2D3; border-left-color: var(--or-fonce); color: var(--fg); }
.banner.ok, .message.ok { background: #EEE2D3; border-left-color: var(--or); color: var(--fg); }
.banner.info { background: var(--turquoise-clair); border-left-color: var(--turquoise); color: var(--fg); }
.banner.grave, .message.refus { background: #F9E2DC; border-left-color: var(--t5); color: var(--fg); }
.banner a, .message a { color: var(--bordeaux); }
.banner .muted { color: var(--fg); opacity: .85; }
.message { box-shadow: 0 1px 1px var(--sh-1), 0 18px 40px -20px rgba(58, 27, 39, .6); }
.tri-actif { background: var(--surface); }
.chrono { border-left: 2px solid var(--line); }
.chrono-ico { background: var(--card-top); border-color: var(--line); }
.chrono-li { border-bottom: 1px solid var(--line); }
.secret-clair, .codes-secours li { background: var(--sable); color: var(--fg); }
.arrivees { border-bottom: 1px solid var(--line); }
.arrivees .b { background: var(--or); }
.arrivees .b:hover { background: var(--bordeaux); }
.script-pied, .script-actions, .script-pied.script-resultat { border-color: var(--line); }
.script-messagerie { border: 2px dashed var(--or); border-radius: var(--r-row); }
.fiche-pli { border-top: 1px solid var(--line); }
.fo-barre { border-bottom: 1px solid var(--line); }
.menu-rang { border-top: 1px dashed var(--line); }
.scen-etape, .pl-side .abs, .pl-side .att { border-bottom-color: var(--line); }
.tdb-compteur { border-bottom: 1px solid var(--line); color: var(--fg); }
.tdb-compteur .tdb-nb, .tdb-tache .tdb-nb { color: var(--bordeaux); }
.day-h, .depuis, .login-wrap label, .deuxfa-wrap label, .funnel .stage .lbl, .recopie th,
.campagne-bilan-t th, .wa-tabs a, .tdb-tache { color: var(--fg); }

/* ---- 9. TITRES ------------------------------------------------------------- */
h1 { text-transform: uppercase; letter-spacing: 1px; color: var(--bordeaux); }
h2 { color: var(--bordeaux); letter-spacing: .6px; }
/* Les titres de carte : texte courant, 15 px, graisse 600, sans petites majuscules espacées. */
.card .lbl, .kpi .lbl, .bac summary h2, .panier h3, .pl-side h3, .semaine .jour h3, .rentab-marche h3,
.script-bloc h3, .deja-envoye h3, .apercu-msg h3, .tdb-afaire h2, .fo-pan h2, .funnel .stage .lbl,
.derape .d b {
  font-family: var(--f-corps); font-size: 15px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--fg);
}
.kpi .lbl { margin-top: 4px; }
.card .val, .kpi .val { color: var(--bordeaux); }
.tdb .card.chiffre .lbl { font-size: 14px; }
.rail-marque { letter-spacing: 1.2px; }

/* ---- 10. CHAMPS DE FORMULAIRE ---------------------------------------------- */
/* Aucun attribut touché : seulement le dessin. 16 px au téléphone (règle du § 134,
   reprise ci-dessous) pour qu'iOS ne zoome pas. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]),
select, textarea, .note-appel, .login-wrap input, .deuxfa-wrap input, .msg-edit textarea,
.wa-compose textarea, .form-campagne textarea, .form-campagne input[type=number], .site-adresse input,
input[type=date], input[type=text] {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-champ);
  color: var(--fg); font-family: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: rgba(95, 46, 64, .22); }
.wa-compose textarea:disabled, input:disabled, select:disabled, textarea:disabled { background: var(--surface); color: var(--muted); }
/* Le focus : 2 px de rose, et un halo bordeaux autour pour qu'il se voie sur les fonds
   clairs comme sur les sombres (l'anneau à deux épaisseurs du § 134 reste la règle
   pour tout le reste). */
input:focus-visible, select:focus-visible, textarea:focus-visible, .note-appel:focus-visible {
  outline: 2px solid var(--rose-vif); outline-offset: 2px; border-radius: var(--r-champ);
  box-shadow: 0 0 0 5px rgba(95, 46, 64, .28);
}
input[type=checkbox], input[type=radio] { accent-color: var(--bordeaux); }
.form-campagne fieldset, .form-rentab fieldset { border: 1px solid var(--line); border-radius: var(--r-row); background: var(--surface); }
.form-campagne legend, .form-rentab legend { color: var(--fg); }
@media (max-width: 620px) {
  input, select, textarea { font-size: 16px; }
}

/* ---- 11. TABLEAUX ---------------------------------------------------------- */
table { background: var(--card-top); border: 1px solid var(--line); border-radius: 16px; }
th { background: var(--sable); color: var(--fg); }
th, td { border-bottom: 1px solid var(--line); }
.bac table, .file-defile > table, .modal-card table { border: none; border-radius: 0; }
.bac tr, .comptes tr, .modeles tr, .liste-prospects tr { border-bottom-color: var(--line); }
@media (max-width: 620px) {
  .file-appels tr, .bac tr { background: var(--card-top); border: 1px solid var(--line); }
  .file-appels tr { border-radius: var(--r-row); }
}

/* ---- 12. DIVERS ------------------------------------------------------------ */
a { color: var(--bordeaux); }
.muted { color: var(--muted); }
.sous-titre, .rentab-note, .pl-legende, .crm-head .sync, .wa-row .meta, .wa-msg .h,
.chrono-src, .tache-ech, .scen-jour, .chrono-ts { color: var(--muted); }
.tablewrap { border-radius: 16px; }
a.skip { border-radius: 0 0 14px 0; }
::selection { background: rgba(241, 104, 162, .35); color: var(--nuit); }

/* ---- 13. MOUVEMENT RÉDUIT -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jour-tete { animation: none; background: linear-gradient(155deg, var(--dk-1), var(--dk-2)); }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a.kpi-lien:hover .kpi, .tdb-tache:hover, .todo-ligne:hover, .btn:active { transform: none; }
}

/* ---- 14. IMPRESSION -------------------------------------------------------- */
@media print {
  body { background: #fff; }
  .card, .kpi, .bac, .panier, .modal-card { box-shadow: none; background: #fff; }
  .jour-tete { animation: none; background: var(--bordeaux); }
}