/* ==========================================================
   FLORA — SOCLE ET COMPOSANTS
   ==========================================================

   Écrit à la main, sans étape de compilation : une retouche est
   visible au rafraîchissement. La chaîne Tailwind d'`assets/css/`
   n'est plus chargée — quatre de ses cinq fichiers de composants
   étaient restés vides et le dépôt n'utilisait aucune classe
   utilitaire dans ses gabarits, seulement `@apply` vers des
   classes sémantiques. Voir décision 054, D-8.

   Le reset ci-dessous est complet et autonome. Il vient
   précisément de là : `tailwind.css` n'était chargé que par
   `base.html`, si bien que `/propositions`, `/review-obligations`
   et `/supplier-invoices-due` rendaient listes, titres, liens et
   champs avec les valeurs par défaut du navigateur — trois pages
   sur cinq sur un socle typographique différent des deux autres.
   ========================================================== */

/* ============================ RESET ====================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--background);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--texte-base);
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.25;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    text-indent: 0;
}

summary {
    display: list-item;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================ COQUE ====================== */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pas-4);
    padding: var(--pas-4) var(--pas-8);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
}

.brand-icon {
    font-size: var(--texte-lg);
    line-height: 1;
}

.brand-name {
    color: var(--vert-fonce);
    font-size: var(--texte-md);
    font-weight: var(--graisse-forte);
    letter-spacing: -0.01em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--pas-4);
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
}

/* Retour à l'accueil : un vrai bouton, pas un lien de texte. Le lien
   discret existait déjà et ne se voyait pas — un contrôle de navigation
   présent sur toutes les pages doit se reconnaître comme tel. */
.button-lien {
    display: inline-block;
    padding: var(--pas-2) var(--pas-4);
    background: var(--accent-doux);
    color: var(--accent);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-forte);
    border: 1px solid transparent;
    border-radius: var(--radius-pilule);
    white-space: nowrap;
    transition: border-color var(--transition), filter var(--transition);
}

.button-lien:hover {
    border-color: var(--accent);
    filter: brightness(0.98);
}

.app-body {
    display: flex;
    flex: 1;
    align-items: flex-start;
}

/* ========================= NAVIGATION ==================== */

.sidebar {
    flex: 0 0 250px;
    padding: var(--pas-6) var(--pas-4);
    position: sticky;
    top: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--pas-1);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    padding: var(--pas-3) var(--pas-4);
    color: var(--texte-secondaire);
    font-size: var(--texte-base);
    font-weight: var(--graisse-moyenne);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}

.nav-link:hover {
    background: var(--surface);
    color: var(--texte);
}

/* L'onglet courant porte la couleur de sa propre section : la
   barre latérale devient elle-même un repère, pas seulement une
   liste de liens. */
.nav-link.active {
    background: var(--accent-doux);
    color: var(--accent);
    font-weight: var(--graisse-forte);
}

/* Des emoji depuis le 2026-08-11 : la propriétaire les a choisis contre
   des symboles dessinés au trait. Ils portent leur propre couleur, donc
   les deux règles qui teignaient les anciens glyphes (`⌂ ✿ ✎ ◇ □`) au
   gris tertiaire puis à l'accent de l'onglet actif n'avaient plus aucun
   effet et ont été retirées plutôt que laissées à mentir. */
.nav-icon {
    width: 20px;
    font-size: var(--texte-base);
    text-align: center;
    /* Sur Windows, la famille par défaut peut rendre certains emoji en
       noir et blanc là où la police dédiée les rend en couleur. */
    font-family: "Segoe UI Emoji", "Apple Color Emoji",
        "Noto Color Emoji", sans-serif;
    line-height: 1;
}

/* Le compteur d'un onglet — combien d'objets ouverts attendent derrière
   lui (demandé le 2026-08-11).

   `margin-left: auto` le pousse contre le bord droit de l'onglet : les
   trois compteurs s'alignent quelle que soit la longueur du libellé, et
   la colonne ainsi formée se lit d'un coup d'œil.

   Il n'emprunte pas `.count`, qui peint en aplat d'accent : sur un
   onglet actif, déjà peint de la même teinte, la pastille aurait
   disparu dans son propre fond. */
