/* ══════════════════════════════════════════════════════════════════════════
   SOCLE D'INTERFACE ALMAWARID — composants, pas décoration.

   Boss 11/09 : « these pages are very basic, not good at all, can we fix this
   forever ». La cause n'était pas une page ratée : AUCUNE page n'était obligée
   de ressembler aux autres. Chaque écran réinventait sa mise en page en style
   en ligne, donc la qualité dépendait de qui l'écrivait.

   Règle : un écran COMPOSE ces classes, il n'invente pas de style de mise en
   page. Une garde (tests/e2e_test.py, SocleInterfaceTests) refuse au deploy
   tout formulaire qui repart en style en ligne.

   Palette verrouillée (skill almawarid-ui) : #024dec indigo · #15803d vert ·
   #d97706 ambre · #dc2626 rouge · #0299d0 cyan cabinet · #64748b gris ·
   #e2e8f0 bordures · #f8fafc fond.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ui-gap:16px; --ui-radius:14px; --ui-radius-sm:10px;
  --ui-ink:#0f172a; --ui-ink-2:#475569; --ui-muted:#64748b;
  --ui-line:#e2e8f0; --ui-line-fort:#cbd5e1; --ui-fond:#f8fafc; --ui-carte:#fff;
  --ui-primaire:#024dec; --ui-primaire-doux:#e8effe;
  --ui-ok:#15803d; --ui-ambre:#d97706; --ui-rouge:#dc2626;
  --ui-touche:44px;                 /* cible tactile minimale */
}

/* ── Page : largeur, respiration, bas de page dégagé ────────────────────── */
.ui-page{max-width:900px;margin:0 auto;padding:20px 14px calc(28px + var(--app-bottom-clearance,0px));}
.ui-page.large{max-width:1180px;}
.ui-page.etroite{max-width:640px;}

/* ── En-tête : retour, titre, actions — toujours au même endroit ────────── */
.ui-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
/* R10 (revue Codex 25/09) : une flèche nue de 38 × 38 px ne dit ni ce qu’elle
   fait ni où elle mène, et rate la cible tactile de 48 px. Bouton libellé.
   UX-08 (audit mesuré 27/09) : les mêmes flèches nues — 21 × 32 px, sans nom
   accessible — vivent dans 16 formulaires qui ne composent PAS encore
   `ui-head`. Le sélecteur quitte donc `.ui-head` : `ui/_retour.html` s'inclut
   seul, partout, et garde la cible de 48 px. */
.ui-retour{display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:48px;
  padding:0 14px;border-radius:12px;justify-content:center;
  border:1px solid var(--ui-line);background:var(--ui-carte);color:var(--ui-ink-2);text-decoration:none;
  font-size:.88rem;font-weight:700;line-height:1.25;flex:0 0 auto;}
.ui-retour .bi{font-size:1.05rem;}
.ui-retour-mot{white-space:nowrap;}
.ui-retour:hover{border-color:var(--ui-primaire);color:var(--ui-primaire);}
.ui-retour:focus-visible{outline:3px solid var(--ui-primaire);outline-offset:2px;}
/* Un retour tronqué par « … » ne dit plus où il mène : sur téléphone le
   libellé passe à la ligne, la cible reste au-dessus de 48 px. */
@media(max-width:420px){.ui-retour{padding:6px 12px;}
  .ui-retour-mot{white-space:normal;text-align:start;}}
.ui-head .ui-titres{flex:1;min-width:200px;}
.ui-head h1{font-size:1.35rem;font-weight:800;margin:0;letter-spacing:-.01em;color:var(--ui-ink);
  display:flex;align-items:center;gap:9px;text-wrap:balance;}
.ui-head h1 .bi{font-size:1.15rem;}
.ui-head .ui-sous{font-size:.88rem;color:var(--ui-muted);margin:4px 0 0;max-width:70ch;}
.ui-head .ui-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ── Carte : le conteneur de tout contenu ───────────────────────────────── */
.ui-carte{background:var(--ui-carte);border:1px solid var(--ui-line);border-radius:var(--ui-radius);
  padding:18px;margin-bottom:14px;}
.ui-carte + .ui-carte{margin-top:0;}
.ui-carte .ui-carte-titre{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ui-muted);margin:0 0 13px;display:flex;align-items:center;gap:8px;}
.ui-carte .ui-carte-titre::after{content:"";flex:1;height:1px;background:var(--ui-line);}

/* ── Grille de champs : une seule colonne sur téléphone ─────────────────── */
.ui-grille{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ui-gap);}
.ui-c12{grid-column:span 12;} .ui-c8{grid-column:span 8;} .ui-c6{grid-column:span 6;}
.ui-c4{grid-column:span 4;} .ui-c3{grid-column:span 3;}
@media(max-width:760px){ .ui-c8,.ui-c6,.ui-c4,.ui-c3{grid-column:span 12;} }

/* ── Champ : label, contrôle, aide, erreur ──────────────────────────────── */
.ui-champ{display:flex;flex-direction:column;gap:6px;}
.ui-champ > label{font-size:.78rem;font-weight:700;color:var(--ui-ink-2);letter-spacing:.01em;}
.ui-champ > label .ui-requis{color:var(--ui-rouge);margin-inline-start:2px;}
.ui-champ .ui-aide{font-size:.78rem;color:var(--ui-muted);line-height:1.45;}
.ui-champ .ui-erreur{font-size:.78rem;color:var(--ui-rouge);font-weight:600;}
.ui-champ input:not([type=checkbox]):not([type=radio]),
.ui-champ select, .ui-champ textarea{
  width:100%;box-sizing:border-box;min-height:var(--ui-touche);
  border:1.5px solid var(--ui-line-fort);border-radius:var(--ui-radius-sm);
  padding:10px 12px;font-size:.95rem;font-family:inherit;color:var(--ui-ink);
  background:var(--ui-carte);outline:none;transition:border-color .12s,box-shadow .12s;}
.ui-champ textarea{min-height:96px;resize:vertical;}
.ui-champ input:focus, .ui-champ select:focus, .ui-champ textarea:focus{
  border-color:var(--ui-primaire);box-shadow:0 0 0 3px var(--ui-primaire-doux);}
.ui-champ input[aria-invalid="true"], .ui-champ.en-erreur input,
.ui-champ.en-erreur select, .ui-champ.en-erreur textarea{border-color:var(--ui-rouge);}
.ui-champ input[dir="ltr"], .ui-champ .ui-nombre{font-variant-numeric:tabular-nums;}

/* ── Barre d'actions : collante sur téléphone, jamais cachée ────────────── */
.ui-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px;}
.ui-actions .ui-espace{flex:1;}
@media(max-width:760px){
  .ui-actions{position:sticky;bottom:var(--app-bottom-clearance,0px);z-index:5;
    background:linear-gradient(180deg,rgba(248,250,252,0),var(--ui-fond) 26%);
    padding:12px 0 calc(10px + env(safe-area-inset-bottom,0px));margin-top:10px;}
  .ui-actions .ui-btn{flex:1 1 auto;justify-content:center;}
}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-touche);
  padding:11px 18px;border-radius:12px;border:1.5px solid transparent;font-weight:700;font-size:.95rem;
  font-family:inherit;cursor:pointer;text-decoration:none;transition:filter .12s,border-color .12s;}
