/* ==========================================================================
   COMPOSANTS — la couche partagée, chargée APRÈS app.css et refonte.css.

   Un composant corrigé ici l'est sur tous les écrans : boutons, champs, listes
   déroulantes, dates, recherche, segmentés, cartes, dialogues et panneaux,
   barre d'onglets du téléphone, liste groupée des factures.

   Parti pris : celui des systèmes d'Apple. Une hauteur de contrôle unique, un
   rayon unique pour tout ce qui se touche, un autre pour ce qui contient, des
   filets fins, des ombres qui se devinent, un état d'appui, un anneau de
   focus qu'on voit au clavier.

   Ce que cette feuille NE change pas, parce que c'est décidé et mesuré :
     · les couleurs. Toutes viennent de app.css:root ; les seuls jetons neufs
       sont des dimensions, des durées et deux voiles dérivés de l'encre ;
     · le segment choisi reste en aplat d'encre, et non en pastille blanche
       façon iOS : une pastille blanche sur un fond gris clair tombe à 1,09:1,
       et c'est précisément ce qui la rendait invisible sur un écran médiocre ;
     · la largeur d'une date au bureau, posée en « ch » sur son contenu ;
     · le défilement horizontal du tableau des factures au bureau ;
     · l'ordre des boutons d'un dialogue : « Annuler » à gauche, le geste à
       droite ; empilés sur téléphone, le geste au-dessus.

   Spécificité : chaque règle reprend celle du sélecteur qu'elle remplace et
   gagne par l'ordre de chargement. Une règle plus lourde écraserait aussi les
   variantes locales — « .line input », « .row-actions .ghost » — qui ont leurs
   raisons. */

/* --------------------------------------------------------------- jetons */

:root {
    /* LA HAUTEUR D'UN CONTRÔLE. Champ, liste, date, bouton et segmenté
       partagent la même : posés côte à côte, ils s'alignent sans retouche.
       Quarante pixels au bureau, quarante-quatre au doigt — le plancher tactile
       des recommandations d'Apple. */
    --controle-h: 40px;
    /* LE RAYON DE CE QUI SE TOUCHE, et celui de ce qui contient. Un contrôle
       de 10 dans une carte de 16 se lit concentrique. */
    --controle-r: 8px;
    --carte-r: var(--radius-lg);

    /* LE FILET. Un pixel d'appareil sur un écran dense, un pixel CSS ailleurs :
       un demi-pixel arrondi à zéro ferait disparaître le séparateur. */
    --filet: 1px;

    /* DEUX VOILES DE L'ENCRE, et non deux couleurs : ils suivent le thème
       parce que l'encre le suit. Le premier remplit un contrôle au repos
       (segmenté, recherche), le second marque l'appui sur une ligne. */
    --remplissage: color-mix(in srgb, var(--text) 6%, transparent);
    --appui: color-mix(in srgb, var(--text) 8%, transparent);

    /* L'ANNEAU DE FOCUS. Il porte l'encre pleine pour tenir 3:1 contre le fond
       dans les deux thèmes (WCAG 2.1, 1.4.11) ; le halo autour d'un champ, lui,
       est un confort et peut rester doux. */
    --anneau: var(--marque-texte);
    --halo: color-mix(in srgb, var(--marque-texte) 20%, transparent);

    /* La barre d'onglets du téléphone : des cibles de quarante-neuf pixels au
       moins, l'icône et le libellé, plus son rembourrage. La réserve du contenu se calcule sur ce jeton, pas sur
       un nombre recopié. */
    --barre-onglets-h: 62px;

    --duree-courte: .16s;
    --duree: .22s;

    --ombre-dialogue: 0 24px 64px rgba(21, 23, 30, .20), 0 2px 8px rgba(21, 23, 30, .08);
}

:root[data-theme="dark"] {
    --ombre-dialogue: 0 24px 64px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}

@media (min-resolution: 2dppx) {
    :root { --filet: .5px; }
}

@media (max-width: 860px), (pointer: coarse) {
    :root { --controle-h: 44px; }
}

@media (max-width: 860px) {
    :root { --controle-r: 10px; }
}

@media (max-width: 860px) {
    /* Une carte de téléphone reste une carte : dix pixels la faisaient lire
       comme un champ. */
    :root { --carte-r: 14px; }
}

/* ---------------------------------------------------------- typographie */

/* Le grand titre d'iOS est gras, pas demi-gras : c'est ce qui le distingue
   d'un titre de carte sans changer de taille. L'échelle à cinq crans reste. */
h1 { font-weight: 700; letter-spacing: -.026em; line-height: 1.15; }
h2 { letter-spacing: -.018em; }

/* -------------------------------------------------------------- boutons */

button.primary,
button.ghost {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--rf-2);
    min-height: var(--controle-h);
    padding: 0 var(--rf-4);
    border-radius: var(--controle-r);
    font-size: var(--t-2); font-weight: 500; line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duree-courte) var(--ease),
                border-color var(--duree-courte) var(--ease),
                transform var(--duree-courte) var(--ease),
                opacity var(--duree-courte) var(--ease);
}

/* L'aplat est plat. Un dégradé et deux ombres faisaient un bouton qui se
   détachait plus que la carte qui le porte ; l'encre pleine suffit à dire
   « c'est ici ». */
button.primary {
    background: var(--accent);
    box-shadow: none;
}
button.primary:hover {
    background: color-mix(in srgb, var(--accent) 86%, var(--bg));
    box-shadow: none;
}
button.primary:active {
    background: color-mix(in srgb, var(--accent) 78%, var(--bg));
    transform: scale(.98);
}

button.ghost { border-color: var(--line-control); }
button.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
button.ghost:active { background: var(--appui); transform: scale(.98); }

button.primary.danger { background: var(--err); }
button.primary.danger:hover { background: color-mix(in srgb, var(--err) 88%, var(--bg)); filter: none; }

button.primary:disabled:active,
button.ghost:disabled:active { transform: none; }

/* Dans un tableau, une ligne, une pastille : le bouton garde sa taille
   compacte. Quarante pixels par cellule rendraient chaque rangée plus haute
   que son contenu ; le plancher de trente-deux, mesuré au banc, reste. */
:where(td, .row-actions, .rf-chips, .faveur-ligne, .pager-size) :is(button.primary, button.ghost) {
    min-height: 32px;
}

/* LE FOCUS SE VOIT AU CLAVIER, et seulement au clavier. Un anneau au clic de
   souris est du bruit ; son absence au clavier est une impasse. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--anneau);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- champs */

/* Tous les champs d'une ligne, sauf ce qui n'est pas une boîte de saisie.
   « :where » n'ajoute aucun poids : la règle pèse exactement « input », comme
   celle d'app.css qu'elle prolonge. */
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"],
                 [type="color"], [type="hidden"], [type="submit"], [type="button"])),
select {
    min-height: var(--controle-h);
    padding: var(--rf-2) var(--rf-3);
    border-radius: var(--controle-r);
    line-height: 1.25;
}
select { padding-right: var(--rf-8); }
textarea { border-radius: var(--controle-r); padding: var(--rf-2) var(--rf-3); }

/* Le halo d'app.css pesait sept pour cent d'encre : on ne le voyait que si on
   le cherchait. La bordure prend l'encre pleine, le halo s'épaissit. */
input:focus, select:focus, textarea:focus {
    border-color: var(--anneau);
    box-shadow: 0 0 0 3px var(--halo);
}

/* La recherche native de Safari porte ses propres coins et sa propre loupe :
   on rend la main à la feuille, comme pour les listes déroulantes. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* Safari centre la valeur d'une date : à gauche, comme tout autre champ. */
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* ----------------------------------------------------- en-tête d'écran */

/* Le renvoi vers l'aide est un lien, pas un bouton : il s'aligne sur le texte
   qui le précède, à toutes les largeurs. Sous 860 px, « .page-head button »
   l'étirait sur la largeur entière et centrait son libellé. */
.page-head .aide-renvoi {
    width: auto; align-self: flex-start;
    padding: var(--rf-2) 0; text-align: left;
    min-height: 32px;
}

/* -------------------------------------------------------------- segmenté */

/* La géométrie d'iOS — un sillon arrondi, des segments de même hauteur que
   les champs — et la pastille d'encre décidée pour le choix actif. */
.segmented {
    align-items: stretch;
    padding: 2px; gap: 2px;
    background: var(--remplissage);
    border: var(--filet) solid var(--line-strong);
    border-radius: var(--controle-r);
}
.segmented button {
    min-height: calc(var(--controle-h) - 6px);
    padding: 0 var(--rf-4);
    border-radius: calc(var(--controle-r) - 2px);
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duree-courte) var(--ease), color var(--duree-courte) var(--ease);
}
.segmented button:hover { background: var(--appui); }
.segmented button[aria-pressed="true"] { font-weight: 600; }
/* Le choix d'apparence, au pied de la colonne, garde sa densité : trois
   segments dans cent quatre-vingts pixels. Il prend seulement la forme des
   autres. */
.identity .theme-choix button { min-height: 28px; border-radius: calc(var(--controle-r) - 2px); }

/* ---------------------------------------------------------------- cartes */

.card { border-radius: var(--carte-r); }

/* -------------------------------------------------- dialogues, panneaux */