.nav-count {
    margin-left: auto;
    padding: 1px var(--pas-2);
    min-width: 1.6em;
    background: var(--surface-douce);
    border: 1px solid var(--border);
    color: var(--texte-secondaire);
    font-size: var(--texte-xs);
    font-weight: var(--graisse-forte);
    font-variant-numeric: tabular-nums;
    text-align: center;
    border-radius: var(--radius-pilule);
}

.nav-link.active .nav-count {
    background: var(--surface);
    border-color: currentColor;
    color: inherit;
}

.nav-separator {
    height: 1px;
    margin: var(--pas-3) var(--pas-4);
    background: var(--border);
}

/* Largeur fluide, bornée seulement pour éviter des lignes de prose
   illisibles sur très grand écran. La valeur précédente — 860px fixes,
   centrés — laissait 60 % d'un écran de 1900px vides et imposait des
   milliers de pixels de défilement à une liste de 97 éléments. */
.main-content {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--pas-6) var(--pas-8) var(--pas-10);
}

/* ======================= GRILLE DE CARTES ================ */

/* Une liste longue occupe la largeur disponible : trois colonnes sur un
   grand écran, une seule sur téléphone, sans point de rupture à
   maintenir. `min(100%, …)` empêche la colonne de déborder quand la
   fenêtre est plus étroite que la largeur minimale demandée — sans lui,
   un écran de 360px produirait un défilement horizontal. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: var(--pas-3);
    align-items: start;
}

/* Les cartes riches (tableaux de faits, recommandations) ont besoin de
   plus de largeur avant de se juxtaposer. */
.card-grid-large {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}

.card-grid > .card,
.card-grid > .conversation-group {
    margin-bottom: 0;
}

/* ============================ CARTES ===================== */

.card {
    margin-bottom: var(--pas-4);
    padding: var(--pas-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--ombre-douce);
}

/* Une liste de 177 cartes ne peut pas garder la respiration d'une
   carte isolée. Le filet d'accent à gauche remplace l'espace
   perdu comme repère visuel. */