.ui-btn.principal{background:var(--ui-primaire);color:#fff;}
.ui-btn.principal:hover{filter:brightness(1.07);color:#fff;}
.ui-btn.secondaire{background:var(--ui-carte);color:var(--ui-ink-2);border-color:var(--ui-line-fort);}
.ui-btn.secondaire:hover{border-color:var(--ui-primaire);color:var(--ui-primaire);}
.ui-btn.danger{background:var(--ui-rouge);color:#fff;}
.ui-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ── État vide : jamais une page blanche ────────────────────────────────── */
.ui-vide{text-align:center;padding:34px 18px;color:var(--ui-muted);}
.ui-vide .bi{font-size:2rem;opacity:.45;display:block;margin-bottom:10px;}
.ui-vide h3{font-size:1rem;font-weight:800;color:var(--ui-ink);margin:0 0 6px;}
.ui-vide p{margin:0 auto 14px;max-width:46ch;font-size:.9rem;}

/* ── Tableau : défile dans SON conteneur, jamais la page ────────────────── */
.ui-table-enveloppe{overflow-x:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius);
  background:var(--ui-carte);}
.ui-table{border-collapse:collapse;width:100%;font-size:.9rem;}
.ui-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#5b6376;font-weight:800;
  text-align:start;padding:10px 12px;background:var(--ui-fond);white-space:nowrap;}
.ui-table td{padding:11px 12px;border-top:1px solid var(--ui-line);vertical-align:middle;}
.ui-table tr:hover td{background:var(--ui-fond);}
.ui-table .ui-nombre{text-align:end;font-variant-numeric:tabular-nums;}

/* ── Mention : information, avertissement, danger ───────────────────────── */
.ui-mention{border-radius:var(--ui-radius-sm);padding:11px 14px;font-size:.87rem;line-height:1.5;
  border:1px solid var(--ui-line);background:var(--ui-fond);color:var(--ui-ink-2);}
.ui-mention.info{background:var(--ui-primaire-doux);border-color:#cfe0fd;color:#0b3ea8;}
.ui-mention.attention{background:#fdf3e3;border-color:#f5d9a8;color:#8a5008;}
.ui-mention.danger{background:#fdecec;border-color:#f6c2c2;color:#a41c1c;}

/* ── Parcours : les étapes d'un dossier — faite / courante / à faire ─────── */
.ui-etapes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 14px;padding:0;}
.ui-etapes li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;
  font-size:.8rem;font-weight:700;border:1px solid var(--ui-line);background:var(--ui-fond);color:var(--ui-muted);}
.ui-etapes li.faite{background:#ecfdf5;border-color:#a7f3d0;color:var(--ui-ok);}
.ui-etapes li.courante{background:var(--ui-primaire-doux);border-color:#cfe0fd;color:var(--ui-primaire);}
.ui-etapes li.annulee{background:#fdecec;border-color:#f6c2c2;color:var(--ui-rouge);}

/* ── Fiche : paires libellé / valeur, deux colonnes, une seule au doigt ─── */
.ui-fiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0;font-size:.9rem;}
.ui-fiche dt{font-size:.74rem;color:var(--ui-muted);font-weight:600;margin:0 0 2px;}
.ui-fiche dd{margin:0;font-weight:700;color:var(--ui-ink);overflow-wrap:anywhere;}
.ui-fiche .ui-c12{grid-column:span 2;}
@media (max-width:640px){.ui-fiche{grid-template-columns:1fr;} .ui-fiche .ui-c12{grid-column:span 1;}}

/* ── Pli : un formulaire de correction replié derrière son titre ────────── */
.ui-pli>summary{cursor:pointer;font-size:.84rem;font-weight:700;color:var(--ui-primaire);list-style:none;
  min-height:var(--ui-touche);display:flex;align-items:center;gap:6px;}
.ui-pli>summary::-webkit-details-marker{display:none;}
.ui-pli[open]>summary{margin-bottom:10px;}

/* ── Lignes de montants : libellé à gauche, montant à droite, total souligné */
.ui-lignes{display:flex;flex-direction:column;gap:6px;font-size:.9rem;}
.ui-lignes>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.ui-lignes .total{border-top:1px solid var(--ui-line);padding-top:8px;margin-top:4px;font-weight:800;}

/* ── Pastille : un état en un mot ───────────────────────────────────────── */
.ui-pastille{display:inline-block;padding:3px 12px;border-radius:20px;font-size:.78rem;font-weight:700;}
.ui-pastille.ambre{background:#fef3c7;color:#92400e;} .ui-pastille.vert{background:#ccfbf1;color:#0f766e;}
.ui-pastille.gris{background:#e2e8f0;color:#475569;} .ui-pastille.rouge{background:#fee2e2;color:#b91c1c;}
.ui-pastille.indigo{background:#e0e7ff;color:#3730a3;}

/* Arabe : les logiques ci-dessus se retournent seules ; les nombres non. */
html[dir="rtl"] .ui-table .ui-nombre{text-align:start;}

/* ══════════════════════════════════════════════════════════════════════════
   MISE À NIVEAU DU PARC EXISTANT (boss 11/09 : « fix all nouveau pages now,
   all modules »). Cinquante-deux formulaires écrits avant ce socle utilisent
   le balisage Bootstrap brut. Plutôt que d'attendre leur réécriture, les
   règles ci-dessous les relèvent TOUS d'un coup : cibles tactiles de 44 px,
   libellés lisibles, anneau de focus visible, boutons qui ne se confondent
   plus avec le fond. Portée limitée aux pages CONNECTÉES (body.design-scope) :
   le site public garde son style.
   ══════════════════════════════════════════════════════════════════════════ */

body.design-scope .form-label{
  font-size:.78rem !important; font-weight:700 !important; color:var(--ui-ink-2) !important;
  margin-bottom:5px; letter-spacing:.01em;}

body.design-scope .form-control,
body.design-scope .form-select{
  min-height:var(--ui-touche); border:1.5px solid var(--ui-line-fort); border-radius:var(--ui-radius-sm);
  padding:10px 12px; font-size:.95rem; color:var(--ui-ink); background:var(--ui-carte);
  transition:border-color .12s, box-shadow .12s;}
body.design-scope .form-control-sm,
body.design-scope .form-select-sm{min-height:38px; padding:7px 10px; font-size:.88rem;}
body.design-scope .form-control:focus,
body.design-scope .form-select:focus{
  border-color:var(--ui-primaire); box-shadow:0 0 0 3px var(--ui-primaire-doux); outline:none;}
body.design-scope .form-control::placeholder{color:#94a3b8;}
body.design-scope textarea.form-control{min-height:96px;}

/* Cases et boutons radio : 16 px mesurés à l'audit, impossibles au doigt. */
body.design-scope .form-check-input{width:20px; height:20px; margin-top:.15rem;}
/* …mais un INTERRUPTEUR (form-switch) reste une glissière : forcé à 20×20 il
   devenait un rond vide qu'on prenait pour un bouton radio (boss 19/09,
   page E-commerce). */
body.design-scope .form-switch .form-check-input{width:2.5em; height:1.35em; border-radius:2em; margin-top:.2rem;}
body.design-scope .form-check-label{padding-inline-start:4px; min-height:24px;}

/* Un bouton doit se voir et se toucher. */
body.design-scope .btn{min-height:var(--ui-touche); border-radius:12px; font-weight:700;
  padding-inline:16px; display:inline-flex; align-items:center; justify-content:center; gap:7px;}
body.design-scope .btn-sm{min-height:36px; border-radius:10px; padding-inline:12px;}
body.design-scope .btn-outline-secondary{border-color:var(--ui-line-fort); color:var(--ui-ink-2);}
body.design-scope .btn-outline-secondary:hover{border-color:var(--ui-primaire); color:var(--ui-primaire);}

/* Les cartes des anciens écrans prennent le rayon et la bordure du socle. */
body.design-scope .card{border-radius:var(--ui-radius); border-color:var(--ui-line);}

/* Texte secondaire : #8b93a7 sur #f3f5f9 mesurait 2,8:1 — illisible dehors. */
body.design-scope .text-muted{color:#5b6376 !important;}
body.design-scope table th{color:#5b6376;}

/* Un formulaire long doit garder ses boutons sous la main sur téléphone. */
@media(max-width:760px){
  body.design-scope form .d-flex.gap-2:last-child,
  body.design-scope form .ui-actions{
    position:sticky; bottom:var(--app-bottom-clearance,0px); z-index:5;
    background:linear-gradient(180deg,rgba(248,250,252,0),var(--ui-fond) 26%);
    padding:12px 0 calc(10px + env(safe-area-inset-bottom,0px));}
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTE DÉROULANTE CHERCHABLE (static/js/ui-select.js)
   Boss 11/09 : « these kind of dropdown are no help, display on full screen,
   not helpful to add on the flight and no search ». Le menu natif est gardé
   comme source de vérité, mais caché : c'est le champ ci-dessous qu'on voit.
   ══════════════════════════════════════════════════════════════════════════ */
.ui-select{position:relative;}
.ui-select .ui-select-natif{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.ui-select-champ{width:100%;box-sizing:border-box;min-height:var(--ui-touche);
  border:1.5px solid var(--ui-line-fort);border-radius:var(--ui-radius-sm);padding:10px 34px 10px 12px;
  font-size:.95rem;font-family:inherit;color:var(--ui-ink);background:var(--ui-carte);
  background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;outline:none;transition:border-color .12s,box-shadow .12s;}
html[dir="rtl"] .ui-select-champ{padding:10px 12px 10px 34px;
  background-position:17px 50%,12px 50%;}
.ui-select-champ.petit{min-height:38px;padding-block:7px;font-size:.88rem;}
.ui-select-champ:focus{border-color:var(--ui-primaire);box-shadow:0 0 0 3px var(--ui-primaire-doux);}
.ui-select-liste{display:none;position:absolute;z-index:1200;inset-inline:0;top:calc(100% + 4px);
  max-height:290px;overflow-y:auto;background:var(--ui-carte);border:1px solid var(--ui-line-fort);
  border-radius:var(--ui-radius-sm);box-shadow:0 14px 34px rgba(15,23,42,.16);}
.ui-select-liste.ouverte{display:block;}
.ui-select-ligne{padding:11px 13px;font-size:.93rem;cursor:pointer;min-height:var(--ui-touche);
  display:flex;align-items:center;border-bottom:1px solid var(--ui-fond);}
.ui-select-ligne:last-child{border-bottom:0;}
.ui-select-ligne:hover,.ui-select-ligne.vise{background:var(--ui-primaire-doux);}
.ui-select-ligne.choisie{font-weight:700;color:var(--ui-primaire);}
.ui-select-ligne.effacer{color:var(--ui-muted);font-style:italic;}
.ui-select-vide{padding:13px;font-size:.88rem;color:var(--ui-muted);text-align:center;}
.ui-select-nouveau{display:flex;align-items:center;gap:7px;padding:11px 13px;min-height:var(--ui-touche);
  font-size:.9rem;font-weight:700;color:var(--ui-primaire);text-decoration:none;
  border-top:1px solid var(--ui-line);background:var(--ui-fond);position:sticky;bottom:0;}
.ui-select-nouveau:hover,.ui-select-nouveau.vise{background:var(--ui-primaire-doux);color:var(--ui-primaire);}
@media(max-width:760px){ .ui-select-liste{max-height:min(60vh,340px);} }

/* ══════════════════════════════════════════════════════════════════════════
   ALIGNEMENT (boss 11/09, capture « Prix de vente / 19% / 0,00 ») : sur une
   même rangée, trois contrôles de hauteurs et de rayons différents donnent
   une ligne bancale. Ces règles imposent la même hauteur, le même rayon et
   la même ligne de base à tout ce qui vit côte à côte dans un formulaire.
   ══════════════════════════════════════════════════════════════════════════ */
body.design-scope .row > [class*="col"]{display:flex;flex-direction:column;}
body.design-scope .row > [class*="col"] > .form-label{min-height:1.15em;}
body.design-scope .input-group > .form-control,
body.design-scope .input-group > .form-select,
body.design-scope .input-group > .input-group-text,
body.design-scope .input-group > .btn{min-height:var(--ui-touche);border-radius:0;}
body.design-scope .input-group > :first-child{border-start-start-radius:var(--ui-radius-sm);border-end-start-radius:var(--ui-radius-sm);}
body.design-scope .input-group > :last-child{border-start-end-radius:var(--ui-radius-sm);border-end-end-radius:var(--ui-radius-sm);}
body.design-scope .input-group-text{background:var(--ui-fond);border-color:var(--ui-line-fort);
  color:var(--ui-ink-2);font-size:.88rem;font-weight:600;display:flex;align-items:center;}
/* Une rangée de champs : tous les contrôles descendent au même fond de case.
   UX-07 (audit mesuré 27/09) : `.ui-select` manquait à l'appel. Dès qu'un
   <select> dépasse 8 options, `ui-select.js` l'enveloppe dans une boîte
   cherchable — qui n'est plus un `.form-select` et ne descendait donc PAS au
   fond de sa case. Résultat mesuré sur la paie à 768 px : « Mois » (12 mois,
   donc enveloppé) démarrait 34,6 px au-dessus de « Année » (5 ans, resté
   natif), dans le même groupe. Le défaut suivait la LONGUEUR de la liste. */
body.design-scope .row.g-2 > [class*="col"] > .form-control,
body.design-scope .row.g-3 > [class*="col"] > .form-control,
body.design-scope .row.g-2 > [class*="col"] > .form-select,
body.design-scope .row.g-3 > [class*="col"] > .form-select,
body.design-scope .row.g-2 > [class*="col"] > .ui-select,
body.design-scope .row.g-3 > [class*="col"] > .ui-select{margin-top:auto;}

/* ══════════════════════════════════════════════════════════════════════════
   TAILLE « PETITE » UNIFIÉE (boss 11/09, capture de la barre de filtres)
   Les barres de filtres mélangent .form-control-sm (41 px), .form-select-sm
   (41 px), .btn-sm (40 px) et .btn-group-sm > .btn (44 px) : quatre hauteurs
   sur une même ligne, d'où les bas de champs en escalier. Une seule variable
   décide désormais, et elle monte au doigt sous 860 px.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--ui-petit:40px;}
@media (max-width:860px){:root{--ui-petit:44px;}}

body.design-scope .form-control-sm,
body.design-scope .form-select-sm,
body.design-scope .ui-select-champ.petit,
body.design-scope .btn-sm,
body.design-scope .btn-group-sm > .btn,
body.design-scope .input-group-sm > .form-control,
body.design-scope .input-group-sm > .form-select,
body.design-scope .input-group-sm > .input-group-text{
  min-height:var(--ui-petit) !important; height:var(--ui-petit) !important;
  padding-block:0 !important; line-height:1.2;}
body.design-scope textarea.form-control-sm{height:auto !important; padding-block:7px !important;}
body.design-scope .btn-group-sm > .btn{border-radius:10px;}
body.design-scope .btn-group-sm > .btn:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;}
body.design-scope .btn-group-sm > .btn:not(:last-child){border-start-end-radius:0;border-end-end-radius:0;}

/* == RH / Pointage (repris de la session Codex codex/full-ux-audit, 17/09) ==
   Les ecrans RH (equipe, conges, presences, heures sup) ecrivaient leurs
   couleurs en dur (#fff, #e2e8f0, #64748b) : invisibles sous un theme societe
   et sans variante mobile -- le tableau des presences partait hors ecran au
   doigt. Ces regles sont portees par la classe rh-scope posee sur <body>
   par base.html selon le chemin. ECARTE du lot Codex : la regle qui masquait
   #yacine-root sur ces pages (decision produit) et les regles payroll-* (leurs
   gabarits ne sont pas repris dans ce lot). Le jeton --ok employe par Codex
   n'existe pas dans theme.css -- remplace par --success, sinon la couleur des
   pastilles tombait silencieusement. */
body.design-scope.rh-scope .rh-page{max-width:1220px;padding-bottom:calc(34px + var(--app-bottom-clearance,0px));}
body.design-scope.rh-scope .rh-page-head{border-bottom:1px solid var(--line);padding-bottom:18px;}
body.design-scope.rh-scope .rh-page-head h2{color:var(--ink-900);font-size:clamp(1.55rem,2.3vw,2.05rem);font-weight:800!important;letter-spacing:-.035em;}
body.design-scope.rh-scope .team-toolbar{background:var(--paper-1);border:1px solid var(--line);border-radius:16px;padding:15px 16px;}
body.design-scope.rh-scope .team-member-card{background:var(--paper-1)!important;border:1px solid var(--line)!important;border-radius:15px!important;box-shadow:0 5px 18px rgba(15,23,42,.045);}
body.design-scope.rh-scope .leave-mobile-list{display:grid;gap:10px;}
body.design-scope.rh-scope .leave-mobile-card{background:var(--paper-1);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 4px 16px rgba(15,23,42,.04);}
body.design-scope.rh-scope .leave-mobile-card.urgent{border-color:color-mix(in srgb,var(--warning,#d97706) 35%,var(--line));}
body.design-scope.rh-scope .leave-mobile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
body.design-scope.rh-scope .leave-mobile-name{color:var(--ink-900);font-size:.95rem;font-weight:800;overflow-wrap:anywhere;}
body.design-scope.rh-scope .leave-mobile-meta{color:var(--ink-500);font-size:.78rem;line-height:1.5;margin-top:3px;}
body.design-scope.rh-scope .leave-mobile-balance{color:var(--success);font-size:1.15rem;font-weight:900;white-space:nowrap;}
body.design-scope.rh-scope .leave-mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:12px;}
body.design-scope.rh-scope .leave-mobile-grid small{color:var(--ink-500);display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
body.design-scope.rh-scope .leave-mobile-grid strong{color:var(--ink-900);display:block;font-size:.84rem;margin-top:2px;}
body.design-scope.rh-scope .leave-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px;}
body.design-scope.rh-scope .leave-mobile-actions .btn{width:100%;}
body.design-scope.rh-scope .attendance-mobile-list{display:grid;gap:9px;}
body.design-scope.rh-scope .attendance-mobile-card{background:var(--paper-1);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:0 4px 14px rgba(15,23,42,.035);}
body.design-scope.rh-scope .attendance-mobile-card.is-muted{opacity:.62;}
body.design-scope.rh-scope .attendance-mobile-top{align-items:center;display:flex;justify-content:space-between;gap:12px;color:var(--ink-900);}
body.design-scope.rh-scope .attendance-status{border-radius:999px;display:inline-flex;font-size:.72rem;font-weight:800;padding:3px 9px;white-space:nowrap;}
body.design-scope.rh-scope .attendance-status.is-worked{background:color-mix(in srgb,var(--success) 12%,var(--paper-1));color:var(--success);}
body.design-scope.rh-scope .attendance-status.is-leave{background:color-mix(in srgb,var(--info,var(--primary)) 12%,var(--paper-1));color:var(--info,var(--primary));}
body.design-scope.rh-scope .attendance-status.is-holiday{background:color-mix(in srgb,var(--primary) 12%,var(--paper-1));color:var(--primary);}
body.design-scope.rh-scope .attendance-status.is-absent{background:color-mix(in srgb,var(--danger) 10%,var(--paper-1));color:var(--danger);}
body.design-scope.rh-scope .attendance-status.is-neutral{background:var(--paper-2);color:var(--ink-500);}
body.design-scope.rh-scope .attendance-mobile-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
body.design-scope.rh-scope .attendance-mobile-times>div{background:var(--paper-2);border-radius:10px;padding:8px 9px;}
body.design-scope.rh-scope .attendance-mobile-times small{color:var(--ink-500);display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;}
body.design-scope.rh-scope .attendance-mobile-times strong{color:var(--ink-900);display:block;margin-top:2px;}
body.design-scope.rh-scope .attendance-mobile-alerts{border-top:1px solid var(--line);color:var(--ink-500);display:grid;font-size:.76rem;gap:7px;margin-top:11px;padding-top:10px;}
body.design-scope.rh-scope .attendance-mobile-alerts .is-danger{color:var(--danger);font-weight:700;}
body.design-scope.rh-scope .attendance-mobile-action{align-items:center;display:flex;justify-content:space-between;gap:10px;}
body.design-scope.rh-scope .attendance-mobile-action form{flex:0 0 auto;}

/* ── Pointage : lecture d'équipe desktop et cartes timeline mobiles ────── */
body.design-scope.rh-scope .presence-team-page{max-width:1540px;}
body.design-scope.rh-scope .presence-team-title{color:var(--ink-900);font-size:clamp(1.35rem,2vw,1.75rem);font-weight:800;letter-spacing:-.03em;}
body.design-scope.rh-scope .presence-team-title i{color:var(--primary);}
body.design-scope.rh-scope .presence-team-date-nav .btn{align-items:center;display:inline-flex;justify-content:center;min-height:40px;min-width:40px;}
body.design-scope.rh-scope .presence-team-date{color:var(--ink-900);font-weight:800;min-width:140px;text-align:center;}
body.design-scope.rh-scope .presence-team-switch{background:var(--paper-1);border:1px solid var(--line);color:var(--ink-500);font-weight:700;min-height:40px;}
body.design-scope.rh-scope .presence-team-switch:hover{border-color:var(--primary);color:var(--primary);}
body.design-scope.rh-scope .presence-team-summary{align-items:center;color:var(--ink-500);display:flex;flex-wrap:wrap;font-size:.82rem;gap:7px 12px;margin-bottom:12px;}
body.design-scope.rh-scope .presence-team-summary strong{color:var(--ink-900);}
body.design-scope.rh-scope .presence-team-legend{align-items:center;display:inline-flex;gap:5px;}
body.design-scope.rh-scope .presence-team-dot{background:var(--success,#15803d);border-radius:3px;display:inline-block;height:10px;width:10px;}
body.design-scope.rh-scope .presence-team-dot.is-auto{background:var(--warning,#f59e0b);}
body.design-scope.rh-scope .presence-team-card{background:var(--paper-1);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 28px rgba(15,23,42,.05);overflow:hidden;}
body.design-scope.rh-scope .presence-team-table-wrap{background:none;}
body.design-scope.rh-scope .presence-team-table-wrap::after{content:none;}
body.design-scope.rh-scope .presence-team-table{color:var(--ink-900);font-size:.84rem;min-width:860px;}
body.design-scope.rh-scope .presence-team-table thead{background:var(--paper-2);}
body.design-scope.rh-scope .presence-team-table thead tr{color:var(--ink-500);font-size:.69rem;letter-spacing:.04em;text-transform:uppercase;}
body.design-scope.rh-scope .presence-team-table th{border-color:var(--line);}
body.design-scope.rh-scope .presence-team-table th:first-child{width:210px;}
body.design-scope.rh-scope .presence-team-table th:nth-child(2){width:90px;}
body.design-scope.rh-scope .presence-team-table td{border-color:var(--line);padding-block:9px;}
body.design-scope.rh-scope .presence-team-hours{height:14px;position:relative;}
body.design-scope.rh-scope .presence-team-hours span{color:var(--ink-400,var(--ink-500));font-size:.62rem;position:absolute;transform:translateX(-50%);}
body.design-scope.rh-scope .presence-team-person{white-space:nowrap;}
body.design-scope.rh-scope .presence-team-person > a{color:var(--ink-900);font-weight:700;text-decoration:none;}
body.design-scope.rh-scope .presence-team-person > a:hover{color:var(--primary);}
body.design-scope.rh-scope .presence-team-status{font-size:.68rem;font-weight:700;}
body.design-scope.rh-scope .presence-team-status.is-leave{color:var(--info,#0284c7);}
body.design-scope.rh-scope .presence-team-status.is-holiday{color:var(--primary);}
body.design-scope.rh-scope .presence-team-status.is-weekend{color:var(--ink-400,var(--ink-500));font-weight:500;}
body.design-scope.rh-scope .presence-team-status.is-absent{color:var(--danger);}
body.design-scope.rh-scope .presence-team-status.is-late{color:var(--warning,#d97706);font-weight:600;}
body.design-scope.rh-scope .presence-team-total{color:var(--ink-900);font-weight:800;}
body.design-scope.rh-scope .presence-team-timeline{background:repeating-linear-gradient(90deg,var(--paper-2) 0,var(--paper-2) calc(100%/12 - 1px),var(--line) calc(100%/12 - 1px),var(--line) calc(100%/12));border-radius:6px;height:24px;position:relative;}
body.design-scope.rh-scope .presence-team-segment{background:var(--success,#15803d);border-radius:4px;bottom:4px;position:absolute;top:4px;}
body.design-scope.rh-scope .presence-team-segment.is-auto{background:var(--warning,#f59e0b);}
body.design-scope.rh-scope .presence-team-mobile-scale{display:none;}
@media(max-width:767.98px){
  body.design-scope.rh-scope .presence-team-page{padding-block:20px!important;}
  body.design-scope.rh-scope .presence-team-header{align-items:stretch!important;display:grid!important;grid-template-columns:1fr;gap:12px!important;}
  body.design-scope.rh-scope .presence-team-title{font-size:1.45rem;}
  body.design-scope.rh-scope .presence-team-date-nav{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px;margin-left:0!important;width:100%;}
  body.design-scope.rh-scope .presence-team-date-nav .btn{min-height:44px;}
  body.design-scope.rh-scope .presence-team-date-nav .btn-tonal:last-child{grid-column:1/-1;margin-top:6px;}
  body.design-scope.rh-scope .presence-team-date{align-items:center;background:var(--paper-1);border-block:1px solid var(--line);display:flex;justify-content:center;min-width:0;}
  body.design-scope.rh-scope .presence-team-switch{align-items:center;display:flex;justify-content:center;min-height:44px;width:100%;}
  body.design-scope.rh-scope .presence-team-summary{background:var(--paper-1);border:1px solid var(--line);border-radius:12px;display:grid;gap:7px;margin-bottom:14px;padding:12px 14px;}
  body.design-scope.rh-scope .presence-team-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;}
  body.design-scope.rh-scope .presence-team-table-wrap{overflow:visible;}
  body.design-scope.rh-scope .presence-team-table{display:block;min-width:0;}
  body.design-scope.rh-scope .presence-team-table thead{display:none;}
  body.design-scope.rh-scope .presence-team-table tbody{display:grid;gap:10px;}
  body.design-scope.rh-scope .presence-team-table tbody tr{background:var(--paper-1);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 16px rgba(15,23,42,.045);display:grid;grid-template-columns:minmax(0,1fr) auto;padding:14px;}
  body.design-scope.rh-scope .presence-team-table tbody td{border:0;display:block;padding:0;}
  body.design-scope.rh-scope .presence-team-person{min-width:0;white-space:normal;}
  body.design-scope.rh-scope .presence-team-person > a{font-size:.95rem;}
  body.design-scope.rh-scope .presence-team-total{font-size:1rem;padding-inline-start:12px!important;text-align:end;}
  body.design-scope.rh-scope .presence-team-timeline-cell{grid-column:1/-1;margin-top:12px;}
  body.design-scope.rh-scope .presence-team-mobile-scale{color:var(--ink-400,var(--ink-500));display:flex;font-size:.6rem;justify-content:space-between;margin-bottom:4px;}
  body.design-scope.rh-scope .presence-team-timeline{height:30px;}
  body.design-scope.rh-scope .presence-team-segment{bottom:5px;top:5px;}
}
body.design-scope.rh-scope #btnImportPunches{min-height:40px;white-space:normal;}
.attendance-shift-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;align-items:end;}
.attendance-shift-form>div:first-of-type{grid-column:1/-1;}
.attendance-shift-form button{min-height:44px;}
.overtime-queue-page .btn{min-width:44px;min-height:44px;}
.overtime-queue-page .overtime-decision-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.overtime-queue-page .overtime-decision-form input[name=reason]{grid-column:1/-1;max-width:none!important;}
@media(max-width:575.98px){
  .overtime-queue-page .detail-data-table td:last-child{display:block!important;}
  .overtime-queue-page .detail-data-table td:last-child::before{display:block;margin-bottom:8px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   Comptabilité — repris de la session Codex (codex/full-ux-audit), lot du 23/09.
   Règles doublement scopées `body.design-scope.accounting-scope` : elles ne
   s'appliquent QUE si la classe de chemin est posée sur le corps de page par
   base.html. Un sélecteur dont le scope n'est pas encore fusionné reste donc
   inerte — c'est ce qui permet de reprendre ce travail module par module.
   ══════════════════════════════════════════════════════════════════════════ */
body.design-scope.accounting-scope .compta-page {padding-bottom:calc(36px + var(--app-bottom-clearance,0px));}
body.design-scope.accounting-scope .accounting-tabs {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
body.design-scope.accounting-scope .accounting-tabs::-webkit-scrollbar {display:none;}
body.design-scope.accounting-scope .accounting-tabs .nav-link {min-height:42px;white-space:nowrap;}
body.design-scope.accounting-scope .accounting-period {background:var(--paper-1);border:1px solid var(--line);border-radius:15px;padding:14px;}
body.design-scope.accounting-scope .accounting-journal-filters {overflow-x:auto;padding-bottom:3px;scrollbar-width:none;}
body.design-scope.accounting-scope .accounting-journal-filters .btn {flex:0 0 auto;}
body.design-scope.accounting-scope .accounting-entry-card {border-color:var(--line);border-radius:14px;box-shadow:0 5px 16px rgba(15,23,42,.04);}
body.design-scope.accounting-scope .accounting-table-wrap {overflow-x:auto;}
body.design-scope.accounting-scope .accounting-pagination {align-items:center;display:flex;gap:12px;justify-content:center;margin-top:18px;}
body.design-scope.accounting-scope .accounting-pagination span {color:var(--ink-500);font-size:.82rem;font-weight:700;}
@media(max-width:767.98px) {
body.design-scope.clinic-scope #yacine-root,
body.design-scope.delivery-scope #yacine-root,
body.design-scope.lodging-scope #yacine-root,
body.design-scope.restaurant-scope #yacine-root,
body.design-scope.construction-scope #yacine-root,
body.design-scope.finance-scope #yacine-root,
body.design-scope.accounting-scope #yacine-root,
body.design-scope.settings-scope #yacine-root {display:none;}
body.design-scope.accounting-scope .compta-page {padding:18px 14px!important;}
body.design-scope.accounting-scope .accounting-period {display:grid!important;grid-template-columns:1fr 1fr;}
body.design-scope.accounting-scope .accounting-period>div {min-width:0;}
body.design-scope.accounting-scope .accounting-period input {min-width:0!important;width:100%;}
body.design-scope.accounting-scope .accounting-period>button {grid-column:1/-1;}
body.design-scope.accounting-scope .accounting-period>.d-inline-flex {grid-column:1/-1;justify-content:stretch;margin-left:0!important;}
body.design-scope.accounting-scope .accounting-period>.d-inline-flex .btn {flex:1;justify-content:center;}
body.design-scope.accounting-scope .accounting-entry-card {padding:14px!important;}
body.design-scope.accounting-scope .accounting-entry-card>div:first-child {align-items:flex-start;flex-direction:column;}
body.design-scope.accounting-scope .accounting-entry-card>div:first-child strong {font-size:.98rem;line-height:1.4;}
body.design-scope.accounting-scope .accounting-table-wrap {overflow:visible;}
body.design-scope.accounting-scope .accounting-lines-table,
body.design-scope.accounting-scope .accounting-balance-table,
body.design-scope.accounting-scope .accounting-ledger-table {display:block;width:100%;}
body.design-scope.accounting-scope .accounting-lines-table thead,
body.design-scope.accounting-scope .accounting-balance-table thead,
body.design-scope.accounting-scope .accounting-ledger-table thead {display:none;}
body.design-scope.accounting-scope .accounting-lines-table tbody,
body.design-scope.accounting-scope .accounting-balance-table tbody,
body.design-scope.accounting-scope .accounting-ledger-table tbody {display:grid;gap:10px;}
body.design-scope.accounting-scope .accounting-lines-table tbody tr,
body.design-scope.accounting-scope .accounting-balance-table tbody tr,
body.design-scope.accounting-scope .accounting-ledger-table tbody tr {background:var(--paper-2);border:1px solid var(--line);border-radius:12px;display:grid;gap:8px;grid-template-columns:1fr 1fr;padding:12px;}
body.design-scope.accounting-scope .accounting-lines-table tbody td,
body.design-scope.accounting-scope .accounting-balance-table tbody td,
body.design-scope.accounting-scope .accounting-ledger-table tbody td {align-items:flex-start;border:0!important;display:flex;font-size:.95rem;gap:8px;justify-content:space-between;min-width:0;padding:0!important;text-align:right!important;white-space:normal;}
body.design-scope.accounting-scope .accounting-lines-table tbody td::before,
body.design-scope.accounting-scope .accounting-balance-table tbody td::before,
body.design-scope.accounting-scope .accounting-ledger-table tbody td::before {color:var(--ink-500);content:attr(data-label);font-size:.7rem;font-weight:800;letter-spacing:.04em;text-align:left;text-transform:uppercase;}
body.design-scope.accounting-scope .accounting-lines-table tbody td:nth-child(2),
body.design-scope.accounting-scope .accounting-balance-table tbody td:nth-child(2),
body.design-scope.accounting-scope .accounting-ledger-table tbody td:nth-child(3) {grid-column:1/-1;}
body.design-scope.accounting-scope .accounting-balance-table {border-collapse:separate;}
body.design-scope.accounting-scope .accounting-balance-table tbody tr {background:var(--paper-1);box-shadow:0 4px 12px rgba(15,23,42,.035);}
body.design-scope.accounting-scope .accounting-balance-table tfoot {display:block;margin-top:12px;}
body.design-scope.accounting-scope .accounting-balance-table tfoot tr {background:color-mix(in srgb,var(--primary) 8%,var(--paper-1));border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));border-radius:12px;display:grid;grid-template-columns:1fr 1fr;padding:12px;}
body.design-scope.accounting-scope .accounting-balance-table tfoot td {border:0!important;display:flex;justify-content:space-between;padding:5px!important;text-align:right!important;}
body.design-scope.accounting-scope .accounting-balance-table tfoot td:first-child {font-size:1rem;grid-column:1/-1;padding-bottom:10px!important;}
body.design-scope.accounting-scope .accounting-balance-table tfoot td::before {color:var(--ink-500);content:attr(data-label);font-size:.7rem;text-transform:uppercase;}
body.design-scope.accounting-scope .accounting-ledger-picker {align-items:stretch!important;display:grid!important;grid-template-columns:1fr auto;}
body.design-scope.accounting-scope .accounting-ledger-picker select {max-width:none!important;min-width:0;width:100%;}
body.design-scope.accounting-scope .accounting-pagination {justify-content:space-between;}
}
@media(max-width:575px) {
body.design-scope.accounting-scope .accounting-balance-table tbody td,
body.design-scope.accounting-scope .accounting-balance-table tfoot td,
body.design-scope.accounting-scope .accounting-lines-table tbody td,
body.design-scope.accounting-scope .accounting-ledger-table tbody td {flex-direction:column;align-items:flex-start;text-align:start!important;gap:4px;grid-column:1/-1;}
body.design-scope.accounting-scope .accounting-balance-table tbody tr,
body.design-scope.accounting-scope .accounting-balance-table tfoot tr,
body.design-scope.accounting-scope .accounting-lines-table tbody tr,
body.design-scope.accounting-scope .accounting-ledger-table tbody tr {grid-template-columns:minmax(0,1fr);gap:14px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   Formation — repris de la session Codex (codex/full-ux-audit), lot du 23/09.
   Règles doublement scopées `body.design-scope.formation-scope` : elles ne
   s'appliquent QUE si la classe de chemin est posée sur le corps de page par
   base.html. Un sélecteur dont le scope n'est pas encore fusionné reste donc
   inerte — c'est ce qui permet de reprendre ce travail module par module.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Formation : décisions quotidiennes et actions tactiles ───────────── */
body.design-scope.formation-scope #yacine-root {display:none;}
body.design-scope.formation-scope .formation-dashboard-page,
body.design-scope.formation-scope .formation-offers-page {max-width:1180px!important;padding-bottom:calc(34px + var(--app-bottom-clearance,0px));}
body.design-scope.formation-scope .formation-dashboard-head h2 {color:var(--ink-900);font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.04em;}
body.design-scope.formation-scope .formation-dashboard-actions .btn {align-items:center;display:inline-flex;justify-content:center;min-height:42px;}
body.design-scope.formation-scope .formation-dashboard-search {width:100%;}
body.design-scope.formation-scope .formation-dashboard-search .form-control {background:var(--paper-1)!important;border-color:var(--line);min-height:44px;}
body.design-scope.formation-scope .formation-offer-action {align-items:center;display:inline-flex;height:42px;justify-content:center;min-width:42px;}
body.design-scope.formation-scope .formation-dashboard-mobile-list {display:grid;gap:10px;}
body.design-scope.formation-scope .formation-dashboard-mobile-card {background:var(--paper-1);border:1px solid var(--line);border-radius:13px;color:var(--ink-900);display:block;padding:13px;text-decoration:none;}
body.design-scope.formation-scope .formation-dashboard-mobile-top {align-items:flex-start;display:flex;gap:12px;justify-content:space-between;}
body.design-scope.formation-scope .formation-dashboard-amount {color:var(--danger);white-space:nowrap;}
body.design-scope.formation-scope .formation-dashboard-mobile-meta {color:var(--ink-500);font-size:.8rem;margin-top:4px;}
body.design-scope.formation-scope .formation-dashboard-mobile-due {color:var(--danger);font-size:.76rem;font-weight:700;margin-top:5px;}
body.design-scope.formation-scope .formation-dashboard-mobile-actions {display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:11px;}
body.design-scope.formation-scope .formation-dashboard-mobile-actions .btn {align-items:center;display:flex;justify-content:center;min-height:42px;}
body.design-scope.formation-scope .formation-session-card .formation-dashboard-mobile-due {color:var(--ink-500);}
@media(max-width:767.98px) {
body.design-scope.formation-scope .formation-dashboard-page,
body.design-scope.formation-scope .formation-offers-page {padding:18px 14px!important;}
body.design-scope.formation-scope .formation-dashboard-head {align-items:stretch!important;}
body.design-scope.formation-scope .formation-dashboard-head h2 {width:100%;}
body.design-scope.formation-scope .formation-dashboard-actions {display:grid!important;grid-template-columns:1fr 1fr;margin-left:0!important;width:100%;}
body.design-scope.formation-scope .formation-dashboard-actions .btn {white-space:normal;}
body.design-scope.formation-scope .formation-dashboard-search {display:grid!important;grid-template-columns:minmax(0,1fr) auto;}
body.design-scope.formation-scope .formation-dashboard-search .form-control {max-width:none!important;min-width:0;}
body.design-scope.formation-scope .formation-dashboard-mobile-list {display:grid!important;}
}

/* ─── Facturation et Pointage — lot UX Codex du 23/09 ────────────────────
   Extrait des feuilles de Codex (ui.css, ux-reviewed-pages.css,
   pos-journal.css) en conservant les blocs ENTIERS, requêtes média
   comprises : un découpage par lignes casserait les sélecteurs multilignes
   et sortirait les règles de leur média.
   Les classes restées sans règle sont des utilitaires Bootstrap (col-sm-6,
   d-xl-none…), des icônes (bi-*) ou de simples repères de structure que
   Codex ne style pas non plus. */
body.design-scope .invoice-form-page label:has(.invoice-type-radio){min-height:44px;}
.billing-page .billing-unpaid-toggle{color:var(--primary-ink)!important;background:var(--paper-1)!important;border:1px solid var(--primary)!important;}
.billing-page .billing-unpaid-toggle:hover,.billing-page .billing-unpaid-toggle.is-active{color:var(--on-primary)!important;background:var(--primary)!important;}
.billing-page .billing-unpaid-toggle:focus-visible{outline:3px solid var(--primary-ink);outline-offset:3px;}
body.design-scope .crm-tab.is-active{color:var(--primary);border-bottom-color:var(--primary);}
/* ── Facturation : pilotage des encaissements et création guidée ────────── */
body.design-scope:has(.billing-page) #yacine-root,
body.design-scope:has(.invoice-form-page) #yacine-root,
body.design-scope.billing-scope #yacine-root{display:none;}
body.design-scope .billing-page{max-width:1540px;}
body.design-scope .billing-invoice-table .billing-invoice-date,body.design-scope .billing-invoice-table td:nth-child(6),body.design-scope .billing-invoice-table td:last-child .btn{white-space:nowrap;overflow-wrap:normal;}
body.design-scope .billing-invoice-table td:nth-child(3){min-width:160px;}
body.design-scope .billing-invoice-table td:nth-child(4)>span{display:inline-block;max-width:150px;}
body.design-scope .billing-invoice-table td:last-child .btn{min-width:64px;}
body.design-scope .billing-overview{
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--primary) 19%,transparent),transparent 34%),
    linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,var(--paper-1)),var(--paper-1) 60%);
  border:1px solid color-mix(in srgb,var(--primary) 23%,var(--line));
  border-radius:22px;
  box-shadow:0 18px 44px rgba(15,23,42,.075);
  margin-bottom:22px;
  padding:26px;
}
body.design-scope .billing-header{align-items:center !important;margin-bottom:18px !important;}
body.design-scope .billing-kicker{align-items:center;color:var(--primary);display:inline-flex;font-size:.7rem;font-weight:800;letter-spacing:.12em;margin-bottom:7px;text-transform:uppercase;}
body.design-scope .billing-heading h2{color:var(--ink-900);font-size:clamp(1.75rem,2.5vw,2.35rem);letter-spacing:-.045em;}
body.design-scope .billing-heading h2 > i{display:none;}
body.design-scope .billing-heading p{color:var(--ink-500) !important;font-size:.9rem !important;margin-top:4px;}
body.design-scope .billing-heading p a{color:var(--primary) !important;font-weight:700;text-decoration:none;}
body.design-scope .billing-actions .btn{min-height:44px;padding-inline:15px;box-shadow:0 6px 16px rgba(15,23,42,.07);}
body.design-scope .billing-actions .btn-primary{background:var(--primary) !important;}
body.design-scope .billing-tabs{border-top:1px solid color-mix(in srgb,var(--primary) 14%,var(--line));padding-top:7px;}
body.design-scope .billing-tabs > *{margin-bottom:18px !important;}
body.design-scope .billing-kpis{margin-bottom:0 !important;}
body.design-scope .billing-kpi{align-items:center;background:color-mix(in srgb,var(--paper-1) 89%,transparent) !important;border-color:color-mix(in srgb,var(--primary) 13%,var(--line)) !important;border-radius:16px !important;box-shadow:0 8px 22px rgba(15,23,42,.05);display:flex;gap:13px;min-height:96px;padding:15px !important;}
body.design-scope .billing-kpi-icon{align-items:center;background:color-mix(in srgb,var(--primary) 11%,var(--paper-1));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));border-radius:13px;color:var(--primary);display:flex;flex:0 0 44px;font-size:1.05rem;height:44px;justify-content:center;}
body.design-scope .billing-kpi-label{color:var(--ink-500) !important;font-size:.68rem !important;font-weight:800;letter-spacing:.08em !important;text-transform:uppercase;}
body.design-scope .billing-kpi-value{color:var(--ink-900) !important;font-size:1.65rem !important;font-weight:800;line-height:1.1;margin-top:5px;}
body.design-scope .billing-kpi-paid .billing-kpi-icon{background:color-mix(in srgb,var(--success) 11%,var(--paper-1));border-color:color-mix(in srgb,var(--success) 24%,var(--line));color:var(--success);}
body.design-scope .billing-kpi-paid .billing-kpi-value{color:var(--success) !important;}
body.design-scope .billing-balance-filter,
body.design-scope .billing-type-filters,
body.design-scope .billing-search-filters{background:var(--paper-1);border-inline:1px solid var(--line);margin:0 !important;padding-inline:14px;}
body.design-scope .billing-balance-filter{border-radius:16px 16px 0 0;border-top:1px solid var(--line);padding-top:14px;padding-bottom:8px;}
body.design-scope .billing-type-filters{padding-bottom:8px;}
body.design-scope .billing-search-filters{border-bottom:1px solid var(--line);border-radius:0 0 16px 16px;padding-bottom:14px;}
body.design-scope .billing-type-filters .btn{min-height:38px;padding-inline:14px;}
body.design-scope .billing-search-filters .form-control,
body.design-scope .billing-search-filters .form-select,
body.design-scope .billing-search-filters .input-group-text{background:var(--paper-1) !important;border-color:var(--line) !important;color:var(--ink-900) !important;min-height:42px;}
body.design-scope .billing-list-card{border-color:var(--line);border-radius:16px !important;box-shadow:0 12px 30px rgba(15,23,42,.055);margin-top:18px;}
body.design-scope .billing-list-card thead th{background:var(--paper-2);border-bottom-color:var(--line);color:var(--ink-500);padding-block:12px;}
body.design-scope .billing-list-card tbody tr{border-bottom-color:var(--line) !important;}
body.design-scope .billing-list-card tbody tr:hover{background:var(--paper-2);}
body.design-scope .billing-list-card tbody td a:not(.btn){color:var(--primary) !important;}
body.design-scope .billing-mobile-item{background:var(--paper-1);border-bottom-color:var(--line) !important;min-height:86px;}
body.design-scope .billing-mobile-item:hover{background:var(--paper-2);}
body.design-scope .invoice-form-page{max-width:1180px !important;}
body.design-scope .invoice-form-card,
body.design-scope .invoice-form-total{background:var(--paper-1) !important;border-color:var(--line) !important;border-radius:17px !important;box-shadow:0 9px 26px rgba(15,23,42,.05);}
body.design-scope .invoice-form-card h6,
body.design-scope .invoice-form-total h6{color:var(--primary) !important;}
body.design-scope .invoice-form-card .form-control,
body.design-scope .invoice-form-card .form-select,
body.design-scope .invoice-details-card .form-control,
body.design-scope .invoice-details-card .form-select{background:var(--paper-1) !important;border-color:var(--line) !important;color:var(--ink-900) !important;}
body.design-scope .invoice-form-side{position:relative;}
@media(min-width:992px){
  body.design-scope .invoice-form-side{align-self:start;position:sticky;top:18px;}
}
body.design-scope .invoice-form-total{background:color-mix(in srgb,var(--primary) 6%,var(--paper-1)) !important;border-color:color-mix(in srgb,var(--primary) 28%,var(--line)) !important;}
body.design-scope .invoice-submit{background:var(--primary) !important;border:0 !important;border-radius:12px !important;box-shadow:0 9px 22px color-mix(in srgb,var(--primary) 24%,transparent);}
body.design-scope .invoice-cancel{background:var(--paper-1) !important;border-color:var(--line) !important;color:var(--ink-500) !important;min-height:44px;}
@media(max-width:767.98px){
  body.design-scope .billing-page{padding-top:18px !important;}
  body.design-scope .billing-overview{border-radius:18px;padding:18px 16px;}
  body.design-scope .billing-header{align-items:stretch !important;}
  body.design-scope .billing-heading{width:100%;}
  body.design-scope .billing-actions{display:grid !important;grid-template-columns:1fr 1fr;width:100%;}
  body.design-scope .billing-actions > :last-child{grid-column:1 / -1;}
  body.design-scope .billing-actions .btn{justify-content:center;width:100%;}
  body.design-scope .billing-tabs{overflow:hidden;}
  body.design-scope .billing-tabs > *{overflow-x:auto;scrollbar-width:none;}
  body.design-scope .billing-kpi{align-items:center;flex-direction:row;gap:8px;min-height:72px;padding:10px !important;}
  body.design-scope .billing-kpi-icon{display:none;}
  body.design-scope .billing-type-filters{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding-bottom:10px;}
  body.design-scope .billing-type-filters .btn{min-width:0;width:100%;}
  body.design-scope .billing-type-filters .btn:first-child:last-child,
  body.design-scope .billing-type-filters .btn:last-child:nth-child(odd){grid-column:1 / -1;}
  body.design-scope .billing-search-filters > .input-group{max-width:none !important;width:100% !important;}
  body.design-scope .billing-search-filters .form-select{flex:1;min-width:0;width:calc(50% - 4px) !important;}
  body.design-scope .billing-list-card{margin-top:14px;}
  body.design-scope .invoice-form-page{padding:18px 14px !important;}
  body.design-scope .invoice-form-header{margin-bottom:18px !important;}
  body.design-scope .invoice-form-card,
  body.design-scope .invoice-form-total{border-radius:15px !important;padding:18px !important;}
  body.design-scope .invoice-form-side{margin-top:4px;}
  body.design-scope .invoice-line{background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:12px !important;}
}
.invoice-fixed-type{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--ink-900);font-weight:700;}
.clinic-directory-page .modal-body>label,.clinic-directory-page .modal-body .mt-2>label{min-height:32px;display:flex;gap:8px;align-items:center;}
.clinic-directory-page .modal-body label:has(input[type=checkbox]){min-height:44px;cursor:pointer;}
@media(max-width:767.98px){
  .inventory-count-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .inventory-count-row .inventory-product,.inventory-count-row .inventory-note{grid-column:1/-1;}
  .inventory-count-row .d-md-none{font-size:.75rem!important;margin-top:4px;}
}
.invoice-detail-page .invoice-payment-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.invoice-detail-page .invoice-payments{scroll-margin-top:90px;}
.invoice-detail-page .invoice-payment-history>.btn,.invoice-detail-page .invoice-payment-history form>.btn{min-width:44px;min-height:44px;}
.invoice-detail-page .invoice-lines-table td{overflow-wrap:anywhere;}
.invoice-detail-page .invoice-payment-history{padding-bottom:12px;border-bottom:1px solid var(--line);}
@media(max-width:767.98px){
  .invoice-detail-page .invoice-lines-table td{max-width:none!important;}
  .invoice-detail-page .invoice-document-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
  .invoice-detail-page .invoice-document-actions>.btn,.invoice-detail-page .invoice-document-actions>form>.btn{width:100%;min-height:44px;}
  .invoice-detail-page .invoice-document-actions>a[href="#invoice-payments"]{grid-column:1/-1;}
}
.client-form-page .client-type-choice{display:block;height:100%;padding:14px;border:2px solid var(--line);border-radius:12px;cursor:pointer;background:var(--paper-1);color:var(--ink-900);}
.client-form-page .client-type-choice:has(input:checked){border-color:var(--primary);background:var(--primary-tint);}
.client-form-page .client-type-choice:focus-within{outline:2px solid var(--primary);outline-offset:3px;}
.client-form-page .client-extra-fields{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--paper-1);}
.client-form-page .client-extra-fields>summary{min-height:44px;cursor:pointer;font-weight:700;color:var(--ink-900);}
.client-form-page .client-extra-fields[open]>summary{margin-bottom:16px;}
.client-form-page .client-patient-fields>div{display:block!important;}
.client-form-page .sp-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 44px;gap:12px;margin:12px 0;}
.client-form-page .sp-row>div{width:auto;padding:0;min-width:0;}
.client-form-page .sp-row button{min-width:44px;min-height:44px;}
@media(max-width:575.98px){
  .client-form-page .sp-row{grid-template-columns:minmax(0,1fr) 44px;padding:12px;border:1px solid var(--line);border-radius:10px;}
  .client-form-page .sp-row>div:first-child{grid-column:1/-1;}
}
.billing-mobile-selectable{display:grid;grid-template-columns:44px minmax(0,1fr);border-bottom:1px solid var(--line);}
.billing-mobile-selectable>a{min-width:0;}
.billing-mobile-selectable .billing-mobile-item{flex-wrap:wrap;padding-inline:8px!important;border:0!important;}
.billing-mobile-selectable .billing-mobile-item>div:first-child{flex-basis:160px!important;}
.billing-mobile-selectable .billing-mobile-item>div:first-child>div:first-child{flex-wrap:wrap;}
.billing-mobile-selectable .billing-mobile-item>div:first-child>div:nth-child(2){white-space:normal!important;overflow-wrap:anywhere;}
.billing-mobile-check{display:flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer;}
.billing-mobile-select-all{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px;cursor:pointer;}
.billing-page #bulkBar{flex-wrap:wrap;background:var(--paper-2)!important;border-color:var(--line)!important;}
.billing-page #bulkBar>span{color:var(--ink-900)!important;}
.billing-page #bulkBar .btn{min-height:44px;}
.billing-page .bulk-check,.billing-page .bulk-mobile-check,.billing-page #selectAll,.billing-page #selectAllMobile{width:20px;height:20px;accent-color:var(--primary);flex-shrink:0;}
@media(max-width:767px){
  body.design-scope .billing-search-filters{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px!important;}
  body.design-scope .billing-search-filters>.input-group{grid-column:1/-1;min-width:0!important;}
  body.design-scope .billing-search-filters>.form-select{width:100%!important;}
  body.design-scope .billing-search-filters>.btn{min-height:44px;}
}
.client-directory-page{max-width:1400px;}
.client-directory-page .btn{min-height:44px;}
.client-directory-page .client-directory-filters{padding:16px;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
.client-directory-page .client-directory-table td{overflow-wrap:anywhere;white-space:normal;}
.client-directory-page .client-row-actions .btn{min-width:44px;display:inline-flex;align-items:center;justify-content:center;}
.client-directory-page #clientBulkBar{flex-wrap:wrap;}
.client-directory-page .client-directory-table input[type=checkbox]{width:20px;height:20px;}
.client-directory-page .client-directory-table .client-selection{vertical-align:middle;}
@media(max-width:767px){
  .client-directory-page .client-directory-filters>.input-group{max-width:none!important;width:100%;}
  .client-directory-page .client-directory-table,.client-directory-page .client-directory-table tbody{display:block;}
  .client-directory-page .client-directory-table thead{display:block;}
  .client-directory-page .client-directory-table thead tr{display:block;}
  .client-directory-page .client-directory-table thead th:not(:has(input)){display:none!important;}
  .client-directory-page .client-directory-table tbody tr{display:grid;grid-template-columns:44px minmax(0,1fr);padding:12px;gap:8px;}
  .client-directory-page .client-directory-table .client-selection{grid-column:1;grid-row:1;padding:12px 0!important;text-align:center;border:0;}
  .client-directory-page .client-directory-table .client-identity{grid-column:2;padding:8px 0!important;border:0;}
  .client-directory-page .client-directory-table tr:not(:has(.client-selection)) .client-identity{grid-column:1/-1;}
  .client-directory-page .client-directory-table .client-row-actions{grid-column:1/-1;padding:0!important;border:0;}
  .client-directory-page .client-row-actions>div{justify-content:flex-start!important;gap:8px!important;}
  .client-directory-page .client-row-actions .d-none.d-md-inline{display:inline!important;}
}
.document-directory-page .document-directory-search{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper-1);}
.document-directory-page .btn{min-height:44px;}
.document-directory-page .document-row-actions .btn{min-width:44px;display:inline-flex;align-items:center;justify-content:center;}
.document-directory-page .document-directory-card{padding:0;}
.document-directory-page .document-directory-table td{white-space:normal;overflow-wrap:anywhere;}
.document-directory-page .document-number>a{font-weight:650;}
.document-directory-page .document-directory-table input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary);}
.document-directory-page .document-status{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--paper-2);color:var(--ink-700);font-size:.8125rem;}
.document-directory-page .document-status-sent,.document-directory-page .document-status-confirmed{color:var(--primary);background:var(--primary-tint);border-color:var(--primary);}
.document-directory-page .document-status-paid{color:var(--success);}
.document-directory-page #bulkBar{flex-wrap:wrap;background:var(--paper-2)!important;border-color:var(--line)!important;}
.document-directory-page #bulkBar>span{color:var(--ink-900)!important;}
@media(max-width:767px){
  .document-directory-page .document-directory-search>.input-group{max-width:none!important;width:100%;}
  .document-directory-page .document-directory-table,.document-directory-page .document-directory-table tbody,.document-directory-page .document-directory-table thead{display:block;}
  .document-directory-page .document-directory-table thead th:not(:has(input)){display:none;}
  .document-directory-page .document-directory-table thead tr{display:block;}
  .document-directory-page .document-directory-table thead th:has(input){display:flex;align-items:center;width:100%!important;min-height:48px;}
  .document-directory-page .document-directory-table tbody tr{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:16px;border-bottom:1px solid var(--line);}
  .document-directory-page .document-directory-table tbody td{border:0;padding:0!important;}
  .document-directory-page .document-directory-table .bulk-cell{grid-row:1/3;grid-column:1;padding-block:8px!important;}
  .document-directory-page .document-directory-table .document-number,.document-directory-page .document-directory-table .document-client{grid-column:2;}
  .document-directory-page .document-directory-table td[data-label]:not(.document-number):not(.document-client){grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;align-items:center;}
  .document-directory-page .document-directory-table td[data-label]:not(.document-number):not(.document-client)::before{content:attr(data-label);color:var(--ink-600);font-weight:400;}
  .document-directory-page .document-row-actions{grid-column:1/-1;text-align:start!important;}
}
.bc-detail-page{max-width:1320px;}
.bc-detail-page .bc-detail-totals{width:min(100%,360px);}
.bc-detail-page .bc-detail-totals>div{gap:16px;flex-wrap:wrap;}
.bc-detail-page .bc-status-actions button:disabled{opacity:1;color:var(--primary)!important;background:var(--primary-tint)!important;border-color:var(--primary)!important;}
.bc-detail-page .bc-detail-lines td{overflow-wrap:anywhere;}
@media(max-width:767px){
  .bc-detail-page .bc-detail-lines,.bc-detail-page .bc-detail-lines tbody{display:block;}
  .bc-detail-page .bc-detail-lines thead{display:none;}
  .bc-detail-page .bc-detail-lines tbody tr{display:grid;grid-template-columns:minmax(0,1fr);padding-block:12px;gap:8px;}
  .bc-detail-page .bc-detail-lines td{display:flex;gap:16px;justify-content:space-between;text-align:end!important;padding:0!important;}
  .bc-detail-page .bc-detail-lines td:first-child{display:block;text-align:start!important;font-weight:650;padding-bottom:4px!important;}
  .bc-detail-page .bc-detail-lines td[data-label]:not(:first-child)::before{content:attr(data-label);color:var(--ink-600);font-weight:400;}
}
.bc-editor-page{max-width:1400px;}
.bc-editor-page .btn{min-height:44px;}
.bc-editor-page .lines-header-row{display:none;}
.bc-editor-page #linesContainer .invoice-line{display:grid;grid-template-columns:minmax(140px,2fr) minmax(80px,.7fr) minmax(100px,1fr) minmax(80px,.7fr) 44px;align-items:end!important;gap:12px;margin:0 0 16px!important;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);}
.bc-editor-page #linesContainer .invoice-line>div{display:block!important;width:auto;min-width:0;padding:0;margin:0;}
.bc-editor-page #linesContainer [data-label]::before{content:attr(data-label);display:block;color:var(--ink-700);font-size:.8125rem;margin-bottom:8px;}
.bc-editor-page #linesContainer input,.bc-editor-page #linesContainer select{width:100%!important;min-height:44px;}
.bc-editor-page #linesContainer button{width:44px;height:44px;}
.bc-editor-page #linesContainer button:disabled{opacity:.35;}
.bc-editor-page #linesContainer .invoice-line input{text-align:start!important;}
@media(max-width:1279px){
  .bc-editor-page #linesContainer .invoice-line{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bc-editor-page #linesContainer .invoice-line>div:first-child{grid-column:1/-1;}
  .bc-editor-page #linesContainer .invoice-line>div:last-child{grid-column:1/-1;text-align:end!important;}
}
@media(max-width:575px){
  .bc-editor-page .card{padding:16px!important;}
  .bc-editor-page #linesContainer .invoice-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .bc-editor-page #linesContainer .invoice-line>div:last-child{grid-column:auto;align-self:end;text-align:end!important;}
}
.touch-selection{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;margin:0;cursor:pointer;border-radius:8px;}
.touch-selection input{flex-shrink:0;margin:0!important;}
.touch-selection:focus-within{outline:2px solid var(--primary);outline-offset:2px;}
.touch-selection:hover{background:var(--primary-tint);}
.billing-section-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
.billing-section-tabs a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 14px;color:var(--ink-700)!important;text-decoration:none;font-weight:600;border:1px solid transparent;border-radius:8px;}
.billing-section-tabs a[aria-current]{background:var(--primary-tint);border-color:var(--primary);color:var(--ink-900)!important;}
.billing-section-tabs a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.company-settings-page{max-width:960px!important;}
.company-settings-section{border:1px solid var(--line);border-radius:12px;background:var(--paper-1);margin-bottom:12px;}
.company-settings-section>summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 16px;font-size:1rem;font-weight:600;cursor:pointer;color:var(--ink-900);list-style:none;}
.company-settings-section>summary::after{content:'+';margin-inline-start:auto;color:var(--ink-700);}
.company-settings-section[open]>summary::after{content:'−';}
.company-settings-section>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.company-settings-section-body{padding:0 16px 16px;}
.company-settings-page .company-settings-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.company-settings-page .company-settings-actions[hidden]{display:none;}
.company-settings-page .form-label,.company-settings-page .text-muted{color:var(--ink-600)!important;}
.company-settings-page .company-settings-save{position:sticky;bottom:calc(12px + var(--app-bottom-clearance,0px));z-index:10;display:flex;justify-content:flex-end;padding:12px;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
.company-settings-page .btn{--ui-petit:48px;}
@media(max-width:699.98px){
  .chantier-summary-grid{grid-template-columns:minmax(0,1fr);}
  .billing-section-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .billing-section-tabs a{padding:8px;text-align:center;font-size:.85rem;}
  .formation-learners-header{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch!important;gap:10px!important;}
  .formation-learners-header h2{align-self:center;min-width:0;font-size:1.35rem;}
  .formation-learners-header .badge{align-self:center;justify-self:end;white-space:normal;text-align:center;}
  .formation-learners-header .formation-learners-primary{grid-column:1/-1;margin-inline-start:0!important;}
  .formation-learners-header .btn{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;white-space:normal;}
  .formation-learners-table td[data-record-field="avatar"]{display:none!important;}
}
@media(max-width:575.98px){
  .ux-record-list tbody tr{grid-template-columns:minmax(0,1fr);}
  .formation-learners-table tbody tr{grid-template-columns:repeat(2,minmax(0,1fr));}
  .formation-learners-table td[data-record-field="identity"]{grid-column:1/-1;}
  .formation-learners-table td[data-record-field="actions"]{align-items:flex-end;grid-column:2;justify-content:flex-end;}
  .formation-learners-table .formation-learner-edit{align-items:center;border:1px solid var(--line);border-radius:10px;display:inline-flex;height:48px;justify-content:center;width:48px;}
  .formation-enrollments-table tbody tr,
  .formation-hours-table tbody tr{grid-template-columns:repeat(2,minmax(0,1fr));}
  .formation-enrollments-table td[data-record-field="identity"],
  .formation-hours-table td[data-record-field="identity"],
  .formation-hours-table .formation-hours-rate{grid-column:1/-1;}
  .formation-hours-table .formation-hours-rate form{display:grid!important;grid-template-columns:minmax(0,1fr) 48px;width:100%;}
  .formation-hours-table .formation-hours-rate input{width:100%!important;}
  .formation-hours-table .formation-hours-save{height:48px!important;min-height:48px!important;min-width:48px;}
  .formation-enrollments-table td[data-record-field="identity"] a{align-items:center;display:flex;min-height:44px;}
  .company-settings-page>.card{padding:12px!important;}
  body.design-scope.accounting-scope .accounting-balance-table tbody tr,
  body.design-scope.accounting-scope .accounting-balance-table tfoot tr{grid-template-columns:minmax(0,1fr);}
  .etat104-table tfoot tr{grid-template-columns:minmax(0,1fr);}
}

/* ── UX Codex lot B (fournisseurs, achats) ──────────────────────────────────
   Repris de la session Codex codex/full-ux-audit (17/09, commit 18823373),
   blocs extraits pour les DIX écrans du lot : annuaire fournisseurs / achats,
   fiche fournisseur, éditeur fournisseur, dettes, fiche d'achat, éditeur
   d'achat, scan de facture, saisie de registre.

   Deux écarts assumés par rapport au fichier Codex :
   · le jeton --ui-petit y vaut 40 px hors mobile ; Codex le remonte à 48 px
     sur CES pages (cible au doigt). On garde ce relèvement, page par page —
     jamais en global, pour ne pas déplacer les barres de filtres du reste ;
   · le bloc générique `.detail-data-table` de Codex est ici SCOPÉ à
     .supplier-debts-page. Cinq autres gabarits (compta, formation, pointage,
     facturation) portent déjà cette classe sans le bloc : le poser en global
     changerait leur rendu mobile, ce qui n'est pas ce lot.
   ────────────────────────────────────────────────────────────────────────── */

/* Barre de retour : un vrai bouton nommé, pas un chevron de 16 px. */
.stock-return-bar{margin-bottom:16px;}
body.design-scope .stock-return-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:auto!important;min-height:48px!important;padding:10px 16px;max-width:100%;font-size:16px;font-weight:600;line-height:1.4;text-decoration:none;border:1px solid var(--line);border-radius:10px;background:var(--paper-1);color:var(--ink-900);}
body.design-scope .stock-return-link:hover{background:var(--paper-2,var(--paper-1));color:var(--ink-900);border-color:var(--ink-500);}
body.design-scope .stock-return-link:focus-visible{outline:3px solid var(--primary);outline-offset:3px;}
[dir=rtl] .stock-return-link .bi-arrow-left{transform:rotate(180deg);}

/* Annuaire « Fournisseurs & Achats » : tableau au bureau, cartes au doigt. */
.purchase-directory-page .btn{--ui-petit:48px;min-height:48px;}
.purchase-directory-tabs{flex-wrap:wrap;}
.purchase-directory-tabs a{display:inline-flex;align-items:center;min-height:48px;}

/* Onglets de page du module Pointage (25/09) — MÊME composant que la barre
   « Fournisseurs / Bons de commande », mais peint en JETONS : les gabarits de
   pointage n'écrivent aucune couleur en dur (une société au thème sombre
   héritait sinon d'un vert de marque illisible). Et la barre DÉFILE au lieu
   de revenir à la ligne : les six onglets de Réglages ne tiennent sur aucun
   téléphone, et une barre qui déborde coupe le dernier sans le dire. */
.pointage-onglets{border-bottom:2px solid var(--line);flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.pointage-onglets::-webkit-scrollbar{display:none;height:0;width:0;}
.pointage-onglets .pt-onglet{align-items:center;border-bottom:3px solid transparent;
  color:var(--ink-500);display:inline-flex;flex:0 0 auto;font-size:.92rem;font-weight:600;
  margin-bottom:-2px;min-height:48px;padding:10px 20px;text-decoration:none;white-space:nowrap;}
.pointage-onglets .pt-onglet:hover{color:var(--ink-900);}
.pointage-onglets .pt-onglet.is-actif{border-bottom-color:var(--primary);color:var(--primary);}
.pointage-onglets .pt-onglet-num{background:var(--paper-2);border-radius:10px;color:var(--ink-600);
  font-size:.72rem;margin-inline-start:4px;padding:1px 8px;}
.pointage-onglets .pt-onglet.is-actif .pt-onglet-num{background:var(--primary-tint);color:var(--primary);}
/* Pastille de barre latérale SANS style en ligne (Pointage ▸ Aujourd'hui) :
   les anciennes pastilles « Bêta » portent le leur en attribut et gagnent. */
.sidebar-link .nav-badge{background:var(--primary);border-radius:var(--radius-pill,999px);
  color:var(--on-primary,#ffffff);font-size:.66rem;font-weight:800;
  margin-inline-start:6px;padding:0 6px;}
.purchase-directory-page .purchase-payment-filters .btn{min-height:48px;}
.purchase-directory-page td{overflow-wrap:anywhere;}
@media(max-width:767px){
  body.design-scope .purchase-directory-page .card.p-0{background:transparent !important;border:0 !important;box-shadow:none;}
  .purchase-directory-page .table-responsive{overflow:visible;}
  .purchase-directory-page table,.purchase-directory-page tbody{display:block;width:100%;}
  .purchase-directory-page thead{display:none;}
  body.design-scope .purchase-directory-page .table-responsive>table.table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;margin:0 0 12px;border:1px solid var(--line) !important;border-radius:14px;background:var(--paper-1);}
  body.design-scope .purchase-directory-page tbody td{display:block;padding:0 !important;border:0 !important;text-align:start !important;min-width:0;background:transparent !important;}
  .purchase-directory-page tbody td::before{content:attr(data-label);display:block;color:var(--ink-500);font-size:.75rem;font-weight:600;margin-bottom:4px;}
  .purchase-directory-page tbody td:first-child,.purchase-directory-page tbody td:last-child{grid-column:1/-1;}
  .purchase-directory-page tbody td:last-child::before{display:none;}
  .purchase-directory-page tbody td:last-child .btn{width:auto;min-width:48px;}
  .purchase-directory-actions{width:100%;}
  .purchase-directory-actions .btn{flex:1;white-space:normal;}
}

/* Fiche et éditeur fournisseur. */
.supplier-editor-page summary{min-height:48px;align-content:center;}
.supplier-editor-page .form-label{font-size:.875rem !important;}
.supplier-editor-page .btn,.supplier-detail-page .btn{--ui-petit:48px;min-height:48px;}
.supplier-detail-page .supplier-contact-link{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;max-width:100%;color:var(--primary);}
.supplier-detail-page h2{overflow-wrap:anywhere;}

/* Dettes fournisseurs : l'en-tête de carte ne comprime plus le montant. */
.supplier-debt-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;}
.supplier-debt-summary>a{grid-column:1/-1;}
.supplier-debt-summary>.ms-3{margin-inline-start:0!important;}
.supplier-debts-page .btn,.supplier-debts-page .stock-return-link{min-height:48px;}
@media(max-width:575.98px){
  body.design-scope .supplier-debts-page .detail-data-table{display:block;min-width:0!important;}
  body.design-scope .supplier-debts-page .detail-data-table thead{display:none;}
  body.design-scope .supplier-debts-page .detail-data-table tbody{display:grid;gap:12px;}
  body.design-scope .supplier-debts-page .detail-data-table tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;padding:16px!important;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
  body.design-scope .supplier-debts-page .detail-data-table tbody td{display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:8px;min-width:0;width:100%!important;padding:6px 0!important;border:0!important;text-align:start!important;word-break:normal;overflow-wrap:break-word;}
  body.design-scope .supplier-debts-page .detail-data-table td[data-label]::before{content:attr(data-label);font-weight:600;color:var(--ink-500);}
}

/* Fiche d'achat : les lignes deviennent des cartes sous 768 px. */
.purchase-detail-page .btn{--ui-petit:48px;min-height:48px;}
.purchase-lines-card{padding:0;overflow:hidden;}
.purchase-lines-scroll{overflow-x:auto;}
@media screen and (max-width:767.98px){
  body.design-scope .purchase-detail-lines{display:block;}
  body.design-scope .purchase-detail-lines thead{display:none;}
  body.design-scope .purchase-detail-lines tbody{display:grid;gap:12px;}
  body.design-scope .purchase-detail-lines tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px;padding:16px;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
  body.design-scope .purchase-detail-lines tbody td{display:flex!important;justify-content:space-between;gap:12px;border:0!important;padding:5px 0!important;min-width:0;width:100%!important;text-align:start!important;word-break:normal;overflow-wrap:normal;}
  body.design-scope .purchase-detail-lines tbody td:first-child{justify-content:flex-start;flex-wrap:wrap;}
  body.design-scope .purchase-detail-lines td[data-label]::before{content:attr(data-label);color:var(--ink-500);font-weight:600;flex-shrink:0;}
  body.design-scope .purchase-detail-lines tfoot{display:block;}
  body.design-scope .purchase-detail-lines tfoot tr{display:flex!important;justify-content:space-between;padding:12px!important;}
  body.design-scope .purchase-detail-lines tfoot td{width:auto!important;}
  .purchase-payment-form > div{width:100%;}
}

/* Éditeur d'achat. La grille Codex comptait CINQ colonnes ; la ligne d'achat
   en porte SEPT depuis le 24/09 (unité facturée, quantité entrant en stock,
   calcul L×l) — la grille suit le gabarit, pas l'inverse. */
.purchase-editor-page .line-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.8fr) minmax(0,1.2fr) minmax(0,1fr) 48px;gap:12px;margin:0 0 16px;padding:16px 0;border-bottom:1px solid var(--line);}
.purchase-editor-page .line-row>div{width:auto;padding:0;min-width:0;}
.purchase-line-field::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:600;color:var(--ink-500);margin-bottom:6px;}
.purchase-editor-page .purchase-line-remove{align-self:end;}
body.design-scope .purchase-editor-page .line-row .form-control,body.design-scope .purchase-editor-page .line-row .form-select,body.design-scope .purchase-editor-page .btn{min-height:48px!important;}
body.design-scope .purchase-editor-page .line-row .po-dims .form-control{min-height:44px!important;}
@media(max-width:991px){
  .purchase-editor-page .line-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .purchase-editor-page .line-row>div:first-child{grid-column:1/-1;}
  .purchase-editor-page .purchase-line-remove{grid-column:3;justify-self:end;}
}
@media(max-width:575px){
  .purchase-editor-page .line-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .purchase-editor-page .purchase-line-remove{grid-column:2;}
  .purchase-editor-page .remove-line{min-width:48px;}
}

/* Scan de facture : le tableau de contrôle passe en cartes au doigt. */
.purchase-scan-page .btn,.purchase-scan-page .stock-return-link{min-height:48px;}
@media(max-width:575.98px){
  body.design-scope .purchase-scan-lines{display:block;min-width:0!important;}
  body.design-scope .purchase-scan-lines thead{display:none;}
  body.design-scope .purchase-scan-lines tbody{display:grid;gap:12px;}
  body.design-scope .purchase-scan-lines tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px;padding:16px!important;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
  body.design-scope .purchase-scan-lines tbody td{display:block!important;width:100%!important;padding:0!important;border:0!important;}
  body.design-scope .purchase-scan-lines td[data-label]::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:600;color:var(--ink-500);margin-bottom:6px;}
  body.design-scope .purchase-scan-lines .form-control{min-height:48px!important;}
}

/* Saisie de registre : la case à cocher garde une cible de 44 px. */
.register-entry-page .btn,.register-entry-page .stock-return-link{min-height:48px;}
.register-entry-page .form-control,.register-entry-page .form-select{min-height:48px;}
/* ══════════════════════════════════════════════════════════════════════════
   UX Codex lot C (inventaires, dépôts, produits)

   Repris de la session Codex (codex/full-ux-audit, 17/09), lot du 24/09.
   Trois règles de reprise :
   · les jetons Codex (--ink-*, --line, --paper-*) existent chez nous dans
     theme.css — ils sont gardés tels quels ;
   · le préfixe `body.design-scope` est retiré : ces écrans se voient aussi
     sur le poste hors-ligne, où la classe n'est pas toujours posée ;
   · --ui-petit vaut 40 px au bureau (socle 11/09). Sur les écrans de ce lot
     qui se tiennent DEBOUT, dans un dépôt ou à un guichet, il est relevé
     localement à 44/48 px — jamais globalement.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Retour nommé : une flèche nue ne dit pas où elle ramène ────────────── */
.stock-return-bar{margin-bottom:16px;}
.stock-return-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:10px 16px;max-width:100%;font-size:1rem;font-weight:600;line-height:1.4;
  text-decoration:none;border:1px solid var(--line);border-radius:10px;
  background:var(--paper-1);color:var(--ink-900);}
.stock-return-link:hover{background:var(--paper-2,var(--paper-1));color:var(--ink-900);border-color:var(--ink-500);}
.stock-return-link:focus-visible{outline:3px solid var(--primary);outline-offset:3px;}
[dir=rtl] .stock-return-link .bi-arrow-left{transform:rotate(180deg);}

/* ── Case à cocher / bouton radio : la cible du doigt, pas celle du curseur ─ */
.touch-option{display:inline-flex!important;align-items:center;gap:8px;min-width:48px;min-height:48px;cursor:pointer;}
.touch-option input{flex-shrink:0;}
.touch-option:focus-within{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;}

/* ── Dépôts ─────────────────────────────────────────────────────────────── */
.depot-detail-page .detail-data-table [dir="ltr"]{white-space:nowrap;}
@media(max-width:767.98px){
  /* La table du dépôt se replie en cartes : l'intitulé de colonne passe DANS
     la cellule (data-label), sinon un téléphone ne sait plus ce qu'il lit. */
  .depot-detail-page .detail-data-table{display:block;min-width:0!important;}
  .depot-detail-page .detail-data-table thead{display:none;}
  .depot-detail-page .detail-data-table tbody{display:grid;gap:12px;}
  .depot-detail-page .detail-data-table tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    padding:16px!important;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
  .depot-detail-page .detail-data-table tbody td{display:flex!important;justify-content:space-between;
    flex-wrap:wrap;gap:8px;min-width:0;width:100%!important;padding:6px 0!important;border:0!important;
    text-align:start!important;overflow-wrap:break-word;}
  .depot-detail-page .detail-data-table td[data-label]::before{content:attr(data-label);font-weight:600;color:var(--ink-500);}
  .depot-list-page tbody .btn{--ui-petit:44px;min-height:44px;min-width:44px;
    display:inline-flex;align-items:center;justify-content:center;}
  /* La LISTE des dépôts se replie comme la fiche (mesure iPhone 25/09 :
     478 px de tableau dans 390, actions de ligne à +93 px du bord, nom de
     dépôt rendu sur 26 px de large et 201 de haut). Même patron : une
     carte par ligne, l'intitulé de colonne DANS la cellule. */
  .depot-list-page .depot-table{display:block;min-width:0!important;}
  .depot-list-page .depot-table thead{display:none;}
  .depot-list-page .depot-table tbody{display:grid;gap:12px;padding:12px;}
  .depot-list-page .depot-table tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    padding:16px!important;background:var(--paper-1);border:1px solid var(--line)!important;
    border-radius:12px;}
  .depot-list-page .depot-table tbody td{display:flex!important;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:8px;min-width:0;width:100%!important;
    padding:6px 0!important;border:0!important;text-align:start!important;
    white-space:normal!important;word-break:normal;overflow-wrap:break-word;}
  .depot-list-page .depot-table td[data-label]::before{content:attr(data-label);
    font-weight:600;color:var(--ink-500);}
  .depot-list-page .depot-table .depot-nom{font-size:1rem;}
  .depot-list-page .depot-table .depot-actions{justify-content:flex-end;gap:10px;
    margin-top:6px;padding-top:12px!important;border-top:1px solid var(--line)!important;}
}

/* ── Feuille de comptage : colonnes alignées au bureau, cartes au doigt ──── */
.inventory-count-page{--ui-petit:44px;}
.inventory-count-row,.inventory-count-head{display:grid;
  grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr) minmax(0,1.3fr);
  gap:12px;align-items:center;}
.inventory-count-page.inventory-count-aveugle .inventory-count-row,
.inventory-count-page.inventory-count-aveugle .inventory-count-head{
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr);}
.inventory-count-row>div{min-width:0!important;}
.inventory-count-row input,.inventory-count-row select{min-height:44px;}
.inventory-count-row .form-control{width:100%;}
@media(max-width:767.98px){
  .inventory-count-page .inventory-count-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .inventory-count-page.inventory-count-aveugle .inventory-count-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inventory-count-page .inventory-count-row .inventory-product,
  .inventory-count-page .inventory-count-row .inventory-note{grid-column:1/-1;}
  .inventory-count-page .inventory-count-row .d-md-none{font-size:.75rem!important;margin-top:4px;}
}

/* ── Périmètre d'un inventaire : une ligne = une cible ──────────────────── */
.inventory-create-page .inventory-scope-option{display:flex;align-items:center;gap:8px;
  min-height:44px;padding:4px 2px;cursor:pointer;}
.inventory-create-page .inventory-scope-option input{flex-shrink:0;}
.inventory-create-page .inventory-scope-option:focus-within{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;}

/* ── Fiche produit ──────────────────────────────────────────────────────── */
.product-detail-page{max-width:1240px;}
.product-detail-page .product-detail-actions .btn{--ui-petit:48px;min-height:48px;gap:8px;}
.product-detail-page .product-detail-actions .dropdown-menu{min-width:240px;padding:8px;}
.product-detail-page .product-detail-actions .dropdown-menu .btn{width:100%;justify-content:flex-start;
  text-align:start;border:0;background:transparent;color:var(--ink-900);white-space:normal;}
.product-detail-page .product-detail-actions .dropdown-item{min-height:48px;display:flex;align-items:center;gap:8px;white-space:normal;}
.product-detail-page .product-summary .card{padding:24px!important;}
.product-detail-page .product-stock-notice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:16px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper-2,var(--paper-1));color:var(--ink-900);font-size:.875rem;font-weight:600;}
.product-detail-page .product-price-hero{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--line);}
.product-detail-page .product-price-hero strong{font-size:2rem;color:#15803d;font-variant-numeric:tabular-nums;}
.product-detail-page .product-price-hero small{font-size:1rem;font-weight:500;}
.product-detail-page .product-price-breakdown{padding-top:8px;}
.product-detail-page .product-price-breakdown dd{font-variant-numeric:tabular-nums;}
@media(max-width:767.98px){
  .product-detail-page .product-detail-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr;}
  .product-detail-page .product-detail-actions>.dropdown{grid-column:1/-1;}
  .product-detail-page .product-detail-actions>.dropdown>.btn{width:100%;}
  .product-detail-page .product-summary .card{padding:18px!important;}
  /* Le journal des mouvements se replie en cartes, intitulé de colonne en tête. */
  .product-detail-page #fiche-mouvements table{display:block;min-width:0!important;}
  .product-detail-page #fiche-mouvements thead{display:none;}
  .product-detail-page #fiche-mouvements tbody{display:grid;gap:12px;padding:12px;}
  .product-detail-page #fiche-mouvements tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    padding:14px!important;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
  .product-detail-page #fiche-mouvements tbody td{display:block!important;width:100%!important;
    padding:4px 0!important;border:0!important;text-align:start!important;overflow-wrap:break-word;}
  .product-detail-page #fiche-mouvements td[data-label]::before{content:attr(data-label);display:block;
    font-size:.75rem;font-weight:600;color:var(--ink-500);margin-bottom:3px;}
}

