: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; }
/* (lot 75) au telephone, le menu « resultat » ne deborde plus de la carte de la tache (2 px mesures). */
.tache-actes label { max-width:100%; display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; }
.tache-actes select, .tache-actes input { max-width:100%; min-width:0; }
.tache > details, .tache-pli { min-width:0; max-width:100%; }
/* « 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; }
/* (lot 16, vague 0, point 3) La coquille enveloppe chaque tableau nu dans ce cadre : il ne s'elargit jamais au-dela
   de la page, et c'est lui qui defile au doigt. */
.tablewrap { max-width:100%; -webkit-overflow-scrolling:touch; }
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; }
/* Lot 17, decision du 16/10 (14 h 30) : une bulle d'etat (« pas encore confirme ») reste DANS son
   creneau, bureau et telephone : elle passe a la ligne au lieu de deborder. */
.semaine .creneau .pill { display:inline-block; max-width:100%; white-space:normal; overflow-wrap:anywhere;
  line-height:1.25; vertical-align:baseline; box-sizing:border-box; }
/* 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; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tag { display:inline-block; padding:1px 7px; border-radius:999px; background:var(--sable);
        font-size:11.5px; }
.tag.ko { background:#fbe3dd; color:#a3341f; }
.bloc-plan > summary { cursor:pointer; padding:8px 0; font-size:15px; }
.bloc-plan { margin-bottom:18px; }
.plan-vendeur { margin:14px 0 22px; }
.plan-vendeur h3 { margin:0 0 8px; }
.carte-appel { display:flex; flex-direction:column; gap:3px; background:var(--sable);
               border-left:3px solid var(--camel); border-radius:8px; padding:8px 10px;
               margin-bottom:7px; font-size:13px; min-width:0; overflow-wrap:anywhere; }
.carte-appel > a { font-weight:600; }
.carte-appel .muted { display:block; font-size:11.5px; }
.carte-appel select { max-width:100%; min-width:0; }
.retard-liste .carte-appel { margin-bottom:0; }
.carte-appel[draggable="true"] { cursor:grab; }
.carte-appel.glisse { opacity:.5; }
.jour.depot { outline:2px dashed var(--camel); }
.charge { margin:0 0 8px; font-size:12px; color:var(--gris-doux); }
.charge.forte { font-weight:700; color:#a3341f; }
.retard-liste { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap:8px; }
.carte-appel .essai-actions select { flex:1 1 100px; }
.bloc-retard { margin:0 0 12px; }
.synthese-appels { margin:8px 0 14px; max-width:720px; }
.plan-capacite { margin-top:14px; }
.essai-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.essai-actions .btn { padding:3px 8px; font-size:11.5px; }
/* (lot 16, vague 0, point 3) Plus d'`overflow:hidden` ici : il rognait les colonnes d'un tableau plus
   large que l'ecran, sans barre pour les atteindre. Sous 760 px le theme le fait defiler dans son cadre. */
table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px;
         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; }
/* (lot 16, vague 4) Les cartes de KPI du tableau de pilotage sont dessinees par _carte_kpi
   (`.card.chiffre`, plus haut) ; l'ancienne `.kpi` n'avait plus d'emploi et a ete retiree.
   La carte cliquable garde son lien sans soulignement et sa bordure au survol. */
a.kpi-lien { text-decoration:none; display:block; }
a.kpi-lien:hover > .card.chiffre { 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; }
/* (lot 32) « Responsable : X » sous le detail d'une ligne de « A traiter ». */
.a-traiter-resp { display:block; font-size:13px; color:var(--bordeaux); margin-top:2px; }
.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; }
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 li span { flex:1; }
.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; }
/* (lot 33) Pilotage, vue de la semaine : une case = le chiffre, sa couleur ET un mot. Le tableau defile dans son
   cadre sur telephone ; la page, elle, ne defile jamais de cote. */
