:root{
  --ascend-midnight:#0F0518; --ascend-deep-purple:#400759; --ascend-rose-gold:#B76E79;
  --font-logo:'Jost',sans-serif; --font-display:'Instrument Serif',Georgia,serif; --font-body:'Outfit',system-ui,sans-serif;
}
[data-theme="light"]{
  --bg:#F4F1EF; --card:#FFFFFF; --text:#241030; --text2:#6E6478; --text3:#9A93A2; --text4:#B5AFBC;
  --border:rgba(36,16,48,.09); --borderSoft:rgba(36,16,48,.07); --hoverBg:rgba(36,16,48,.04);
  --track:#E6E1E9; --chipBg:#F0E4E6; --chipText:#8F545D;
  --ink:#241030; --ink-soft:rgba(36,16,48,.30); --neutral:#D2CBD6;
  --danger:#B3261E; --ok-bg:rgba(96,158,94,.13); --ok-tx:#3F7A3E; --bad-bg:rgba(179,38,30,.10); --bad-tx:#A8332C;
  --warn-bg:rgba(176,124,20,.13); --warn-tx:#8A6410;
  --neu-bg:rgba(36,16,48,.05); --panneau:#FAF8F7; --neu-tx:#6E6478; --shadow-card:0 1px 2px rgba(36,16,48,.04),0 8px 22px rgba(36,16,48,.045);
  --shadow-pop:0 26px 70px rgba(15,5,24,.20); --scrim:rgba(15,5,24,.30);
}
[data-theme="dark"]{
  --bg:#0F0518; --card:#1A0B26; --text:#FFFFFF; --text2:#A9A9A9; --text3:#8A8390; --text4:#6B6478;
  --border:rgba(255,255,255,.14); --borderSoft:rgba(255,255,255,.10); --hoverBg:rgba(255,255,255,.06);
  --track:rgba(255,255,255,.14); --chipBg:rgba(183,110,121,.20); --chipText:#E5C9CE;
  --ink:#FFFFFF; --ink-soft:rgba(255,255,255,.30); --neutral:#4A4056;
  --danger:#E28A83; --ok-bg:rgba(124,185,122,.16); --ok-tx:#8FCB8D; --bad-bg:rgba(226,138,131,.15); --bad-tx:#E9A29C;
  --warn-bg:rgba(226,180,96,.16); --warn-tx:#E0B269;
  --neu-bg:rgba(255,255,255,.07); --panneau:rgba(255,255,255,.025); --neu-tx:#A9A9A9; --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 14px 30px rgba(0,0,0,.40);
  --shadow-pop:0 26px 70px rgba(0,0,0,.55); --scrim:rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;-webkit-font-smoothing:antialiased;transition:background .18s,color .18s}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;font:inherit}
a{color:var(--ascend-rose-gold)}
::selection{background:rgba(183,110,121,.3)}
:focus-visible{outline:2px solid var(--ascend-rose-gold);outline-offset:2px;border-radius:4px}

/* La colonne est tenue par un encadre sobre — un filet fin et un fond a peine
   plus clair que le Midnight, sans verre depoli ni ombre portee : le cadre pose
   la colonne, il ne fait pas de decor. Les halos restent larges et pales, ils
   teintent la page derriere lui. */