/* ── Formulaire produit et guichet de scan : on y saisit debout ─────────── */
.product-form-page{--ui-petit:44px;}
.delivery-scan-page{--ui-petit:48px;}
/* ── UX Codex lot A (stock) ─────────────────────────────────────────────────
   Repris de la session Codex du 17/09 (commit 18823373, static/css/ui.css),
   limité aux écrans du lot Stock. Le partial erp/_stock_return.html n'étant
   inclus nulle part sur master, ses règles (.stock-return-*) sont laissées
   de côté avec lui ; record-navigation n'est pas utilisé par ces gabarits.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Stock : catalogue opérationnel, pas une succession de boîtes ─────── */
body.design-scope .stock-page{
  max-width:1540px;
}
body.design-scope:has(.stock-page) #yacine-root{display:none;}
body.design-scope .stock-page .stock-overview{
  background:
    radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--primary) 20%,transparent),transparent 34%),
    linear-gradient(145deg,color-mix(in srgb,var(--primary) 9%,var(--paper-1)),var(--paper-1) 58%);
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));
  border-radius:22px;
  box-shadow:0 18px 44px rgba(15,23,42,.08);
  margin-bottom:22px;
  overflow:visible;
  padding:26px;
}
body.design-scope .stock-page .stock-header{
  align-items:center !important;
  border-bottom:0;
  margin-bottom:24px !important;
  padding-bottom:0;
}
body.design-scope .stock-page .stock-heading-kicker{
  align-items:center;
  color:var(--primary);
  display:inline-flex;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  margin-bottom:7px;
  text-transform:uppercase;
}
body.design-scope .stock-page .stock-heading h2{
  color:var(--ink-900);
  font-size:clamp(1.75rem,2.5vw,2.35rem);
  letter-spacing:-.045em;
}
body.design-scope .stock-page .stock-heading h2 i{display:none;}
body.design-scope .stock-page .stock-heading p{
  color:var(--ink-500) !important;
  font-size:.95rem !important;
  margin-top:6px;
}
body.design-scope .stock-page .stock-actions > .btn,
body.design-scope .stock-page .stock-actions > .dropdown > .btn{
  min-height:44px;
  padding-inline:16px;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}
