/* ============================================================
   OEMA — Composants
   ============================================================ */

/* ---------- Titres de section ---------- */
.shead{display:flex;align-items:center;gap:10px;margin:26px 0 12px;}
.shead:first-child{margin-top:4px;}
.shead h2{font-size:16px;font-weight:600;letter-spacing:-.01em;font-family:'Switzer',sans-serif;}
.shead .cat{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);}
.shead .act{margin-left:auto;font-size:13px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:5px;}
.shead .act svg{width:15px;height:15px;stroke-width:2.4;}
.shead .act{background:none;}
.shead .cnt{margin-left:auto;font-size:12.5px;color:var(--muted2);font-weight:500;}

/* ---------- Cartes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r18);}
.card.pad{padding:18px;}
.card + .card{margin-top:12px;}

/* ---------- Bloc Solde OEMA (héros) ---------- */
.oema{
  border-radius:var(--r24);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--navy-grad-top),var(--navy-deep));
}
.oema::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.1px,transparent 1.1px);
  background-size:22px 22px;
}
.oema-in{position:relative;padding:22px 20px 20px;}
.oema .eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--yellow);display:flex;align-items:center;gap:8px;
}
.oema .eyebrow svg{width:15px;height:15px;stroke-width:2.2;}
.oema .big{
  font-family:'Clash Display',sans-serif;font-weight:700;
  font-size:clamp(36px,10.5vw,52px);line-height:1.04;margin-top:8px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.oema .big.neg{color:#FFC9C9;}
.oema .sub{font-size:13.5px;color:#C9D6F5;margin-top:6px;}
.oema .sub b{color:#fff;font-weight:600;}
.oema .split{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
}
.ostat{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r12);padding:12px 13px;
}
.ostat .v{font-family:'Clash Display',sans-serif;font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;}
.ostat .v.y{color:var(--yellow);}
.ostat .v.neg{color:#FFC9C9;}
.ostat .l{font-size:11px;color:#B9C7EE;margin-top:3px;font-weight:500;line-height:1.35;}
.oema .flow{
  margin-top:16px;border-top:1px solid rgba(255,255,255,.16);padding-top:13px;
  display:flex;flex-direction:column;gap:8px;
}
.oema .flow li{display:flex;align-items:center;gap:10px;font-size:13px;color:#C9D6F5;}
.oema .flow li b{margin-left:auto;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.oema .flow li b.pos{color:#9FE8C6;}
.oema .flow li b.neg{color:#FFB4B4;}
.oema .flow .ico{
  width:22px;height:22px;border-radius:7px;flex:none;
  background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;
}
.oema .flow .ico svg{width:13px;height:13px;stroke-width:2.4;}

/* ---------- Alerte de trésorerie ---------- */
.alert{
  display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap;
  border-radius:var(--r12);padding:13px 15px;margin-top:12px;
  font-size:13.5px;line-height:1.45;
}
.alert > span{flex:1 1 200px;min-width:0;}
.alert svg{flex:none;width:18px;height:18px;margin-top:1px;stroke-width:2.2;}
.alert b{font-weight:700;}
.alert.danger{background:var(--red-bg);border:1px solid var(--red-line);color:var(--red-ink);}
.alert.danger b{color:var(--red);}
.alert.warn{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber);}
.alert.ok{background:var(--green-bg);border:1px solid var(--green-line);color:var(--green);}
.alert.info{background:var(--info-bg);border:1px solid var(--info-line);color:var(--navy);}
.alert .go{margin-left:auto;flex:none;font-weight:700;text-decoration:underline;color:inherit;background:none;}

/* ---------- Tuiles de statistiques ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r12);padding:14px 15px;text-align:left;display:block;width:100%;}
.tile .ic{
  width:30px;height:30px;border-radius:9px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;
}
.tile .ic svg{width:16px;height:16px;stroke-width:2.2;}
.tile .v{font-family:'Clash Display',sans-serif;font-weight:700;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.tile .l{font-size:12.5px;color:var(--muted);margin-top:2px;font-weight:500;}
.tile .s{font-size:11.5px;color:var(--muted2);margin-top:7px;}
.ic.blue{background:var(--info-bg);color:var(--navy);}
.ic.green{background:var(--green-bg);color:var(--green);}
.ic.red{background:var(--red-bg);color:var(--red);}
.ic.amber{background:var(--amber-bg);color:var(--amber);}
.ic.grey{background:var(--card-2);color:var(--muted);}
.v.pos{color:var(--green);} .v.neg{color:var(--red);}

/* ---------- Scénarios de prévision ---------- */
.scen{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.scen.seul{grid-template-columns:1fr;}
.sc{
  border:1px solid var(--line);border-radius:var(--r12);
  padding:14px 13px;background:var(--card-2);text-align:left;
}
.sc .nm{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);}
.sc .pz{font-family:'Clash Display',sans-serif;font-weight:700;font-size:19px;line-height:1.1;margin:7px 0 2px;font-variant-numeric:tabular-nums;}
.sc .de{font-size:11px;color:var(--muted2);line-height:1.35;}
.sc.mid{background:var(--navy);border-color:var(--navy);color:#fff;}
.sc.mid .nm{color:var(--yellow);}
.sc.mid .de{color:#C9D6F5;}

/* ---------- Horizon 7 / 30 / 90 ---------- */
.horizons{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.hz{background:var(--card);border:1px solid var(--line);border-radius:var(--r12);padding:13px;}
.hz .d{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);}
.hz .v{font-family:'Clash Display',sans-serif;font-weight:700;font-size:18px;margin-top:6px;font-variant-numeric:tabular-nums;}
.hz .n{font-size:11px;color:var(--muted2);margin-top:2px;}

/* ---------- Courbe de trésorerie ---------- */
.spark{background:var(--card);border:1px solid var(--line);border-radius:var(--r12);padding:14px 14px 8px;}
.spark > svg{width:100%;height:auto;display:block;}
.spark .lgd{display:flex;gap:14px;font-size:11.5px;color:var(--muted2);margin-top:6px;flex-wrap:wrap;}
.spark .lgd i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px;}

/* ---------- Contrôle segmenté ---------- */
.seg{
  display:flex;gap:3px;background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--pill);padding:3px;overflow-x:auto;scrollbar-width:none;
}
.seg::-webkit-scrollbar{display:none;}
.seg button{
  flex:1 1 auto;white-space:nowrap;
  padding:8px 15px;border-radius:var(--pill);
  font-size:13px;font-weight:600;color:var(--muted);transition:.15s;
}
/* Sur petit écran, les quatre onglets doivent tenir sans défilement :
   le compteur passe à la trappe, l'information reste dans la vue. */
@media (max-width:480px){
  .seg button{padding:8px 9px;font-size:12.5px;}
  .seg button .n{display:none;}
}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1);}
.seg button .n{
  font-size:11px;font-weight:700;margin-left:6px;color:var(--muted2);
  background:var(--line-2);border-radius:var(--pill);padding:1px 6px;
}
.seg button.on .n{background:var(--info-bg);color:var(--navy);}

/* La barre de périodes compte six entrées : à l'étroit sur un téléphone,
   elle passe à la ligne plutôt que de défiler et d'en tronquer une. */
.seg.periodes{flex-wrap:wrap;overflow:visible;}
.seg.periodes button{flex:0 1 auto;}

/* Bornes de la période libre */
.periode-libre{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.periode-libre label{display:flex;flex-direction:column;gap:5px;}
.periode-libre span{font-size:12px;font-weight:600;color:var(--muted);}
.periode-libre input{
  height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r9);
  background:var(--card);color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:600;outline:none;
}
.periode-libre input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(35,61,133,.10);}

/* ---------- Puces / états ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;border-radius:var(--pill);
  padding:3px 9px;white-space:nowrap;
}
.chip svg{width:12px;height:12px;stroke-width:2.6;}
.chip.grey{background:var(--card-2);color:var(--muted);}
.chip.blue{background:var(--info-bg);color:var(--navy);}
.chip.green{background:var(--green-bg);color:var(--green);}
.chip.red{background:var(--red-bg);color:var(--red);}
.chip.amber{background:var(--amber-bg);color:var(--amber);}
.chip.yellow{background:var(--yellow);color:var(--ink);}
.chip.ghost{border:1px solid var(--line);color:var(--muted2);}

/* ---------- Listes d'opérations ---------- */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r18);overflow:hidden;}
.row{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;width:100%;text-align:left;
  border-bottom:1px solid var(--line-2);transition:background .12s;
  min-height:60px;
}
.row:last-child{border-bottom:none;}
.row:active{background:var(--card-2);}
@media (hover:hover){.row:hover{background:var(--card-2);}}
.row .av{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:'Clash Display',sans-serif;font-weight:700;font-size:14px;
}
.row .av svg{width:17px;height:17px;stroke-width:2.1;}
.row .txt{min-width:0;flex:1;}
.row .txt .t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .txt .m{font-size:12px;color:var(--muted2);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.row .txt .m .mt{min-width:0;}
.row .amt{
  flex:none;text-align:right;
  font-family:'Clash Display',sans-serif;font-weight:700;font-size:15.5px;
  font-variant-numeric:tabular-nums;
}
.row .amt.pos{color:var(--green);}
.row .amt.neg{color:var(--red);}
.row .amt .sm{display:block;font-family:'Switzer',sans-serif;font-size:11.5px;font-weight:500;color:var(--muted2);margin-top:2px;}
.row.done .txt .t,.row.done .amt{opacity:.5;}
.row.done .txt .t{text-decoration:line-through;}
.row .chev{flex:none;color:var(--faint);width:16px;height:16px;stroke-width:2.4;}

/* Ligne client : anneau de score et montant réunis à droite, sans chevron,
   sous peine de tasser cinq colonnes dans la largeur d'un téléphone. */
.row-client .cli-droite{display:flex;align-items:center;gap:10px;flex:none;}
.row-client .amt{min-width:66px;}
@media (max-width:420px){
  .row-client .cli-droite{gap:8px;}
  .row-client .amt{min-width:58px;font-size:14px;}
}

/* Séparateur de date dans une liste */
.daysep{
  display:flex;align-items:center;gap:10px;
  padding:11px 15px 7px;background:var(--card-2);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);
  border-bottom:1px solid var(--line-2);
}
.daysep .bal{margin-left:auto;letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;}
.daysep .bal.neg{color:var(--red);}
.daysep.today{background:var(--info-bg);color:var(--navy);}
.daysep.today .bal{color:var(--navy);}

/* ---------- État vide ---------- */
.empty{
  text-align:center;padding:40px 24px;
  background:var(--card);border:1px dashed var(--line);border-radius:var(--r18);
}
.empty .ic{
  width:48px;height:48px;border-radius:15px;margin:0 auto 14px;
  background:var(--card-2);color:var(--muted2);
  display:flex;align-items:center;justify-content:center;
}
.empty .ic svg{width:23px;height:23px;stroke-width:1.8;}
.empty h3{font-size:16px;font-weight:600;font-family:'Switzer',sans-serif;}
.empty p{font-size:13.5px;color:var(--muted);margin-top:5px;max-width:300px;margin-inline:auto;line-height:1.5;}
.empty .btn{margin-top:16px;}

/* ---------- Boutons ---------- */
.btn{
  border-radius:var(--pill);padding:12px 22px;font-size:14.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,transform .1s,opacity .15s;min-height:44px;
}
.btn:active{transform:translateY(1px);}
.btn svg{width:17px;height:17px;stroke-width:2.4;}
.btn.primary{background:var(--navy);color:#fff;}
.btn.primary:hover{background:var(--navy2);}
.btn.yellow{background:var(--yellow);color:#101B38;}
.btn.yellow:hover{background:var(--yellow-deep);}
.btn.ghost{background:var(--card-2);color:var(--muted);border:1px solid var(--line);}
.btn.ghost:hover{background:var(--line-2);color:var(--ink);}
.btn.danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line);}
.btn.danger:hover{background:var(--red);color:#fff;}
.btn.block{width:100%;}
.btn.sm{padding:8px 15px;font-size:13px;min-height:36px;}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* ---------- Feuille modale (bottom sheet iOS) ---------- */
.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(16,27,56,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s;
}
.scrim.on{opacity:1;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  background:var(--card);
  border-radius:var(--r24) var(--r24) 0 0;
  max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;
  box-shadow:var(--sh-3);
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.75,.2,1);
  padding-bottom:var(--sab);
}
.sheet.on{transform:none;}
.sheet .grip{width:38px;height:4px;border-radius:var(--pill);background:var(--line);margin:9px auto 0;flex:none;}
.sheet-head{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px 12px;border-bottom:1px solid var(--line);flex:none;
}
.sheet-head h2{font-size:17px;font-weight:600;font-family:'Switzer',sans-serif;}
.sheet-head .sub{font-size:12.5px;color:var(--muted2);margin-top:1px;}
.sheet-head .x{margin-left:auto;}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px;flex:1;overscroll-behavior:contain;}
.sheet-foot{
  padding:12px 18px 14px;border-top:1px solid var(--line);flex:none;
  display:flex;gap:10px;background:var(--card);flex-wrap:wrap;
}
.sheet-foot .btn{flex:1;}
/* Sur petit écran, une action au libellé long occupe sa propre ligne
   plutôt que de se casser en trois. */
@media (max-width:480px){
  .sheet-foot .btn.pleine{flex:1 1 100%;order:-1;}
}
@media (min-width:760px){
  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;
    transform:translate(-50%,-46%) scale(.97);
    width:min(560px,92vw);border-radius:var(--r24);
    max-height:86vh;opacity:0;
    transition:transform .22s cubic-bezier(.2,.75,.2,1),opacity .18s;
  }
  .sheet.on{transform:translate(-50%,-50%);opacity:1;}
  .sheet .grip{display:none;}
}

/* Menu d'ajout rapide */
.qmenu{display:flex;flex-direction:column;gap:8px;}
.qm{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 15px;border-radius:var(--r12);
  background:var(--card-2);border:1px solid var(--line);transition:.13s;
}
.qm:active{transform:scale(.985);}
.qm:hover{border-color:var(--blue);}
.qm .ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;}
.qm .ic svg{width:18px;height:18px;stroke-width:2.2;}
.qm b{font-size:14.5px;font-weight:600;display:block;}
.qm .grow{min-width:0;}
.qm-valeur{
  flex:none;font-size:13px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.qm .chev{flex:none;width:16px;height:16px;color:var(--faint);stroke-width:2.4;}
.qm span{font-size:12px;color:var(--muted2);}

/* ---------- Formulaires ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field > label{font-size:12.5px;font-weight:600;color:var(--muted);}
.field .req{color:var(--red);font-weight:700;margin-left:2px;}
.field .hint{font-size:11.5px;color:var(--muted2);line-height:1.4;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.frow.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:420px){.frow.three{grid-template-columns:1fr 1fr;}}
.inp{
  display:flex;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r9);
  padding:0 13px;height:48px;transition:border-color .15s,box-shadow .15s;
}
.inp:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(35,61,133,.10);}
.inp.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(214,69,69,.10);}
/* 16px minimum : en dessous, iOS zoome au focus */
.inp input,.inp textarea{
  flex:1;min-width:0;width:100%;border:none;outline:none;background:none;
  font-size:16px;font-weight:600;color:var(--ink);
}
.inp textarea{resize:none;padding:13px 0;font-weight:500;line-height:1.5;}
.inp.area{height:auto;align-items:flex-start;}
.inp input::placeholder,.inp textarea::placeholder{color:var(--faint);font-weight:500;}
.inp .u{font-size:14px;color:var(--muted2);font-weight:600;padding-left:8px;flex:none;}
.inp .p{font-size:14px;color:var(--muted2);font-weight:600;padding-right:8px;flex:none;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=date]{min-height:22px;}
select{
  font-size:16px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r9);
  height:48px;padding:0 40px 0 13px;width:100%;cursor:pointer;outline:none;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A92A6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .15s,box-shadow .15s;
}
select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(35,61,133,.10);}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B87A3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Sélecteur d'options en pastilles */
.opts{display:flex;gap:7px;flex-wrap:wrap;}
.opt{
  padding:9px 14px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--card);
  font-size:13px;font-weight:600;color:var(--muted);transition:.13s;min-height:40px;
  display:inline-flex;align-items:center;gap:6px;
}
.opt:hover{border-color:var(--blue);}
.opt.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.opt.on.pos{background:var(--green);border-color:var(--green);}
.opt.on.neg{background:var(--red);border-color:var(--red);}

