/* La feuille de style de Pièces — sortie d'index.html.
   274 classes vivaient dans la même page que 3 500 lignes de JavaScript :
   chercher un style, c'était défiler au milieu du code. Le service worker
   la met en coquille hors-ligne, et /version la surveille comme le reste. */
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;800&family=Spline+Sans+Mono:wght@400;500&display=swap');
:root{
  --bg:#F1F3F9;--card:#FFF;--ink:#20222E;--mute:#8A8FA3;--line:#E7E9F2;
  --brand:#2A6BFF;--brand-ghost:#E8EFFF;--ok:#1FC77F;--wait:#FFAE1F;--miss:#FF5468;
  --sans:'Gabarito',-apple-system,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;
  --sh:0 10px 30px rgba(32,34,46,.08);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#E3E6EF;font-family:var(--sans);color:var(--ink);display:flex;justify-content:center;font-size:15px;font-weight:400}
#app{width:100%;max-width:430px;min-height:100dvh;background:var(--bg);position:relative;display:flex;flex-direction:column;box-shadow:0 0 70px rgba(32,34,46,.12)}
.screen{display:none;flex:1;flex-direction:column;padding:0 20px 108px;overflow-y:auto}
.screen.active{display:flex}
#s-cap{padding-bottom:132px}
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 4px 0}
.mark{font-weight:700;font-size:21px;letter-spacing:-.02em}
/* L'accueil est la page d'ouverture : le nom et la marque y ont droit à un peu
   plus de présence, maintenant que les pastilles internes ont disparu. */
#s-home .mark{font-size:26px;letter-spacing:-.03em}
#s-home .logomini{width:28px;height:28px;border-radius:9px;padding:6px}
#s-home .top{padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:2px}
#s-home .markwrap{gap:11px}
/* L'accueil est la porte d'entrée : on lui donne de l'air en haut et on aligne
   tout sur la même colonne, plutôt que de tasser les blocs les uns sur les autres. */
