/* ==========================================================================
   CARILLON UI — Refonte 2026-07 (dossier design CarillonPro)
   Chargée en DERNIER : cette feuille porte les tokens officiels et la coquille.
   Elle a le dernier mot sur app.css, ui-revolution.css et theme-final.css,
   qui seront progressivement dégraissées au fil des lots (cible : 2 couches).

   Signature : copilote opérationnel français — bleu nuit (navigation),
   bleu France (action), blanc chaud (fond), vermillon (urgence/engagement
   uniquement), vert (succès confirmé uniquement). Pas d'orange.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS (tokens-design.json)
   -------------------------------------------------------------------------- */
:root {
  /* Palette officielle */
  --carillon-nuit: #071c3b;
  --carillon-bleu: #1546a0;
  --carillon-bleu-fonce: #0f3578;
  --carillon-rouge: #e63946;
  --carillon-vert: #168a4b;
  --blanc-chaud: #faf8f3;
  --surface: #ffffff;
  --surface-douce: #f3f6fa;
  --gris-bleute: #e8eef7;

  /* Re-cablage des variables historiques de l'app sur la palette officielle */
  --primary: var(--carillon-bleu);
  --primary-dark: var(--carillon-bleu-fonce);
  --success: var(--carillon-vert);
  --danger: var(--carillon-rouge);
  /* « warn » n'est plus orange : un état incomplet est un brouillon (gris). */
  --warn: #596579;
  --blue: var(--carillon-bleu);
  --rail: var(--carillon-bleu);
  --bg: var(--blanc-chaud);
  --panel: var(--surface);
  --ink: var(--carillon-nuit);
  --muted: #596579;
  --line: #d9e2ee;
  --sidebar: var(--carillon-nuit);
  --sector-soft: var(--gris-bleute);

  /* Surfaces teintées héritées : ramenées à des bleus/gris neutres */
  --soft-blue: #e8eef7;
  --soft-teal: #e8f3f0;
  --soft-amber: #f3f6fa;
  --soft-coral: #fdecee;
  --surface-soft: var(--surface-douce);
  --surface-teal: var(--surface-douce);
  --surface-blue: #eef3fb;
  --surface-cyan: #eef3fb;
  --surface-green: #e9f5ef;
  --surface-amber: var(--surface-douce);
  --surface-rose: #fdecee;
  --surface-red: #fdecee;
  --accent-teal: var(--carillon-bleu);
  --accent-indigo: var(--carillon-bleu);
  --accent-violet: var(--carillon-bleu);
  --accent-coral: var(--carillon-rouge);
  --accent-amber: var(--carillon-bleu-fonce);

  /* Variables ambre de theme-final : neutralisées à la source */
  --trade-accent: var(--carillon-bleu);
  --carillon-amber: var(--carillon-bleu);
  --carillon-amber-deep: var(--carillon-bleu-fonce);
  --carillon-amber-soft: var(--gris-bleute);
  --carillon-navy: var(--carillon-nuit);

  /* Formes et interactions (tokens-design.json) */
  --radius: 14px;          /* cartes */
  --radius-sm: 10px;       /* boutons */
  --radius-panel: 18px;    /* panneaux et modales */
  --focus-ring: 0 0 0 3px rgba(21, 70, 160, 0.28);
  --transition: 160ms ease;
  --shadow: 0 1px 2px rgba(7, 28, 59, 0.06);
  --shadow-hover: 0 4px 14px rgba(7, 28, 59, 0.1);
  --shadow-strong: 0 18px 40px rgba(7, 28, 59, 0.16);

  /* Typographie */
  --font-titres: Fraunces, Georgia, "Times New Roman", serif;
  --font-interface: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- Lot F refonte (audit patron UX/UI) — ÉCHELLE UNIQUE du design-system.
     SOURCE DE VÉRITÉ consommée par l'app cliente ET la refonte back-office (admin.css) :
     un seul système, deux surfaces. Adopter ces tokens plutôt que des px en dur ; ne
     JAMAIS les redéfinir localement (spacing hors-échelle = re-spacing visible). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --text-xs: 12px;    /* légendes, méta */
  --text-sm: 14px;    /* corps secondaire, chips */
  --text-base: 16px;  /* corps */
  --text-lg: 20px;    /* sous-titres */
  --text-xl: 28px;    /* titres de page */
  --grid-cols: 12;         /* grille de page desktop */
  --grid-cols-tablet: 8;   /* tablette */
  --grid-cols-mobile: 4;   /* mobile */
}

/* Un seul accent d'action pour TOUS les métiers : la différenciation se fait
   par le contenu (priorité, pages, vocabulaire), pas par la couleur.
   Gagne sur theme-final (chargée avant) à spécificité égale. */
body.ui-revolution { --amber: var(--carillon-bleu-fonce); }
body.ui-revolution.sector-bakery, body.sector-bakery,
body.ui-revolution.sector-bar, body.sector-bar,
body.ui-revolution.sector-salon, body.sector-salon,
body.ui-revolution.sector-artisan, body.sector-artisan,
body.ui-revolution.sector-tpe, body.sector-tpe,
body.ui-revolution.sector-immo, body.sector-immo,
body.ui-revolution.sector-garage, body.sector-garage,
body.ui-revolution[class*="sector-"], body[class*="sector-"] {
  --primary: var(--carillon-bleu);
  --primary-dark: var(--carillon-bleu-fonce);
  --rail: var(--carillon-bleu);
  --sector-soft: var(--gris-bleute);
  /* ui-revolution redéfinit aussi l'accent métier PAR SECTEUR (orange…) à une
     spécificité qui bat :root — rabattu ici même (cause racine trouvée par Design). */
  --trade-accent: var(--carillon-bleu);
  --trade-soft: var(--gris-bleute);
}