/* Interrupteur */
.switch{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r12);
  padding:13px 15px;text-align:left;
}
.switch .tg{width:44px;height:26px;border-radius:var(--pill);background:var(--line);position:relative;flex:none;transition:background .2s;margin-left:auto;}
.switch .tg::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.switch.on .tg{background:var(--navy);}
.switch.on .tg::after{transform:translateX(18px);}
.switch b{font-size:14px;font-weight:600;}
.switch span{font-size:12px;color:var(--muted2);display:block;font-weight:400;margin-top:1px;}

.errbox{
  background:var(--red-bg);border:1px solid var(--red-line);border-radius:var(--r12);
  padding:12px 14px;margin-bottom:14px;font-size:13px;color:var(--red-ink);line-height:1.5;
}

/* ---------- Score de fiabilité ---------- */
.score{display:flex;align-items:center;gap:11px;}
.score .pastille{
  flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Clash Display',sans-serif;font-weight:700;
  color:#fff;line-height:1;
}
.score .lbl b{font-size:14px;font-weight:600;display:block;}
.score .lbl span{font-size:12px;color:var(--muted2);}

/* Un disque uni par palier : la couleur porte l'information. */
.sc-top  .pastille{background:var(--sc-top-plein);}
.sc-good .pastille{background:var(--sc-good-plein);color:#101B38;}
.sc-risk .pastille{background:var(--sc-risk-plein);}
.sc-bad  .pastille{background:var(--sc-bad-plein);}
.sc-none .pastille{background:var(--muted2);}

/* Repère de légende : un simple aplat, sans relief ni dégradé.
   Les émojis colorés que ces ronds remplacent étaient rendus en 3D par
   le système, ce qui jurait avec le reste de l'interface. */
.rond{
  flex:none;width:14px;height:14px;border-radius:50%;
  display:inline-block;background:var(--muted2);
}
.rond.sc-top{background:var(--sc-top-plein);}
.rond.sc-good{background:var(--sc-good-plein);}
.rond.sc-risk{background:var(--sc-risk-plein);}
.rond.sc-bad{background:var(--sc-bad-plein);}
.sc-top{color:var(--sc-top);} .sc-good{color:var(--sc-good);}
.sc-risk{color:var(--sc-risk);} .sc-bad{color:var(--sc-bad);}

.bar{height:6px;border-radius:var(--pill);background:var(--line-2);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:var(--pill);transition:width .5s cubic-bezier(.2,.7,.2,1);}

/* Détail : lignes clé/valeur */
.kv{display:flex;flex-direction:column;}
.kv > div{
  display:flex;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;
}
.kv > div:last-child{border-bottom:none;}
.kv .k{color:var(--muted);flex:none;}
.kv .v{margin-left:auto;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}
.kv .v.pos{color:var(--green);} .kv .v.neg{color:var(--red);}

/* ---------- Bouton de compte : pastille d'état de synchronisation ---------- */
#btn-compte{position:relative;}
#btn-compte::after{
  content:"";position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:50%;
  border:2px solid var(--card);background:transparent;
  transition:background .2s;
}
#btn-compte[data-etat="sync"]::after{background:var(--green);}
#btn-compte[data-etat="enCours"]::after{background:var(--blue);}
#btn-compte[data-etat="horsLigne"]::after,
#btn-compte[data-etat="erreur"]::after{background:var(--amber);}
#btn-compte[data-etat="conflit"]::after{background:var(--red);}