#s-home .top{align-items:center}
#s-home .tgrid{margin-top:16px;gap:9px}
#s-home #homebody{padding-top:2px}
.tcompacte{padding:13px 15px}
.hmois{display:flex;align-items:baseline;justify-content:space-between;width:100%;background:none;border:none;padding:0 4px;margin-top:14px;cursor:pointer;font-family:var(--sans);font-weight:800;font-size:15px;color:var(--ink);text-align:left}
.hmois-c{font-size:11.5px;font-weight:700;color:var(--mute);background:none;border:none;cursor:pointer;font-family:var(--sans);padding:0}
.hmois-nav{display:flex;align-items:center;gap:2px}
.hmois-t{background:none;border:none;padding:0 2px;cursor:pointer;font-family:var(--sans);font-weight:800;font-size:15px;color:var(--ink)}
/* Cibles tactiles franches : au pouce, une flèche de 11 px se rate. */
.hmois-f{background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:800;font-size:19px;line-height:1;color:var(--ink);padding:2px 8px;min-width:32px;min-height:32px}
.hmois-f[disabled]{opacity:.22;cursor:default}
.tile.sq{padding:12px 14px}
.markwrap{display:flex;align-items:center;gap:10px}
.logomini{width:22px;height:22px;background:var(--brand);border-radius:7px;display:grid;grid-template-columns:1fr 1fr;gap:2.5px;padding:5px}
.logomini i{background:rgba(255,255,255,.35);border-radius:1.5px}
.logomini i.lit{background:#5CFFB0}
.date{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.back{background:none;border:none;cursor:pointer;color:var(--mute);font-family:var(--sans);font-weight:700;font-size:13px;padding:0}
.px{width:9px;height:9px;border-radius:3px;flex:none;display:inline-block}
.px.ok{background:var(--ok);box-shadow:0 0 8px rgba(31,199,127,.65)}
.px.wait{background:var(--wait);box-shadow:0 0 8px rgba(255,174,31,.55)}
.px.read{background:#D6D9E4;animation:pulse 1s ease-in-out infinite}
.px.miss{background:var(--miss);box-shadow:0 0 9px rgba(255,84,104,.65)}
/* UNE couleur = UN sens. Rouge : décision requise. Orange : on attend le
   paiement, rien à faire. BLEU : à toi de photographier. Vert : c'est réglé. */
.px.act{background:var(--brand);box-shadow:0 0 8px rgba(42,107,255,.5)}
/* VIOLET = le ticket est là, on cherche son paiement à la banque. À ne pas
   confondre avec l'orange (« il manque le ticket ») ni avec le rouge
   (« il manque un renseignement de ta main »). */
.px.cherche{background:#B026C9;box-shadow:0 0 8px rgba(176,38,201,.5)}
.px.tick{background:#EF9F27;box-shadow:0 0 8px rgba(239,159,39,.5)}
.px.fact{background:#2f4bb0;box-shadow:0 0 8px rgba(47,75,176,.45)}
.misschip{font-family:var(--sans);font-weight:700;font-size:13px;background:#FFE3E7;color:var(--miss);border:none;border-radius:999px;padding:5px 11px;cursor:pointer}
/* Le motif n'est pas obligatoire partout : ton neutre, jamais l'alarme rouge. */
.motifchip{font-family:var(--sans);font-weight:700;font-size:13px;background:rgba(138,143,163,.16);color:var(--mute);border:none;border-radius:999px;padding:5px 11px;cursor:pointer}
.editlbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--mute)}
.corrfield{margin-top:12px}
.corrfield:first-of-type{margin-top:0}
.corrfield label{font-size:12.5px;font-weight:700;color:var(--mute)}
.corrfield.manque label{color:var(--miss);font-weight:800}
.corrfield.manque .field-motif{border-color:var(--miss);border-width:2px;background:#FFF4F5}
.corrfield input[type=date]{color-scheme:light}
#vcorriger.acompleter{border:2px solid var(--miss);box-shadow:0 0 0 4px rgba(255,84,104,.12),var(--sh)}
#vcorriger.acompleter #corrtitre{color:var(--miss);font-weight:800}
.field-motif.manque{border-color:var(--miss);border-width:2px;background:#FFF4F5}
.lienbtn{display:block;background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--brand);padding:8px 0 2px;margin-top:8px}
.champ{display:block;margin-top:10px}
.champlbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--mute);display:block;margin-bottom:5px}
.selectchamp{width:100%;-webkit-appearance:none;appearance:none;background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8FA3' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 16px center;border:1.5px solid var(--line);border-radius:16px;padding:15px 42px 15px 16px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.selectchamp:focus{outline:none;border-color:var(--brand)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn{margin-top:16px;width:100%;background:var(--brand);color:#fff;border:none;border-radius:999px;padding:16px;font-family:var(--sans);font-size:15.5px;font-weight:700;cursor:pointer;box-shadow:0 12px 26px rgba(42,107,255,.35)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5}
.ghostcta{margin-top:12px;width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:999px;color:var(--ink);padding:13px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans)}

/* accueil */
.zero{background:var(--card);border-radius:26px;padding:28px 24px;box-shadow:var(--sh);border:1px solid rgba(42,107,255,.10);margin-top:24px}
.zero .lamp{width:20px;height:20px;border-radius:7px;background:var(--ok);display:block;margin-bottom:18px;box-shadow:0 0 22px rgba(31,199,127,.75)}
.zero h1{font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.zero p{margin-top:8px;color:var(--mute);font-size:14.5px;font-weight:600}
.listcard{background:var(--card);border-radius:22px;padding:2px 16px;box-shadow:var(--sh);margin-top:16px}
.prow{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1.5px solid var(--line);cursor:pointer}
.prow:first-child{border-top:none}
.prow .s{flex:1;min-width:0}
.prow .s b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .s em{font-style:normal;font-size:12px;font-weight:600;color:var(--mute)}
.prow .amt{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sectitle{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mute);margin:22px 4px 0}

/* lecture */
#s-read{justify-content:center;align-items:center}
.readwrap{text-align:center}
.shotimg{width:170px;border-radius:12px;box-shadow:var(--sh);position:relative;overflow:hidden;display:block;margin:0 auto}
.scancadre{width:190px;height:250px;margin:0 auto;border-radius:16px;background:linear-gradient(180deg,#F7F8FC,#EEF0F7);border:1.5px solid var(--line);position:relative;overflow:hidden;box-shadow:var(--sh)}
.scancadre:before{content:"";position:absolute;inset:22px 26px;border-radius:8px;background:repeating-linear-gradient(180deg,#E2E5EF 0 3px,transparent 3px 22px)}
.scanline{position:absolute;left:0;right:0;height:3px;background:var(--ok);box-shadow:0 0 12px rgba(31,199,127,.9);animation:scan 1.4s ease-in-out infinite}
@keyframes scan{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}
.readwrap p{margin-top:18px;font-weight:700;color:var(--mute)}

/* validation */
.readcard{margin-top:12px;background:var(--card);border-radius:22px;padding:18px 20px;box-shadow:var(--sh)}
.readcard .who{font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.readcard .amt{font-family:var(--mono);font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:3px;color:var(--ink)}
.readcard .lu{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--mute)}
.vdatehaut{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);margin-top:5px}
.vdatehaut.manque{color:var(--miss)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-size:14px;font-weight:600;padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;color:var(--mute);cursor:pointer;background:var(--card);font-family:var(--sans)}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 6px 16px rgba(42,107,255,.25)}
.field-motif{margin-top:14px;display:flex;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:var(--card);padding:4px 4px 4px 16px}
.field-motif input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:14px;font-weight:600;background:transparent;color:var(--ink);padding:10px 0;min-width:0}
.field-motif input::placeholder{color:var(--mute);font-weight:500}
.details{margin-top:10px;background:var(--card);border-radius:18px;padding:0 16px;box-shadow:var(--sh)}
.details summary{list-style:none;cursor:pointer;padding:14px 0;font-size:14px;font-weight:600;color:var(--brand);display:flex;justify-content:space-between;align-items:center}
.details summary::-webkit-details-marker{display:none}
.drow{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;font-weight:600;border-top:1.5px solid var(--line)}
.drow span:first-child{color:var(--mute)}
.drow span:last-child{font-family:var(--mono);font-size:12.5px;font-weight:400;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Zone de suppression : détachée du reste, jamais collée à la barre du bas. */
.zonesuppr{margin-top:26px;padding-top:18px;border-top:1.5px solid var(--line);display:flex;justify-content:center}

/* nav + capture */
nav{position:absolute;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;background:#fff;border:1px solid rgba(42,107,255,.10);border-radius:999px;box-shadow:0 16px 40px rgba(32,34,46,.16);padding:8px 10px;display:flex;align-items:center;justify-content:space-between}
.tab{flex:1;background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:10.5px;color:var(--mute);padding:7px 0;display:flex;flex-direction:column;align-items:center;gap:3px}
.tab.on{color:var(--brand)}
.tab svg{width:18px;height:18px;stroke-width:1.5}
.capbtn{flex:none;width:54px;height:54px;background:var(--brand);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(42,107,255,.45);margin:-16px 8px 0}
.capbtn svg{width:21px;height:21px;stroke:#fff;stroke-width:1.4}
.capbtn:active{transform:scale(.95)}
/* ---------- appareil photo intégré (rafale) ---------- */
#s-cam{padding:0;background:#000;position:relative;overflow:hidden}
#camvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.camguide{position:absolute;inset:15% 11% 22%;border:2px dashed rgba(255,255,255,.55);border-radius:20px;z-index:1;pointer-events:none}
.camtop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top)) 18px 0;z-index:3}
.camclose{width:40px;height:40px;border-radius:50%;background:rgba(20,20,26,.5);border:none;color:#fff;font-size:19px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.camcount{background:rgba(20,20,26,.55);color:#fff;font-weight:700;font-size:13px;padding:9px 15px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--sans)}
.cammode{position:absolute;top:calc(72px + env(safe-area-inset-top));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:7px;z-index:3;pointer-events:none}
.camseg{display:flex;gap:3px;padding:3px;border-radius:999px;background:rgba(20,20,26,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
.camseg button{font-family:var(--sans);font-weight:700;font-size:12.5px;color:rgba(255,255,255,.72);background:none;border:none;padding:8px 18px;border-radius:999px;cursor:pointer}
.camseg button.on{background:#fff;color:#14141a}
.camaide{font-family:var(--sans);font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);text-shadow:0 1px 6px rgba(0,0,0,.6);padding:0 24px;text-align:center}
.camproc{position:absolute;left:50%;top:calc(74px + env(safe-area-inset-top));transform:translateX(-50%);background:rgba(31,199,127,.92);color:#fff;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:999px;z-index:3;font-family:var(--sans);display:none;align-items:center;gap:8px;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.camproc.on{display:flex}
.camproc:before{content:"";width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.camalert{position:absolute;left:16px;right:16px;top:calc(112px + env(safe-area-inset-top));z-index:4;border:none;cursor:pointer;background:var(--miss);color:#fff;font-family:var(--sans);font-weight:800;font-size:14px;padding:13px 16px;border-radius:14px;box-shadow:0 10px 26px rgba(255,84,104,.5);align-items:center;justify-content:center;gap:8px;animation:pulsealert 1.1s ease-in-out infinite}
@keyframes pulsealert{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
#dblcompare{display:none;position:fixed;inset:0;z-index:60;background:var(--bg);flex-direction:column}
#dblcompare.on{display:flex}
.cmphead{display:flex;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 14px 8px}
.cmphead .segwrap{margin-top:0}
.cmphead .segwrap button{font-size:12px;padding:9px 4px}
.cmpimg{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:6px 12px}
.cmpimg img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:var(--sh)}
.cmpbar{display:flex;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.cambar{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;padding:0 30px;z-index:3}
.camshot{width:76px;height:76px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.45);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45);flex:none;transition:transform .08s}
.camshot:active{transform:scale(.9)}
.camgal{width:50px;height:50px;border-radius:15px;background:rgba(20,20,26,.5);border:none;color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.camgal svg{width:22px;height:22px;stroke:#fff;stroke-width:1.6;fill:none}
.camdone{min-width:50px;padding:14px 20px;border-radius:999px;background:rgba(20,20,26,.5);border:none;color:#fff;font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.camflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.camflash.on{animation:flash .3s ease}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
#toast{position:absolute;left:50%;bottom:112px;transform:translateX(-50%) translateY(16px);background:#20222E;color:#fff;font-size:13.5px;font-weight:600;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:all .35s ease;z-index:50;display:flex;align-items:center;gap:9px;white-space:nowrap;box-shadow:0 14px 30px rgba(32,34,46,.3)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- grand écran : l'app respire ---------- */
@media (min-width: 900px){
  #app{max-width:1040px}
  .screen{padding:0 56px 120px}
  .top{padding-top:30px}
  nav{left:50%;right:auto;transform:translateX(-50%);width:430px}
  #toast{bottom:96px}
  /* Accueil : les pièces sur deux colonnes */
  #homebody .listcard{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;padding:2px 24px}
  #homebody .prow:nth-child(2){border-top:none}
  .zero{max-width:560px}
  /* Tuiles : on garde 2 colonnes, largeur alignée sur .zero */
  #homebody .tgrid,#homebody .tstrip{max-width:560px}
  /* Mois : une colonne confortable, centrée */
  #s-mois #mcorps{max-width:640px}
  /* Validation : carte à gauche, détails à droite
     (.active obligatoire — sinon l'écran serait visible en permanence) */
  #s-cap.active{display:grid;grid-template-columns:auto 1fr 1fr;gap:0 32px;align-content:start}
  #s-cap .top{grid-column:1/-1}
  #s-cap #vphoto{grid-column:1;grid-row:2/6;align-self:start;margin:18px 0 0}
  #s-cap .readcard,#s-cap .chips,#s-cap .field-motif{grid-column:2}
  #s-cap .details{grid-column:3;grid-row:2/5;align-self:start;margin-top:18px}
  #s-cap .btn,#s-cap .ghostcta{grid-column:2}
}
.jrow{padding:12px 0;border-top:1.5px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--mute);line-height:1.6;word-break:break-all}
.jrow:first-child{border-top:none}
.jrow b{color:var(--ink);font-weight:500}
.sw{width:48px;height:28px;border-radius:14px;background:#D6D9E4;border:none;cursor:pointer;position:relative;transition:background .25s;flex:none}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .25s;box-shadow:0 1px 4px rgba(32,34,46,.25)}
.sw.on{background:var(--ok)}
.sw.on:after{left:23px}
.hrow{display:flex;gap:12px;padding:13px 0;border-top:1.5px solid var(--line);align-items:baseline}
.hrow:first-child{border-top:none}
.hrow em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--mute);flex:none;width:78px}
.hrow .s{flex:1;font-size:14px;font-weight:600}
.hrow .s small{display:block;font-weight:500;color:var(--mute);font-size:12px;margin-top:1px}
.catrow{cursor:pointer}
.catrow .chev{color:var(--mute);font-size:18px;margin-left:8px;transition:transform .2s;display:inline-block}
.catlines{display:none;padding:0 0 6px}
.catlines.open{display:block}
.pline{display:flex;align-items:center;gap:10px;padding:10px 0 10px 12px;border-top:1.5px dashed var(--line);cursor:pointer}
.pline .pl-date{font-family:var(--mono);font-size:11px;color:var(--mute);width:34px;flex:none}
.pline .pl-nom{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pline .pl-amt{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Supervision : cartes utilisateur claires, groupées par état */
.ucard{background:var(--card);border-radius:18px;box-shadow:var(--sh);padding:16px 16px 14px;margin-top:10px}
.uhead{display:flex;align-items:center;gap:12px}
.uinit{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff}
.uhead .s{flex:1;min-width:0}
.uhead .s b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uhead .s em{font-style:normal;font-size:12.5px;color:var(--mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ubadge{font-size:10px;font-weight:800;letter-spacing:.02em;padding:5px 9px;border-radius:999px;white-space:nowrap;flex:none}
.ubadge.inv{background:#FFF1D6;color:#B57400}
.ubadge.act{background:#DDF7EC;color:#0E9F6E}
.ubadge.sus{background:#FFE3E7;color:var(--miss)}
.umeta{font-size:12px;color:var(--mute);font-weight:600;margin:9px 0 0 50px}
.uinvite{margin:12px 0 0 50px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ucode{letter-spacing:.22em;background:var(--brand-ghost);color:var(--brand);padding:6px 10px;border-radius:8px;font-size:13px;font-weight:700;font-family:var(--mono)}
.uact{margin:14px 0 0 50px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.uact button{background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:13px;padding:0}
.udroits{margin:14px 0 2px 50px;display:none;grid-template-columns:1fr 1fr;gap:12px 18px;padding-top:14px;border-top:1.5px solid var(--line)}
.udroits.open{display:grid}
.udl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600;color:var(--mute)}
.udl select{width:auto;padding:5px 26px 5px 10px;border-radius:10px;font-size:12px}
/* Supervision : contrôle segmenté (onglets) + cartes dépliables */
.segwrap{display:flex;gap:4px;background:#E7E9F2;border-radius:14px;padding:4px;margin-top:16px}
.segwrap button{flex:1;background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--mute);padding:8px 4px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:6px}
.segwrap button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(32,34,46,.10)}
.pdot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.segwrap .segn{font-size:10px;font-weight:800;background:rgba(138,143,163,.22);color:var(--mute);border-radius:999px;padding:1px 6px;min-width:16px;text-align:center}
.segwrap button.on .segn{background:var(--brand-ghost);color:var(--brand)}
.iconbtn{width:36px;height:36px;border-radius:50%;background:var(--card);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--mute);box-shadow:var(--sh);position:relative}
.iconbtn .icondot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid var(--card)}
.catbar{height:4px;border-radius:999px;background:var(--line);margin:2px 4px 10px;overflow:hidden}
.catfill{height:100%;border-radius:999px;background:var(--brand)}
.catpct{font-family:var(--mono);font-size:11px;color:var(--mute);margin-left:6px}
.daysep{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding:12px 2px 4px}
/* Masque un champ sensible SANS en faire un « mot de passe » aux yeux du
   navigateur : iOS proposerait sinon de l'enregistrer dans son trousseau. */
.masque{-webkit-text-security:disc;text-security:disc;font-family:var(--mono);letter-spacing:.08em}
.canal{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.canal.en_ligne{background:var(--brand-ghost);color:var(--brand)}
.canal.commerce{background:rgba(31,199,127,.16);color:#0f6e56}
.canal.inconnu{background:rgba(138,143,163,.16);color:var(--mute)}
.chipnoms{background:none;border:1.5px solid var(--line);color:var(--mute);border-radius:999px;padding:5px 11px;font-family:var(--sans);font-weight:700;font-size:11px;cursor:pointer;white-space:nowrap;margin-right:8px}
.chipnoms.on{background:var(--brand-ghost);border-color:var(--brand-ghost);color:var(--brand)}
/* ═══════ ACCUEIL EN TUILES — une tuile qui PARLE, des carrés qui COMPTENT ═══════
   Invariant tenu par le JS : .tile.wide est TOUJOURS l'enfant n°1 de .tgrid
   (toute la règle d'orphelin en dépend). */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px}
.tile{position:relative;display:flex;flex-direction:column;width:100%;text-align:left;background:var(--card);border:1px solid transparent;border-radius:22px;padding:16px;box-shadow:var(--sh);font-family:var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;transition:transform .08s}
.tile:active{transform:scale(.985)}
/* aspect-ratio et JAMAIS height fixe : la tuile grandit au lieu de tronquer l'EN/ES */
/* Plus de carré forcé : deux chiffres de bilan n'ont pas besoin de 274 px
   de haut. L'accueil doit tenir sur un écran, sans défiler. */
.tile.sq{min-height:0;cursor:pointer;padding:9px 12px}
.tile.sq .tnum{font-size:22px}
.tile.sq .tlbl{margin-top:3px;font-size:12.5px;-webkit-line-clamp:2}
.tile.sq .tfoot{margin-top:4px}
.tile.sq .tamt{font-size:12px}.tile.sq .tcta{font-size:11px}
.tile.wide{grid-column:1/-1;aspect-ratio:auto;min-height:0;padding:20px 20px 18px;border-radius:26px;cursor:default}
/* un carré seul en fin de planche s'étale au lieu de laisser un trou. La parité
   ne peut PAS se calculer en CSS (le nombre de blocs larges varie de 0 à 3) :
   le JS pose .solo sur le dernier carré quand ils sont en nombre impair. */
.tgrid>.tile.sq.solo{grid-column:1/-1;aspect-ratio:auto;min-height:0}
/* les lignes d'une pile, logées DANS son bloc — plus jamais répétées ailleurs */
.brows{margin:14px -20px 0;padding:2px 20px 0;border-top:1.5px solid var(--line)}
.brows .prow:first-child{border-top:none}
.thead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tnum{font-family:var(--mono);font-weight:500;font-size:34px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile.wide .tnum{font-size:42px}
.tamt{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--mute);white-space:nowrap}
.tile.wide .tamt{font-size:15px;color:var(--ink)}
/* fenêtre glissante (30 J) collée au montant — obligatoire, jamais décorative */
.twin{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.10em;color:var(--mute);white-space:nowrap}
.tlbl{margin-top:8px;font-size:13.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* « Paiements sans ticket » tient sur 3 lignes dans un carré (et davantage en
   ES) : on laisse la tuile GRANDIR plutôt que de couper le dernier mot. */
.tile.sq .tlbl{font-size:13px;-webkit-line-clamp:4}
.tile.wide .tlbl{font-size:16.5px}
/* LA PHRASE : uniquement dans .tile.wide — un carré n'en a pas la place */
.tsay{margin-top:7px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);max-width:34ch}
.tnote{margin-top:6px;font-size:12px;font-weight:600;line-height:1.35;color:var(--mute);max-width:36ch}
.tfoot{margin-top:auto;padding-top:10px}
.tcta{display:block;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--brand);line-height:1.25}
.tcta.mute{color:var(--mute)}
.tdot{position:absolute;top:16px;right:16px}
/* un seul bouton plein par écran — la nav flottante en porte déjà un */
.trow{display:flex;align-items:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.tbtn{flex:none;background:var(--brand);color:#fff;border:none;border-radius:999px;padding:12px 22px;font-family:var(--sans);font-weight:700;font-size:14.5px;cursor:pointer;box-shadow:0 8px 20px rgba(42,107,255,.28)}
.tbtn:active{transform:scale(.97)}
.tlink{background:none;border:none;padding:10px 2px;font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--brand);cursor:pointer}
/* accents — jamais plus d'un rouge à l'écran, jamais de rouge sur les 162 */
.tile.urg{border-color:rgba(255,84,104,.28);background:linear-gradient(180deg,#FFF6F7,var(--card) 60%)}
.tile.att{border-color:rgba(255,174,31,.26)}
.tile.calm{background:var(--brand-ghost);border-color:rgba(42,107,255,.14);box-shadow:none}
.tile.done{box-shadow:none;border-color:var(--line)}
.tile.flat{cursor:default;box-shadow:none;border-color:var(--line)}
/* Un seul code couleur dans toute l'app : ORANGE = il manque un ticket
   (paiement par carte) · BLEU = il manque une facture (virement, prélèvement).
   Les mêmes deux teintes servent aux tuiles de l'accueil et aux étiquettes
   du calendrier — on reconnaît la nature du manque sans lire. */
.tile.ticket{background:#FFF8EF;border-color:rgba(239,159,39,.32);box-shadow:none}
.tile.facture{background:#F2F5FF;border-color:rgba(47,75,176,.26);box-shadow:none}
.tile.ticket .tnum{color:#854f0b}
.tile.facture .tnum{color:#2f4bb0}
.tile.flat .tnum{color:var(--mute)}
/* lecture en cours : bande transitoire EN TÊTE — accusé de réception de la photo */
.tstrip{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:12px 16px;background:var(--card);border-radius:18px;box-shadow:var(--sh);font-size:13px;font-weight:600;color:var(--mute);line-height:1.3}
.tstrip b{color:var(--ink);font-family:var(--mono);font-weight:500}
/* Deux faits distincts : ce qui est relié, ce qui attend son paiement. On les
   espace et on leur donne leur pastille — collés par un « · », on les lisait
   comme une seule phrase. */
.mrel{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:13px;font-weight:600;color:var(--mute);line-height:1.45}
/* EN-TÊTE QUI SE REPLIE. Le résumé du mois est utile en arrivant, encombrant
   dès qu'on travaille : au premier défilement il se replie dans une barre
   collante d'une ligne, qui garde l'essentiel. Le calendrier et les listes
   remontent tout de suite sous le pouce. */
/* Les pastilles du mois : même forme que .misschip / .motifchip / .chip,
   aux trois couleurs du code. Ce qui manque se lit d'un coup d'œil, et se
   touche pour aller au travail. La dernière déplie tout le bilan. */
/* UNE CARTE À LA FOIS. Défilement horizontal avec accroche : on ne s'arrête
   jamais entre deux cartes. Les points dessous disent où l'on en est. */
/* TUILE COMPACTE : tout tient sur une ligne + une phrase. Les tuiles
   dépliantes prenaient 170 px chacune et poussaient la moitié de
   l'accueil sous le pli. */
.tcompacte{padding:9px 13px;gap:2px}
.tc-h{display:flex;align-items:center;gap:9px;width:100%}
.tcompacte .px{width:9px;height:9px;flex:none}
.tcompacte .tnum{font-family:var(--mono);font-size:20px;line-height:1;letter-spacing:-.02em}
.tc-l{flex:1;font-size:13px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-m{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;opacity:.8;white-space:nowrap}
.tc-m .tamt{font-family:var(--mono)}
.tc-p{font-size:11.5px;font-weight:600;opacity:.75;line-height:1.4;margin-top:2px}
.tile.wide.att{background:#FBEFFC;border-color:rgba(176,38,201,.28);box-shadow:none}
.tile.wide.att .tnum{color:#86198F}
/* Rappels : de petites icônes en tête, jamais au milieu du contenu. */
.mraps{display:flex;gap:7px;margin:12px 4px 0;flex-wrap:wrap}
.mrap{display:inline-flex;align-items:center;gap:5px;border:none;border-radius:999px;padding:5px 11px;font-family:var(--sans);font-weight:800;font-size:12px;cursor:pointer}
.mrap-i{font-size:12px;line-height:1}
.mrap.r-miss{background:#FFE3E7;color:var(--miss)}
.mrap.r-motif{background:rgba(138,143,163,.16);color:var(--mute)}
.mrap.r-cat{background:rgba(138,143,163,.16);color:var(--mute)}
.mcarts{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:14px -20px 0;padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mcarts::-webkit-scrollbar{display:none}
.mcart{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:2px;min-height:104px;border:none;border-radius:18px;padding:14px 16px;
  text-align:left;font-family:var(--sans);cursor:pointer;-webkit-appearance:none;appearance:none}
.mcart:disabled{cursor:default}
.mc-tete{display:flex;align-items:center;gap:8px;width:100%;font-size:12.5px;font-weight:800}
.mc-tete .px{width:9px;height:9px;flex:none;box-shadow:none}
.mc-n{flex:1}
.mc-m{font-family:var(--mono);font-size:27px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:3px}
.mc-p{font-size:12px;font-weight:600;opacity:.78;margin-top:2px}
.mcart.c-tick{background:#FFF1DE;color:#854f0b}.mcart.c-tick .px{background:#EF9F27}
.mcart.c-cherche{background:#FBEFFC;color:#86198F}.mcart.c-cherche .px{background:#B026C9}
.mcart.c-ok{background:#E4F7EE;color:#0f6e56}.mcart.c-ok .px{background:var(--ok)}
.mcart.c-facture{background:#F2F5FF;color:#2f4bb0}.mcart.c-facture .px{background:#2f4bb0}
.mcart.c-urg{background:#FFF1F3;color:#b3283a}.mcart.c-urg .px{background:var(--miss)}
.mcart.c-neutre{background:#F1F3F9;color:var(--mute)}.mcart.c-neutre .px{background:var(--mute)}
.mc-eur{font-family:var(--sans);font-style:normal;font-size:13px;font-weight:700;opacity:.7;padding-left:9px}
.mcart .chev{opacity:.5}
.mpoints{display:flex;justify-content:center;gap:6px;margin-top:9px}
.mpoint{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .18s}
.mpoint.on{background:var(--mute)}
.mtotmois{text-align:center;font-size:11.5px;color:var(--mute);font-weight:600;margin-top:8px}


.mtitre{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--mute);text-transform:uppercase;margin:18px 2px 7px}
.rangee{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line,#E7E9F2);border-radius:14px;padding:12px 14px;margin-bottom:7px;font-family:var(--sans);color:var(--ink);cursor:default;-webkit-appearance:none;appearance:none}
button.rangee{cursor:pointer}
.rgw{display:flex;align-items:center;gap:9px}
.rgm{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
.rgn{font-size:12.5px;color:var(--mute);font-weight:700;flex:1}
.rgp{font-size:12px;color:var(--mute);font-weight:600;padding-left:17px}
.rangee .px{width:9px;height:9px;flex:none}
.mrelitem{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.mrelitem b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.mrel .px{width:8px;height:8px;flex:none}
.mrel b{font-family:var(--mono);font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.mrel i{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums}
.lienmrel{background:none;border:none;padding:0;font-family:var(--sans);font-size:13px;color:var(--mute);font-weight:600;cursor:pointer}
.lienmrel b{color:#B026C9}
.suphead{font-size:13px;color:var(--mute);font-weight:600;margin:18px 4px 12px}
.uhead.tappable{cursor:pointer}
.chev{margin-left:4px;color:var(--mute);font-size:12px;transition:transform .2s;flex:none}
.chev.open{transform:rotate(180deg)}
.uactf{grid-column:1/-1;display:flex;gap:18px;align-items:center;margin-top:2px}
.uactf button{background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:13px;padding:0}

/* ── Tickets sans paiement : la tuile qui se déplie par mois ─────────────── */
.attfleche{background:none;border:none;color:var(--mute);font-size:19px;line-height:1;
  cursor:pointer;padding:2px 6px;min-width:32px;min-height:32px;transition:transform .18s}
.attmois{display:flex;align-items:center;gap:9px;padding:9px 4px 9px 2px;cursor:pointer;
  border-top:1px solid var(--line)}
.attmois:first-child{margin-top:8px}
.attmois-n{font-family:var(--sans);font-weight:800;font-size:13px;color:var(--cherche);
  min-width:22px;text-align:right}
.attmois-l{flex:1;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink)}
.attmois-m{font-family:var(--sans);font-weight:700;font-size:12.5px;color:var(--mute);white-space:nowrap}

/* ── Ce qui vient d'arriver : le bandeau de tête, cliquable ─────────────── */
.tstrip-arr{width:100%;background:var(--brand-ghost);border:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;text-align:left;font-family:var(--sans)}
.tstrip-arr .chev{margin-left:auto}

/* ── Rapprochements à confirmer ─────────────────────────────────────────── */
.tstrip-prop{width:100%;background:rgba(176,38,201,.10);border:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;text-align:left;font-family:var(--sans)}
.tstrip-prop .chev{margin-left:auto}
.propbloc{background:var(--carte);border-radius:16px;margin:10px 0;overflow:hidden;
  box-shadow:0 1px 3px rgba(32,34,46,.06)}
.propboutons{display:flex;gap:10px;padding:12px}
.propoui,.propnon{flex:1;border:none;border-radius:11px;padding:12px;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:13px;min-height:44px}
.propoui{background:var(--ok);color:#fff}
.propnon{background:none;border:1.5px solid var(--line);color:var(--mute)}

/* Le montant d'origine, quand la banque a débité une autre devise. */
.devorig{color:var(--mute);font-weight:600;font-size:11px;margin-left:5px}