table.pil { border-collapse:collapse; font-size:13px; min-width:980px; }
table.pil th, table.pil td { padding:6px 6px; border-bottom:1px solid #eaddd3; text-align:center; }
table.pil th.pil-titre { text-align:left; min-width:190px; position:sticky; left:0; background:#fff; z-index:1; }
.pil-c { white-space:nowrap; font-weight:600; }
.pil-c .pil-mot { display:block; font-weight:400; font-size:10.5px; }
.pil-c.vert { background:#e3f3e6; color:#1f7a3d; }
.pil-c.orange { background:#fff2d6; color:#8a6300; }
.pil-c.rouge { background:#fde9e4; color:#a3341f; }
.pil-c.gris { background:#f3f1ef; color:#6d6560; font-weight:400; }
.pil-c.en-cours { border-left:2px dashed #c9bdb3; }
.pil-meta { font-size:12px; color:#5b4636; text-align:left !important; min-width:90px; }
.pil-note { font-size:11.5px; font-weight:400; }
.pil-saisie { margin-bottom:8px; }
table.pil-in { border-collapse:collapse; }
table.pil-in td { padding:2px 4px; border:none; vertical-align:bottom; }
.pil-champ span { display:block; font-size:11px; color:#6d6560; margin-bottom:2px; }
/* (lot 33) palier telephone propre au tableau du pilotage, ecrit AVEC une espace apres « max-width: » : le § 134
   cherche la premiere occurrence de l'ecriture sans espace, qui doit rester celle de .grid2. */
@media (max-width: 620px) {
  table.pil th.pil-titre { min-width:118px; font-size:12px; }
  .pil-note { font-size:10.5px; }
}
/* (lot 34) Pilotage, vue du mois, et la bande « Le cap » du tableau de pilotage. Couleurs : celles du lot 33 (vert,
   orange, rouge, gris), toujours doublees d'un mot ; les graphes a puce et la frise sont du SVG en ligne. */
.pil-onglets { margin:-4px 0 12px; }
.pilm-scen { display:block; font-size:10px; font-weight:400; opacity:.8; }
/* (lot 63) la saisie de l'encaissement, devenue un controle du calcul Sportigo : un mot sous le chiffre. */
.pil-ctl { display:block; font-size:10px; font-weight:600; margin-top:2px; border-radius:6px; padding:0 4px; }
.pil-ctl.orange { background:#fff2d6; color:#8a6300; border:1px solid #f0d99a; }
.pil-ctl.vert { color:#1f7a3d; font-weight:400; }
.pil-src { display:block; font-size:10px; font-weight:400; }
.pilm-lib { display:block; font-size:10.5px; font-weight:400; }
table.pilm-paliers { min-width:760px; }
.pilm-verdict { min-width:120px; }
.pilm-etat { font-weight:600; }
.pilm-etat.en_retard { color:#a3341f; }
.pilm-etat.fait { color:#1f7a3d; }
.pilm-etat.a_l_heure { color:#8a6300; }
details.cap { background:#fff; border:1px solid #eaddd3; border-radius:12px; padding:10px 16px 14px; margin:14px 0 18px; }
details.cap > summary { display:flex; align-items:center; gap:14px; flex-wrap:wrap; cursor:pointer; list-style:none; }
details.cap > summary h2 { margin:6px 0; }
.cap-urgences { font-size:13.5px; color:#a3341f; }
.cap-urgences.ok { color:#1f7a3d; }
.cap-intro { margin:4px 0 10px; }
.cap-voyants { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.cap-voyant { display:flex; gap:10px; border:1px solid #eaddd3; border-radius:10px; padding:10px 12px; }
.cap-voyant p { margin:2px 0; font-size:13.5px; }
.cap-pastille { flex:0 0 14px; height:14px; border-radius:50%; margin-top:3px; background:#c9bdb3; }
.cap-voyant.vert .cap-pastille { background:#1f7a3d; }
.cap-voyant.orange .cap-pastille { background:#d39b12; }
.cap-voyant.rouge .cap-pastille { background:#a3341f; }
.cap-voyant.rouge { background:#fdf4f1; }
.cap-mot { font-size:11.5px; padding:1px 6px; border-radius:8px; background:#f3f1ef; color:#6d6560; }
.cap-mot.vert { background:#e3f3e6; color:#1f7a3d; }
.cap-mot.orange { background:#fff2d6; color:#8a6300; }
.cap-mot.rouge { background:#fde9e4; color:#a3341f; }
.cap-cartes { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:12px; }
a.cap-carte { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--encre);
        border:1px solid #eaddd3; border-top:4px solid #c9bdb3; border-radius:10px; padding:10px 12px; }
a.cap-carte.vert { border-top-color:#1f7a3d; }
a.cap-carte.orange { border-top-color:#d39b12; }
a.cap-carte.rouge { border-top-color:#a3341f; }
a.cap-carte:hover { border-color:var(--camel); }
.cap-titre { display:flex; justify-content:space-between; gap:6px; font-size:13px; font-weight:600; }
.cap-chiffre { font-family:var(--f-titre); font-size:26px; color:var(--bordeaux); }
.cap-but, .cap-ecart { font-size:12px; }
.cap-bas { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 6px;
        font-size:11.5px; }
.cap-bas .muted { white-space:nowrap; font-size:11.5px; }
.cap-com { margin:2px 0 0; font-size:12px; font-style:italic; }
.cap-z-r { fill:#f6d3ca; }
.cap-z-o { fill:#fbe7b5; }
.cap-z-v { fill:#cfe9d5; }
.cap-z-g { fill:#ece8e4; }
.cap-barre { fill:#3a2a20; }
.cap-cible { fill:#7a1f2b; }
.cap-ligne { fill:none; stroke:#7a1f2b; stroke-width:1.6; }
.cap-point { fill:#7a1f2b; }
.cap-frise { border:1px solid #eaddd3; border-radius:10px; padding:6px 8px; }
.cap-axe, .cap-grad { stroke:#b9a99b; stroke-width:1.5; }
.cap-mois { font-size:11px; fill:#6d6560; }
.cap-auj { stroke:#7a1f2b; stroke-width:2; stroke-dasharray:4 3; }
.cap-auj-t { font-size:11px; fill:#7a1f2b; }
.cap-j { stroke:#fff; stroke-width:1.5; fill:#b9a99b; }
.cap-j.fait, .cap-j-pt.fait { fill:#1f7a3d; background:#1f7a3d; }
.cap-j.a_l_heure, .cap-j-pt.a_l_heure { fill:#d39b12; background:#d39b12; }
.cap-j.en_retard, .cap-j-pt.en_retard { fill:#a3341f; background:#a3341f; }
.cap-j.a_venir, .cap-j-pt.a_venir { fill:#b9a99b; background:#b9a99b; }
.cap-j.sans_mesure, .cap-j-pt.sans_mesure { fill:#ffffff; stroke:#6d6560; background:#ffffff; }
.cap-legende { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; padding:2px 6px; }
.cap-j-pt { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; border:1px solid #6d6560; }
.cap-compte { margin:8px 0 4px; }
.cap-prochains ul, .cap-liste ul { margin:4px 0; padding-left:18px; font-size:13.5px; }
.cap-prochains h3, .cap-liste h3 { font-size:14px; margin:6px 0 2px; }
.cap-liste { display:none; }
@media (max-width: 900px) {
  .cap-cartes { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .cap-voyants, .cap-cartes { grid-template-columns:1fr; }
  .cap-frise, .cap-prochains { display:none; }
  .cap-liste { display:block; }
}
/* (lot 62) Accueil › Cap : bandeau, cartes des objectifs, qui fait quoi, decisions, ligne du temps, mises a jour. */
.capx-bandeau { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr); gap:14px; margin:6px 0 16px; }
.capx-etat { background:#fff; border:1px solid #eaddd3; border-radius:12px; padding:12px 16px; }
.capx-etat p { margin:4px 0; font-size:13.5px; }
.capx-meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; color:#6d6560; }
.capx-voyants { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.capx-objectifs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.capx-obj { display:flex; flex-direction:column; gap:5px; background:#fff; border:1px solid #eaddd3;
        border-top:4px solid #c9bdb3; border-radius:10px; padding:10px 12px; min-width:0; }
.capx-obj.ok { border-top-color:#1f7a3d; }
.capx-obj.attention { border-top-color:#d39b12; }
.capx-obj.retard { border-top-color:#a3341f; }
.capx-mot { font-size:11.5px; padding:1px 6px; border-radius:8px; background:#f3f1ef; color:#6d6560; white-space:nowrap; }
.capx-mot.ok, .capx-mot.fait { background:#e3f3e6; color:#1f7a3d; }
.capx-mot.attention, .capx-mot.en_cours { background:#fff2d6; color:#8a6300; }
.capx-mot.retard { background:#fde9e4; color:#a3341f; }
.capx-val { font-family:var(--f-titre); font-size:20px; color:var(--bordeaux); overflow-wrap:anywhere; }
.capx-src, .capx-petit { font-size:11.5px; color:#6d6560; }
.capx-prog { height:8px; border-radius:4px; background:#ece8e4; overflow:hidden; }
.capx-prog i { display:block; height:100%; background:#7a1f2b; }
.capx-colonnes { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; margin-bottom:18px; }
.capx-col { background:#fff; border:1px solid #eaddd3; border-radius:10px; padding:8px 10px; min-width:0; }
.capx-col h3 { font-size:15px; margin:4px 0 6px; }
.capx-act { border-top:1px solid #f0e6de; padding:7px 0; display:grid; gap:3px; }
.capx-act:first-of-type { border-top:0; }
.capx-act.fait .capx-t { text-decoration:line-through; color:#6d6560; }
.capx-t { font-weight:600; font-size:13.5px; overflow-wrap:anywhere; }
.capx-d { font-size:12.5px; color:#5b4636; overflow-wrap:anywhere; }
.capx-l { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; }
.capx-retard { color:#a3341f; font-weight:700; }
.capx-bloque { color:#8a6300; font-weight:600; }
.capx-trace { font-size:11.5px; color:#1f7a3d; }
.capx-act form { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0; }
.capx-act details > summary { cursor:pointer; font-size:12px; color:var(--bordeaux); }
.capx-fiche { display:grid; gap:6px; padding:6px 0; }
.capx-fiche label { display:grid; gap:2px; font-size:12px; font-weight:600; color:#5b4636; }
.capx-fiche input, .capx-fiche select, .capx-fiche textarea { font-size:16px; max-width:100%; }
.capx-decisions { display:grid; gap:8px; margin-bottom:18px; }
.capx-dec form { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.capx-dec input[name="decide"] { flex:1 1 280px; min-width:0; font-size:16px; }
.capx-dec { background:#fff; border:1px solid #eaddd3; border-left:4px solid #7a1f2b; border-radius:10px; padding:8px 12px; }
.capx-cadre { overflow-x:auto; border:1px solid #eaddd3; border-radius:10px; background:#fff; margin-bottom:6px; }
.capx-ligne { display:block; min-width:900px; }
.capx-couloir-t { font-size:12px; font-weight:600; fill:#3a2a20; }
.capx-mois { font-size:11px; fill:#6d6560; }
.capx-grille { stroke:#f0e6de; stroke-width:1; }
.capx-auj { stroke:#7a1f2b; stroke-width:2; stroke-dasharray:4 3; }
.capx-auj-t { font-size:11px; fill:#7a1f2b; }
.capx-barre { fill:#b9a99b; }
.capx-pt { fill:#b9a99b; stroke:#fff; stroke-width:1.2; }
.capx-barre.fait, .capx-pt.fait { fill:#1f7a3d; }
.capx-barre.en_cours, .capx-pt.en_cours { fill:#d39b12; }
.capx-barre.retard, .capx-pt.retard { fill:#a3341f; }
.capx-bord { font-size:10.5px; fill:#6d6560; }
.capx-legende { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; margin:4px 0 10px; }
.capx-legende i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; background:#b9a99b; }
.capx-legende i.fait { background:#1f7a3d; } .capx-legende i.en_cours { background:#d39b12; }
.capx-legende i.retard { background:#a3341f; }
details.capx-maj { background:#fff; border:1px solid #eaddd3; border-radius:10px; padding:8px 12px; margin:14px 0; }
details.capx-maj > summary { cursor:pointer; font-weight:600; }
.capx-import { display:grid; gap:6px; max-width:640px; }
.capx-import textarea { font-family:var(--f-mono, monospace); font-size:13px; min-height:90px; max-width:100%; }
.capx-rapport td, .capx-rapport th { font-size:12.5px; vertical-align:top; }
ul.pil-aide { margin:4px 0 10px; padding-left:18px; font-size:13px; }
ul.pil-aide li { margin:1px 0; }
/* (lot 76) Cap v2 : etoile, reports, bloc « À ne pas lâcher », question du mardi, semaines precedentes, export. */
.capx-imp { font-size:11.5px; font-weight:700; color:var(--bordeaux); white-space:nowrap; }
.capx-report { font-size:11.5px; padding:1px 6px; border-radius:8px; background:#fff2d6; color:#8a6300; }
.capx-npl { background:#fff; border:1px solid #eaddd3; border-left:4px solid var(--bordeaux); border-radius:10px;
        padding:8px 12px; margin:6px 0 12px; }
.capx-npl h3 { font-size:15px; margin:2px 0 6px; }
.capx-npl ul, ul.capx-arch { margin:0; padding-left:18px; display:grid; gap:6px; }
.capx-npl li a { font-weight:600; overflow-wrap:anywhere; }
.capx-question { display:grid; gap:6px; margin-top:6px; font-size:12.5px; }
.capx-question form { display:flex; flex-wrap:wrap; gap:6px; }
.capx-question input { flex:1 1 220px; min-width:0; font-size:16px; }
.capx-export { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 14px; font-size:12.5px; }
p.cap-renvoi { margin:10px 0 16px; padding:8px 12px; border:1px solid #eaddd3; border-radius:10px; background:#fff; }
@media (max-width: 900px) {
  .capx-bandeau { grid-template-columns:1fr; }
  .capx-objectifs { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .capx-voyants, .capx-objectifs { grid-template-columns:1fr; }
  .capx-colonnes { grid-template-columns:1fr; }
}
.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; }
/* (lot 75) « Apres l'essai » et « Changer le statut (motif) » : des formulaires en colonne, comme « Perdu ». */
.apres-essai .dernier-essai, .apres-essai .rdv-manuel { display:flex; flex-wrap:wrap; align-items:center;
          gap:6px 8px; margin-top:6px; font-size:13.5px; }
.apres-essai details > summary, .statut-manuel > summary { list-style:none; display:inline-flex;
          align-items:center; cursor:pointer; padding:7px 11px; font-size:13px; min-height:36px; margin-top:8px; }
.apres-essai details > summary::-webkit-details-marker,
.statut-manuel > summary::-webkit-details-marker { display:none; }
.essai-corriger { flex-basis:100%; }
.essai-corriger .essai-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.rdv-manuel-form, .statut-manuel-form { display:grid; grid-template-columns:minmax(0,1fr); gap:8px;
          margin-top:8px; padding:10px; background:#faf6f2; border-radius:10px; }
.rdv-manuel-form label, .statut-manuel-form label { display:grid; gap:4px; font-size:13px; }
.rdv-manuel-form input, .statut-manuel-form input, .statut-manuel-form select { width:100%; min-width:0; }
.rdv-manuel-form .btn, .statut-manuel-form .btn { justify-self:start; }
.rdv-manuel-form .muted, .statut-manuel-form .muted { font-size:12px; margin: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(7), .liste-prospects td:nth-child(7),
  .liste-prospects th:nth-child(8), .liste-prospects td:nth-child(8) { 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; }
/* Creation d'un compte (lot 10 bis, 10b.4) : la case « Generer un mot de passe provisoire » est
   une ligne a elle, cochee par defaut ; la saisie a la main n'apparait que decochee. */
.form-compte { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; }
.form-compte label { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.form-compte label.case-provisoire { flex:1 1 100%; flex-direction:row; align-items:center; gap:8px; }
.form-compte .saisie-mdp { display:flex; flex-wrap:wrap; gap:10px 14px; flex:1 1 100%; }
.form-compte .saisie-mdp[hidden] { display:none; }
.form-compte .muted { flex:1 1 100%; }
.bloc-equipe details.pli-form { margin:8px 0 14px; }
input.part-pct { width:84px; min-width:84px; }
pre.meta-charge { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; background:#fff; padding:10px 12px; border-radius:8px; }
/* « Remettre dans la file » : dans la colonne du motif, sous l'echeance — la colonne des gestes est
   deja pleine (appel guide, resultats, ···). */
.archive-remettre { margin-top:6px; }
.etiquette-process { background:#ece4f3; color:#4b2a6b; font-size:11px; font-weight:600;
  white-space:normal; line-height:1.3; }
.etiquette-ligne { margin-top:4px; }
.archive-remettre .btn { padding:4px 10px; font-size:12px; }
.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; }
/* (lot 28) Ce que Meta a renvoye a l'arret d'un parcours, et l'alerte « inscription classique » :
   des bandeaux de la charte, sur toute la largeur du bloc. La session est un long mot sans espace. */
.coex-relier > .banner { align-self:stretch; margin:0; }
.coex-retour dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; margin:6px 0; }
.coex-retour dt { font-weight:600; }
.coex-retour dd { margin:0; overflow-wrap:anywhere; }
/* 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; }
/* Lot 12 : « Prochaine action » a pris la place des colonnes Mode et Sequence ; leur contenu
   reste TOUJOURS sous le statut (plus aucun palier ne les cache ni ne les montre). */
.liste-prospects .mode-seq-mini { display:block; margin-top:4px; white-space:nowrap; }
.liste-prospects td.pa { min-width:150px; max-width:240px; }
.liste-prospects td.pa .pa-quoi { display:inline-block; max-width:230px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.liste-prospects td.pa-retard { box-shadow: inset 4px 0 0 #a3341f; }
.liste-prospects td.pa-retard .pa-quand { color:#a3341f; font-weight:600; }
.liste-prospects td.pa-aucune { font-size:13px; }
/* Entre 621 et 1399 px la colonne se resserre (la liste tient a 1280 px, sans rien cacher). */
@media (min-width:621px) and (max-width:1399px) {
  .liste-prospects td.pa { min-width:120px; max-width:170px; }
  .liste-prospects td.pa .pa-quoi { max-width:160px; }
}
.vues-liste { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 6px; }
.vues-liste .vue-onglet, .puces-statut .puce-statut { display:inline-block; padding:7px 12px;
  border:1px solid var(--line, #eaddd3); border-radius:999px; text-decoration:none;
  color:inherit; background:#fff; font-size:14px; min-height:20px; }
.vues-liste .vue-actif, .puces-statut .puce-actif { background:var(--bordeaux, #5F2E40); color:#fff;
  border-color:var(--bordeaux, #5F2E40); }
.vue-n { display:inline-block; margin-left:4px; font-weight:600; opacity:.85; }
.puces-statut { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.puces-statut .puce-statut { padding:4px 10px; font-size:13px; }
.closes-ligne { margin:6px 0 10px; font-size:14px; }
.vues-sans-profil { margin:4px 0 8px; font-size:13px; }
.vues-sans-vendeur { margin:4px 0 8px; font-size:14px; }
.fiche-entete { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.menu-plus { position:relative; }
.menu-plus > summary { list-style:none; cursor:pointer; font-size:20px; line-height:1; padding:6px 14px; }
.menu-plus > summary::-webkit-details-marker { display:none; }
.menu-plus-corps { position:absolute; right:0; z-index:20; width:min(92vw, 420px); background:#fff;
  border:1px solid #eaddd3; border-radius:10px; padding:10px 14px; margin-top:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.15); }
.menu-plus-corps .menu-item { display:block; margin:8px 0; }
/* Lot 12 B : fiche archivee, selection, statut dans la ligne, barre des actions groupees. */
.pill.archivee { background:#eee; color:#666; }
.liste-prospects .sel-fiche { margin-right:6px; vertical-align:middle; width:18px; height:18px; }
.liste-prospects .sel-statut { display:block; margin-top:4px; font-size:12px; max-width:150px; }
.bg-tout { display:inline-block; margin:6px 0; font-size:14px; }
.barre-groupe { position:sticky; top:0; z-index:5; background:#fff; border:1px solid #eaddd3;
  border-radius:10px; padding:8px 12px; margin:6px 0 10px; display:flex; flex-wrap:wrap;
  gap:8px; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.barre-groupe[hidden], .barre-groupe [hidden] { display:none; }
.barre-groupe .bg-apercu { flex-basis:100%; border-top:1px solid #f0e7df; padding-top:8px;
  max-height:40vh; overflow:auto; }
.barre-groupe .bg-refusees { margin:4px 0 0 18px; font-size:13px; }
/* (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 64 : la colonne « Action » des alertes Sportigo (retouche demandee par Ge le 02/11) : UNE rangee alignee au
   centre — [Appeler] [Geste] [Réglé] —, meme hauteur et meme arrondi, espacement regulier ; repli sur 2 lignes au
   telephone seulement ; lignes du tableau moins hautes. --- */
table.alertes-table td { padding-top:10px; padding-bottom:10px; vertical-align:middle; }
table.alertes-table td.gestes { width:1%; white-space:nowrap; }
.alerte-gestes { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:8px; margin:0; }
.alerte-gestes .btn, .alerte-gestes select { height:36px; min-height:36px; box-sizing:border-box; border-radius:999px;
        padding:0 14px; font-size:13px; line-height:1; display:inline-flex; align-items:center; margin:0; }
.alerte-gestes .btn.ghost { text-decoration:none; }
.alerte-gestes .alerte-choix { position:relative; display:flex; margin:0; }
.alerte-gestes select { border:1px solid #d8c7ba; background:#fff; color:#5b4636; padding-right:28px; }
.alerte-regle { display:block; margin-bottom:6px; font-size:12px; white-space:normal; }
@media (max-width: 760px) {
  table.alertes-table td.gestes { width:auto; white-space:normal; }
  /* deux lignes au telephone : le geste en entier, puis [Appeler] [Réglé] cote a cote */
  table.alertes-table td .alerte-gestes { flex-wrap:wrap; justify-content:flex-start; width:100%; }
  /* 16 px : en dessous, Safari zoome la page au toucher de la liste (relecture de la retouche) */
  table.alertes-table td .alerte-gestes .alerte-choix { order:-1; flex:1 1 100%; width:100%; }
  table.alertes-table td .alerte-gestes select { flex:1 1 100%; width:100%; font-size:16px; }
  table.alertes-table td .alerte-gestes .btn { flex:1 1 0; width:auto; min-width:0; justify-content:center; }
  table.alertes-table td .alerte-gestes .btn, table.alertes-table td .alerte-gestes select { height:44px;
        min-height:44px; margin:0; }
}
/* --- 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 */
  /* (lot 16, vague 0 — décision D3 de Gérome du 17/10) UNE couleur d'urgence hors du menu : le
     rouge brique. Texte d'alerte, bandeaux urgents, boutons « danger ». Le rose vif reste aux
     pastilles du menu (compteurs, liseré du lien actif). 7,43 sur --bg, 8,41 sur --card-top ;
     blanc dessus : 8,60. */
  --urgent: #8B2A18;
  --rouge-texte: #8B2A18;   /* un chiffre négatif, un retard : = --urgent depuis le lot 16 (vague 0) */
  --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, .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,
.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, .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 > .card.chiffre, .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 > .card.chiffre, .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, .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, .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; }
.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; }
  /* (lot 16, vague 0, point 7) Les pages sans navigation (double authentification, invitation,
     désabonnement, hors ligne, confidentialité) : la carte ne colle plus au bord, comme celle de
     la connexion. Le liseré ci-dessus supposait déjà ce padding. */
  .deuxfa-wrap { margin: 4vh 12px; padding: 22px 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; }
/* (lot 16, vague 0 — D3) Le geste destructeur est en rouge brique, plus en rose vif : le rose vif
   est réservé aux pastilles du menu. */
.btn.danger { background: var(--card-top); color: var(--urgent); border-color: var(--urgent); }
.btn.danger:hover { background: var(--urgent); color: #FFFFFF; border-color: var(--urgent); }
.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(--urgent); 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(--urgent); }
.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); }
/* (lot 23) « A traiter » : une ligne a zero reste VISIBLE, en vert discret (turquoise du site) ; une source
   illisible est grise, sans nombre — jamais un zero. */
.todo-ligne.vert { border-left-color: var(--turquoise); background: linear-gradient(180deg, var(--card-top), var(--turquoise-clair)); }
.todo-ligne.vert .n { color: var(--turquoise-texte); font-size: 22px; }
.todo-ligne.gris { border-left: 5px dashed var(--muted); background: var(--surface); }
.todo-ligne.gris .n { color: var(--muted); }
.a-traiter-pied { margin-top: 18px; }
.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); }
/* 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(--urgent); 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, .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);
}
.card .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);
}
/* (lot 16, vague 0, point 1) Recherche, e-mail, téléphone, nombre, mot de passe : la même marge
   intérieure et la même taille de texte que `text` / `date` (BASE_CSS ne les donnait qu'à ces deux-là :
   la recherche des Prospects était une barre de 18 px). `:where` ne pèse rien : tout champ qui a déjà
   son propre dessin (connexion, double authentification, « Aller à… ») le garde, et le 16 px du
   téléphone l'emporte. */
:where(input[type=search], input[type=email], input[type=tel], input[type=number], input[type=password]) {
  padding: 8px 10px; font-size: 13px;
}
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; }
  /* (lot 16, vague 4, C25) le champ de la connexion avait 14 px (BASE_CSS, plus precis que la regle ci-dessus) :
     iOS zoomait a la saisie de l'identifiant. */
  .login-wrap input { font-size: 16px; }
}

/* ---- 11. TABLEAUX ---------------------------------------------------------- */
table { background: var(--card-top); border: 1px solid var(--line); border-radius: 16px; }
/* (lot 16, vague 0, point 3) L'arrondi du tableau tenait a `overflow:hidden` (BASE_CSS), qui rognait aussi les
   colonnes. Sans lui, ce sont les cellules d'angle qui s'arrondissent (modele « separate », sans espace : les
   filets restent les memes, une seule ligne sous chaque rangee). Les tableaux sans arrondi (bacs, file d'appels,
   fenetres) n'en ont pas besoin. */
table { border-collapse: separate; border-spacing: 0; }
table:not(.bac table, .file-defile > table, .modal-card table) > :first-child > tr:first-child > :first-child,
table:not(.bac table, .file-defile > table, .modal-card table) > caption + * > tr:first-child > :first-child { border-top-left-radius: 15px; }
table:not(.bac table, .file-defile > table, .modal-card table) > :first-child > tr:first-child > :last-child,
table:not(.bac table, .file-defile > table, .modal-card table) > caption + * > tr:first-child > :last-child { border-top-right-radius: 15px; }
table:not(.bac table, .file-defile > table, .modal-card table) > :last-child > tr:last-child > :first-child { border-bottom-left-radius: 15px; }
table:not(.bac table, .file-defile > table, .modal-card table) > :last-child > tr:last-child > :last-child { border-bottom-right-radius: 15px; }
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); }
}
/* (lot 16, vague 0, point 3) PLUS AUCUN TABLEAU ROGNÉ AU TÉLÉPHONE, ET SES LIGNES RESTENT PLEINE LARGEUR.
   Ce n'est pas le tableau qui défile (un `display:block` posé sur le tableau arrêtait ses lignes à la fin de leur
   contenu) : c'est son CADRE. La coquille (templates.envelopper_tableaux) enveloppe chaque tableau du contenu dans
   un cadre `.tablewrap`, qui défile de côté quand le tableau est plus large que l'écran ; la page, elle, ne défile
   jamais de côté. Les tableaux déjà en cartes (liste Prospects, bacs, comptes, modèles, file d'appels) ne sont pas
   enveloppés. À l'impression, le cadre ne coupe rien. */
@media print {
  .tablewrap { overflow: visible; }
}

/* ---- 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 > .card.chiffre, .tdb-tache:hover, .todo-ligne:hover, .btn:active { transform: none; }
}

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

/* ============================================================================
   CONFORT — le lot 13 « Confort et design » (apparence seule, et rien d'autre)
   ============================================================================
   Ce fichier est AJOUTÉ APRÈS le thème Heritage à la feuille servie
   (/assets/app.css) : templates.py le lit une fois au démarrage et le colle à la
   fin de BASE_CSS, juste derrière theme-heritage.css. Ses règles arrivent donc
   en dernier et, à spécificité égale, l'emportent. Pour tout retirer d'un coup :
   supprimer ce fichier (le serveur démarre sans lui, la plateforme reprend
   l'apparence du thème Heritage tel qu'il était).

   POURQUOI UN FICHIER À PART (décision D9 de la spec) : le thème est un brief que
   Gérome a validé le 12/10 ; on n'y mélange pas un lot.

   LA RÈGLE DE COULEUR (décision D1 de Gérome, 14/10/2026) :
     - la charte Heritage reste l'OSSATURE : fond, menus, en-têtes, boutons
       principaux, typographie. Ce fichier n'y touche pas ;
     - la palette est ÉTENDUE pour les éléments d'INFORMATION seulement : statuts,
       alertes, indicateurs, colonnes. Vert « gagné / à jour », ambre « à relancer »,
       bleu « en attente », rouge « en retard » : toute couleur qui améliore la
       lecture ;
     - LA COULEUR N'EST JAMAIS LE SEUL SIGNAL : chaque pastille garde son MOT
       (« Client », « Froid »…), chaque bandeau son texte. Le daltonisme et
       l'impression en noir et blanc ne changent donc rien au sens.
   Chaque couple texte/fond de ce fichier est mesuré à 4,5:1 au moins par le § 220
   de tests/run_tests.py (formule WCAG du § 129).

   SECTIONS : 0 Jetons d'information · 1 Menu : un seul élément plein ·
   2 Palette des statuts (pastilles pleines) · 3 Bandeaux · 3 bis Pli des informations ·
   4 Synchro Sportigo · 5 Icônes · 6 Session d'appels · 7 Alerte de fermeture WhatsApp ·
   8 Liste Prospects · 9 Messages · 10 Barre du bas
   ============================================================================ */

/* ---- 0. JETONS D'INFORMATION ------------------------------------------------ */
:root {
  /* gagné / à jour */
  --info-vert: #2B7A4B;        /* fond plein, texte blanc : 5,27 */
  --info-vert-clair: #D5EEDD;  /* fond clair, texte --info-vert-nuit : 7,95 */
  --info-vert-nuit: #1B4D31;
  --info-vert-texte: #1D6B3F;  /* en texte sur --surface : 5,93 */
  /* en attente (un essai est posé) */
  --info-bleu: #2F5D8C;        /* fond plein, texte blanc : 6,85 */
  --info-bleu-clair: #DDE9F5;  /* fond clair, texte --info-bleu-nuit : 8,75 */
  --info-bleu-nuit: #1B3F66;
  /* à relancer (le prospect chaud, l'essai manqué) */
  --info-ambre: #F2A93B;       /* fond plein, texte nuit : 9,27 */
  --info-peche: #FCDDBB;       /* fond clair, texte --info-brun : 9,17 */
  --info-brun: #5A2A00;
  --info-ambre-texte: #8A5A00; /* en texte sur --surface : 5,40 */
  /* sans suite : « annulé » */
  --info-lin: #EDE4DC;         /* fond clair, texte --fg : 12,25 */
  /* alertes douces (fond de bandeau) */
  --info-ok-fond: #E3F2E8;     /* texte --fg : 13,27 */
  /* Les PASTILLES de statut sont toutes PLEINES (retour du gerant du 14/10, point 5) : un fond
     plein, un texte lisible, jamais un fond clair cerne d'un liseré. */
  --st-teal: #177A72;          /* texte blanc : 5,17 */
  --st-bleu-clair: #8FB8DE;    /* texte nuit : 8,89 */
  --st-orange: #E07B39;        /* texte nuit : 6,23 */
  --st-sable: #D8B98A;         /* texte nuit : 9,90 */
  --st-vert-clair: #6DBE87;    /* texte nuit : 8,26 */
  --st-prune: #6F3A96;         /* « A re-contacter » (libelle calcule, 16/10) ; texte blanc : 7,72 */
  --info-warn-fond: #FDF0D0;   /* texte --fg : 13,58 */
}

/* ---- 1. MENU : UN SEUL ÉLÉMENT PLEIN (chantier H) --------------------------- */
/* Le thème donnait à une entrée « urgente » un fond rose à 22 % : avec Messages et
   Activités urgents presque en permanence, trois éléments étaient pleins et l'on ne
   savait plus où l'on était. Une entrée urgente n'a plus de fond : sa PASTILLE
   numérique rose (déjà dessinée par le thème) et son libellé en gras disent
   l'urgence. Seule l'entrée COURANTE (.on) est pleine. */
.shell.crm nav.sidenav a.urgent, .shell nav.sidenav a.urgent { background: transparent;
  color: var(--sable); opacity: 1; font-weight: 700; box-shadow: none; }
.shell.crm nav.sidenav a.urgent:hover, .shell nav.sidenav a.urgent:hover {
  background: rgba(249, 229, 212, .06); }
/* L'entree courante est la SEULE pleine, urgente ou non (le style de base la peignait en
   rouge brique : on ne savait plus si « plein » voulait dire « ici » ou « urgent »). */
.shell.crm nav.sidenav a.urgent.on, .shell nav.sidenav a.urgent.on { background: rgba(249, 229, 212, .12);
  color: var(--sable); box-shadow: inset 0 1px 0 rgba(249, 229, 212, .14); }
/* Même règle sur la barre basse du téléphone : seule l'entrée courante est pleine. */
.barre-basse a.urgent:not(.on) { background: transparent; font-weight: 700; }
/* Le menu du vendeur : le prénom seul, le reste derrière le clic. */
.shell .rail-compte > summary .rail-nom { font-weight: 700; }
.shell .rail-compte-detail { display: block; padding: 6px 14px 4px; font-size: 12px;
  color: var(--sable); opacity: .85; }

/* ---- 2. PALETTE DES STATUTS (chantier G) ------------------------------------ */
/* Cinq sens, treize statuts, une couleur par sens :
     actif        turquoise      À contacter · En contact
     en attente   bleu           Essai à venir · Froid
     à relancer   ambre / pêche  Venu non inscrit · Essai non venu · Essai annulé ·
                                 Non fréquentant
     gagné        vert           Client · Intégration
     clos         rose / gris    Perdu · Ne plus contacter · Ancien membre
   « Venu non inscrit » (le prospect chaud à convertir) n'a plus la couleur de
   « Client » ; Froid, Ne plus contacter, Essai annulé et Ancien membre se
   distinguent. Le MOT de la pastille reste le signal principal. */
.pill { white-space: nowrap; }
/* Treize pastilles, TOUTES pleines. Le MOT reste le signal principal ; la teinte le renforce. */
/* actif */
.pill.nouveau { background: var(--turquoise); color: var(--nuit); }
.pill.en_contact { background: var(--st-teal); color: #FFFFFF; }
/* en attente */
.pill.rdv_essai { background: var(--info-bleu); color: #FFFFFF; }
.pill.froid { background: var(--st-bleu-clair); color: var(--nuit); }
/* à relancer */
.pill.a_recontacter { background: var(--st-prune); color: #FFFFFF; }
.pill.essai_realise { background: var(--info-ambre); color: var(--nuit); }
.pill.rdv_non_honore { background: var(--st-orange); color: var(--nuit); }
.pill.rdv_annule { background: var(--st-sable); color: var(--nuit); }
.pill.non_frequentant { background: var(--t3); color: var(--nuit); }
/* gagné */
.pill.converti { background: var(--info-vert); color: #FFFFFF; }
.pill.integration { background: var(--st-vert-clair); color: var(--nuit); }
/* clos */
.pill.perdu { background: var(--t5); color: var(--nuit); }
.pill.ne_plus_contacter { background: var(--nuit); color: var(--sable); }
.pill.ancien_membre { background: var(--t6); color: var(--sable); }

/* Les indicateurs à trois niveaux (vert / orange / rouge) prennent leurs vraies
   couleurs : ils portent toujours un mot (« aujourd'hui », « dans 3 jours »). */
.pill.niv-vert { background: var(--info-vert-clair); color: var(--info-vert-nuit); }
.pill.niv-orange { background: var(--info-peche); color: var(--info-brun); }
.pill.niv-rouge { background: #F9D7DD; color: #7A1D3F; }
.card.chiffre .badge.ok { background: var(--info-vert-clair); color: var(--info-vert-nuit); }
.card.chiffre .badge.moyen { background: var(--info-peche); color: var(--info-brun); }
.card.chiffre .badge.bas { background: #F9D7DD; color: #7A1D3F; }

/* ---- 3. BANDEAUX (chantier I) ------------------------------------------------ */
/* Un bandeau d'INFORMATION devient une ligne discrète : texte gris prune, un filet
   fin or clair dessous, aucun fond coloré. Les bandeaux d'alerte (warn, grave, ok)
   gardent leur fond : ce sont des alertes. */
.banner.info { background: transparent; border: 0; border-left: 0; border-radius: 0;
  border-bottom: 1px solid var(--or); padding: 6px 2px; color: var(--muted); font-size: 13px; }
.banner.info a { color: var(--bordeaux); text-decoration: underline; }
.banner.info .muted { color: var(--muted); opacity: 1; }
/* Les alertes prennent des fonds lisibles et un mot toujours présent. */
.banner.ok, .message.ok { background: var(--info-ok-fond); border-left-color: var(--info-vert); }
.banner.warn { background: var(--info-warn-fond); border-left-color: var(--info-ambre); }

/* ---- 4. SYNCHRO SPORTIGO : UNE SEULE FOIS, EN PIED DU MENU (chantier I) ------ */
.rail-sync { margin: 8px 14px 2px; font-size: 11.5px; line-height: 1.35;
  color: var(--sable); opacity: .85; }
.crm-head:empty { display: none; }

/* ---- 3 bis. LE PLI DES INFORMATIONS (retour du gerant du 14/10, point 2) -------------------- */
/* Les informations non urgentes tiennent sur UNE ligne repliee, au meme style partout :
   « 3 informations · 1 à vérifier ▸ ». Au clic, chacune avec son MOT (Info / OK / À vérifier) :
   la couleur n'est jamais le seul signal. Elle ne repousse pas l'ecran utile : fermee, elle
   prend une ligne ; ouverte, elle pousse le contenu comme le ferait n'importe quel bloc. */
.infos-groupees { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.infos-groupees > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  min-height: 32px; padding: 4px 10px; border-radius: 999px; list-style: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; }
.infos-groupees > summary::-webkit-details-marker { display: none; }
.infos-groupees > summary::before { content: "\25B8"; display: inline-block; font-size: 11px;
  transition: transform .15s var(--ease); }
.infos-groupees[open] > summary::before { transform: rotate(90deg); }
.infos-groupees > summary:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.infos-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; }
.infos-liste li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px;
  border-left: 3px solid var(--or); background: var(--surface); border-radius: 0 var(--r-champ) var(--r-champ) 0;
  color: var(--fg); }
.infos-liste li.info-warn { border-left-color: var(--info-ambre); }
.infos-liste li.info-ok { border-left-color: var(--info-vert); }
.infos-liste .info-mot { flex: none; min-width: 5.2em; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.infos-liste .info-corps { flex: 1 1 auto; }
.infos-liste a { color: var(--bordeaux); text-decoration: underline; }
@media (max-width: 620px) {
  .infos-groupees > summary { min-height: 44px; width: 100%; justify-content: flex-start; }
  .infos-liste li { flex-direction: column; gap: 2px; }
  /* les liens d'un bandeau perdaient leur cible tactile en entrant dans le pli (la regle d'origine
     dependait de l'ancetre .banner) */
  .infos-liste a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- 8. LISTE PROSPECTS : L'APPARENCE D'AVANT, LES NOUVELLES COULEURS (point 5) -------------- */
/* La structure est celle du 12 A (onglets, puces, colonne « Prochaine action ») : on n'y touche
   pas, ni la mise en page. Ce qui avait change, et seulement cela : la regle « une pastille tient
   sur une ligne » (section 2) s'appliquait AUSSI a l'etiquette de parcours (« Nouveau prospect
   chaud · étape 1/8 · prochain : appel le 14/10 »), qui n'est pas un statut mais une phrase.
   Elle tenait donc sur 347 px, la colonne Statut atteignait 404 px, le tableau 1 308 px dans un
   cadre de 1 143 px, et « Activités » puis « Ajouté le » sortaient de l'ecran. L'etiquette
   repasse a la ligne comme avant ; les treize pastilles de statut, elles, restent pleines et
   sur une ligne. */
.pill.etiquette-process { white-space: normal; line-height: 1.3; }

/* ---- 9. MESSAGES : LE VENDEUR, EN HAUT A DROITE (point 3 ; nom seul, retour du 15/10) ------ */
.wa-row .meta .wa-attrib { margin: 0 0 4px; text-align: right; }
/* Le menu prend la largeur de son option la plus longue (le nom entier, jamais coupe) ; il ne
   depasse son conteneur que si celui-ci est plus etroit que le nom. */
.wa-row .wa-attrib-menu { width: auto; max-width: 100%; min-height: 32px; font-size: 12px; }
.wa-row .wa-attrib-texte { font-size: 12px; }
@media (max-width: 620px) {
  /* En haut a droite de la carte, comme sur ordinateur : une grille a deux colonnes, la seconde a
     la largeur du menu (donc du nom le plus long). Le nom de la personne prend le reste et peut
     passer a la ligne ; le menu, lui, n'est jamais ecrase. */
  .wa-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(auto, 55%); column-gap: 10px;
    align-items: start; }
  .wa-row .who { min-width: 0; grid-column: 1; }
  .wa-row .last { grid-column: 1 / -1; min-width: 0; }
  .wa-row .meta { display: contents; }
  .wa-row .meta > * { grid-column: 1 / -1; text-align: right; justify-self: end; }
  .wa-row .meta > .wa-attrib { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; }
  .wa-row .wa-attrib-menu { min-height: 44px; font-size: 13px; }
  .wa-row .wa-attrib-texte { display: block; font-size: 13px; }
}

/* ---- 11. LISTE PROSPECTS : AUCUN DEFILEMENT HORIZONTAL DES 1280 px (lot 13 bis, priorite 1) ----
   Mesure du 15/10 sur le 12 B en service : a 1280 px la table faisait 1151 px dans un cadre de 998 px
   (colonne Nom de 300 px presque vide, cellule Statut sur quatre ou cinq etages, lignes de 149 px).
   Ici : colonnes a largeur maitrisee (table-layout: fixed), Nom compact, Statut sur DEUX etages. */
.liste-prospects .st-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.liste-prospects .st-l1 .sel-statut { display: inline-block; margin: 0; width: auto; flex: 0 1 auto;
  min-width: 0; width: 76px; max-width: 76px; min-height: 28px; padding: 3px 2px; font-size: 11px; }
.liste-prospects .st-l1 .pill { font-size: 11.5px; padding: 3px 8px; }
.liste-prospects .st-l2 { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0;
  flex-wrap: nowrap; white-space: nowrap; }
.liste-prospects .st-l2 .mode-seq-mini { display: flex; align-items: center; gap: 4px; margin: 0; flex: none; }
.liste-prospects .st-l2 .etiquette-ligne { display: flex; align-items: center; gap: 6px; margin: 0;
  flex: 1 1 auto; min-width: 0; overflow: hidden; }
.liste-prospects .st-l2 .pill { font-size: 11px; padding: 1px 7px; flex: none; }
.liste-prospects .st-l2 .pill.etiquette-process { flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.liste-prospects td.pa .pa-quoi { max-width: 100%; }
.liste-defile { container-type: inline-size; }
/* >= 1100 px : tableau a largeur maitrisee. Les largeurs suivent le CADRE de la liste (cqw), pas
   l'ecran : le cadre plafonne vers 1190 px, et des largeurs en vw auraient ecrase le nom. */
@media (min-width: 1100px) {
  /* (retouche du 16/10) La liste prend TOUTE la largeur de la zone de contenu : la page cesse de
     plafonner a 1240 px quand elle porte cette table. Le tableau, lui, n'a AUCUNE largeur maximale. */
  main:has(table.liste-prospects) { max-width: none; }
  .liste-prospects { table-layout: fixed; width: 100%; }
  .liste-prospects th, .liste-prospects td { padding-left: 8px; padding-right: 8px;
    padding-top: 7px; padding-bottom: 7px; }
  /* Compactes : Telephone, Source, Statut, Vendeur, Activites, Ajoute le. L'espace gagne sur un grand
     ecran va a NOM (la colonne sans largeur, qui prend le reste) et a PROCHAINE ACTION (qui grandit
     avec le cadre). */
  .liste-prospects th:nth-child(2) { width: 104px; }
  .liste-prospects th:nth-child(3) { width: 70px; }
  .liste-prospects th:nth-child(4) { width: 200px; }
  .liste-prospects th:nth-child(5) { width: clamp(130px, calc(130px + (100cqw - 998px) * .45), 700px); }
  .liste-prospects th:nth-child(6) { width: clamp(112px, 8cqw, 150px); }
  .liste-prospects th:nth-child(7) { width: 96px; }
  .liste-prospects th:nth-child(8) { width: 92px; }
  .liste-prospects td { overflow: hidden; }
  .liste-prospects td.nom { max-width: none; }
  /* Gagner de la place pour le NOM : les initiales (decor) et le pictogramme du telephone s'effacent. */
  .liste-prospects td.nom .ini { display: none; }
  .liste-prospects td.tel-col a.tel::before { display: none; }
  .liste-prospects td.tel-col a.tel { font-size: 12.5px; letter-spacing: 0; }
  .liste-prospects td.pa .pa-quand { white-space: normal; }
  .liste-prospects .sel-vendeur { width: 100%; max-width: 100%; }
  /* Le TEXTE d'une cellule a une largeur maximale raisonnable : sur un tres grand ecran, une colonne
     large ne fait pas des lignes de 600 px de blanc derriere un nom ou une adresse. */
  .liste-prospects td.nom > a, .liste-prospects td.nom .sous-nom { display: inline-block; max-width: 440px;
    overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .liste-prospects td.pa .pa-quoi { max-width: 440px; }
}
/* 1100 a 1279 px : les colonnes secondaires (Source, Activites) se masquent au lieu de faire defiler. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .liste-prospects th:nth-child(3), .liste-prospects td:nth-child(3),
  .liste-prospects th:nth-child(7), .liste-prospects td:nth-child(7) { display: none; }
}
/* 621 a 1099 px (tablette) : les CARTES du telephone, au lieu d'un tableau qui defile. Memes regles
   que le bloc telephone de la feuille de base, etendues. */
@media (min-width: 621px) and (max-width: 1099px) {
  .liste-prospects th:nth-child(3), .liste-prospects td:nth-child(3),
  .liste-prospects th:nth-child(7), .liste-prospects td:nth-child(7),
  .liste-prospects th:nth-child(8), .liste-prospects td:nth-child(8) { 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 { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .liste-prospects .sel-vendeur { max-width: none; width: 100%; }
  .liste-prospects .st-l2 { flex-wrap: wrap; white-space: normal; }
}

/* ---- 12. LA FICHE, POSTE DE PILOTAGE (lot 13 bis, priorite 2) --------------------------------- */
.poste-pilotage { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--r-card); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)); }
.poste-pilotage .pp-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1 1 340px;
  min-width: 0; }
.poste-pilotage .pp-etat { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.poste-pilotage .pp-etat b { font-weight: 700; }
.poste-pilotage .btn { min-height: 36px; display: inline-flex; align-items: center; text-decoration: none;
  white-space: nowrap; }
/* L'etat se lit par ses MOTS ; le liseré ne fait que doubler. */
.poste-pilotage .pp-ouverte { box-shadow: inset 4px 0 0 var(--info-vert); padding-left: 10px; }
.poste-pilotage .pp-fermee, .poste-pilotage .pp-inconnue { box-shadow: inset 4px 0 0 var(--info-ambre);
  padding-left: 10px; }
.poste-pilotage .pp-retard { box-shadow: inset 4px 0 0 #a3341f; padding-left: 10px; }
@media (max-width: 620px) {
  .poste-pilotage .btn { min-height: 44px; }
  .poste-pilotage .pp-bloc { flex-basis: 100%; }
}
/* Envois AUTOMATIQUES dans le fil de la fiche : meme bulle, provenance en tete, etat au pied. */
.wa-msg.auto { border-left: 4px solid var(--camel, #c8a165); }
.wa-msg .wa-origine { display: block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

/* ---- 13. LA LISTE EN CARTES SOUS 1100 px (lot 13 bis, chantier E) -------------------------------
   Une carte = nom + statut sur une ligne, prochaine action dessous, puis Appeler et WhatsApp cote a
   cote (44 px au moins). Le menu « Changer… », le menu du vendeur et la ligne de parcours restent sur la
   fiche : sur un telephone, la carte sert a joindre la personne, pas a la reclasser. */
.liste-prospects .carte-gestes { display: none; }
@media (max-width: 1099px) {
  .liste-prospects tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
    align-items: center; }
  .liste-prospects td { width: auto; min-width: 0; }
  .liste-prospects td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .liste-prospects td:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; }
  .liste-prospects td:nth-child(5) { grid-column: 1 / -1; grid-row: 2; }
  .liste-prospects td:nth-child(2) { grid-column: 1 / -1; grid-row: 3; }
  .liste-prospects td:nth-child(6) { display: none; }
  .liste-prospects td:nth-child(4) .sel-statut,
  .liste-prospects td:nth-child(4) .st-l2 { display: none; }
  .liste-prospects td.tel-col a.tel { display: none; }
  .liste-prospects .carte-gestes { display: flex; gap: 8px; margin-top: 6px; }
  .liste-prospects .carte-gestes .btn { flex: 1 1 0; min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; text-decoration: none; }
}

/* ---- 14. LA VUE COLONNES (lot 13 bis, chantier D) ----------------------------------------------- */
.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px;
  align-items: start; overflow-x: auto; padding: 4px 0 12px; }
.kb-col { background: var(--card-bot, #fff8f1); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 10px; min-width: 0; }
.kb-col h3 { margin: 0 0 8px; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; }
.kb-col.depot { outline: 2px dashed var(--bordeaux); outline-offset: 2px; }
.kb-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-carte { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; cursor: grab; }
.kb-carte:active { cursor: grabbing; }
.kb-nom { font-weight: 700; color: var(--bordeaux); text-decoration: none; overflow-wrap: anywhere; }
.kb-pa { font-size: 12.5px; }
.kb-pa.kb-retard { box-shadow: inset 3px 0 0 #a3341f; padding-left: 7px; color: #a3341f; font-weight: 600; }
.kb-vend { font-size: 12px; }
.kb-deplacer { width: 100%; min-height: 32px; font-size: 12px; }
.kb-suite { display: inline-block; margin-top: 8px; font-size: 13px; }
.kb-vide { font-size: 13px; }
.kb-pli { margin: 10px 0; }
.kb-pli > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.kb-sep { flex: 1; }
.kb-perdu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.kb-perdu[hidden] { display: none; }
@media (max-width: 760px) {
  .kb { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .kb-deplacer, .kb-pli > summary { min-height: 44px; }
}

/* ---- 15. FICHES A RANGER (lot 13 bis, chantier C) ---------------------------------------------- */
.proposition-rangement { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px;
  padding: 10px 14px; box-shadow: inset 4px 0 0 var(--info-ambre); }
@media (max-width: 620px) { .proposition-rangement .btn { min-height: 44px; } }

/* ---- 10. BARRE DU BAS DU TELEPHONE (point 1) ---------------------------------------------------- */
.barre-basse a .lib { display: block; text-align: center; line-height: 1.15; }

/* ---- 5. ICÔNES (chantier J) --------------------------------------------------- */
/* Un jeu de traits, dessiné en SVG dans la page : la politique de sécurité n'autorise
   que img-src 'self' data:. Chaque icône DOUBLE un libellé, elle ne le remplace
   jamais : aria-hidden. Elle prend la couleur du texte (currentColor). */
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico + .ico-txt, .ico-txt { margin-left: .35em; }
/* Le bouton « Menu » du téléphone : trois traits, dessinés ici (le glyphe ☰ du style de
   base dépendait de la police du téléphone). Image en data: — autorisée par la CSP. */
.rail > summary.rail-pli::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em;
  vertical-align: -0.2em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>") center / contain no-repeat; }

/* ---- 6. SESSION D'APPELS (chantier A) ----------------------------------------- */
.session-appels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--line); }
.session-appels .btn { min-height: 44px; font-size: 15px; display: inline-flex; align-items: center;
  text-decoration: none; }
.session-appels .session-avant { flex: 1 1 220px; font-size: 13px; color: var(--muted); }
.session-appels .session-avant a { color: var(--bordeaux); }
/* (lot 30) « Reste a recontacter » et la seance en cours : sous le bouton, sur toute la largeur du bloc. */
.session-appels .reste-recontacter { flex: 1 1 100%; font-size: 13px; line-height: 1.45; color: var(--fg); }
.session-appels .reste-recontacter b { font-size: 15px; }
.session-appels .reste-recontacter .seance-encours { display: block; margin-top: 4px; color: var(--bordeaux);
  font-weight: 600; }
.session-appels .reste-recontacter a { color: var(--bordeaux); }
.seance-fin { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)); }
/* (lot 30) File commune : dans la cellule « prospect » d'une tache, l'etiquette d'etape (« étape 1/8 · prochain… »)
   etait COUPEE net par la ligne (nowrap + overflow hidden) des qu'une fiche avait une etape en cours. Elle se raccourcit
   desormais en points de suspension ; le texte entier reste dans sa bulle (title). Bureau seulement : au telephone la
   ligne passe deja a la ligne. */
@media (min-width: 621px) {
  .file-appels td.nom .l2 { display: flex; align-items: center; }
  .file-appels td.nom .l2 > * { flex: 0 0 auto; }
  .file-appels td.nom .l2 > .pill.etiquette-process { flex: 0 1 auto; min-width: 0; margin-left: 8px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
}
/* (lot 30) « Mes seances » au telephone : chaque seance devient une carte, chaque cellule une ligne « libelle : valeur »
   (data-label), au lieu d'un tableau qu'il faudrait faire glisser de cote. */
@media (max-width: 620px) {
  table.seances thead, table.seances-recap thead { display: none; }
  table.seances, table.seances tbody, table.seances tr, table.seances td,
  table.seances-recap, table.seances-recap tbody, table.seances-recap tr, table.seances-recap td { display: block;
    width: 100%; box-sizing: border-box; }
  table.seances tr, table.seances-recap tr { padding: 8px 12px; border-bottom: 1px solid var(--line); }
  table.seances td, table.seances-recap td { padding: 3px 0; border: 0; text-align: left; }
  table.seances td::before, table.seances-recap td::before { content: attr(data-label) " : "; color: var(--muted);
    font-size: 12px; }
}
.seance-tarif, .seance-objectif { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; }
.session-vide { color: var(--muted); }
.session-fin { padding: 16px; border-radius: var(--r-card); background: var(--info-ok-fond);
  border-left: 5px solid var(--info-vert); color: var(--fg); }
.session-fin ul { margin: 8px 0 0; padding-left: 20px; }

/* ---- 7. ALERTE DE FERMETURE WHATSAPP (chantier B) ----------------------------- */
.wa-ferme-bientot { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-row);
  background: var(--info-warn-fond); border-left: 5px solid var(--urgent); color: var(--fg);
  font-weight: 600; }   /* (lot 16, vague 0 — D3) liseré rouge brique : un bandeau urgent hors menu */
.wa-row .wa-vendeur { font-size: 12px; color: var(--muted); margin-left: 6px; }
.rail a .nb.nb-ferme { box-shadow: 0 0 0 2px var(--rose-vif); }

@media (max-width: 620px) {
  .session-appels .btn { width: 100%; justify-content: center; }
}
@media print {
  .session-appels, .rail-sync { display: none !important; }
}


/* ---- 11. PILOTAGE MARKETING (lot 14) ------------------------------------------
   Rangees de cartes (Acquisition, Vente, Argent, Base), delai de premier contact en barre
   empilee, entonnoir en deux phases, tableaux Sources / Campagnes / Pubs. Aucun fond ne porte
   de texte sans etre mesure : les couples sont ceux des jetons d'information ci-dessus. */
.pm-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 6px 0 2px; }
.pm-aide { margin: 2px 0 6px; font-size: 13px; }
.pm-rangee { margin: 4px 0 6px; }
.pm-rangee h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 4px;
  color: var(--muted); }
.pm-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pm-cartes.pm-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-carte { padding: 8px 12px; min-height: 0; }
.pm-carte .pm-tete { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pm-carte .lbl { font-size: 13px; }
.pm-carte .pm-ico svg { width: 18px; height: 18px; }
.pm-carte .val { font-size: 24px; font-weight: 700; line-height: 1.15; }
.pm-carte .pm-note { font-size: 12px; line-height: 1.25; }
.pm-etat { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.pm-etat.ok { background: var(--info-vert-clair); color: var(--info-vert-nuit); }
.pm-etat.moyen { background: var(--info-peche); color: var(--info-brun); }
.pm-etat.bas { background: #F9D7DD; color: #7A1D3F; }
.pm-etat.nd { background: var(--info-lin); color: var(--fg); }
.pm-delai { margin: 8px 0; }
.pm-delai h3 { margin: 0 0 4px; }
.pm-delai-tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.pm-delai-tete .val { font-size: 24px; font-weight: 700; }
.pm-pile { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin: 8px 0 4px;
  background: var(--info-lin); }
.pm-pile .seg { display: flex; align-items: center; justify-content: center; font-size: 12px;
  font-weight: 700; min-width: 0; }
.t-moins_5min { background: var(--info-vert); color: #FFFFFF; }
.t-5_60min { background: var(--info-vert-clair); color: var(--info-vert-nuit); }
.t-1_24h { background: var(--info-ambre); color: var(--nuit); }
.t-plus_24h { background: #F9D7DD; color: #7A1D3F; }
.t-jamais { background: var(--bordeaux); color: var(--sable); }
.pm-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 4px 0; font-size: 13px; }
.pm-legende .pt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px;
  border: 1px solid rgba(0,0,0,.25); }
.pm-phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pm-phase ul { list-style: none; padding: 0; margin: 0; }
.pm-phase li { display: grid; grid-template-columns: minmax(120px, 1.3fr) 1fr 40px minmax(110px, 1.2fr);
  gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pm-barre { background: var(--info-lin); border-radius: 6px; height: 10px; overflow: hidden; }
.pm-barre i { display: block; height: 100%; background: var(--bordeaux); }
.pm-n { font-weight: 700; text-align: right; }
.pm-taux { font-size: 12px; }
.pm-ancien { margin: 12px 0; }
.pm-ancien > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.pm-table th a { color: inherit; text-decoration: none; white-space: nowrap; }
.pm-table td, .pm-table th { text-align: right; white-space: nowrap; padding: 8px 7px; font-size: 13px; }
.pm-table td.nom, .pm-table th:first-child { text-align: left; white-space: normal; }
.pm-notes { padding-left: 18px; font-size: 13px; }
@media (max-width: 720px) {
  .pm-cartes, .pm-cartes.pm-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-phases { grid-template-columns: 1fr; }
  .pm-phase li { grid-template-columns: 1fr 40px; }
  .pm-phase li .pm-barre { grid-column: 1 / -1; order: 3; }
  .pm-phase li .pm-taux { grid-column: 1 / -1; order: 4; }
}


/* ---- 12. « JE LE PRENDS » (lot 18) -------------------------------------------- */
.prendre-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0; }
.prendre-n { font-size: 14px; }
.btn.prendre.petit { padding: 4px 10px; font-size: 13px; white-space: nowrap; }
.wa-attrib .btn.prendre { margin-right: 6px; }


/* ---- 16. LE SOCLE COMMUN (lot 16 « Une seule plateforme », vague 0) ------------------------------
   Une fois, pour tous les écrans ; les écrans y passent dans leurs vagues (1 à 4). Aucun élément,
   aucun texte : des règles pour des classes que les gabarits posaient DÉJÀ sans dessin (point 2), et
   des familles de pastilles au nom du sens (point 4). Couleurs : jetons du thème et de ce fichier
   seulement ; chaque couple texte/fond est mesuré par le § 228. */
/* Point 2 — les montants : alignés à droite, chiffres de même largeur, jamais coupés. */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Point 2 — classes posées sans dessin jusqu'ici (Compta). Le MOT est déjà dans la page ; la couleur
   le renforce (« CAISSE NEGATIVE », « compte à débiter introuvable », un montant dû). */
.neg { color: var(--urgent); }
tr.alerte td { background: #FCEBE8; }
h2.danger, td.danger { color: var(--urgent); }
td.danger { font-weight: 600; }
.pill.neg { background: var(--urgent); color: #FFFFFF; }
.pill.ambigu { background: var(--info-ambre); color: var(--nuit); }
.pill.a_arbitrer { background: var(--st-orange); color: var(--nuit); }
/* Une pastille posée SANS classe de sens (« déposée par l'agent », ou `class="pill "` quand la classe calculée
   est vide) : neutre, mais dessinée. */
.pill:is([class="pill"], [class="pill "]) { background: var(--info-lin); color: var(--fg); }
/* Point 4 — les pastilles au nom du SENS. Un écran choisit le sens, pas une couleur empruntée à un
   autre module (« Auto » = assigned, « sain » = matched…). Le mot reste toujours dans la pastille. */
.pill.sens-ok { background: var(--info-vert); color: #FFFFFF; }
.pill.sens-attention { background: var(--info-ambre); color: var(--nuit); }
.pill.sens-urgent { background: var(--urgent); color: #FFFFFF; }
.pill.sens-neutre { background: var(--info-lin); color: var(--fg); }
.pill.sens-info { background: var(--info-bleu); color: #FFFFFF; }


/* ---- 17. PLANNING ET COACHS (lot 16 « Une seule plateforme », vague 1) ---------------------------
   Grille des cours, Remplacements & congés, Récapitulatif des coachs, fiche coach, espace coach, Abonnés
   absents. Des classes posées par les gabarits de la vague ; aucun id, aucun name, aucun data-* ne change.
   Couleurs : jetons du thème seulement (la ligne rouge reprend le fond de `tr.rouge td` du thème). */
/* La plage de dates de la semaine n'est pas un onglet : un texte dans la rangée (guide § 3.12). */
.subtabs .periode { display: inline-flex; align-items: center; padding: 7px 14px; font-weight: 700; color: var(--fg);
  white-space: nowrap; }
/* Ce qui était écrit en `style="…"` dans le gabarit (guide C7). */
.pl-alertes { margin: 6px 0 0 18px; }
.pl-copie-txt { align-self: center; }
.a-completer { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Une carte chiffre dont la valeur est un MOT (« Indépendant », « Non comptabilisé ») : plus petite que le chiffre. */
.card.chiffre .val .val-texte { font-size: 18px; }
/* Le bouton « OK » rogné dans chaque créneau (bureau) : le menu prend sa ligne, les boutons passent dessous. */
.pl-slot .edit { flex-wrap: wrap; }
.pl-slot .edit select { flex: 1 1 100%; width: 100%; min-width: 0; }
/* D5 — lignes ~48 px (14 px de texte + 2 × 14 px) sur les tableaux SANS boutons de ligne. */
@media (min-width: 621px) {
  table.ligne-48 > tbody > tr > td { padding-top: 14px; padding-bottom: 14px; }
}
/* Les CARTES TÉLÉPHONE (guide § 3.10, modèle 2) : sous 620 px, chaque ligne d'un `table.cartes-tel` devient une
   carte ; chaque cellule montre son en-tête (`data-lbl`) à gauche, la valeur à droite ; la 1re cellule (`.titre`)
   est le titre de la carte, les boutons (`.gestes`) passent dessous, côte à côte, à 44 px. Rien ne sort de l'écran. */
@media (max-width: 620px) {
  table.cartes-tel, table.cartes-tel > tbody, table.cartes-tel > tfoot, table.cartes-tel tr,
  table.cartes-tel td, table.cartes-tel > tfoot th { display: block; width: auto; }
  table.cartes-tel { background: transparent; border: 0; border-radius: 0; }
  table.cartes-tel > thead { display: none; }
  table.cartes-tel tr { background: var(--card-top); border: 1px solid var(--line); border-radius: var(--r-row);
    padding: 10px 14px; margin: 0 0 10px; }
  table.cartes-tel td, table.cartes-tel > tfoot th { border: 0; padding: 4px 0; text-align: left; background: none;
    border-radius: 0; white-space: normal; }
  table.cartes-tel [data-lbl] { position: relative; padding-left: 44%; min-height: 1.4em; }
  table.cartes-tel [data-lbl]::before { content: attr(data-lbl); position: absolute; left: 0; top: 4px; width: 41%;
    color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; white-space: normal; }
  table.cartes-tel td.num, table.cartes-tel > tfoot th.num { text-align: right; }
  table.cartes-tel .titre { font-weight: 700; font-size: 15px; }
  table.cartes-tel .gestes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
  table.cartes-tel .gestes:empty, table.cartes-tel .vide { display: none; }
  table.cartes-tel .gestes .btn { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center;
    justify-content: center; }
  table.cartes-tel .gestes select { flex: 1 1 100%; min-height: 44px; }
  /* (lot 23) Un menu dans son étiquette (« Type » des paiements sans pièce) : l'étiquette prend la ligne, le menu
     se resserre au lieu de déborder de la carte de 5 à 20 px (mesuré par verifier_captures à 375 px). */
  table.cartes-tel .gestes label { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 8px; }
  table.cartes-tel .gestes label select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  table.cartes-tel tr.jour-h { background: none; border: 0; padding: 12px 2px 2px; margin: 0; }
  table.cartes-tel tr.jour-h td { color: var(--bordeaux); font-weight: 700; }
  table.cartes-tel tr.rouge { background: #FCEBE8; border-left: 5px solid var(--urgent); }
  table.cartes-tel > tfoot tr { background: var(--sable); }
  /* Le relevé d'heures du mois (fiche et espace coach) reste un TABLEAU — c'est un document, quatre colonnes
     courtes — mais serré pour tenir dans 375 px sans défiler. */
  table.releve th, table.releve td { padding: 8px 6px; font-size: 13px; }
  /* C25 — dans la grille (qui défile dans son cadre) les gestes d'un créneau gardent 44 px au doigt. */
  .pl-slot .btn, .pl-slot select { min-height: 44px; }
}


/* ---- 18. COMPTA (lot 16 « Une seule plateforme », vague 2) ----------------------------------------
   Cockpit, Factures, Rapprochement, Paiements sans pièce, Factures à payer, Pièces à valider, Virements, Caisse &
   recettes, Facturation Odoo, Mise à jour des données, Pilotage Falco. Des classes posées par les gabarits de la
   vague ; aucun id, aucun name, aucun data-* ne change ; aucun montant, aucun calcul. Couleurs : jetons seulement.
   Les tableaux de lignes passent en cartes au téléphone par le composant de la vague 1 (`table.cartes-tel`, § 17). */
/* Les formulaires de saisie (fond de caisse, dépôt manuel, solde d'ouverture) : l'étiquette AU-DESSUS de son champ,
   des colonnes souples ; plus « étiquettes et champs à la file, coupés en plein milieu » (`div.depot` sans dessin). */
.saisie-compta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 8px 0 14px; }
.saisie-compta > label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0;
  font-weight: 600; }
.saisie-compta > label > input, .saisie-compta > label > select { width: 100%; }
.saisie-compta > #depot-resultat { flex: 1 1 100%; }
/* Le graphe du solde : le fond et le cadre du thème (C7 : il portait `style="background:#fff;…"`). */
svg.graphe-solde { display: block; background: var(--card-top); border: 1px solid var(--line);
  border-radius: var(--r-card); }
/* Le total d'un groupe de « Factures à payer » reste dans son titre, en retrait. */
.total-groupe { font-weight: 500; font-size: .85em; }
/* Le brouillon Odoo : la carte chiffre est posée DANS sa boîte, sans second cadre. */
.draft-box .card.chiffre { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 8px; }
.draft-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.form-preparer { margin-bottom: 16px; }
/* Virements : la date d'exécution et « Préparer le fichier » passent à la ligne proprement. */
.vir-preparer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Le contrôle croisé de la caisse : libellés à gauche (en-têtes de ligne), montants à droite. */
table.controle-croise th[scope="row"] { text-align: left; font-weight: 400; background: none; }
@media (max-width: 620px) {
  /* Une cellule longue (détail, candidats, raison, ce qui reste à faire, IBAN) prend TOUTE la largeur de la carte :
     son en-tête au-dessus, plus à gauche. */
  table.cartes-tel td.pleine[data-lbl] { padding-left: 0; }
  table.cartes-tel td.pleine[data-lbl]::before { position: static; display: block; width: auto; margin-bottom: 2px; }
  table.cartes-tel td.pleine input:not([type="checkbox"]), table.cartes-tel td.pleine select { width: 100%; }
  table.cartes-tel td.pleine ul { margin: 0; padding-left: 18px; }
  table.cartes-tel td.pleine .saisie-compta > label { flex-basis: 100%; }
  /* La ligne d'un fournisseur (impayés Falco) : l'intertitre des cartes qui suivent. */
  table.cartes-tel tr.tiers { background: var(--sable); }
  /* La case « inclure » d'un virement : une cible de doigt. */
  table.cartes-tel td.case input[type="checkbox"] { width: 24px; height: 24px; }
  /* C25 — un lien qui sert de bouton (« voir », « voir la pièce ») : 44 px au doigt. */
  .lien-geste a { display: inline-flex; align-items: center; min-height: 44px; }
  .saisie-compta > label { flex-basis: 100%; }
  .saisie-compta > .btn, .vir-preparer .btn { flex: 1 1 100%; min-height: 44px; }
}


/* ---- 19. CRM, FINITIONS (lot 16 « Une seule plateforme », vague 3) ---------------------------------
   Activités, Messages, Planning, Pilotage, Sources, Campagnes, Analyse des envois, Rentabilité, Paramètres,
   Envois à Meta, fiche prospect, Corbeille, Départs, Essais, Cartes. Des classes posées par les gabarits de la
   vague ; aucun id, aucun name, aucun data-* ne change. Couleurs : jetons du thème seulement (les couples
   texte/fond sont ceux des onglets actifs et des boutons discrets, déjà mesurés). */
/* C18 — le vendeur choisi du Planning se voit (il portait aria-current sans aucun dessin). */
.semaine-nav a.btn[aria-current="page"], .semaine-nav a.btn[aria-current="page"]:hover { color: var(--sable);
  border-color: transparent; background: linear-gradient(155deg, var(--dk-1), var(--dk-2)); }
/* D8 — les interrupteurs SAMPLE / LIVE ne sont plus des boutons pleins : l'état se dit par aria-pressed (et la
   pastille de la ligne) ; le choix en cours garde un contour appuyé. Le contour double est un box-shadow
   intérieur, pas une bordure de 2 px : le bouton appuyé garde la taille de son voisin (rien ne bouge au clic). */
.btn.ghost[aria-pressed="true"] { border-color: var(--bordeaux); box-shadow: inset 0 0 0 1px var(--bordeaux);
  color: var(--bordeaux); font-weight: 700; }
/* Un en-tête `.sr-only` (position absolue) se place par rapport au conteneur qui défile, pas à la page :
   sans ce repère, il pouvait élargir la page au téléphone. */
.tablewrap, .liste-defile, .file-defile { position: relative; }
/* C22 — les chiffres de l'analyse des envois, à droite, de même largeur. */
table.analyse-envois .chiffre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* C7 — ce que la fiche écrivait en `style="…"` (couleurs en dur #BFA67B, #d5d9e0, tailles, marges). */
.corr-champ { width: 100%; max-width: 340px; }
.champ-moyen { width: 100%; max-width: 320px; }
.champ-note { width: 100%; max-width: 560px; }
.aide-geste { margin-left: 10px; }
.trace-fiche { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; margin-bottom: 10px; }
.trace-fiche.trace-passage { border-left-color: var(--or); }
.trace-qui { font-size: 12px; }
.trace-texte { white-space: pre-wrap; }
.etape-n { font-size: 13px; }
.grid2.grid-sportigo { margin-top: 14px; }
.banner.sans-marge { margin: 0; }
.form-profil { margin-top: 10px; }
/* COULEUR PAR COACH (decision de Gerome du 17/10) : une pastille ronde, toujours A COTE du nom (jamais seule), de la
   couleur calculee du coach (`--c`, templates.couleur_coach). Un filet clair la detache d'un fond de meme teinte. */
.coach-pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #bbbbbb);
  margin-right: 6px; vertical-align: 0; box-shadow: 0 0 0 1.5px var(--card-top); flex: none; }
.pill .coach-pt { margin-right: 5px; }
/* C5 — le téléphone et l'e-mail des coordonnées : texte courant en chiffres tabulaires, plus la police de titre. */
.card.coord .val.coord-val { font-family: var(--f-corps); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: 0; }
@media (max-width: 620px) {
  /* Une carte dont la 1re cellule n'est pas le nom (Cartes, journal des actions) : le titre passe devant. */
  table.cartes-tel.titre-devant tr { display: flex; flex-direction: column; }
  table.cartes-tel.titre-devant .titre { order: -1; }
  /* L'en-tête de ligne (`th scope="row"`, le vendeur de la synthèse du Planning) est le titre de la carte. */
  table.cartes-tel > tbody > tr > th[scope="row"] { display: block; width: auto; border: 0; padding: 4px 0;
    text-align: left; background: none; }
  /* Une cellule vide n'affiche pas son en-tête seul (« Origine », « Canal »…). */
  table.cartes-tel td[data-lbl]:empty { display: none; }
}

/* ---- 20. ACCUEIL, SYSTÈME ET COMPTES (lot 16 « Une seule plateforme », vague 4) -----------------------
   Rien de fonctionnel : aucun champ, aucun attribut autocomplete, aucune action de formulaire ne change sur les pages
   de connexion, de double authentification et de « Mon compte » — seulement des classes à la place des `style="…"`. */
/* Tableau de pilotage — la carte chiffre SANS source (C12, _carte_kpi) garde l'allure de l'ancienne `.kpi.vide` : fond
   pâle, bordure en tirets, tiret « — » en gris. Une carte cliquable reste un lien entier. */
.card.chiffre.vide { background: var(--surface); border: 1px dashed rgba(95, 46, 64, .22); box-shadow: none; }
.card.chiffre.vide .val { color: var(--muted); }
a.kpi-lien > .card.chiffre { height: 100%; color: var(--fg); }
a.kpi-lien:hover > .card.chiffre { border-color: var(--or); }
.todo-ligne .t .pill { margin-right: 6px; vertical-align: 1px; }
/* C7 — la hauteur d'un bâton des arrivées est une variable calculée (`--h`), plus une taille écrite en style. */
.arrivees .b { height: var(--h, 0%); }
/* Back-up — le chemin de la base se coupe où il peut, au lieu de sortir de sa carte au téléphone (C23). */
.card.chiffre .muted .chemin { overflow-wrap: anywhere; }
/* Mon compte — l'étiquette AU-DESSUS de son champ (C16), la carte à sa largeur de lecture (C7 : plus de
   style="max-width:520px"), les deux gestes de la double authentification côte à côte. */
.card.carte-compte { max-width: 520px; }
.carte-compte form > label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.carte-compte form > label:first-of-type { margin-top: 0; }
.carte-compte form > input:not([type="hidden"]) { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
.carte-compte form > .btn { margin-top: 4px; }
.carte-compte a.btn { text-decoration: none; }
.compte-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.compte-gestes form { margin: 0; }
/* Connexion et double authentification — le bouton du formulaire prend la largeur de la carte (plus de
   style="width:100%"), la case « Ne plus demander » et la sortie ont leur classe. */
.login-wrap form .btn.primary, .deuxfa-wrap form .btn.primary { width: 100%; }
.deuxfa-wrap .case-confiance { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.deuxfa-wrap .case-confiance input { width: auto; margin: 0; }
.deuxfa-wrap .case-confiance + .btn.primary { margin-top: 14px; }
.deuxfa-sortie { text-align: center; margin-top: 18px; }
.codes-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.codes-gestes a.btn { text-decoration: none; display: inline-block; }
@media (max-width: 620px) {
  /* Audit — un nom d'action technique (« coach_replacement_requested ») se coupe dans sa carte. */
  table.journal-audit td { overflow-wrap: anywhere; }
}
/* (lot 16, vague 4 bis, Q4 accordée le 17/10) Départs, Essais, Cartes : l'explication du bandeau sombre se replie sous
   « Pourquoi cette liste ? » — le pli des informations (fermé par défaut), posé dans le bandeau. */
.jour-tete .infos-groupees.tete-pourquoi { margin: 8px 0 0; color: var(--sable); }
.jour-tete .infos-groupees.tete-pourquoi[open] > summary { margin-bottom: 4px; }
/* (lot 16, vague 4, relecture du 17/10) Le retour d'une PAGE FILLE (fiche d'un coach) : sur ordinateur il est dans le
   fil de la barre du haut ; le telephone masque ce fil sous 620 px, ce lien prend alors le relais (44 px). */
.retour-tel { display: none; }
@media (max-width: 620px) {
  .retour-tel { display: block; margin: 0 0 6px; }
  .retour-tel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
}

/* (lot 24) une proposition et son bouton « Associer » sur la meme ligne */
form.en-ligne { display: inline-block; margin-left: 8px; }

/* (lot 25) un cours que Sportigo n'annonce pas (jour lu) : grise et barre, dit en mots, jamais compte */
.pl-slot.hors-sportigo { background: var(--card-top, #f4f1ee); border-left-color: var(--line, #cfc6bd); opacity: .75; }
.pl-slot.hors-sportigo .co { text-decoration: line-through; color: var(--muted, #6b6259); }

/* (lot 29) Planning & Coachs 2.0 — brouillon (projection pas encore publiee, admin seulement) : pointilles */
.pl-slot.brouillon { border-left-style: dashed; outline: 1px dashed var(--line, #cfc6bd); outline-offset: -1px; }
tr.brouillon td { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.025) 8px 16px); }
/* Semaine par coach (S01) : une ligne par coach, une colonne par jour ; defile en largeur sur telephone */
.pc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.pc-grille { display: grid; gap: 4px; min-width: 760px; }
.pc-ligne { display: grid; grid-template-columns: 120px repeat(7, minmax(84px, 1fr)); gap: 4px; }
.pc-nom { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 6px; font-size: 13px; }
.pc-nom .pc-tot { font-size: 12px; color: var(--muted, #6b6259); }
.pc-cell { background: #fff; border: 1px solid #eee0d5; border-radius: 8px; min-height: 40px; padding: 3px;
  display: flex; flex-direction: column; gap: 3px; }
.pc-tete .pc-cell { background: var(--sable, #F9E5D4); border: 0; text-align: center; font-weight: 700; font-size: 12px; }
.pc-tete .pc-cell .d { display: block; font-size: 15px; font-weight: 400; }
.pc-tete .pc-cell .pc-hj { display: block; font-weight: 400; font-size: 11px; color: var(--muted, #6b6259); }
.pc-tete .pc-cell.today { outline: 2px solid var(--bordeaux, #5F2E40); }
.pc-cours { border-left: 4px solid var(--c, #999); border-radius: 6px; padding: 3px 5px; font-size: 12px;
  line-height: 1.25; background: #faf6f2; }
.pc-cours .pc-h { font-weight: 700; }
.pc-cours .pc-marque { display: block; font-size: 10.5px; color: var(--muted, #6b6259); }
.pc-cours.open { background: #fde9e4; border-left-color: #a3341f; }
.pc-cours.open .pc-h, .pc-cours.open .pc-ct { color: #a3341f; }
.pc-cours.pending { background: #fff2d6; border-left-color: #8a6300; }
.pc-cours.brouillon { border-left-style: dashed; outline: 1px dashed #b9aa9b; outline-offset: -1px; }
.pc-cours.hors-sportigo { opacity: .7; }
.pc-cours.hors-sportigo .pc-h, .pc-cours.hors-sportigo .pc-ct { text-decoration: line-through; }
.pc-ligne.pc-pourvoir .pc-nom b { color: #a3341f; }
/* Creneaux habituels : confirmation chiffree de « Generer », liste des mois a publier */
.bloc-confirmer { border: 1px solid var(--line, #cfc6bd); border-left: 4px solid var(--bordeaux, #5F2E40);
  border-radius: 10px; padding: 12px 16px; margin: 12px 0; background: #fff; }
.bloc-confirmer h3 { margin-top: 0; }
.chiffres-gen { margin: 0 0 12px; padding-left: 18px; }
.chiffres-gen li { margin: 3px 0; }
.liste-publier { padding-left: 18px; }
.liste-publier li { margin: 6px 0; }
form.inline { display: inline-block; margin-left: 8px; }
/* Telephone du coach : « Mon prochain cours » (S12) et « Mon planning » (S13) */
.prochain-cours { border: 1px solid var(--line, #cfc6bd); border-left: 6px solid var(--c, #5F2E40); border-radius: 12px;
  padding: 10px 14px; margin: 8px 0 16px; background: #fff; }
.prochain-cours h2 { margin: 0 0 4px; font-size: 15px; }
.prochain-cours .pc-quand { font-size: 18px; margin: 2px 0; }
.prochain-cours .pc-quoi { margin: 2px 0 6px; }
.prochain-cours a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.mp-jour h2 { font-size: 15px; margin: 16px 0 6px; }
.mp-cours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-left: 4px solid var(--c, #999);
  border-radius: 8px; background: #fff; border-top: 1px solid #eee0d5; border-right: 1px solid #eee0d5;
  border-bottom: 1px solid #eee0d5; padding: 8px 10px; margin: 4px 0; }
.mp-cours .mp-h { font-weight: 700; min-width: 48px; }
.mp-cours .mp-ct { flex: 1 1 140px; }
.mp-cours .mp-geste { flex: 1 1 100%; }
.mp-cours .btn { min-height: 44px; }
.delai-coach { font-size: 13px; }
.creneaux-coach { padding-left: 18px; }
/* (lot 36) Remplacements 2.0 : candidats d'un cours, champ du motif de refus, cases grisees par une indisponibilite,
   « Échanger » depuis un de ses cours */
.candidats .nb-candidats { font-weight: 700; }
.candidats ul { list-style: none; margin: 6px 0 0; padding: 0; }
.candidats li.cand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0;
  border-top: 1px solid #eee0d5; }
.candidats li.cand .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.candidats.volet li.cand .acts { margin-left: 0; width: 100%; }
.motif-refus input { min-width: 150px; min-height: 36px; }
.pl-side .att .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-side .motif-refus, .pl-side .motif-refus input { width: 100%; min-width: 0; box-sizing: border-box; }
.pl-slot.indispo { opacity: .55; background-image: repeating-linear-gradient(135deg, transparent 0 6px,
  rgba(0, 0, 0, .05) 6px 12px); }
details.echanger { flex: 1 1 100%; margin-top: 4px; }
details.echanger summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-weight: 600; }
.filtre-demandes { margin-top: -4px; }
@media (max-width: 620px) {
  .motif-refus, .motif-refus input { width: 100%; }
  .motif-refus input { min-height: 44px; }
  .candidats li.cand .acts { width: 100%; margin-left: 0; }
  .candidats li.cand .btn { flex: 1 1 0; min-height: 44px; }
}

/* (lot 35) « Noter l'appel » sous une ligne d'absent : au téléphone, le dernier appel noté, le menu du résultat et le
   bouton prennent chacun toute la largeur de la carte (sans quoi le formulaire débordait de sa case). */
@media (max-width: 620px) {
  table.cartes-tel .gestes .appel-absent { flex: 1 1 100%; min-width: 0; margin: 0; display: flex; flex-direction: column;
    flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  table.cartes-tel .gestes .appel-absent .btn { flex: 1 1 auto; width: 100%; }
  table.cartes-tel .gestes > div.muted { flex: 1 1 100%; min-width: 0; }
}

/* ---- 21. STUDIO HERITAGE (lot 51) : les composants du CRM (.kb, .modal, cartes-tel), rien de neuf ------------ */
.studio-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.kb-carte .studio-ouvrir { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-weight: 700;
  color: var(--bordeaux); cursor: pointer; min-height: 32px; }
.kb-carte .studio-ouvrir:hover { text-decoration: underline; }
.studio-colonne-tel { display: none; }
.studio-fenetre-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.studio-champs th { text-align: left; width: 32%; vertical-align: top; }
.studio-champs ol { margin: 0; padding-left: 18px; }
.studio-legende { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; font: inherit; }
.studio-checklist { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.studio-checklist label { display: flex; gap: 8px; align-items: flex-start; min-height: 32px; }
.studio-gestes { align-items: flex-start; }
.studio-geste { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1 1 220px; }
.studio-geste textarea, .studio-geste input { width: 100%; box-sizing: border-box; }
.studio-histo ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
tr.studio-passee td { opacity: .55; }
tr.studio-exclu td { box-shadow: inset 0 -1px 0 #a3341f; }
tr.studio-exclu td.titre { box-shadow: inset 4px 0 0 #a3341f; }
.studio-exclure { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 760px) {
  .studio-colonne-tel { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
  .studio-colonne-tel select { min-height: 44px; flex: 1; font-size: 16px; }
  .nav-js #studio-kb .kb-col:not(.kb-courante) { display: none; }
  .studio-fenetre { padding: 0; }
  .studio-fenetre .modal-card { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .studio-geste textarea, .studio-geste input, .studio-exclure input, .studio-exclure select { font-size: 16px; }
  .studio-checklist label { min-height: 44px; }
}
.studio-refus { margin: 0 0 10px; }
.studio-refus summary { cursor: pointer; min-height: 32px; }
.studio-refus code { overflow-wrap: anywhere; }
/* (lot 51) le menu « Déplacer vers… » d'une carte du Studio tient dans sa colonne (7 colonnes à 1440 px) */
.studio-kb { grid-auto-columns: minmax(0, 1fr); }
.studio-kb .kb-carte label { display: block; min-width: 0; }
.studio-kb .kb-deplacer { max-width: 100%; }
/* (lot 70) Marketing > Enquêtes : listes courtes, conditions, gestes côte à côte, aperçu du mail lisible */
.enquete h3 { margin: 14px 0 6px; }
.enq-faits, .enq-conditions { margin: 4px 0 8px; padding-left: 18px; }
.enq-conditions { list-style: none; padding-left: 0; }
.enq-conditions li { margin: 3px 0; }
.enq-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.enq-corps { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 6px 0; }
.enquete .form-compte textarea { width: 100%; }
.enq-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 8px 0; }
.enq-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.enq-form input, .enq-form textarea { width: 100%; box-sizing: border-box; }
.enq-form .enq-large { grid-column: 1 / -1; }
.enq-reglages > summary { cursor: pointer; font-weight: 700; margin: 10px 0 4px; }
/* (lot 72) La page publique d'une enquête : lisible au téléphone, aux couleurs de CrossFit Heritage */
.enq-coque { max-width: 680px; }
.enq-pub h1, .enq-fin h1 { color: var(--bordeaux); margin: 4px 0 8px; text-align: center; }
.enq-intro { text-align: center; margin: 0 0 14px; }
.enq-fin { text-align: center; }
.enq-q { border: 1px solid var(--line); border-radius: 10px; margin: 14px 0; padding: 12px 14px; min-width: 0; }
.enq-q legend { font-weight: 700; padding: 0 4px; }
.enq-q-erreur { border-color: var(--bordeaux); border-width: 2px; }
.enq-erreur { color: var(--bordeaux); font-weight: 700; margin: 4px 0; }
.enq-num { display: inline-block; min-width: 1.6em; color: var(--bordeaux); }
.enq-oblig { color: var(--bordeaux); }
.enq-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.enq-notes label { position: relative; }
.enq-notes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.enq-notes span { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px;
  border: 1px solid var(--or); border-radius: 8px; background: var(--card-top); cursor: pointer; font-weight: 700; }
.enq-notes input:checked + span { background: var(--bordeaux); color: var(--sable); border-color: var(--bordeaux); }
.enq-notes input:focus-visible + span { outline: 3px solid var(--rose-vif); outline-offset: 2px; }
.enq-bornes { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0 0; font-size: .9em; }
.enq-choix label { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; min-height: 32px;
  font-weight: 400; }
.enq-grille-lib { font-weight: 400; }
.enq-choix input[type="radio"], .enq-choix input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto;
  margin-top: 2px; accent-color: var(--bordeaux); }
.enq-autre { flex-wrap: wrap; }
.enq-autre input[type="text"] { flex: 1 1 180px; min-width: 0; }
.enq-grille-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line); }
.enq-grille-ligne:last-child { border-bottom: none; }
.enq-grille-lib { flex: 1 1 180px; }
.enq-1a5 { margin: 0; }
.enq-formulaire textarea { width: 100%; box-sizing: border-box; }
.enq-formulaire .btn.primary { width: 100%; min-height: 48px; margin-top: 6px; }
.enq-piege { display: none; }
.enq-lien { overflow-wrap: anywhere; word-break: break-all; }
.enq-legende { text-align: center; }
/* (lot 72) Marketing > Enquêtes : édition des questions et résultats */
.enq-qedit { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); min-width: 0; }
.enq-qedit legend { font-weight: 700; }
.enq-qedit label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.enq-qedit select, .enq-qedit textarea, .enq-qedit input { width: 100%; box-sizing: border-box; }
.enq-score { font-size: 1.2em; }
.enq-textes { padding-left: 18px; }
.enq-textes li { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .enq-notes span { min-width: 36px; }
  .enq-q { padding: 10px; }
}
.enq-libre { display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
/* (lot 69) Marketing > Pubs de la semaine : six cartes, tranches d'âge en barres, une colonne au téléphone */
.pubs-cartes .val { overflow-wrap: anywhere; }
.pubs-ages { list-style: none; padding-left: 0; margin: 6px 0 12px; }
.pubs-ages li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  margin: 5px 0; }
.pubs-age-n { font-size: 13px; white-space: nowrap; }
.pubs-saisie .btn { align-self: end; }
@media (max-width: 620px) {
  .pm-cartes.pubs-cartes { grid-template-columns: 1fr; }
  .pubs-ages li { grid-template-columns: 52px minmax(0, 1fr); }
  .pubs-ages .pubs-age-n { grid-column: 1 / -1; white-space: normal; }
}
.pubs-table td, .pubs-table th { padding: 8px 5px; }
.pubs-table td.nom .pill { margin-left: 4px; }

/* ==========================================================================
   Lot 16 A « Navigation » — la coquille commune, option A (16/10/2026)
   --------------------------------------------------------------------------
   UNIQUEMENT la coquille : le rail sombre des modules, le panneau de verre des
   pages du module, la barre du haut en verre, la barre basse du telephone et le
   fond. JAMAIS le contenu d'une page : aucune regle ici ne vise un tableau, une
   carte ou un formulaire (les tableaux ne sont pas vitres).
   Ajoute APRES le theme Heritage et confort.css (meme mecanique) : le retirer =
   supprimer ce fichier, la plateforme reprend le menu d'avant.
   Verre : fond creme ~55 %, flou 18 px, bord blanc fin, ombre douce. Le texte
   garde 4,5:1 au moins sur le point le plus sombre du verre (mesure au § 224).
   ========================================================================== */

:root {
  --cq-nuit-1: #3A1B27; --cq-nuit-2: #200C16; --cq-bordeaux: #5F2E40;
  --cq-sable: #F9E5D4; --cq-rose: #EF9393; --cq-fond: #F6EDE4;
  --cq-encre: #3A1B27;          /* texte sur le verre : rend 11 et plus sur le creme */
  --cq-doux: #6B5058;           /* texte secondaire sur le verre (fil, etiquettes) */
  --cq-or-texte: #6F5E45;       /* l'or, assez fonce pour du texte */
  --cq-verre: rgba(255, 250, 246, .55);
  --cq-verre-bord: rgba(255, 255, 255, .65);
  --cq-ombre: 0 8px 32px rgba(58, 27, 39, .10), inset 0 1px 0 rgba(255, 255, 255, .7);
  --cq-rail: 88px;
  --cq-panneau: 232px;
}

/* ---- le fond : sable avec des halos rose et or ----------------------------- */
.shell, .shell.crm {
  min-height: 100vh;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(239, 147, 147, .35), transparent 60%),
    radial-gradient(700px 500px at 30% 110%, rgba(191, 166, 123, .35), transparent 60%),
    var(--cq-fond);
  background-attachment: fixed;
}
/* La zone est un BLOC, pas une colonne flex : main a `margin: auto` (centre, 1240 px au plus) et, dans une
   colonne flex, des marges auto laissent main prendre la largeur de son contenu au lieu de remplir la zone —
   mesure du 16/10 : la liste Prospects debordait de 32 px a 1280 px. */
.shell > .zone { flex: 1; min-width: 0; }

/* ---- le rail : deux colonnes (sombre + verre), collees en haut de la fenetre ---- */
.shell .rail, .shell.crm .rail {
  flex: 0 0 auto; position: sticky; top: 0; align-self: flex-start;
  z-index: 40;   /* le menu du compte deborde sur le contenu : il doit passer AU-DESSUS de ses elements empiles */
  height: 100vh; max-height: none; overflow: visible; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; isolation: auto;
}
.shell .rail > summary.rail-pli { display: none; }
.shell .rail .rail-corps {
  display: grid; grid-template-columns: var(--cq-rail) var(--cq-panneau);
  grid-template-rows: 1fr auto; height: 100vh; min-height: 0; padding: 0; gap: 0;
  position: static;
}
.shell .rail .rail-corps::after { content: none; }

/* colonne 1 : le rail sombre */
.shell .rail .rail-modules {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px 8px; background: linear-gradient(180deg, var(--cq-nuit-1), var(--cq-nuit-2));
  overflow-y: auto; scrollbar-width: none;
}
.shell .rail .rail-logo {
  width: 48px; height: 48px; border-radius: 14px; background: var(--cq-bordeaux); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; flex: none; opacity: 1; padding: 0;
}
.shell .rail .rail-logo img { width: 30px; height: 30px; display: block; }
.shell .rail .rail-modules nav.modules { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; width: 100%; }
.shell .rail .rail-modules nav.modules a, .shell .rail .rail-modules a.rail-systeme {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 64px; min-height: 56px; padding: 10px 0; border-radius: 14px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.1;
  color: rgba(249, 229, 212, .78); opacity: 1; text-decoration: none; position: relative;
}
.shell .rail .rail-modules nav.modules a:hover, .shell .rail .rail-modules a.rail-systeme:hover {
  background: rgba(249, 229, 212, .10); color: var(--cq-sable);
}
.shell .rail .rail-modules nav.modules a.active, .shell .rail .rail-modules a.rail-systeme.active {
  background: var(--cq-sable); color: var(--cq-nuit-2); font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.shell .rail .rail-modules nav.modules a.active::before, .shell .rail .rail-modules a.rail-systeme.active::before { content: none; }
.shell .rail .rail-modules a.rail-systeme { margin-top: auto; }
.shell .rail .rail-ico { flex: none; }

/* le compte : en bas du rail sombre */
.shell .rail .rail-compte {
  grid-column: 1; grid-row: 2; position: relative; margin: 0; padding: 8px 0 16px; border: 0;
  background: var(--cq-nuit-2); display: flex; flex-direction: column; align-items: center;
}
.shell .rail .rail-compte > summary {
  list-style: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; border-radius: 22px; background: none;
}
.shell .rail .rail-compte > summary::after, .shell .rail .rail-compte > summary::-webkit-details-marker { display: none; content: none; }
.shell .rail .rail-avatar {
  width: 40px; height: 40px; border-radius: 20px; background: var(--cq-rose); color: var(--cq-nuit-2);
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.shell .rail .rail-compte .rail-nom {   /* lu par les lecteurs d'ecran, jamais dessine dans le rail etroit */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* le menu du compte : une fenetre qui s'ouvre a droite de l'avatar (nom, role, administration, deconnexion) */
.shell .rail .rail-compte-menu {
  position: absolute; left: calc(100% + 10px); bottom: 10px; z-index: 60; width: 260px; padding: 12px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 18px;
  background: linear-gradient(180deg, var(--cq-nuit-1), var(--cq-nuit-2)); color: var(--cq-sable);
  box-shadow: 0 18px 48px rgba(58, 27, 39, .45); border: 1px solid rgba(249, 229, 212, .14);
}
.shell .rail .rail-compte-menu a, .shell .rail .rail-compte-menu form.logout button {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--cq-sable); background: none; border: 0; font: 600 14px var(--f-corps); text-align: left;
  text-decoration: none; cursor: pointer; opacity: 1;
}
.shell .rail .rail-compte-menu a:hover, .shell .rail .rail-compte-menu form.logout button:hover { background: rgba(249, 229, 212, .10); }
.shell .rail .rail-compte-menu a.active { background: rgba(249, 229, 212, .14); font-weight: 700; }
.shell .rail .rail-compte-menu a.active::before { content: none; }
.shell .rail .rail-compte-menu nav.adminzone { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding: 4px 0;
  border-top: 1px solid rgba(249, 229, 212, .14); border-bottom: 1px solid rgba(249, 229, 212, .14); }
.shell .rail .rail-compte-menu .rail-compte-detail { padding: 4px 12px 8px; font-size: 13px; color: var(--cq-sable); }
.shell .rail .rail-compte-menu .rail-role { color: var(--cq-sable); opacity: .85; }
.shell .rail .rail-compte-menu form.logout { margin: 0; }

/* colonne 2 : le panneau de verre des pages du module */
.shell .rail .rail-panneau {
  grid-column: 2; grid-row: 1 / span 2; margin: 16px 0 16px 16px; border-radius: 22px; padding: 22px 14px;
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0;
  background: var(--cq-verre); border: 1px solid var(--cq-verre-bord); box-shadow: var(--cq-ombre);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  color: var(--cq-encre);
}
.shell .rail .rail-entete { display: flex; flex-direction: column; padding: 0 14px 12px; }
.shell .rail .rail-panneau .rail-marque {
  font-family: var(--f-corps); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cq-or-texte); opacity: 1;
}
.shell .rail .rail-panneau .rail-module {
  font-family: var(--f-titre); font-size: 40px; line-height: 1; font-weight: 400; color: var(--cq-bordeaux);
}
.shell .rail .rail-panneau nav.sidenav { display: flex; flex-direction: column; gap: 4px; }
.shell .rail .rail-panneau nav.sidenav a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--cq-encre); background: none; opacity: 1;
  text-decoration: none; position: relative; box-shadow: none;
}
.shell .rail .rail-panneau nav.sidenav a:hover { background: rgba(95, 46, 64, .07); color: var(--cq-encre); }
.shell .rail .rail-panneau nav.sidenav a.on { background: var(--cq-bordeaux); color: var(--cq-sable); font-weight: 700; }
.shell .rail .rail-panneau nav.sidenav a.on::before { content: none; }
.shell .rail .rail-panneau nav.sidenav .nb {
  margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
  background: var(--cq-rose); color: var(--cq-nuit-2); font-size: 12px; font-weight: 700;
}
/* une entree urgente : le mot reste (« urgent » dans l'infobulle de la pastille), la couleur n'est jamais seule */
.shell .rail .rail-panneau nav.sidenav a.urgent { background: rgba(163, 52, 31, .10); color: #7A2415; }
.shell .rail .rail-panneau nav.sidenav a.urgent.on { background: #8B2A18; color: #fff; }
.shell .rail .rail-panneau nav.sidenav a.urgent .nb { background: #8B2A18; color: #fff; }
.shell .rail .rail-panneau .nb-ferme { outline: 2px solid var(--cq-nuit-2); outline-offset: 1px; }
/* (lot 24, chantier 5) le pli « Plus » : les pages qu'on n'ouvre jamais, rangees en bas du panneau sans disparaitre */
.shell .rail .rail-panneau nav.sidenav details.sidenav-plus { margin-top: 6px; border-top: 1px solid rgba(95, 46, 64, .12); padding-top: 6px; }
.shell .rail .rail-panneau nav.sidenav details.sidenav-plus > summary {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--cq-doux); list-style-position: inside;
}
.shell .rail .rail-panneau nav.sidenav details.sidenav-plus > summary:hover { background: rgba(95, 46, 64, .07); color: var(--cq-encre); }
.shell .rail .rail-panneau nav.sidenav details.sidenav-plus > a { margin-top: 4px; }
.shell .rail .rail-panneau nav.sidenav .note-repliee { font-weight: 400; color: var(--cq-doux); }
.shell .rail .rail-panneau nav.sidenav a.on .note-repliee { color: inherit; }
.shell .rail .rail-panneau .rail-sync {
  margin-top: auto; padding: 14px 14px 0; font-size: 12px; color: var(--cq-doux);
  border-top: 1px solid rgba(95, 46, 64, .12);
}

/* ---- la barre du haut en verre -------------------------------------------- */
.shell > .zone > header.barre-haut {
  position: sticky; top: 16px; z-index: 30; margin: 16px 16px 0; padding: 10px 12px 10px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-radius: 18px;
  background: var(--cq-verre); border: 1px solid var(--cq-verre-bord); box-shadow: var(--cq-ombre);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  color: var(--cq-encre);
  overflow: visible; isolation: auto;   /* le theme rogne tout en-tete (overflow hidden) : la liste « Aller a… » en depasse */
}
header.barre-haut::after { content: none; }
.barre-haut .mod-bouton { display: none; }
.barre-haut-espace { flex: 1 1 0; }
/* le fil reste en encre pleine : la barre est collante et du contenu defile dessous, le texte secondaire gris n'y tiendrait pas 4,5:1 */
.barre-haut nav.fil { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cq-encre); min-width: 0; }
.barre-haut nav.fil strong { color: var(--cq-encre); }
.barre-haut .aller-a { position: relative; }
.barre-haut .aller-bouton { display: none; }
.barre-haut .aller-champ {
  display: flex; align-items: center; gap: 10px; height: 40px; min-width: 300px; padding: 0 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(95, 46, 64, .14); color: var(--cq-doux); font-size: 14px;
}
/* Le champ « Aller a… » : le theme dessine TOUS les champs de la plateforme avec un selecteur tres
   specifique ; celui-ci vit dans le verre de la barre, il en prend la place — d'ou les !important. */
.shell .barre-haut .aller-champ input[type="search"] {
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  font: inherit; color: var(--cq-encre); flex: 1; min-width: 0; padding: 0 !important; height: auto !important;
  min-height: 0 !important; border-radius: 0 !important; width: auto; -webkit-appearance: none; appearance: none;
}
.barre-haut .aller-champ input::placeholder { color: var(--cq-doux); opacity: 1; }
.barre-haut .aller-champ:focus-within { outline: 2px solid var(--cq-bordeaux); outline-offset: 2px; }
.barre-haut kbd { font: 600 11px var(--f-corps); padding: 2px 6px; border-radius: 6px; background: rgba(95, 46, 64, .08); color: var(--cq-doux); }
.barre-haut .aller-liste {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(380px, 90vw);
  max-height: min(420px, 70vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px;
  background: rgba(255, 250, 246, .96); border: 1px solid var(--cq-verre-bord);
  box-shadow: 0 18px 48px rgba(58, 27, 39, .22);
}
.barre-haut .aller-a:focus-within .aller-liste { display: block; }
.barre-haut .aller-liste li { margin: 0; }
.barre-haut .aller-liste li[hidden] { display: none; }
.barre-haut .aller-liste li.aucun { padding: 10px 12px; font-size: 14px; color: var(--cq-encre); }
.barre-haut .aller-liste a {
  display: flex; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px;
  text-decoration: none; color: var(--cq-encre); font-size: 14px;
}
.barre-haut .aller-liste a:hover, .barre-haut .aller-liste a:focus-visible, .barre-haut .aller-liste li.choisi a {
  background: rgba(95, 46, 64, .09);
}
.barre-haut .al-m { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cq-or-texte); min-width: 74px; }
.barre-haut .al-p { font-weight: 600; }

/* ---- TELEPHONE : bouton « Module ▾ », tiroir des modules, pages dans la barre basse ---- */
@media (max-width: 620px) {
  .shell, .shell.crm { display: block; background-attachment: scroll; }
  .shell > .zone > header.barre-haut {
    top: 8px; margin: 10px 12px 0; padding: 8px 8px 8px 8px; gap: 8px; border-radius: 22px;
  }
  .barre-haut nav.fil { display: none; }
  .barre-haut .mod-bouton {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 22px;
    border: 0; background: var(--cq-nuit-1); color: var(--cq-sable); font: 700 14px var(--f-corps); cursor: pointer;
  }
  .barre-haut .aller-bouton {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px;
    border: 0; background: rgba(255, 255, 255, .72); color: var(--cq-encre); cursor: pointer; padding: 0;
  }
  .barre-haut .aller-champ { display: none; }
  .barre-haut .aller-a.ouvert { position: static; }
  .barre-haut .aller-a.ouvert .aller-champ {
    display: flex; position: absolute; left: 0; right: 0; top: calc(100% + 8px); min-width: 0; z-index: 51;
    background: rgba(255, 250, 246, .96); height: 48px;
  }
  .barre-haut .aller-a.ouvert .aller-liste { display: block; top: calc(100% + 64px); left: 0; right: 0; width: auto; }
  .barre-haut .aller-a { position: static; }
  .barre-haut .aller-a:focus-within .aller-liste { display: block; top: calc(100% + 64px); left: 0; right: 0; width: auto; }
  .barre-haut kbd { display: none; }

  /* le rail devient un tiroir : ferme par app.js, ouvert par « Module ▾ » ; sans script il reste ouvert, en flux */
  .shell .rail { position: static; height: auto; margin: 10px 12px 0; }
  .shell .rail .rail-corps { display: flex; flex-direction: column; height: auto; border-radius: 22px; overflow: hidden; }
  .shell .rail .rail-modules { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 12px; border-radius: 22px 22px 0 0; }
  .shell .rail .rail-logo { display: none; }
  .shell .rail .rail-modules nav.modules { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .shell .rail .rail-modules a.rail-systeme { margin-top: 0; }
  .shell .rail .rail-panneau { margin: 0; border-radius: 0; padding: 14px; }
  .shell .rail .rail-panneau .rail-module { font-size: 30px; }
  .shell .rail .rail-compte { flex-direction: row; justify-content: flex-start; padding: 8px 12px 12px; border-radius: 0 0 22px 22px; }
  .shell .rail .rail-compte .rail-nom { position: static; width: auto; height: auto; clip: auto; margin-left: 10px; color: var(--cq-sable); }
  .shell .rail .rail-compte { flex-wrap: wrap; }
  .shell .rail .rail-compte-menu { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  html.nav-js .shell .rail { position: fixed; z-index: 45; left: 0; right: 0; top: 70px; margin: 0 12px; height: auto;
    max-height: calc(100vh - 160px); overflow-y: auto; border-radius: 22px; box-shadow: 0 18px 48px rgba(58, 27, 39, .35); }
  html.nav-js .shell .rail:not([open]) { display: none; }

  .shell + .barre-basse, .shell.crm + .barre-basse, .barre-basse {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 40; gap: 4px; padding: 6px;
    border-radius: 22px; background: var(--cq-verre); border: 1px solid var(--cq-verre-bord);
    box-shadow: 0 8px 28px rgba(58, 27, 39, .12);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  }
  .barre-basse a, .barre-basse button.bt-plus {
    flex: 1 1 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border-radius: 14px; font: 600 11px/1.15 var(--f-corps); color: var(--cq-doux); text-decoration: none;
    position: relative; padding: 6px 2px; text-align: center; background: none; border: 0; opacity: 1; cursor: pointer;
  }
  .barre-basse a.on { color: var(--cq-nuit-2); background: rgba(239, 147, 147, .45); }
  /* (lot 16, vague 4, T6) la page courante est dans « Plus » : c'est lui qui s'allume (une seule entree pleine). */
  .barre-basse button.bt-plus.on { color: var(--cq-nuit-2); background: rgba(239, 147, 147, .45); }
  .barre-basse a .nb { position: absolute; top: 4px; right: 12px; min-width: 18px; height: 18px; font-size: 10px;
    background: var(--cq-bordeaux); color: var(--cq-sable); }
  .shell main, .shell.crm main { padding-bottom: 104px; }
}

/* ---- ecrans moyens : le rail et le panneau se resserrent pour que le CONTENU garde sa largeur d'avant
   (a 1280 px : 1000 px de contenu, comme avec l'ancien rail de 218 px) ---- */
@media (min-width: 621px) and (max-width: 1439px) {
  :root { --cq-rail: 72px; --cq-panneau: 176px; }
  .shell .rail .rail-modules nav.modules a, .shell .rail .rail-modules a.rail-systeme { width: 54px; font-size: 10.5px; }
  .shell .rail .rail-logo { width: 42px; height: 42px; }
  .shell .rail .rail-modules { padding-left: 8px; padding-right: 8px; }
  .shell .rail .rail-panneau { margin-left: 8px; padding: 18px 10px; }
  .shell .rail .rail-panneau nav.sidenav a { padding: 0 10px; }
  /* meme largeur de contenu qu'avant le lot 16 A (rail 218 px + marge 14 px, marges de 24 px) : 1000 px a 1280 */
  .shell > .zone > main { padding-left: 12px; padding-right: 12px; }
  .shell .rail .rail-panneau .rail-module { font-size: 34px; }
  .shell > .zone > header.barre-haut { margin: 16px 12px 0; }
  .barre-haut .aller-champ { min-width: 220px; }
}

/* ---- mouvement reduit et impression ------------------------------------------ */
@media (prefers-reduced-motion: reduce) { .shell .rail a, .barre-haut * { transition: none !important; } }
@media print { .shell .rail, header.barre-haut, .barre-basse { display: none !important; } }

/* ---- sans verre (vieux navigateur) : des fonds pleins, meme lisibilite --------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shell .rail .rail-panneau, .shell > .zone > header.barre-haut, .barre-basse { background: rgba(255, 250, 246, .94); }
}