/* TALPPA Stock — charte TALPPA (thème clair uniquement), mobile d'abord.
   Source : talppa-control/docs/PRD_CHARTE_GRAPHIQUE_TALPPA.md. Aucune couleur hors des variables ci-dessous. */

/* ── Polices auto-hébergées (sous-ensemble latin, couvre le français) ───────────────────────── */
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/quicksand-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/quicksand-latin-700-normal.woff2") format("woff2"); }

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────────── */
:root {
  --primary: #2563eb;
  --primary-light: #eff6ff;
  --primary-dark: #1d4ed8;
  --primary-press: #1a3fb8;
  --accent: #03989E;

  --background: #f0f2f7;
  --surface: #ffffff;
  --surface-secondary: #f7f8fc;

  --ink: #111827;
  --ink-secondary: #374151;
  --ink-muted: #6b7280;

  --border: #e3e6ef;
  --border-dark: #c8cde0;

  --success: #16a34a;  --success-light: #f0fdf4;
  --warn: #d97706;     --warn-light: #fffbeb;
  --danger: #dc2626;   --danger-light: #fef2f2;
  --purple: #7c3aed;   --purple-light: #f5f3ff;
  --dark: #0f1117;

  --ring-primary: rgba(37, 99, 235, .10);
  --ring-danger: rgba(220, 38, 38, .10);
  --bord-primary: rgba(37, 99, 235, .20);
  --bord-danger: rgba(220, 38, 38, .20);
  --bord-success: rgba(22, 163, 74, .20);
  --voile: rgba(0, 0, 0, .30);

  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-logo: "Quicksand", var(--font-sans);

  --rayon-carte: 10px;
  --rayon-champ: 8px;
  --rayon-badge: 20px;
  --rayon-nav: 7px;
  --rayon-util: 6px;
  --ombre-carte: 0 1px 4px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .06);

  --largeur-menu: 200px;
  --hauteur-entete: 52px;
  --transition: 150ms ease;
}

/* ── Base ───────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  color: var(--ink); background: var(--background);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
code, .mono { font-family: var(--font-mono); font-size: .95em; }
.icone { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.icone-14 { width: 14px; height: 14px; }
.icone-20 { width: 20px; height: 20px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texte-attenue { color: var(--ink-muted); font-size: 13px; }
.pile > * + * { margin-top: 16px; }

/* ── Logo ───────────────────────────────────────────────────────────────────────────────────── */
.logo { margin: 0; font-family: var(--font-logo); font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: -.01em; }
.logo span { color: var(--accent); }
.logo small { font-family: var(--font-sans); font-weight: 500; font-size: .8em; color: var(--ink-muted); margin-left: 4px; }
.logo-grand { font-size: 24px; font-weight: 700; letter-spacing: -.02em; text-align: center; }

/* ── Boutons ────────────────────────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--rayon-champ);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: all var(--transition); text-decoration: none;
}
.bouton:hover { text-decoration: none; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.bouton:focus-visible, .action:focus-visible, .lien-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-primary); border-color: var(--primary); }
.bouton-primaire { background: var(--primary); color: #fff; }
.bouton-primaire:hover { background: var(--primary-dark); }
.bouton-primaire:active { background: var(--primary-press); }
.bouton-secondaire { background: var(--surface-secondary); color: var(--ink-secondary); border-color: var(--border-dark); }
.bouton-secondaire:hover { background: var(--border); color: var(--ink); }
.bouton-fantome { background: transparent; color: var(--ink-secondary); }
.bouton-fantome:hover { background: var(--surface-secondary); color: var(--ink); }
.bouton-danger { background: var(--danger-light); color: var(--danger); border-color: var(--bord-danger); }
.bouton-danger:hover { background: var(--danger); color: #fff; }
.bouton-large { width: 100%; }

/* ActionButton (tableaux, listes) : cible tactile 36px sur mobile, 28px sur ordinateur */
.action {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--rayon-util); background: var(--surface-secondary);
  color: var(--ink-secondary); font: 500 11px/1 var(--font-sans); cursor: pointer; transition: all var(--transition);
}
.action:hover { background: var(--border); color: var(--ink); }
.action-danger { background: var(--danger-light); color: var(--danger); border-color: var(--bord-danger); }
.action-danger:hover { background: var(--danger); color: #fff; }
.action-primaire { background: var(--primary-light); color: var(--primary); border-color: var(--bord-primary); }
.action-primaire:hover { background: var(--primary); color: #fff; }
.bouton-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--rayon-util); background: transparent; color: var(--ink-secondary); cursor: pointer;
}
.bouton-icone:hover { background: var(--surface-secondary); color: var(--ink); }