#connexion{min-height:100dvh;position:relative;display:grid;place-items:center;padding:24px;background:var(--ascend-midnight);overflow:hidden}
#connexion::before,#connexion::after{content:"";position:absolute;border-radius:50%;filter:blur(170px);pointer-events:none}
#connexion::before{width:900px;height:900px;top:-320px;left:-260px;background:radial-gradient(circle,rgba(183,110,121,.26),rgba(183,110,121,0) 68%)}
#connexion::after{width:880px;height:880px;bottom:-330px;right:-240px;background:radial-gradient(circle,rgba(64,7,89,.62),rgba(64,7,89,0) 68%)}
.colonne-co{position:relative;z-index:1;width:100%;max-width:404px;padding:36px 32px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10)}
.tuile-co{width:56px;height:56px;margin:0 auto 26px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.tuile-co img{width:32px;object-fit:contain}
.titre-co{font-family:var(--font-display);font-size:34px;line-height:1.1;letter-spacing:-.01em;color:#fff;text-align:center}
label{display:block;font-size:12px;color:#A9A9A9;margin-bottom:6px}
/* Les champs portent leur intitule en placeholder. Le `aria-label` reste, lui :
   un lecteur d'ecran ne lit pas un placeholder. Le rayon reste celui des
   controles du reste de l'outil — la pilule de la reference detonnait. */
.champ-co{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 18px;margin-bottom:10px;color:#fff}
.champ-co::placeholder{color:#77707F}
.champ-co:focus{border-color:var(--ascend-rose-gold);outline:none;background:rgba(255,255,255,.08)}
.bouton-co{width:100%;background:#fff;color:#1A0B15;font-weight:500;border-radius:12px;padding:11px;margin-top:6px}
.bouton-co:hover{background:#E7E1E4}
.bouton-co[disabled]{opacity:.5}
/* Le lien secondaire n'est pas un bouton : il ne porte ni fond ni bordure, et
   ne se colore qu'au survol. Deux boutons pleins l'un sous l'autre auraient
   donne le meme poids a « se connecter » et a « j'ai oublie ». */
.lien-co{display:block;width:100%;text-align:center;margin-top:15px;font-size:12.5px;color:#A9A9A9;transition:color .15s}
.lien-co:hover{color:var(--ascend-rose-gold)}
/* La zone d'erreur reserve sa ligne meme vide : sinon les champs remontent d'un
   cran au premier essai rate, juste au moment ou l'oeil les cherche. */
.erreur-co{color:#E28A83;font-size:12.5px;margin:20px 0 8px;min-height:17px;text-align:center}
.erreur-co.info{color:#C6BFCB}

#app{display:none}
#app.on{display:grid;grid-template-columns:246px 1fr;height:100dvh}

.rail{border-right:1px solid var(--borderSoft);display:flex;flex-direction:column;padding:22px 14px 18px;overflow-y:auto}
.entete-rail{display:flex;align-items:center;gap:6px;margin-bottom:24px}
.marque{display:flex;align-items:center;gap:11px;padding:0 4px;flex:1;min-width:0}
.marque img{width:34px;height:34px;object-fit:contain;margin:-9px 0;flex:none}
.marque span{font-family:var(--font-logo);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:hidden}
.btn-reduire{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--text4);flex:none;transition:color .15s,background .15s}
.btn-reduire:hover{color:var(--text2);background:var(--hoverBg)}
.compact .entete-rail{justify-content:center}
.compact .marque{flex:none;justify-content:center;padding:0}
.compact .entete-rail{flex-direction:column;justify-content:center;gap:8px}
.compact .txt-marque{display:none}
.compact .btn-reduire svg{transform:rotate(180deg)}
.compact .marque img{margin:0}

/* profil, tout en bas du rail */
.profil-rail{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;cursor:pointer;position:relative}
.profil-rail:hover{background:var(--hoverBg)}
.profil-rail .avatar{width:29px;height:29px;font-size:11.5px}
.profil-rail .tx{min-width:0;flex:1;text-align:left}
.profil-rail .nom{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profil-rail .sub{display:block;font-size:11px;color:var(--text3)}
.compact .profil-rail{justify-content:center;padding:9px 0}
.compact .profil-rail .tx,.compact .profil-rail>svg{display:none}
.menu-profil{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-pop);padding:6px;display:none;flex-direction:column;gap:1px;z-index:50}
.menu-profil.ouvert{display:flex}
.compact .menu-profil{left:0;width:190px}
.menu-profil button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;font-size:13px;color:var(--text2);text-align:left}
.menu-profil button:hover{background:var(--hoverBg);color:var(--text)}
.menu-profil button svg{flex:none;color:var(--text3)}
.sep-menu{height:1px;background:var(--borderSoft);margin:5px 2px}

/* fraicheur, intégrée près de la recherche */
.fraicheur{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card);cursor:default;white-space:nowrap;flex:none}
.fraicheur .point{width:7px;height:7px;border-radius:50%;flex:none}
.fraicheur .point.ok{background:#5FA35D;box-shadow:0 0 0 3px var(--ok-bg)}
.fraicheur .point.att{background:#D6A24A;box-shadow:0 0 0 3px rgba(214,162,74,.16)}
.fraicheur span{font-size:12px;color:var(--text2)}

/* date + salutation, plus de presence */
.date-jour{font-size:12px;color:var(--text3);margin-bottom:4px;text-transform:capitalize}
.salutation{font-family:var(--font-display);font-size:42px;line-height:1.15;letter-spacing:-.01em;color:var(--text)}

/* popover de periode, dans l'esprit de la reference (presets a gauche, calendrier a droite) */
.bouton-chip{position:relative}
.popover-periode{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);padding:10px;display:none;z-index:45}
.avec-popover select{pointer-events:none}
.popover-periode.ouvert{display:flex;flex-direction:column;gap:10px}
/* Le bouton Exporter porte son propre fond : son enveloppe ne sert qu'a ancrer
   le popover, elle ne peint rien. */
.enveloppe-export{position:relative;display:flex}
.enveloppe-export[hidden]{display:none}
.popover-export{position:absolute;top:calc(100% + 8px);right:0;width:270px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);padding:14px;display:none;z-index:45}
.popover-export.ouvert{display:flex;flex-direction:column;gap:9px}
.ex-titre{font-size:13.5px;font-weight:600;color:var(--text)}
.ex-sous{font-size:12px;color:var(--text3);line-height:1.45}
#sel-mois-rapport{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font-size:13px;font-family:inherit}
.ex-etat{font-size:12px;color:var(--text3);line-height:1.45;min-height:16px}
.ex-etat.erreur{color:var(--text)}
.pp-corps{display:flex;gap:6px}
.pp-colonne{display:flex;flex-direction:column;gap:1px;min-width:168px;border-right:1px solid var(--borderSoft);padding-right:10px}
.pp-colonne button{display:flex;justify-content:space-between;gap:14px;padding:8px 10px;border-radius:7px;font-size:13px;color:var(--text2);text-align:left;white-space:nowrap}
.pp-colonne button:hover{background:var(--hoverBg);color:var(--text)}
.pp-colonne button[aria-pressed="true"]{background:var(--hoverBg);color:var(--text);font-weight:500}
.pp-colonne .pp-plage{font-size:11px;color:var(--text4);font-weight:400}

.pp-calendrier{display:flex;gap:18px}
.pp-mois{width:222px}
.pp-mois-entete{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 10px}
.pp-mois-entete .nom{font-size:13px;font-weight:500;color:var(--text)}
.pp-mois-entete button{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--text3)}
.pp-mois-entete button:hover{background:var(--hoverBg);color:var(--text)}
.pp-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pp-jsem{font-size:10.5px;color:var(--text4);text-align:center;padding-bottom:4px}
.pp-jour{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--text2);border-radius:7px}
.pp-jour:hover{background:var(--hoverBg)}
.pp-jour.hors{color:var(--text4);opacity:.45}
.pp-jour.auj{box-shadow:inset 0 0 0 1px var(--border)}
.pp-jour.plage{background:var(--hoverBg);border-radius:0}
.pp-jour.plage-debut{border-radius:7px 0 0 7px}
.pp-jour.plage-fin{border-radius:0 7px 7px 0}
.pp-jour.selectionne{background:var(--ink);color:var(--card)}

.pp-pied{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--borderSoft)}
.pp-champ{border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12.5px;color:var(--text2);min-width:88px;text-align:center}
.pp-tiret{color:var(--text4)}
.pp-btn{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:500;border:1px solid var(--border);color:var(--text2)}
.pp-btn:hover{background:var(--hoverBg);color:var(--text)}
.pp-btn-primaire{background:var(--ink);color:var(--card);border-color:var(--ink)}
.pp-btn-primaire:hover{background:var(--ink);color:var(--card);opacity:.85}
.pp-btn-primaire:disabled{opacity:.4;cursor:default}
.pp-btn-primaire:disabled:hover{opacity:.4}

#app.compact.on{grid-template-columns:74px 1fr}
.compact .nav-item .lbl,.compact .chip-client .tx,
.compact .chip-client>svg{display:none}
.compact .chip-client{justify-content:center;padding:9px 0}
.compact .nav-item{justify-content:center;padding:9px 0}
.chip-client{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:11px 12px;margin-bottom:24px;display:flex;align-items:center;gap:11px;cursor:pointer;box-shadow:var(--shadow-card);position:relative}
.chip-client:hover{border-color:var(--ascend-rose-gold)}
.chip-client select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.chip-client .av{width:29px;height:29px;border-radius:8px;background:var(--chipBg);display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--chipText);flex:none}
.chip-client .tx{min-width:0;flex:1;position:relative}
.chip-client .nom{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-client .sub{display:block;font-size:11.5px;color:var(--text3);margin-top:1px}
.chip-client .sub:empty{display:none}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--text2);cursor:pointer;position:relative}
.nav-item:hover{background:var(--hoverBg)}
.nav-item[aria-current="true"]{background:var(--card);box-shadow:var(--shadow-card);color:var(--text)}
.nav-item svg{flex:none}
.nav-item .lbl{font-size:13.5px}
.nav-liste{display:flex;flex-direction:column;gap:2px}
.sep-nav{height:1px;background:var(--borderSoft);margin:10px 4px}
.rail-bas{margin-top:auto;display:flex;flex-direction:column;gap:8px;position:relative}
.sortie{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--text3);width:100%;text-align:left;font-size:13px}
.sortie:hover{background:var(--hoverBg);color:var(--text2)}

.colonne{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.entete1,.entete2,.contenu{width:100%}
.entete1{padding:28px 26px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
.recherche{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:10px 18px;flex:1 1 auto;max-width:620px;box-shadow:var(--shadow-card);cursor:pointer}
.recherche:hover{border-color:var(--ascend-rose-gold)}
.recherche .lbl{font-size:13.5px;color:var(--text4);flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd{display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 6px;font-family:var(--font-body);font-size:10.5px;font-weight:500;line-height:1;letter-spacing:0;color:var(--text3);border:1px solid var(--border);border-radius:5px;flex:none}
.avatar{width:33px;height:33px;border-radius:50%;background:var(--ascend-deep-purple);display:grid;place-items:center;font-size:12.5px;font-weight:500;color:#E5C9CE;flex:none}
.btn-theme{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;color:var(--text3);flex:none;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.btn-theme:hover{color:var(--text);background:var(--card);border-color:var(--border)}
.btn-icone{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;color:var(--text3);flex:none;border:1px solid transparent}
.btn-icone:hover{color:var(--text);background:var(--hoverBg);border-color:var(--border)}

.entete2{padding:38px 26px 16px;display:flex;align-items:center;gap:12px;flex:none;flex-wrap:wrap}
/* l'en-tete date + salutation + filtres est propre a la Vue d'ensemble. Les autres
   pages portent le leur dans #contenu. `hidden` seul ne suffit pas : display:flex
   ci-dessus l'emporte sur la regle [hidden] de l'agent utilisateur. */
.entete2[hidden],.bouton-chip[hidden],.btn-export[hidden]{display:none}
.titre-page{font-family:var(--font-display);font-size:34px;line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.sous-page{font-size:12.5px;color:var(--text3);margin-top:6px;max-width:620px;line-height:1.45}
.entete2[hidden] + .contenu{padding-top:30px}
.titre-section{font-family:var(--font-logo);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);margin:0 0 10px 2px}
.bouton-chip{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px 13px;cursor:pointer;box-shadow:var(--shadow-card);position:relative}
.bouton-chip:hover{border-color:var(--ascend-rose-gold)}
.bouton-chip span{font-size:13px;color:var(--text)}
.bouton-chip .sub{font-size:12.5px;color:var(--text4)}
.bouton-chip select{position:absolute;inset:0;opacity:0;cursor:pointer}
.btn-export{display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--card);border:1px solid var(--ink);border-radius:9px;padding:8px 13px;cursor:pointer;box-shadow:var(--shadow-card);font-size:13px;font-weight:500}
.btn-export:hover{opacity:.85}
.btn-export svg{flex:none}

.contenu{flex:1;min-height:0;overflow:auto;padding:0 26px 22px;display:flex;flex-direction:column;gap:20px}

/* Cinq colonnes au bureau : a 1181 px une case n'a plus que ~128 px, et un montant
   au cent (« 58 900,00 $ ») en fait 178 a 46 px. Le chiffre suit donc la largeur
   de la fenetre et retrouve ses 46 px vers 1480 px ; sous 1180 le bandeau repasse
   en deux colonnes et --kpi-chiffre revient a 46 px.
   Dans une case etroite, un intitule passe sur deux lignes : chaque case partage
   donc les rangees du bandeau (subgrid : intitule, chiffre, ecart), sans quoi son
   chiffre descendrait plus bas que celui de ses voisines. */
.bandeau{--kpi-chiffre:clamp(30px, calc(5vw - 28px), 46px);background:var(--card);border:1px solid var(--borderSoft);border-radius:16px;box-shadow:var(--shadow-card);display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:auto auto 1fr;min-height:134px;flex:none}
.kpi-c{padding:20px 24px 22px;display:grid;grid-template-rows:subgrid;grid-row:span 3;min-width:0}
.kpi-c{position:relative}
.kpi-c + .kpi-c::before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:1px;background:var(--borderSoft)}
.kpi-c .k{font-family:var(--font-logo);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.kpi-c .v{display:flex;align-items:baseline;margin-top:10px;gap:10px;flex-wrap:nowrap;min-width:0}
.kpi-c .v b{font-family:var(--font-display);font-size:var(--kpi-chiffre);line-height:1.05;font-weight:400;letter-spacing:-.015em;color:var(--text);white-space:nowrap}
.kpi-c .v .serif{font-family:var(--font-display);font-size:var(--kpi-chiffre);line-height:1.05;letter-spacing:-.015em;color:var(--text);white-space:nowrap;font-weight:400}
.kpi-c .v small{font-size:13px;color:var(--text4);white-space:nowrap}
/* ligne secondaire : remplace l'information que portaient les barres */
/* Quand la pilule et son libelle ne tiennent plus cote a cote, le libelle passe
   dessous plutot que de se tronquer — ce que le palier 640 fait de toute facon. */
.kpi-c .sous{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;padding-top:12px;min-width:0}
.pilule{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:500;white-space:nowrap;flex:none}
.pilule.pos{background:var(--ok-bg);color:var(--ok-tx)}
.pilule.neg{background:var(--bad-bg);color:var(--bad-tx)}
.pilule.neu{background:var(--neu-bg);color:var(--neu-tx)}
.pilule svg{flex:none}
.sous-lbl{font-size:11.5px;color:var(--text4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.carte{background:var(--card);border:1px solid var(--borderSoft);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden}
.carte-titre{display:flex;align-items:center;gap:12px;padding:17px 24px 0}
.carte-titre span{font-size:15px;font-weight:600;letter-spacing:-.01em}
/* Hauteur de la rangee « Evolution / A venir / Activite recente ». Sans plafond,
   la liste la plus longue impose sa hauteur a toute la rangee et `align-items:
   stretch` etire les autres cartes autour d'un graphique de 308 px — un bloc de
   vide sous la courbe. Les cartes-listes prennent donc la hauteur du graphique et
   defilent dedans. La valeur est mesuree apres rendu par evolutionEtAvenir() ;
   celle-ci n'est qu'un repli pour la premiere image. */
/* Une seule source pour la hauteur du graphique. L'axe des valeurs est un
   overlay HTML positionne en pixels a cote d'un SVG a largeur fluide : si les
   deux hauteurs divergent d'un pixel, l'axe et la courbe se desynchronisent. */
:root{--h-rangee:376px;--h-graphe:308px}
.rangee-cartes{display:flex;gap:20px;flex-wrap:wrap;align-items:stretch;min-height:0}
.carte-liste{height:var(--h-rangee);overflow:hidden}
/* .carte est en overflow:hidden pour que ses enfants respectent le rayon des
   coins. Le survol du funnel est positionne en `top:100%` d'une cellule qui
   touche le bas de la carte : il tombait donc entierement hors du cadre et se
   faisait rogner. Cette carte-la, et elle seule, laisse deborder. */
.carte-funnel{overflow:visible}
.funnel-grille{display:grid;grid-template-columns:repeat(5,1fr);padding:2px 4px 0}
.fcell{position:relative;outline:none;padding:18px 20px 20px;display:flex;flex-direction:column;cursor:default}
.fcell + .fcell{border-left:1px solid var(--borderSoft)}
.fcell .ic-lbl{display:flex;align-items:center;gap:8px;height:15px}
.fcell .ic-lbl span{font-family:var(--font-logo);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.fcell .gros{font-family:var(--font-display);font-size:56px;line-height:1;letter-spacing:-.015em;color:var(--text);margin-top:14px;white-space:nowrap;align-self:flex-start}
.fcell .gros.incomplet{border-bottom:1px dashed var(--ink-soft);padding-bottom:4px}
.fcell .taux-ligne{display:flex;align-items:baseline;gap:7px;height:18px;margin-top:16px}
.fcell .taux{font-size:18px;line-height:1;font-weight:500;color:var(--text)}
.fcell .fleche{flex:none;align-self:center;color:var(--text4)}
.fcell .denom{display:block;font-size:11.5px;color:var(--text3);height:14px;margin-top:12px}
.fcell .cout{display:flex;align-items:baseline;gap:7px;margin-top:18px}
.fcell .cout b{font-size:13.5px;color:var(--text2);font-weight:400}
.fcell .cout small{font-size:11.5px;color:var(--text4)}
/* le code couleur du funnel porte sur le COUT par etage, jamais sur le taux : il
   compare au plafond que « Plan & cibles » calcule (budget / volume requis). Le
   chiffre lui-meme se colore, sans pastille ni cadre — le plafond et l'ecart se
   lisent au survol. */
.fcell .cout b.niv{font-weight:500}
.fcell .cout b.niv-ok,  .acq-c.niv-ok  {color:var(--ok-tx)}
.fcell .cout b.niv-warn,.acq-c.niv-warn{color:var(--warn-tx)}
.fcell .cout b.niv-bad, .acq-c.niv-bad {color:var(--bad-tx)}
.pop{position:absolute;top:100%;margin-top:6px;z-index:40;width:212px;background:#241030;border-radius:9px;padding:11px 13px;display:none;flex-direction:column;gap:5px;box-shadow:0 10px 26px rgba(0,0,0,.35);pointer-events:none;text-align:left}
/* Le survol ne revele que la ou il existe : sur tactile un :hover peut rester
   colle apres un appui, et il n'y a de toute facon rien a survoler. */
@media (hover:hover){.fcell:hover .pop,.fcell:focus-within .pop{display:flex}}
/* L'appui, lui, pose une classe — voir le rendu du funnel. */
.fcell.ouvert .pop{display:flex}
.pop.g{left:14px}.pop.d{right:14px}
.pop .ligne{display:flex;align-items:baseline;gap:8px}
.pop .ligne b{font-size:11.5px;color:#FFFFFF;white-space:nowrap;flex:none;font-weight:500}
.pop .ligne span{font-size:11px;line-height:1.4;color:rgba(255,255,255,.6)}
.pop hr{height:1px;border:none;background:rgba(255,255,255,.1);margin:8px 0;width:100%}

.evo-tete{display:flex;align-items:center;gap:12px;padding:17px 24px 0}
.onglets-m{display:flex;align-items:center;gap:2px}
.onglet-m{padding:6px 10px;border-radius:7px;font-size:12.5px;color:var(--text2)}
.onglet-m:hover{color:var(--text)}
.onglet-m[aria-current="true"]{font-weight:500;color:var(--text);background:var(--hoverBg)}
.seg2{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg2 button{padding:6px 11px;font-size:12.5px;color:var(--text2)}
.seg2 button+button{border-left:.7px solid var(--borderSoft)}
.seg2 button[aria-pressed="true"]{font-weight:500;color:var(--text);background:var(--hoverBg)}
.comparer{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:7px;position:relative}
.comparer:hover{background:var(--hoverBg)}
.comparer select{position:absolute;inset:0;opacity:0;cursor:pointer}
.comparer .tr{width:16px;height:2px;background:var(--neutral);flex:none}
.comparer span{font-size:12.5px;color:var(--text2);white-space:nowrap}
.evo-corps{display:flex;align-items:flex-start;gap:0;padding:12px 24px 6px;position:relative}
.axe-y{width:52px;height:var(--h-graphe);position:relative;flex:none}
.axe-y span{position:absolute;right:12px;transform:translateY(-50%);font-size:10.5px;color:var(--text4);white-space:nowrap}
/* flex:1 + min-width:0 : sans ca le SVG en width:100% reference un parent
   sans largeur definie (boucle) et s'effondre a sa taille intrinseque. */
.svg-wrap{position:relative;flex:1 1 auto;min-width:0}
/* fil d'activite : un point par evenement, relies par un filet vertical */
.act-liste{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 16px;display:flex;flex-direction:column}
.act-lig{display:grid;grid-template-columns:29px minmax(0,1fr) auto;gap:11px;padding-bottom:15px;position:relative;border-radius:8px}
.act-lig::before{content:'';position:absolute;left:14px;top:33px;bottom:1px;width:1px;background:var(--borderSoft)}
.act-lig:last-child{padding-bottom:0}
.act-lig:last-child::before{display:none}
.act-ouvrable{cursor:pointer}
.act-ouvrable:hover,.act-ouvrable:focus-visible{outline:none}
.act-ouvrable:hover .act-tx b,.act-ouvrable:focus-visible .act-tx b{color:var(--ascend-rose-gold)}
.act-av{width:29px;height:29px;border-radius:50%;background:var(--neu-bg);color:var(--text2);
  display:grid;place-items:center;position:relative;z-index:1;flex:none}
.act-tx{min-width:0;padding-top:1px}
.act-tx b{display:block;font-size:12.5px;font-weight:500;color:var(--text);line-height:1.3}
.act-tx small{display:block;font-size:11.5px;color:var(--text3);margin-top:2px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-pill{display:inline-block;margin-top:6px;max-width:100%;padding:2px 8px;border-radius:999px;
  background:var(--neu-bg);color:var(--neu-tx);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-t{font-size:10.5px;color:var(--text4);white-space:nowrap;padding-top:2px}
.act-fenetre{font-size:11px;color:var(--text4);white-space:nowrap;margin-left:auto}

.avenir-tete{display:flex;align-items:baseline;gap:10px;padding:17px 20px 0;flex:none}
.avenir-tete b{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.avenir-tete .n{font-size:12.5px;color:var(--text3);white-space:nowrap}
.avenir-tete .lien{font-size:11.5px;color:var(--ascend-rose-gold);white-space:nowrap;margin-left:auto}
.avenir-tete .lien:hover{color:#8F545D}
.avenir-corps{display:flex;flex-direction:column;gap:14px;padding:16px 20px 0;flex:1;min-height:0;overflow-y:auto}
.avenir-jour{display:flex;flex-direction:column;gap:8px}
.avenir-jour .lbl{display:flex;align-items:center;gap:9px}
.avenir-jour .lbl span:first-child{font-family:var(--font-logo);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);white-space:nowrap}
.avenir-jour .lbl .fil{flex:1;height:1px;background:var(--borderSoft)}
.avenir-ligne{display:flex;align-items:baseline;gap:9px}
.avenir-ligne .h{font-size:12px;color:var(--text);width:48px;flex:none}
.avenir-ligne .n{font-size:12.5px;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avenir-ligne .t{font-size:10.5px;color:var(--text4);white-space:nowrap}
.avenir-fin{display:flex;align-items:baseline;gap:7px;padding:0 20px 15px;margin-top:auto}
.avenir-fin b{font-size:11.5px;color:var(--text);font-weight:500}
.avenir-fin span{font-size:11.5px;color:var(--text4)}

.scrim{position:fixed;inset:0;z-index:90;background:var(--scrim);display:none;justify-content:center;align-items:flex-start;padding-top:138px}
.scrim.ouvert{display:flex}
.palette{width:640px;max-width:calc(100vw - 40px);background:var(--card);border-radius:14px;box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column}
.palette-in{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--borderSoft)}
.palette-in input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;color:var(--text)}
.palette-liste{padding:7px 0 8px;display:flex;flex-direction:column;max-height:360px;overflow-y:auto}
.palette-row{display:flex;align-items:center;gap:12px;padding:9px 18px;cursor:pointer}
.palette-row:hover,.palette-row.actif{background:var(--hoverBg)}
.palette-row .lbl{font-size:13.5px;color:var(--text)}
.palette-row .meta{font-size:11.5px;color:var(--text3);margin-left:auto}
.palette-vide{padding:22px 18px;font-size:13px;color:var(--text3);text-align:center}

.vide{text-align:center;padding:70px 20px}
.vide p:first-child{font-family:var(--font-display);font-size:26px;margin-bottom:8px}
.vide p:last-child{color:var(--text3);max-width:420px;margin:0 auto;font-size:13px}

/* `flex:none` est essentiel : en flex item retractable avec min-height:0, la page
   se faisait ecraser a la hauteur du conteneur et son contenu debordait sans jamais
   creer de barre de defilement — le registre etait tronque. Seules les sections qui
   gerent leur propre defilement passent en flex:1, plus bas. */
.pipe-page{display:flex;flex-direction:column;gap:14px;flex:none;min-height:0}
.contenu.sans-defilement{overflow:hidden}
.contenu.sans-defilement > .pipe-page{flex:1}
/* le plateau est lui-meme une pipe-page imbriquee : il doit prendre la hauteur
   que la barre lui laisse. */
.pipe-page > .pipe-page{flex:1}

/* calendrier : une grille de 8 colonnes, en-tete collante, blocs positionnes a
   l'heure. La duree n'est pas stockee — un rendez-vous vaut une heure. */
.cal{flex:1;min-height:0;overflow:auto;position:relative;display:grid;
  grid-auto-rows:min-content;
  background:var(--card);border:1px solid var(--borderSoft);border-radius:14px;box-shadow:var(--shadow-card)}
.cal-coin{position:sticky;top:0;left:0;z-index:3;background:var(--card);border-bottom:1px solid var(--border)}
.cal-tete{position:sticky;top:0;z-index:2;background:var(--card);border-bottom:1px solid var(--border);
  border-left:1px solid var(--borderSoft);padding:11px 10px;display:flex;align-items:baseline;gap:7px}
.cal-tete.auj{background:var(--hoverBg)}
.cal-jn{font-family:var(--font-logo);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.cal-tete.auj .cal-jn{color:var(--text)}
.cal-jc{font-family:var(--font-display);font-size:14px;line-height:1;color:var(--text3);margin-left:auto}
.cal-axe{position:sticky;left:0;z-index:1;background:var(--card)}
.cal-h{font-size:10.5px;color:var(--text4);text-align:right;padding:3px 8px 0;
  border-top:1px solid var(--borderSoft);box-sizing:border-box}
.cal-col{position:relative;border-left:1px solid var(--borderSoft);
  background:repeating-linear-gradient(to bottom,var(--borderSoft) 0 1px,transparent 1px var(--cal-h))}
.cal-col.auj{background-color:var(--hoverBg)}
.cal-bloc{position:absolute;overflow:hidden;padding:5px 7px;border-radius:7px;
  background:var(--bg);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:1px}
.cal-bloc:hover,.cal-bloc:focus-visible{border-color:var(--ascend-rose-gold);outline:none}
.cal-bloc.passe{border-style:dashed;opacity:.6}
.cal-bloc b{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-bloc small{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-bloc .cal-tr{color:var(--text4)}
.cal-nav{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);
  background:var(--card);font-size:15px;color:var(--text2);box-shadow:var(--shadow-card)}
.cal-nav:hover{border-color:var(--ascend-rose-gold);color:var(--text)}
.cal-auj{padding:7px 13px;border-radius:8px;border:1px solid var(--border);background:var(--card);
  font-size:12.5px;color:var(--text2);box-shadow:var(--shadow-card)}
.cal-auj:hover:not(:disabled){border-color:var(--ascend-rose-gold);color:var(--text)}
.cal-auj:disabled{opacity:.4;cursor:default}
.cal-lbl{font-size:13px;color:var(--text);font-weight:500;white-space:nowrap}
.cal-n{font-size:12px;color:var(--text3);white-space:nowrap}

.cal-mois{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:minmax(112px,1fr);background:var(--card);border:1px solid var(--borderSoft);
  border-radius:14px;box-shadow:var(--shadow-card)}
.cal-mois-tete{position:sticky;top:0;z-index:2;background:var(--card);border-bottom:1px solid var(--border);
  padding:10px;font-family:var(--font-logo);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.cal-mois-c{border-top:1px solid var(--borderSoft);border-left:1px solid var(--borderSoft);
  padding:7px 8px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden}
.cal-mois-c:nth-child(7n+1){border-left:none}
.cal-mois-c.hors{background:var(--hoverBg)}
.cal-mois-c.hors .cal-mois-n{color:var(--text4)}
.cal-mois-c.auj .cal-mois-n{color:var(--text);font-weight:600}
.cal-mois-n{font-size:12px;color:var(--text3)}
.cal-puce{display:flex;align-items:baseline;gap:6px;padding:3px 6px;border-radius:6px;background:var(--bg);
  border:1px solid var(--borderSoft);cursor:pointer;min-width:0}
.cal-puce:hover,.cal-puce:focus-visible{border-color:var(--ascend-rose-gold);outline:none}
.cal-puce.passe{border-style:dashed;opacity:.6}
.cal-puce .h{font-size:10px;color:var(--text4);flex:none}
.cal-puce .n{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-mois-plus{align-self:flex-start;font-size:10.5px;color:var(--text3);padding:1px 4px}
.cal-mois-plus:hover{color:var(--text)}
.pipe-vide{padding:26px 20px;text-align:center;font-size:12.5px;color:var(--text3);line-height:1.5}
.pipe-note{padding:12px 20px;font-size:11.5px;color:var(--text4);border-top:1px solid var(--borderSoft)}
.pipe-nom{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pipe-nom b,.pipe-nom .pipe-lien{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pipe-lien{color:var(--text);text-decoration:none;border-bottom:1px solid transparent;width:fit-content;max-width:100%}
.pipe-lien:hover,.pipe-lien:focus-visible{color:var(--ascend-rose-gold);border-bottom-color:currentColor;outline:none}
.pipe-nom small{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pipe-select{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:12.5px;color:var(--text);box-shadow:var(--shadow-card);cursor:pointer;font-family:var(--font-body);max-width:100%}
.kan{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;align-items:stretch;flex:1;min-height:0}
.kan-col{flex:1 0 296px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--borderSoft);border-radius:14px;box-shadow:var(--shadow-card);min-height:0}
.kan-tete{padding:15px 16px 12px;border-bottom:1px solid var(--borderSoft);display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.kan-nom{font-size:13px;font-weight:500;color:var(--text);flex:1;min-width:0}
.kan-n{font-family:var(--font-display);font-size:19px;line-height:1;color:var(--text2)}
/* le sens de tri se regle dans la colonne, pas dans la barre : discret au repos,
   lisible au survol — le meme registre que les en-tetes triables d'Acquisition. */
.kan-tri{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:5px;
  font-size:10px;line-height:1;color:var(--text4);opacity:.55}
.kan-tri:hover,.kan-tri:focus-visible{opacity:1;color:var(--text);background:var(--hoverBg);outline:none}
.kan-col:hover .kan-tri{opacity:1}
.kan-corps{flex:1;min-height:0;overflow-y:auto;padding:11px;display:flex;flex-direction:column;gap:9px}
.kan-vide{padding:14px 5px;text-align:center;font-size:12px;color:var(--text4)}
.kan-carte{padding:12px 14px;border:1px solid var(--borderSoft);border-radius:11px;background:var(--bg);cursor:pointer;display:flex;flex-direction:column;gap:4px}
.kan-carte:hover,.kan-carte:focus-visible{border-color:var(--ascend-rose-gold);outline:none}
.kan-carte b{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kan-carte small{font-size:11.5px;color:var(--text3);line-height:1.4}
.kan-carte .kan-suite{color:var(--text4)}
.kan-plus{padding:9px;font-size:11.5px;color:var(--text3);border-top:1px solid var(--borderSoft)}
.kan-plus:hover{color:var(--text);background:var(--hoverBg)}
/* Reperes et libelles propres au telephone (bloc 640 px) : absents au bureau, ou
   les colonnes se voient toutes et les reglages ont la place de leurs intitules. */
.kan-points,.nom-court,.offre-mini{display:none}

/* la fiche d'un lead : centree, fond cliquable pour fermer */
.modal-fond{position:fixed;inset:0;z-index:80;background:var(--scrim);display:grid;place-items:center;padding:24px;overflow-y:auto}
.modal{width:640px;max-width:100%;max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-pop);overflow:hidden}
.modal-x{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--text3)}
.modal-x:hover{background:var(--hoverBg);color:var(--text)}
/* Deux colonnes : a gauche QUI (nom, coordonnees, GoHighLevel), a droite CE QUI
   S'EST PASSE. La hauteur est fixe et seul le parcours defile : les coordonnees
   restent sous la main pendant qu'on remonte l'historique. */
.fiche{position:relative;width:960px;height:min(720px,calc(100dvh - 48px));display:grid;grid-template-columns:280px minmax(0,1fr)}
.fiche > .modal-x{position:absolute;top:14px;right:16px}
.fiche-id{padding:30px 24px 24px;background:var(--panneau);border-right:1px solid var(--borderSoft);display:flex;flex-direction:column;gap:28px;min-height:0;overflow-y:auto}
.fiche-nom h2{margin:0;font-size:25px;font-weight:500;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.fiche-coord{display:flex;flex-direction:column;gap:16px}
.fiche-coord .titre-section{margin:0}
/* Les coordonnees sont du texte simple ; un clic les copie. Aucun bouton : le
   soulignement au survol et l'intitule qui devient « Numero copie » suffisent. */
/* .k est, partout ailleurs, l'etiquette en capitales espacees (regle globale plus
   bas). La fiche se lit en Outfit, en casse normale : on la neutralise ici. */
.fiche .k{font-family:var(--font-body);letter-spacing:normal;text-transform:none}
.fiche-champ{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0;text-align:left;min-width:0;max-width:100%}
.fiche-champ .k{font-size:12px;color:var(--text2)}
.fiche-champ .v{display:flex;align-items:center;gap:7px;max-width:100%;font-size:15px;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.fiche-copiable{cursor:copy}
.fiche-copiable:hover .v{text-decoration:underline;text-decoration-color:var(--ascend-rose-gold);text-underline-offset:3px}
.fiche-copier-ic{display:none;flex:none;color:var(--text3)}
.fiche-tel{display:flex;align-items:center;gap:10px}
.fiche-appeler,.fiche-ghl-court{display:none}
.fiche-ghl{margin-top:auto;height:40px;flex:none;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid var(--border);font-size:13px;font-weight:500;color:var(--text);text-decoration:none}
.fiche-ghl:hover,.fiche-ghl-court:hover{border-color:var(--ascend-rose-gold)}
.fiche-parcours{display:flex;flex-direction:column;min-width:0;min-height:0}
.fiche-ptete{flex:none;display:flex;align-items:center;gap:12px;padding:20px 64px 14px 32px;border-bottom:1px solid var(--borderSoft)}
.fiche-ptete .titre-section{margin:0;flex:1}
.fiche-compte{font-size:12.5px;color:var(--text2)}
.fiche-defile{flex:1;min-height:0;overflow-y:auto;padding:24px 32px 12px}
.fiche-vide{font-size:13px;color:var(--text3)}
/* Un evenement : la date et l'heure dans la marge, un point sur le fil, puis
   trois niveaux qui ne changent jamais d'ordre — le type (petit, gris), le fait
   principal (gras), les details (petits, en intitule / valeur). */
.fiche-ev{display:grid;grid-template-columns:92px 22px minmax(0,1fr);column-gap:14px}
.fiche-quand{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.fiche-quand b{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap}
.fiche-quand span{font-size:12.5px;color:var(--text2);white-space:nowrap}
.fiche-fil{display:flex;flex-direction:column;align-items:center;padding-top:5px}
.fiche-fil::before{content:'';width:9px;height:9px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--text2);flex:none}
.fiche-fil::after{content:'';width:1px;flex:1;background:var(--borderSoft);margin-top:6px}
.fiche-ev:last-child .fiche-fil::after{visibility:hidden}
.fiche-ev-corps{padding-bottom:30px;display:flex;flex-direction:column;min-width:0}
.fiche-ev-type{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text2)}
.fiche-ev-type svg{flex:none}
.fiche-ev-fait{margin-top:6px;font-size:15.5px;font-weight:500;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.fiche-tuiles{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:460px}
.fiche-tuile{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border-radius:10px;background:var(--neu-bg)}
.fiche-tuile .k{font-size:11.5px;color:var(--text2)}
.fiche-tuile .v{font-size:15.5px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.fiche-details{margin-top:10px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:5px 12px;align-items:baseline}
.fiche-details[hidden]{display:none}
.fiche-details .k{font-size:12px;color:var(--text3)}
.fiche-details .v{font-size:12.5px;line-height:1.45;color:var(--text2);overflow-wrap:anywhere}
.fiche-details .v.vide{color:var(--text4)}
.fiche-plus{margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:2px 0;font-size:12.5px;color:var(--text3)}
.fiche-plus:hover{color:var(--text)}
.fiche-plus[aria-expanded="true"] svg{transform:rotate(180deg)}

/* onglets de section : soulignes, jamais des boutons — ils disent OU l'on est,
   pas ce que l'on regle. */
.pipe-nav{display:flex;align-items:flex-end;gap:24px;border-bottom:1px solid var(--borderSoft);flex:none}
.pipe-nav button{position:relative;padding:0 0 11px;font-size:14.5px;color:var(--text3);display:flex;align-items:baseline;gap:8px}
.pipe-nav button:hover{color:var(--text2)}
.pipe-nav button.actif{color:var(--text);font-weight:500}
.pipe-nav button.actif::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ascend-rose-gold)}
.pipe-nav .n{font-family:var(--font-display);font-size:14px;color:var(--text4)}
.pipe-nav button.actif .n{color:var(--text3)}

/* rangee de reglages : un intitule devant chaque controle */
.pipe-reglages{display:flex;align-items:center;gap:20px;flex-wrap:wrap;flex:none}
.reglage{display:flex;align-items:center;gap:9px;min-width:0}
/* le selecteur de periode adopte par le registre : meme gabarit que les menus voisins */
.reglage .bouton-chip{padding:7px 12px}
.reglage .bouton-chip span{font-size:12.5px}
.reglage .k{white-space:nowrap}
.pipe-resume{margin-left:auto;font-size:12.5px;color:var(--text3);white-space:nowrap}
.pipe-barre{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.pipe-espace{flex:1;min-width:0}
.pipe-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pipe-tbl{display:flex;flex-direction:column;min-width:760px}
.pipe-r{display:grid;grid-template-columns:minmax(0,2fr) 1.1fr .9fr .9fr 1.3fr .9fr;gap:12px;align-items:baseline;padding:11px 22px;border-top:1px solid var(--borderSoft)}
.pipe-r.pipe-g{grid-template-columns:minmax(0,2fr) repeat(var(--pipe-cols,5), minmax(0,1fr))}
.pipe-tete{border-top:none;padding-top:15px;padding-bottom:9px;align-items:end}
.pipe-tete .k,.pipe-tete .acq-tri{justify-self:start}
.pipe-tete .acq-tri:not(:first-child),.pipe-tete .k:not(:first-child){justify-self:end}
.pipe-c{text-align:right;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pipe-c b{font-size:12.5px;font-weight:400;color:var(--text)}
.pipe-c small{font-size:10.5px;color:var(--text4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pipe-val b{font-family:var(--font-display);font-size:17px;line-height:1.15}
.pipe-g .pipe-c b{font-family:var(--font-display);font-size:18px;line-height:1.15}
.pipe-nom-g{font-size:13px;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.acq-barre{display:flex;flex-direction:column;gap:14px}
.acq-onglets{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-card)}
.acq-onglet{padding:7px 14px;font-size:12.5px;color:var(--text2)}
.acq-onglet+.acq-onglet{border-left:.7px solid var(--borderSoft)}
.acq-onglet:hover{background:var(--hoverBg)}
.acq-onglet.actif{font-weight:500;color:var(--text);background:var(--hoverBg)}
/* Le compte d'un onglet segmente, comme celui des onglets soulignes du Pipeline. */
.acq-onglet .n{margin-left:7px;font-family:var(--font-display);font-size:13px;color:var(--text4)}
.acq-onglet.actif .n{color:var(--text3)}
.acq-fil{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.acq-fil-sep{color:var(--text4);font-size:13px}
.acq-puce{display:inline-flex;align-items:center;gap:7px;max-width:340px;background:var(--chipBg);color:var(--chipText);border-radius:999px;padding:5px 8px 5px 12px;font-size:12px}
.acq-puce > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acq-puce-x{width:17px;height:17px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:13px;line-height:1;color:inherit;opacity:.7}
.acq-puce-x:hover{opacity:1;background:var(--hoverBg)}
.acq-tbl{display:flex;flex-direction:column}
.acq-tete-ligne{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acq-tete-ligne .acq-rech{flex:1 1 320px;min-width:0}
.acq-rech{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:10px 15px;box-shadow:var(--shadow-card)}
.acq-rech:focus-within{border-color:var(--ascend-rose-gold)}
.acq-rech-ic{color:var(--text4);display:flex;flex:none}
.acq-q{flex:1;min-width:0;background:none;border:none;outline:none;font-family:var(--font-body);
  font-size:13.5px;color:var(--text)}
.acq-q::placeholder{color:var(--text4)}
.acq-q::-webkit-search-cancel-button{filter:grayscale(1);opacity:.5;cursor:pointer}
.acq-ligne{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);margin-bottom:-1px;padding-bottom:0}
/* onglets facon Ads Manager : des cartes posees sur le tableau, celle qui est
   ouverte se detache, prend l'accent et se fond dans le contenu. */
.acq-tabs{display:flex;align-items:flex-end;gap:6px}
.acq-tab{display:flex;align-items:center;gap:9px;padding:11px 17px;font-size:13.5px;color:var(--text2);
  background:var(--hoverBg);border:1px solid var(--borderSoft);border-bottom:none;border-radius:10px 10px 0 0}
.acq-tab:hover{color:var(--text);background:var(--card)}
.acq-tab svg{flex:none;color:var(--text4)}
.acq-tab.actif{background:var(--card);color:var(--ascend-rose-gold);font-weight:500;
  border-color:var(--border);box-shadow:0 -2px 6px rgba(0,0,0,.03)}
.acq-tab.actif svg{color:var(--ascend-rose-gold)}
.acq-ligne .bouton-chip{margin-bottom:9px}
.acq-chev{display:flex;color:var(--text3)}
.acq-enveloppe{overflow-x:auto}
.acq-lig{display:grid;grid-template-columns:minmax(240px,2fr) repeat(var(--acq-cols,6), minmax(102px,1fr));gap:10px;align-items:baseline;padding:12px 22px;border-top:1px solid var(--borderSoft)}
.acq-tete{border-top:none;padding-top:15px;padding-bottom:9px;align-items:end}
.acq-total{border-top:1px solid var(--border);background:var(--hoverBg)}
/* les deux niveaux superieurs s'ouvrent ; le niveau pub est terminal */
.acq-ouvrable{cursor:pointer}
.acq-ouvrable:hover,.acq-ouvrable:focus-visible{background:var(--hoverBg);outline:none}
.acq-ouvrable .acq-nom b::after{content:'›';margin-left:7px;color:var(--text4);font-family:var(--font-body)}
.acq-nom{min-width:0;display:flex;flex-direction:column;gap:3px}
.acq-nom b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acq-nom small{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acq-c{text-align:right;min-width:0;font-family:var(--font-body);font-size:17px;line-height:1.2;
  font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* les en-tetes sont des boutons de tri : le libelle du haut trie sur le volume,
   celui du bas sur le cout, exactement comme les deux niveaux des cellules. */
.acq-tri{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-logo);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);
  text-align:left;min-width:0}
.acq-tri-c{justify-self:end;text-align:right}
.acq-tri-c > span:first-child{white-space:normal;overflow-wrap:anywhere}
.acq-tri:hover{color:var(--text)}
.acq-tri.actif{color:var(--text);font-weight:500}
.acq-tri-nom{justify-self:start}
.acq-fleche{font-size:9px;line-height:1}
.acq-note{font-size:12px;color:var(--text3);margin:14px 2px 0;line-height:1.5}

.plan-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:6px}
.plan-titre{font-family:var(--font-display);font-size:34px;line-height:1.1;letter-spacing:-.01em;color:var(--text);font-weight:400}
.plan-sous{font-size:12.5px;color:var(--text3);margin-top:7px;max-width:560px;line-height:1.45}

/* les separateurs des cartes en blocs sont faits avec gap:1px sur un fond
   borderSoft plutot qu'avec border-left : sur une ligne qui passe a la ligne,
   un border-left laisse un filet orphelin en tete de rang. */
.plan-tete{display:flex;flex-wrap:wrap;gap:1px;background:var(--borderSoft);padding:0}
.plan-champ{flex:1 1 230px;background:var(--card);padding:18px 24px;display:flex;flex-direction:column;gap:5px}
.plan-aide{font-size:11.5px;color:var(--text3)}
.k{font-family:var(--font-logo);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}

.plan-tbl{display:flex;flex-direction:column}
.plan-sstitre{font-family:var(--font-logo);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);padding:17px 24px 5px;border-top:1px solid var(--borderSoft)}
.plan-sstitre:first-child{border-top:none}
.plan-lig{display:grid;grid-template-columns:1fr 190px;gap:16px;align-items:center;padding:12px 24px;border-top:1px solid var(--borderSoft)}
.plan-sstitre + .plan-lig{border-top:none}
.plan-nom b{display:block;font-size:13.5px;font-weight:500}
.plan-nom small{display:block;font-size:11px;color:var(--text3);margin-top:2px}

/* deux colonnes : saisie a gauche, resultat a droite. minmax(0,…) empeche une
   ligne longue de forcer la colonne a deborder de la grille. */
/* Plan est un formulaire, pas un tableau de bord : au-dela d'une certaine largeur
   une ligne « libelle .......... champ » cesse de se lire. Il garde donc sa mesure,
   alors que les pages de donnees prennent tout l'ecran. */
.plan-grille{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px;align-items:start;max-width:1400px}
.plan-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.plan-out{display:grid;grid-template-columns:1fr 78px 92px;gap:12px;align-items:baseline;padding:12px 22px;border-top:1px solid var(--borderSoft)}
.plan-out-tete{padding-top:15px;padding-bottom:7px;border-top:none;align-items:end}
.plan-out-tete .k{text-align:right}
.plan-out-v{text-align:right;font-family:var(--font-display);font-size:20px;line-height:1.15;color:var(--text)}
.plan-note{font-size:12px;color:var(--text3);margin:9px 2px 0}
.plan-note b{font-family:var(--font-display);font-size:15px;color:var(--text);font-weight:400}
.plan-input{width:100%;text-align:right;background:transparent;border:none;border-bottom:1px solid var(--border);padding:2px 0;font-family:var(--font-display);font-size:20px;line-height:1.15;color:var(--text);appearance:textfield;-moz-appearance:textfield}
.plan-input::-webkit-outer-spin-button,.plan-input::-webkit-inner-spin-button{appearance:none;margin:0}
.plan-input:focus{outline:none;border-bottom-color:var(--ascend-rose-gold)}
.plan-input-gros{font-size:30px;text-align:left}
.plan-cible{display:flex;align-items:baseline;justify-content:flex-end;gap:4px}
.plan-unite{font-size:12px;color:var(--text4)}

.plan-barre{display:flex;align-items:center;gap:14px;flex:none}
.plan-etat{font-size:12.5px;color:var(--text3)}
.plan-etat.err{color:var(--text);font-weight:500}
.plan-btn{background:var(--ink);color:var(--bg);border-radius:999px;padding:9px 20px;font-size:13px;font-weight:500}
.plan-btn:disabled{opacity:.35;cursor:default}

.squelette{background:linear-gradient(90deg,var(--card) 25%,var(--hoverBg) 50%,var(--card) 75%);background-size:200% 100%;border-radius:16px;animation:glisse 1.5s ease-in-out infinite}
/* Pendant un chargement, l'ancien contenu reste a l'ecran, estompe : une opacite,
   jamais une couleur (le seul code couleur est celui des couts du funnel). */
#contenu.charge{opacity:.55;transition:opacity .15s ease}
@keyframes glisse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Barre d'onglets du bas. Masquee au-dessus de 860 : ce n'est pas un grid item
   tant qu'elle est en display:none, donc la grille bureau reste a deux
   colonnes sans rien savoir d'elle. */
#barre-onglets{display:none;border-top:1px solid var(--borderSoft);background:var(--card);
  padding-bottom:env(safe-area-inset-bottom)}
.bo-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;padding:9px 2px 8px;min-height:52px;color:var(--text3)}
.bo-item svg{flex:none}
.bo-item .lbl{font-size:10px;line-height:1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.bo-item[aria-current="true"]{color:var(--text)}
.bo-item[aria-current="true"] .lbl{font-weight:500}
/* La loupe ne vit que dans le bandeau mobile. */
.rail-loupe{display:none;width:38px;height:38px;flex:none;border-radius:9px;
  place-items:center;color:var(--text3)}
.rail-loupe:hover{color:var(--text);background:var(--hoverBg)}
/* Une pilule vide se peindrait quand meme : fond, filet et rembourrage. */
.fraicheur:empty{display:none}

/* ============================================================
   L'echelle responsive, en un seul endroit et dans l'ordre
   decroissant. L'ordre compte : a specificite egale c'est la
   derniere regle ecrite qui gagne, et un bloc 860 pose AVANT un
   bloc 1180 se faisait ecraser entre 860 et 1180 px.
   Paliers : 1180 tablette, 860 coquille mobile, 640 telephone,
   520 petit telephone. Pas de cinquieme.
   ============================================================ */

@media (max-width:1180px){
  /* palier tablette : deux colonnes plutot que de sauter direct a une seule */
  .bandeau{grid-template-columns:repeat(2,1fr)}
  .bandeau{--kpi-chiffre:46px}
  /* Le filet vertical est un pseudo-element (.kpi-c + .kpi-c::before), pas un
     border-left : les regles `border-left:none` d'avant ne coupaient rien, et
     le 3e KPI portait un filet vertical en tete de rang. */
  .kpi-c:nth-child(odd)::before{display:none}
  .kpi-c:nth-child(n+3){border-top:1px solid var(--borderSoft)}
  /* Cinq KPI sur deux colonnes : le dernier, seul sur son rang, en prend la largeur. */
  .kpi-c:last-child:nth-child(odd){grid-column:1 / -1}
  .rangee-cartes{flex-direction:column}
  .funnel-grille{grid-template-columns:repeat(2,1fr)}
  .fcell:nth-child(odd){border-left:none!important}
  .plan-grille{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  /* La coquille doit borner sa hauteur : .contenu, .cal, .kan et .kan-corps
     defilent tous en flex:1;min-height:0 et n'ont aucune barre sans une hauteur
     bornee par un ancetre — une hauteur automatique tronquait Calendrier et
     Pipeline. Trois rangees : bandeau, contenu, barre d'onglets.

     Elle se cale sur le cadre du navigateur (`position:fixed;inset:0`) plutot
     que sur `100dvh` : sur l'app installee a l'ecran d'accueil (iOS), 100dvh
     mesurait une cinquantaine de points de moins que l'ecran et la barre
     d'onglets flottait au-dessus du bas, avec une bande de fond en dessous.
     `inset:0` se resout directement contre le cadre d'affichage, sans passer
     par une unite de viewport ni par la chaine de pourcentages de html/body.
     `height:auto` est indispensable : avec `top` et `bottom` poses, une hauteur
     explicite sur-contraint la boite, `bottom` saute, et l'ecart revient.

     La barre d'onglets, elle, reste la troisieme RANGEE de la grille et n'est
     toujours pas en position:fixed : les deux raisons de cette regle tiennent
     toujours — aucun rembourrage a compenser sous .contenu, et aucun popover
     qui passerait dessous, `position:fixed` sans transform ni filter ne creant
     pas de bloc conteneur pour les popovers fixes de l'en-tete. */
  #app.on{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;
    position:fixed;inset:0;height:auto}
  /* #app hors flux, #connexion en display:none : le document n'a plus rien a
     faire defiler. Reste le rebond tactile, qui decollerait la coquille. */
  body{overscroll-behavior:none}
  #app.compact.on{grid-template-columns:1fr}
  #barre-onglets{display:flex}
  /* Le rail devient le bandeau du haut. Il garde le selecteur de clinique et le
     menu profil — la navigation, elle, est passee en bas. Aucun noeud DOM n'est
     deplace : seul le palier decide. */
  .rail{flex-direction:row;align-items:center;gap:8px;
    padding:calc(9px + env(safe-area-inset-top)) 14px 9px;
    overflow:visible;border-right:none;border-bottom:1px solid var(--borderSoft)}
  .entete-rail,.nav-liste{display:none}
  .chip-client{display:flex;flex:1;min-width:0;margin:0;padding:7px 10px}
  /* Le repli du rail (.compact) est un concept de bureau : sur un bandeau
     mobile il n'y a plus de panneau a reduire, et l'oubli serait sans retour
     puisque #btn-reduire, qui le defait, vit dans .entete-rail, masque ici.
     `#app.compact …` egale ou depasse la specificite a deux classes de
     chaque regle `.compact …` qu'elle neutralise. */
  #app.compact .chip-client{justify-content:flex-start;padding:7px 10px}
  #app.compact .chip-client .tx{display:block}
  #app.compact .chip-client>svg{display:inline}
  .rail-bas{margin:0;flex:none;flex-direction:row}
  .rail-loupe{display:grid}
  /* Le menu profil s'ouvrait vers le haut depuis le bas du rail ; depuis un
     bandeau, il doit descendre. */
  .menu-profil{top:calc(100% + 6px);bottom:auto;left:auto;right:0;width:210px}
  #app.compact .menu-profil{left:auto;width:210px}
  .profil-rail{padding:6px}
  #app.compact .profil-rail{justify-content:flex-start;padding:6px}
  .profil-rail .tx,.profil-rail>svg{display:none}
  /* La pilule de recherche cede la place a la loupe du bandeau. */
  .recherche{display:none}
  /* L'en-tete tenait ~330 px avant le premier chiffre. La fraicheur perdait son
     sens a flotter seule a droite d'une rangee vide : elle perd cadre, fond et
     ombre, et s'aligne a gauche sur la meme marge que tout le reste. Elle RESTE
     dans .entete1 plutot que de rejoindre la ligne de date : #bloc-salutation
     est masque sur les pages a titre — Acquisition entre autres — or c'est la
     que la fraicheur Meta compte le plus. */
  .entete1{padding:10px 14px 0;justify-content:flex-start}
  .fraicheur{background:none;border:none;box-shadow:none;padding:0;border-radius:0}
  .fraicheur span{font-size:11.5px;color:var(--text3)}
  .entete2{padding:6px 14px 12px;gap:8px;row-gap:8px;align-items:center}
  .date-jour{font-size:11.5px;margin-bottom:3px}
  .salutation{font-size:24px}
  .titre-page{font-size:24px}
  .sous-page{font-size:11.5px;margin-top:4px}
  /* Le titre prend sa rangee, les trois controles se partagent la suivante. */
  #bloc-salutation,#bloc-titre-page{flex-basis:100%;min-width:0}
  .entete2 > span[style*="flex:1"]{display:none}
  .entete2 > .bouton-chip{flex:0 1 auto;min-width:0}
  .bouton-chip > span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* « Exporter » se reduit a son icone : le mot coutait la moitie de la rangee. */
  .btn-export span{display:none}
  .btn-export{padding:10px 12px}
  /* Masquage au defilement. On replie la hauteur plutot que de translater : les
     deux rangees sont des freres `flex:none` au-dessus de .contenu, une simple
     translation laisserait leur place vide. Le plafond de max-height est un
     majorant genereux — la rangee la plus haute est celle d'Acquisition, titre
     plus sous-titre sur trois lignes plus les controles. */
  .entete1,.entete2{overflow:hidden;max-height:340px;
    transition:max-height .22s ease,padding .22s ease,opacity .16s ease}
  .colonne.entete-cachee .entete1,
  .colonne.entete-cachee .entete2{max-height:0;padding-top:0;padding-bottom:0;opacity:0}

  /* --- Pipeline et Calendrier : rendre la verticale a l'element principal --- */
  /* Le sous-titre explique la page ; au bureau il a la place, sur un telephone
     il la prend au plateau et a la grille horaire. */
  .sous-page{display:none}
  /* Les deux reglages se partagent une rangee, intitule AU-DESSUS du controle
     plutot qu'a cote : deux rangees pleines coutaient ~120 px au plateau. */
  .pipe-reglages{gap:10px;row-gap:8px;align-items:flex-end}
  .reglage{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:4px}
  .reglage .k{font-size:8.5px;letter-spacing:.13em}
  .reglage .pipe-select,.reglage .bouton-chip{width:100%}
  /* La bascule des deux tableaux prend sa propre rangee : ses deux libelles ne
     tiennent pas a cote du filtre Offre, et chaque moitie devient une cible pleine. */
  .reglage:has(> .acq-onglets){flex-basis:100%}
  .reglage > .acq-onglets{width:100%}
  .reglage > .acq-onglets .acq-onglet{flex:1;white-space:nowrap}
  .pipe-resume{flex-basis:100%;margin-left:0;font-size:11.5px;white-space:normal}
  /* La note decrit comment lire le tableau. On vient le consulter sur un
     telephone, pas le decouvrir ; elle reste entiere au bureau. */
  .pipe-note{display:none}
  /* Meme raison pour la note sous le tableau des stades : sur telephone, elle
     prenait au plateau la hauteur de cinq cartes. */
  .pipe-explication{display:none}
  /* Le compteur rejoint la rangee de navigation au lieu d'occuper la sienne. */
  .pipe-barre{row-gap:8px}
  /* La rangee de navigation du calendrier : fleches et libelle sur une ligne,
     le compteur juste dessous. On resserre plutot que d'ajouter une rangee. */
  .pipe-ctrl{column-gap:8px;row-gap:4px}
  .cal-auj{padding:10px 12px;font-size:12px}
  .cal-lbl{font-size:12px}
  .cal-n{font-size:11px}
  .contenu{padding-left:14px;padding-right:14px}
  .funnel-grille{grid-template-columns:1fr}
  .fcell{border-left:none!important;border-top:1px solid var(--borderSoft)}
  .fcell:first-child{border-top:none}
  /* Le rembourrage gauche de la ligne passe a 0 : sous ce palier, c'est la
     colonne du nom (collante, plus bas) qui le porte, pas la ligne entiere —
     sinon une bande transparente de ce rembourrage laisse defiler le contenu
     derriere la colonne fige. */
  .acq-lig{padding-left:0;padding-right:16px}
  .acq-ligne{align-items:stretch}
  .acq-tab{padding:10px 13px}
  .pipe-r{padding-left:0;padding-right:16px}
  .plan-lig{grid-template-columns:1fr 120px;gap:10px;padding:12px 16px}
  .plan-out{grid-template-columns:1fr 66px 82px;gap:8px;padding:12px 16px}
  .plan-sstitre,.plan-champ{padding-left:16px;padding-right:16px}
  .plan-titre{font-size:27px}
  /* A 390 px on fait defiler 25 colonnes de metriques et on perd le nom de la
     pub qu'on regarde. Les deux tableaux (Acquisition, registre du Pipeline)
     vivent dans .acq-enveloppe, qui est leur conteneur de defilement — un
     sticky:left s'y ancre. .acq-tbl et .pipe-tbl n'ont pas d'overflow propre,
     donc rien ne s'interpose entre le sticky et ce conteneur. */
  .acq-nom{position:sticky;left:0;z-index:2;background:var(--card);padding-right:10px;margin-right:-4px}
  /* .acq-tri-nom{justify-self:start} (regle de base, hors media) retreint le
     bouton a la largeur de son texte : son fond opaque ne couvrirait alors
     qu'une bande etroite de la colonne, et les libelles des AUTRES colonnes
     d'en-tete la traverseraient visuellement au defilement. stretch sur les
     deux axes fait couvrir tout le fond de la cellule (les libelles de
     mesure peuvent envelopper sur deux lignes et agrandir la rangee) ; le
     display:flex + align-items:flex-end qui suit replace le libelle a son
     appui visuel d'origine (le bas de la cellule, comme .acq-tete{align-
     items:end}) plutot que de le laisser centre dans la boite etiree. */
  .acq-tri-nom{position:sticky;left:0;z-index:2;background:var(--card);justify-self:stretch;align-self:stretch;display:flex;align-items:flex-end}
  .acq-total .acq-nom{background:var(--hoverBg)}
  .acq-ouvrable:hover .acq-nom,.acq-ouvrable:focus-visible .acq-nom{background:var(--hoverBg)}
  .pipe-nom,.pipe-nom-g{position:sticky;left:0;z-index:2;background:var(--card);padding-right:10px}
  /* Le registre a aussi un en-tete trieur dans sa premiere colonne (un bouton
     pour le tableau nominatif, un libelle de regroupement pour l'autre) : sans
     ce sticky-la, l'en-tete se desynchronise du corps au defilement et affiche
     le libelle d'une autre colonne au-dessus du nom fige. */
  /* Meme raisonnement que .acq-tri-nom juste au-dessus : la regle de base
     (.pipe-tete .k,.pipe-tete .acq-tri{justify-self:start}, hors media)
     retreint aussi ce premier enfant a son contenu. */
  .pipe-tete>*:first-child{position:sticky;left:0;z-index:2;background:var(--card);padding-left:16px;justify-self:stretch;align-self:stretch;display:flex;align-items:flex-end}
  .acq-nom,.acq-tri-nom,.pipe-nom,.pipe-nom-g{padding-left:16px}
}

@media (max-width:640px){
  /* Deux colonnes jusqu'en bas de l'echelle, jamais une : cinq chiffres en trois
     rangs tiennent dans un coup d'oeil, cinq en pile demandent un defilement. */
  .kpi-c{padding:15px 16px 16px}
  .kpi-c .v b,.kpi-c .v .serif{font-size:32px}
  /* La pilule d'ecart et son libelle ne tiennent pas cote a cote dans 160 px. */
  .kpi-c .sous{flex-direction:column;align-items:flex-start;gap:3px;padding-top:9px}
  /* Annule le min-height:134px de la feuille de base : sous 640px le bandeau
     suit la hauteur de son contenu au lieu de reserver une hauteur pensee
     pour la rangee unique du bureau. */
  .bandeau{min-height:0}
  /* `top:190px` etait la hauteur supposee de l'en-tete repliee — une valeur
     qui devient fausse des que cette hauteur change, ce que la coquille mobile
     fait. Ancrees en bas, elles n'ont plus rien a supposer. */
  .popover-periode,.popover-export{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:88dvh;overflow-y:auto;z-index:95;border-radius:16px 16px 0 0;border-bottom:none;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .pp-corps{flex-direction:column}
  .pp-colonne{flex-direction:row;flex-wrap:wrap;min-width:0;border-right:none;border-bottom:1px solid var(--borderSoft);padding-right:0;padding-bottom:8px}
  .pp-calendrier .pp-mois:last-child{display:none}
  .pp-pied{flex-wrap:wrap;row-gap:8px}
  .pp-champ{flex:1;min-width:0;padding:10px;font-size:13.5px}
  /* Le funnel empile faisait cinq cellules de ~200 px : mille pixels pour cinq
     nombres. Une ligne par etage, meme ordre de lecture qu'au bureau —
     volume, taux, cout. Les <span> existants sont replaces par zones, le
     rendu JS ne change pas. */
  .funnel-grille{padding:0}
  .fcell{display:grid;column-gap:12px;row-gap:3px;padding:14px 16px 15px;cursor:pointer;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"nom nom vol" "taux denom cout" "pop pop pop"}
  .fcell .ic-lbl{grid-area:nom;height:auto}
  /* `justify-self:end` sur les deux : chaque .fcell est une grille INDEPENDANTE,
     donc sa colonne de droite se dimensionne sur son propre contenu. « / lead »
     et « / reservation » n'ayant pas la meme largeur, le grand chiffre tombait a
     un endroit different a chaque etage. Ancres sur le bord droit de la cellule,
     les cinq s'alignent — et les pointilles des valeurs incompletes avec eux. */
  .fcell .gros{grid-area:vol;font-size:30px;margin-top:0;align-self:baseline;
    justify-self:end;text-align:right}
  .fcell .gros.incomplet{padding-bottom:2px}
  .fcell .taux-ligne{grid-area:taux;height:auto;margin-top:0}
  .fcell .taux{font-size:14px}
  .fcell .denom{grid-area:denom;height:auto;margin-top:0;align-self:baseline}
  .fcell .cout{grid-area:cout;margin-top:0;align-self:baseline;justify-self:end}
  /* Le chevron dit qu'il y a quelque chose dessous. Meme signe que les lignes
     ouvrables d'Acquisition, couche d'un quart de tour. */
  .fcell .cout::after{content:'›';display:inline-block;margin-left:6px;
    color:var(--text4);transform:rotate(90deg);transition:transform .15s}
  .fcell.ouvert .cout::after{transform:rotate(-90deg)}
  /* Deplie dans la page, le bloc se lit comme une extension de la cellule et
     non comme une bulle flottante : fond de page et filet, pas le #241030 de
     l'infobulle. */
  .fcell .pop{grid-area:pop;position:static;width:auto;margin-top:12px;
    background:var(--bg);border:1px solid var(--borderSoft);box-shadow:none;
    pointer-events:auto}
  .fcell .pop .ligne b{color:var(--text)}
  .fcell .pop .ligne span{color:var(--text3)}
  .fcell .pop hr{background:var(--borderSoft)}
  :root{--h-graphe:200px}
  .axe-y{width:38px}
  .axe-y span{right:8px;font-size:9.5px}
  .evo-corps{padding:10px 14px 4px}
  .evo-tete{flex-wrap:wrap;row-gap:8px;padding:14px 16px 0}
  .carte-titre,.avenir-tete{padding-left:16px;padding-right:16px}
  /* Hauteur naturelle : pas de defilement dans un defilement. */
  .carte-liste{height:auto;overflow:visible}
  .act-liste,.avenir-corps{overflow-y:visible}
  .rangee-cartes{gap:14px}
  /* La rangee de navigation passe sur deux lignes plutot que de se comprimer.
     Ecrit .pipe-barre .pipe-espace, pas .pipe-espace seul : cette classe sert
     aussi d'espaceur dans .acq-ligne (barre d'Acquisition, hors scope de
     cette tache) — une regle non scopee y forcerait le meme retour a la
     ligne force, un effet de bord que le brief n'avait pas prevu. */
  .pipe-barre{row-gap:10px}
  .pipe-barre .pipe-espace{flex-basis:100%;min-width:100%}
  .cal-tete{padding:9px 7px}
  .cal-jn{font-size:8.5px;letter-spacing:.1em}
  .cal-h{font-size:9.5px;padding:3px 5px 0}
  .cal-bloc{padding:4px 5px}
  .cal-bloc b{font-size:10.5px}
  .cal-bloc small{font-size:9px}
  .cal-mois{grid-auto-rows:minmax(92px,1fr)}
  .cal-mois-tete{padding:8px 4px;font-size:8px;letter-spacing:.1em;text-align:center}
  .cal-mois-c{padding:5px 5px;gap:3px}
  .cal-puce{padding:2px 4px}
  .cal-puce .h{display:none}
  .cal-puce .n{font-size:10px}
  /* Une colonne a l'ecran, et le glissement s'arrete proprement sur la
     suivante plutot que de laisser deux demi-colonnes. */
  .kan{scroll-snap-type:x mandatory;gap:10px}
  .kan-col{flex:0 0 100%;scroll-snap-align:start}
  /* Une colonne occupe tout l'ecran : les points disent ou l'on est parmi les
     stades. Le courant s'allonge plutot que de se colorer. */
  .kan-points{display:flex;justify-content:center;flex:none;margin-top:-4px}
  .kan-point{width:22px;height:22px;display:grid;place-items:center}
  .kan-point::before{content:'';width:6px;height:6px;border-radius:3px;background:var(--text4);transition:width .15s}
  .kan-point[aria-current="true"]::before{width:16px;background:var(--text)}
  /* Les reglages du tableau sur UNE rangee : la bascule (libelles courts) et le
     filtre d'offre replie en bouton. Leurs intitules partent — la bascule se lit
     d'elle-meme, le bouton nomme ce qu'il filtre — et « N leads affiches » double
     le compte deja porte par la bascule. Le registre garde ses intitules. */
  .pipe-reglages.tableau{flex-wrap:nowrap;align-items:stretch}
  .pipe-reglages.tableau .reglage > .k,.pipe-reglages.tableau .pipe-resume,.pipe-reglages.tableau .nom-long{display:none}
  .pipe-reglages.tableau .nom-court{display:inline}
  .pipe-reglages.tableau .reglage:has(> .acq-onglets){flex:1 1 auto;min-width:0}
  .pipe-reglages.tableau .reglage-offre{flex:0 1 auto;max-width:42%;position:relative}
  .pipe-reglages.tableau .offre-mini{display:flex;align-items:center;gap:7px;height:100%;min-height:40px;box-sizing:border-box;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);box-shadow:var(--shadow-card);font-size:13px;color:var(--text)}
  .pipe-reglages.tableau .offre-mini svg{flex:none;color:var(--text2)}
  .offre-mini-lib{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pipe-reglages.tableau .reglage-offre .pipe-select{position:absolute;inset:0;width:100%;height:100%;opacity:0}
  /* Une boite centree dans 390 px n'a plus rien de centre : elle touche les
     quatre bords. Autant en faire une feuille qui monte du bas — place-items
     (grid) n'a rien a faire sur un display:flex, donc centrage horizontal et
     ancrage bas passent par les proprietes flex directement — et regler du
     meme coup le cas ou le contenu depasse. */
  .modal-fond{padding:0;display:flex;align-items:flex-end;justify-content:center}
  .modal{width:100%;max-height:92dvh;border-radius:16px 16px 0 0;border-bottom:none}
  /* La fiche empile ses deux colonnes. Le haut (nom, GHL, telephone, courriel)
     ne bouge jamais : seul le parcours defile, dans sa propre zone. Le bouton
     « Appeler » n'existe qu'ici — au bureau, on ne telephone pas depuis l'outil. */
  .fiche{height:92dvh;display:flex;flex-direction:column}
  .fiche > .modal-x{top:10px;right:8px;width:44px;height:44px}
  .fiche-id{flex:none;overflow:visible;padding:16px 16px 6px;gap:0;border-right:none;border-bottom:1px solid var(--borderSoft)}
  .fiche-nom{display:flex;align-items:center;gap:8px;min-height:44px;padding-right:44px}
  .fiche-nom h2{flex:1;min-width:0;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fiche-ghl-court{display:flex;flex:none;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--border);font-size:12.5px;font-weight:500;color:var(--text);text-decoration:none}
  .fiche-ghl{display:none}
  .fiche-coord{gap:0;margin-top:6px}
  .fiche-coord .titre-section{display:none}
  .fiche-coord > *{border-top:1px solid var(--borderSoft);padding:6px 0}
  .fiche-champ{min-height:44px;justify-content:center;gap:2px}
  .fiche-tel .fiche-champ{flex:1}
  .fiche-copier-ic{display:inline-flex}
  .fiche-appeler{display:flex;flex:none;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:500;text-decoration:none}
  .fiche-ptete{padding:14px 16px 12px}
  .fiche-defile{padding:20px 16px calc(24px + env(safe-area-inset-bottom))}
  .fiche-ev{grid-template-columns:54px 14px minmax(0,1fr);column-gap:10px}
  .fiche-jsem{display:none}
  .fiche-ev-corps{padding-bottom:28px}
  .fiche-tuiles{gap:6px;max-width:none}
  .fiche-tuile{padding:9px 10px}
  .fiche-tuile .v{font-size:14.5px}
  .fiche-details{grid-template-columns:minmax(0,1fr);gap:1px}
  .fiche-details .v{margin-bottom:5px}
  .pipe-select,.pipe-reglages{max-width:100%}
  .pipe-reglages{gap:12px;row-gap:10px}
  .pipe-resume{margin-left:0;flex-basis:100%;white-space:normal}
  .pipe-nav{gap:16px;overflow-x:auto}
  .pipe-nav button{white-space:nowrap;font-size:13.5px}

  /* Un mois pleine largeur, des cases au doigt. */
  .pp-mois{width:100%}
  .pp-jour{min-height:40px;font-size:14px;border-radius:9px}
  .pp-jsem{font-size:11px;padding-bottom:6px}
  .pp-colonne button{padding:11px 12px;font-size:13.5px}
  .pp-btn{padding:11px 18px;font-size:13.5px}
  .pp-mois-entete button{width:40px;height:40px}

  /* Sous 16 px, Safari zoome au focus et ne revient jamais tout seul.
     .plan-input est deja a 20 px : elle n'est pas dans la liste. */
  .acq-q,.champ-co,.palette-in input,#sel-mois-rapport,.pipe-select{font-size:16px}
  .palette{max-width:100%;border-radius:16px 16px 0 0}
  .scrim{padding-top:0;align-items:flex-end}
  .palette-liste{max-height:56dvh}
  .palette-in .kbd{display:none}

  /* Cibles au doigt. On agrandit par rembourrage, jamais en gonflant le dessin. */
  /* A 10 px gris pale, la fleche se lisait comme un point : sans survol pour la
     reveler, elle doit se voir d'elle-meme. */
  .kan-tri{width:34px;height:34px;opacity:1;font-size:14px;color:var(--text3)}
  .acq-puce-x{width:26px;height:26px;font-size:16px}
  .acq-puce{padding:7px 6px 7px 14px}
  .cal-nav{width:40px;height:40px}
  .cal-auj{padding:10px 15px}
  .btn-reduire{width:38px;height:38px}
  .acq-onglet{padding:10px 15px}
  .onglet-m{padding:9px 12px}
  .seg2 button{padding:9px 13px}
  .menu-profil button{padding:11px 12px}
  .bouton-chip{padding:10px 13px}
  .btn-export{padding:10px 14px}

  /* Un defilement interne ne doit pas emporter la page avec lui quand il bute. */
  .contenu,.acq-enveloppe,.kan,.kan-corps,.cal,.cal-mois,.palette-liste{overscroll-behavior:contain}

  /* Round de correction 1 — deux cibles que l'agrandissement ci-dessus ne touchait pas.
     `.reglage .bouton-chip{padding:7px 12px}` (hors media, deux classes) neutralisait
     silencieusement le `.bouton-chip{padding:10px 13px}` juste au-dessus : a specificite
     egale, c'est la regle la plus TARDIVE dans le texte source qui gagne, quel que soit
     le bloc media qui la porte — celle-ci gagne desormais puisqu'elle vient apres. Le
     chip Periode de la rangee de reglages du Pipeline (seul usage de ce selecteur) passe
     ainsi de ~29 px a ~45 px de haut. */
  .reglage .bouton-chip{padding:14px 13px}
  /* `.acq-tab` avait ete oublie : son jumeau `.acq-onglet` (juste au-dessus) est deja a
     10px 15px. Le bloc 860 pose .acq-tab{padding:10px 13px} (~36 px) ; ce bloc vient
     apres dans le fichier et gagne a specificite egale, sans creer de deuxieme regle
     contradictoire a l'INTERIEUR du meme bloc 640 (il n'y en avait aucune ici avant). */
  .acq-tab{padding:14px 15px}

  /* Cibles jugees reellement trop petites parmi celles listees comme mineures dans le
     rapport de la tache 9 (voir le rapport pour celles ecartees et pourquoi). */
  /* La loupe du bandeau mobile : une icone isolee, seule dans sa boite. */
  .rail-loupe{width:44px;height:44px}
  /* Ouvre le menu profil : un seul et unique geste, pas une bande large et tolerante. */
  .profil-rail{padding:8px}
  /* Le bouton principal de l'ecran de connexion : pleine largeur, mais 39 px de haut. */
  .bouton-co{padding:14px}
  /* Un en-tete de tri qu'on touche pour trier — vraie cible, pas une icone decorative.
     Le rembourrage seul ne suffit pas : le bouton (padding:0 a la base) est plus petit
     que sa cellule de grille, qui reste deja assez haute pour la plupart des libelles.
     align-self:stretch l'etire a la hauteur reelle de la cellule (meme technique que
     .acq-tri-nom, tache 8) et min-height:44px garantit le plancher meme si un jeu de
     colonnes n'a que des libelles courts qui ne forcent pas la cellule a grandir. Le
     texte reste ancre en bas (align-items:flex-end), le rendu visuel ne bouge pas. */
  .acq-tri{display:flex;align-items:flex-end;align-self:stretch;min-height:44px}
}

@media (max-width:520px){
  .entete2{flex-wrap:wrap}
  .titre-page{font-size:26px}
  .salutation{font-size:30px}
  .recherche{width:auto;flex:1}
  .fcell .gros{font-size:27px}
  .kpi-c .v b,.kpi-c .v .serif{font-size:28px}
  .kpi-c .k{font-size:8.5px;letter-spacing:.13em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}