/* Crapou - composants réutilisables entre tous les espaces. */
.icon-btn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-2);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.icon-btn:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.78rem;color:#241A0B;box-shadow:var(--sh-1);flex:none}
.avatar.sm{width:26px;height:26px;font-size:.66rem}
.avatar.am{background:linear-gradient(135deg,var(--a-soft),var(--a))}
.avatar.ir{background:linear-gradient(135deg,var(--b),var(--b));color:#fff}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-sm);border:1px solid transparent;font-weight:600;font-size:.9rem;background:var(--surface);color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t),background var(--t);white-space:nowrap}
.btn svg{width:16px;height:16px;stroke-width:2}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:none;box-shadow:none}
.btn-p{background:var(--b);color:#fff;box-shadow:0 1px 2px rgba(13,15,26,.3)}
.btn-p:hover{background:var(--b-2);box-shadow:var(--sh-b)}
.btn-s{border-color:var(--line);background:#fff}
.btn-g{background:transparent}.btn-g:hover{background:var(--surface-2);box-shadow:none}
.btn-ok{background:var(--ok);color:#fff}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.sm{padding:7px 12px;font-size:.84rem}
.grid{display:grid;gap:16px}
.g-12{grid-template-columns:repeat(12,1fr)}
.span-8{grid-column:span 8}.span-4{grid-column:span 4}
/* Toute la grille de 12 : span-5 et span-7 (page Réglages) manquaient, et la page s'affichait en
   colonnes étroites. */
.span-5{grid-column:span 5}.span-7{grid-column:span 7}.span-12{grid-column:1/-1}
.g-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden}
.card-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.card-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem}
.card-title .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3)}
.card-title .ic.b{background:var(--b-soft);color:var(--b)}
.card-title .ic.d{background:var(--danger-soft);color:var(--danger)}
.card-title .ic.k{background:var(--ok-soft);color:var(--ok)}
.card-b{padding:18px}
.value{font-family:var(--d);font-size:2rem;font-weight:300;letter-spacing:-.03em;line-height:1.05}
.kpi span{font-size:.78rem;color:var(--ink-4);display:block}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--pill);font-size:.74rem;font-weight:700;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.dg{background:var(--danger-soft);color:var(--danger)}
.badge.am{background:var(--a-soft);color:var(--a-t)}
.badge.ir{background:var(--b-soft);color:var(--b-t)}
.badge.nt{background:var(--line-2);color:var(--ink-3)}
.badge.plain::before{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--pill);border:1px solid var(--line);background:#fff;font-size:.84rem;font-weight:500;transition:all var(--t)}
.chip:hover{border-color:var(--ink-4)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg{display:inline-flex;background:var(--line-2);padding:4px;border-radius:var(--r-sm);gap:2px}
.seg button{padding:7px 14px;border-radius:8px;color:var(--ink-3);font-weight:600;font-size:.85rem;transition:all var(--t)}
.seg button.active{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.task{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:box-shadow var(--t) var(--ease),transform var(--t),border-color var(--t)}
.task:hover{box-shadow:var(--sh-2);transform:translateX(2px);border-color:#DAD4EC}
.task .sev{width:4px;align-self:stretch;border-radius:4px;background:var(--line)}
.task.dg .sev{background:var(--danger)}.task.wn .sev{background:var(--warn)}
.task.in .sev{background:var(--b)}.task.ok .sev{background:var(--ok)}
.task .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--ink-2)}
.task.dg .ico{background:var(--danger-soft);color:var(--danger)}
.task.wn .ico{background:var(--warn-soft);color:var(--warn)}
.task.in .ico{background:var(--b-soft);color:var(--b)}
.task.ok .ico{background:var(--ok-soft);color:var(--ok)}
.task .body{flex:1;min-width:0}
.task .body b{display:block;font-weight:600;font-size:.95rem}
.task .body span{color:var(--ink-3);font-size:.86rem}
.task.done{opacity:.5}.task.done .body b{text-decoration:line-through}
.ring{--p:51;width:136px;height:136px;border-radius:50%;background:conic-gradient(var(--a) calc(var(--p)*1%),var(--b) 0);display:grid;place-items:center;position:relative;margin:0 auto}
.ring::after{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}
.ring b{position:relative;z-index:1;font-family:var(--d);font-size:1.7rem;font-weight:300}
.ring small{position:relative;z-index:1;font-size:.58rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:-4px;text-align:center;max-width:80px;line-height:1.2}
.tl{position:relative;padding-left:0}

.tl .ev{position:relative;padding:12px 0 12px 14px;border-left:2px solid var(--line-2);
  transition:border-color .16s}
.tl .ev:hover{border-left-color:var(--b)}
.tl .ev + .ev{border-top:1px solid var(--line-2)}

.tl .ev.ok::before{border-color:var(--ok)}.tl .ev.wn::before{border-color:var(--warn)}
.tl .ev time{font-size:.76rem;color:var(--ink-4);font-family:var(--mono)}
.tl .ev b{display:block;font-weight:600;margin-top:2px}
.tl .ev p{color:var(--ink-3);font-size:.88rem}
.hash{font-family:var(--mono);font-size:.7rem;color:var(--ink-4);background:var(--surface-2);border:1px solid var(--line);padding:2px 8px;border-radius:6px}
/* Huit colonnes : le numéro de semaine, puis les sept jours. Les parents
   s'en servent pour se parler - « tu prends la 38 ? » - et l'école comme les
   employeurs raisonnent en semaines. */
.dow{display:grid;grid-template-columns:34px repeat(7,1fr);gap:6px;margin-bottom:6px}
.dow span{text-align:center;font-size:.7rem;color:var(--ink-4);font-weight:600}
.days{display:grid;grid-template-columns:34px repeat(7,1fr);gap:6px}
/* Le numéro de semaine : discret, aligné en haut, jamais cliquable. */
/* Le numéro de semaine, dans une bulle. Elle désigne la rangée entière, pas
   un jour : la bulle le dit d'elle-même, ce qui règle la confusion avec la
   colonne du lundi. Gris et non coloré, parce que les couleurs de ce
   calendrier appartiennent aux parents. */
.sem{display:flex;align-items:center;justify-content:center}
.sem b{background:var(--line-2);color:var(--ink-3);border-radius:99px;
  padding:3px 8px;font-size:.72rem;font-weight:600;
  font-variant-numeric:tabular-nums}
/* Une semaine révolue s'efface, comme les jours qu'elle contient. */
.day{aspect-ratio:1/.86;border-radius:var(--r-sm);border:1px solid transparent;padding:7px 8px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t)}
.day:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.day.pa{background:var(--pa-soft);color:var(--ink-2)}.day.pb{background:var(--pb-soft);color:var(--ink-2)}
.day.out{opacity:0;pointer-events:none}
.day b{font-size:.88rem;font-weight:700}
.day .sw{font-size:.62rem;color:var(--ink-3);font-weight:600}
.day.hol{background-image:repeating-linear-gradient(135deg,rgba(25,20,40,.05) 0 6px,transparent 6px 12px)}
.day.sel{outline:2px solid var(--ink);outline-offset:-2px}
.day .spl{position:absolute;right:6px;bottom:6px;display:flex;gap:3px}
.day .spl i{width:14px;height:14px;border-radius:4px;font-size:.52rem;font-weight:800;display:grid;place-items:center;font-style:normal;color:#241A0B}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:12px 14px;border-bottom:1px solid var(--line-2)}
tr:hover td{background:var(--surface-2)}
.alert{display:flex;gap:12px;padding:13px 16px;border-radius:var(--r-md);font-size:.9rem;border:1px solid}
.alert.b{background:var(--b-tint);border-color:var(--b-soft);color:var(--b-t)}
.alert.w{background:var(--warn-soft);border-color:#F2DFC0;color:#8A5B12}
.alert.d{background:var(--danger-soft);border-color:#F5D5CB;color:#9E3A1F}
.field label{display:block;font-size:.8rem;color:var(--ink-3);font-weight:600;margin-bottom:6px}
/* « background » en raccourci remet l'image de fond à zéro : le chevron des
   listes déroulantes disparaissait, et elles ressemblaient à des champs
   texte. On ne pose donc que la couleur. */
.field input,.field select,.field textarea{width:100%;background-color:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;font:inherit;font-size:.92rem;color:var(--ink);transition:border-color var(--t),box-shadow var(--t)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--b);box-shadow:0 0 0 4px rgba(13,15,26,.12)}
.modal-bg{position:fixed;inset:0;background:rgba(30,22,60,.34);backdrop-filter:blur(3px);display:none;place-items:center;z-index:60;padding:20px}
.modal-bg.open{display:grid;animation:fade .2s}
.modal{background:#fff;border-radius:var(--r-lg);width:min(620px,100%);box-shadow:var(--sh-3);max-height:92vh;overflow:auto;animation:pop .26s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.m-h{padding:20px 24px;border-bottom:1px solid var(--line-2)}
.m-b{padding:24px}.m-f{padding:16px 24px;border-top:1px solid var(--line-2);background:var(--surface-2);display:flex;justify-content:flex-end;gap:10px}
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--pill);font-size:.88rem;box-shadow:var(--sh-3);animation:up .3s var(--ease)}
.toast i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.toast.err{box-shadow:var(--sh-3),inset 0 0 0 2px var(--danger)}.toast.err i{background:var(--danger)}   /* une erreur : en rouge */
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
.btn-s .spinner,.btn-g .spinner{border-color:rgba(25,20,40,.2);border-top-color:var(--ink)}
@keyframes sp{to{transform:rotate(360deg)}}
.progress{height:8px;border-radius:99px;background:var(--line);overflow:hidden;display:flex}
.progress i{display:block;height:100%}

/* =====================================================================
   Champs de formulaire, partout
   Le style ne visait que « .field input ». Tout champ posé directement
   dans une ligne gardait l'apparence brute du navigateur : bords carrés,
   police système, hauteur différente. D'où des écrans où deux champs
   voisins n'avaient pas la même allure.
   ===================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
  max-width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--b);
  box-shadow: 0 0 0 4px rgba(110, 92, 230, .12);
}

input::placeholder, textarea::placeholder { color: var(--ink-4); }
/* Même règle ici : le raccourci effaçait le chevron des listes grisées.
   Une liste désactivée reste une liste, elle doit s'annoncer comme telle. */
input:disabled, select:disabled, textarea:disabled { background-color: var(--surface-2); color: var(--ink-4); }

/* Les champs de date et d'heure gardaient la police système : à côté d'un
   champ texte, l'écart sautait aux yeux. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  font-variant-numeric: tabular-nums;
  min-height: 42px;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* La liste déroulante native est remplacée par un chevron dessiné, pour
   que toutes les listes se ressemblent d'un navigateur à l'autre. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B6383' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--b);
  width: 17px;
  height: 17px;
  cursor: pointer;
}

/* La barre de recherche reste une exception assumée : elle vit dans son
   propre cadre, sans bordure ni fond propres. */
.topbar .search input, .search input {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.topbar .search input:focus, .search input:focus { box-shadow: none; }

/* Un champ dans une ligne d'action garde la hauteur des boutons voisins. */
.row > input, .row > select { min-height: 42px; }

/* Icône dans un bouton : elle précède le texte, s'aligne dessus et prend
   sa couleur. Une action se reconnaît plus vite à sa forme qu'à son
   libellé, surtout quand on ouvre l'application vingt fois par semaine. */
/* Taille imposée en toutes circonstances : sans dimension propre, une
   icône placée hors d'un bouton s'étalait à la largeur de son conteneur.
   Un « + » de trois cents pixels au milieu d'une fenêtre, ça arrive une
   fois, et ça se voit. */
.bi{width:16px;height:16px;flex:0 0 16px;display:inline-block;vertical-align:-2px}
.btn .bi{margin-right:2px}
.btn.sm .bi{width:14px;height:14px;flex-basis:14px}

/* ---------------------------------------------------------------------
   Fonction réservée à une formule payante.
   Le bouton reste VISIBLE et grisé, jamais caché : savoir qu'une chose
   existe et qu'elle est fermée vaut mieux que de la découvrir par hasard.
   Il dit pourquoi, au survol comme au clic, parce qu'un bouton mort sans
   explication passe pour une panne.
   --------------------------------------------------------------------- */
.locked{position:relative;display:inline-flex;align-items:center;gap:6px}
.locked > .btn{opacity:.45;pointer-events:none;filter:grayscale(.6)}
.locked .lk{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--b-tint);color:var(--b);
  font-size:.62rem;cursor:help;border:1px solid var(--b-soft)}
/* En coordonnées d'écran : dans le flux de sa carte, la bulle se faisait
   rogner par le cadre et on n'en lisait que la moitié. */
/* L'apparence de la bulle ne dépend PLUS de son emplacement.
   La copie affichée est posée dans le corps de page, donc hors du cadenas :
   une règle écrite « .locked .lk-tip » ne l'atteignait pas, et la bulle
   s'affichait sans fond, en texte noir par-dessus la carte voisine. */
.lk-tip{position:fixed;z-index:200;left:0;top:0;
  width:max(240px,100%);max-width:320px;padding:10px 12px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:.78rem;line-height:1.4;
  opacity:0;visibility:hidden;transition:opacity .14s;box-shadow:var(--sh-3);
  /* Sans point d'ancrage, l'original invisible se posait à la droite de son
     cadenas et poussait la page de cent à deux cents pixels : on pouvait
     faire défiler l'écran de côté sans rien voir. C'est la COPIE flottante
     qui est positionnée à l'ouverture. */
  pointer-events:none}
.lk-tip b{display:block;margin-bottom:3px}
.lk-tip a{color:#fff;text-decoration:underline}
/* L'original reste caché : c'est la copie posée dans le corps de page qui
   s'affiche, hors d'atteinte des cadres et des transformations. */
.lk-tip.flottante{opacity:1;visibility:visible;position:fixed;z-index:400}
.lk-tip.flottante[hidden]{display:none}


/* Bascules : elles prennent la couleur d'action, pas un vert générique.
   Une bascule verte au milieu d'une interface magenta ressemble à un
   élément importé d'ailleurs. */
.toggle{position:relative;width:42px;height:24px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;padding:0;transition:background .18s,border-color .18s}
.toggle i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--e1);transition:transform .18s}
.toggle.on{background:var(--b);border-color:var(--b-2)}
.toggle.on i{transform:translateX(18px)}
.toggle:focus-visible{outline:none;box-shadow:var(--ring)}
.toggle[disabled]{opacity:.45;cursor:not-allowed}