/* ---------- Notification éphémère ---------- */
.toast{
  position:fixed;left:50%;z-index:80;
  bottom:calc(var(--tabbar-h) + 16px);
  transform:translate(-50%,140%);
  background:var(--ink);color:#fff;
  border-radius:var(--pill);padding:12px 20px;
  font-size:13.5px;font-weight:600;box-shadow:var(--sh-3);
  display:flex;align-items:center;gap:9px;max-width:88vw;
  transition:transform .26s cubic-bezier(.2,.75,.2,1);
}
.toast.on{transform:translate(-50%,0);}
.toast svg{width:16px;height:16px;stroke-width:2.6;color:var(--yellow);flex:none;}
:root[data-theme="dark"] .toast{background:var(--card-2);border:1px solid var(--line);}

/* ---------- Calendrier ---------- */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.cal-head .mo{font-family:'Clash Display',sans-serif;font-weight:700;font-size:19px;text-transform:capitalize;}
.cal-head .nav{margin-left:auto;display:flex;gap:6px;}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r18);padding:12px;
}
.cal-dow{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted2);text-align:center;padding-bottom:6px;
}
.cal-d{
  aspect-ratio:1;border-radius:var(--r9);padding:5px 4px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:12.5px;font-weight:600;position:relative;transition:background .12s;
}
.cal-d.out{opacity:.32;}
.cal-d.today{background:var(--info-bg);color:var(--navy);font-weight:700;}
.cal-d.on{background:var(--navy);color:#fff;}
.cal-d .pips{display:flex;gap:2px;align-items:center;height:5px;}
.cal-d .pip{width:4px;height:4px;border-radius:50%;}
.cal-d .pip.in{background:var(--green);}
.cal-d .pip.out{background:var(--red);}
.cal-d .pip.fc{background:var(--yellow);}
.cal-d.on .pip{background:#fff;}
.cal-d .nb{
  position:absolute;bottom:2px;font-size:8.5px;font-weight:700;
  color:var(--muted2);font-variant-numeric:tabular-nums;
}
.cal-d.on .nb{color:#C9D6F5;}
.cal-d.neg::after{
  content:"";position:absolute;top:3px;right:3px;
  width:5px;height:5px;border-radius:50%;background:var(--red);
}

/* ---------- Récupérateur de charges ---------- */
.bloc-prompt{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r12);padding:12px;
}
.bloc-prompt pre{
  margin:0 0 12px;max-height:190px;overflow:auto;
  background:var(--card-2);border:1px solid var(--line-2);
  border-radius:var(--r9);padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.55;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;
  -webkit-overflow-scrolling:touch;
}

/* Ligne de charge proposée : la coche remplace l'avatar, puisque le
   geste attendu ici est de retenir ou d'écarter, pas d'ouvrir. */
.ligne-ia{transition:opacity .15s;}
.ligne-ia.non-retenue{opacity:.45;}
.ligne-ia .coche{
  flex:none;width:24px;height:24px;border-radius:7px;
  border:2px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .15s,border-color .15s;
}
.ligne-ia .coche.on{background:var(--navy);border-color:var(--navy);}
.ligne-ia .coche svg{width:14px;height:14px;stroke-width:3;}

/* La ligne porte deux gestes : la grande zone coche, le crayon corrige. */
.ligne-ia{padding:0;gap:0;}
.ligne-ia .ia-cocher{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  padding:13px 4px 13px 15px;text-align:left;
}
.ligne-ia .ia-editer{
  flex:none;width:46px;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted2);border-left:1px solid var(--line-2);
  transition:background .13s,color .13s;
}
.ligne-ia .ia-editer:active{background:var(--info-bg);color:var(--navy);}
@media (hover:hover){ .ligne-ia .ia-editer:hover{background:var(--info-bg);color:var(--navy);} }
.ligne-ia .ia-editer svg{width:17px;height:17px;stroke-width:2.2;}
/* Les étiquettes de cette liste sont explicatives, donc longues : on les
   laisse passer à la ligne plutôt que déborder sur le montant. */
.ligne-ia .chip{white-space:normal;}
.ligne-ia .amt{align-self:flex-start;padding-top:2px;}

/* ---------- Comptage de la caisse ---------- */
.caisse-total{
  background:linear-gradient(150deg,var(--navy-grad-top),var(--navy-deep));
  color:#fff;border-radius:var(--r18);padding:16px 18px;text-align:center;
}
.caisse-total .l{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--yellow);
}
.caisse-total .v{
  display:block;font-family:'Clash Display',sans-serif;font-weight:700;
  font-size:30px;margin-top:6px;font-variant-numeric:tabular-nums;
}
.caisse-total .n{display:block;font-size:12px;color:#C9D6F5;margin-top:2px;}

.coupures{display:flex;flex-direction:column;gap:6px;}
.coupure{
  display:flex;align-items:center;gap:8px;
  background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r9);padding:6px 10px;transition:opacity .15s;
}
.coupure.vide{opacity:.55;}
.coupure .cv{
  flex:none;width:58px;font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.coupure .cbtn{
  flex:none;width:34px;height:34px;border-radius:var(--r9);
  background:var(--card);border:1px solid var(--line);
  font-size:17px;font-weight:600;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
}
.coupure .cbtn:active{background:var(--info-bg);color:var(--navy);}
.coupure .cqte{
  flex:none;width:48px;height:34px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r9);
  background:var(--card);color:var(--ink);
  font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  outline:none;
}
.coupure .cqte:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(35,61,133,.10);}
.coupure .csous{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
@media (max-width:400px){
  .coupure .cv{width:50px;font-size:12.5px;}
  .coupure .csous{font-size:12px;}
}

/* ---------- Histogramme des statistiques ---------- */
.histo{display:flex;align-items:flex-end;gap:6px;height:130px;}
.hcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0;}
.hbarres{
  flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;
}
.hbarres i{
  display:block;width:44%;max-width:16px;min-height:2px;
  border-radius:3px 3px 0 0;transition:height .4s cubic-bezier(.2,.7,.2,1);
}
.hbarres .hin{background:var(--green);}
.hbarres .hout{background:var(--red);}
.hlbl{
  font-size:10px;color:var(--muted2);font-weight:600;
  text-transform:capitalize;white-space:nowrap;
}
.card .lgd{display:flex;gap:14px;font-size:11.5px;color:var(--muted2);flex-wrap:wrap;}
.card .lgd i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px;}