/* --------------------------------------------------------------------------
   2. FONDATIONS GLOBALES
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Inter;
  src: url("/vendor/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

body, body.ui-revolution {
  background: var(--blanc-chaud);
  color: var(--ink);
  font-family: var(--font-interface);
  font-size: 15.5px;
  line-height: 1.5;
}

/* Titres éditoriaux : sérif chaleureuse, jamais tronqués. */
h1, h2,
.topbar h1,
.panel-head h2,
.modal-card h2,
.panel > h2 {
  font-family: var(--font-titres);
  font-weight: 600;
  letter-spacing: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Chiffres tabulaires : montants, horaires, indicateurs. */
.pilotage-tile strong,
.planning-stat strong,
.admin-kpi-grid article strong,
.billing-kpis article strong,
.production-tracking-kpis article strong,
.kpi-foot b,
.calendar-time,
.planning-chip .chip-time,
.mp-row .h,
td[data-montant], .montant {
  font-variant-numeric: tabular-nums;
}

/* Boutons : rayon 10, action = bleu France, transitions courtes. */
button, .btn {
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition);
}

.btn.primary, button.primary,
body.ui-revolution .btn.primary, body .btn.primary {
  background: var(--carillon-bleu);
  border-color: var(--carillon-bleu);
  color: #ffffff;
}

.btn.primary:hover, button.primary:hover,
body.ui-revolution .btn.primary:hover, body .btn.primary:hover {
  background: var(--carillon-bleu-fonce);
  border-color: var(--carillon-bleu-fonce);
  filter: none;
}

/* Le destructif et l'engagement restent rouges — et seulement eux. */
.btn.danger, button.danger {
  background: var(--carillon-rouge);
  border-color: var(--carillon-rouge);
  color: #ffffff;
}

/* Cartes et panneaux : rayons du dossier, bordure gris bleuté, ombre légère. */
.panel, .item-card, .pilotage-tile, .planning-stat, .home-command,
.billing-card, .kanban-card, .production-product-card, .sec-card,
.admin-kpi-grid article, .billing-kpis article, .production-tracking-kpis article {
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.modal-card, .production-modal-card {
  border-radius: var(--radius-panel);
}

/* Focus clavier : anneau bleu France, visible partout. */
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, a:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 3px solid rgba(21, 70, 160, 0.3);
  outline-offset: 2px;
}

/* Restes ambre codés en dur dans app.css : rabattus sur la palette. */
.calendar-corner, .calendar-day-head { background: var(--surface-douce); }
.calendar-day-head.today { background: var(--gris-bleute); color: var(--carillon-bleu-fonce); }
.prod-subtab:hover { background: var(--surface-douce); }
.pilotage-gauge { background: var(--gris-bleute); }
.pilotage-tile:nth-child(2), .pilotage-tile:nth-child(3), .pilotage-tile:nth-child(4) {
  border-top-color: var(--line);
}
.pilotage-tile:nth-child(2) > svg, .pilotage-tile:nth-child(3) > svg, .pilotage-tile:nth-child(4) > svg {
  background: var(--gris-bleute);
  color: var(--carillon-bleu-fonce);
}
body .pilotage-tile b { color: var(--muted); }

/* États : jamais portés par la seule couleur — les libellés restent,
   on aligne simplement les fonds. Vert = confirmé uniquement. */
body .pilotage-tile.warn strong, body .planning-stat.warn strong { color: var(--muted); }
body .pilotage-tile.danger strong { color: var(--carillon-rouge); }
body .planning-stat.ok strong { color: var(--carillon-vert); }

/* --------------------------------------------------------------------------
   3. COQUILLE — SIDEBAR BLEU NUIT
   -------------------------------------------------------------------------- */
body.ui-revolution .sidebar, body .sidebar {
  background: var(--carillon-nuit);
  color: #e7edf7;
  border-right: none;
}

/* Wordmark : « Carillon.fr » sur une ligne, blanc sérif, .fr vermillon —
   exactement la maquette (pas d'icône, pas de sous-ligne métier). */
body .brand { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 12px; }
body .brand > div { display: block; order: -1; }
body .brand .brand-mark, body .brand-metier-line { display: none; }

/* Cloche de la maquette : trait fin, blanc sur bleu nuit, à droite du wordmark. */
body .brand-bell {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #dde6f3;
  cursor: pointer;
}
body .brand-bell:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
body .brand-bell svg { width: 21px; height: 21px; }
/* NC-005 — la cloche porte desormais la meme pastille que l'en-tete (copie
   synchronisee a chaque recalcul). Sans ancrage relatif, la pastille absolue
   se positionnait sur un ancetre lointain et sortait de la sidebar. */
