/* Q24 Compta 10.3 (21/10/2026) — chargée APRÈS comptable-app.css : barre latérale sur ordinateur, 6 onglets sur iPhone, Ma journée,
   Virements, Moi, bulle « Demander à Balta », impression (« Ma journée du … », fiche de virements). Couleurs du thème iOS commun (--i-…).
   Zones de toucher ≥ 44 px ; aucune page plus large que l'écran. */

/* ---- barre du bas : 6 onglets sur téléphone */
.cp-barre{grid-template-columns:repeat(6,1fr)}
.cp-barre button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:419px){.cp-barre{padding-left:2px;padding-right:2px}.cp-barre button{font-size:11px;gap:2px}.cp-barre svg{width:24px;height:24px}.cp-barre__pastille{left:calc(50% + 4px)}}
@media (min-width:820px) and (max-width:1023px){.cp-barre{width:680px}}

/* ---- ordinateur (≥ 1024 px) : barre latérale à gauche, pleine hauteur ; le contenu prend la place restante */
@media (min-width:1024px){
  .cp{max-width:none;padding-left:0;padding-right:0}
  .cp-coque{margin-left:232px;padding:0 32px!important;max-width:1180px}
  .cp-haut{margin:0 -32px 10px;padding-left:32px!important;padding-right:32px!important}
  .cp-barre{left:0;right:auto;top:0;bottom:0;transform:none;width:232px;border-radius:0;border:0;border-right:.5px solid var(--i-sep-strong);
    display:flex;flex-direction:column;gap:4px;padding:84px 12px 16px;background:var(--i-bar)}
  .cp-barre button{flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:0 14px;border-radius:12px;font-size:16px;font-weight:600;text-align:left}
  .cp-barre button:hover{background:var(--i-fill)}
  .cp-barre button[aria-current="true"]{background:var(--i-accent-tint)}
  .cp-barre svg{width:24px;height:24px;flex:none}
  .cp-barre__pastille{position:static;margin-left:auto}
  .cp-toast{left:calc(50% + 116px);bottom:28px}
}

/* ---- Aujourd'hui : bouton « Générer la journée comptable » et rappels des virements */
.cpx-journee-carte{display:grid;gap:8px;margin:4px 0 12px}
.cpx-gros{width:100%;min-height:56px!important;font-size:18px!important;border-radius:16px!important;gap:10px}
.cpx-gros svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-btn--rouge.cpx-gros{background:var(--i-accent)!important;color:var(--i-on-accent)}
.cpx-journee-suivi{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 14px;border-radius:14px;background:var(--i-card);box-shadow:var(--i-shadow);color:var(--i-label);text-decoration:none}
.cpx-journee-suivi span{flex:none}
.cpx-journee-suivi progress{flex:1;min-width:60px;height:8px;accent-color:var(--i-green)}
.cpx-journee-suivi i,.cpx-alerte i{font-style:normal;color:var(--i-label3);font-size:20px}
.cpx-alerte{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:var(--i-orange-tint);color:var(--i-orange);text-decoration:none}
.cpx-alerte b{flex:1 1 auto}.cpx-alerte span{color:var(--i-label2);font-size:14px}
.cpx-alerte--rouge{background:var(--i-accent-tint);color:var(--i-accent)}

/* ---- Ma journée */
.cpx-barre-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.cpx-taches{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cpx-tache{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:16px;background:var(--i-card);box-shadow:var(--i-shadow)}
.cpx-tache__corps{flex:1;min-width:0;display:grid;gap:3px}
.cpx-tache__corps b{overflow-wrap:anywhere}
.cpx-tache__meta{display:flex;flex-wrap:wrap;gap:2px}
.cpx-tache--faite .cpx-tache__corps{opacity:.55}
.cpx-tache--faite .cpx-tache__corps b{text-decoration:line-through}
.cpx-case{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--i-label3);background:none;color:var(--i-on-accent);font:700 20px/1 var(--i-font);cursor:pointer}
.cpx-case[aria-pressed="true"]{background:var(--i-green);border-color:var(--i-green)}
.cpx-tache .cp-btn{flex:none;align-self:center}
.cp-badge--violet{background:var(--i-violet-tint)!important;color:var(--i-violet)!important}
.cp-badge--rouge{background:var(--i-accent-tint)!important;color:var(--i-accent)!important}