/* ---------- Divers ---------- */
.hr{height:1px;background:var(--line);margin:18px 0;}
.muted{color:var(--muted);}
.small{font-size:12.5px;}
.mono{font-variant-numeric:tabular-nums;}
.stack{display:flex;flex-direction:column;gap:10px;}
.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.grow{flex:1;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;}

/* ---------- Solde détaillé par banque ---------- */
/* Chaque compte forme un bloc : sans cette délimitation, deux banques
   de suite se liraient comme un seul formulaire à quatre champs. */
.banque,
.onb-bloc{
  border:1px solid var(--line);border-radius:var(--r9);
  padding:12px 12px 8px;margin-bottom:10px;background:var(--card-2);
}
.banque-pied{display:flex;justify-content:flex-end;margin-top:2px;}
.banque-total{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;margin-bottom:10px;
  border-radius:var(--r9);background:var(--card-2);
  font-size:14px;color:var(--muted);
}
.banque-total b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;}
.banque-aide{font-size:11.5px;color:var(--muted2);line-height:1.45;margin-top:8px;}

/* ---------- Tunnel d'accueil ---------- */
/* Trois segments valent mieux qu'un pourcentage : on voit d'un coup
   combien de questions restent, et qu'il y en a peu. */
.onb-jauge{display:flex;gap:6px;margin:2px 0 16px;}
.onb-jauge i{
  flex:1;height:4px;border-radius:4px;background:var(--line);
  transition:background .3s;
}
.onb-jauge i.on{background:var(--yellow);}
.onb-intro{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:18px;}
.onb-note{font-size:11.5px;line-height:1.5;color:var(--muted2);margin-top:4px;}

