/* ===========================================================================
   BASE_CO — Mobile Chiffrage CSS
   ----------------------------------------------------------------------------
   Design system inspiré d'Airtable (sober editorial workflow software).
   Adapté en dual mode dark/light + scopé strictement aux smartphones.

   Architecture :
     1. TOKENS         — variables design (light + dark)
     2. RESET MOBILE   — neutralisation des effets cyber desktop
     3. LAYOUT SHELL   — container, header, bottom-bar
     4. CARDS          — sections principales (devis, lignes, totaux)
     5. CLIENT BLOCK   — sélecteur + infos client
     6. PRODUCTS BLOCK — boutons d'ajout + lignes-cards
     7. TOTALS         — signature card
     8. BOTTOM BAR     — 3 actions critiques (sticky)
     9. MODALS         — plein écran
    10. UTILS          — micro-helpers

   Tout est scopé `@media (max-width: 768px)` — desktop intouché.
   Réversible en 1 ligne (commenter le <link> dans base.html).
   =========================================================================== */

@media (max-width: 768px) {

  /* ─────────────────────────────────────────────────────────────────────────
     1. TOKENS (DARK = défaut, LIGHT = override [data-theme="light"])
     ───────────────────────────────────────────────────────────────────────── */
  :root {
    /* Spacing — base 4px (Airtable standard) */
    --m-xxs: 4px;
    --m-xs: 8px;
    --m-sm: 12px;
    --m-md: 16px;
    --m-lg: 24px;
    --m-xl: 32px;
    --m-xxl: 48px;

    /* Radius */
    --m-r-sm: 6px;
    --m-r-md: 10px;
    --m-r-lg: 12px;
    --m-r-pill: 9999px;

    /* Typography — Inter Display fallback (proche Haas Grotesk) */
    --m-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    --m-display: 26px;     /* h1 page */
    --m-title: 18px;       /* card titles */
    --m-label: 15px;       /* labels formulaire */
    --m-body: 15px;        /* body text */
    --m-caption: 13px;     /* captions, hints */
    --m-tiny: 12px;        /* badges, codes */

    /* Tap targets */
    --m-tap: 48px;         /* WCAG AAA confort terrain */
    --m-input-h: 44px;     /* Airtable text-input height */
    --m-bottom-bar-h: 72px;

    /* Couleurs DARK (défaut sur :root) */
    --m-canvas: #0d1218;           /* fond principal — Airtable primary-active inversé */
    --m-surface-soft: #181d26;     /* cards */
    --m-surface-strong: #1d1f25;   /* signature dark elevated */
    --m-ink: #f5f5f7;              /* texte principal */
    --m-body-color: #c8ccd0;       /* texte body */
    --m-muted: #9297a0;            /* texte muet */
    --m-hairline: rgba(255, 255, 255, 0.10);
    --m-border-strong: rgba(255, 255, 255, 0.22);

    /* CTA primaire (dark mode → claire pour ressortir) */
    --m-cta-bg: #f5f5f7;
    --m-cta-bg-active: #e2e2e6;
    --m-cta-text: #0d1218;

    /* Brand voltage (signature cards) — identique en dark/light */
    --m-coral: #aa2d00;
    --m-forest: #0a2e0e;
    --m-cream: #f5e9d4;
    --m-peach: #fcab79;

    /* Semantic */
    --m-link: #5b9aff;             /* bleu plus clair en dark */
    --m-success: #39bf45;
    --m-error: #ff6b4a;
  }

  /* Override LIGHT mode — pure Airtable canvas */
  [data-theme="light"] {
    --m-canvas: #ffffff;
    --m-surface-soft: #f8fafc;
    --m-surface-strong: #e0e2e6;
    --m-ink: #181d26;
    --m-body-color: #333840;
    --m-muted: #41454d;
    --m-hairline: #dddddd;
    --m-border-strong: #9297a0;

    --m-cta-bg: #181d26;           /* near-black (Airtable signature) */
    --m-cta-bg-active: #0d1218;
    --m-cta-text: #ffffff;

    --m-link: #1b61c9;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     2. RESET MOBILE — sécurité overflow + box-sizing + neutralisation cyber
     ───────────────────────────────────────────────────────────────────────── */

  /* Sécurité overflow : empêche tout débordement horizontal sur smartphone */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Box-sizing safe pour tous les conteneurs principaux */
  .container,
  .container .card,
  .container .pc-header-line,
  .container .pc-header-line > *,
  .container .form-control,
  .container input,
  .container select,
  .container textarea,
  .container table,
  .container .totals-notes-container,
  .container .totals-notes-container > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body {
    background: var(--m-canvas) !important;
    color: var(--m-ink) !important;
    font-family: var(--m-font) !important;
    font-size: var(--m-body) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    padding-bottom: calc(var(--m-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-font-smoothing: antialiased;
  }

  /* Suppression des gradients/glows/grids cyber d'arrière-plan */
  body::before,
  body::after {
    display: none !important;
  }

  /* Watermark page coin haut droit — caché en mobile */
  .page-with-watermark::before {
    display: none !important;
  }

  /* Container : padding minimal — récupère 12px de chaque côté vs avant */
  .container {
    width: 100% !important;
    padding: 0 var(--m-xxs) !important;    /* 4px (juste pour préserver le radius) */
    margin: 0 !important;
  }

  /* Override des styles inline qui forcent largeurs/grids desktop */
  .pc-header-line[style*="grid-template-columns"] {
    display: flex !important;
    grid-template-columns: none !important;
  }

  /* Empêche les enfants de la grid header d'avoir une min-width forcée */
  .pc-header-line > * {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  .totals-section[style*="width"] {
    width: 100% !important;
  }

  /* Champ date — compact, aligné à droite, pas d'overflow */
  input[type="datetime-local"],
  #quoteDate {
    font-size: 13px !important;
    padding: var(--m-xs) var(--m-sm) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: right !important;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     3. LAYOUT SHELL — header de page
     ───────────────────────────────────────────────────────────────────────── */

  /* Card-header de la page chiffrage : reformatage complet */
  .container .card:first-child .card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--m-md) !important;
    padding: 0 !important;
    border: none !important;
    margin-bottom: var(--m-lg) !important;
  }

  .container .card:first-child .card-header > div {
    border: none !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    gap: var(--m-xs) !important;
  }

  /* Ligne titre : H1 + RAZ sur la même ligne, RAZ collé à droite */
  .container .card:first-child .card-header > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;        /* pas d'overflow horizontal */
  }

  /* 2e div du card-header (autres boutons) : caché (tous ses enfants
     sont déjà display:none, mais le div lui-même prend de la place) */
  .container .card:first-child .card-header > div:last-child {
    display: none !important;
  }

  /* Titre H1 — tronqué si trop long, ne pousse pas le RAZ */
  .card-title {
    font-size: var(--m-display) !important;
    font-weight: 500 !important;
    color: var(--m-ink) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Tous les boutons desktop cachés */
  .container .card:first-child .card-header .btn-action-hightech,
  .container .card:first-child .card-header .btn-settings {
    display: none !important;
  }

  /* RAZ : petit bouton compact fixe à droite du titre */
  .container .card:first-child .card-header #resetQuoteBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;          /* taille fixe, ne grossit jamais */
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 var(--m-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-md) !important;
    background: transparent !important;
    color: var(--m-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     4. CARDS — sections principales (devis, lignes, totaux, options)
     ───────────────────────────────────────────────────────────────────────── */
  .container .card {
    background: var(--m-surface-soft) !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-md) !important;
    padding: var(--m-xs) var(--m-sm) !important;   /* 8px vert · 12px horiz */
    margin: 0 0 var(--m-xs) 0 !important;
    box-shadow: none !important;
  }

  /* Première card (header devis) : un peu plus d'air en haut/bas */
  .container .card:first-child {
    padding: var(--m-sm) !important;
  }

  .container .card::before,
  .container .card::after {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     5. CLIENT BLOCK — sélecteur + grid header
     ───────────────────────────────────────────────────────────────────────── */

  /* La pc-header-line devient une grid 2-colonnes pour permettre que
     Validité et JH partagent la même ligne tandis que les autres items
     restent sur des lignes complètes (grid-column: 1 / -1). */
  .pc-header-line {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--m-xs) var(--m-xs) !important;
    width: 100% !important;
  }

  /* CHAQUE HEADER-ITEM = grid horizontale "label | input"
     Par défaut sur toute la largeur (1/-1) sauf validity et mo-total. */
  .pc-header-line .header-item {
    display: grid !important;
    grid-template-columns: 108px 1fr !important;
    align-items: center !important;
    column-gap: var(--m-sm) !important;
    row-gap: var(--m-xxs) !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;       /* défaut : pleine largeur */
  }

  /* Validité (5e item) et JH (6e item) partagent la même ligne grid */
  .pc-header-line > .validity-item {
    grid-column: 1 / 2 !important;
    grid-template-columns: auto 1fr !important;   /* label compact */
  }

  .pc-header-line > .mo-total-item {
    grid-column: 2 / 3 !important;
    grid-template-columns: auto 1fr !important;
  }

  /* Texte des champs du header : alignés à droite (cohérence visuelle) */
  .pc-header-line .header-item > input,
  .pc-header-line .header-item input[type="text"],
  .pc-header-line .header-item input[type="number"],
  .pc-header-line .header-item input[type="datetime-local"] {
    text-align: right !important;
  }

  /* Labels dans la colonne gauche */
  .pc-header-line .header-item .form-label {
    grid-column: 1 !important;
    margin: 0 !important;
    font-size: var(--m-caption) !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  /* Inputs/selects dans la colonne droite */
  .pc-header-line .header-item > input,
  .pc-header-line .header-item > select,
  .pc-header-line .header-item > .input-group {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* ========== CLIENT-ITEM : structure imbriquée complexe ==========
     HTML :
       .client-item
         .d-flex (outer wrapper)
           .d-flex (label + loupe)
           small#devisCreatorInfo (caché en mobile)
         .input-group (le select)
         small#clientTypeInfo
     Stratégie : display:contents sur les wrappers pour aplatir la hiérarchie. */
  .pc-header-line .client-item {
    grid-template-columns: auto 1fr !important;
  }

  /* Outer wrapper devient transparent dans la grid */
  .pc-header-line .client-item > .d-flex {
    display: contents !important;
  }

  /* Inner wrapper (label + loupe) : col 1 row 1, en flex horizontal */
  .pc-header-line .client-item > .d-flex > .d-flex {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--m-xxs) !important;
  }

  /* devisCreatorInfo masqué (info secondaire) */
  .pc-header-line .client-item #devisCreatorInfo {
    display: none !important;
  }

  /* Select client : col 2 row 1 */
  .pc-header-line .client-item > .input-group {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* clientTypeInfo : col gauche de la row 2 */
  .pc-header-line .client-item > #clientTypeInfo {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: var(--m-caption) !important;
    align-self: center;
  }

  /* Case Détail : affichée en mobile + col droite de la row 2 */
  .pc-header-line .client-item > .mobile-detail-label {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    font-size: var(--m-caption) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--m-body-color) !important;
    gap: var(--m-xxs) !important;
  }

  /* Message "client verrouillé" : masqué en mobile */
  #_clientLockMsg {
    display: none !important;
  }

  /* Pastille info client "i" : masquée en mobile (sera réactivée plus tard
     avec un emplacement adapté si nécessaire) */
  .pc-header-line > div:nth-child(2) {
    display: none !important;
  }

  /* ========== MO-TOTAL-ITEM (JH) : box devient input-style horizontal ========== */
  .pc-header-line .mo-total-item {
    grid-template-columns: 108px 1fr !important;
  }

  /* Ajout du label "JH" en col 1 via ::before (le DOM ne fournit pas un .form-label séparé) */
  .pc-header-line .mo-total-item::before {
    content: "JH";
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: var(--m-caption);
    font-weight: 500;
    color: var(--m-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
    white-space: nowrap;
  }

  /* La box stylée → input-style en col 2, valeur alignée à DROITE */
  .pc-header-line .mo-total-item > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;        /* valeur à droite */
    min-height: var(--m-input-h) !important;
    height: var(--m-input-h) !important;
    padding: var(--m-xs) var(--m-sm) !important;
    background: var(--m-canvas) !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-sm) !important;
  }

  /* Label interne "JH" du box stylé : caché (déjà ajouté via ::before) */
  .pc-header-line .mo-total-item > div > label {
    display: none !important;
  }

  /* Valeur "0" alignée à gauche, taille body */
  .pc-header-line .mo-total-item #totalMODisplay {
    font-size: var(--m-body) !important;
    color: var(--m-ink) !important;
  }

  /* Inputs et selects — Airtable style hairline 44px */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="datetime-local"],
  select,
  textarea {
    height: var(--m-input-h);
    min-height: var(--m-input-h);
    padding: var(--m-sm) var(--m-md) !important;
    font-size: var(--m-body) !important;
    font-family: var(--m-font) !important;
    background: var(--m-canvas) !important;
    color: var(--m-ink) !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-sm) !important;
    box-shadow: none !important;
    width: 100% !important;
  }

  textarea {
    height: auto;
    min-height: 96px;
    line-height: 1.45;
  }

  .form-control:focus,
  .form-select:focus,
  select:focus,
  textarea:focus {
    border-color: var(--m-link) !important;
    outline: 2px solid color-mix(in srgb, var(--m-link) 28%, transparent) !important;
    outline-offset: -1px;
  }

  /* Labels */
  .form-label {
    font-size: var(--m-caption) !important;
    font-weight: 500 !important;
    color: var(--m-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--m-xxs) !important;
  }

  /* Bouton info client "i" */
  #clientInfoBtn {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--m-r-pill) !important;
    background: var(--m-canvas) !important;
    color: var(--m-ink) !important;
    border: 1px solid var(--m-hairline) !important;
    font-size: 14px !important;
    font-weight: 600;
  }

  #clientInfoPopup {
    position: fixed !important;
    left: var(--m-md) !important;
    right: var(--m-md) !important;
    top: auto !important;
    bottom: calc(var(--m-bottom-bar-h) + var(--m-md)) !important;
    width: auto !important;
    max-height: 60vh !important;
    overflow-y: auto;
    background: var(--m-canvas) !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-md) !important;
    padding: var(--m-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32) !important;
    z-index: 1100 !important;
  }

  /* Petit bouton "loupe" recherche clients */
  .pc-header-line button[title="Rechercher clients"] {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--m-r-pill) !important;
    flex-shrink: 0;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     6. PRODUCTS BLOCK — barre d'outils + tableau → cards verticales
     ───────────────────────────────────────────────────────────────────────── */

  /* La card "Produits" devient TRANSPARENTE pour éviter card-dans-card.
     Seules la barre d'outils et chaque ligne-card auront leur propre frame. */
  .container > .card:nth-child(2) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  /* La barre d'outils prend le rôle de mini-card — compacte */
  .container .card:nth-child(2) > .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--m-xs) !important;
    background: var(--m-surface-soft);
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-r-md);
    padding: var(--m-xs) !important;       /* 8px au lieu de 12px */
    margin-bottom: var(--m-xs) !important;
  }

  /* Le label "Produit / Prestation" : caché en mobile (header de tableau redondant) */
  .container .card:nth-child(2) > .d-flex > label.form-label:first-child {
    display: none !important;
  }

  /* Le wrapper des 3 boutons (Ajouter produit/ensemble/bloc) : ROW horizontal */
  .container .card:nth-child(2) > .d-flex > div[style*="flex-grow"] {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: var(--m-xxs) !important;          /* 4px entre boutons */
    width: 100% !important;
  }

  /* Les 3 boutons : largeur égale (1/3 chacun), labels raccourcis via ::before */
  #btnOpenProductModal,
  .container .card:nth-child(2) button[onclick*="openEnsembleSelectionModal"],
  #btnAddBlocMetier {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 40px !important;           /* tap target compact */
    padding: var(--m-xs) var(--m-xxs) !important;
    font-size: 0 !important;               /* cache le texte original */
    font-weight: 500 !important;
    background: var(--m-canvas) !important;
    color: var(--m-ink) !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-md) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Labels remplacés (plus courts) via ::before */
  #btnOpenProductModal::before {
    content: "+ Produit";
    font-size: 13px !important;
    font-weight: 500;
  }

  .container .card:nth-child(2) button[onclick*="openEnsembleSelectionModal"]::before {
    content: "+ Ensemble";
    font-size: 13px !important;
    font-weight: 500;
  }

  #btnAddBlocMetier::before {
    content: "+ Bloc";
    font-size: 13px !important;
    font-weight: 500;
  }

  /* Masquer le checkbox Détail desktop en mobile (on garde celui du header) */
  .desktop-detail-label {
    display: none !important;
  }

  /* Tableau lignes → liste de cards verticales (1 ligne = 1 card) */
  .table-container {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
  }

  #quoteTable {
    border: none !important;
    background: transparent !important;
  }

  /* Casser complètement le layout table → tout en block */
  #quoteTable,
  .option-table {
    display: block !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    width: 100% !important;
  }

  #quoteTable thead,
  .option-table thead {
    display: none !important;
  }

  #quoteTable tbody,
  .option-table tbody {
    display: block !important;
  }

  /* ══ NEUTRALISER style.css .table-container rules sur #quoteTable ══
     style.css @media 768px applique display:flex, padding, ::before labels
     sur .table-container td/tr — on doit tout écraser ici */
  .table-container #quoteTable tr {
    display: grid !important;
    margin-bottom: var(--m-xxs) !important;
    padding: var(--m-xs) var(--m-sm) !important;
  }
  .table-container #quoteTable td {
    display: block !important;
    padding: 0 !important;
    justify-content: initial !important;
  }
  .table-container #quoteTable td::before {
    display: none !important;
    content: none !important;
    min-width: 0 !important;
  }
  .table-container #quoteTable td:last-child {
    justify-content: initial !important;
    flex-wrap: nowrap !important;
  }

  /* Neutraliser .btn width:100% de style.css @media 768px pour les boutons dans les lignes */
  #quoteTable .action-round-btn,
  .option-table .action-round-btn,
  #quoteTable tbody tr td[data-label="Actions"] button,
  .option-table tbody tr td[data-label="Actions"] button {
    width: auto !important;
    min-height: auto !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     LIGNES PRODUIT — COMMUN devis principal + options
     Grid 3 colonnes / 4 lignes (MO collapse quand Détail décoché)
     ┌─────────────────────────────────────┐
     │ CODE-ART              ✎ 🗑 [▲ ▼]  │  ← code + actions
     │ Désignation (pleine largeur)       │
     │ Qté: [3]   12,50 €      37,50 €   │  ← qté · prix unit · total
     │ MO: [2h]   45,00 €                │  ← détail (collapse si caché)
     └─────────────────────────────────────┘
     ═══════════════════════════════════════════════════════════════ */

  #quoteTable tbody tr,
  .option-table tbody tr {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "code   code   actions"
      "design design design"
      "qte    prix   total"
      "mo     mo     mo";
    column-gap: var(--m-xs);
    row-gap: var(--m-xxs);
    background: var(--m-canvas) !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-md) !important;
    margin-bottom: var(--m-xxs) !important;
    padding: var(--m-xs) var(--m-sm) !important;
    box-shadow: none !important;
  }

  #quoteTable tbody tr td,
  .option-table tbody tr td {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    font-size: var(--m-body) !important;
    text-align: left !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Neutraliser nth-child et monospace desktop rules */
  #quoteTable td:nth-child(n+4),
  .option-table td:nth-child(n+4) {
    text-align: left !important;
  }
  #quoteTable td:last-child,
  .option-table td:last-child {
    text-align: left !important;
  }
  #quoteLines td[data-label="Mat. HT /u"],
  #quoteLines td[data-label="MO HT / u"],
  #quoteLines td[data-label="Total HT"] {
    font-family: inherit !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Form-control uniformisé */
  #quoteTable .form-control,
  .option-table .form-control {
    padding: var(--m-xxs) var(--m-xs) !important;
    font-size: var(--m-body) !important;
    min-height: 32px !important;
  }

  #quoteTable tbody tr td::before,
  .option-table tbody tr td::before {
    display: none !important;
  }

  /* CODE ARTICLE */
  #quoteTable tbody tr td[data-label="Code Article"],
  .option-table tbody tr td[data-label="Code Article"] {
    grid-area: code !important;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
    font-size: var(--m-caption) !important;
    color: var(--m-muted) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    align-self: center;
  }

  /* DÉSIGNATION */
  #quoteTable tbody tr td[data-label="Désignation"],
  .option-table tbody tr td[data-label="Désignation"] {
    grid-area: design !important;
    font-size: var(--m-body) !important;
    font-weight: 500 !important;
    color: var(--m-ink) !important;
    line-height: 1.35 !important;
    word-break: break-word;
  }

  #quoteTable tbody tr td[data-label="Désignation"] > div,
  .option-table tbody tr td[data-label="Désignation"] > div {
    line-height: 1.35 !important;
  }

  /* ACTIONS */
  #quoteTable tbody tr td[data-label="Actions"],
  .option-table tbody tr td[data-label="Actions"] {
    grid-area: actions;
    align-self: start;
  }

  #quoteTable tbody tr td[data-label="Actions"] .d-flex,
  .option-table tbody tr td[data-label="Actions"] .d-flex {
    flex-direction: row !important;
    gap: var(--m-xxs) !important;
    align-items: center !important;
  }

  #quoteTable tbody tr .action-round-btn,
  .option-table tbody tr .action-round-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }

  #quoteTable tbody tr .action-round-btn img,
  .option-table tbody tr .action-round-btn img {
    width: 16px !important;
    height: 16px !important;
  }

  /* Flèches ▲▼ — devis principal + options */
  #quoteTable tbody tr td[data-label="Actions"] > .d-flex > div[style*="flex-direction:column"],
  .option-table tbody tr td[data-label="Actions"] > .d-flex > div[style*="flex-direction:column"] {
    flex-direction: row !important;
    margin-left: 0 !important;
  }

  #quoteTable tbody tr td[data-label="Actions"] button[onclick*="moveLineUp"],
  #quoteTable tbody tr td[data-label="Actions"] button[onclick*="moveLineDown"],
  #quoteTable tbody tr td[data-label="Actions"] button[onclick*="moveOptionLineUp"],
  #quoteTable tbody tr td[data-label="Actions"] button[onclick*="moveOptionLineDown"],
  .option-table tbody tr td[data-label="Actions"] button[onclick*="moveLineUp"],
  .option-table tbody tr td[data-label="Actions"] button[onclick*="moveLineDown"],
  .option-table tbody tr td[data-label="Actions"] button[onclick*="moveOptionLineUp"],
  .option-table tbody tr td[data-label="Actions"] button[onclick*="moveOptionLineDown"] {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Qté / Prix / Total / MO : inline-flex pour justify-content */
  #quoteTable tbody tr td[data-label="Qté"],
  #quoteTable tbody tr td[data-label="Mat. HT /u"],
  #quoteTable tbody tr td[data-label="Total HT"],
  #quoteTable tbody tr td[data-label="MO HT / u"],
  .option-table tbody tr td[data-label="Qté"],
  .option-table tbody tr td[data-label="Mat. HT /u"],
  .option-table tbody tr td[data-label="Total HT"],
  .option-table tbody tr td[data-label="MO HT / u"] {
    display: inline-flex !important;
    align-items: center !important;
    padding-top: var(--m-xxs) !important;
  }

  #quoteTable tbody tr td[data-label="Qté"],
  .option-table tbody tr td[data-label="Qté"] {
    grid-area: qte !important;
    justify-content: flex-start !important;
    gap: var(--m-xxs) !important;
    border-top: 1px dashed var(--m-hairline);
  }

  #quoteTable tbody tr td[data-label="Mat. HT /u"],
  .option-table tbody tr td[data-label="Mat. HT /u"] {
    grid-area: prix !important;
    justify-content: center !important;
    color: var(--m-muted) !important;
    font-size: var(--m-caption) !important;
    border-top: 1px dashed var(--m-hairline);
  }

  #quoteTable tbody tr td[data-label="Total HT"],
  .option-table tbody tr td[data-label="Total HT"] {
    grid-area: total !important;
    justify-content: flex-end !important;
    font-weight: 600;
    color: var(--m-ink);
    font-size: var(--m-body) !important;
    border-top: 1px dashed var(--m-hairline);
  }

  /* MO : ligne 4 pleine largeur, collapse quand showDetails=false */
  #quoteTable tbody tr td[data-label="MO HT / u"],
  .option-table tbody tr td[data-label="MO HT / u"] {
    grid-area: mo !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--m-xs);
    border-top: 1px dashed var(--m-hairline);
    padding: var(--m-xxs) 0;
    min-width: 0;
    overflow: hidden;
  }

  /* Input MO */
  #quoteTable tbody tr td[data-label="MO HT / u"] input[type="number"],
  .option-table tbody tr td[data-label="MO HT / u"] input[type="number"] {
    width: 48px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: var(--m-xxs) var(--m-xs) !important;
    text-align: center !important;
    font-size: var(--m-body) !important;
  }

  /* Label "Qté" via ::before */
  #quoteTable tbody tr td[data-label="Qté"]::before,
  .option-table tbody tr td[data-label="Qté"]::before {
    display: inline !important;
    content: "Qté";
    font-size: var(--m-caption);
    color: var(--m-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: var(--m-xs);
  }

  /* Input Qté */
  #quoteTable tbody tr td[data-label="Qté"] input[type="number"],
  .option-table tbody tr td[data-label="Qté"] input[type="number"] {
    width: 48px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: var(--m-xxs) var(--m-xs) !important;
    text-align: center;
    font-size: var(--m-body) !important;
  }

  /* Cellule "aucun produit" */
  #quoteTable tbody tr td[colspan],
  .option-table tbody tr td[colspan] {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    color: var(--m-muted) !important;
    font-style: italic;
    padding: var(--m-lg) 0 !important;
    border-top: none;
    margin-top: 0;
  }

  /* Bloc-header (titres de blocs métiers) — devis principal uniquement */
  #quoteTable tbody tr.bloc-header-row {
    grid-template-areas: "header header header" !important;
    background: var(--m-surface-strong) !important;
    border: 1px solid var(--m-border-strong) !important;
    margin-top: var(--m-sm) !important;
  }

  #quoteTable tbody tr.bloc-header-row td {
    grid-area: header !important;
  }

  #quoteTable tbody tr.bloc-header-row td > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--m-xs) !important;
  }

  #quoteTable tbody tr.bloc-header-row td > div > button {
    width: 100% !important;
  }

  #quoteTable tbody tr.bloc-header-row .bloc-name-input {
    width: 100% !important;
    font-size: var(--m-title) !important;
  }

  /* Sous-totaux : ligne discrète */
  #quoteTable tbody tr.bloc-subtotal-row {
    background: transparent !important;
    border: none !important;
    grid-template-areas: "label value" !important;
    grid-template-columns: 1fr auto !important;
    padding: var(--m-xs) var(--m-md) !important;
    margin-bottom: 0 !important;
  }

  #quoteTable tbody tr.bloc-subtotal-row td:first-child {
    grid-area: label !important;
    text-align: right !important;
  }

  #quoteTable tbody tr.bloc-subtotal-row td:last-child {
    grid-area: value !important;
    font-weight: 600 !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     7. TOTALS — signature card (le moment "voltage" de la page)
     ───────────────────────────────────────────────────────────────────────── */

  /* Signature card : la section totaux */
  /* TOTAUX — condensation max, même police, labels à gauche, valeurs à droite */
  .totals-section {
    background: var(--m-surface-strong) !important;
    border-radius: var(--m-r-md) !important;
    padding: var(--m-xs) var(--m-sm) !important;   /* 8px · 12px */
    border: 1px solid var(--m-hairline) !important;
    width: 100% !important;
  }

  .totals-section table.table {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }

  /* Séparateur entre lignes : hairline ultra-fine */
  .totals-section table.table tr {
    border-bottom: 1px solid var(--m-hairline) !important;
  }

  /* Ligne TTC : trait plus marqué au-dessus */
  .totals-section table.table tr:last-child {
    border-top: 1px solid var(--m-border-strong) !important;
    border-bottom: none !important;
  }

  /* Toutes les cellules : même police, interlignes minimum absolu */
  .totals-section table.table td {
    padding: 1px 0 !important;            /* 1px = condensation maximale */
    font-size: var(--m-caption) !important;
    font-weight: 400 !important;
    color: var(--m-body-color) !important;
    border: none !important;
    line-height: 1.25 !important;
  }

  /* Cellule label (1ère colonne) : alignée à GAUCHE */
  .totals-section table.table td:first-child {
    text-align: left !important;
    color: var(--m-muted) !important;
    padding-right: var(--m-sm) !important;
    width: auto !important;
  }

  /* Cellule valeur (2e colonne) : alignée à droite, bold */
  .totals-section table.table td:last-child {
    text-align: right !important;
    font-weight: 500 !important;
    color: var(--m-ink) !important;
    white-space: nowrap !important;
    width: 1% !important;               /* prend juste la place nécessaire */
  }

  /* Ligne TTC : même taille mais plus bold pour la distinguer */
  .totals-section table.table tr:last-child td {
    font-size: var(--m-caption) !important;  /* identique aux autres */
    font-weight: 400 !important;
    padding-top: 4px !important;
  }

  .totals-section table.table tr:last-child td:last-child {
    font-weight: 700 !important;             /* valeur TTC en bold */
    color: var(--m-ink) !important;
  }

  /* Cache la barre actions mobile dupliquée dans le card totaux
     (la bottom-bar fixe la remplace) */
  .mobile-actions-bar {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     7bis. OPTIONS BLOCK — même layout que produits
     ───────────────────────────────────────────────────────────────────────── */

  /* Option card : transparente comme la card produits principale */
  #optionsSection {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: var(--m-sm) !important;
  }

  /* Titre + boutons : mini-card */
  .option-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: var(--m-md) !important;
  }

  /* Header de l'option : titre sur une ligne, boutons sur la ligne suivante */
  .option-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--m-xs) !important;
    background: var(--m-surface-soft);
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-r-md);
    padding: var(--m-xs) !important;
    margin-bottom: var(--m-xs) !important;
  }

  .option-header .option-title {
    font-size: var(--m-label) !important;
    font-weight: 500 !important;
    color: var(--m-ink) !important;
    margin: 0 0 var(--m-xxs) 0 !important;
  }

  /* Boutons option header : 4 sur UNE SEULE ligne (nowrap) */
  .option-header > div[style*="flex"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;      /* TOUJOURS sur une seule ligne */
    gap: var(--m-xxs) !important;
    align-items: center !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* 3 boutons texte : largeur égale (1/3 de l'espace restant) */
  .option-header button {
    flex: 1 1 0 !important;            /* égaux, ne débordent pas */
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 var(--m-xxs) !important;
    font-size: 12px !important;
    border-radius: var(--m-r-md) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* "+ Ensemble" : texte court via ::before */
  button[onclick*="addEnsembleToOption"] {
    font-size: 0 !important;
  }
  button[onclick*="addEnsembleToOption"]::before {
    content: "+ Ensemble";
    font-size: 12px !important;
    font-weight: 500;
    white-space: nowrap;
  }

  /* "Renommer" → même convention "+" que le devis principal */
  button[onclick*="renameOption"] {
    font-size: 0 !important;
  }
  button[onclick*="renameOption"]::before {
    content: "+ Renommer";
    font-size: 12px !important;
    font-weight: 500;
  }

  /* Corbeille : taille fixe 34px, ne grossit pas */
  button[onclick*="removeOption"] {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: var(--m-r-pill) !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    background-image: url('/static/img/poubelle48.png') !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
  }

  /* Reset style.css desktop overrides pour option-table */
  .option-table {
    font-size: var(--m-body) !important;
    border-collapse: separate !important;
  }

  .option-table tbody tr:hover {
    background: transparent !important;
  }

  /* Masquer le <td> vide (drag handle) des options */
  #optionsSection .option-table tbody tr td:first-child:not([data-label]) {
    display: none !important;
  }

  /* Masquer le <thead> des option-tables */
  .option-table thead {
    display: none !important;
  }

  /* Conteneur table option — transparent */
  .option-table {
    border: none !important;
    background: transparent !important;
  }

  /* Totaux option : flex row wrappé */
  .option-totals {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--m-xs) !important;
    padding: var(--m-xs) 0 !important;
    border-top: 1px solid var(--m-hairline) !important;
    font-size: var(--m-caption) !important;
  }

  /* Notes section en bas de page */
  #notesSection {
    background: var(--m-surface-soft) !important;
    border: 1px solid var(--m-hairline) !important;
    border-radius: var(--m-r-md) !important;
    padding: var(--m-sm) !important;
    margin-bottom: var(--m-xs) !important;
  }

  /* Header options (titre + bouton Ajouter une option) */
  /* Header options : titre "Options" + bouton "Ajouter" alignés sur 1 ligne */
  #optionsSection > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--m-surface-soft);
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-r-md);
    padding: var(--m-xs) var(--m-sm) !important;
    margin-bottom: var(--m-xs) !important;
  }

  #optionsSection > div:first-child h3 {
    font-size: var(--m-label) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    flex: 1 1 auto;
  }

  /* Bouton "+ Ajouter une option" : compact, texte raccourci */
  #optionsSection > div:first-child .btn-secondary {
    flex: 0 0 auto !important;
    font-size: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 var(--m-sm) !important;
    border-radius: var(--m-r-md) !important;
    white-space: nowrap !important;
  }
  #optionsSection > div:first-child .btn-secondary::before {
    content: "+ Option";
    font-size: 12px !important;
    font-weight: 500;
  }

  /* Sécurité overflow globale options */
  #optionsSection,
  #optionsSection * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     8. BOTTOM BAR — 3 actions critiques (sticky)
     ───────────────────────────────────────────────────────────────────────── */

  /* Conteneur fixe en bas : Sauvegarder · PDF · Email
     Note : le HTML existant a déjà ces 3 boutons dans .mobile-actions-bar.
     On en injecte une nouvelle version via CSS::after sur body, en
     redirigeant les clics via un wrapper.
     Solution simple : on garde .mobile-actions-bar mais on la rend fixed. */
  .mobile-bottom-bar,
  body > .mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    gap: var(--m-xs);
    padding: var(--m-xs) var(--m-xs) calc(var(--m-xs) + env(safe-area-inset-bottom, 0px));
    background: var(--m-surface-soft);
    border-top: 1px solid var(--m-hairline);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* TOUS les boutons de la bottom-bar : style identique (3 actions équivalentes) */
  .mobile-bottom-bar button {
    flex: 1;
    min-height: var(--m-tap);
    padding: var(--m-sm) !important;
    font-size: var(--m-body);
    font-weight: 500;
    border-radius: var(--m-r-lg);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    background: var(--m-canvas);
    color: var(--m-ink);
    border: 1px solid var(--m-hairline);
  }

  .mobile-bottom-bar button:active {
    background: var(--m-surface-strong);
    transform: scale(0.97);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     9. MODALS — plein écran sheets
     ───────────────────────────────────────────────────────────────────────── */
  .modal {
    align-items: stretch !important;
    padding: 0 !important;
  }

  .modal .modal-content,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--m-canvas) !important;
    border: none !important;
    overflow-y: auto;
    padding: var(--m-md) !important;
  }

  .modal-title {
    font-size: var(--m-display) !important;
    font-weight: 500 !important;
    color: var(--m-ink) !important;
    margin: 0 0 var(--m-lg) 0;
    line-height: 1.2;
  }

  .close-modal {
    position: fixed !important;
    top: var(--m-sm) !important;
    right: var(--m-md) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--m-r-pill) !important;
    background: var(--m-surface-soft) !important;
    border: 1px solid var(--m-hairline) !important;
    color: var(--m-ink) !important;
    font-size: 22px !important;
    z-index: 10;
  }

  /* Modal footer (boutons Annuler / Enregistrer) → sticky bas */
  .modal .modal-footer,
  .modal .d-flex.justify-end {
    position: sticky;
    bottom: 0;
    background: var(--m-canvas);
    padding: var(--m-md) 0;
    margin-top: var(--m-lg);
    border-top: 1px solid var(--m-hairline);
    flex-direction: column-reverse;
    gap: var(--m-xs);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     9bis. CHATBOT BUBBLE — repositionnée au-dessus de la bottom-bar
     ───────────────────────────────────────────────────────────────────────── */
  .chatbot-fab {
    bottom: calc(var(--m-bottom-bar-h) + var(--m-xs) + env(safe-area-inset-bottom, 0px)) !important;
    right: var(--m-sm) !important;
    width: 52px !important;
    height: 52px !important;
  }

  /* Widget chatbot ouvert : laisse de la place pour la bottom-bar
     OU prend tout l'écran si plus pratique. On garde plein écran mais on
     ajoute un padding bas pour que les derniers messages soient lisibles
     au-dessus de la bottom-bar (qui reste visible avec son z-index 1000). */
  .chatbot-widget {
    bottom: var(--m-bottom-bar-h) !important;
    height: calc(100vh - var(--m-bottom-bar-h)) !important;
    max-height: calc(100vh - var(--m-bottom-bar-h)) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     10. UTILS & micro-helpers
     ───────────────────────────────────────────────────────────────────────── */

  /* Boutons primaires/secondaires globaux */
  .btn,
  button.btn {
    min-height: var(--m-tap);
    padding: var(--m-sm) var(--m-md) !important;
    font-size: var(--m-body) !important;
    font-weight: 500 !important;
    border-radius: var(--m-r-lg) !important;
    box-shadow: none !important;
    line-height: 1.4;
  }

  .btn-primary {
    background: var(--m-cta-bg) !important;
    color: var(--m-cta-text) !important;
    border: none !important;
  }

  .btn-primary:active {
    background: var(--m-cta-bg-active) !important;
  }

  .btn-secondary {
    background: var(--m-canvas) !important;
    color: var(--m-ink) !important;
    border: 1px solid var(--m-hairline) !important;
  }

  /* Section options */
  #optionsSection h3 {
    font-size: var(--m-title) !important;
    font-weight: 500 !important;
    color: var(--m-ink) !important;
  }

  /* Hide-desktop / show-mobile (utility classes existantes) */
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }
}

/* ===========================================================================
   FIN du fichier mobile-chiffrage.css
   =========================================================================== */