/* ————— Jetons de design ————— */
:root{
  --bg:#FAF6F2;          /* fond crème chaud */
  --card:#FFFFFF;
  --ink:#37313D;
  --muted:#6F6779;
  --line:#EDE3DE;
  --accent:#B65C7E;      /* rose foncé */
  --accent-press:#9E4A69;
  --accent-soft:#F7E9EE;
  --green:#2E7D5B;  --green-soft:#E3F1EA;
  --slate:#6E6887;  --slate-soft:#ECEAF4;
  --amber:#9A6A10;  --amber-soft:#F7EDDA;
  --red:#B3261E;    --red-soft:#F9E5E3;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45;
  min-height:100vh;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{
  font:inherit;font-size:16px; /* 16px minimum : évite le zoom automatique d'iOS */
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;width:100%;
}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;
}
textarea{resize:vertical;min-height:74px}
/* iOS impose aux champs date/heure une largeur interne propre (plus large que la colonne
   qui les contient) et centre leur valeur : d'où l'ancien décalage sur iPhone.
   On neutralise cette apparence native pour qu'ils tombent au même gabarit que le reste. */
input[type="date"],input[type="time"]{
  -webkit-appearance:none;appearance:none;
  min-width:0;text-align:left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{margin-left:auto}
[hidden]{display:none !important}

/* ————— Bandeau d'erreur d'enregistrement (jamais d'échec silencieux) ————— */
.save-error{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--red);color:#fff;font-size:14px;font-weight:600;
  padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));text-align:center;
}

/* ————— Barre du haut ————— */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  max-width:640px;margin:0 auto;
  padding:14px 16px 6px;padding-top:calc(14px + env(safe-area-inset-top));
}
/* Titre court (« Naissances ») : « Carnet de naissances » passait à la ligne à côté de la
   puce de synchro sur un iPhone. Le titre complet reste celui de l'onglet et du manifeste. */
.brand{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.brand svg{width:26px;height:26px;flex:none}
.sync-chip{
  display:flex;align-items:center;gap:7px;flex:none;
  font-size:13px;font-weight:600;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;min-height:44px;
}
.dot{width:9px;height:9px;border-radius:50%;background:#C9C2CE;flex:none}
.dot.ok{background:#3BA778}
.dot.dirty{background:#D99A2B}
.dot.err{background:var(--red)}

/* ————— Contenu ————— */
.wrap{max-width:640px;margin:0 auto;padding:8px 16px 28px}
.btn-add{
  width:100%;min-height:58px;border-radius:var(--radius);
  background:var(--accent);color:#fff;font-size:18px;font-weight:700;
  box-shadow:0 6px 18px rgba(182,92,126,.28);
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:8px 0 16px;
}
.btn-add:active{background:var(--accent-press)}
.controls{margin-bottom:14px}
.seg{
  display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:3px;gap:2px;overflow-x:auto;
}
.seg button{
  flex:1;white-space:nowrap;font-size:13px;font-weight:600;color:var(--muted);
  padding:8px 7px;border-radius:999px;min-height:44px;
}
.seg button.on{background:var(--accent-soft);color:var(--accent-press)}
/* Barre d'outils : la recherche (usage courant) reste visible, tout le reste est rangé
   dans un panneau replié — c'est ce qui garde la page principale calme. */
.tools{display:flex;gap:8px;margin-top:10px}
.tools input{border-radius:999px;-webkit-appearance:none;appearance:none;flex:1;min-width:0}
.btn-tools{
  flex:none;display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--muted);min-height:44px;
}
.btn-tools svg{width:15px;height:15px;flex:none}
.btn-tools.actif{background:var(--accent-soft);border-color:#EED6DF;color:var(--accent-press)}
.tools-panel{
  margin-top:8px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 12px 6px;
}
.tp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px}
.tp-grid label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
/* padding droit : la flèche du menu déroulant ne doit jamais toucher le texte. */
.tp-grid select{border-radius:10px;padding:9px 30px 9px 10px;min-height:42px;font-size:14.5px}
.tp-grid .large{grid-column:1 / -1}
.tp-sep{border:none;border-top:1px solid var(--line);margin:12px 0 10px}
.tp-foot{display:flex;justify-content:flex-end;margin-top:2px}
/* Rappel de l'état actif : rien ne doit être caché dans un panneau replié. */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{
  display:flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-press);
  border-radius:999px;padding:6px 8px 6px 12px;font-size:13px;font-weight:600;min-height:32px;
}
.chip span{font-size:15px;line-height:1;opacity:.75}
.count-line{margin-top:10px;font-size:13.5px;color:var(--muted);padding-left:4px}
.req-hint{font-size:12.5px;color:var(--muted);margin:-8px 0 12px}

/* ————— Liste ————— */
.group-head{
  position:sticky;top:0;z-index:5;background:var(--bg);
  padding:14px 4px 8px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.group-head h2{font-size:15.5px;font-weight:700}
.group-head span{font-size:12.5px;color:var(--muted);flex:none}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;margin-bottom:10px;width:100%;text-align:left;display:block;
  box-shadow:0 1px 3px rgba(55,49,61,.05);
}
.card:active{background:#FDFAF8}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-name{font-size:16.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{
  flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;
}
.b-vivant{background:var(--green-soft);color:var(--green)}
.b-mortne{background:var(--slate-soft);color:var(--slate)}
.b-autre{background:var(--amber-soft);color:var(--amber)}
.b-fratrie{background:var(--slate-soft);color:var(--slate)}
.card-top{min-width:0}
.card-top .badge{white-space:nowrap}
.card-meta{margin-top:4px;font-size:14px;color:var(--muted)}
.card-meta + .card-meta{margin-top:2px}
.card-meta strong{color:var(--ink);font-weight:600}
.card-notes{
  margin-top:6px;font-size:13.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.empty{
  text-align:center;color:var(--muted);padding:44px 18px;
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
}
.empty b{color:var(--ink)}

/* ————— Statistiques ————— */
.stat-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(55,49,61,.05);
}
.stat-card h3{
  font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:9px;
}
.stat-big{font-size:34px;font-weight:800;letter-spacing:-1.2px;line-height:1.1}
.stat-sub{font-size:13.5px;color:var(--muted);margin-top:2px}
.stat-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;border-top:1px solid var(--line);font-size:14.5px;
}
.stat-row:first-of-type{border-top:none;padding-top:0}
.stat-row .lab{color:var(--muted)}
.stat-row .val{font-weight:700;text-align:right}
.stat-row .val small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}