/* ---------- Bandeau de démonstration ---------- */
/* Fixe, jamais chassé par le défilement : on doit pouvoir vérifier d'un
   coup d'œil que ces chiffres ne sont pas les siens. */
.bandeau{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:9px;
  height:var(--h-bandeau,38px);
  padding:0 max(12px,var(--sar)) 0 max(12px,var(--sal));
  padding-top:var(--sat);
  background:var(--yellow);color:#101B38;
  font-size:12.5px;line-height:1.3;
}
.bandeau svg{width:16px;height:16px;flex:none;}
.bandeau .txt{min-width:0;}
.bandeau .txt b{font-weight:600;}
.bandeau .long{color:rgba(16,27,56,.72);}
.bandeau .sortie{
  margin-left:auto;flex:none;
  padding:5px 12px;border-radius:999px;
  background:#101B38;color:#fff;font-size:12px;font-weight:600;
}
@media (max-width:560px){ .bandeau .long{display:none;} }

/* Le reste de l'application descend d'autant. */
body.demo{--h-bandeau:calc(38px + var(--sat));}
body.demo .app{padding-top:var(--h-bandeau);}
body.demo .topbar{top:var(--h-bandeau);}
@media (min-width:900px){
  body.demo .rail{top:var(--h-bandeau);height:calc(100vh - var(--h-bandeau));}
}