dialog {
    border: var(--filet) solid var(--line);
    border-radius: var(--carte-r);
    box-shadow: var(--ombre-dialogue);
}
dialog::backdrop {
    background: rgba(0, 0, 0, .32);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* Le display reste à la feuille du navigateur : seule l'entrée est animée, et
   seulement sur un dialogue ouvert. */
dialog[open]:not(.sheet, .viewer) { animation: dialogue-entre var(--duree) var(--ease); }
@keyframes dialogue-entre { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* --------------------------------- la proposition de mémoriser l'appareil */

.appareil-dialogue h2 { margin-bottom: var(--rf-2); }
.appareil-dialogue .sub { margin: 0; }

/* ------------------------------------------- la tête de la liste des factures */

/* LES TROIS POSTES SUR UNE GRILLE RÉGULIÈRE. Trois colonnes égales, un filet
   entre elles, le même corps pour les trois nombres : l'œil compare des
   montants, il ne doit pas comparer des typographies. La bande épouse encore
   ses chiffres au bureau — chaque colonne prend la largeur de la plus large —
   et prend toute la largeur sur téléphone. */
.rf-somme {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    background: var(--surface);
    border: var(--filet) solid var(--line);
    border-radius: var(--carte-r);
    box-shadow: var(--shadow);
}
.rf-somme__poste {
    gap: 2px;
    padding: var(--rf-3) var(--rf-4);
    min-width: 0;
}
.rf-somme__poste + .rf-somme__poste { border-left: var(--filet) solid var(--line-strong); }
/* The VAT summary still writes bare spans: they get the same inset as a
   poste, instead of text touching the border (18 October 2026). */
.rf-somme > span { padding: var(--rf-3) var(--rf-4); min-width: 0; }
.rf-somme__quoi { font-size: var(--t-1); font-weight: 600; letter-spacing: .04em; color: var(--text-2); }
.rf-somme__combien { font-size: var(--t-4); font-weight: 600; letter-spacing: -.02em; }
.rf-somme__combien small { font-size: var(--t-2); font-weight: 500; color: var(--text-2); letter-spacing: 0; }

/* LA RECHERCHE EST UN SEUL CHAMP. La loupe dedans, le filtre dedans, à la même
   hauteur : le champ et le bouton posés côte à côte n'avaient ni la même
   hauteur ni la même ligne de base, l'intitulé du champ le poussant d'un cran.
   L'intitulé reste dans le document pour l'assistance ; l'invite dit le reste. */
.rf-tete { align-items: center; }
.rf-tete__outils {
    align-items: center; gap: 0;
    flex: 0 1 380px; min-width: 320px;
    min-height: var(--controle-h);
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line-control);
    border-radius: var(--controle-r);
    transition: border-color var(--duree-courte) var(--ease), box-shadow var(--duree-courte) var(--ease);
}
.rf-tete__outils:hover { border-color: var(--text-3); }
.rf-tete__outils:focus-within { border-color: var(--anneau); box-shadow: 0 0 0 3px var(--halo); background: var(--surface); }
.rf-tete__outils .filter-search { flex: 1 1 auto; min-width: 0; }
.rf-tete__outils .filter-search label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.rf-tete__outils .filter-search input {
    min-height: calc(var(--controle-h) - 8px);
    padding: 0 var(--rf-2) 0 34px;
    border: 0; border-radius: calc(var(--controle-r) - 3px);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.75' fill='none' stroke='%23858b99' stroke-width='1.8'/%3E%3Cpath d='m13 13 4 4' stroke='%23858b99' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 17px;
}
.rf-tete__outils .filter-search input:focus,
.rf-tete__outils .filter-search input:hover { border: 0; box-shadow: none; background-color: transparent; }
.rf-tete__outils > button.ghost {
    flex: 0 0 auto;
    min-height: calc(var(--controle-h) - 8px);
    padding: 0 var(--rf-3) 0 30px;
    border: 0; border-radius: calc(var(--controle-r) - 3px);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 5.5h14M5.5 10h9M8 14.5h4' fill='none' stroke='%23858b99' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 9px center;
    background-size: 16px;
    color: var(--text);
    box-shadow: inset var(--filet) 0 0 var(--line-strong);
}
.rf-tete__outils > button.ghost:hover { background-color: var(--appui); }
.rf-tete__outils > button.ghost[aria-expanded="true"] { background-color: var(--accent-soft); }

/* La pagination : ses boutons gardent la hauteur commune. */
.pager-size select { min-height: 32px; min-width: 76px; }

/* ---------------------------------------- réserve de mouvement */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    button.primary:active, button.ghost:active { transform: none; }
}

/* ==========================================================================
   TÉLÉPHONE ET TABLETTE — le seuil d'app.css, 860 px, et celui de la liste
   des factures, 900 px, que refonte.css tient déjà.
   ========================================================================== */

@media (max-width: 860px) {
    /* Les boutons du téléphone parlent au corps des champs : treize pixels
       sous un pouce se lisent mal, et iOS zoome sous seize sur les champs. */
    button.primary, button.ghost { font-size: var(--t-3); }

    /* LA BARRE D'ONGLETS GARDE SA PLACE, et le contenu la lui laisse. La
       réserve suit la hauteur réelle de la barre et la zone d'accueil de
       l'appareil, plus un pas de respiration : le dernier bouton d'un écran se
       touche sans avoir à le dégager. */
    .sidebar {
        padding: var(--rf-1) var(--rf-1) max(var(--rf-1), env(safe-area-inset-bottom));
        border-top: var(--filet) solid var(--line-strong);
    }
    nav button { min-height: 49px; justify-content: center; -webkit-tap-highlight-color: transparent; }
    nav button:active { background: var(--appui); }
    main {
        padding-bottom: calc(var(--barre-onglets-h) + env(safe-area-inset-bottom) + var(--rf-6));
        scroll-padding-bottom: calc(var(--barre-onglets-h) + env(safe-area-inset-bottom));
    }
    html { scroll-padding-bottom: calc(var(--barre-onglets-h) + env(safe-area-inset-bottom) + var(--rf-2)); }

    /* L'EN-TÊTE D'ÉCRAN. Le titre, l'action principale juste dessous, puis
       ce qui explique, puis le renvoi vers l'aide. Une phrase de contexte de
       trois lignes repoussait l'action qu'on vient faire ; elle passe après.
       Le bloc du titre se dissout pour que ses enfants se rangent avec les
       boutons ; un bouton secondaire se place à droite du titre quand la
       place le permet, comme le « Modifier » d'une barre d'iOS. */
    .page-head {
        flex-direction: row; flex-wrap: wrap;
        align-items: center; gap: var(--rf-2) var(--rf-3);
    }
    .page-head > div:first-child,
    .page-head .head-actions,
    .page-head .page-actions { display: contents; }
    .page-head h1 { order: 0; flex: 1 1 8ch; min-width: 0; }
    .page-head button.ghost:not(.aide-renvoi) { order: 1; flex: 0 0 auto; width: auto; padding: 0 var(--rf-4); }
    .page-head button.primary { order: 2; flex: 1 1 100%; width: 100%; }
    .page-head > div:first-child > :not(h1):not(.aide-renvoi) { order: 3; flex: 1 1 100%; margin: 0; }
    .page-head .aide-renvoi { order: 4; flex: 0 0 auto; }
    /* Deux gestes de même rang, en moitiés égales sur une rangée : le
       secondaire n'a pas à se loger contre le titre (Factures d'achat). */
    .page-head .actions--moities { flex: 1 1 100%; }
    .page-head .actions--moities > button:is(.ghost, .primary) { order: 0; flex: 1 1 0; width: auto; min-width: 0; padding: 0 var(--rf-3); }

    /* Une date prend sa colonne entière sur téléphone : la largeur en « ch »
       vaut au bureau, où la date se pose à côté d'autres champs ; empilée sous
       une liste pleine largeur, elle se lisait comme un champ inachevé. */
    input[type="date"] { width: 100%; max-width: none; }

    /* Le segmenté des factures prend la largeur, segments égaux. */
    #invoiceTabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }

    .card { padding: var(--rf-4); }

    /* Les panneaux montent du bas avec la même poignée et la même ombre. */
    dialog.sheet {
        border-width: var(--filet) 0 0;
        border-radius: var(--carte-r) var(--carte-r) 0 0;
        padding: var(--rf-2) var(--rf-4) calc(var(--rf-4) + env(safe-area-inset-bottom));
    }
    dialog .actions button { border-radius: var(--controle-r); min-height: var(--controle-h); }
    .appareil-dialogue h2 { font-size: var(--t-4); }
    /* Deux boutons côte à côte coupaient « Mémoriser cet appareil » en deux
       lignes : empilés, pleine largeur, le geste au-dessus et « Plus tard »
       sous le pouce — la disposition des autres dialogues du téléphone. */
    dialog.sheet.appareil-dialogue .actions { flex-direction: column-reverse; }
    dialog.sheet.appareil-dialogue .actions button { width: 100%; flex: none; }

    /* La pagination sur deux rangées : la taille de page seule, puis
       « Précédent · Page n sur m · Suivant » à parts égales. */
    .pager { gap: var(--rf-3); }
    .pager-nav { display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; gap: var(--rf-2) var(--rf-3); }
    .pager-nav > :first-child:not(button) { grid-column: 1 / -1; }
    .pager-nav .pager-pos { text-align: center; }
}

