/* ════════════════════════════════════════════════════════════════════════
   COÛTS & MARGE — la page refaite (26 sept. 2026), calquée sur la maquette
   VALIDÉE par Emeric (canevas « Cockpit — Coûts & marge, propositions »,
   version claire). Les jetons (--glass, --f1…, --red…) viennent de style.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Les réglages (barre du haut sur Mac, en tête de page sur iPhone) ── */
.seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--seg-track)}
.seg button{border:0;cursor:pointer;font-size:13px;font-weight:500;padding:6px 13px;border-radius:999px;white-space:nowrap;
  background:transparent;color:var(--ink2);transition:background .15s,color .15s,box-shadow .15s}
.seg button:hover:not(.on){color:var(--ink)}
.seg button.on{background:var(--seg-on);box-shadow:var(--seg-on-shadow);font-weight:600;color:var(--ink)}
.seg.court button{width:36px;padding:6px 0}
.seg.icones button{width:40px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.seg.icones svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px 0 14px;border-radius:999px;border:0;
  background:var(--fill2);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;max-width:220px}
.pill:hover{background:var(--fill)}
.pill .lib{overflow:hidden;text-overflow:ellipsis}
.pill svg{width:11px;height:11px;flex:0 0 auto;fill:none;stroke:var(--ink2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pill.actif{background:rgba(0,113,227,.12);color:var(--link)}
.ctPop{position:relative}
/* Presque opaque : un menu ouvert DANS la barre du haut (elle-même en verre) ne peut pas
   flouter la page — la barre est sa « racine de fond » (spécification Filter Effects 2).
   À 82 %, les lignes de la page se lisaient au travers. */
.ctMenu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:230px;max-height:380px;overflow-y:auto;padding:6px;border-radius:18px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-rim),0 24px 60px -18px rgba(0,0,0,.35)}
.ctMenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 10px;border:0;border-radius:10px;background:transparent;
  color:var(--ink);font-size:14px;text-align:left;cursor:pointer}
.ctMenu button:hover{background:var(--fill2)}
/* « Client 4b7f2e — une-adresse-longue@… » : le menu garde une largeur de menu,
   le libellé se coupe proprement (le texte entier reste dans l'infobulle). */
