/* ============================================================================
   CRAPOU - LE SYSTÈME VISUEL (v1.4+), pour l'application.
   Chargé EN DERNIER (après tokens, base, components, plan-cards, app) par
   layouts/app, layouts/auth et layouts/partenaire : il affine l'apparence sans
   toucher à la logique. Le back-office a son pendant (nouveau-admin.css), le
   site public le sien (nouveau-site.css).
   Boussole (docs/UX-ANALYSE-ET-DIRECTION.md) : un écran répond à une question ;
   le reste vient quand on le demande ; des mots de tous les jours ; du calme ;
   peu d'actions ; des gestes larges.
   Plan : 1 jetons · 2 composants · 3 barre latérale · 4 accueil · 5 planning ·
   6 demandes · 7 argent · 8 dossier et compte · 9 fenêtres et tiroirs ·
   10 états et mouvement · 11 onboarding, connexion, espace partenaire ·
   12 téléphone.
   ============================================================================ */

/* ---- 1. Les jetons ----------------------------------------------------------- */
:root{
  --ink:#14161F;--ink-2:#4B4F63;--ink-3:#5F6479;--ink-4:#7F8499;   /* ink-3 et plus foncé : texte courant (>= 4,5:1) */
  --line:#E7E9F1;--line-2:#F0F2F7;
  --bg:#F5F6FA;--surface:#FFFFFF;--surface-2:#F8F9FC;--sunk:#EEF0F6;
  --ok:#1FA971;--ok-soft:#E4F6EE;--ok-ink:#146B49;
  --warn:#9A6200;--warn-soft:#FFF4DD;
  --danger:#E5484D;--danger-soft:#FFECEC;--danger-ink:#8E1F23;
  --r-xs:8px;--r-sm:10px;--r-md:16px;--r-lg:20px;
  --sh-1:0 1px 0 var(--line);
  --sh-2:0 1px 2px rgba(20,22,31,.04),0 8px 24px rgba(20,22,31,.06);
  --sh-3:0 24px 60px -20px rgba(20,22,31,.30);
  --t:200ms;--ease:cubic-bezier(.2,.7,.2,1);
  /* --pa / --pb (et leurs -soft) : les couleurs des deux parents, posées sur :root par layouts/app */
}
/* valeurs par défaut des couleurs de parents pour les gabarits sans famille (connexion, onboarding, espace
   partenaire) : posées sur html, moins spécifique que le :root de layouts/app, qui garde donc la main */