.card-compact {
    margin-bottom: var(--pas-3);
    padding: var(--pas-4) var(--pas-5);
    border-left: 3px solid var(--accent);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.card-compact:hover {
    box-shadow: var(--ombre);
}

.card h1,
.page-title {
    margin-bottom: var(--pas-2);
    color: var(--vert-fonce);
    font-size: var(--texte-2xl);
    font-weight: var(--graisse-forte);
    letter-spacing: -0.02em;
}

.card h2 {
    margin-bottom: var(--pas-4);
    color: var(--texte);
    font-size: var(--texte-lg);
    font-weight: var(--graisse-forte);
    letter-spacing: -0.01em;
}

.card h3 {
    margin-top: var(--pas-5);
    margin-bottom: var(--pas-3);
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-forte);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Ce qui distingue une carte des autres — jamais enfoui dans la
   liste des attributs. */
.card-headline {
    margin-bottom: var(--pas-1);
    color: var(--texte);
    font-size: var(--texte-md);
    font-weight: var(--graisse-forte);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.card-compact .card-headline {
    margin-bottom: var(--pas-2);
}

/* Contexte secondaire : présent, jamais concurrent de l'en-tête. */
.card-meta {
    display: block;
    margin-bottom: var(--pas-3);
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
}

.card p {
    margin-bottom: var(--pas-3);
}

.card p:last-child {
    margin-bottom: 0;
}

.card-warning {
    margin-bottom: var(--pas-3);
    padding: var(--pas-3) var(--pas-4);
    background: var(--alerte-doux);
    border-left: 3px solid var(--alerte);
    border-radius: var(--radius-sm);
    font-size: var(--texte-sm);
}

.subtitle {
    margin-bottom: var(--pas-6);
    color: var(--texte-secondaire);
    font-size: var(--texte-md);
}

/* Bandeau d'accueil : la seule carte qui porte la couleur en aplat. */
.hero {
    margin-bottom: var(--pas-5);
    padding: var(--pas-8);
    background: linear-gradient(135deg, var(--accent-doux), var(--rose-clair));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.hero .page-title {
    margin-bottom: var(--pas-2);
}

.hero-note {
    margin-top: var(--pas-5);
    padding-top: var(--pas-4);
    border-top: 1px solid var(--border);
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
}

/* ========================== PASTILLES ==================== */

.pill {
    display: inline-block;
    margin: 0 var(--pas-1) var(--pas-1) 0;
    padding: 3px var(--pas-3);
    background: var(--accent-doux);
    color: var(--accent);
    font-size: var(--texte-xs);
    font-weight: var(--graisse-moyenne);
    border-radius: var(--radius-pilule);
    white-space: nowrap;
}

.pill-neutre {
    background: var(--background);
    color: var(--texte-secondaire);
}

/* Attire l'œil sans crier : « en attente de confirmation » est un état
   à connaître, jamais une alerte — la commande n'est pas en danger,
   elle n'est pas encore ferme. Emprunte l'ambre des points à vérifier
   plutôt que l'accent de la section, qui la rendrait indistincte des
   autres pastilles. */
.pill-attention {
    background: var(--accent-verifier-doux);
    color: var(--accent-verifier);
}

/* Qui a écrit un dossier (décision 096).

   Une teinte à elle, ni l'accent de la section — qui la rendrait
   indistincte des autres pastilles — ni l'ambre des dates passées, qui
   appelle une attention qu'un expéditeur ne mérite pas. Elle se repère
   sans crier : c'est un repère de lecture, pas un signal. */
.pill-origine {
    background: var(--surface-douce);
    border: 1px solid var(--border-forte);
    color: var(--texte-secondaire);
    font-weight: var(--graisse-forte);
}

/* Une pastille qui est un lien (décision 099) : « Ouvrir dans Gmail »,
   sur chaque ligne de la vue d'ensemble.

   Elle doit se voir comme cliquable au milieu de pastilles qui ne le
   sont pas — c'est tout ce qui la distingue, et sans quoi elle serait
   un lien caché. D'où l'accent de la section, le soulignement au
   survol, et un `cursor` explicite : `a` sans `href` n'en porte aucun,
   et `.pill` impose déjà son propre affichage.

   Ni ambre ni rouge : ouvrir un mail est une commodité, jamais une
   alerte (059). */
.pill-lien {
    background: var(--accent-doux);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: var(--graisse-forte);
    text-decoration: none;
    cursor: pointer;
}

.pill-lien:hover,
.pill-lien:focus-visible {
    background: var(--accent);
    color: var(--accent-contraste);
    text-decoration: underline;
}

.count {
    display: inline-block;
    padding: 2px var(--pas-3);
    background: var(--accent);
    color: var(--accent-contraste);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-forte);
    border-radius: var(--radius-pilule);
}

/* ========================= CONNEXION ===================== */

.page-connexion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--pas-4);
}

.connexion-panneau {
    width: 100%;
    max-width: 420px;
    padding: var(--pas-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--ombre);
}

.connexion-panneau .brand {
    margin-bottom: var(--pas-5);
}

.connexion-panneau .page-title {
    margin-bottom: var(--pas-1);
}

.connexion-panneau .subtitle {
    margin-bottom: var(--pas-5);
}

.connexion-panneau button {
    width: 100%;
}

/* Le bouton de déconnexion vit dans un formulaire, qui sans cela
   pousserait les actions de la barre supérieure à la ligne. */
.form-inline {
    display: inline;
}

/* =========================== AGENDA ====================== */

/* Un titre d'horizon, pas un titre de carte : la carte s'appelle « Ce
   qui arrive », les horizons la découpent. Ligne de séparation au-dessus
   plutôt qu'un fond, pour que quatre sections empilées ne ressemblent
   pas à quatre cartes. */
.agenda-titre {
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    margin: var(--pas-5) 0 var(--pas-3);
    padding-top: var(--pas-4);
    border-top: 1px solid var(--border);
    font-size: var(--texte-base);
    font-weight: var(--graisse-forte);
}

.agenda-titre:first-of-type {
    margin-top: var(--pas-3);
    padding-top: 0;
    border-top: none;
}