/* ————— Pied de page —————
   Réduit au minimum : la version, et le rappel de sauvegarde UNIQUEMENT s'il y a du retard.
   Exporter/importer vivent dans la fenêtre « Données » (bouton de la barre du haut). */
.foot{max-width:640px;margin:0 auto;padding:10px 16px calc(22px + env(safe-area-inset-bottom))}
.link-btn{
  font-size:13px;color:var(--muted);text-decoration:underline;
  text-underline-offset:2px;padding:9px 6px;
}
.link-btn:active{color:var(--accent-press)}
.sect{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:0 0 8px}
.btn-ghost{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 10px;font-size:14px;font-weight:600;color:var(--ink);min-height:44px;
}
.bandeau{background:var(--amber-soft);border:1px solid var(--amber);border-radius:12px;
  padding:12px 14px;margin-bottom:14px;font-size:14px;line-height:1.45}
.bandeau b{display:block}
.bandeau span{color:var(--muted)}
.bandeau-actions{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.bandeau-actions .btn-primary{width:auto;padding:9px 16px;font-size:15px}
.backup-info{font-size:13px;color:var(--muted);text-align:center;margin-bottom:6px}
.backup-info.warn{color:var(--amber);font-weight:600}
.backup-info.late{color:var(--red);font-weight:600}
.foot-note{font-size:12px;color:var(--muted);text-align:center}

/* ————— Modales ————— */
.modal{
  position:fixed;inset:0;z-index:100;background:rgba(45,38,50,.45);
  /* minmax(0,1fr) : la colonne ne peut PAS s'élargir à cause d'un contenu interne trop large
     (sinon la fenêtre dépasse l'écran et il faut la faire glisser latéralement). */
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;
  overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
}
.modal-card{
  background:var(--bg);border-radius:20px;width:100%;max-width:520px;
  padding:20px 18px;box-shadow:0 18px 50px rgba(45,38,50,.3);
}
.modal-card h2{font-size:19px;margin-bottom:14px}
.modal-card label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin:12px 0 5px}
/* minmax(0,…) et non 1fr : sans cela une colonne peut s'élargir au-delà de sa part
   à cause de la largeur minimale native d'un champ (cas des champs date/heure sur iOS). */