body.design-scope .stock-page .stock-plan{
  background:color-mix(in srgb,var(--paper-1) 82%,transparent) !important;
  border-color:color-mix(in srgb,var(--primary) 15%,var(--line)) !important;
  border-radius:13px !important;
  box-shadow:none;
  margin-bottom:0 !important;
  padding:13px 15px !important;
}
body.design-scope .stock-page .stock-plan-meta{font-size:.88rem !important;}
body.design-scope .stock-page .stock-plan-progress{
  background:var(--paper-3) !important;
  border-radius:999px !important;
  height:7px !important;
}
body.design-scope .stock-page .stock-kpis{margin-bottom:16px !important;}
body.design-scope .stock-page .stock-kpi{
  align-items:center;
  background:color-mix(in srgb,var(--paper-1) 88%,transparent) !important;
  border-color:color-mix(in srgb,var(--primary) 14%,var(--line)) !important;
  border-radius:16px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055);
  display:flex !important;
  gap:14px;
  min-height:104px;
  padding:16px !important;
  position:relative;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
body.design-scope .stock-page .stock-kpi:hover{
  box-shadow:0 10px 24px rgba(15,23,42,.075);
  transform:translateY(-1px);
}
body.design-scope .stock-page .stock-kpi-icon{
  align-items:center;
  background:color-mix(in srgb,var(--primary) 12%,var(--paper-1));
  border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));
  border-radius:14px;
  color:var(--primary);
  display:flex;
  flex:0 0 48px;
  font-size:1.25rem;
  height:48px;
  justify-content:center;
}
body.design-scope .stock-page .stock-kpi-content{min-width:0;}
body.design-scope .stock-page .stock-kpi-content > div:first-child{
  color:var(--ink-500) !important;
  font-size:.68rem !important;
  font-weight:800;
  letter-spacing:.08em !important;
}
body.design-scope .stock-page .stock-kpi-content > div:nth-child(2){
  color:var(--ink-900) !important;
  font-size:1.7rem !important;
  line-height:1.15;
  margin-top:5px;
}
body.design-scope .stock-page .stock-kpi-note{margin-top:4px;}
body.design-scope .stock-page .stock-kpi-alert{
  border-color:color-mix(in srgb,var(--warning) 48%,var(--line)) !important;
}
body.design-scope .stock-page .stock-kpi-alert .stock-kpi-icon{
  background:color-mix(in srgb,var(--warning) 12%,var(--paper-1));
  border-color:color-mix(in srgb,var(--warning) 25%,var(--line));
  color:var(--warning);
}
body.design-scope .stock-page .stock-kpi-alert .stock-kpi-content > div:first-child,
body.design-scope .stock-page .stock-kpi-alert .stock-kpi-content > div:nth-child(2){color:var(--warning) !important;}
body.design-scope .stock-page .stock-filters{
  background:var(--paper-1);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 5px 16px rgba(15,23,42,.035);
  display:grid;
  gap:10px;
  grid-template-areas:
    "search category add"
    "tabs tabs low";
  grid-template-columns:minmax(220px,1fr) minmax(172px,200px) max-content;
  margin-bottom:18px !important;
  padding:12px;
}
body.design-scope .stock-page .stock-search{grid-area:search;max-width:none !important;min-width:0 !important;}
body.design-scope .stock-page .stock-category{grid-area:category;max-width:none !important;min-width:0;}
body.design-scope .stock-page .stock-category-add{grid-area:add;white-space:nowrap;}
body.design-scope .stock-page .stock-tabs{grid-area:tabs;justify-self:start;}
body.design-scope .stock-page #stock-filtre-bas{grid-area:low;justify-self:start;white-space:nowrap;}
body.design-scope .stock-page .stock-tabs .btn{min-width:108px;}
body.design-scope .stock-page .stock-catalogue{
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 10px 26px rgba(15,23,42,.055);
  overflow:visible;
}
body.design-scope .stock-page .stock-table thead th{
  background:var(--paper-2);
  border-bottom-color:var(--line);
  color:var(--ink-500);
  padding-block:11px;
}
body.design-scope .stock-page .stock-table tbody tr{transition:background-color .12s ease;}
body.design-scope .stock-page .stock-table tbody tr:hover{background:var(--paper-2);}
body.design-scope .stock-page .stock-mobile-item{border-bottom-color:var(--line) !important;}