body .brand-bell { position: relative; }
body .brand-bell .notification-count { top: 0; right: 0; }
body.ui-revolution .brand strong.brand-wordmark,
body .brand strong.brand-wordmark {
  display: inline;
  color: #ffffff;
  font-family: var(--font-titres);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
body.ui-revolution .brand strong.brand-wordmark span.brand-fr,
body .brand strong.brand-wordmark span.brand-fr {
  /* NC-012 — « .fr » = petit texte rouge sur bleu nuit. Le vermillon de marque
     (#e63946) ne donne que 4.07:1 ; teinte eclaircie dediee a 5.0:1 (AA) sans
     quitter la famille vermillon. Le token global --carillon-rouge reste inchange. */
  color: #f4515f;
  font-weight: 600;
}

/* Textes secondaires de la sidebar sur fond nuit */
body.ui-revolution .sidebar .field, body .sidebar .field,
body .installer-details summary,
body .sidebar-card span, body .sidebar-card p {
  color: #9fb0cc;
}
body .sidebar-card strong { color: #ffffff; }
body .sidebar-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}
body .installer-details {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}

/* Champs de la sidebar : lisibles sur bleu nuit */
body.ui-revolution .sidebar input, body.ui-revolution .sidebar select,
body .sidebar input, body .sidebar select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
body .sidebar select option { color: var(--ink); background: #ffffff; }

/* Navigation : libellés clairs, actif = pilule bleu France pleine largeur. */
body .sidebar .nav-btn { color: #c6d2e6; border-radius: var(--radius-sm); }
body .sidebar .nav-btn .nav-icon { stroke: #c6d2e6; }
body .sidebar .nav-btn:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
body .sidebar .nav-btn:hover .nav-icon { stroke: #ffffff; }
/* L'actif est TOUJOURS bleu France — y compris contre les couleurs métier
   codées en dur par theme-final (body.sector-* .nav-btn.active). */
body .nav-btn.active,
body[class*="sector-"] .nav-btn.active,
body.ui-revolution[class*="sector-"] .nav-btn.active {
  background: var(--carillon-bleu) !important;
  border-color: var(--carillon-bleu) !important;
  color: #ffffff !important;
  box-shadow: none;
}
body .nav-btn.active .nav-icon { stroke: #ffffff !important; }
body.ui-revolution .nav-btn.active::after { display: none; }

/* CONF-06 (relevé S6 sur les DONNÉES PATRON — invisible sur seed local) : le bloc
   Sécurité/2FA vit dans la sidebar SOMBRE (#071c3b) mais son texte héritait des
   couleurs pensées pour fond clair (--muted #596579) → 3.04:1 pour le statut, et
   2.08:1 (sévère) pour le libellé 11px « Politique de l'établissement ». On reprend
   le gris clair déjà employé par la nav de la sidebar (#c6d2e6 → ≈10:1). */
body .sidebar .security-2fa-status,
body .sidebar .field > span,
body .sidebar details > summary span { color: #c6d2e6; }

/* CONF-03 (relevé S6) — GARDE GLOBALE « mouvement réduit ». S6 a déjà prouvé le
   runtime à 0 résidu, mais 3 feuilles héritées (fournil, itinéraire, app.css) n'ont
   pas de branche dédiée. Plutôt que 3 branches à maintenir, un garde-fou UNIQUE :
   il neutralise animations et transitions partout, quelle que soit la feuille. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CONF-02 (relevé S6) — la signature du module plombier rendait 3.39:1 (#7c8698).
   On reprend le gris-bleu « muted » officiel (≈5.7:1 sur fond clair). Override par
   spécificité (body + classe) : carillon-plombier.css charge après, on ne touche
   pas au fichier de S5. */
body .plb-tagline { color: #596579; }

/* Lot F conformité (CONF-04, relevé S6) — CIBLES TACTILES ≥ 40 px (WCAG 2.5.8).
   Mesuré : .btn rendait 38 px, les chevrons du planning 34 px de large, les liens
   d'itinéraire 31-32 px. On pose un PLANCHER sans toucher aux paddings hérités
   (aucun re-spacing visible : +2 px sur les boutons, centrage sur les liens). */
body .btn { min-height: 40px; }
/* NB CONF-04 : le contournement !important posé ici a été RETIRÉ une fois la cause
   racine identifiée par S6 (ui-revolution.css:638, `body.ui-revolution .btn`,
   spécificité 0-2-1 qui battait ce plancher). Corrigé à la source — pas de hack. */
body .icon-btn.planning-icon-btn { min-width: 40px; min-height: 40px; }
body a.itineraire-address,
body button.itineraire-dist-ask {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Lot C refonte — sidebar allégée pour les métiers de CHANTIER/URGENCE (audit patron
   UX/UI). Stock, Fournisseurs et Livraisons servent aux commerces à inventaire
   physique (boulangerie, bar/restaurant qui déstocke ses consommables) ; ils n'ont
   pas de sens pour un plombier/électricien/peintre/BTP (tous key="artisan", cf.
   chantierSectors dans app.js). On les masque UNIQUEMENT pour ces métiers — les
   commerces les conservent. data-sector posé par renderAll (app.js). Réversible,
   profil-aware, jamais une suppression brutale qui casserait la nav commerce. */
body[data-sector="artisan"] .nav-bakery-only,
body[data-sector="artisan"] .bakery-only { display: none !important; }

/* NC-001 (prouvé par S5 au scan DOM du tenant plombier) : l'ATELIER BOULANGERIE
   se rendait hors secteur — actions « Produire » (pain), « Recettes de base » et
   tuile « Articles MP » à picto boulangerie. On gate les ACTIONS boulangères par
   métier (.bakery-only ci-dessus) ; on ne touche PAS aux sous-onglets structurels
   du stock (masquer le premier onglet actif casserait le panneau). */
/* Liste plate comme la maquette : les libellés de groupes disparaissent. */
body .nav-group-label { display: none; }

/* Le bloc technique installateur reste accessible mais discret, en bas. */
body .installer-details { margin-top: auto; }
body .sidebar .onboarding-open-btn, body .sidebar .logout-btn { margin-top: 6px; }

/* Boutons secondaires posés dans la sidebar (guide, déconnexion) */
body .sidebar .btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #e7edf7;
}
body .sidebar .btn.secondary:hover { background: rgba(255, 255, 255, 0.1); }

/* --------------------------------------------------------------------------
   4. COQUILLE — BARRE SUPÉRIEURE
   -------------------------------------------------------------------------- */
body .topbar {
  align-items: center;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

/* La maquette ne met pas de titre de page dans la barre : le titre vit dans
   le contenu (salutation ou tête de panneau). On garde la barre légère. */
body:not(.phone-mode) .topbar .topbar-title { display: none; }
body .topbar h1 { color: var(--ink); }
body .topbar .eyebrow { color: var(--muted); letter-spacing: 0.05em; }

/* Sélecteur d'établissement : en tête de barre, comme la maquette. */
body .topbar-etab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 6px 10px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
body .topbar-etab > svg {
  width: 21px;
  height: 21px;
  color: var(--carillon-bleu);
  flex: none;
}
body .topbar-etab select {
  min-height: 36px;
  max-width: 220px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-weight: 650;
  font-size: 0.95rem;
}
body .topbar-etab select:focus-visible { outline-offset: 0; }

/* Barre : une seule ligne — établissement, recherche au centre, actions, profil. */
body:not(.phone-mode) .topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
}
body:not(.phone-mode) .topbar-actions { flex: none; margin-left: auto; }

/* Recherche : pilule douce comme la maquette, toujours visible sur bureau. */
body .global-command-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
body .global-command-shell:focus-within { border-color: var(--carillon-bleu); }
@media (min-width: 1000px) {
  body.ui-revolution .global-command-shell {
    display: flex;
    flex: 1 1 auto;
    max-width: 460px;
    min-height: 44px;
  }
}

/* Pastille de notifications : le rouge signale, il ne décore pas. */
body .notification-count { background: var(--carillon-rouge); }

/* Profil : avatar rond + nom, comme la maquette. */
body .topbar-profile {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  font-weight: 650;
  font-size: 0.95rem;
  white-space: nowrap;
}
body .topbar-profile img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* Les commandes secondaires de la barre restent compactes (icône seule). */
body .topbar-actions .btn.secondary.icon-action span { display: none; }
body .topbar-actions .btn.secondary.icon-action { padding: 10px; }

/* NC-017 — menu « Plus » de la barre superieure : les outils secondaires
   (assistant, mode atelier, signalement, mise a jour) y sont regroupes.
   Dans le menu, les libelles REDEVIENNENT visibles (la regle ci-dessus les
   masque dans la barre) : un menu d'actions sans texte serait illisible. */
body .topbar-more { position: relative; }
body .topbar-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 4px;
  min-width: 232px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(7, 28, 59, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(7, 28, 59, 0.18);
}
body .topbar-more-menu.hidden { display: none; }
body .topbar-more-menu .btn.secondary.icon-action,
body .topbar-more-menu .autopilot-status {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start;
  text-align: left;
}
body .topbar-more-menu .btn.secondary.icon-action span { display: inline; }
body.ui-revolution .topbar-more-menu .autopilot-status > span:nth-child(2) { display: inline; }

/* La cloche principale vit dans la barre haute sur ordinateur. La copie de la
   marque reste disponible uniquement pour l'en-tete mobile. */
@media (min-width: 801px) {
  body .sidebar .brand-bell { display: none; }
}

/* --------------------------------------------------------------------------
   5. FILE DE VALIDATIONS ET ENGAGEMENTS (transversal, affiné au lot 3)
   -------------------------------------------------------------------------- */
/* Ce qui engage (envoi, commande, paiement) porte un liseré vermillon. */
body .validation-list .btn.primary { background: var(--carillon-bleu); }
body .alert { border-color: var(--carillon-rouge); }

/* --------------------------------------------------------------------------
   6. RESTES AMBRE HÉRITÉS (chips, bandeaux) — rabattus sur les états du dossier
   -------------------------------------------------------------------------- */
/* Bandeau de configuration : information => bleu, pas orange. */
body .onboarding-cta {
  background: var(--gris-bleute);
  border: 1.5px solid var(--carillon-bleu);
}
body .onboarding-cta span { color: var(--muted); }

/* Chips « warn » : un dossier incomplet est un brouillon (gris), pas une fête
   foraine. Sélecteurs renforcés : ui-revolution pose des ambres à plus forte
   spécificité (.item-head .badge.warn) qu'un simple body .badge.warn. */
body .badge.warn, body span.warn, body .chip.warn,
body.ui-revolution .badge.warn,
body.ui-revolution .item-head .badge.warn,
body .item-head .badge.warn,
body .stock-warning {
  background: var(--gris-bleute);
  color: #47536b;
  border-color: var(--line);
}
body .pilotage-tile.warn strong, body .planning-stat.warn strong { color: #47536b; }

/* --------------------------------------------------------------------------
   7. ACCUEIL MÉTIER (maquettes 01-07) — salutation, priorité, KPI, journée,
   validations. Reproduction fidèle de la maquette 01.
   -------------------------------------------------------------------------- */
/* Blocs hérités absents de la maquette : retirés de l'accueil desktop. */
body:not(.phone-mode) .tab-panel[data-panel="overview"] .automation-ribbon,
body:not(.phone-mode) .tab-panel[data-panel="overview"] .today-command-shell,
body:not(.phone-mode) .tab-panel[data-panel="overview"] .business-flow-shell,
body:not(.phone-mode) .tab-panel[data-panel="overview"] .pilotage-panel .panel-head,
body:not(.phone-mode) .refonte-legacy-hidden {
  display: none;
}

/* L'accueil coule librement : fin du verrou 100vh d'ui-revolution
   (grid-template-rows fige, hauteur calc(100vh...), overflow cache). */
body.ui-revolution .tab-panel[data-panel="overview"].active,
body.ui-revolution:not(.phone-mode) .tab-panel[data-panel="overview"].active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  gap: 16px;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* La grille de tuiles sort de son panneau : cartes posées sur le fond chaud. */
body .pilotage-panel { padding: 0; border: none; background: transparent; box-shadow: none; overflow: visible; }

body .home-greeting {
  margin: 18px 0 20px;
  font-family: var(--font-titres);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}

/* Carte de priorité : icône en pastille, verbe métier en grand, action à droite. */
body .priority-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 28px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body .priority-card.urgent { border: 1.5px solid var(--carillon-rouge); }
body .priority-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  background: var(--gris-bleute);
  color: var(--carillon-bleu);
}
body .priority-card.urgent .priority-icon { background: #fdecee; color: var(--carillon-rouge); }
body .priority-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body .priority-body { flex: 1; min-width: 0; }
body .priority-eyebrow { display: block; color: var(--carillon-bleu); font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; }
body .priority-card.urgent .priority-eyebrow { color: var(--carillon-rouge); }
body .priority-title {
  margin: 0;
  font-family: var(--font-titres);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.12;
}
body .priority-meta { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; }
body .priority-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 700;
}
body .priority-cta svg { width: 17px; height: 17px; }

/* KPI maquette : pastille d'icône, libellé haut-de-casse discret, valeur forte. */
body.ui-revolution .pilotage-grid { gap: 16px; grid-auto-rows: minmax(120px, auto); }
body.ui-revolution .pilotage-tile {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  min-height: 120px;
  padding: 18px;
  border-radius: var(--radius);
}
body.ui-revolution .pilotage-tile::after { display: none; }
body.ui-revolution .pilotage-tile > svg {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 50%;
  background: var(--gris-bleute);
  color: var(--carillon-bleu);
  stroke: currentColor;
}
/* Alerte réelle (stock sous seuil, urgence) = rouge, comme la maquette. */
body.ui-revolution .pilotage-tile.stock-tile.warn > svg { background: #fdecee; color: var(--carillon-rouge); }
body.ui-revolution .pilotage-tile.stock-tile.warn strong { color: var(--carillon-rouge); }
/* La tuile Assistant (décisions à valider) est BLEUE dans la maquette. */
body.ui-revolution .pilotage-tile.assistant-tile.warn > svg { background: var(--gris-bleute); color: var(--carillon-bleu); }
body.ui-revolution .pilotage-tile.assistant-tile.warn strong { color: var(--carillon-bleu-fonce); }
body.ui-revolution .pilotage-tile small { font-size: 0.72rem; letter-spacing: 0.05em; color: var(--muted); }
body.ui-revolution .pilotage-tile strong { font-size: 1.45rem; color: var(--ink); }
body.ui-revolution .pilotage-tile.warn strong { color: var(--carillon-rouge); }
body.ui-revolution .pilotage-tile.ok strong { color: var(--ink); }
body .pilotage-tile .kpi-foot b { color: var(--carillon-bleu); font-size: 0.82rem !important; }

/* Deux colonnes : Aujourd'hui | À valider aujourd'hui (maquette 01). */
@media (min-width: 1000px) {
  body:not(.phone-mode) .overview-action-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 16px;
    margin-top: 4px;
  }
}
@media (max-width: 999px) {
  body:not(.phone-mode) .overview-action-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* La file reste utilisable quand elle est longue : défilement interne borné. */
body .overview-action-strip .validation-list,
body .overview-action-strip .refonte-timeline {
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
}
body .refonte-today-panel .panel-head h2, body .validation-panel .panel-head h2 {
  font-family: var(--font-titres);
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
/* Chips des validations : proposition = bleu (le rouge reste aux urgences). */
body .validation-list .badge {
  background: var(--gris-bleute);
  color: var(--carillon-bleu-fonce);
  border-color: var(--line);
}

/* Photo produit dans la carte de validation (maquette 01 : le chocolat). */
body .validation-photo {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  background: var(--surface-douce);
}
body .validation-card .item-head { align-items: center; gap: 12px; }
body .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  color: var(--carillon-bleu);
  font-weight: 650;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 8px;
}
body .link-btn .head-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; }
body .valid-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--carillon-rouge);
  color: #ffffff;
  font-family: var(--font-interface);
  font-size: 0.82rem;
  font-weight: 800;
  vertical-align: middle;
}

/* Chronologie : heure, pastille sur ligne verticale, intitulé, état. */
body .refonte-timeline { display: grid; }
body .tl-row {
  display: grid;
  grid-template-columns: 52px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  position: relative;
}
body .tl-row + .tl-row::before {
  content: "";
  position: absolute;
  left: 71px;
  top: -14px;
  height: 22px;
  border-left: 2px dotted var(--line);
}
body .tl-time { color: var(--carillon-bleu-fonce); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
body .tl-dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--gris-bleute);
  background: var(--surface);
  color: var(--carillon-bleu);
  z-index: 1;
}
body .tl-dot svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
body .tl-body { min-width: 0; }
body .tl-body strong { display: block; font-size: 0.98rem; color: var(--ink); }
body .tl-body small { color: var(--muted); font-size: 0.84rem; }
body .tl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--gris-bleute);
  color: var(--carillon-bleu-fonce);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
body .tl-chip.done { background: #e9f5ef; color: var(--carillon-vert); }
body .tl-chip.done svg { width: 12px; height: 12px; }
body .tl-empty { color: var(--muted); font-size: 0.92rem; padding: 14px 4px; }

/* Signature de bas de page : sérif italique discrète, comme la maquette. */
body .home-tagline {
  margin: 26px auto 8px;
  text-align: center;
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 1.05rem;
  color: #7c8698;
}

/* --------------------------------------------------------------------------
   8. DÉTAIL CHANTIER (maquette 14) — bâtiment et peinture
   -------------------------------------------------------------------------- */
body .chantier-shell { z-index: 240; }
body .chantier-card {
  width: min(1060px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 28px 22px;
  background: var(--blanc-chaud);
}
body .chantier-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
body .chantier-head > div { flex: 1; min-width: 0; }
body .chantier-head h2 { margin: 0; font-family: var(--font-titres); font-size: clamp(1.5rem, 3vw, 2.1rem); }
body .chantier-head p { margin: 4px 0 0; color: var(--muted); font-size: 0.93rem; }
body .chantier-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 14px; border: 1px solid var(--carillon-vert); border-radius: 999px;
  color: var(--carillon-vert); font-weight: 700; font-size: 0.9rem; background: #ffffff;
}
body .chantier-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--carillon-vert); }

body .chantier-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
body .chantier-kpis article {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
body .chantier-kpis .kpi-ico {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 50%; background: var(--carillon-bleu); color: #ffffff;
}
body .chantier-kpis .kpi-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
body .chantier-kpis small { display: block; color: var(--muted); font-size: 0.8rem; }
body .chantier-kpis strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--ink); }

body .chantier-steps { display: flex; align-items: stretch; gap: 0; margin-bottom: 16px; flex-wrap: wrap; }
body .chantier-step {
  display: inline-flex; align-items: center; gap: 10px; flex: 1 1 150px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; position: relative;
}
body .chantier-step.current { border: 1.5px solid var(--carillon-bleu); }
body .chantier-step svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; flex: none; }
body .chantier-step strong { display: block; font-size: 0.94rem; }
body .chantier-step small { color: var(--muted); font-size: 0.76rem; }
body .chantier-step .step-check {
  margin-left: auto; width: 20px; height: 20px; padding: 3px; border-radius: 50%;
  background: var(--carillon-vert); stroke: #ffffff;
}
body .chantier-step-link { width: 14px; align-self: center; border-top: 1.5px solid var(--line); }

body .chantier-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
body .chantier-journal { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
body .chantier-journal figure { margin: 0; }
body .chantier-journal img { width: 100%; height: 86px; object-fit: cover; border-radius: 10px; display: block; }
body .chantier-journal figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
body .journal-note { color: var(--muted); font-size: 0.8rem; font-style: italic; margin: 10px 0 0; }

body .chantier-etapes { list-style: none; margin: 0; padding: 0; }
body .chantier-etapes li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gris-bleute); font-size: 0.93rem; }
body .chantier-etapes li:last-child { border-bottom: none; }
body .chantier-etapes li small { margin-left: auto; color: var(--carillon-rouge); font-weight: 650; white-space: nowrap; }
body .chantier-etapes li.done small { color: var(--muted); }
body .etape-dot {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border: 1.5px solid var(--line); border-radius: 50%; background: #ffffff;
}
body .chantier-etapes li.done .etape-dot { background: var(--carillon-vert); border-color: var(--carillon-vert); }
body .etape-dot svg { width: 12px; height: 12px; stroke: #ffffff; }

body .chantier-semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
body .sem-jour { text-align: center; }
body .sem-jour small { color: var(--muted); font-size: 0.72rem; }
body .sem-jour i { display: block; height: 26px; margin-top: 4px; border-radius: 6px; background: var(--gris-bleute); }
body .sem-jour i.busy { background: var(--carillon-bleu); }

/* Journal 3 colonnes (maquette) + bouton d'ajout bordé bleu. */
body .chantier-journal { grid-template-columns: repeat(3, 1fr); }
body .chantier-add-photo {
  border: 1px solid var(--carillon-bleu);
  color: var(--carillon-bleu);
  background: var(--surface);
  font-size: 0.85rem;
  padding: 8px 13px;
}

/* Équipe : avatars ronds côte à côte + planning par personne. */
body .equipe-count { color: var(--muted); font-family: var(--font-interface); font-size: 0.85rem; font-weight: 550; }
body .chantier-avatars { display: flex; gap: 7px; margin: 2px 0 12px; }
body .chantier-avatars img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
body .semaine-titre { margin: 0 0 8px; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
body .equipe-planning { display: grid; gap: 5px; margin-bottom: 14px; }
body .equipe-row { display: grid; grid-template-columns: minmax(86px, auto) repeat(6, 1fr); gap: 4px; align-items: center; }
body .equipe-row .equipe-nom { padding-right: 6px; line-height: 1.15; }
body .equipe-row .equipe-nom strong { display: block; font-size: 0.8rem; }
body .equipe-row .equipe-nom small { color: var(--muted); font-size: 0.68rem; }
body .equipe-row i { display: block; height: 16px; border-radius: 4px; background: var(--gris-bleute); }
body .equipe-row i.on { background: var(--carillon-bleu); }

body .chantier-decisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
body .chantier-decision {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
body .chantier-decision .decision-icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 50%; background: var(--carillon-rouge); color: #ffffff;
}
body .chantier-decision .decision-icon.blue { background: var(--carillon-bleu); }
body .chantier-decision .decision-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
body .chantier-decision > div { flex: 1; min-width: 0; }
body .chantier-decision .decision-montant { display: block; font-family: var(--font-titres); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
body .chantier-decision .decision-actions { display: flex; gap: 9px; flex: none; }
body .chantier-decision .btn { min-height: 46px; }

/* --------------------------------------------------------------------------
   9. CORRECTIONS DE RECETTE (rapport Tour de contrôle 14/07)
   -------------------------------------------------------------------------- */
/* B1 — le libellé des boutons pleins reste BLANC (le span héritait du gris). */
body .btn.primary span, body.ui-revolution .btn.primary span,
body .btn.primary strong, body .btn.danger span, body button.primary span {
  color: #ffffff;
}

/* B2 — plus aucun tableau large ne peut étirer le document : le réassort
   défile dans son panneau (la nav fixe suivait la largeur étirée). */
body .fournil-reassort { overflow-x: auto; }
body.phone-mode .fournil-reassort-table { min-width: 640px; }
body.phone-mode main, body.phone-mode .tab-panel { max-width: 100vw; overflow-x: clip; }

/* C1a — compteur « N à voir » de l'en-tête : bleu, plus ambre. */
body.ui-revolution .autopilot-status strong.attention,
body .autopilot-status strong.attention {
  color: var(--carillon-bleu-fonce);
}

/* C1b — onboarding : le métier sélectionné est bleu France pour TOUS les
   métiers (les couleurs d'accent par secteur sont mortes avec la refonte). */
body .onboarding-sector-options button.active,
body .onboarding-sector-options button[data-onboarding-sector].active {
  border-color: var(--carillon-bleu) !important;
  background: var(--gris-bleute) !important;
  color: var(--carillon-bleu-fonce) !important;
  box-shadow: 0 8px 18px rgba(21, 70, 160, 0.18) !important;
}
body .onboarding-sector-options button.active svg { color: var(--carillon-bleu); stroke: var(--carillon-bleu); }

/* C1c/C1d — chips de marge et décisions de production : l'attente est grise. */
body .margin-chip.warn { background: var(--gris-bleute); color: #47536b; }
body .production-decision.warn {
  border-color: var(--line);
  border-left-color: #47536b;
  background: var(--surface-douce);
}

/* C2 — contrastes AA : textes remontés au-dessus de 4.5. */
body .home-tagline { color: #596579; }
body .tl-chip { color: #144a86; }
body .chantier-etapes li small { color: #c9202e; }
body .priority-card.urgent .priority-eyebrow { color: #c9202e; }
body span.qty, body .qty { color: #47536b; }
#economyProspectStatus { color: #47536b; }
/* Bandeau « Validation humaine requise » et mentions vermillon sur fond clair */
body .carillon-approval, body [class*="approval"] strong, body .msg-approval {
  color: #c9202e;
}

/* D1 — cibles tactiles : 48px minimum au téléphone. */
body.phone-mode .btn, body.phone-mode button.primary, body.phone-mode .icon-btn {
  min-height: 48px;
}
body.phone-mode .nav .nav-btn { min-height: 52px; }

/* UX — le bouton destructif « Démarrer avec des données vides » se distingue. */
body .installer-details #resetBlankBtn { color: #ff9f9f; }
body .installer-details #resetBlankBtn .nav-icon { stroke: #ff9f9f; }

/* --------------------------------------------------------------------------
   10. PUNCH-LIST DE FINITION (re-test GO du Tour de contrôle)
   -------------------------------------------------------------------------- */
/* 1a. Pastilles produit : famille bleue uniquement (les variantes ambre/verte
   par position étaient posées en nth-child — neutralisées à spécificité égale). */
body .production-product-card:nth-child(n) .product-visual,
body .product-visual {
  background: var(--gris-bleute);
  color: var(--carillon-bleu-fonce);
}

/* 1b. « N décisions requises » (parcours client, visible en mobile) : bleu. */
body .business-flow-head > span.warn,
body.ui-revolution .business-flow-head > span.warn {
  background: var(--gris-bleute);
  color: var(--carillon-bleu-fonce);
}

/* 2. « Aucun conflit sur la période » : vert foncé (4.5+ sur fond de panneau). */
body .planning-banner:not(.conflict), body .planning-banner:not(.conflict) strong {
  color: #0e6b3a;
}

/* 3. Quantités et compteurs sur fonds de panneau : encore un cran plus foncé
   (mesures 4.17 du dernier audit → cible >= 4.6 sur fond gris-bleuté). */
body span.qty, body .qty { color: #2c3850; }
body .pilotage-tile span, body .fournil-kpis span,
body.ui-revolution .pilotage-tile span, body.ui-revolution .pilotage-tile > div > span { color: #3f4c63; }

/* Pastille de notification : fond vermillon foncé, blanc >= 4.5 dessus. */
body .notification-count,
body .icon-btn .notification-count,
body.ui-revolution .notification-count,
body .brand-bell .notification-count { background: #c9202e !important; }

/* Dernier lien texte sous 44px au téléphone (« Voir tout le stock »). */
body.phone-mode .btn-link, body.phone-mode button.btn-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 4. Cibles tactiles restantes au téléphone. */
body.phone-mode .topbar-etab { min-height: 48px; }
body.phone-mode .topbar-etab select { min-height: 44px; }
body.phone-mode .link-btn { min-height: 44px; padding: 10px 12px; }

/* 5. Carte de priorité au téléphone : en pile, pleine largeur, plus de
   colonne étroite qui casse les mots. */
@media (max-width: 800px) {
  body.phone-mode .priority-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
  }
  body.phone-mode .priority-icon { width: 56px; height: 56px; }
  body.phone-mode .priority-icon svg { width: 26px; height: 26px; }
  body.phone-mode .priority-eyebrow { overflow-wrap: normal; word-break: keep-all; }
  body.phone-mode .priority-title { font-size: 1.4rem; }
  body.phone-mode .priority-cta { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   11. ROUGE DE TEXTE AA (dernier reste de recette, round 2)
   Le vermillon de marque #e63946 (dossier design) reste tel quel sur les
   grands éléments (bannières urgentes, boutons, icônes) où il passe le seuil
   AA « grand texte » (3:1). Sur les PETITS textes rouges sur blanc il tombe à
   4.17:1 : on les descend à #c9202e (>= 4.5:1), teinte quasi identique à l'œil
   — la maquette reste respectée, l'accessibilité est acquise.
   -------------------------------------------------------------------------- */
body .fournil-stock-row.critique .qty,
body .fournil-check.ko {
  color: #c9202e;
}
/* Cas miroir : le vert de succès #168a4b (dossier) reste sur les grands
   éléments (badges « Prêt »/« Envoyer en vente », seuil grand-texte 3:1) ;
   le petit chiffre vert « disponible » sur blanc tombe à 4.40:1, foncé à
   #0d7a3e (>= 4.5:1), teinte quasi identique à l'œil. */
body .fournil-stock-row.disponible .qty {
  color: #0d7a3e;
}

/* --------------------------------------------------------------------------
   12. DÉTAILS D'UNE ACTION À VALIDER — en français, jamais de JSON (bug patron)
   -------------------------------------------------------------------------- */
body .payload-details .detail-intro {
  margin: 8px 0 6px;
  color: var(--muted);
  font-size: 0.86rem;
}
body .payload-details .detail-message {
  margin: 0 0 10px;
  padding: 11px 14px;
  border-left: 3px solid var(--carillon-bleu);
  background: var(--surface-douce);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
body .payload-details .detail-lines {
  list-style: none;
  margin: 8px 0 6px;
  padding: 0;
}
body .payload-details .detail-lines li {
  padding: 6px 0;
  border-bottom: 1px solid var(--gris-bleute);
  font-size: 0.92rem;
}
body .payload-details .detail-lines li:last-child { border-bottom: none; }
body .payload-details .detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--gris-bleute);
  font-size: 0.9rem;
}
body .payload-details .detail-row:last-child { border-bottom: none; }
body .payload-details .detail-row span { color: var(--muted); }
body .payload-details .detail-empty { color: var(--muted); font-size: 0.88rem; margin: 8px 0 0; }

/* --------------------------------------------------------------------------
   13. VRAIES PHOTOS DANS LE CATALOGUE DE PRODUCTION (demande patron)
   -------------------------------------------------------------------------- */
body .production-product-card .product-visual.has-photo {
  padding: 0;
  overflow: hidden;
  background: var(--surface-douce);
  border-radius: 12px;
}
body .production-product-card .product-visual.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
/* Vignette plus généreuse : on veut VOIR le produit. */
body .production-product-card .product-visual {
  width: 64px;
  height: 64px;
}
/* Repli sans photo : l'icône doit remplir la pastille, pas s'y perdre. */
body .production-product-card .product-visual:not(.has-photo) svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
}

/* Réduction des animations si demandée par le système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}