.field-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@media(max-width:420px){.field-2{grid-template-columns:minmax(0,1fr)}}
.opt{font-weight:400;color:var(--muted)}
.form-error{
  background:var(--red-soft);color:var(--red);font-size:14px;font-weight:600;
  border-radius:10px;padding:10px 12px;margin-top:14px;
}

/* ————— Formulaire : sections repliables —————
   Le dossier obstétrical est long : seul l'essentiel reste ouvert, le reste se déplie.
   L'état de chaque section est résumé dans son titre pour qu'on sache sans l'ouvrir
   ce qui est déjà rempli. */
.bloc{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-top:14px;overflow:hidden;
}
.bloc>summary{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  font-size:15px;font-weight:700;cursor:pointer;list-style:none;min-height:48px;
}
.bloc>summary::-webkit-details-marker{display:none}
.bloc>summary::after{content:'⌄';color:var(--muted);font-size:15px;flex:none;line-height:1}
.bloc[open]>summary::after{content:'⌃'}
/* min-width:0 : sans lui, un résumé long (« Césarienne · code orange · RA ») imposerait sa
   largeur minimale et élargirait toute la fenêtre au lieu d'être abrégé par des points. */
.bloc-etat{
  flex:1;min-width:0;text-align:right;font-size:12.5px;font-weight:600;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bloc>summary>span:first-child{flex:none}
.bloc-etat.rempli{color:var(--accent-press)}
.bloc-corps{padding:0 14px 14px}
.bloc-corps>label:first-child{margin-top:0}
.bloc-corps .seg,.enfant .seg{background:var(--bg)}
.bloc .bloc{background:var(--bg)}

/* Un bloc par enfant (naissances multiples : plusieurs fiches dans un seul formulaire).
   Repliable comme Grossesse et Accouchement : c'est la partie la plus longue du formulaire,
   elle enchaînait prénom, statut, heure, poids, dossier du nouveau-né et notes sans aucune
   respiration, pendant que les deux autres parties étaient bien rangées.
   Ouverte d'office malgré tout : l'heure de naissance y est OBLIGATOIRE, la replier par
   défaut reviendrait à cacher un champ requis. */
.enfant>summary>span:first-child{color:var(--accent-press)}

/* ————— Fiche : consultation d'une naissance —————
   Écran de LECTURE, ouvert au clic sur une naissance dans la liste. La modification passe
   par un bouton dédié : on ne modifie plus par mégarde en voulant seulement relire.
   touch-action:pan-y — le navigateur garde le défilement vertical et nous laisse les
   mouvements horizontaux, sans quoi la page glisserait en même temps que la fiche. */
/* Le fond de la fiche est FIXE pendant le glissement : seule la carte se déplace. Il ne
   s'efface qu'à la sortie, en même temps que la carte quitte l'écran. */
#detailModal{transition:background-color .22s ease}
#detailModal.sort{background-color:transparent}
/* pan-y sur la FENÊTRE entière (fond compris) : le navigateur garde le défilement vertical
   et nous laisse les mouvements horizontaux. Le geste peut ainsi démarrer sur le fond, au
   bord de l'écran, là où il démarre réellement au doigt. */
#detailModal,.fiche-card{touch-action:pan-y}
/* Animations posées par une CLASSE, jamais directement sur l'élément : une animation CSS ne
   joue qu'une fois, à l'apparition de la règle. Écrite sur .fiche-card elle se serait jouée
   au chargement de la page, alors que la fiche était encore masquée — donc jamais vue. */
@media(prefers-reduced-motion:no-preference){
  .fiche-card.entre{animation:fiche-entre .2s cubic-bezier(.22,.61,.36,1)}
  /* D'une fiche à l'autre : seul le contenu glisse, du côté d'où la fiche arrive. La carte,
     elle, ne bouge pas — elle est le cadre, pas la page. */
  #ficheCorps.va-suivante{animation:fiche-suiv .18s ease-out}
  #ficheCorps.va-precedente{animation:fiche-prec .18s ease-out}
}
@keyframes fiche-entre{from{transform:translateX(26px);opacity:.35}to{transform:none;opacity:1}}
@keyframes fiche-suiv{from{transform:translateX(20px);opacity:.25}to{transform:none;opacity:1}}
@keyframes fiche-prec{from{transform:translateX(-20px);opacity:.25}to{transform:none;opacity:1}}
.fiche-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px 0 8px}
.fiche-retour{font-size:15px;font-weight:600;color:var(--accent-press);padding:10px 12px 10px 0;min-height:44px}
.fiche-retour:active{opacity:.6}
/* Rappel discret du geste : sans lui, personne ne devine qu'on peut glisser pour fermer. */
.fiche-astuce{font-size:12px;color:var(--muted);text-align:right;flex:none}
.fiche-titre{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.2}
.fiche-titre.vide{font-size:18px;font-weight:600;color:var(--muted)}
.fiche-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fiche-entete{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:2px 14px;margin-top:14px}
/* flex-wrap : quand le libellé et la valeur ne tiennent pas côte à côte (« Type / degré
   d'urgence » face à « Code orange » sur un téléphone), la valeur passe simplement à la
   ligne, alignée à droite. Rien ne déborde jamais, quel que soit le libellé. */