/* Sur téléphone, les sept colonnes du calendrier ne rentrent pas dans la
   largeur : chaque case gardait sa taille minimale et poussait la page de
   vingt-six pixels. On laisse les cases rétrécir et le texte se réduire
   plutôt que de faire défiler l'écran de côté. */
@media(max-width:430px){
  .days, .dow{gap:4px;min-width:0}
  /* La case reçoit 40 px de la grille, mais son contenu - l'heure de
     passation, le nom du parent - la faisait gonfler à 107 px : elle
     débordait de sa propre colonne. On coupe ce qui dépasse plutôt que
     de faire défiler la page de côté. */
  /* Le rapport hauteur/largeur était le vrai coupable : dès que le
     contenu dépassait la hauteur calculée, la case s'élargissait pour
     garder ses proportions et sortait de sa colonne. Sur petit écran on
     fixe une hauteur minimale et on laisse la largeur suivre la grille. */
  .day{aspect-ratio:auto;min-height:52px;min-width:0;overflow:hidden;
    padding:4px;font-size:.78rem}
  .day *{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .day .n{font-size:.72rem}
}

/* La place réservée au chevron doit survivre aux règles plus spécifiques :
   « .field select » repose un rembourrage uniforme, et le texte d'une option
   longue passait alors sous la flèche. */
select, .field select, .modal select, .card select { padding-right: 34px; }

/* Le bandeau d'annonce (back-office, page « Bandeau ») : TOUT EN HAUT de la page, sur toute la largeur,
   dans l'application comme sur la connexion (d'où sa place ici, dans la feuille commune aux deux :
   la connexion ne charge pas app.css). Ses couleurs sont réglées dans le back-office. */
.bandeau-annonce{position:relative;z-index:0;display:block;width:100%;box-sizing:border-box;padding:9px 18px;
  font-size:.86rem;font-weight:600;line-height:1.4;text-align:center;border-bottom:1px solid rgba(0,0,0,.08)}
.auth-page .bandeau-annonce{z-index:5}   /* devant le décor de fond de la connexion */

/* La confirmation de l'adresse (partials/verification) : bloquante, devant tout. */
.verif-fond{position:fixed;inset:0;z-index:9000;background:rgba(13,15,26,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.verif-boite{background:#fff;border-radius:24px;max-width:460px;width:100%;padding:30px 28px;box-shadow:0 30px 80px rgba(13,15,26,.3);text-align:center}
.verif-ico{width:60px;height:60px;border-radius:18px;background:#EEF1FF;color:#1E4BFF;display:grid;place-items:center;margin:0 auto 14px}
.verif-boite h2{font-size:1.35rem;margin:0 0 8px}
.verif-boite p{color:#4A4F63;margin:0 0 12px;line-height:1.5}
.verif-attente{display:flex;gap:8px;justify-content:center;align-items:center;font-size:.86rem}
.verif-point{width:8px;height:8px;border-radius:50%;background:#1E4BFF;animation:verif-p 1.4s ease-in-out infinite}
@keyframes verif-p{0%,100%{opacity:.25}50%{opacity:1}}
.verif-msg{min-height:1.2em;font-size:.86rem}.verif-msg.ok{color:#1F6B45}.verif-msg.non{color:#B42318}
.verif-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.verif-form{display:flex;gap:8px;margin-top:12px}.verif-form input{flex:1;min-width:0}
.verif-sortie{margin-top:16px}.verif-sortie .lien{background:none;border:0;color:#6B7086;text-decoration:underline;cursor:pointer;font:inherit;font-size:.86rem}
@media (prefers-reduced-motion:reduce){.verif-point{animation:none}}
.demo-liste{margin:14px 0 4px;padding-left:20px;color:#4A4F63;line-height:1.55}.demo-liste li{margin:4px 0}
.bandeau-lien{font-weight:700;text-decoration:underline;margin-left:8px;white-space:nowrap}
/* Une ligne « task » (discussions, demandes…) : le texte prend la place ; sur un écran étroit, les
   boutons passent SOUS le texte (ils l'écrasaient jusqu'à une lettre par ligne). */
.task .body{flex:1;min-width:0}
@media (max-width:640px){ .task{flex-wrap:wrap} .task .body{flex:1 1 calc(100% - 32px)} .task>.row{flex:1 1 100%;flex-wrap:wrap;gap:8px;padding-left:18px} }
/* Les tableaux « à fiches » (frais du mois, documents) : sur ordinateur, les montants ne se cassent
   plus et les actions peuvent passer à la ligne au lieu d'écraser le reste ; sur téléphone, chaque
   ligne devient une fiche (titre et montant en haut, détails, actions dessous, toujours visibles :
   elles étaient hors de l'écran, à droite). */
.tab-fiches .tf-titre{min-width:140px}
.tab-fiches .tf-montant{white-space:nowrap}
.tab-fiches .tf-actions{white-space:normal}
.tab-fiches .tf-actions .btn,.tab-fiches .tf-actions .badge,.tab-fiches .tf-actions .lnk{margin:2px 0 2px 4px}
@media (max-width:640px){
  .tab-fiches,.tab-fiches tbody{display:block;width:100%}
  /* (Pas la règle générale des tableaux sur téléphone, qui les étire à leur largeur maximale pour
     les faire défiler de côté : une fiche passe à la ligne, elle ne défile pas.) */
  .tab-fiches{overflow-x:visible}
  .tab-fiches tbody{min-width:0}
  .tab-fiches td{white-space:normal}
  .tab-fiches tr:first-child:has(th){display:none}
  .tab-fiches tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tab-fiches td{display:block;border:0;padding:0;font-size:.86rem;color:var(--ink-2)}
  .tab-fiches .tf-titre{flex:1 1 60%;min-width:0;color:var(--ink)}
  .tab-fiches .tf-montant{margin-left:auto}
  .tab-fiches .tf-actions{flex:1 1 100%;text-align:left!important;margin-top:6px}
  .tab-fiches .tf-actions .btn,.tab-fiches .tf-actions .badge,.tab-fiches .tf-actions .lnk{margin:2px 6px 2px 0}
}
/* Le bandeau de démo : une ligne sur téléphone. */
.bd-court{display:none}
@media (max-width:640px){ .bd-long{display:none} .bd-court{display:inline} }
/* Des onglets qui défilent de côté : un fondu au bord droit montre qu'il y en a d'autres (sur
   téléphone, « Compte commun » était coupé en « C… » sans rien pour le dire). */
@media (max-width:640px){ .tabs-defile{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)} .tabs-defile::-webkit-scrollbar{display:none} }
/* Des cibles assez grandes au toucher (40 px) : le lien du bandeau de démo, le bouton du profil. */
@media (max-width:640px){ .bandeau-lien{display:inline-block;padding:10px 6px;margin:-10px 0} .me-btn{min-height:40px;min-width:40px} }
/* Un compte SANS famille (« Plus tard ») : le menu est grisé, sauf l'accueil ; la recherche et les
   notifications n'ont rien à montrer. (Le serveur, lui, ramène toute autre page à l'accueil.) */
.sans-famille [data-test^="nav-"]:not([data-test="nav-home"]),.sans-famille [data-test^="onglet-"]:not([data-test="onglet-home"]):not([data-test="onglet-plus"]){opacity:.35;pointer-events:none;filter:grayscale(1)}
.sans-famille .fam,.sans-famille .topbar .search,.sans-famille .topbar .inbox,.sans-famille .plan-card,.sans-famille .topbar .crumbs{display:none!important}
.sf-carte{max-width:640px}.sf-titre{font-size:1.25rem;margin:0 0 6px}

/* PARTAGE d'un code ou d'un lien : le code en grand, prêt à copier ; le lien à côté ; le message en option. */
.bloc-partage{display:flex;flex-direction:column;gap:10px}
.partage-code{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--bg-soft,#F4F5F9);border:1px solid var(--line,#E4E6EE)}
.partage-code .partage-l{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#6B7085)}
.partage-code b{font:600 1.35rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;flex:1;overflow-wrap:anywhere}
.partage-lien{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--ink-3,#6B7085)}
.partage-lien span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bloc-partage details summary{cursor:pointer;font-size:.84rem;color:var(--ink-3,#6B7085)}
.bloc-partage details textarea{margin-top:8px;width:100%}
.locked.attente .lk{color:var(--ink-3,#6B7085)}

/* B2, B4 : le code ne se coupe pas (il rétrécit un peu sur téléphone) ; les boutons d'action forment une grille
   alignée sur le bloc du code ; pas de grand vide autour du message replié. */
.partage-code b{white-space:nowrap;overflow-wrap:normal;font-size:clamp(1rem,4.4vw,1.35rem)}
.bloc-partage details{margin:0}
/* L'action PRINCIPALE sur toute la largeur, les secondaires côte à côte (elles se partagent la place, même si
   « Partager » est absent sur l'appareil). */
.partage-actions{display:flex !important;flex-wrap:wrap;gap:8px}
.partage-actions .btn{flex:1 1 0}
.partage-actions .btn-p{flex:1 1 100%;order:-1}
/* Un libellé long passe à la ligne DANS son bouton, au lieu de déborder de la fenêtre. */
.partage-actions .btn{min-width:0;white-space:normal;justify-content:center;text-align:center}
/* B3 : le lien à partager, ENCADRÉ comme le code, et lisible. */
.partage-lien.fort{padding:12px 14px;border-radius:14px;background:var(--bg-soft,#F4F5F9);border:1px solid var(--line,#E4E6EE);color:var(--ink,#0D0F1A)}