.agenda-note {
    margin-bottom: var(--pas-3);
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
}

.agenda-past {
    margin-top: var(--pas-5);
    padding-top: var(--pas-4);
    border-top: 1px solid var(--border);
}

.agenda-past > summary {
    display: flex;
    align-items: center;
    gap: var(--pas-3);
    font-weight: var(--graisse-forte);
    cursor: pointer;
}

/* Les dates passées, et elles seules (décision 092).

   La propriétaire proposait du rouge, pour marquer la criticité, et a
   retenu l'ambre après instruction. Le motif tient en une mesure : le
   2026-08-10, cette section est tombée de 26 lignes à 3 en quelques
   minutes — non parce que le retard avait été rattrapé, mais parce que
   la propriétaire a déclaré terminé ce qui l'était déjà. Vingt-trois
   des vingt-six lignes n'étaient pas des problèmes.

   Flora ne sait pas si ces échéances ont été honorées, et le dit sous
   ce pli. Le rouge affirmerait un problème là où elle n'a qu'une date
   dépassée ; l'ambre dit « regardez », ce qui est exactement ce qu'elle
   sait. La règle 059 est ainsi tenue : la couleur suit un fait — la
   date est passée — jamais un jugement.

   **La teinte a changé le 2026-08-11 (décision 101), le motif non.**
   L'ambre a été reprise par la propriétaire — non parce qu'elle criait
   trop, mais parce qu'elle ne disait plus rien : la même teinte servait
   l'accent de « Points à vérifier », la pastille « En attente de
   confirmation », `--alerte` et ce pli. Le rose de l'identité Casa
   Flora la remplace, et il tient la même promesse — il se remarque
   sans accuser.

   Réserve dite à la propriétaire et écartée par elle : ce rose est
   voisin du framboise de « Factures à suivre », alors que la moitié de
   ce pli est précisément une facture. */
.agenda-depassee > summary {
    background: var(--depassee-doux);
    color: var(--depassee);
}

/* Les dossiers sans date (décision 101).

   Ce pli existe depuis la 093 et n'avait aucune teinte. Ce qui manque
   ici n'est pas une urgence mais une **information** : la couleur doit
   dire « incomplet », jamais « en retard ». D'où un gris-bleu froid et
   franchement désaturé, qui se tient en retrait — et qui, surtout, ne
   se confond pas avec le pli des dates passées juste au-dessus. Les
   deux se lisent d'un coup d'œil comme deux états différents, ce qui
   est tout l'objet de cette décision. */
.agenda-sans-date > summary {
    background: var(--sans-date-doux);
    color: var(--sans-date);
}

/* =========================== LISTES ====================== */

.entry-list {
    display: flex;
    flex-direction: column;
    gap: var(--pas-3);
    margin-bottom: var(--pas-5);
}

.entry-list li {
    padding: var(--pas-3) var(--pas-4);
    background: var(--surface-douce);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}

.entry-list strong {
    display: block;
    font-weight: var(--graisse-forte);
}

.card ul:not(.entry-list):not(.sidebar-nav) li {
    position: relative;
    margin-bottom: var(--pas-2);
    padding-left: var(--pas-4);
}

.card ul:not(.entry-list):not(.sidebar-nav) li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.conversation-group {
    margin-bottom: var(--pas-5);
    padding-left: var(--pas-4);
    border-left: 2px dashed var(--border-forte);
}

/* ============================ LIENS ====================== */

.card a,
.entry-list a {
    color: var(--accent);
    font-weight: var(--graisse-moyenne);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition);
}

.card a:hover,
.entry-list a:hover {
    border-bottom-color: var(--accent);
}

/* ========================= DÉPLIANTS ===================== */

details {
    margin-top: var(--pas-4);
}

summary {
    display: inline-block;
    padding: var(--pas-2) var(--pas-4);
    background: var(--accent-doux);
    color: var(--accent);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-moyenne);
    border-radius: var(--radius-pilule);
    list-style: none;
    transition: filter var(--transition);
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    content: "▸ ";
}

details[open] > summary::before {
    content: "▾ ";
}