.fiche-ligne{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 14px;padding:9px 0;border-top:1px solid var(--line);
}
.fiche-ligne:first-child{border-top:none}
.fiche-ligne>span{font-size:13.5px;color:var(--muted)}
.fiche-ligne>b{font-size:14.5px;font-weight:600;text-align:right;margin-left:auto;min-width:0;overflow-wrap:break-word}
.fiche-notes{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin-top:14px;font-size:14.5px;line-height:1.5;overflow-wrap:break-word;
}
/* Dans le FORMULAIRE, un résumé de section tient sur une ligne et se coupe : on va l'ouvrir
   pour saisir, de toute façon. En LECTURE, c'est l'inverse — le résumé est ce qu'on vient
   lire. On lui laisse donc deux lignes avant de couper, ce qui suffit à « Voie basse ·
   instrumentale · ventouse · salle d'accouchement » sans rendre l'en-tête interminable. */
#ficheCorps .bloc>summary{align-items:flex-start}
#ficheCorps .bloc-etat{
  white-space:normal;line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
#ficheCorps .bloc>summary>span:first-child,#ficheCorps .bloc>summary::after{margin-top:1px}
/* Section ouverte : le résumé répéterait mot pour mot les lignes qui sont juste en dessous.
   C'est lui qui poussait le chevron à droite (flex:1) : sans marge automatique, le chevron
   viendrait se coller au titre dès qu'on ouvre la section. */
#ficheCorps .bloc[open] .bloc-etat{display:none}
#ficheCorps .bloc[open]>summary::after{margin-left:auto}
.fiche-notes-t{
  font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;
}
/* Navigation d'une fiche à l'autre : discrète et sous l'action principale. Le repère
   « 3 sur 12 » évite de naviguer à l'aveugle dans une longue liste. */
.fiche-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px}
.fiche-nav-btn{
  flex:none;font-size:14px;font-weight:600;color:var(--accent-press);
  padding:10px 8px;min-height:44px;
}
.fiche-nav-btn:disabled{color:var(--muted);opacity:.4}
.fiche-nav-pos{flex:1;min-width:0;text-align:center;font-size:12.5px;color:var(--muted)}

/* Cases à cocher : cibles larges (≥42 px), lisibles au doigt.
   Sélecteur en .modal-card .check : sans cela, la règle « .modal-card label » (plus
   spécifique qu'une simple classe) imposerait display:block et collerait la case au texte. */
/* Grille plutôt que flux : en flex-wrap, chaque case prenait la largeur de son texte et se
   replaçait au fil de l'eau (« Épisiotomie » et « HPPI » à deux sur une ligne, « Dystocie des
   épaules » seule sur la sienne), ce qui donnait un empilement en escalier plein de trous.
   Ici toutes les colonnes font la même largeur et toutes les cases d'une ligne la même
   hauteur : la liste est régulière quel que soit le libellé. auto-fit : deux colonnes sur un
   téléphone, davantage si la fenêtre est large. */