@media(max-width:860px){
  body.design-scope .stock-page .stock-filters{
    grid-template-areas:
      "search search"
      "category add"
      "tabs tabs"
      "low low";
    grid-template-columns:minmax(0,1fr) max-content;
  }
  body.design-scope .stock-page .stock-tabs{justify-self:stretch;display:flex;}
  body.design-scope .stock-page .stock-tabs .btn{flex:1 1 0;min-width:0;}
  body.design-scope .stock-page #stock-filtre-bas{justify-self:stretch;}
}
/* Boss 25/09, mesure iPhone 13 : à 390 px les cinq onglets restaient soudés
   sur une seule ligne — quatre boutons de 83 px, « Produits » rendu
   « roduits », la pastille de compte débordant sur le bouton voisin, et
   « Archivés » purement hors du viewport (la page ne défile pas
   latéralement). Sous 768 px la rangée passe à la ligne : chaque onglet
   garde la largeur de son libellé (min-width:max-content) et le groupe
   cesse d'être un bloc soudé — coins et gouttière propres à chacun. */
@media(max-width:767.98px){
  body.design-scope .stock-page .stock-tabs{flex-wrap:wrap;gap:6px;}
  body.design-scope .stock-page .stock-tabs > .btn{flex:1 1 auto;min-width:max-content;
    white-space:nowrap;border-radius:10px!important;margin:0!important;padding-inline:12px;}
}
@media(max-width:991.98px){
  body.design-scope .stock-page .stock-kpi-icon{display:none;}
  body.design-scope .stock-page .stock-kpi-value .stock-kpi-content > div:nth-child(2){font-size:1.2rem!important;white-space:nowrap;}
}
@media(max-width:575.98px){
  body.design-scope .stock-page{padding-top:18px !important;}
  body.design-scope .stock-page .stock-overview{border-radius:18px;padding:14px;}
  body.design-scope .stock-page .stock-header{
    align-items:stretch !important;
    gap:12px !important;
    padding-bottom:0;
    margin-bottom:16px!important;
  }
  body.design-scope .stock-page .stock-heading h2{font-size:1.4rem;}
  body.design-scope .stock-page .stock-actions{display:grid !important;grid-template-columns:1fr 1fr;width:100%;}
  body.design-scope .stock-page .stock-actions > :first-child{grid-column:1 / -1;}
  body.design-scope .stock-page .stock-actions > .btn,
  body.design-scope .stock-page .stock-actions > .dropdown > .btn{justify-content:center;width:100%;}
  body.design-scope .stock-page .stock-plan{padding:10px !important;}
  body.design-scope .stock-page .stock-kpis{--bs-gutter-x:10px;--bs-gutter-y:10px;}
  body.design-scope .stock-page .stock-kpi{align-items:center;flex-direction:row;gap:8px;min-height:68px;padding:10px !important;}
  body.design-scope .stock-page .stock-kpi-icon{display:none;}
  body.design-scope .stock-page .stock-kpi-content>div:first-child{letter-spacing:0!important;}
  body.design-scope .stock-page .stock-kpi-content > div:nth-child(2){font-size:1.5rem !important;}
  body.design-scope .stock-page .stock-kpi-value .stock-kpi-content > div:nth-child(2){font-size:1.2rem !important;}
  body.design-scope .stock-page .stock-filters{border-radius:12px;padding:10px;}
  body.design-scope .stock-page .stock-actions .btn,body.design-scope .stock-page .stock-filters .btn{min-height:48px!important;height:auto!important;}
  /* Garde d'alignement (gate Mac 25/09) : le sélecteur de catégorie faisait 44 px à côté d'un
     bouton de 48 — même hauteur pour toute la rangée des filtres. */
  body.design-scope .stock-page .stock-filters .form-select,body.design-scope .stock-page .stock-filters .form-control{min-height:48px!important;height:48px!important;}
  body.design-scope .stock-page .stock-catalogue{border-radius:14px !important;}
}
@media(max-width:575.98px){
  body.design-scope .stock-page .stock-kpis > .col-4{
    flex:0 0 50%;
    width:50%;
  }
  body.design-scope .stock-page .stock-kpis > .col-4:nth-child(3){
    flex-basis:100%;
    width:100%;
  }
  body.design-scope .stock-page .stock-kpi-value{min-height:64px;}
  body.design-scope .stock-page .stock-kpi-value .stock-kpi-content{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;}
}