summary:hover {
    filter: brightness(0.96);
}

details > form,
details > ul {
    margin-top: var(--pas-4);
}

/* ============== UNE HISTOIRE, REPLIÉE ==================== */

/* Demandé par la propriétaire le 2026-08-11 : ne dérouler que le
   dossier qui l'intéresse. La page en dépliait 22 d'un coup.

   Le résumé n'est pas une pastille : il porte l'en-tête de la carte,
   qui doit continuer de se lire comme un titre. Il annule donc tout ce
   que la règle générale `summary` peint — c'est le seul dépliant du
   dépôt dont le résumé soit le contenu principal, et non une étiquette
   posée sur un supplément. */
.dossier {
    /* Premier enfant de la carte : la marge haute des dépliants
       ordinaires creuserait un vide au-dessus du titre. */
    margin-top: 0;
}

.dossier-resume {
    display: flex;
    align-items: baseline;
    /* Les pastilles d'origine (décision 104) peuvent porter jusqu'à 45
       caractères, et cinq cartes en affichent deux : sans repli, la
       date sortirait de l'écran sur un téléphone. La 057 a arbitré une
       mise en page fluide ; une ligne qui déborde la contredirait. */
    flex-wrap: wrap;
    gap: var(--pas-3);
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 0;
    cursor: pointer;
}

.dossier-resume:hover {
    /* La règle générale s'assombrit par `filter` — sans effet sur un
       fond transparent. */
    filter: none;
}

.dossier-resume:hover .card-headline {
    color: var(--accent);
}

.dossier-resume .card-headline {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* L'origine sur la ligne repliée (décision 104).

   Ne pousse jamais le titre : c'est lui qu'on lit d'abord, et il garde
   son `flex: 1`. Les pastilles se placent après, avant la date, et
   passent à la ligne plutôt que de comprimer quoi que ce soit. */
.dossier-origine {
    flex: 0 1 auto;
    min-width: 0;
}

.dossier-date {
    flex: 0 0 auto;
    color: var(--texte-tertiaire);
    font-size: var(--texte-xs);
    white-space: nowrap;
}

/* Un filet ne sépare le résumé du contenu que lorsqu'il y a un contenu
   à séparer. */
.dossier[open] > .dossier-resume {
    margin-bottom: var(--pas-3);
    padding-bottom: var(--pas-3);
    border-bottom: 1px solid var(--border);
}

/* Une colonne, jamais une grille : voir `diagnostic.html`. */
.dossier-liste > .card {
    margin-bottom: var(--pas-2);
}

/* Le titre d'un groupe de cartes — « Échéance proche ou dépassée »,
   « Sans échéance connue » (décision 090).

   Ne réemploie pas `.card h2`, qui vit *dans* une carte et sert d'en-tête
   de dossier : deux rôles différents, à deux niveaux différents. Sans
   cela, un titre de groupe et un titre de facture se ressembleraient,
   et la page perdrait ce que le groupement lui apporte. */
.groupe-titre {
    margin: var(--pas-6) 0 var(--pas-3);
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-forte);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.groupe-titre:first-of-type {
    margin-top: var(--pas-4);
}

/* ======================== FORMULAIRES ==================== */

form {
    margin-bottom: var(--pas-3);
}

form:last-child {
    margin-bottom: 0;
}

label {
    display: block;
    margin-bottom: var(--pas-3);
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-moyenne);
}

input[type="text"],
textarea {
    display: block;
    width: 100%;
    margin-top: var(--pas-2);
    padding: var(--pas-3) var(--pas-4);
    background: var(--surface);
    color: var(--texte);
    font-size: var(--texte-base);
    border: 1px solid var(--border-forte);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-doux);
}

textarea {
    min-height: 76px;
    resize: vertical;
}

button {
    padding: var(--pas-3) var(--pas-5);
    background: var(--accent);
    color: var(--accent-contraste);
    font-size: var(--texte-base);
    font-weight: var(--graisse-moyenne);
    border: none;
    border-radius: var(--radius-pilule);
    cursor: pointer;
    transition: filter var(--transition), transform var(--transition);
}

button:hover {
    filter: brightness(1.08);
}