/* 120px et non davantage : la fenêtre ne laisse que ~281 px utiles sur un iPhone, il faut
   donc que DEUX colonnes tiennent (2 × 120 + 8 d'écart). Au-dessus de 148, la grille
   retombait à une seule colonne et la liste des 9 événements devenait interminable. */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.modal-card .check{
  display:flex;align-items:center;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;margin:0;
  font-weight:500;color:var(--ink);min-height:42px;cursor:pointer;
  /* Un libellé long passe à la ligne DANS sa case au lieu de l'élargir ou d'être coupé.
     Marges intérieures et police resserrées pour gagner la largeur de texte qui fait
     passer « Dystocie des épaules » de trois lignes à deux. */
  white-space:normal;line-height:1.25;
  gap:7px;padding:8px 11px;font-size:14px;
}
/* Un mot plus large que sa colonne (« Administration ») débordait de la case. La césure
   automatique le coupe proprement ; break-word reste en dernier recours pour qu'aucun
   texte ne sorte jamais de son cadre, quel que soit le libellé ajouté plus tard. */
.modal-card .check span{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;min-width:0}
.modal-card .check input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent)}
.modal-card .check.on{
  background:var(--accent-soft);border-color:#EED6DF;color:var(--accent-press);font-weight:600;
}
/* Segments sur plusieurs lignes. Grille plutôt que flex : les options restent alignées en
   colonnes. white-space:normal : un libellé long (« Salle d'accouchement ») passe à la ligne
   au lieu d'être coupé — un choix ne doit jamais s'afficher tronqué. */
.seg-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px}
/* Choix empilés : quand les libellés sont de longueurs très différentes (« Salle
   d'accouchement » face à « À domicile »), un segment horizontal coupe ou déséquilibre.
   Une option par ligne, alignée à gauche : lisible quel que soit le libellé. */
.seg-col{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;border-radius:14px}
.seg-col button{text-align:left;padding:10px 14px;border-radius:10px;white-space:normal;line-height:1.3}
.seg-wrap button{white-space:normal;line-height:1.25;padding:8px 6px}
/* Apgar : trois temps côte à côte */
.apgar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.apgar label{margin:0 0 4px}
.apgar select{padding:9px 8px;min-height:44px;text-align:center}
.alerte{
  background:var(--amber-soft);color:var(--amber);font-size:13px;font-weight:600;
  border-radius:10px;padding:9px 11px;margin-top:8px;
}
.modal-foot{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.btn-primary{
  flex:1;background:var(--accent);color:#fff;border-radius:12px;
  padding:12px 16px;font-size:15.5px;font-weight:700;min-height:48px;
}
.btn-primary:active{background:var(--accent-press)}
.btn-cancel{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;font-size:15.5px;font-weight:600;min-height:48px;
}
.btn-danger{
  flex-basis:100%;background:none;color:var(--red);border:1px solid var(--red-soft);
  border-radius:12px;padding:11px 16px;font-size:14.5px;font-weight:600;min-height:44px;order:9;
}
.hint{font-size:13px;color:var(--muted);margin-top:8px}
/* Jauge de robustesse du mot de passe : il protège la clé qui déchiffre le carnet, il faut
   donc que sa faiblesse se VOIE au moment où on le choisit, pas après. */
.mdp-force{font-size:14px;margin-top:6px;display:flex;align-items:center;gap:8px}
.mdp-force .barre{flex:1;min-width:0;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.mdp-force .barre i{display:block;height:100%;width:0;transition:width .2s,background .2s}
.mdp-force.f0 .barre i{width:25%;background:var(--red)}
.mdp-force.f1 .barre i{width:50%;background:var(--amber)}
.mdp-force.f2 .barre i{width:75%;background:var(--amber)}
.mdp-force.f3 .barre i{width:100%;background:var(--green)}
.mdp-force .txte{flex:none;color:var(--muted)}
.sync-key-row{display:flex;gap:8px;margin-top:6px}
.sync-key-row input{font-family:ui-monospace,Menlo,monospace;font-size:16px}
.sync-key-row .btn-ghost{flex:none;padding:0 14px}
.sync-status{font-size:14px;margin:10px 0;color:var(--muted)}
.sync-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sync-actions .btn-ghost,.sync-actions .btn-primary{width:100%}
.ver-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin-top:8px;font-size:14px;
}
.ver-row .btn-ghost{flex:none;padding:10px 14px;min-height:44px}
.ver-meta{color:var(--muted);font-size:12.5px}
hr.sep{border:none;border-top:1px solid var(--line);margin:16px 0}

/* Aperçu statique : conserver les sauvegardes fichier, masquer les comptes. */
#syncOff, #syncOn, #protegeBandeau { display: none !important; }
.preview-notice { padding: 12px 16px; background: #fff0bf; color: #443300; font-size: 14px; line-height: 1.5; border-bottom: 2px solid #b38a00; }