/* ── Formulaires ────────────────────────────────────────────────────────────────────────────── */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .etiquette { font-size: 11px; font-weight: 600; color: var(--ink-secondary); }
.champ .requis { color: var(--danger); font-size: 10px; }
.saisie, .liste {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--rayon-champ);
  background: var(--surface); color: var(--ink); font: 400 16px/1.3 var(--font-sans); /* 16px : pas de zoom iOS */
  outline: none; transition: all var(--transition);
}
.saisie::placeholder { color: var(--ink-muted); }
.saisie:focus, .liste:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-primary); }
.saisie[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--ring-danger); }
.liste { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.liste-compacte { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; width: auto; }
.mdp { position: relative; }
.mdp .saisie { padding-right: 44px; }
.mdp .bouton-icone { position: absolute; right: 0; top: 0; height: 100%; color: var(--ink-muted); }
.case { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-secondary); cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--primary); }
.ligne-formulaire { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ligne-formulaire .champ { flex: 1 1 220px; }
.aide { font-size: 11px; color: var(--ink-muted); }

/* ── Messages ───────────────────────────────────────────────────────────────────────────────── */
.alerte { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; border: 1px solid; border-radius: var(--rayon-champ); font-size: 13px; }
.alerte-erreur { background: var(--danger-light); border-color: var(--bord-danger); color: var(--danger); }
.alerte-info { background: var(--success-light); border-color: var(--bord-success); color: var(--success); }
.alerte .icone { margin-top: 2px; }
.lien-copie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.lien-copie code { word-break: break-all; color: var(--ink-secondary); }

/* ── Badges ─────────────────────────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--rayon-badge); font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-succes { background: var(--success-light); color: var(--success); }
.badge-alerte { background: var(--warn-light); color: var(--warn); }
.badge-neutre { background: var(--border); color: var(--ink-muted); }
.badge-primaire { background: var(--primary-light); color: var(--primary); }

/* ── Cartes ─────────────────────────────────────────────────────────────────────────────────── */
.carte { background: var(--surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: 16px; }
.carte > h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.carte + .carte { margin-top: 16px; }

/* ── Pages d'authentification ───────────────────────────────────────────────────────────────── */
.page-centree { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.carte-auth { width: 100%; max-width: 400px; padding: 24px; }
.carte-auth .logo-grand { margin-bottom: 4px; }
.carte-auth .sous-titre { text-align: center; color: var(--ink-muted); font-size: 13px; margin: 0 0 24px; }
.titre-carte { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.pied-auth { margin-top: 16px; text-align: center; font-size: 13px; }

/* ── Mise en page de l'application ──────────────────────────────────────────────────────────── */
.coque { display: flex; min-height: 100vh; min-height: 100dvh; }
.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 260px; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border); padding: 14px 0;
  transform: translateX(-100%); transition: transform 200ms ease-in-out;
}
.menu-ouvert .menu { transform: none; }
.voile { display: none; position: fixed; inset: 0; z-index: 30; background: var(--voile); border: 0; }
.menu-ouvert .voile { display: block; }
.menu-logo { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.menu-logo .bouton-icone { width: 32px; height: 32px; }
.menu nav { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.menu .bas { margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.section-nav { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); padding: 8px 8px 4px; }
.lien-nav {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--rayon-nav);
  font-size: 13px; font-weight: 500; color: var(--ink-muted); transition: background-color var(--transition), color var(--transition);
}
.lien-nav:hover { background: var(--surface-secondary); color: var(--ink-secondary); text-decoration: none; }
.lien-nav[aria-current="page"] { background: var(--primary-light); color: var(--primary); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entete {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: var(--hauteur-entete);
  padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.entete h1 { font-size: 15px; font-weight: 600; }
.entete .sous-titre { margin: 0; font-size: 12px; color: var(--ink-muted); }
.entete .titres { flex: 1; min-width: 0; }
.entete .qui { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
.contenu { padding: 16px; width: 100%; max-width: 960px; }

/* ── Listes (utilisateur·rices, sessions) : cartes empilées sur mobile ──────────────────────── */
.liste-elements { list-style: none; margin: 0; padding: 0; }
.element { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.element:first-child { border-top: 0; }
.element .identite { flex: 1 1 200px; min-width: 0; }
.element .nom { font-weight: 600; font-size: 14px; }
.element .courriel { font-size: 12px; color: var(--ink-muted); word-break: break-all; }
.element .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.element form { margin: 0; }
.vide { color: var(--ink-muted); font-size: 13px; padding: 8px 0; }

.accueil-vide { text-align: center; padding: 32px 16px; }
.accueil-vide p { margin: 12px 0 0; }
.accueil-vide .icone-grande { width: 40px; height: 40px; color: var(--primary); }
.accueil-vide h2 { font-size: 18px; margin: 12px 0 8px; }


/* ── Inventaire (phase 1b) ──────────────────────────────────────────────────────────────────── */
.alerte-avertissement { background: var(--warn-light); border-color: var(--warn); color: var(--warn); }
.bandeau { display: block; margin-bottom: 16px; }
.bandeau summary { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-weight: 600; }
.bandeau ul { margin: 8px 0; padding-left: 20px; color: var(--ink-secondary); font-size: 12px; word-break: break-word; }
.entete .bouton { height: 36px; padding: 0 12px; }
.texte-bouton { display: none; }
.fil { margin: 0 0 12px; font-size: 13px; color: var(--ink-muted); }
.fil a { display: inline-flex; align-items: center; gap: 4px; }

/* Recherche */
.recherche { margin-bottom: 12px; }
.barre-recherche { position: relative; }
.barre-recherche > .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.barre-recherche .saisie { padding-left: 38px; min-height: 48px; font-size: 16px; border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); border-color: transparent; }
.filtres { margin-top: 8px; }
.filtres > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-secondary); }
.filtres[open] > summary { margin-bottom: 8px; }
.filtres > .grille-champs, .filtres > p { background: var(--surface); border-radius: var(--rayon-carte); padding: 12px; }
.filtres > p { margin: 8px 0 0; padding: 8px 12px; }
.cases-filtres { justify-content: flex-end; gap: 10px; }
.min-max { display: flex; gap: 6px; }
.compteur { margin: 4px 2px 8px; font-size: 12px; color: var(--ink-muted); }
.grille-champs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.champ-large { grid-column: 1 / -1; }

/* Liste d'articles */
.liste-articles { list-style: none; margin: 0; padding: 4px 0; }
.carte.liste-articles { padding: 4px 12px; }
.article-ligne + .article-ligne { border-top: 1px solid var(--border); }
.lien-article { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink); }
.lien-article:hover { text-decoration: none; }
.lien-article:hover .titre-article { color: var(--primary); }
.vignette { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--rayon-champ); background: var(--surface-secondary);
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-muted); }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.corps-article { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.titre-article { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-article { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-article { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 600; font-size: 15px; text-align: right; }
.stock-bas { color: var(--warn); }
.suite { padding: 12px 0; text-align: center; border-top: 1px solid var(--border); }

/* Fiche */
.grille-fiche { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grille-fiche > div > .carte + .carte { margin-top: 16px; }
.carte h3.sous-titre-carte { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--ink-secondary); }
.compteur-stock { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 12px; }
.compteur-stock form { margin: 0; }
.bouton-stock { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--bord-primary); background: var(--primary-light);
  color: var(--primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); }
.bouton-stock:hover { background: var(--primary); color: #fff; }
.bouton-stock:disabled { opacity: .4; cursor: not-allowed; }
.valeur-stock { margin: 0; min-width: 96px; text-align: center; font-size: 32px; font-weight: 700; line-height: 1.1; }
.valeur-stock small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.niveaux { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.niveaux form { margin: 0; }
.ligne-compacte { margin-top: 8px; }
.ligne-compacte .champ { flex: 1 1 160px; }
.chemin { margin: 0 0 8px; font-size: 13px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 8px; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-champ); background: var(--surface-secondary); }
.caracteristiques { margin: 0; }
.caracteristiques > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.caracteristiques > div:first-child { border-top: 0; }
.caracteristiques dt { color: var(--ink-muted); font-size: 13px; }
.caracteristiques dd { margin: 0; font-weight: 500; text-align: right; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.caracteristiques + .caracteristiques { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-dark); }
.a-verifier dd { color: var(--warn); }
.provenance { font-size: 11px; font-weight: 400; color: var(--ink-muted); }
.notes { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Formulaire d'article */
.formulaire-article .carte + .carte, .formulaire-article .carte + .section-formulaire { margin-top: 16px; }
.carte-alerte { border: 1px solid var(--warn); }
.carte-alerte h2 { display: flex; align-items: center; gap: 8px; color: var(--warn); }
.unite { font-weight: 400; color: var(--ink-muted); }
.erreur-champ { font-size: 11px; color: var(--danger); }
.champ-a-verifier .saisie, .champ-a-verifier .liste { border-color: var(--warn); background: var(--warn-light); }
.lignes-libres { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ligne-libre { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
textarea.saisie { resize: vertical; font-size: 14px; }
.barre-actions { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 0; margin-top: 8px; background: var(--background); }

/* Emplacements */
.arbre { list-style: none; margin: 0; padding: 0; }
.arbre .arbre { padding-left: 16px; border-left: 1px solid var(--border); margin-left: 8px; }
.noeud { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: var(--rayon-util); color: var(--ink); }
.noeud:hover { background: var(--surface-secondary); text-decoration: none; }
.code-emplacement { font-weight: 500; }
.nom-emplacement { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* IA : moteurs, boîte « À traiter », analyse et relecture */
.titre-moteur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions-moteur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.etapes { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.etapes li + li { margin-top: 12px; }
.etapes p { margin: 8px 0 0; }
.code-connexion { display: inline-block; margin: 8px 0 0; padding: 8px 16px; font-size: 24px; font-weight: 700; letter-spacing: .12em;
  background: var(--primary-light); color: var(--primary); border-radius: var(--rayon-champ); }
.attente { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; color: var(--ink-secondary); }
.tourne { animation: tourner 1s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tourne { animation: none; } }
.grille-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.photo-boite { position: relative; display: block; cursor: pointer; border-radius: var(--rayon-champ); overflow: hidden;
  border: 2px solid transparent; background: var(--surface-secondary); }
.photo-boite img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.photo-boite input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--primary); }
.photo-boite:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-primary); }
.photo-boite .badge { position: absolute; bottom: 6px; left: 6px; }
.photo-occupee { cursor: not-allowed; opacity: .6; }
.miniatures { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.miniatures img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--rayon-util); background: var(--surface-secondary); }
.proposition h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.proposition h2 .texte-attenue { font-weight: 400; }
.proposition-traitee { opacity: .7; }
.meta-proposition { margin: 0 0 8px; font-size: 13px; color: var(--ink-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.decision { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--success); }
.questions { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin: 8px 0; border-radius: var(--rayon-champ);
  background: var(--primary-light); color: var(--ink-secondary); font-size: 13px; }
.questions ul { margin: 4px 0 0; padding-left: 18px; }
.questions .icone { color: var(--primary); margin-top: 2px; }
.doublons { margin: 8px 0; padding: 4px 12px; border: 1px solid var(--warn); border-radius: var(--rayon-champ); }
.doublons .sous-titre-carte { display: flex; align-items: center; gap: 6px; color: var(--warn); margin-top: 8px; }
.ajout-existant { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.champ-quantite .saisie { width: 80px; min-height: 32px; }
.proposition .barre-actions { position: static; background: none; padding-bottom: 0; }

/* ── Indicateur htmx ────────────────────────────────────────────────────────────────────────── */
.htmx-request .action, .htmx-request.action, .htmx-request .bouton { opacity: .6; pointer-events: none; }

/* ── Tablette et ordinateur ─────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .contenu { padding: 24px; }
  .texte-bouton { display: inline; }
  .grille-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtres .grille-champs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .entete { padding: 0 24px; }
  .entete .qui { display: inline-flex; }
  .carte { padding: 20px; }
  .carte-auth { padding: 32px; }
  .saisie, .liste { font-size: 13px; min-height: 36px; }
  .action { height: 28px; padding: 0 8px; }
}
@media (min-width: 1024px) {
  .menu { position: sticky; top: 0; height: 100vh; width: var(--largeur-menu); min-width: var(--largeur-menu); transform: none; }
  .voile, .ouvrir-menu, .menu-logo .bouton-icone { display: none !important; }
  .lien-nav { padding: 7px 10px; font-size: 12px; }
}
.lien-nav-bouton { width: 100%; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; }