@media (max-width: 900px) {
    /* La bande des totaux et la recherche prennent la largeur. */
    .rf-somme { display: grid; flex: 1 1 100%; }
    .rf-somme__poste { padding: var(--rf-3); }
    .rf-somme__combien { font-size: 17px; }
    .rf-tete__outils { flex: 1 1 100%; min-width: 0; margin-left: 0; }

    /* LA LISTE GROUPÉE. La carte devient le groupe ; chaque facture une
       rangée pleine largeur, séparée de la suivante par un filet qui part du
       texte et non du bord, comme une liste d'iOS. Il n'y a plus de carte dans
       la carte : une seule bordure, un seul rayon. Toute la rangée se touche ;
       l'appui la teinte. */
    .rf-table.card {
        padding: 0;
        overflow: clip;
        border: var(--filet) solid var(--line);
        border-radius: var(--carte-r);
    }
    .rf-table.card > :not(table) { margin: var(--rf-4); }
}

/* ==========================================================================
   LOT 2 — aligned on the public site (site/style.css): white cards on a
   quiet page, larger and tighter titles, capsule buttons, sentence-case
   labels, and one list component shared by every table of the product.
   ========================================================================== */

/* ------------------------------------------------------------ typography */

h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
h2 { font-weight: 650; letter-spacing: -.02em; }
.card > h2, .card-head h2, .rf-card__head h2 { font-size: 18px; }

.page-head { align-items: center; margin-bottom: var(--rf-6); }
/* Le sous-titre prend la largeur de l'en-tête : à 62 ch, celui des Modules se
   cassait en deux au milieu d'une page vide à droite, quand ses voisins tenaient. */
.page-head p { margin-top: 6px; font-size: 14px; line-height: 1.5; max-width: none; }

/* Labels read in sentence case, like the site and the system UI. */
th,
.rf-table__head,
.rf-eyebrow,
.nav-groupe,
.rf-somme__quoi,
.org-switch label,
.preview-label,
.mentions__table th,
.aide__pieges h3,
.rappro h3,
.journee-titre,
.faveur-liste h3,
.rg-bloc h3,
.rf-identite__quoi,
.rf-board__groupe,
.rf-solde__sens,
.rf-solde__borne,
.rf-sommes__cle {
    text-transform: none;
    letter-spacing: 0;
}
:is(.org-switch label, .preview-label, .rf-identite__quoi, .rf-board__groupe,
    .rf-solde__sens, .rf-solde__borne, .rf-sommes__cle) { font-size: 12px; }
th, .rf-table__head { font-size: 12px; font-weight: 600; color: var(--text-2); }
.rf-eyebrow { font-size: 12.5px; }
.rf-somme__quoi { font-size: 12px; }

/* --------------------------------------------------------------- buttons */

/* Rounded rectangles (17 October 2026), as in macOS, Windows 11 and pro
   tools: 8 px on a desk, 10 px on a phone, from « --controle-r ». The
   capsule is kept for what states a fact — pills and badges — not for what
   acts. */
button.primary,
button.ghost { border-radius: var(--controle-r); font-weight: 550; letter-spacing: -.01em; }
.segmented { border-radius: var(--controle-r); }
.segmented button { border-radius: calc(var(--controle-r) - 2px); }
.identity .theme-choix button { border-radius: calc(var(--controle-r) - 2px); }
dialog .actions button { border-radius: var(--controle-r); }

button.ghost { background-color: var(--surface); }
button.ghost:hover { border-color: var(--text-2); background: var(--accent-soft); }

/* ---------------------------------------------------------------- fields */

/* System fields: white on the card, a 3:1 border, the halo on focus. */
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"],
                 [type="color"], [type="hidden"], [type="submit"], [type="button"])),