button:active {
    transform: translateY(1px);
}

/* Le rejet ne doit jamais avoir le poids visuel de l'approbation. */
.button-secondaire {
    background: var(--surface);
    color: var(--texte-secondaire);
    border: 1px solid var(--border-forte);
}

.button-secondaire:hover {
    background: var(--background);
    filter: none;
}

/* =========================== TABLEAUX ==================== */

/* Un tableau à trois colonnes dans une carte de 380px déborderait sur
   téléphone : il défile horizontalement dans son propre conteneur,
   jamais la page entière. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card table {
    width: 100%;
    min-width: 300px;
    margin-top: var(--pas-3);
    font-size: var(--texte-sm);
}

.card th {
    padding: var(--pas-2) var(--pas-3);
    background: var(--background);
    color: var(--texte-secondaire);
    font-weight: var(--graisse-forte);
    text-align: left;
    text-transform: uppercase;
    font-size: var(--texte-xs);
    letter-spacing: 0.05em;
}

.card th:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.card th:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.card td {
    padding: var(--pas-3);
    border-bottom: 1px solid var(--border);
}

/* Une fiche, pas une feuille de calcul : deux colonnes étiquette/valeur,
   sans ligne d'en-tête (décision 078). L'étiquette est mise en retrait
   par sa couleur, jamais par le style `th` — celui-ci est en capitales
   et en très petit corps, ce qui convient à un intitulé de colonne et
   rendrait « CLIENT », « PRODUIT » illisibles ligne après ligne. */
.card .fiche td:first-child {
    width: 42%;
    color: var(--texte-secondaire);
}

.card tr:last-child td {
    border-bottom: none;
}

/* ========================== RÉPONSIF ===================== */

/* Tablette et petit portable : la barre latérale passe au-dessus du
   contenu et devient une rangée d'onglets. */
@media (max-width: 900px) {
    .app-body {
        flex-direction: column;
    }

    .sidebar {
        flex: none;
        position: static;
        width: 100%;
        padding: var(--pas-3) var(--pas-4);
        border-bottom: 1px solid var(--border);
    }

    /* Défilement horizontal plutôt que retour à la ligne : cinq onglets
       empilés sur trois rangées repousseraient le contenu hors de
       l'écran dès l'ouverture. */
    .sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--pas-2);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 0 auto;
        padding: var(--pas-2) var(--pas-3);
        font-size: var(--texte-sm);
        white-space: nowrap;
    }

    .nav-separator {
        display: none;
    }

    .main-content {
        padding: var(--pas-5) var(--pas-4) var(--pas-8);
    }

    .topbar {
        padding: var(--pas-3) var(--pas-4);
    }

    .hero {
        padding: var(--pas-5);
    }
}

/* Téléphone : chaque pixel horizontal compte, et la typographie
   d'affichage doit cesser de dominer l'écran. */
@media (max-width: 560px) {
    .main-content {
        padding: var(--pas-4) var(--pas-3) var(--pas-8);
    }

    .card,
    .hero {
        padding: var(--pas-4);
        border-radius: var(--radius);
    }

    .card-compact {
        padding: var(--pas-3) var(--pas-4);
    }

    .card h1,
    .page-title {
        font-size: var(--texte-xl);
    }

    .subtitle {
        font-size: var(--texte-base);
    }

    .brand-name {
        font-size: var(--texte-base);
    }

    /* Le nom du compte cède la place au bouton de retour. */
    .topbar-actions > span {
        display: none;
    }

    /* Un formulaire pleine largeur reste utilisable au pouce. */
    button {
        width: 100%;
    }

    .card-meta .pill {
        font-size: 11px;
    }
}

/* Le champ de recherche de « Ce que Flora a compris » (décision 084).
   Aligné en ligne, il retombe naturellement sur téléphone — le champ
   prend la largeur, les deux actions suivent. */
.recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
    margin-top: var(--pas-4);
}

.recherche input[type="search"] {
    flex: 1 1 16rem;
    min-width: 0;
    padding: var(--pas-2) var(--pas-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    color: inherit;
    background: var(--surface, transparent);
}