/* Mouvement de stock : le choix du type est un groupe de radios tactile,
   l'historique se replie. */
.stock-move-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.stock-move-types .move-type-btn{min-height:44px;display:flex;align-items:center;justify-content:center;}
.stock-move-types .move-type-radio:focus-visible + .move-type-btn{outline:3px solid var(--primary);outline-offset:2px;}
.stock-movement-history summary{min-height:44px;padding:12px 0;cursor:pointer;font-weight:600;color:var(--ink-900);}

/* Étiquettes QR : barre d'outils, récapitulatif vivant, cibles 44 px. */
.stock-labels-page .stock-label-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px;}
.stock-labels-page .stock-label-toolbar input{flex:1 1 240px;}
.stock-labels-page tr[hidden]{display:none!important;}
.stock-labels-page .btn,.stock-labels-page input[type=number]{min-height:44px;}
.stock-labels-page .stock-label-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper-1);}
.stock-labels-page .stock-label-summary dt{font-size:.8rem;font-weight:500;color:var(--ink-600);}
.stock-labels-page .stock-label-summary dd{font-size:1.2rem;font-weight:700;margin:4px 0 0;}
.stock-labels-page label:has([name=format]:checked){border-color:var(--primary)!important;background:var(--primary-tint);}
.stock-labels-page label:has([name=format]):focus-within{outline:2px solid var(--primary);outline-offset:3px;}
.stock-labels-page .row-sel{width:20px;height:20px;cursor:pointer;}