select,
textarea { background-color: var(--surface); }
:root[data-theme="dark"] :is(input:where(:not([type="checkbox"], [type="radio"], [type="file"],
    [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"])),
    select, textarea) { background-color: var(--surface-2); }

/* Search fields are rounded and carry the magnifier, everywhere. */
input[type="search"] {
    border-radius: var(--controle-r);
    padding-left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.75' fill='none' stroke='%23858b99' stroke-width='1.8'/%3E%3Cpath d='m13 13 4 4' stroke='%23858b99' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
}
.rf-tete__outils { border-radius: var(--controle-r); padding: 3px 3px 3px 4px; }
.rf-tete__outils .filter-search input { border-radius: calc(var(--controle-r) - 3px); }
.rf-tete__outils > button.ghost { border-radius: calc(var(--controle-r) - 3px); }

/* ----------------------------------------------------------------- cards */

.card {
    background: var(--surface);
    border: var(--filet) solid var(--line);
    box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--rythme, 18px); }
/* LE MÊME RYTHME QUAND LA CARTE VIT DANS SON PROPRE CONTENEUR.

   « .card + .card » ne voit que deux cartes sœurs. Un écran qui rend ses
   blocs dans des conteneurs distincts — l'abonnement puis les modules, la
   douchette puis le stock — les collait l'un à l'autre, écart nul, relevé le
   18 octobre 2026. */
section[id^="view-"] > :not(.page-head, [hidden], :empty) ~ :not([hidden]) > .card:first-child { margin-top: var(--rythme, 18px); }

/* ----------------------------------------------------------------- pills */

/* One status pill: same height, weight and radius for .badge and .rf-pill. */
.badge,
.rf-pill {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 500; line-height: 1.35;
    letter-spacing: 0;
}

/* ------------------------------------------------------- sidebar (source list) */

.sidebar { background: var(--surface); border-right: var(--filet) solid var(--line); }
@media (min-width: 861px) {
    nav button { min-height: 30px; border-radius: 8px; color: var(--text); }
    nav button:hover { background: var(--accent-soft); }
    nav button[aria-current="page"] { background: var(--appui); color: var(--text); font-weight: 600; }
    .nav-groupe { font-size: 12px; font-weight: 600; color: var(--text-3); padding-top: var(--rf-3); }
}

/* ------------------------------------------------------------- dialogs */

dialog { border-radius: 20px; }
dialog::backdrop {
    background: rgba(12, 17, 23, .28);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}

/* ------------------------------------------------------------ empty state */

.empty { padding: var(--rf-10) var(--rf-5); color: var(--text-2); font-size: 14px; }
.empty .mark { font-size: 26px; opacity: .35; margin-bottom: var(--rf-2); }

/* ==========================================================================
   THE LIST — one component for every table: invoices, quotes, orders,
   purchases, clients, suppliers, catalogue, stock, reminders, jobs.
   Desktop: a native table inside one card, discreet headers, hairlines,
   tabular amounts. Phone: an inset grouped list (title, subtitle, amount
   and state on the right, chevron when the row opens).
   ========================================================================== */

td { border-bottom-color: var(--line); }
td.num, th.num, .rf-cell--right { font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
tbody tr:hover, tbody tr.openable:hover { background: var(--accent-soft); }
tbody tr[aria-selected="true"], tbody tr.selected { background: var(--appui); }
tbody tr:last-child > td { border-bottom: 0; }

@media (min-width: 1181px) {
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) { font-size: 13.5px; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) th { padding: 0 var(--rf-3) var(--rf-2); }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td { padding: 11px var(--rf-3); vertical-align: middle; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) :is(th, td):first-child { padding-left: var(--rf-2); }
}

/* The invoice list joins the others: one card, rows on hairlines, instead
   of one floating tile per invoice. The torn last edge and the money edge
   stay; only the spacing and the frame change. */
@media (min-width: 901px) {
    .rf-table__head {
        padding: 10px 18px;
        background: var(--surface);
        border: var(--filet) solid var(--line);
        border-bottom-color: var(--line);
        border-radius: var(--carte-r) var(--carte-r) 0 0;
        color: var(--text-2);
    }
    .rf-table__row {
        margin-bottom: 0;
        padding: 12px 18px;
        border-radius: 0;
        border: var(--filet) solid var(--line);
        border-top: 0;
        background: var(--surface);
    }
    .rf-table__row:hover { background: color-mix(in srgb, var(--surface) 96%, var(--text)); border-color: var(--line); }
    .rf-table tbody .rf-table__row:last-child { border-radius: 0 0 var(--carte-r) var(--carte-r); }
    .rf-table table[data-fin] .rf-table__row:last-child { border-radius: 0; }
    .rf-table .rf-table__row:last-child { box-shadow: var(--shadow); }
}
@media (min-width: 1220px) {
    .rf-table thead { background: transparent; border-radius: var(--carte-r) var(--carte-r) 0 0; }
}

/* ---- phone: inset grouped list ---------------------------------------- */

@media (max-width: 860px) {
    /* The card is the group; its rows sit on hairlines, not in grey tiles. */
    .card:has(> table, > div > table) { padding: var(--rf-2) var(--rf-4); }

    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) > tbody > tr {
        display: grid;
        /* The right column is capped: a long state line (« Encaissée · déclarée
           le … ») took it all and left the title 41 px (18 October 2026). */
        grid-template-columns: minmax(0, 1fr) fit-content(55%);
        column-gap: var(--rf-3);
        row-gap: 1px;
        position: relative;
        margin: 0;
        padding: var(--rf-3) 0;
        border: 0;
        border-bottom: var(--filet) solid var(--line);
        border-radius: 0;
        background: transparent;
    }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) > tbody > tr:last-child { border-bottom: 0; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) > tbody > tr:hover { background: transparent; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) > tbody > tr.openable:active { background: var(--appui); }

    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(n) { grid-column: 1 / -1; padding: 2px 0; font-size: 13px; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(n)::before {
        text-transform: none; letter-spacing: 0;
        font-size: 13px; font-weight: 400; color: var(--text-2);
    }

    /* Title: the first cell, without its column label. Its second block
       (the invoice of a quote, a code under a name) folds under it. */
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:first-child {
        grid-column: 1; grid-row: 1;
        justify-content: flex-start; text-align: left;
        font-size: 15px; font-weight: 600; color: var(--text);
    }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:first-child::before { display: none; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td[data-label]:first-child { gap: 2px 6px; align-items: center; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td[data-label]:first-child > * { margin-left: 0; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td[data-label]:first-child > :is(div, p, small, .rf-cell__sub) { flex: 1 0 100%; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:first-child.mono { font-family: inherit; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:first-child > :is(div, p, small, .rf-cell__sub) { font-size: 13px; font-weight: 400; color: var(--text-2); }

    /* Subtitle: the second cell, when it is plain text. */
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(2):not(.num):not(:has(.badge, .rf-pill, button, select, input)) {
        grid-column: 1; grid-row: 2;
        justify-content: flex-start; text-align: left; color: var(--text-2);
    }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(2):not(.num):not(:has(.badge, .rf-pill, button, select, input))::before { display: none; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(2):not(.num):not(:has(.badge, .rf-pill, button, select, input)) > * { margin-left: 0; }

    /* Right column: the first amount, then the first state. */
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(1 of .num[data-label]) {
        grid-column: 2; grid-row: 1;
        justify-content: flex-end; font-size: 15px; font-weight: 600;
    }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(1 of .num[data-label])::before { display: none; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(1 of [data-label]:has(> .badge, > .rf-pill)):not(:first-child):not(.num) {
        grid-column: 2; grid-row: 2; justify-content: flex-end;
    }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:nth-child(1 of [data-label]:has(> .badge, > .rf-pill)):not(:first-child):not(.num)::before { display: none; }

    /* Actions span the row, right-aligned, after the details. */
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td:not([data-label]) { padding-top: var(--rf-2); }
    /* A clipped cell keeps its width when stacked (it used to collapse to 0). */
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td.tronque { max-width: none; flex-wrap: nowrap; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) td.tronque > * { min-width: 0; }

    /* A row that opens says so. */
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) > tbody > tr.openable { padding-right: 18px; }
    :where(table:not(.lst__table, .rf-table--factures, .agenda, .issue-recap, .fiche-detail, .fiche-pieces)) > tbody > tr.openable::after {
        content: ""; position: absolute; right: 2px; top: 50%;
        width: 7px; height: 7px; margin-top: -4px;
        border: solid var(--text-3); border-width: 0 1.6px 1.6px 0;
        transform: rotate(-45deg); opacity: .7;
    }
}

/* Received invoices: the same grouped list, one card with hairline rows.
   The waiting edge stays, drawn inside the row. */
.inbox-cartes {
    gap: 0;
    background: var(--surface);
    border: var(--filet) solid var(--line);
    border-radius: var(--carte-r);
    box-shadow: var(--shadow);
}
.inbox-carte {
    background: transparent;
    border: 0;
    border-bottom: var(--filet) solid var(--line);
    border-radius: 0;
    padding: var(--rf-4) var(--rf-5);
}
.inbox-carte:first-child { border-radius: var(--carte-r) var(--carte-r) 0 0; }
.inbox-carte:last-child { border-bottom: 0; border-radius: 0 0 var(--carte-r) var(--carte-r); }
.inbox-carte:only-child { border-radius: var(--carte-r); }
.inbox-carte[data-urgence] { border-left: 0; box-shadow: inset 3px 0 0 var(--line); }
.inbox-carte[data-urgence="accent"] { box-shadow: inset 3px 0 0 var(--accent); }
.inbox-carte[data-urgence="warn"]   { box-shadow: inset 3px 0 0 var(--warn); }
.inbox-carte[data-urgence="err"]    { box-shadow: inset 3px 0 0 var(--err); }
@media (max-width: 860px) {
    .inbox-carte { padding: var(--rf-3) var(--rf-4); }
}

/* Four totals do not fit one row at 375 px: two by two. */
@media (max-width: 600px) {
    .rf-somme { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rf-somme__poste:nth-child(odd) { border-left: 0; }
    .rf-somme__poste:nth-child(n + 3) { border-top: var(--filet) solid var(--line-strong); }
}

/* ==========================================================================
   LISTS, SECOND PASS — one toolbar, one row, one cell, one pager.
   Markup comes from tableauDeListe / celluleTitre… in app.js; the invoice
   list is one case of it.
   ========================================================================== */

/* ---- toolbar ------------------------------------------------------------ */

.lb {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--rf-3);
    margin-bottom: var(--rf-4);
}
.lb > .segmented { flex: 0 0 auto; margin: 0; }
.lb-outils {
    display: flex; align-items: center; gap: var(--rf-2);
    flex: 1 1 320px; min-width: 0;
}
.lb-recherche { flex: 1 1 auto; min-width: 0; }
.lb-recherche label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.lb-recherche input { width: 100%; margin: 0; }
.lb-compte { flex: 0 0 auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }
/* Phone: the count goes under the field, which keeps its whole placeholder
   (« un S… » was cut at 375 px, 18 October 2026). */
@media (max-width: 860px) {
    .lb-outils:has(> .lb-compte) { flex-wrap: wrap; row-gap: var(--rf-1); }
    .lb-outils > .lb-recherche:has(+ .lb-compte) { flex-basis: 100%; }
}

.lb-filtres { position: relative; flex: 0 0 auto; }
button.lb-filtrer {
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 5.5h14M5.5 10h9M8 14.5h4' fill='none' stroke='%23858b99' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 13px center;
    background-size: 16px;
}
button.lb-filtrer[aria-expanded="true"] { background-color: var(--accent-soft); border-color: var(--text-2); }
.lb-nombre {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
    border-radius: var(--radius-pill);
    background: var(--accent); color: var(--sur-accent);
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* The panel: a popover under the button on a desk. */
.lb-panneau.filters {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
    width: 340px; max-width: calc(100vw - 32px);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--rf-3);
    margin: 0; padding: var(--rf-4);
    background: var(--surface);
    border: var(--filet) solid var(--line);
    border-radius: var(--carte-r);
    box-shadow: var(--shadow-lg);
}
.lb-panneau.filters > div { min-width: 0; }
.lb-panneau.filters > div:has(select) { grid-column: 1 / -1; }
.lb-panneau.filters input[type="date"] { width: 100%; max-width: none; }
.lb-panneau.filters > button { grid-column: 1 / -1; justify-self: start; }
/* The sheet header exists for the phone only; the desk popover has none. */
.lb-panneau__tete { display: none; }

/* The figures of the invoice selection and the active-filter chips. */
.rf-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rf-3); margin-bottom: var(--rf-4); }
.rf-tete:not(:has(.rf-somme:not([hidden]))):not(:has(.rf-chip)) { display: none; }

@media (max-width: 860px) {
    .lb > .segmented {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        width: 100%;
    }
    .lb-outils { flex-basis: 100%; }

    /* On a phone the panel is a bottom sheet over the tab bar. */
    .lb-panneau.filters {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0;
        width: auto; max-width: none; max-height: 82vh; overflow: auto;
        z-index: 60;
        padding: var(--rf-5) var(--rf-4) calc(var(--rf-5) + env(safe-area-inset-bottom));
        border-width: var(--filet) 0 0;
        border-radius: var(--carte-r) var(--carte-r) 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
    }
    .lb-panneau.filters > button { justify-self: stretch; }
    .lb-panneau.filters > .lb-panneau__tete {
        grid-column: 1 / -1;
        display: flex; align-items: center; justify-content: space-between; gap: var(--rf-3);
        margin: calc(var(--rf-2) * -1) 0 var(--rf-1);
    }
    .lb-panneau__tete > b { font-size: 17px; font-weight: 650; color: var(--text); }
    .lb-panneau__fermer { min-height: 44px; min-width: 44px; padding: 0 var(--rf-4); }
    .lb-filtres:has(> .lb-panneau:not([hidden]))::before {
        content: ""; position: fixed; inset: 0; z-index: 59;
        background: rgba(12, 17, 23, .28);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
}

/* ---- the list container ---------------------------------------------- */

.lst-zone > .card + .card,
.lst-zone > p + .card { margin-top: 0; }
.lst-zone > .empty,
.rf-table.card > .empty {
    background: var(--surface);
    border: var(--filet) solid var(--line);
    border-radius: var(--carte-r);
    box-shadow: var(--shadow);
}
.lst-zone > .sub, .lst-zone > .avis-reseau { margin: 0 0 var(--rf-3); }
#aFacturerListe > .card { border: 0; box-shadow: none; padding: 0; background: transparent; }

/* ---- the row, on a desk ---------------------------------------------- */

@media (min-width: 901px) {
    .lst .rf-table__row,
    .lst .rf-table__head { gap: var(--rf-3); min-height: 56px; }
    .lst .rf-table__row { cursor: default; }
    .lst .rf-table__row.openable { cursor: pointer; }
    .lst td { padding: 0; border: 0; min-width: 0; font-size: 13px; color: var(--text-2); }
    /* L'EN-TÊTE PERD SON REMBOURRAGE COMME LA CELLULE A PERDU LE SIEN.

       La grille donne à « th » et à « td » la même colonne ; la règle générale
       des tableaux laissait pourtant 8 px de chaque côté au seul « th ». Chaque
       intitulé glissait d'autant vers l'intérieur : « Raison sociale » à 8 px
       à droite du nom, « Dépensé » à 8 px à gauche du bord des montants.
       Relevé sur les Fournisseurs et les Stocks le 18 octobre 2026. */
    .lst .rf-table__head > th { padding: 0; }
    .lst .lh-montant,
    .lst .rf-table__head > th.num { text-align: right; }

    .lst td.lc-titre { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
    .lst td.lc-titre > * { min-width: 0; }
    .lst .lc-nom {
        font-size: 14px; font-weight: 600; color: var(--text);
        overflow: hidden; text-overflow: ellipsis;
    }
    .lst .lc-sous {
        font-size: 12.5px; color: var(--text-2);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lst .lc-sous .mono, .lst .lc-sous .rf-num--id { font-family: inherit; font-size: inherit; font-weight: 500; color: inherit; }
    .lst td.lc-titre .badge { align-self: flex-start; }

    .lst td.lc-meta.num { text-align: right; }
    .lst td.lc-montant {
        text-align: right; font-size: 14.5px; font-weight: 600; color: var(--text);
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .lst td.lc-etat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
    .lst td.lc-actions { display: flex; justify-content: flex-end; }
    .lst td.lc-actions .row-actions { justify-content: flex-end; }
    .lst td.tronque { max-width: none; }
}

.lst .lc-note, .lst .lc-renvoi { display: block; font-size: 12px; color: var(--text-2); }
.lst .lc-renvoi { font-variant-numeric: tabular-nums; }
.lst .lc-vide { color: var(--text-3); }
.lst .lc-negatif { color: var(--err); }
.lst .lc-pastilles { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ---- the cell, on a phone -------------------------------------------- */

@media (max-width: 900px) {
    .lst.rf-table.card { padding: 0; }
    .lst .lst__table { display: block; width: 100%; }
    .lst .lst__table > thead { display: none; }
    .lst .lst__table > tbody { display: block; }

    .lst tbody tr.rf-table__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-auto-flow: row dense;
        align-items: center;
        gap: 2px var(--rf-3);
        position: relative;
        min-width: 0; min-height: 44px;
        margin: 0;
        padding: var(--rf-3) var(--rf-4);
        border: 0; border-radius: 0;
        background: transparent;
        background-image: linear-gradient(var(--line-strong), var(--line-strong));
        background-repeat: no-repeat;
        background-position: left var(--rf-4) bottom;
        background-size: calc(100% - var(--rf-4)) var(--filet);
        box-shadow: none;
    }
    .lst tbody tr.rf-table__row:last-child { background-image: none; }
    .lst tbody tr.rf-table__row:hover { background-color: transparent; }
    .lst tbody tr.rf-table__row.openable:active { background-color: var(--appui); }

    .lst td,
    .lst td:nth-child(n) {
        display: block; grid-column: 1; grid-row: auto;
        padding: 0; border: 0; min-width: 0;
        text-align: left; font-size: 13px; color: var(--text-2);
    }
    .lst td::before,
    .lst td:nth-child(n)::before { display: none; }

    /* Title over subline, left, two rows. */
    .lst td.lc-titre:nth-child(n) {
        grid-column: 1; grid-row: 1 / span 2;
        display: flex; flex-direction: column; align-items: stretch; gap: 2px;
        color: var(--text);
    }
    .lst td.lc-titre > * { max-width: 100%; min-width: 0; }
    .lst td > *, .lst td:nth-child(n) > * { margin-left: 0; }
    .lst .lc-nom {
        display: block; font-size: 15px; font-weight: 600; color: var(--text);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .lst .lc-sous { display: block; font-size: 13px; color: var(--text-2); }
    .lst .lc-sous .mono, .lst .lc-sous .rf-num--id { font-family: inherit; font-size: inherit; color: inherit; font-weight: 400; }
    .lst .lc-sous__plus { display: none; }
    .lst td.lc-titre > :not(.lc-nom, .lc-sous) { align-self: flex-start; }
    .lst td.lc-titre > .lc-renvoi { align-self: stretch; }

    /* Amount top right, state under it. */
    .lst td.lc-montant:nth-child(n) {
        grid-column: 2; grid-row: 1;
        display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
        font-size: 15px; font-weight: 600; color: var(--text);
        white-space: nowrap;
    }
    .lst td.lc-etat:nth-child(n) {
        grid-column: 2; grid-row: 2;
        display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
        text-align: right;
    }
    .lst tr:not(:has(td.lc-montant)) td.lc-etat:nth-child(n) { grid-row: 1 / span 2; }

    /* Document data: hidden, unless it is what the row is about. */
    .lst td.lc-meta { display: none; }
    .lst td.lc-meta.lc-meta--tel:nth-child(n),
    .lst td.lc-meta.lc-meta--nu:nth-child(n) { display: block; grid-column: 1; grid-row: 3; align-self: center; }

    /* The action, as a link on the right; the menu next to it. */
    .lst td.lc-actions:nth-child(n) {
        grid-column: 1 / -1; grid-row: 3; justify-self: end;
        display: flex; align-items: center; justify-content: flex-end;
    }
    /* A phone meta already holds row 3: the action drops to its own row.
       Sharing row 3, « Réceptionner » was drawn over « Livraison … » and the
       late pill (purchase orders, 18 October 2026). */
    .lst tr:has(> td.lc-meta--tel, > td.lc-meta--nu) > td.lc-actions:nth-child(n) { grid-row: 4; }
    /* A menu alone (no main action) stays on row 3, at the right of the meta:
       a chevron on its own line made every invoice row a line taller. */
    .lst tr:has(> td.lc-meta--tel, > td.lc-meta--nu) > td.lc-actions:not(:has(.row-main, button.primary, button.ghost)):nth-child(n) {
        grid-column: 2; grid-row: 3; align-self: center;
    }
    /* Une action portée par la case d'état (« Encaisser », « Rembourser ») se
       pose juste au-dessus du menu : avec les 2 px d'écart de la grille, les
       deux cibles se touchaient (18 octobre 2026). */
    .lst tr:has(> td.lc-etat :is(button, a)) > td.lc-actions:nth-child(n) { margin-top: 6px; }
    .lst td.lc-actions .row-actions { display: flex; align-items: center; gap: var(--rf-2); justify-content: flex-end; }
    .lst td.lc-actions :is(button.primary, button.ghost) {
        min-height: 44px; padding: 0 var(--rf-1);
        background: none; border: 0; box-shadow: none;
        color: var(--text); font-size: 14px; font-weight: 600;
        text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
    }
    .lst td.lc-actions :is(button.primary, button.ghost):active { background: var(--appui); transform: none; }
    .lst .row-menu > summary { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* A row that opens and offers nothing else says so with a chevron. */
    .lst tbody tr.openable:not(:has(td.lc-actions)) { padding-right: 34px; }
    .lst tbody tr.openable:not(:has(td.lc-actions))::after {
        content: ""; position: absolute; right: 16px; top: 50%;
        width: 7px; height: 7px; margin-top: -4px;
        border: solid var(--text-3); border-width: 0 1.6px 1.6px 0;
        transform: rotate(-45deg);
    }
}

/* ---- pager ----------------------------------------------------------- */

.pager { gap: var(--rf-3); margin-top: var(--rf-3); }
.pager .pager-nav { display: flex; align-items: center; gap: var(--rf-2); width: auto; }
.pager .pager-pos {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pager-size { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.pager-size select { min-height: 32px; min-width: 64px; padding-top: 4px; padding-bottom: 4px; }
button.pager-fleche {
    width: 36px; min-width: 36px; padding: 0;
    display: inline-grid; place-items: center;
}
button.pager-fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
    .pager { flex-wrap: nowrap; }
    .pager .pager-nav { display: flex; width: auto; grid-template-columns: none; }
    .pager-count { min-width: 0; }
    button.pager-fleche { width: 44px; min-width: 44px; min-height: 44px; }
}

/* Received invoices: the same row as every list, drawn on their own markup
   (title over subline, amount and state on the right, actions last). */
@media (min-width: 901px) {
    .inbox-carte {
        display: grid;
        /* Amount and links get room on a wide screen: at 170 / 200 px the
           due line broke on three lines and the links on two (18 Oct. 2026). */
        grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) minmax(180px, 240px);
        gap: var(--rf-2) var(--rf-4);
        align-items: start;
        min-height: 56px;
        padding: 12px 18px;
    }
    .inbox-carte__corps { grid-column: 1; }
    .inbox-carte__argent { grid-column: 2; min-width: 0; }
    .inbox-carte__actions { grid-column: 3; }
    .inbox-carte__pieces { grid-column: 1 / -1; }
}
.inbox-carte__corps { gap: 2px; }
.inbox-carte__tete { gap: 6px; font-size: 14px; }
.inbox-carte__tete > b { font-weight: 600; }
.inbox-carte__sous { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12.5px; color: var(--text-2); }
/* The separator trails its item, so a wrapped line never starts with « · ». */
.inbox-carte__sous > span:not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--text-3); }
.inbox-carte__sous .mono { font-family: inherit; }
.inbox-carte__argent { gap: 3px; text-align: right; }
.inbox-carte__argent > b { font-size: 14.5px; font-weight: 600; }
.inbox-carte__argent .sub { font-size: 12px; }
.inbox-carte__actions :is(button.primary, button.ghost) { min-height: 32px; }
.inbox-carte__liens { justify-content: flex-end; gap: var(--rf-2) var(--rf-3); }
.inbox-carte__liens a, .inbox-carte__liens button { font-size: 12px; color: var(--text-2); }

@media (max-width: 900px) {
    .inbox-carte {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--rf-2) var(--rf-3);
        align-items: start;
        padding: var(--rf-3) var(--rf-4);
    }
    .inbox-carte__corps { grid-column: 1; grid-row: 1; }
    .inbox-carte__argent:nth-child(n) { grid-column: 2; grid-row: 1; align-items: flex-end; flex: none; min-width: 0; max-width: 140px; }
    .inbox-carte__argent .sub { white-space: normal; }
    .inbox-carte__actions:nth-child(n) {
        grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap;
        align-items: center; justify-content: flex-end; gap: var(--rf-2);
    }
    .inbox-carte__actions :is(button.primary, button.ghost) {
        min-height: 44px; padding: 0 var(--rf-1);
        background: none; border: 0; box-shadow: none; color: var(--text);
        font-size: 14px; font-weight: 600;
        text-decoration: underline; text-underline-offset: 3px;
    }
    .inbox-carte__liens { flex-basis: 100%; }
    .inbox-carte__liens a, .inbox-carte__liens button { min-height: 32px; display: inline-flex; align-items: center; }
    .inbox-carte__pieces { grid-column: 1 / -1; }
    .inbox-carte__tete > b { font-size: 15px; }
}

@media (min-width: 861px) {
    .lb-outils { justify-content: flex-end; }
    .lb-recherche { max-width: 420px; }
}

/* ---- list details ------------------------------------------------------ */

.lst .lc-alerte { display: block; font-size: 12px; color: var(--warn); }
.lst .lc-unite { color: var(--text-2); font-weight: 400; }
.lst .lc-quantite { color: var(--text); font-weight: 600; }
.lst td.lc-choix input { width: auto; min-height: 0; margin: 0; }
.lst .lc-lettre { margin-top: 4px; }
.lst .lc-lettre > summary { cursor: pointer; font-size: 12px; color: var(--text-2); }
.lst .lc-lettre > div { white-space: pre-wrap; font-size: 12.5px; color: var(--text-2); margin-top: 8px; }
.lst td.lc-meta input.seuil { width: 100%; max-width: 88px; min-height: 32px; text-align: right; }

/* A list inside a card that already exists: rows on hairlines, no frame. */
@media (min-width: 901px) {
    .lst--imbrique .rf-table__head,
    .lst--imbrique .rf-table__row {
        padding-left: 0; padding-right: 0;
        background: transparent;
        border: 0; border-radius: 0;
        border-bottom: var(--filet) solid var(--line);
        box-shadow: none;
    }
    .lst--imbrique tbody .rf-table__row:last-child { border-bottom: 0; border-radius: 0; box-shadow: none; }
    .lst--imbrique .rf-table__row:hover { background: transparent; }
}
.lst--imbrique { margin-top: var(--rf-3); }

@media (max-width: 900px) {
    .lst--imbrique tbody tr.rf-table__row { padding-left: 0; padding-right: 0; background-position: left bottom; background-size: 100% var(--filet); }
    .lst tr:has(> td.lc-choix) { padding-left: 44px; }
    .lst td.lc-choix:nth-child(n) {
        position: absolute; left: 0; top: 0; bottom: 0; width: 44px;
        display: flex; align-items: center; justify-content: center;
        grid-column: auto; grid-row: auto;
    }
    .lst:not(.lst--imbrique) tr:has(> td.lc-choix) td.lc-choix:nth-child(n) { left: 4px; }
    .lst td.lc-meta--tel::before,
    .lst td.lc-meta--tel:nth-child(n)::before {
        display: inline; content: attr(data-label) " "; color: var(--text-3);
        text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400;
    }
    .lst td.lc-titre .lc-lettre { align-self: stretch; }
}

/* ---- loading: one placeholder for every list ----------------------------- */

:is(#invoicesCard, #quotesContent, #purchaseOrdersContent, #inboxCard, #stockContent,
    #recurringContent, #jobsContent, .lst-zone):empty::before {
    content: "";
    display: block;
    height: 168px;
    border: var(--filet) solid var(--line);
    border-radius: var(--carte-r);
    background:
        repeating-linear-gradient(to bottom,
            transparent 0 22px,
            var(--remplissage) 22px 34px,
            transparent 34px 56px) 18px 0 / 60% 100% no-repeat,
        var(--surface);
    animation: liste-attend 1.4s ease-in-out infinite alternate;
}
@keyframes liste-attend { from { opacity: .55; } to { opacity: 1; } }

/* ==========================================================================
   PAGE TABS — a segmented control under the page toolbar, like the panes
   of a macOS settings window. Markup and behaviour: « data-page-tabs » in
   index.html, ouvrirLOnglet() in app.js.
   ========================================================================== */

.segmented.onglets-page {
    display: flex; flex-wrap: nowrap; width: fit-content; max-width: 100%;
    margin: 0 0 var(--rf-5);
}
.segmented.onglets-page button { white-space: nowrap; flex: 0 0 auto; }
.onglets-menu { display: none; }

@media (max-width: 860px) {
    /* Up to four tabs: the bar scrolls inside itself, never the page. */
    .segmented.onglets-page {
        overflow-x: auto; overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .segmented.onglets-page::-webkit-scrollbar { display: none; }
    /* Tabs left out on a side fade into it (see marquerLeDefilement). */
    .segmented.onglets-page[data-deborde-droite] {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    .segmented.onglets-page[data-deborde-gauche] {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
    }
    .segmented.onglets-page[data-deborde-gauche][data-deborde-droite] {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    }

    /* Past four: a menu takes its place. */
    .segmented.onglets-page:has(+ .onglets-menu) { display: none; }
    .onglets-menu { display: block; width: 100%; margin: 0 0 var(--rf-5); }
}

/* The régie tabs, four since the grid has its own: on a phone the bar
   scrolls inside itself, like the page tabs, never the page. */
@media (max-width: 860px) {
    #regieTabs {
        display: flex; flex-wrap: nowrap; max-width: 100%;
        overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    }
    #regieTabs::-webkit-scrollbar { display: none; }
    #regieTabs button { flex: 0 0 auto; white-space: nowrap; }
}

/* ==========================================================================
   BRAND ACCENT — 17 October 2026. Actions and selection only.
   ========================================================================== */

/* Buttons stay ink (18 October 2026): the plum drew too much attention.
   It keeps the sidebar selection, links, focus and checked boxes. */

/* The sidebar selection: a tinted pill, the label in the accent. */
nav button[aria-current="page"],
nav button[aria-current="page"]:hover { background: var(--marque-soft); color: var(--marque-texte); }
@media (max-width: 860px) {
    nav button[aria-current="page"],
    nav button[aria-current="page"]:hover { background: transparent; color: var(--marque-texte); }
}

/* Row actions stay neutral: the accent marks the page's one main action,
   not every line of a list (Clore, Encaisser, Réceptionner…). */
button.primary.row-main,
td button.primary,
.lst button.primary,
.inbox-carte button.primary {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-control);
}
button.primary.row-main:hover,
td button.primary:hover,
.lst button.primary:hover,
.inbox-carte button.primary:hover {
    background: var(--accent-soft); color: var(--text);
    border-color: var(--accent);
}
button.primary.row-main:disabled,
td button.primary:disabled,
.lst button.primary:disabled,
.inbox-carte button.primary:disabled { background: var(--surface); opacity: .5; }

button.link { color: var(--marque-texte); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marque); }

/* The chosen segment is a raised white plate, as in macOS — no colour. */
.segmented { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.segmented button[aria-pressed="true"],
.segmented button[aria-selected="true"],
.segmented button[aria-pressed="true"]:hover,
.segmented button[aria-selected="true"]:hover {
    background: var(--surface); color: var(--text); font-weight: 600;
    box-shadow: 0 1px 2px rgba(21, 23, 30, .14), 0 0 0 .5px var(--line-strong);
}
:root[data-theme="dark"] .segmented { background: var(--bg); }
:root[data-theme="dark"] .segmented button[aria-pressed="true"],
:root[data-theme="dark"] .segmented button[aria-selected="true"] {
    background: var(--surface-2); color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 .5px var(--line-strong);
}
/* The brand name in the sidebar is a link to home, not a link to read. */
a.brand, a.brand:visited { color: inherit; }

/* ---- les factures reçues sans SIREN, sous le constat des Fournisseurs ---- */
.sans-siren { margin: 0 0 var(--rf-4); }
.sans-siren > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); min-height: 32px; display: inline-flex; align-items: center; }
.sans-siren__liste { list-style: none; margin: var(--rf-2) 0 0; padding: 0; }
.sans-siren__liste > li {
    display: flex; align-items: center; justify-content: space-between; gap: var(--rf-3);
    padding: var(--rf-3) 0; border-top: var(--filet) solid var(--line);
}
.sans-siren__quoi { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.sans-siren__liste button { flex: none; }
@media (max-width: 900px) {
    .sans-siren__liste > li { flex-direction: column; align-items: stretch; }
    .sans-siren__liste button { min-height: 44px; }
}

/* ---- l'en-tête de l'accueil : ce qui attend, et le facturé de l'année ----

   Au bureau large, côte à côte, même hauteur, alignés en haut. Une colonne
   seule quand l'autre bloc est vide, et sous le seuil — tablette, téléphone —
   l'empilement d'origine. Le seuil est celui où la grille des cartes passe à
   quatre par rangée. */
.tete-accueil > :empty { display: none; }
@media (min-width: 1280px) {
    .tete-accueil {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--rf-4); align-items: stretch;
        margin-bottom: var(--rythme, 18px);
    }
    .tete-accueil:has(> :empty) { grid-template-columns: minmax(0, 1fr); }
    .tete-accueil > div { display: flex; flex-direction: column; min-width: 0; }
    /* Les marges propres à chaque bloc empilé faussaient les hauteurs. */
    .tete-accueil > #homeTodo, .tete-accueil > #homeRappro { margin: 0; }
    .tete-accueil > div > .card { flex: 1; margin: 0; }
}

/* ---- les cibles au doigt -------------------------------------------------

   Au téléphone, quarante-quatre pixels pour tout ce qui se touche. La passe
   du 18 octobre 2026 a relevé des cibles de 20 à 36 px : les entrées du menu
   de ligne, le renvoi vers l'aide, les gestes des cartes d'achat, les boutons
   des tableaux ordinaires, le lien d'export et le choix du nombre par page.
   La hauteur s'ajoute par le rembourrage, sans changer le dessin au bureau. */
@media (max-width: 900px) {
    .row-menu-items > :is(a, button),
    .page-head .aide-renvoi,
    .inbox-carte :is(button, a),
    .card table:not(.lst__table) td :is(button, a.ghost),
    .bouton-lien,
    .pager-nav select,
    button.rm,
    button.doc-accent,
    .lst td.lc-meta input.seuil {
        min-height: 44px;
        display: inline-flex; align-items: center;
    }
    .row-menu-items > :is(a, button) { display: flex; }
    button.rm { min-width: 44px; justify-content: center; }
    /* La douchette passe sous le champ : côte à côte, l'invite était coupée
       à 153 px, et c'est le champ qu'on touche le plus sur cet écran. */
    .scan input { flex: 1 1 100%; }
    .scan button { flex: 1 1 100%; }
}

/* =====================================================================
   LE PANNEAU DE GAUCHE — 19 octobre 2026

   Trois défauts relevés au bac, à 1440 × 900. Neuf entrées empruntaient le
   pictogramme d'une autre. Le bloc d'identité prenait 186 px au pied de la
   colonne et coupait « Catalogue » à mi-hauteur : dix destinations sur
   vingt-quatre hors de vue, sans rien qui le dise. Il en reste quatre, et le
   fondu le dit. Et l'intitulé de groupe portait un « ▾ » de police,
   dessiné différemment par chaque système et plus petit que le texte.
   ===================================================================== */

@media (min-width: 861px) {
    .sidebar { gap: var(--rf-4); padding: var(--rf-5) var(--rf-3) var(--rf-3); }

    nav { gap: 1px; margin: 0 calc(-1 * var(--rf-1)); padding: 0 var(--rf-1); }

    nav button {
        min-height: 30px;
        padding: 0 var(--rf-2) 0 10px;
        gap: 10px;
        font-weight: 500;
        color: var(--text);
    }
    nav button:hover { background: var(--appui); }

    /* Le pictogramme un ton en dessous du libellé : on lit le mot, la forme
       sert à le retrouver. Il prend la marque avec l'entrée courante. */
    nav button .ic { width: 18px; height: 18px; opacity: 1; color: var(--text-2); }
    nav button:hover .ic { color: var(--text); }
    nav button[aria-current="page"] { font-weight: 600; }
    nav button[aria-current="page"] .ic { color: var(--marque-texte); }

    .nav-groupe {
        min-height: 0;
        margin-top: var(--rf-3);
        padding: var(--rf-1) var(--rf-2) var(--rf-1) 10px;
        border-radius: 6px;
        font-size: 11.5px; font-weight: 600;
        color: var(--text-3);
    }
    .nav-groupe:first-of-type { margin-top: var(--rf-2); padding-top: var(--rf-1); }
    .nav-groupe:hover { background: transparent; color: var(--text); }
    .nav-groupe[aria-expanded="false"] { padding-bottom: var(--rf-1); }

    /* Le chevron, tracé comme les pictogrammes : même trait, même arrondi. Il
       reste visible, sans quoi l'intitulé passe pour un titre et personne
       n'essaie de replier — mais en retrait, jusqu'au survol. */
    .nav-groupe::after {
        content: '';
        width: 12px; height: 12px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9.5 5 5 5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9.5 5 5 5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
        opacity: .55;
        transition: transform .15s var(--ease), opacity .15s var(--ease);
    }
    .nav-groupe:hover::after { opacity: 1; }

    /* Le fondu au bord qui cache encore des entrées (« marquerLesBords »). */
    nav.a-suivre {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    }
    nav.a-preceder {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px);
        mask-image: linear-gradient(to bottom, transparent, #000 24px);
    }
    nav.a-preceder.a-suivre {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 40px), transparent);
    }
}

/* ---- la ligne du compte ------------------------------------------------ */

.compte {
    flex: none;
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: var(--rf-2);
    border: var(--filet) solid var(--line);
    border-radius: var(--controle-r);
    background: var(--surface);
    color: var(--text);
    font: inherit; text-align: left;
    cursor: pointer;
    transition: background-color .15s var(--ease);
}
.compte:hover,
.compte:has(+ .compte-menu:popover-open) { background: var(--appui); }

/* Les initiales du dossier, dans la teinte de la marque : c'est le seul
   endroit de la colonne qui dise chez qui l'on est. */
.compte__sigle {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--marque-soft); color: var(--marque-texte);
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.compte__texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.compte__nom {
    font-size: 13px; font-weight: 600; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compte__siren {
    font-size: 11.5px; line-height: 1.25; color: var(--text-3);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.compte__fleches { width: 16px; height: 16px; color: var(--text-3); }

@media (max-width: 860px) {
    .compte { display: none; }
}

/* ---- le menu du compte -------------------------------------------------

   Il hérite du bloc d'identité ses règles et ses identifiants ; on lui retire
   ce qui faisait de ce bloc une carte posée dans la colonne. */
.compte-menu[popover] {
    position: fixed; inset: auto; margin: 0;
    width: 248px;
    padding: var(--rf-3);
    border: var(--filet) solid var(--line);
    border-radius: 12px;
    background: var(--surface); color: var(--text);
    box-shadow: var(--ombre-dialogue);
    font-size: var(--t-2);
}
.compte-menu:popover-open { animation: compte-monte .14s var(--ease); }
@keyframes compte-monte { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
    .compte-menu:popover-open { animation: none; }
}

.compte-menu .who { font-size: 14px; line-height: 1.3; }
.compte-menu .who:hover { color: var(--marque-texte); }
.compte-menu .siren { font-size: 12px; margin-top: 2px; }

.compte-menu__titre {
    margin-top: var(--rf-3); padding-top: var(--rf-3);
    border-top: var(--filet) solid var(--line);
    font-size: 11.5px; font-weight: 600; color: var(--text-3);
}

.compte-menu__filet {
    margin: var(--rf-3) 0 var(--rf-1);
    border: 0; border-top: var(--filet) solid var(--line);
}

/* La déconnexion, en entrée de menu et non en bouton encadré : elle est seule
   de son espèce ici, et le cadre la faisait passer pour l'action principale
   de la colonne. */
.compte-menu #logoutBtn {
    display: flex; align-items: center; gap: var(--rf-2);
    margin-top: 0; padding: 7px var(--rf-2);
    border: 0; border-radius: 8px;
    color: var(--text); text-align: left;
}
.compte-menu #logoutBtn:hover { background: var(--appui); color: var(--text); }
.compte-menu #logoutBtn .ic { width: 17px; height: 17px; color: var(--text-2); opacity: 1; }
.compte-menu .version-tag { display: block; margin: var(--rf-2) var(--rf-2) 0; }

/* =====================================================================
   LES PIÈCES S'EMPILENT — 19 octobre 2026

   « Détacher les factures dans la page de liste, pour avoir un effet
   d'empilement ; autrement ça fait comme si on avait une liste unie. » La
   liste groupée du 17 octobre avait recollé les vignettes de septembre en une
   carte unique, pour que la liste des factures rejoigne les autres. Elle les
   rejoignait trop : une facture n'est pas une ligne de registre, c'est une
   pièce, et cinquante pièces se lisent comme une pile de feuilles.

   La distinction vaut pour toutes les listes, et c'est elle qui décide : les
   PIÈCES — factures, devis, bons de commande — s'empilent ; les FICHES —
   clients, fournisseurs, catalogue, stocks — restent un registre d'un seul
   tenant. La découpe de la dernière feuille et le liseré d'argent restent.
   ===================================================================== */

@media (min-width: 901px) {
    /* Le cadre s'efface : chaque feuille porte le sien. Le rembourrage
       repris en marge négative laisse leur ombre aux feuilles du bord, que la
       coupe du conteneur rognait. */
    .lst--pile.rf-table.card {
        background: transparent; border: 0; border-radius: 0; box-shadow: none;
        padding: 2px 6px 14px; margin: -2px -6px -14px;
    }

    /* L'en-tête pose ses intitulés sur la page, alignés sur les valeurs
       qu'ils nomment : rembourrage de la feuille, plus son filet. */
    .lst--pile .rf-table__head {
        min-height: 0;
        padding: 0 19px 8px;
        background: transparent; border: 0; border-radius: 0;
    }

    .lst--pile .rf-table__row,
    .lst--pile tbody .rf-table__row:first-child,
    .lst--pile tbody .rf-table__row:last-child {
        margin-bottom: 8px;
        border: var(--filet) solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: var(--shadow);
        transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
    }
    .lst--pile tbody .rf-table__row:last-child { margin-bottom: 0; }

    /* Le survol touche le cadre et l'ombre, jamais le fond : vingt-cinq
       feuilles qui changent de teinte au passage de la souris font clignoter
       la page. */
    .lst--pile .rf-table__row:hover {
        background: var(--surface);
        border-color: var(--line-strong);
        box-shadow: var(--shadow-lg);
    }

    /* Le liseré d'argent garde sa règle de septembre : trois pixels au bord
       gauche, sur une feuille à coins ronds. Plus spécifique que le cadre
       ci-dessus, il doit le rester. */
    .lst--pile .rf-table__row[data-argent="retard"]     { border-left: 3px solid var(--err); }
    .lst--pile .rf-table__row[data-argent="partiel"]    { border-left: 3px solid var(--warn); }
    .lst--pile .rf-table__row[data-argent="rembourser"] { border-left: 3px solid var(--owed); }

    /* La dernière feuille de la DERNIÈRE page se découpe en dents ; son bas
       n'a donc ni rayon ni filet. */
    .lst--pile table[data-fin] tbody .rf-table__row:last-child {
        border-bottom: 0;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        margin-bottom: 10px;
    }
}

/* =====================================================================
   LA PILE DES MESSAGES — 19 octobre 2026

   Au coin supérieur droit, le plus récent en haut. Chaque message porte son
   ton, son texte, sa croix, et une barre qui dit le temps qui reste (voir
   « toast() » dans app.js). Au téléphone, la pile prend la largeur sous la
   zone du système : le haut de l'écran est libre, le bas porte la barre
   d'onglets et le pouce.
   ===================================================================== */

.toasts[popover],
.toasts {
    position: fixed; inset: var(--rf-4) var(--rf-4) auto auto; margin: 0;
    width: min(380px, calc(100vw - 2 * var(--rf-4)));
    max-height: calc(100vh - 2 * var(--rf-4));
    padding: 0; border: 0; background: none; overflow: visible;
    display: none; flex-direction: column; gap: var(--rf-2);
    pointer-events: none;
    z-index: 70;
}
.toasts:popover-open { display: flex; }

.toast {
    position: relative;
    display: grid; grid-template-columns: 20px 1fr 28px; align-items: start; gap: 10px;
    padding: 12px 10px 14px 14px;
    background: var(--surface); color: var(--text);
    border: var(--filet) solid var(--line);
    border-radius: 12px;
    box-shadow: var(--ombre-dialogue);
    overflow: hidden;
    pointer-events: auto;
    animation: toast-entre .22s var(--ease);
}
.toast--sortie { animation: toast-sort .18s var(--ease) forwards; }

@keyframes toast-entre { from { opacity: 0; transform: translateX(16px); } }
@keyframes toast-sort { to { opacity: 0; transform: translateX(16px); } }

.toast__ic {
    width: 20px; height: 20px; margin-top: 1px;
    fill: none; stroke: var(--text-2); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.toast--ok .toast__ic { stroke: var(--ok); }
.toast--warn .toast__ic { stroke: var(--warn); }
.toast--err .toast__ic { stroke: var(--err); }

.toast__texte {
    margin: 1px 0 0;
    font-size: 13.5px; font-weight: 500; line-height: 1.4;
    overflow-wrap: anywhere;
}

.toast__fermer {
    width: 28px; height: 28px; margin: -4px 0 0;
    display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-3);
    cursor: pointer;
}
.toast__fermer:hover { background: var(--appui); color: var(--text); }
.toast__fermer svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
}

/* Le temps qui reste, en filet au pied du message, dans la couleur du ton.
   Il s'arrête avec le minuteur quand le pointeur est sur le message. */
.toast__temps {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--text-3); opacity: .35;
    transform-origin: left;
    animation: toast-temps var(--duree, 4s) linear forwards;
}
.toast--ok .toast__temps { background: var(--ok); opacity: .6; }
.toast--warn .toast__temps { background: var(--warn); opacity: .6; }
.toast--err .toast__temps { background: var(--err); opacity: .6; }
.toast--suspendu .toast__temps { animation-play-state: paused; }
@keyframes toast-temps { to { transform: scaleX(0); } }

@media (max-width: 860px) {
    .toasts[popover],
    .toasts {
        inset: calc(env(safe-area-inset-top) + var(--rf-2)) var(--rf-2) auto var(--rf-2);
        width: auto;
    }
    /* Quarante-quatre pixels pour la croix, comme toute cible au doigt ; la
       marge négative la garde dans le dessin du message. */
    .toast { grid-template-columns: 20px 1fr 32px; padding-block: 13px 15px; }
    .toast__fermer { width: 44px; height: 44px; margin: -12px -8px -12px -4px; }
    @keyframes toast-entre { from { opacity: 0; transform: translateY(-12px); } }
    @keyframes toast-sort { to { opacity: 0; transform: translateY(-12px); } }
}

/* Sans mouvement, la réserve globale ramène toute animation à un centième de
   milliseconde : la barre se viderait d'un coup et resterait vide. On la
   retire ; le message part à son délai et garde sa croix. */
@media (prefers-reduced-motion: reduce) {
    .toast, .toast--sortie { animation: none; }
    .toast__temps { display: none; }
}

/* =====================================================================
   LE CHOIX CHERCHABLE — 19 octobre 2026

   Le bouton prend le dessin exact d'un champ : même hauteur, même bordure,
   même halo au focus, même chevron. Un choix qui ressemblerait à un bouton
   d'action se lirait comme un geste, et non comme une valeur à donner. Le
   panneau reprend celui des prestations (« .completion »), avec une recherche
   en tête quand la liste est longue.
   ===================================================================== */

/* Le <select> reste dans la page, hors de vue : son étiquette, sa valeur et
   son « change » servent toujours, c'est le bouton qu'on voit. */
@media (min-width: 861px) {
    .choix__source {
        position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
        opacity: 0; pointer-events: none; clip-path: inset(50%);
    }
}

.choix {
    display: flex; align-items: center; gap: var(--rf-2);
    width: 100%;
    min-height: var(--controle-h);
    padding: var(--rf-2) 10px var(--rf-2) var(--rf-3);
    border: 1px solid var(--line-control);
    border-radius: var(--controle-r);
    background-color: var(--surface);
    color: var(--text);
    font: inherit; font-size: var(--t-2); line-height: 1.25; text-align: left;
    cursor: pointer;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
:root[data-theme="dark"] .choix { background-color: var(--surface-2); }
.choix:hover:not(:disabled) { border-color: var(--text-3); }
.choix:focus-visible,
.choix[aria-expanded="true"] {
    outline: 0;
    border-color: var(--anneau);
    box-shadow: 0 0 0 3px var(--halo);
}
.choix:disabled { opacity: .55; cursor: default; }

.choix__valeur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix--invite .choix__valeur { color: var(--text-3); }
.choix__chevron {
    flex: none; width: 16px; height: 16px;
    fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .15s var(--ease);
}
.choix[aria-expanded="true"] .choix__chevron { transform: rotate(180deg); }

@media (max-width: 860px) {
    .choix { display: none; }
}

/* Le panneau : la recherche reste en tête, seule la liste défile. */
.choix-panneau { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.choix-panneau[hidden] { display: none; }
.choix-panneau__cherche {
    flex: none;
    min-height: 34px;
    margin: 2px 2px 0;
    width: calc(100% - 4px);
}
.choix-panneau__liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* La liste reçoit le focus quand il n'y a pas de recherche ; c'est la ligne
   désignée qui porte la marque, pas le cadre entier. */
.choix-panneau__liste:focus-visible { outline: 0; }

/* La fiche déjà choisie : en gras, avec la coche du menu système. */
.choix-panneau .completion__choix.is-courant .completion__libelle { font-weight: 600; }
.choix-panneau .completion__choix.is-courant::after {
    content: '';
    flex: none; width: 14px; height: 14px;
    background: var(--marque-texte);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}