html{--pa:#2F6BFF;--pa-soft:#E8EFFF;--pb:#F0407F;--pb-soft:#FFE8F0}
body{color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1{letter-spacing:-.6px}
h1.dsp,h2.dsp{font-size:28px;letter-spacing:-.6px;font-weight:800}
h2.dsp{font-size:24px}

/* ---- 2. Les composants ------------------------------------------------------- */
.card{border:0;border-radius:var(--r-md);box-shadow:var(--sh-2);transition:box-shadow var(--t) var(--ease)}
.card-h{padding-bottom:10px}
.card-title{font-size:15px;font-weight:700}
/* boutons : pilule ; le noir est réservé à l'action principale de l'écran */
.btn{border-radius:999px;font-weight:700;padding:10px 16px;transition:transform 120ms var(--ease),background var(--t),box-shadow var(--t)}
.btn:active{transform:scale(.98)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn-p{background:var(--ink);color:#fff;box-shadow:none}
.btn-p:hover{background:#262A3D}
.btn-s{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-s:hover{border-color:var(--ink-4)}
.btn-g{background:var(--pa-soft);color:var(--pa);border:0}
.btn-g:hover{filter:brightness(.97)}
.btn-ok{background:var(--ok);color:#fff;border:0}
.btn-ok:hover{filter:brightness(.95)}
/* pastilles : fond pâle, texte coloré, jamais criardes */
.badge{border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn,.badge.attente{background:var(--warn-soft);color:var(--warn)}
.badge.nt{background:var(--sunk);color:var(--ink-2)}
.chip,.seg button{border-radius:999px}
.seg button.on{background:var(--ink);color:#fff}
/* onglets : une pilule grise, l'onglet actif en blanc (Argent, Demandes) */
.tabs,.dm-onglets{display:inline-flex;gap:4px;background:var(--sunk);padding:4px;border-radius:999px;border-bottom:0;width:max-content;max-width:100%}
.tabs button,.tabs .tab-lien,.dm-onglets a{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-weight:700;color:var(--ink-2);font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center}
.tabs button.active,.dm-onglets a.on{background:#fff;color:var(--ink);box-shadow:var(--sh-2)}
.tabs .tab-lien{color:var(--pa)}
.dm-onglets{margin-bottom:14px}
/* champs : bord doux, anneau de focus dans la couleur du parent */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:12px;border:1.5px solid var(--line);padding:11px 14px;font-size:15px;transition:border-color var(--t),box-shadow var(--t)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pa);box-shadow:0 0 0 4px var(--pa-soft)}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field + .field{margin-top:14px}
/* alertes : sans bord, une teinte par sens */
.alert{border-radius:12px}
.alert.b,.alert.info{background:var(--pa-soft);color:var(--ink);border:0}
.alert.d{background:var(--danger-soft);color:var(--danger-ink);border:0}
.alert.w{background:var(--warn-soft);color:var(--warn);border:0}
.alert.ok,.alert.g{background:var(--ok-soft);color:var(--ok-ink);border:0}
/* textes d'aide : lisibles, jamais en pleine largeur */
p.muted.mt-1,.card-b > p.muted{font-size:14px;color:var(--ink-3);max-width:62ch}
.card-b p.muted[style*="font-size:.78rem"]{font-size:12.5px !important;color:var(--ink-4)}
/* cartes des formules : blanches, la formule en cours cerclée de bleu */
.pcard{border-radius:var(--r-md);box-shadow:var(--sh-2);border:1px solid var(--line)}
.pc-h{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.pc-h b,.pc-h *{color:var(--ink)}
.pcard.pc-on{box-shadow:0 0 0 2px var(--pa),var(--sh-2)}
.pcard .pc-marque,.pc-h .badge{background:var(--pa-soft);color:var(--pa)}

/* ---- 3. La barre latérale : la famille active en haut, puis le menu, Premium et les liens en bas ---- */
.sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.sidebar > nav{flex:none}
.sidebar .nav a{border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;padding:9px 12px;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.sidebar .nav a:hover{background:var(--surface-2);color:var(--ink)}
.sidebar .nav a.active{background:var(--pa-soft);color:var(--pa);font-weight:700}
.sidebar .nav a.active svg{stroke:var(--pa)}
.sidebar .nav .count,.sidebar .fam .count,.fam-menu .count{display:inline-block;background:var(--pb);color:#fff;border-radius:99px;padding:0 7px;font-size:11px;font-weight:700;line-height:18px}
.sidebar .nav-section{font-size:10.5px;letter-spacing:.14em;color:var(--ink-4);font-weight:700;padding:14px 12px 6px}
.sidebar .spacer{display:none}
.sidebar .legal-links{order:97;margin-top:auto}
.sidebar .plan-card{order:98;margin-top:8px;border-radius:var(--r-sm);background:var(--surface-2);box-shadow:none;border:1px solid var(--line)}
.sidebar .fam-switch{margin:4px 0 6px}   /* en haut, juste sous le logo (ordre du gabarit) : la famille active se voit d'abord */
.sidebar .fam{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:10px 12px;transition:border-color var(--t)}
.sidebar .fam:hover{border-color:var(--ink-4)}
.sidebar .fam .lbl{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-bottom:2px}

/* ---- 4. L'accueil : les actions, « Ce soir », « À faire », la semaine ---------- */
.hm-actions{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
/* « Ce soir » garde SA hauteur : il ne s'étire plus sur celle de « À faire » (une grande plaque rose vide).
   Les deux cartes s'alignent en haut ; le titre suit l'étiquette, la passation suit le titre. */
.pl-haut{align-items:start}
.pl-soir{border-radius:var(--r-lg);padding:22px 26px;min-height:0;height:auto;align-self:start;justify-content:flex-start;gap:10px}
.pl-soir h2{margin:2px 0 0}
.pl-gauche{display:flex;flex-direction:column;gap:14px;min-width:0}
.pl-gauche .fil7{margin:0}
.pl-gauche .pl-soir{align-self:stretch}
.pl-soir.pa{background:linear-gradient(120deg,color-mix(in srgb,var(--pa) 84%,#000),color-mix(in srgb,var(--pa) 92%,#fff))}   /* assombri : texte blanc >= 4,5:1 */
.pl-soir.pb{background:linear-gradient(120deg,color-mix(in srgb,var(--pb) 84%,#000),color-mix(in srgb,var(--pb) 92%,#fff))}
.pl-soir::after{opacity:.14;font-size:130px;right:12px;bottom:-30px}
/* « À faire » (HomeController::aFaire) : ce qui attend MA réponse, avec les actions dans la carte */
.pl-dem.af{display:block;text-align:left;cursor:default;background:#fff;color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:22px 24px}
.af-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.af-t{font-size:15px;font-weight:700}
.af-n{background:var(--pb);color:#fff;border-radius:99px;font-size:11.5px;font-weight:700;padding:1px 8px;line-height:18px}
.af-tout{margin-left:auto;color:var(--pa);font-weight:600;font-size:13px;text-decoration:none}
.af-it{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:8px;transition:background var(--t),opacity var(--t)}
.af-it.ok{background:var(--ok-soft);border-color:transparent;opacity:.7}
.af-ico{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none}
.af-ico svg{width:18px;height:18px}
.af-ico.dem{background:var(--pb-soft);color:var(--pb)}
.af-ico.dep{background:var(--warn-soft);color:var(--warn)}
.af-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.af-txt b{font-size:14px;color:var(--ink)}
.af-txt span{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-act{display:flex;gap:6px;flex:none}
.af-it{flex-wrap:wrap}
.af-txt{flex:1 1 180px}
.af-plus{display:block;text-align:center;color:var(--ink-3);font-size:13px;text-decoration:none;padding-top:4px}
/* la semaine */
.fil7 .f7{border-radius:12px;border:1px solid var(--line);background:#fff}
.fil7 .f7.today{box-shadow:inset 0 0 0 2px var(--ink);border-color:transparent}
.fil7 .f7.today b{background:transparent;color:var(--ink)}
.fil7 .f7.vide i{background:var(--line-2);box-shadow:none}
/* la prochaine passation : carte blanche (plus de carte noire), l'heure en grand mais calme */
.hm-next{background:#fff;color:var(--ink);border-radius:var(--r-md)}
.hm-next *{color:var(--ink)}
.hm-next .card-h{border-bottom:1px solid var(--line)}
.hm-next .card-title,.hm-next .muted,.hm-next .sub,.hm-next .ho-when span{color:var(--ink-3)!important}
.hm-next .ho-when b{color:var(--ink);font-size:clamp(1.6rem,3vw,2.2rem)}
.hm-next .btn-p,.hm-next .btn-p *{background:var(--ink);color:#fff}
.hm-next .btn-s{background:#fff;border:1px solid var(--line)}
.hm-next .btn:not(.btn-p):not(.btn-s){background:var(--pa-soft);color:var(--pa);border:0}
.hm-next.hm-vide{background:var(--surface-2);box-shadow:none;border:1px dashed var(--line)}

/* #28 : les affaires à emporter, lisibles sur la carte blanche */
.hm-next .items-view li,.hm-next .ho-note{color:var(--ink)}
.hm-next .items-view li::before{color:var(--pa)}

/* ---- 5. Le planning : le calendrier d'abord, le jour dans un tiroir ------------- */
.pl-tete{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;margin-bottom:8px}
.pl-tete .pl-mois{font-size:28px;letter-spacing:-.6px;margin:0}
.pl-tete .pl-mois span{font-weight:600;color:var(--ink-4)}
.pl-nav{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:nowrap}
.pl-nav .icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff}
.pl-nav .pl-grp{margin-left:auto}                                   /* les outils partent à droite */
.pl-nav .pl-grp ~ .pl-grp,.pl-nav .pl-grp ~ .btn-p{margin-left:0}
.pl-nav .btn{border-radius:999px}
.pl-nav .btn-g{background:#fff;border:1px solid var(--line);color:var(--ink)}
.pl-nav .btn-g .bi,.pl-nav .btn-s .bi{width:16px;height:16px}
.pl-cle{display:flex;gap:14px;align-items:center;justify-content:flex-start;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap;margin:8px 0 10px}
/* « pas encore de rythme » : une invitation calme, pas un encart bleu */
.pl-tete ~ .alert.b,.pl-tete ~ .alert.info{background:#fff;border:1px dashed var(--line);color:var(--ink);border-radius:var(--r-md)}
.r-mois{border-radius:var(--r-md);box-shadow:var(--sh-2);overflow:hidden}
.r-jour{min-height:96px}
.r-jour .r-n{font-size:13px;font-weight:700}
.r-rub{height:22px;font-size:11.5px}
.r-vide{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}   /* un jour sans rythme : une bande vide, plus de hachures */
.day.today .r-n{background:var(--ink);color:#fff}

/* Ludo, 2 octobre : tout dans le même ton. Les jours passés et ceux du mois voisin ne sont plus pâlis, et l'étiquette
   (« Papa 5 nuits ») n'y devient plus une bulle foncée collée à gauche : elle s'affiche exactement comme ailleurs. */
.day.past .r-rub:not(.nd),.day.out .r-rub:not(.nd),.day.out .r-ligne .r-rub:not(.nd),.day.out .r-piste .r-rub:not(.nd){background:var(--c) !important}
.day.out .r-et,.day.past .r-et{color:#fff !important;background:none !important;padding:0 !important;left:12px !important}

/* Ludo, 2 octobre : les jours du mois voisin se reconnaissent à leur numéro grisé et au trait qui marque le début et la fin
   du mois affiché ; jamais à leurs bandes, qui gardent leur vraie couleur. Pas de hachures (elles veulent déjà dire « nuit non
   attribuée ») ni de fond gris (c'est déjà celui du week-end). */
.r-mois .day.out .r-n,.cal-grid .day.out .r-n{color:var(--ink-4)}
.day.debut-mois{box-shadow:inset 2px 0 0 var(--ink-4)}
.day.fin-mois{box-shadow:inset -2px 0 0 var(--ink-4)}
.day.debut-mois.fin-mois{box-shadow:inset 2px 0 0 var(--ink-4),inset -2px 0 0 var(--ink-4)}

/* Ludo, 2 octobre : le texte d'une passation ou d'un rendez-vous trop long pour sa case s'abrège proprement (« … »)
   au lieu d'être coupé net ; le texte entier reste dans l'infobulle. */
.r-infos > span{min-width:0;max-width:100%}
.r-infos .r-txt{display:block;min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* rejeu R1 : la suite d'une longue demande se déplie */
details.dm-reste summary{cursor:pointer;color:var(--pa);font-weight:600;font-size:13px;margin-top:6px}
details.dm-reste[open] summary{margin-bottom:6px}

/* Ludo, 3 octobre : dans la place de l'autre parent attendu, le texte se colle à gauche, contre l'avatar, comme les autres lignes */
.seat.empty > .who{align-items:flex-start !important;text-align:left !important;justify-content:center}
.seat.empty > .who > b,.seat.empty > .who > span{text-align:left !important}

/* salve #80 : l'état et les boutons d'une dépense restent sur une ligne */
@media (min-width:761px){ .tab-frais td:last-child{white-space:nowrap;text-align:right} .tab-frais td:last-child .btn{margin-left:4px} }   /* au téléphone, la ligne garde sa mise en carte */

/* ---- 6. Les demandes : une boîte, des cartes à bord coloré, actions à droite ------ */
.dm-sec{font-size:15px;font-weight:700;margin:18px 0 10px}
.dm-carte,.dm-carte.vif{border-radius:var(--r-md);box-shadow:var(--sh-2);outline:0;border-style:solid;border-width:0 0 0 4px;border-color:var(--line)}
.dm-carte.vif{border-color:var(--pb)}
.dm-actes{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dm-actes .btn-p{background:var(--ok);color:#fff}   /* « J'accepte » en vert */
/* le comparatif Convenu → Demandé, en tuiles */
.dm-chg{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.dm-chg span{background:#F3F4F9;color:var(--ink-2);border-radius:var(--r-xs);padding:3px 9px;font-size:12.5px;font-weight:600}
.dm-chg strong{background:var(--pb-soft);color:var(--pb);border-radius:var(--r-xs);padding:3px 9px;font-size:12.5px;font-weight:700}
.dm-chg i{color:var(--ink-4)}

/* ---- 7. Argent : le bandeau d'attente (les onglets sont au point 2) ------------- */
.dem-bandeau,.dem-bandeau.a-moi{background:var(--warn-soft);color:var(--ink);border-radius:var(--r-md);box-shadow:none;border:1px solid #F3E2B8}
.dem-bandeau b{color:var(--warn)}
.dem-bandeau .dem-sab{background:#fff;color:var(--warn)}

/* #44 : sous le solde, un règlement pas encore confirmé */
.solde-attente{font-size:13px;color:var(--ink-2);margin:8px 0 0;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.solde-attente a{color:var(--pa);font-weight:600}

/* ---- 8. Le dossier et le compte : la peau suffit (composants du point 2) ------- */

/* ---- 9. Fenêtres et tiroirs ------------------------------------------------------ */
/* une confirmation : fenêtre centrée, petite, sur un voile flouté */
.modal{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.modal-bg{background:rgba(20,22,31,.34);backdrop-filter:blur(3px);transition:opacity var(--t) var(--ease)}
.m-h h2,.m-h .dsp{font-size:20px;letter-spacing:-.4px}
/* le jour du planning (#m-night, .tiroir) : voile léger SANS flou, le calendrier reste lisible ;
   sur ordinateur, un tiroir pleine hauteur à droite (app.css le centrait : cette règle prend le dessus) */
.modal-bg.tiroir{background:rgba(20,22,31,.18);backdrop-filter:none;-webkit-backdrop-filter:none}
@media (min-width:761px){
  .modal-bg.tiroir{place-items:stretch end;padding:0}
  .modal-bg.tiroir .modal{width:min(420px,100%);height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(20,22,31,.14);transform:translateX(40px);transition:transform 220ms var(--ease)}
  .modal-bg.tiroir.open .modal{transform:none}
  .modal-bg.tiroir .m-b{flex:1;overflow:auto}
}
/* toute saisie longue : tiroir à droite sur ordinateur (une fenêtre plein écran sur téléphone).
   Liste des fenêtres concernées : à tenir à jour quand on en ajoute une. */
@media (min-width:761px){
  .modal-bg:is(#m-expense,#m-rule,#m-doc,#m-doc-modif,#m-support,#m-proche-new,#m-invite,#m-rec,#m-dep-modif,#m-famnew){place-items:stretch end;padding:0}
  .modal-bg:is(#m-expense,#m-rule,#m-doc,#m-doc-modif,#m-support,#m-proche-new,#m-invite,#m-rec,#m-dep-modif,#m-famnew) .modal{width:min(480px,100%) !important;max-height:none;height:100%;border-radius:0;display:flex;flex-direction:column;animation:none;transform:translateX(40px);transition:transform 220ms var(--ease);box-shadow:-20px 0 60px rgba(20,22,31,.16)}
  .modal-bg:is(#m-expense,#m-rule,#m-doc,#m-doc-modif,#m-support,#m-proche-new,#m-invite,#m-rec,#m-dep-modif,#m-famnew).open .modal{transform:none}
  .modal-bg:is(#m-expense,#m-rule,#m-doc,#m-doc-modif,#m-support,#m-proche-new,#m-invite,#m-rec,#m-dep-modif,#m-famnew) .m-b{flex:1;overflow:auto}
  .modal-bg:is(#m-expense,#m-rule,#m-doc,#m-doc-modif,#m-support,#m-proche-new,#m-invite,#m-rec,#m-dep-modif,#m-famnew) .m-f{border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff}
}

#m-night .ev-actes,#m-night .row{flex-wrap:wrap}   /* #17 : rien de coupé dans le tiroir du jour */
#m-night .modal{overflow-x:hidden}

body:has(#crapou-dev) .modal-bg:is(.tiroir,#m-expense,#m-rule,#m-doc,#m-doc-modif,#m-support,#m-proche-new,#m-invite,#m-rec,#m-dep-modif,#m-famnew){top:var(--dv-h,52px)}   /* #15 : en dev, sous la barre */

/* #43 : les états s'écrivent tous de la même façon (initiale en majuscule) */
.badge{display:inline-block;text-transform:lowercase}
.badge::first-letter{text-transform:uppercase}

/* campagne #18 : la ligne d'un rendez-vous dans le tiroir du jour passe à la ligne au lieu de déborder */
:has(> .who){flex-wrap:wrap;gap:6px}
.who{min-width:0;flex:1 1 180px}
/* campagne #19 : deux champs côte à côte s'alignent par le bas (libellés d'une ou deux lignes) */
.modal .row:has(> .field){align-items:flex-end}
/* campagne #21 : une jauge à zéro, partout, y compris dans les tiroirs */
i[style*="width:0%"],i[style*="width: 0%"],i[style*="width:0.0%"]{display:none !important}
/* campagne #23 : les actions d'une ligne d'Argent restent sur une ligne */
@media (min-width:1100px){ .money-row .acts,.exp-actes{flex-wrap:nowrap;white-space:nowrap} }   /* sur ordinateur seulement : au téléphone, les actions DOIVENT passer à la ligne */

/* ---- 10. États et mouvement ------------------------------------------------------- */
.toast{border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;padding:12px 18px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:toastIn 260ms var(--ease)}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ink)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* chargement : un squelette qui a la forme de ce qui arrive, jamais « Un instant… » seul */
.skeleton{background:linear-gradient(90deg,var(--sunk) 25%,#F6F7FB 50%,var(--sunk) 75%);background-size:200% 100%;border-radius:var(--r-xs);min-height:14px;animation:sk 1.2s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
/* vide : une phrase, puis une action ; partout pareil */
.dm-vide,.vide,.empty:not(.seat),td.muted[colspan],.hm-vide .card-b{text-align:center;color:var(--ink-3);padding:26px 14px}   /* la place vide d'un membre (.seat.empty) n'est pas un « état vide » */
.dm-vide h3,.vide h3,.empty h3{font-size:16px;color:var(--ink);margin-bottom:4px}
.dm-vide .btn,.vide .btn,.empty .btn{margin-top:12px}
a,button{transition:color var(--t),background var(--t),border-color var(--t)}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---- 11. Onboarding, connexion, espace partenaire --------------------------------- */
.onb-steps{margin:0 0 18px}                                          /* partials/etapes */
.onb-txt{font-size:13px;color:var(--ink-3);margin-bottom:8px}
.onb-bar{display:flex;gap:6px}
.onb-bar i{flex:1;height:6px;border-radius:99px;background:#E3E6EF}
.onb-bar i.done{background:var(--ok)}
.onb-bar i.on{background:var(--ink)}
.auth-card,.auth .card{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.pt-carte{border-radius:var(--r-md);box-shadow:var(--sh-2)}

/* une jauge à zéro reste vide (#2 : la largeur minimale dessinait une pastille) */
.jauge-doc i[style*="width:0%"],.jauge-doc i[style*="width: 0%"],.bar i[style*="width:0%"],.lim i[style*="width:0%"],.jauge i[style*="width:0%"],.bar i[style*="width: 0%"]{min-width:0 !important;display:none}

/* session 3, #58 : sur un petit écran, le formulaire de facturation du partenaire s'ouvre DANS l'écran */
/* session 4 : une position « fixe » se calait sur un ancêtre animé (transform) et partait hors de l'écran ; le formulaire s'ouvre donc DANS le flux, en pleine largeur */
@media (max-width:600px){ :has(> .pt-fact[open]){flex-wrap:wrap !important;width:100%} .pt-fact[open]{flex:1 1 100% !important;width:100% !important;position:static !important} .pt-fact[open]>form{position:static !important;width:auto !important;max-width:100% !important;margin-top:10px !important;left:auto !important;right:auto !important} .pt-fact[open]::before{display:none} }
/* session 3, #59 : un mot sans espace passe à la ligne au lieu d'élargir la page */
.dm-carte,.dm-corps,.af-txt,.card h3,.card td,.money-row .body{overflow-wrap:anywhere}

/* ---- 12. Téléphone ------------------------------------------------------------------ */
@media (max-width:760px){
  /* la barre d'onglets claire : Aujourd'hui, Planning, Demandes, Argent, Plus */
  .onglets{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);left:0;right:0;bottom:0;border-radius:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .onglets a,.onglets button{color:var(--ink-3);font-size:10.5px;font-weight:700;border-radius:12px}
  .onglets a.on,.onglets button.on{color:var(--pa);background:transparent}
  .onglets a.on svg,.onglets button.on svg{stroke:var(--pa)}
  .onglets .pst{background:var(--pb);color:#fff}
  .pl-soir{padding:18px;min-height:0}
  .pl-tete,.pl-nav{flex-wrap:wrap}
  .pl-nav .pl-grp{margin-left:0}
  .pl-nav .btn{padding:8px 12px;font-size:13px}
  .af-act .btn-s{display:none}
  .af-txt span{white-space:normal}
}
[class*="barre"] i[style^="width:0%"],[class*="jauge"] i[style^="width:0%"],[class*="limite"] i[style^="width:0%"]{display:none}   /* #2 : une jauge à zéro, partout */

/* ---- Captures des stores (25 octobre) : quatre retouches d'écran de téléphone ----------------- */
/* La fenêtre du jour : le titre et la croix sur la même ligne (le titre prenait toute la largeur et
   rejetait la croix en dessous, avec un vide). */
#m-night .m-h{flex-wrap:nowrap}#m-night #night-title{flex:1 1 0;min-width:0}
@media (max-width:600px){ #m-night #night-title{font-size:1.45rem} }
@media (max-width:760px){
  /* Le bandeau « attend ta réponse » : le lien passe sous le texte au lieu de l'écraser sur quatre lignes. */
  .dem-bandeau-va{flex:0 0 100%;padding-left:44px}
  /* Les onglets de la page Argent : sur deux lignes plutôt que coupés (« Compte co… »). */
  .main .tabs.tabs-defile{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}   /* plus de défilement : plus de fondu à droite, qui pâlissait le dernier onglet */
}
@media (max-width:600px){
  /* L'en-tête : le nom de la famille en entier ; la page est déjà dans le titre juste en dessous. */
  .topbar .crumbs-page{display:none}
  /* La recherche cède la place au nom (elle garde 64 px, assez pour sa loupe et « Cher… » ; les espaces entre les boutons se resserrent) : à 100 px minimum, même
     « Dupont - Heris » était coupé à 390 px de large. */
  .topbar{column-gap:6px}.topbar .me-menu{margin-left:0}
  .topbar .crumbs{flex:0 1 auto;max-width:52%;font-size:.8rem}.topbar .search{flex:1 1 64px;min-width:64px}.topbar .search input{text-overflow:ellipsis;padding-left:12px;padding-right:8px}
}

/* v1.5.64 : « Appareils connectés » sur téléphone : « Déconnecter » reste un petit bouton à droite de sa ligne (en
   pleine largeur sous chaque ligne, onze appareils faisaient un mur de boutons bleus). */
@media (max-width:760px){
  #appareils .seat{flex-wrap:nowrap;align-items:center;gap:10px}
  #appareils .seat .who{flex:1 1 auto;min-width:0}
  #appareils .seat .btn{width:auto;margin-top:0;flex:none}
}

/* ---- v1.5.65 : audit de l'affichage sur téléphone (tests/visuel/audit_mobile.py) --------------------------- */
/* Accueil : les jours de la semaine (LUN, MAR…) étaient écrits en 9 px. */
@media (max-width:760px){ .fil7 small{font-size:.66rem;letter-spacing:.02em} }   /* 10,5 px au lieu de 9 */
/* Alertes : quatre canaux (avec le SMS) sur une ligne : l'icône se faisait écraser à 2 px et le dernier interrupteur sortait
   de la carte. L'icône et l'interrupteur ne rétrécissent jamais ; l'espace entre les canaux se resserre sur téléphone. */
.chans{gap:10px}.chan > span, .chan .bi, .toggle{flex:none}
@media (max-width:760px){ .seat > span.row.chans{gap:5px} .chans .chan{gap:3px} }
@media (max-width:360px){ .chans .toggle{width:38px} }
/* Un en-tête de carte avec une aide à côté du titre (Discussions, « Réglés, à ranger ») : sur téléphone, le titre
   cassait en trois lignes ; l'aide passe dessous. */
@media (max-width:600px){ .card-h-aide{flex-wrap:wrap;gap:4px 12px} .card-h-aide .card-title{flex:1 1 100%} }
/* Les onglets (Argent, Pension…) : sur téléphone, sur deux lignes plutôt que coupés (généralise la v1.5.63) ; un onglet
   ne se plie pas en deux lignes (« Compte commun »). */
@media (max-width:760px){
  .main .tabs{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;width:auto;max-width:100%}
  .main .tabs > a, .main .tabs > button{white-space:nowrap}
  /* Demandes, archives : la recherche sur toute la largeur (son texte d'aide était coupé). */
  .dm-rech input[type=search]{flex:1 1 100%;min-width:0}
  .dm-rech select, .dm-rech input[type=date]{flex:1 1 40%;min-width:0}
}
/* Mon compte : l'adresse e-mail et « Changer » : sur téléphone, l'adresse était coupée par le bouton ; il passe dessous. */
@media (max-width:480px){ #em{flex:1 1 100%} .row:has(> #em){flex-wrap:wrap} }
/* Les fenêtres « Catégories » et « Types » : le nom (avec sa pastille « Proposée ») prend la place, les deux boutons
   restent à droite, sur une ligne, au lieu de tomber dessous tantôt à gauche tantôt à droite. */
#cats-list > .row{flex-wrap:nowrap;align-items:center;gap:8px}
#cats-list > .row > span:first-child{flex:1 1 auto;min-width:0}
#cats-list > .row > span:last-child{flex:none}