/* Lignes et cartes ouvrent la fiche au toucher ; la case de sélection et les
   boutons de ligne gardent 44 px même quand --ui-petit vaut 40 px (le piège
   relevé par la session Codex : le jeton commun rabaissait les boutons). */
.stock-page .stock-touch-row{cursor:pointer;}
.stock-page .stock-touch-row:focus-within{outline:2px solid var(--primary);outline-offset:-2px;}
.stock-page .stock-selection-target{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer;margin:0;}
.stock-page .stock-selection-target input{width:20px;height:20px;cursor:pointer;}
.stock-page .stock-table tbody .btn,.stock-page .stock-mobile-item .btn{--ui-petit:44px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;}
.stock-page .stock-table .dropdown-item{min-height:44px;display:flex;align-items:center;}
.touch-selection{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;margin:0;cursor:pointer;border-radius:8px;}
.touch-selection input{flex-shrink:0;margin:0!important;}
.touch-selection:focus-within{outline:2px solid var(--primary);outline-offset:2px;}
.touch-selection:hover{background:var(--primary-tint);}

/* À commander : la table devient des cartes sous 767 px. */
.stock-reorder-page{padding-bottom:100px!important;}
body.design-scope .stock-reorder-page .form-control,body.design-scope .stock-reorder-page button[type=submit]{min-height:48px!important;}
@media(max-width:767px){
  .stock-reorder-table,.stock-reorder-table tbody{display:block;width:100%;}
  .stock-reorder-table thead{display:none;}
  .stock-reorder-table .stock-reorder-record{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;border-bottom:1px solid var(--line);}
  .stock-reorder-table .stock-reorder-record td{display:block;padding:0!important;min-width:0;width:auto!important;border:0;text-align:start!important;white-space:normal!important;overflow-wrap:anywhere;}
  .stock-reorder-table .stock-reorder-name{grid-row:1;grid-column:1/-1;padding-inline-end:60px!important;font-size:1rem;min-height:48px;}
  .stock-reorder-table .stock-reorder-selection{grid-row:1;grid-column:2;justify-self:end;z-index:1;}
  .stock-reorder-table .stock-reorder-supplier{grid-column:1/-1;}
  .stock-reorder-table td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;color:var(--ink-500);margin-bottom:4px;}
  .stock-reorder-table .stock-reorder-record:hover,.stock-reorder-table .stock-reorder-record:focus-within{background:var(--primary-tint);}
  .stock-reorder-table .stock-reorder-record>td{box-shadow:none!important;}
}

/* Tables « fiche » des deux écrans de ce lot : en dessous de 768 px chaque
   ligne devient une carte et chaque cellule porte son en-tête (data-label).
   Volontairement limité à ce lot — la règle générique appartient au socle. */
@media screen and (max-width:767.98px){
  body.design-scope :is(.stock-move-page,.stock-labels-page) .detail-data-table{display:block;min-width:0!important;}
  body.design-scope :is(.stock-move-page,.stock-labels-page) .detail-data-table thead{display:none;}
  body.design-scope :is(.stock-move-page,.stock-labels-page) .detail-data-table tbody{display:grid;gap:12px;}
  body.design-scope :is(.stock-move-page,.stock-labels-page) .detail-data-table tbody tr:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr)!important;padding:16px!important;background:var(--paper-1);border:1px solid var(--line);border-radius:12px;}
  body.design-scope :is(.stock-move-page,.stock-labels-page) .detail-data-table tbody td{position:static!important;display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:8px;min-width:0;width:100%!important;padding:6px 0!important;border:0!important;word-break:normal;overflow-wrap:break-word;}
  body.design-scope :is(.stock-move-page,.stock-labels-page) .detail-data-table td[data-label]::before{content:attr(data-label);font-weight:600;color:var(--ink-500);}
  body.design-scope :is(.stock-move-page,.stock-labels-page) .card.p-0>.table-responsive>table.detail-data-table tbody td:first-child{position:static!important;inset:auto!important;width:100%!important;padding:6px 0!important;}
}