/* ---- Virements */
.cpx-note{margin:6px 0 12px}
.cpx-lot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.cpx-lot span{font-weight:700;margin-right:auto}
.cpx-virs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:900px){.cpx-virs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cpx-vir{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:var(--i-card);box-shadow:var(--i-shadow);border-left:4px solid var(--i-orange)}
.cpx-vir--prepare{border-left-color:var(--i-blue)}.cpx-vir--fait{border-left-color:var(--i-green)}.cpx-vir--en_retard{border-left-color:var(--i-accent)}
.cpx-vir__tete{display:flex;gap:10px;justify-content:space-between;align-items:baseline}
.cpx-vir__tete b:first-child{overflow-wrap:anywhere}
.cpx-vir__montant{flex:none;font-variant-numeric:tabular-nums}
.cpx-vir__infos{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:14px;color:var(--i-label2)}
.cpx-vir .cp-actions{display:flex;flex-wrap:wrap;gap:8px}
.cpx-menu-vir{margin:8px 0 12px}

/* ---- Moi */
.cpx-edt{width:100%;border-collapse:collapse;font-size:15px}
.cpx-edt th{text-align:left;font-weight:600;padding:8px 8px 8px 0;width:7.5em}
.cpx-edt td{padding:8px 0;border-bottom:.5px solid var(--i-sep)}
.cpx-edt th{border-bottom:.5px solid var(--i-sep)}
.cpx-edt--repos td,.cpx-edt--repos th{color:var(--i-label3)}
.cpx-soldes{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 12px}
.cpx-soldes p{margin:0;flex:1 1 130px;padding:10px 12px;border-radius:12px;background:var(--i-fill)}
.cpx-soldes b{display:block;font-size:22px}.cpx-soldes span{font-size:13px;color:var(--i-label2)}
.cpx-form{display:grid;gap:10px;margin-bottom:12px}
.cpx-form select.cp-champ,.cpx-form input.cp-champ,.cpx-form textarea{width:100%;min-height:44px;font-size:16px}
.cpx-justif input{display:block;margin-top:4px;font-size:15px;max-width:100%}
.cpx-liste{list-style:none;margin:0;padding:0}
.cpx-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 0;border-top:.5px solid var(--i-sep)}
.cpx-liste li>div{flex:1 1 200px;min-width:0;display:grid;gap:2px}

/* ---- Messages : le cadre de la messagerie commune */
.cpx-messagerie{min-height:60vh}

/* ---- bulle « Demander à Balta » : ronde, en bas à droite, au-dessus de la barre du bas sur iPhone (jamais dessus) */
.cpx-balta-bulle{position:fixed;z-index:35;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;border:0;
  display:grid;place-items:center;align-content:center;gap:0;background:#8e1b1b;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:pointer;font:700 11px/1 var(--i-font)}
.cpx-balta-bulle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cpx-balta-bulle span{margin-top:1px}
.cpx-balta-bulle:focus-visible{outline:3px solid var(--i-blue);outline-offset:3px}
.cpx-balta-bulle--ouverte{background:#383e42}
.cpx-balta{position:fixed;z-index:36;right:16px;bottom:calc(150px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 230px));
  display:flex;flex-direction:column;gap:8px;min-height:0!important;padding:14px;border-radius:18px;background:#f1ede4;color:#383e42;box-shadow:0 14px 44px rgba(0,0,0,.3);overflow:hidden}
.cpx-balta[hidden]{display:none}
.cpx-balta__tete{flex-direction:row!important;align-items:center;justify-content:space-between}
.cpx-balta__tete .ab-btn{min-width:44px;min-height:44px}
.cpx-balta__fil{list-style:none;margin:0;padding:2px;flex:1;max-height:none!important;min-height:80px}
.cpx-balta__fil .ab-bulle p{margin:0 0 6px}
.cpx-balta__fil .ab-bulle--moi{align-self:flex-end;background:#383e42;color:#fff}
.cpx-balta .ab-exemples{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:none}
.cpx-balta .ab-exemple{flex:none;min-height:36px}
.cpx-balta__saisie{display:flex;gap:6px;flex:none}
.cpx-balta__champ{flex:1;min-width:0;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid rgba(56,62,66,.25);background:#fff;color:#383e42;font:16px var(--i-font)}
.cpx-balta__note{margin:0;font-size:12px;color:#5c6368}
@media (min-width:820px){.cpx-balta-bulle{bottom:96px;right:24px}.cpx-balta{right:24px;bottom:164px}}
@media (min-width:1024px){.cpx-balta-bulle{bottom:24px;right:28px}.cpx-balta{right:28px;bottom:92px;max-height:min(600px,calc(100vh - 120px))}}
@media (max-width:519px){.cpx-balta{left:8px;right:8px;width:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px));max-height:calc(100vh - 230px)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cpx-balta{box-shadow:0 14px 44px rgba(0,0,0,.6)}}

/* ---- impression : seule la page préparée (« Ma journée du … », fiche de virements) sort sur papier ou en PDF */
#cpx-impression{display:none}
@media print{
  body.cpx-imprime>*:not(#cpx-impression){display:none!important}
  body.cpx-imprime #cpx-impression{display:block!important}
  body.cpx-imprime{background:#fff!important;color:#000!important;padding:0!important}
  .cpx-page{font:12pt/1.35 -apple-system,"Helvetica Neue",Arial,sans-serif;color:#000}
  .cpx-page h1{font-size:18pt;margin:0 0 4pt}
  .cpx-page header p{margin:0 0 12pt;color:#333}
  .cpx-page table{width:100%;border-collapse:collapse}
  .cpx-page th,.cpx-page td{border:1px solid #999;padding:5pt 6pt;text-align:left;vertical-align:top}
  .cpx-page th{background:#eee}
  .cpx-page__case{width:30pt;text-align:center!important;font-size:16pt}
  .cpx-page__montant{text-align:right!important;white-space:nowrap}
  .cpx-page tfoot td{font-weight:700}
  .cpx-page__signature{margin-top:24pt;display:grid;gap:14pt}
  .cpx-page__signature p{margin:0}
  .cpx-page__pied{margin-top:16pt;font-size:10pt;color:#444}
  @page{size:A4;margin:14mm}
}
.cpx-balta.ab,.cpx-balta .ab-titre,.cpx-balta .ab-contexte{color:#383e42}
.cpx-balta .ab-tete{border-bottom-color:rgba(56,62,66,.22)}