.ctMenu{max-width:min(420px, calc(100vw - 32px))}
.ctMenu button .lib{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctNomsErreur{margin:10px 0 0;padding:9px 12px;border-radius:12px;background:rgba(255,204,0,.12);font-size:12px;color:var(--ink2);line-height:1.45}
.ctFicheTete .ident{color:var(--ink)}
.ctMenu .coche{width:16px;display:inline-flex;justify-content:center;flex:0 0 auto}
.ctMenu .coche svg{width:14px;height:14px;fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ctMenu .pt{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.ctMenu .sep{height:1px;background:var(--line);margin:6px 8px}
.ctMenu .petit{margin-left:auto;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.ctDates{padding:8px;min-width:300px}
.ctDates .champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:6px 8px}
.ctDates label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink2)}
.ctDates input{height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:13px}
.ctDates .actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 8px 4px}
.ctDates .actions button{width:auto;min-height:30px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;background:var(--fill2)}
.ctDates .actions .ok{background:var(--blue);color:#fff;font-weight:600}
.ctControles{display:none}
.grpPeriode,.grpFiltres{display:flex;align-items:center;gap:10px}
.grpFiltres{flex-wrap:wrap;justify-content:flex-end}

/* ── La page ── */
.ctPage{display:flex;flex-direction:column;gap:28px}
.verre{position:relative;background:var(--glass);backdrop-filter:blur(34px) saturate(180%);-webkit-backdrop-filter:blur(34px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-rim),var(--glass-shadow)}
.verre>*{position:relative}
.ctCarte{position:relative;box-sizing:border-box;padding:26px 30px;border-radius:28px;background:var(--card);box-shadow:var(--card-shadow);min-width:0}
.ctCarte h2,.ctTete h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.ctSous{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.4}
.ctEntete{display:flex;align-items:flex-start;gap:12px}
.ctEntete>div:first-child{flex:1;min-width:0}
.ctTete{display:flex;align-items:center;gap:10px}
.ctCompte{font-size:12px;font-weight:600;color:var(--ink2);background:var(--fill);border-radius:999px;padding:2px 9px}
.ctCompte:empty{display:none}
.ctBloc{display:flex;flex-direction:column;gap:14px}
.ctLien{border:0;background:transparent;padding:0;font-size:13px;font-weight:500;color:var(--link);cursor:pointer;text-decoration:none;white-space:nowrap}
.ctLien:hover{text-decoration:underline}
.ctBtn{height:28px;padding:0 13px;border-radius:999px;border:0;background:var(--blue);color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.ctBtn:hover{background:#0077ED}
.ctBtn.gris{background:var(--fill2);color:var(--ink);font-weight:500}
.num{font-variant-numeric:tabular-nums}

/* 1. Ce que Cadevia te coûte */
.ctHero{min-height:300px;box-sizing:border-box;padding:28px 34px;border-radius:30px;display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);column-gap:44px}
.ctHero .gauche,.ctHero .droite{display:flex;flex-direction:column;min-width:0}
.ctHero .quoi{font-size:15px;font-weight:600;color:var(--ink2)}
.ctHero .chiffre{display:flex;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.ctHero .auMoins{font-size:17px;font-weight:500;color:var(--ink2)}
.ctHero .total{font-size:76px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.ctHero .prevu{font-size:15px;color:var(--ink2);margin-top:12px}
.ctHero .prevu b{color:var(--ink);font-weight:600}
.ctBandeau{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--yellow-bg)}
.ctBandeau svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ctBandeau span{font-size:13px;line-height:1.35;flex:1}
.ctBandeau.ok{background:var(--green-bg)}
.ctHero .titreDroit{font-size:15px;font-weight:600}
.ctCompo{display:flex;align-items:stretch;gap:2px;height:24px;margin-top:12px}
.ctCompo>div{border-radius:3px;min-width:3px}
.ctCompo .inconnu{box-sizing:border-box;border:1.5px dashed var(--ink3);background:repeating-linear-gradient(45deg,var(--hatch) 0 2px,rgba(0,0,0,0) 2px 7px);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink2);flex:0 0 52px}
.ctLegende{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.ctLegende .l{display:grid;grid-template-columns:12px minmax(0,1fr) 90px 44px;align-items:center;column-gap:10px;font-size:14px}
.ctLegende .pt{width:10px;height:10px;border-radius:3px}
.ctLegende .pt.tirets{box-sizing:border-box;border:1.5px dashed var(--ink3)}
.ctLegende .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctLegende .nom b{font-weight:600}
.ctLegende .nom span{color:var(--ink2);font-size:13px}
.ctLegende .m{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ctLegende .p{text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums}
.ctBudget{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:8px}
.ctBudget .ligne{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.ctBudget .ligne b{color:var(--ink);font-weight:600}
.ctJauge{position:relative;height:8px;border-radius:4px;background:var(--blue-track)}
.ctPlafJauge{margin:18px 0 16px;padding-top:0}
.ctJauge .rempli{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--blue)}
.ctJauge .rempli.rouge{background:var(--red)}
.ctJauge .prevu{position:absolute;top:-4px;width:2px;height:16px;border-radius:1px;background:var(--ink)}

/* 2. À surveiller */
.ctAlertes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ctAlerte{box-sizing:border-box;min-height:146px;padding:16px 16px 14px;border-radius:22px;background:var(--card);box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:8px;min-width:0}
.ctAlerte .tete{display:flex;align-items:center;gap:10px}
.ctTuile{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.ctTuile svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctTuile.rouge{background:var(--red)} .ctTuile.rouge svg{stroke:#fff}
.ctTuile.jaune{background:var(--yellow)} .ctTuile.jaune svg{stroke:#1D1D1F}
.ctTuile.gris{background:var(--gray-tile)} .ctTuile.gris svg{stroke:#fff}
.ctTuile.vert{background:var(--green)} .ctTuile.vert svg{stroke:#fff}
.ctAlerte .titre{font-size:14px;font-weight:600;line-height:1.25}
.ctAlerte p{margin:0;font-size:13px;line-height:1.42;color:var(--ink2)}
.ctAlerte .pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ctAlerte .quand{font-size:12px;color:var(--ink3)}
.ctAlerte .explication{font-size:12px;line-height:1.45;color:var(--ink2);background:var(--card2);border-radius:12px;padding:8px 10px}
.ctAlerte.calme{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:12px}

/* 3. L'IA */
.ctIAgrille{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:40px;margin-top:18px}
.ctResume{display:flex;align-items:flex-end;gap:36px;flex-wrap:wrap}
.ctResume .lab{font-size:13px;color:var(--ink2)}
.ctResume .gros{display:flex;align-items:baseline;gap:10px;margin-top:2px;flex-wrap:wrap}
.ctResume .gros span.v{font-size:34px;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ctResume .cote{padding-bottom:6px}
.ctResume .cote .v2{font-size:17px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.ctDelta{display:inline-flex;font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap}
.ctDelta.hausse{color:var(--red);background:var(--red-bg)}
.ctDelta.baisse{color:var(--ok);background:var(--green-bg)}
.ctDelta.neutre{color:var(--ink2);background:var(--fill2)}
.ctGraphe{position:relative;margin-top:18px;height:272px;touch-action:pan-y}
.ctGraphe svg{display:block;overflow:visible}
.ctGraphe .grille line{stroke:var(--line);stroke-width:1}
.ctGraphe .grille text,.ctAxe text{fill:var(--ink3);font-size:11px}
.ctGraphe .moy line{stroke:var(--ink2);stroke-width:1.2;stroke-dasharray:1 4;stroke-linecap:round}
.ctGraphe .moy text{fill:var(--ink2);font-size:11px;font-weight:600}
.ctGraphe .barre{transition:opacity .12s}
.ctGraphe.survole .barre{opacity:.35}
.ctGraphe.survole .barre.actif{opacity:1}
.ctGraphe .chapeau{fill:none;stroke:var(--f1);stroke-width:1.5;stroke-dasharray:3 3}
.ctGraphe .etiq{fill:var(--ink);font-size:12px;font-weight:600;text-anchor:middle}
.ctGraphe .auj{fill:var(--ink)!important;font-weight:600}
.ctGraphe .ligneIA{fill:none;stroke:var(--f1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ctGraphe .ligneComp{fill:none;stroke:var(--ink3);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.ctGraphe .ligneProj{fill:none;stroke:var(--f1);stroke-width:2;stroke-dasharray:4 4;stroke-linecap:round;opacity:.7}
.ctGraphe .texteFin{fill:var(--ink2);font-size:11px;text-anchor:end}
.ctGraphe .point{fill:var(--f1);stroke:var(--card);stroke-width:2}
.ctGraphe .pointComp{fill:var(--ink3);stroke:var(--card);stroke-width:2}
.ctGraphe .croix{stroke:var(--ink3);stroke-width:1}
.ctGraphe .zone{fill:transparent;cursor:pointer}
.ctGraphe .plafond line{stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 4}
.ctGraphe .plafond text{fill:var(--red);font-size:11px;font-weight:600}
.ctBulle{position:absolute;z-index:3;width:212px;box-sizing:border-box;padding:11px 13px 12px;border-radius:16px;pointer-events:none;
  background:var(--tip);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-rim),0 14px 32px -12px rgba(0,0,0,.35)}
.ctBulle[hidden]{display:none}
.ctBulle .q{font-size:12px;color:var(--ink2)}
.ctBulle .t{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:1px;font-variant-numeric:tabular-nums}
.ctBulle .s{font-size:12px;color:var(--ink2)}
.ctBulle .l{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px}
.ctBulle .l i{width:12px;height:3px;border-radius:2px;flex:0 0 auto}
.ctBulle .l span{flex:1;color:var(--ink2)}
.ctBulle .l b{font-weight:600;font-variant-numeric:tabular-nums}
.ctTableau{height:272px;overflow:auto;border-radius:16px;border:1px solid var(--line);margin-top:18px}
.ctTableau table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.ctTableau th{text-align:left;font-weight:600;color:var(--ink2);padding:9px 8px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.ctTableau td{padding:8px;border-bottom:1px solid var(--line)}
.ctTableau th:first-child,.ctTableau td:first-child{padding-left:12px}
.ctTableau th:last-child,.ctTableau td:last-child{padding-right:12px;text-align:right}
.ctTableau td:last-child{font-weight:600}
.ctPanneau .titreP{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:4px}
.ctPanneau .titreP.plus{margin-top:18px}
.ctLigneF{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.ctLigneF .pt{width:10px;height:10px;border-radius:3px}
.ctLigneF .n1{font-size:14px;font-weight:600}
.ctLigneF .n2{font-size:12px;color:var(--ink2);margin-top:1px}
.ctLigneF .d{text-align:right}
.ctLigneF .d .n1{font-variant-numeric:tabular-nums}
.ctModele{padding:9px 0;border-bottom:1px solid var(--line)}
.ctModele .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ctModele .nom{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0}
.ctModele .m{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.ctModele .r{font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.4}
.ctModele .note{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;font-weight:500;color:var(--ink)}
.ctModele .note svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 4. Qui te coûte le plus */
.ctClients{margin-top:18px}
.ctCl{display:grid;grid-template-columns:minmax(180px,1fr) minmax(120px,236px) 84px 104px 180px 64px 44px;column-gap:16px;align-items:center}
.ctCl.tete{padding-bottom:8px;font-size:12px;color:var(--ink3)}
/* Le trait de séparation vit sur un pseudo-élément : posé en border-top sur une ligne aux
   coins arrondis (pour le survol), il se courbait à ses deux bouts. */
/* Hauteur MINIMALE : un nom sur deux lignes (« Client 4b7f2e — » puis l'adresse) agrandit sa ligne. */
.ctCl.ligne{position:relative;box-sizing:border-box;min-height:52px;padding:6px 0;cursor:pointer;border-radius:10px}
.ctCl.ligne::before{content:"";position:absolute;left:0;right:0;top:0;height:0;border-top:1px solid var(--line);pointer-events:none}
.ctCl.ligne:hover{background:var(--fill2)}
.ctCl.sans{cursor:default}
.ctCl.sans::before{border-top:1px dashed var(--line2)}
.ctCl.sans:hover{background:transparent}
.ctCl .qui{display:flex;align-items:center;gap:11px;min-width:0}
.ctAvatar{width:32px;height:32px;border-radius:50%;background:var(--avatar);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ctAvatar.vide{box-sizing:border-box;background:transparent;border:1.5px dashed var(--ink3);color:var(--ink2);font-weight:700;font-size:13px}
.ctCl .nom{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.ctCl .nom .rep{white-space:nowrap}
.ctCl .sous{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctMini{display:flex;gap:2px;align-items:center;height:8px}
.ctMini span{display:block;height:8px}
.ctCl .montant{text-align:right;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.ctCl .plaf{display:flex;align-items:center;gap:10px}
.ctMeter{position:relative;width:90px;height:6px;border-radius:3px;background:var(--fill);flex:0 0 auto}
.ctMeter i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.ctCl .plaf span{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:500}
.ctCl .plaf span.rouge{color:var(--red);font-weight:600}
.ctCl .paie{font-size:14px;color:var(--ink3);font-variant-numeric:tabular-nums}
.ctCl .paie.oui{color:var(--ink);font-weight:600}
.ctChevron{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--fill2)}
.ctChevron svg{width:12px;height:12px;fill:none;stroke:var(--ink2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ctClientsPied{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;color:var(--ink2);flex-wrap:wrap}

/* 5. Chaque service · ce que 1 € produit · ce qui rentre */
.ctDeux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ctPile{display:flex;flex-direction:column;gap:16px;min-width:0}
.ctServices{margin-top:14px}
.ctSvc{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:58px;padding:6px 0;cursor:pointer;border-radius:10px}
.ctSvc::before{content:"";position:absolute;left:0;right:0;top:0;height:0;border-top:1px solid var(--line);pointer-events:none}
.ctSvc:hover{background:var(--fill2)}
.ctSvcIc{width:36px;height:36px;border-radius:10px;background:var(--fill2);display:inline-flex;align-items:center;justify-content:center}
.ctSvcIc svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ctSvc .nom{font-size:15px;font-weight:600}
.ctSvc .det{font-size:12px;color:var(--ink2);margin-top:1px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ctSvc .droite{text-align:right}
.ctSvc .m{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.ctSvc .s{font-size:12px;color:var(--ink2);margin-top:1px}
.ctGratuit{display:inline-flex;font-size:12px;font-weight:600;color:var(--ink2);background:var(--fill2);border-radius:999px;padding:3px 10px}
.ctManque{display:flex;align-items:center;gap:12px}
.ctManque .etat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.ctManque .etat i{width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.ctPj{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--link);background:rgba(0,113,227,.09);border-radius:999px;padding:1px 8px;border:0;cursor:pointer}
.ctPj svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctTotal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--line2);padding-top:14px;margin-top:2px;flex-wrap:wrap}
.ctTotal .a{font-size:15px;font-weight:600}
.ctTotal .b{font-size:15px}
.ctTotal .b b{font-weight:700}
.ctTotal .b span{color:var(--ink2)}
.ctAjout{margin-top:12px}
.ctTuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.ctTuileU{display:flex;gap:12px;padding:14px 16px;border-radius:18px;background:var(--card2);min-width:0}
.ctTuileU>i{display:block;width:4px;border-radius:2px;flex:0 0 auto}
.ctTuileU .c{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.ctTuileU .q{font-size:14px;font-weight:600;margin-top:3px}
.ctTuileU .d{font-size:12px;color:var(--ink2);margin-top:3px}
.ctRevenu .gros{display:flex;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.ctRevenu .gros .v{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ctRevenu .gros .s{font-size:14px;color:var(--ink2)}
.ctCompteurs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px;border-radius:16px;background:var(--card2);padding:12px 4px}
.ctCompteurs>div{text-align:center}
.ctCompteurs>div+div{border-left:1px solid var(--line)}
.ctCompteurs b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.ctCompteurs span{font-size:12px;color:var(--ink2)}
.ctFormules .titreP{font-size:13px;font-weight:600;color:var(--ink2);margin-top:18px}
.ctFormule{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.ctFormule .n{font-weight:600}
.ctFormule .p{color:var(--ink2);font-variant-numeric:tabular-nums}
.ctFormule .net{font-weight:600;font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
.ctPetit{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ink2)}
.ctPied{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;padding:2px 6px 0;font-size:12px;color:var(--ink2)}
.ctPied span{display:inline-flex;align-items:center;gap:6px}
.ctPied .ctLien{white-space:normal;text-align:left}
.ctPied svg{width:13px;height:13px;fill:none;stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── La fiche d'un client ── */
.ctFiche{display:flex;flex-direction:column;gap:28px}
.ctFicheTete{box-sizing:border-box;padding:28px 32px;border-radius:30px;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);column-gap:36px;align-items:center}
.ctFicheTete .qui{display:flex;align-items:center;gap:18px;min-width:0}
.ctFicheTete .grandAvatar{width:76px;height:76px;border-radius:50%;flex:0 0 auto;background:var(--avatar);color:#fff;font-size:28px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(0,0,0,.3)}
.ctFicheTete .grandNom{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
/* Une adresse n'est pas un prénom : en titre à 34 px, elle criait sur trois lignes. */
.ctFicheTete .grandNom.adresse{font-size:24px;letter-spacing:-.015em;line-height:1.15}
.ctFicheTete .depuis{font-size:14px;color:var(--ink2);margin-top:4px;line-height:1.45}
.ctKpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ctKpi{padding:14px 16px;border-radius:18px;background:var(--card);box-shadow:var(--card-shadow);min-width:0}
.ctKpi .l{font-size:13px;color:var(--ink2)}
.ctKpi .v{font-size:30px;font-weight:700;letter-spacing:-.025em;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctKpi .v.rouge{color:var(--red)}
.ctKpi .s{font-size:12px;color:var(--ink2);margin-top:2px}
.ctKpi .ctMeter{width:100%;margin-top:6px}
.ctFicheDeux{display:grid;grid-template-columns:minmax(0,700px) minmax(0,1fr);gap:16px;align-items:stretch}
.ctBarreF{display:flex;gap:2px;height:14px;margin-top:18px}
.ctBarreF span{display:block;height:14px}
.ctCascade svg text{font-variant-numeric:tabular-nums}
.ctReglage{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:14px 16px;border-radius:16px;background:var(--card2)}
.ctReglage:first-of-type{margin-top:20px}
.ctReglage .t1{font-size:15px;font-weight:600}
.ctReglage .t2{font-size:12px;color:var(--ink2);margin-top:2px}
.ctStepper{display:flex;align-items:center;gap:12px}
.ctStepper button{width:32px;height:32px;border-radius:50%;border:0;background:var(--fill);color:var(--ink);font-size:18px;font-weight:600;cursor:pointer;line-height:1}
.ctStepper button:hover{background:rgba(120,120,128,.22)}
.ctStepper span{min-width:52px;text-align:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.ctInter{width:51px;height:31px;box-sizing:border-box;padding:2px;border-radius:999px;border:0;cursor:pointer;display:flex;align-items:center;background:var(--fill);justify-content:flex-start;transition:background .2s}
.ctInter[aria-checked="true"]{background:var(--green);justify-content:flex-end}
.ctInter span{width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16)}
.ctAppels{width:100%;margin-top:14px;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ctAppels th{text-align:left;font-size:12px;color:var(--ink3);font-weight:500;padding:0 8px 8px 0}
.ctAppels td{padding:11px 8px 11px 0;border-top:1px solid var(--line)}
.ctAppels td:last-child,.ctAppels th:last-child{text-align:right;padding-right:0}
.ctAppels .mono{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.ctAppels .fn{display:inline-flex;align-items:center;gap:8px}
.ctAppels .fn i{width:8px;height:8px;border-radius:2px}
.ctRetour{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px 0 8px;border-radius:999px;border:0;background:var(--fill2);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.ctRetour svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── Les feuilles (saisir une facture, réglages) ── */
.ctVoile{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.34);display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ctFeuille{position:relative;width:440px;max-width:100%;max-height:calc(100vh - 40px);overflow-y:auto;border-radius:26px;padding:22px 22px 18px;
  background:rgba(248,248,250,.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-rim),0 30px 80px -20px rgba(0,0,0,.45)}
.ctFeuille .barreF{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ctFeuille .barreF h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.ctFeuille .barreF button{border:0;background:transparent;font-size:15px;color:var(--link);cursor:pointer;padding:6px 4px}
.ctFeuille .barreF button.fort{font-weight:600}
.ctFeuille .barreF button:disabled{color:var(--ink3);cursor:default}
.ctFeuille .qui{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;text-align:center}
.ctFeuille .qui .ctSvcIc{width:48px;height:48px;border-radius:13px}
.ctFeuille .qui .ctSvcIc svg{width:24px;height:24px}
.ctFeuille .qui b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.ctFeuille .qui span{font-size:13px;color:var(--ink2)}
.ctMontant{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:14px}
.ctMontant input{width:100%;max-width:260px;border:0;background:transparent;text-align:center;font-size:44px;font-weight:700;letter-spacing:-.03em;color:var(--ink);outline:none;font-variant-numeric:tabular-nums}
.ctMontant input::placeholder{color:var(--ink3)}
.ctGroupe{margin-top:16px;border-radius:16px;background:var(--card);overflow:hidden}
.ctChamp{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 14px;border-top:1px solid var(--line);font-size:15px}
.ctChamp:first-child{border-top:0}
.ctChamp input[type=date],.ctChamp input[type=text]{border:0;background:transparent;font-size:15px;color:var(--ink);text-align:right;outline:none;min-width:0}
.ctChamp input[type=text]{width:60%}
.ctChamp .seg button{padding:5px 12px}
.ctFichier{display:flex;align-items:center;gap:8px;color:var(--link);font-size:15px;cursor:pointer}
.ctFichier input{display:none}
.ctFichier .nomF{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctFeuille .explique{font-size:12px;line-height:1.45;color:var(--ink2);margin:12px 4px 0}
.ctFeuille .erreur{font-size:13px;color:var(--bad);margin:10px 4px 0}
.ctFeuille .erreur:empty{display:none}

/* ── Adaptation ── */
@media (max-width:1320px){
  .ctAlertes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctIAgrille{grid-template-columns:minmax(0,1fr)}
  .ctPanneau{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:22px}
  .ctPanneau .titreP.plus{margin-top:0}
  .ctCl{grid-template-columns:minmax(160px,1fr) minmax(90px,160px) 80px 96px 150px 54px 36px;column-gap:12px}
  .ctMeter{width:64px}
  .ctFicheDeux{grid-template-columns:minmax(0,1fr)}
}
/* Mesuré au banc : entre 981 et 1 180 px (barre latérale ouverte), les sept colonnes du
   classement débordaient de leur carte de 70 px. La mini-barre par fonction s'efface
   (elle reste dans la fiche du client) et le plafond se resserre. */
@media (max-width:1180px){
  .ctCl{grid-template-columns:minmax(140px,1fr) 80px 90px 130px 54px 36px}
  .ctCl .fn{display:none}
  .ctMeter{width:56px}
}
@media (max-width:1100px){
  .ctHero{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .ctDeux{grid-template-columns:minmax(0,1fr)}
  .ctFicheTete{grid-template-columns:minmax(0,1fr);row-gap:20px}
}
/* Sur un Mac de moins de 1 420 px (MacBook à 1 280 ou 1 366) : la barre du haut ne tient
   plus tout sur une ligne — mesuré au banc, elle passait sur deux lignes, la période en
   haut à droite et les filtres en dessous. Les réglages descendent en tête de page, sur
   une ligne : la période à gauche, les filtres à droite. */
@media (max-width:1419px){
  body[data-tab="couts"] .tb-page{display:none}
  .ctControles{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 20px}
  .ctControles .grpPeriode .ctMenu{right:auto;left:0}
}
/* Sur iPad ou dans une fenêtre étroite : les réglages s'empilent. */
@media (max-width:980px){
  .ctControles{flex-direction:column;align-items:stretch;gap:10px;margin:0 0 18px}
  .ctControles .grpPeriode{display:block}
  .ctControles .grpFiltres{justify-content:flex-start;gap:8px}
  .ctControles .seg.periodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .ctControles .seg.periodes button{padding:7px 4px;font-size:14px}
  .ctControles .ctMenu{right:auto;left:0}
  .ctControles .ctDates{left:0;right:0;min-width:0}
}
/* Sur iPhone : une vraie app iOS — un titre, des blocs empilés, des listes groupées. */
@media (max-width:700px){
  .ctPage,.ctFiche{gap:22px}
  .ctHero{padding:20px 20px 18px;border-radius:28px;min-height:0}
  .ctHero .total{font-size:52px}
  .ctLegende .l{grid-template-columns:10px minmax(0,1fr) auto;font-size:14px}
  .ctLegende .p{display:none}
  .ctAlertes{grid-template-columns:minmax(0,1fr);gap:0;border-radius:26px;background:var(--card);box-shadow:var(--card-shadow);overflow:hidden}
  .ctAlerte{min-height:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line);padding:12px 16px}
  .ctAlerte:first-child{border-top:0}
  .ctCarte{padding:18px 16px 16px;border-radius:26px}
  .ctCarte h2,.ctTete h2{font-size:20px}
  .ctEntete{flex-wrap:wrap;row-gap:12px}
  .ctEntete>div:first-child{flex:1 1 100%}
  .seg.formules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:16px}
  .seg.formules button{border-radius:13px}
  .ctResume{gap:18px}
  .ctResume .gros span.v{font-size:32px}
  .ctGraphe,.ctTableau{height:204px}
  .ctPanneau{grid-template-columns:minmax(0,1fr)}
  .ctPanneau .titreP.plus{margin-top:18px}
  .ctCl{grid-template-columns:minmax(0,1fr) auto auto 30px;column-gap:10px}
  .ctCl .fn,.ctCl .plafC,.ctCl .paie,.ctCl.tete{display:none}
  .ctCl.ligne{min-height:56px;padding:6px 0}
  .ctCl .nom{-webkit-line-clamp:3}
  .ctTuiles{grid-template-columns:1fr 1fr}
  /* Chaque service, façon liste Réglages : le nom et le montant sur la première ligne,
     le détail en dessous, sur toute la largeur (sur deux colonnes, le nom tenait dans
     cent pixels et se cassait en trois lignes). */
  .ctSvc{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"ic nom m" "ic det det" "ic s s";column-gap:10px;row-gap:1px;padding:9px 0}
  .ctSvc>div,.ctSvc .droite,.ctSvc .ctManque{display:contents}
  .ctSvc>.ctSvcIc{grid-area:ic;width:32px;height:32px;border-radius:9px}
  .ctSvc .nom{grid-area:nom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .ctSvc .det{grid-area:det}
  .ctSvc .droite>:first-child,.ctSvc .ctManque .ctBtn{grid-area:m;justify-self:end}
  .ctSvc .droite>.s,.ctSvc .ctManque .etat{grid-area:s;text-align:left;margin-top:1px!important}
  .ctCompteurs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .ctCompteurs>div:nth-child(3){border-left:0}
  .ctPied{flex-direction:column;align-items:flex-start;gap:8px}
  .ctPied span{align-items:flex-start}
  .ctTuileU .c{font-size:24px}
  .ctRevenu .gros .v{font-size:36px}
  .ctCompteurs b{font-size:18px}
  .ctKpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctKpi .v{font-size:24px}
  .ctFicheTete{padding:20px}
  .ctFicheTete .grandAvatar{width:60px;height:60px;font-size:22px}
  .ctFicheTete .grandNom{font-size:28px}
  .ctFicheTete .grandNom.adresse{font-size:21px}
  .ctAppels th:nth-child(3),.ctAppels td:nth-child(3),.ctAppels th:nth-child(4),.ctAppels td:nth-child(4){display:none}
  .ctVoile{align-items:flex-end;padding:0}
  .ctFeuille{width:100%;max-height:92vh;border-radius:26px 26px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media print{
  .side,.topbar,.ctControles,.ctVoile{display:none!important}
  .content{margin-left:0}
}