/* Saisie HT ou TTC par ligne (24/09) : le prix calculé se grise, seul le prix tapé est vif. */
.invoice-line .prix-calcule{background:#f1f5f9!important;color:#64748b!important;}
/* Audit 24/09 soir : la règle body.design-scope .invoice-form-card .form-control (0,3,1)
   battait la précédente (0,2,0) — le champ calculé restait BLANC, identique au champ
   saisissable, et le gérant tapait dans un readonly muet. Même spécificité + 1. */
body.design-scope .invoice-form-card .invoice-line .prix-calcule,
body.design-scope .invoice-details-card .invoice-line .prix-calcule{background:var(--paper-2,#f1f5f9)!important;color:var(--ink-500,#64748b)!important;cursor:not-allowed;}
.invoice-line .prix-mode{font-size:.66rem;padding:0 6px;min-width:36px;font-weight:700;letter-spacing:.02em;}
/* Garde d'alignement (gate Mac 25/09) : dans le groupe « prix + pastille », le champ fait 40 px
   (input-group-sm) et la pastille 44 (cible tactile des .btn) — 4 px d'escalier, et des coins
   différents (10px partout / 0 10 10 0). La pastille s'étire à la hauteur du champ et les deux
   portent les mêmes coins : un petit espace entre eux, pas un bloc soudé. */
body.design-scope .invoice-line .input-group{gap:4px;align-items:stretch;}
body.design-scope .invoice-line .input-group > .form-control,
body.design-scope .invoice-line .input-group > .btn.prix-mode{border-radius:var(--ui-radius-sm)!important;}
body.design-scope .invoice-line .input-group > .btn.prix-mode{min-height:0;height:auto;align-self:stretch;}

/* Parc et CRM : sélection et survol dans la teinte primaire des listes. */
.equipment-record,.crm-record{transition:background-color 120ms;}
.crm-record{cursor:pointer;}
.crm-record>td:first-child>a{display:inline-flex;align-items:center;min-height:48px;}
.equipment-table .equipment-record>td,.table .crm-record>td{transition:background-color 120ms;}
.equipment-table .equipment-record:hover>td,
.equipment-table .equipment-record:focus-within>td,
.equipment-table .equipment-record:has(.equipment-check:checked)>td,
.table .crm-record:hover>td,.table .crm-record:focus-within>td{background:var(--primary-tint);--bs-table-accent-bg:transparent;--bs-table-bg-state:transparent;}
.equipment-record:focus-within,.crm-record:focus-within{outline:2px solid var(--primary);outline-offset:-2px;}
.equipment-selection-bar{gap:12px;flex-wrap:wrap;padding:8px 14px;background:var(--primary-tint);border:1px solid var(--primary-ring);border-radius:8px;}
.equipment-selection-bar:not([hidden]){display:flex;align-items:center;}
.tarif-add-button{min-height:44px;}
.tarif-add-form fieldset{min-width:0;}
@media (max-width:767.98px){
  .equipment-page .card.p-0>.table-responsive>table.equipment-table,
  .equipment-page .card.p-0>.table-responsive>table.equipment-table tbody{display:grid;width:100%;}
  .equipment-table thead{display:none;}
  .equipment-page .equipment-table tbody{gap:12px;padding:12px;}
  .equipment-page .card.p-0>.table-responsive>table.equipment-table .equipment-record{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:12px;margin:0;border:1px solid var(--line);border-radius:8px;}
  .equipment-page .card.p-0>.table-responsive>table.equipment-table .equipment-record:hover,
  .equipment-page .card.p-0>.table-responsive>table.equipment-table .equipment-record:focus-within,
  .equipment-page .card.p-0>.table-responsive>table.equipment-table .equipment-record:has(.equipment-check:checked),
  .crm-page .card.p-0>.table-responsive>table.table .crm-record:hover,
  .crm-page .card.p-0>.table-responsive>table.table .crm-record:focus-within{background:var(--primary-tint);}
  .equipment-page .card.p-0>.table-responsive>table.equipment-table .equipment-record>td{display:block;grid-column:1/-1;padding:0!important;border:0;background:transparent!important;text-align:start!important;overflow-wrap:anywhere;}
  .equipment-page .card.p-0>.table-responsive>table.equipment-table .equipment-record>.equipment-selection{position:static!important;grid-column:1;grid-row:1;}
  .equipment-page .card.p-0>.table-responsive>table.equipment-table .equipment-record>.equipment-name{grid-column:2;grid-row:1;align-self:center;}
  .equipment-table [data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:600;color:var(--text-muted);}
  .equipment-table .equipment-open .btn{min-height:44px;display:flex;align-items:center;justify-content:center;}
  .crm-page .card.p-0>.table-responsive>table.table .crm-record{padding:12px;}
  .crm-page .card.p-0>.table-responsive>table.table .crm-record>td{background:transparent;}
  .crm-page .card.p-0>.table-responsive>table.table .crm-record>td:first-child{position:static!important;}
}

/* ══ UN MONTANT NE SE COUPE JAMAIS EN DEUX ════════════════════════════════
   Audit UX mesuré du 27/09, deux défauts P1 qui sont la même maladie : trop
   de colonnes sur un écran étroit, et ce sont les MONTANTS qui cassent.
   UX-04 « Fournisseurs » à 375 px : « 1 250 000 » sur deux lignes dans une
   colonne de 69 px, les versements dans 53 px. UX-05 « Chantiers, tableau de
   bord » à 768 px : neuf colonnes, « 9 875 000 » sur TROIS lignes dans 50 px,
   avec seulement deux chantiers. Un montant coupé n'est pas laid, il est FAUX
   À LA LECTURE : le gérant ne sait plus s'il doit 1 250 000 ou 125 000.

   Cause : base.html pose `.table td,.table th{word-break:break-word;
   overflow-wrap:anywhere}` pour que les noms libres ne débordent pas sur la
   colonne voisine. `anywhere` fait de CHAQUE caractère une coupure possible,
   entre deux chiffres compris, dès que la colonne est plus étroite que le
   nombre. La police n'y est pour rien — l'audit interdit d'ailleurs de la
   réduire encore.

   Deux étages, parce qu'un seul ne suffit pas :
   1. `.ui-montant` rend au nombre son statut de mot insécable, où qu'il soit.
      Seul, il ferait déborder le nombre d'une colonne de 50 px.
   2. `[data-vue]` donne à la liste financière DEUX corps : le tableau complet
      au large, des cartes au compact, où chaque montant a sa propre ligne et
      son libellé. C'est là que la place manque, c'est là qu'on la rend.
   Mesuré au rendu par `scripts/robot/montants_une_ligne.js` (un `Range` par
   nombre, une boîte de ligne par rectangle), pas par la présence d'une classe.
   ════════════════════════════════════════════════════════════════════════ */
.ui-montant{
  white-space:nowrap;      /* le nombre est un mot : aucun retour à l'intérieur */
  overflow-wrap:normal;    /* désarme le `overflow-wrap:anywhere` de base.html  */
  word-break:normal;       /* …et son `word-break:break-word`                   */
  font-variant-numeric:tabular-nums;   /* chiffres de largeur égale : colonnes alignées */
}

/* Les deux corps d'une même liste. L'attribut est le contrat : un gabarit qui
   l'écrit dit à la sonde quoi rallumer pour sa contre-épreuve. 991.98 px =
   juste sous le `lg` de Bootstrap, la largeur où les deux écrans gardaient
   sept à neuf colonnes alors qu'il n'y a plus de place pour elles. */
[data-vue="compacte"]{display:none;}
@media (max-width:991.98px){
  [data-vue="large"]{display:none;}
  [data-vue="compacte"]{display:block;}
}

/* Une carte = une ligne du tableau, dépliée. */
.ui-liste-cartes{display:grid;gap:10px;}
.ui-carte-ligne{
  background:var(--ui-carte);border:1px solid var(--ui-line);
  border-radius:var(--ui-radius-sm);padding:12px 14px;}
.ui-carte-ligne .ui-carte-tete{display:flex;align-items:flex-start;gap:10px;}
.ui-carte-ligne .ui-carte-tete > .ui-carte-identite{flex:1 1 auto;min-width:0;}
.ui-carte-ligne .ui-carte-tete > .ui-carte-action{flex:0 0 auto;}
.ui-carte-ligne .ui-carte-nom{
  display:block;font-weight:700;color:var(--ui-ink);text-decoration:none;line-height:1.3;}
.ui-carte-ligne .ui-carte-nom:hover{color:var(--ui-primaire);}
.ui-carte-ligne .ui-carte-sous{font-size:.76rem;color:var(--ui-muted);margin-top:2px;}

/* Le montant et son libellé, chacun sur SA ligne, sur toute la largeur de la
   carte : le libellé cède la place, la valeur ne se comprime jamais. C'est ce
   `flex:0 0 auto` qui fait qu'aucune colonne de 50 px ne peut réapparaître. */
.ui-carte-montants{
  display:grid;gap:7px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--ui-line);}
.ui-montant-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.ui-montant-ligne > .ui-montant-libelle{
  flex:1 1 auto;min-width:0;font-size:.78rem;font-weight:600;color:var(--ui-muted);}
.ui-montant-ligne > .ui-montant-valeur{
  flex:0 0 auto;font-size:1rem;font-weight:700;color:var(--ui-ink);}

/* Le financier en expansion (UX-05) : la carte reste courte, le détail est à
   un clic et non dans une fiche à part. */
.ui-carte-plus{margin-top:10px;}
.ui-carte-plus > summary{
  cursor:pointer;list-style:none;font-size:.8rem;font-weight:700;
  color:var(--ui-primaire);min-height:var(--ui-touche);
  display:flex;align-items:center;gap:6px;}
.ui-carte-plus > summary::-webkit-details-marker{display:none;}
.ui-carte-plus > summary::after{content:"\203A";transform:rotate(90deg);font-size:1.1rem;line-height:1;}
.ui-carte-plus[open] > summary::after{transform:rotate(-90deg);}
.ui-carte-plus > summary:focus-visible{outline:3px solid var(--ui-primaire);outline-offset:2px;}
.ui-carte-plus .ui-carte-montants{margin-top:0;border-top:0;padding-top:0;}

/* L'alerte de la carte : ce pour quoi le gérant ouvre l'écran. */
.ui-carte-alerte{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:.76rem;font-weight:700;color:var(--ui-ambre);}
.ui-carte-alerte.rouge{color:var(--ui-rouge);}

/* Un LIBELLÉ n'est pas un texte libre. Le `word-break:break-word` de
   base.html est hérité par tout ce que la cellule contient, bouton compris :
   à 1280 px le tableau de bord Chantiers rendait « Voi / r » et l'en-tête
   « DÉPENS / É », la liste Fournisseurs « Ouvri / r » et « ENGAG / . »
   (capturé au rendu, avant comme après le passage aux cartes — la vue
   compacte ne couvre que le dessous de 992 px). Un bouton coupé en deux
   n'est plus un bouton : posé sur la CELLULE, l'héritage fait le reste. */
.ui-insecable{white-space:nowrap;overflow-wrap:normal;word-break:normal;}
/* La colonne d'action ne réclame que la largeur de son bouton : `width:1%`
   est le « shrink-to-fit » de la mise en page automatique des tableaux. */
.ui-col-action{width:1%;}
/* ══════════════════════════════════════════════════════════════════════════
   UX-06 → UX-11 — défauts TRANSVERSAUX de formulaire (audit mesuré 27/09)

   Ces classes existent parce que l'audit a MESURÉ le défaut, pas parce qu'un
   écran est « moche » : cibles de 19-20 px, `element.labels.length === 0`,
   champs de période décalés de 19 px, GTIN coupé en deux lignes. Chaque
   classe a sa mesure dans `scripts/robot/ux_formulaires.js`.
   ══════════════════════════════════════════════════════════════════════════ */

/* UX-08 — une cible tactile se MESURE. Les deux calculateurs de paie et le
   mode avancé étaient des liens soulignés de 19-20 px de haut : le doigt les
   rate, et rien ne dit qu'ils s'ouvrent. */
.ux-cible{display:inline-flex;align-items:center;gap:6px;min-height:48px;
  padding:0 14px;border-radius:10px;border:1px solid var(--ui-line);
  background:var(--ui-carte);color:var(--ui-ink-2);
  font-size:.8rem;font-weight:600;line-height:1.25;cursor:pointer;text-decoration:none;}
.ux-cible:hover{border-color:var(--ui-primaire);color:var(--ui-primaire);}
.ux-cible:focus-visible{outline:3px solid var(--ui-primaire);outline-offset:2px;}
.ux-cible[aria-expanded="true"]{border-color:var(--ui-primaire);color:var(--ui-primaire);
  background:var(--ui-primaire-doux);}

/* UX-09 — l'aide et l'erreur vivent SOUS le champ, et s'y rattachent par
   `aria-describedby` : un lecteur d'écran les lit, un voyant les voit. */
.ux-aide{display:block;font-size:.74rem;color:var(--ui-muted);margin-top:4px;line-height:1.4;}

/* UX-07 — à 768 px, « Jours d'absence non payés » passait sur deux lignes et
   poussait son champ 19 px plus bas que « Mois ». La zone de libellé d'un
   groupe de période a une hauteur PLANCHER et colle son contenu en bas :
   les quatre contrôles démarrent alors au même pixel, quel que soit le
   nombre de lignes du libellé. */
.paie-periode .ux-cadre-label{display:flex;align-items:flex-end;flex-wrap:wrap;gap:5px;
  min-height:3.2em;margin-bottom:6px;line-height:1.25;}

/* UX-11 — un identifiant qu'on compare à une étiquette physique ne se coupe
   JAMAIS : le lire en deux morceaux, c'est ne pas pouvoir le comparer. */
.ux-entier{display:inline-block;max-width:100%;white-space:nowrap;
  overflow-wrap:normal;word-break:normal;}
.ux-copier{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;min-height:32px;border-radius:8px;border:1px solid var(--ui-line);
  background:var(--ui-carte);color:var(--ui-muted);cursor:pointer;flex:0 0 auto;}
.ux-copier:hover{border-color:var(--ui-primaire);color:var(--ui-primaire);}
.ux-copier:focus-visible{outline:3px solid var(--ui-primaire);outline-offset:2px;}

/* UX-11 — carte par unité sur téléphone, tableau au bureau. Le basculement
   est porté par la feuille, pas par des classes Bootstrap dispersées : la
   sonde peut le désarmer d'une règle pour prouver qu'elle mesure. */
.serial-cartes{display:grid;gap:10px;}
.serial-carte{background:var(--ui-carte);border:1px solid var(--ui-line);
  border-radius:12px;padding:12px;}
.serial-carte-ligne{display:flex;align-items:center;gap:8px;justify-content:space-between;
  padding:5px 0;border-top:1px solid var(--ui-line);font-size:.82rem;}
.serial-carte-ligne:first-of-type{border-top:0;}
.serial-carte-cle{color:var(--ui-muted);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;flex:0 0 auto;}
.serial-carte-val{display:flex;align-items:center;gap:6px;min-width:0;
  font-weight:600;color:var(--ui-ink);}
@media(min-width:768px){.serial-cartes{display:none;}}
@media(max-width:767.98px){.serial-tableau{display:none;}}