/* ============================================================
   design_tokens.css — Source de vérité des tokens design (NOUVEAUX)
   APPUIBOIS — Chantier A.1 (cadrage refonte UI v2)

   Issu de : documentation/archive/audit_ui_existant.md v1.0 §11 (archivé post-Lot 6)
   Convention nommage : sémantique par usage (cadrage §3.1)
   Date    : 2026-04-30 (v2 corrective — nommage sémantique)

   PORTÉE A.1 — coexistence pure
   Tokens NOUVEAUX uniquement. Les tokens historiques restent
   dans le `:root` inline de index.html / recherche.html.
   Aucun token de ce fichier n'est utilisé par un sélecteur à
   ce stade — coexistence pure pour validation visuelle.

   Migrations à venir (cf §13 audit) :
     A.2 (couleurs)    — ~60 substitutions ACORD + MD BAT
     A.3 (espacements) — ~62 substitutions
     A.4 (typo)        — ~47 substitutions
     A.5 (largeurs)    — ~8  substitutions

   Cas particulier `!important` : retiré du token, conservé sur
   le sélecteur lors de la migration.
   ============================================================ */

/* ════════════════════════════════════════════════════════
   L0 PRIMITIFS — Palette identitaire AXE OI BOIS
   Source : promu d'index.html :root inline (étape 2 §11)
   Référence : documentation/DESIGN.md §3.1
   Décision §5.3 #4 : --success et --success-pale RETIRÉS
   du L0 (un seul vert L0 = --vert). Ils seront recréés en
   L1 à l'étape 4 du plan §11 DESIGN.md.
   ════════════════════════════════════════════════════════ */
:root {
  /* Noirs */
  --noir:         #0A0A0A;
  --noir-soft:    #141414;
  --noir-mid:     #1E1E1E;

  /* Sages */
  --sage:         #7FA5A0;
  --sage-dark:    #5A8480;
  --sage-light:   #A8C5C1;
  --sage-pale:    #EBF3F2;

  /* Or */
  --gold:         #8B6914;
  --gold-light:   #B08A2A;
  --gold-bright:  #C9A84C;
  --gold-pale:    #F7F0DE;

  /* Verts */
  --vert:         #2E7D5A;
  --vert-light:   #3D9E72;
  --vert-pale:    #E4F2EC;

  /* Textes */
  --text:         #1A1A1A;
  --text-mid:     #555555;
  --text-light:   #909090;

  /* Surfaces neutres */
  --bg:           #F3F6F6;
  --surface:      #FFFFFF;
  --border:       #D5DCDB;
  --border-light: #EBF3F2;

  /* Statuts */
  --danger:       #B83232;
  --danger-pale:  #FAEAEA;
  --warning:      #C17B00;
  --warning-pale: #FBF0DC;
}

/* ════════════════════════════════════════════════════════
   L0 PRIMITIFS — Palette sémantique élargie
   (couleurs non-identitaires, hors palette AXE OI BOIS)
   Référence : documentation/DESIGN.md §3.1bis
   Ces tokens ne sont JAMAIS référencés directement dans
   components.css ni dans les HTML — ils servent uniquement
   dans la définition L1 (§4 DESIGN.md).
   ════════════════════════════════════════════════════════ */
:root {
  /* Bleu — bandeau source PDF (info) */
  --blue-bg:      #EFF6FF;
  --blue-border:  #3B82F6;
  --blue-text:    #1E40AF;

  /* Ambre — bandeau warn standard + badge fiabilité moyen (factorisé §5.3 #2 #3) */
  --amber-bg:        #FEF3C7;  /* unique — #FFF3CD fusionné ici */
  --amber-border:    #F59E0B;
  --amber-text:      #92400E;  /* texte fiab moyen */
  --amber-text-dark: #78350F;  /* texte banner-warn (plus contrasté) */

  /* Orange vif — bandeau warn FORT (§5.3 #1 — distinct sémantique du warn standard) */
  --orange-strong-bg:     #FFF3E0;
  --orange-strong-border: #E67E22;

  /* Cyan — bandeau info (acord-info-banner) */
  --cyan-bg:      #F0F9FF;
  --cyan-border:  #0EA5E9;
  --cyan-text:    #075985;

  /* Or pastel — bandeau Rk ajusté */
  --gold-soft-bg:     #FFF8E1;
  --gold-soft-border: #F0C040;
  --gold-soft-text:   #6B4F00;

  /* Vert pastel — badge fiabilité élevé (distinct de --vert-pale identitaire) */
  --green-bg:    #D1FAE5;
  --green-text:  #065F46;

  /* Orange — badge fiabilité faible */
  --orange-bg:    #FED7AA;
  --orange-text:  #9A3412;

  /* Orange vif — badge dev-mode interne (arbitrage David §inventaire prompt 58) */
  --orange-dev:   #E65100;

  /* Gris neutres (Tailwind-like, hors palette identitaire) */
  --gray-50:  #FAFAFA;  /* surface read-only ACORD/MD BAT */
  --gray-100: #F3F4F6;  /* badge neutral bg */
  --gray-150: #F8F8F6;  /* lignes de détail expandables */
  --gray-200: #E0DBD4;  /* bordure inputs */

  /* Rouge clair — fond inputs en erreur */
  --red-pale: #FFF8F7;

  /* --danger-dark : hover .btn-danger (§5.3 + retour audit) */
  --danger-dark: #9A2828;
}

/* ════════════════════════════════════════════════════════
   L0 PRIMITIFS — Ombres, anneaux et overlays
   Référence : documentation/DESIGN.md §3.5
   Les valeurs box-shadow et rgba() ne traînent plus dans les
   composants — toujours via token.
   ════════════════════════════════════════════════════════ */
:root {
  /* Ombres */
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.06);  /* .card:hover */
  --shadow-modal:      0 20px 60px rgba(0, 0, 0, 0.25);  /* .modal-content */
  --shadow-btn-hover:  0 4px 12px  rgba(0, 0, 0, 0.18);  /* button:hover */

  /* Anneaux focus */
  --ring-focus:        0 0 0 2px rgba(127, 165, 160, 0.15);  /* sage 15 % */
  --ring-focus-strong: 0 0 0 2px rgba(127, 165, 160, 0.18);  /* sage 18 % (text/select focus marqué) */
  --ring-error:        0 0 0 2px rgba(184, 50, 50, 0.18);    /* danger 18 % */

  /* Overlays (backdrop) */
  --color-overlay:        rgba(0, 0, 0, 0.45);  /* modale standard */
  --color-overlay-strong: rgba(0, 0, 0, 0.55);  /* CGU, modales importantes */
  --color-overlay-light:  rgba(255, 255, 255, 0.40);  /* hover bouton sur fond coloré */
}

:root {

  /* ============= COULEURS — sémantique ============= */

  --color-input-border: #e0dbd4;  /* occ: 17 | ex: .cat-summary-strip */
  --color-ui-bg: #6b6560;  /* occ: 9 | ex: input[type="file"] */
  --color-banner-warn-text: #78350f;  /* occ: 6 | ex: .acord-warn-banner */
  --color-input-error-text: #b3261e;  /* occ: 5 | ex: .input-error */
  --color-acord-text: #b45309;  /* occ: 5 | ex: .acord-section-badge */
  --color-ui-border: #e67e22;  /* occ: 5 | ex: .warning-materiau-non-reconnu */
  --color-ui-text: #b8860b;  /* occ: 4 | ex: .app-header */
  --color-catalogue-text: #999999;  /* occ: 4 | ex: #versionTag */
  --color-catalogue-text-light: #aaaaaa;  /* occ: 4 | ex: .cat-summary-empty */
  --color-input-fill: rgba(127,165,160,0.15);  /* occ: 4 | ex: .pond-sec-input:focus */
  --color-text-muted: #6b7280;  /* occ: 4 | ex: .al-density-selector */
  --color-pond-bg: #fafafa;  /* occ: 4 | ex: .acord-section-readonly */
  --color-ui-bg-light: #fff8e1;  /* occ: 4 | ex: .acord-section-readonly.acord-section-failed */
  --color-ui-bg-light-2: var(--color-banner-warn-bg);  /* alias étape 3 §11 Lot 2 — ⚠ régression sub-perceptible #FFF3CD→#FEF3C7 (§5.3 #2). Suppression étape 7. */
  --color-input-error-fill: rgba(179,38,30,0.12);  /* occ: 3 | ex: .pond-sec-input.input-error */
  --color-input-error-bg: #fff8f7;  /* occ: 3 | ex: .pond-sec-input.input-error */
  --color-warn-banner-bg: #fef3c7;  /* occ: 3 | ex: .fiabilite-badge--moyen */
  --color-banner-source-text: #1e40af;  /* occ: 3 | ex: .acord-source-banner,     .pond-source-banner */
  --color-acord-border: #e5e7eb;  /* occ: 3 | ex: .acord-appuis-table th,     .acord-appuis-table td */
  --color-ui-text-dark: #6b6b6b;  /* occ: 3 | ex: .rk-suffix */
  --color-overlay-bg: rgba(0,0,0,0.45);  /* occ: 2 | ex: .modal-overlay */
  --color-input-fill-alt-1: var(--ring-focus-strong);  /* alias étape 3 §11 Lot 2 — input:focus / select:focus. Suppression étape 7. */
  --color-ui-border-dark: #333333;  /* occ: 2 | ex: th */
  --color-catalogue-text-dark: #3a3028;  /* occ: 2 | ex: .cat-famille-row */
  --color-input-text: #111827;  /* occ: 2 | ex: #alInlineTable .select-wrapper-short::before */
  --color-ui-border-light: #d1d5db;  /* occ: 2 | ex: .al-density-btn */
  --color-ui-bg-dark: #1f2937;  /* occ: 2 | ex: .al-density-btn.is-active */
  --color-ui-bg-light-4: var(--color-fiab-eleve-bg);   /* alias étape 3 §11 Lot 2 — .fiabilite-badge--eleve. Suppression étape 7. */
  --color-ui-text-dark-2: var(--color-fiab-eleve-text); /* alias étape 3 §11 Lot 2. Suppression étape 7. */
  --color-ui-text-dark-3: var(--color-fiab-moyen-text); /* alias étape 3 §11 Lot 2. Suppression étape 7. */
  --color-ui-bg-light-5: var(--color-fiab-faible-bg);   /* alias étape 3 §11 Lot 2. Suppression étape 7. */
  --color-ui-text-dark-4: var(--color-fiab-faible-text); /* alias étape 3 §11 Lot 2. Suppression étape 7. */
  --color-details-row-bg: #f8f8f6;  /* occ: 2 | ex: .details-row > td */
  --color-ui-text-dark-5: var(--color-details-text-strong);  /* alias étape 3 §11 Lot 3.C — .details-section-title. Suppression étape 7. */
  --color-banner-source-bg: #eff6ff;  /* occ: 2 | ex: .acord-source-banner,     .pond-source-banner */
  --color-banner-source-border: #3b82f6;  /* occ: 2 | ex: .acord-source-banner,     .pond-source-banner */
  /* --color-banner-warn-border (#0ea5e9) supprimé — mauvais nommage
     historique (valeur cyan utilisée par .acord-info-banner).
     Remplacé par --color-banner-info-border ci-dessous + libère le
     nom pour ambre warn (BRIQUE B). Cf prompt 53 BRIQUE A-bis. */
  --color-ui-bg-light-6: var(--color-connector-card-hover-bg);  /* alias étape 3 §11 Lot 2 — .connector-card:hover. Suppression étape 7. */
  --color-ui-border-alt-3: var(--color-connector-card-active-border);  /* alias étape 3 §11 Lot 4.C — .connector-card.active. Suppression étape 7. */
  --color-ui-border-light-2: var(--gold-soft-border);  /* alias étape 3 §11 Lot 2 — .rk-adjusted-banner. Suppression étape 7. */
  --color-ui-border-light-3: var(--color-transparence-border);  /* alias étape 3 §11 Lot 3.C — .transparence-detail. Suppression étape 7. */
  --color-ui-text-dark-6: var(--color-transparence-text-strong); /* alias étape 3 §11 Lot 3.C — .transparence-detail > summary. Suppression étape 7. */
  --color-ui-fill: rgba(0,0,0,0.06);  /* occ: 1 | ex: .card:hover */
  --color-btn-bg: #fff0f0;  /* occ: 1 | ex: .btn-icon.danger-icon:hover */
  --color-modal-fill: rgba(0,0,0,0.25);  /* occ: 1 | ex: .modal-content */
  --color-input-error-bg-alt-1: var(--color-input-error-bg-soft);  /* alias étape 3 §11 Lot 5.C — .input-error. Suppression étape 7. */
  --color-ui-fill-alt-1: rgba(0,0,0,0.18);  /* occ: 1 | ex: button:hover:not(:disabled) */
  --color-status-text: #1a5a38;  /* occ: 1 | ex: .status.ok */
  --color-status-text-alt-1: var(--color-badge-err-text-strong);  /* alias étape 3 §11 Lot 2 — .status.err. Suppression étape 7. */
  --color-status-text-alt-2: var(--color-badge-warn-text-strong); /* alias étape 3 §11 Lot 2 — .status.busy. Suppression étape 7. */
  --color-ui-text-dark-7: var(--gold-soft-text);  /* alias étape 3 §11 Lot 2 — .progress-label. ⚠ Fusion sub-perceptible #6D4C00→#6B4F00 (≤ 4/255 RGB) assumée par décision David inventaire prompt 54. Suppression étape 7. */
  --color-catalogue-fill: rgba(0,0,0,0.10);  /* occ: 1 | ex: .cat-fourn-dropdown */
  --color-ui-text-dark-8: var(--color-density-btn-text);  /* alias étape 3 §11 Lot 5.C — .al-density-btn. Suppression étape 7. */
  --color-ui-bg-light-7: var(--gray-100);  /* alias étape 3 §11 Lot 2 — .al-density-btn:hover. Suppression étape 7. */
  --color-btn-text: #cc0000;  /* occ: 1 | ex: .btn-unselect-connecteur */
  --color-btn-text-light: #7a7a6e;  /* occ: 1 | ex: .btn-toggle-details */
  --color-btn-text-alt-2: var(--color-btn-toggle-details-hover-text);  /* alias étape 3 §11 Lot 5.C — .btn-toggle-details:hover. Suppression étape 7. */
  --color-ui-text-dark-9: var(--color-details-panel-text);  /* alias étape 3 §11 Lot 3.C — .details-panel. Suppression étape 7. */
  --color-ui-bg-light-8: var(--color-dev-badge-bg);  /* alias étape 3 §11 Lot 5.C — .dev-badge. Suppression étape 7. */
  --color-overlay-bg-alt-1: var(--color-overlay-strong);  /* alias étape 3 §11 Lot 2 — .cgu-overlay. Suppression étape 7. */
  --color-ui-fill-alt-2: rgba(0,0,0,0.30);  /* orphan TODO étape 7 — .cgu-box, 0 usage var() (rapporté prompt 58, conservé Lot 6) */
  --color-catalogue-fill-alt-1: rgba(0,0,0,0.12);  /* orphan TODO étape 7 — .cat-main-dropdown, 0 usage var() (rapporté prompt 58, conservé Lot 6) */
  --color-catalogue-bg: #f7f5f0;  /* occ: 1 | ex: .cat-fourn-row:hover */
  --color-catalogue-border: #f0ece6;  /* occ: 1 | ex: .cat-fourn-section.open .cat-fam-sub */
  --color-btn-bg-dark: #ede9e3;  /* occ: 1 | ex: .btn-cgu-link:hover */
  --color-overlay-strong-bg: rgba(0,0,0,0.5);  /* occ: 1 | ex: .acord-modal-overlay */
  --color-modal-shadow: rgba(0,0,0,0.2);  /* occ: 1 | ex: .acord-modal-content */
  --color-input-border-dark: #b91c1c;  /* occ: 1 | ex: .appuis-editable-input.error */
  --color-input-bg: #fef2f2;  /* occ: 1 | ex: .appuis-editable-input.error */
  --color-pond-bg-dark: #dbeafe;  /* occ: 1 | ex: .pond-badge-manual */
  --color-banner-warn-border-light: #f59e0b;  /* occ: 1 | ex: .acord-warn-banner */
  /* --color-banner-warn-bg (#f0f9ff) supprimé — mauvais nommage
     historique (valeur cyan utilisée par .acord-info-banner).
     Remplacé par --color-banner-info-bg ci-dessous + libère le
     nom pour ambre warn (BRIQUE B). Cf prompt 53 BRIQUE A-bis. */
  --color-info-banner-text: #075985;  /* occ: 1 | ex: .acord-info-banner */
  --color-modal-bg: #f0f4f8;  /* occ: 1 | ex: .modal-fam-bar */
  --color-modal-border: #b8d0e8;  /* occ: 1 | ex: .modal-fam-bar */
  --color-modal-text: #2d5a8b;  /* occ: 1 | ex: .modal-fam-bar-label */
  --color-ui-bg-light-9: var(--color-broche-mini-th-bg);          /* alias étape 3 §11 Lot 5.C — .broche-mini th. Suppression étape 7. */
  --color-ui-border-light-4: var(--color-broche-mini-th-border);  /* alias étape 3 §11 Lot 5.C — .broche-mini th. Suppression étape 7. */
  --color-ui-border-light-5: var(--color-broche-mini-td-border);  /* alias étape 3 §11 Lot 5.C — .broche-mini td. Suppression étape 7. */
  --color-ui-text-light: #9ca3af;  /* occ: 1 | ex: .taux-nv */
  --color-ui-border-light-6: var(--color-hors-domaine-border);     /* alias étape 3 §11 Lot 5.C — .hors-domaine-block. Suppression étape 7. */
  --color-ui-bg-light-10: var(--color-hors-domaine-summary-bg);    /* alias étape 3 §11 Lot 5.C — .hors-domaine-summary. Suppression étape 7. */
  --color-ui-text-dark-10: var(--color-hors-domaine-text);         /* alias étape 3 §11 Lot 5.C — .hors-domaine-summary text. ⚠ Sub-perceptible #666666→#555555 (arbitrage David). Suppression étape 7. */
  --color-ui-bg-light-11: var(--color-conn-l1-ro-bg);  /* alias étape 3 §11 Lot 4.C — .hors-domaine-content .conn-l1-row. Suppression étape 7. */
  --color-ui-fill-alt-3: rgba(0,0,0,0.3);  /* orphan TODO étape 7 — #copyToast, 0 usage var() (rapporté prompt 58, conservé Lot 6) */
  --color-ui-border-light-7: var(--color-connector-card-hover-border);  /* alias étape 3 §11 Lot 2. Suppression étape 7. */
  --color-ui-text-dark-11: var(--color-connector-label-text);          /* alias étape 3 §11 Lot 4.C — .connector-label. Suppression étape 7. */
  --color-ui-text-dark-12: var(--color-connector-cs-excluded-text);    /* alias étape 3 §11 Lot 4.C — .connector-card.cs-excluded ::after. Suppression étape 7. */
  --color-ui-border-light-8: var(--color-fournisseur-icon-border);     /* alias étape 3 §11 Lot 4.C — .fournisseur-icon. Suppression étape 7. */
  --color-ui-fill-alt-4: var(--color-fournisseur-icon-hover-bg);       /* alias étape 3 §11 Lot 4.C — .fournisseur-icon:hover. Suppression étape 7. */
  --color-ui-text-light-2: var(--color-breadcrumb-separator-text);     /* alias étape 3 §11 Lot 4.C — .breadcrumb-separator. Suppression étape 7. */
  --color-acord-bg: #f9fafb;  /* occ: 1 | ex: .acord-traceability */
  --color-acord-text-alt-2: #0369a1;  /* occ: 1 | ex: .acord-trace-section strong */
  --color-ui-text-dark-13: var(--gold-soft-text);  /* alias étape 3 §11 Lot 2 — .rk-adjusted-banner. Suppression étape 7. */
  --color-ui-bg-light-12: var(--color-transparence-bg);    /* alias étape 3 §11 Lot 3.C — .transparence-detail. Suppression étape 7. */
  --color-ui-bg-light-13: var(--color-transparence-th-bg); /* alias étape 3 §11 Lot 3.C — .transparence-table th. Suppression étape 7. */
  --color-ui-bg-alt-15: var(--vert);  /* alias étape 3 §11 Lot 5.C — §5.3 #4 : alignement #2E7D32 → #2E7D5A (régression sub-perceptible assumée .badge-retenu). Suppression étape 7. */

  /* ============= ESPACEMENTS ============= */

  --space-ui-padding: 10px;  /* occ: 34 | ex: .btn-compact */
  --space-ui-margin: 6px;  /* occ: 29 | ex: .app-header h1 */
  --space-ui-gap: 2px;  /* occ: 21 | ex: .pond-sec-wrap */
  --space-ui-margin-lg: 14px;  /* occ: 18 | ex: h2 */
  --space-ui-margin-sm: 5px;  /* occ: 15 | ex: .app-header .subtitle */
  --space-ui-gap-y: 3px;  /* occ: 15 | ex: .conn-wrap-libres */
  --space-ui-padding-sm: 7px;  /* occ: 11 | ex: #alInlineTable td */
  --space-ui-padding-y: 24px;  /* occ: 10 | ex: .app-header-inner */
  --space-ui-padding-lg: 18px;  /* occ: 10 | ex: button */
  --space-ui-margin-sm-2: 0.5em;  /* occ: 8 | ex: #alCourantDomain p */
  --space-ui-gap-sm: 0.4em;  /* occ: 4 | ex: .rk-adjusted-banner */
  --space-ui-padding-lg-2: 40px;  /* occ: 3 | ex: .main-content */
  --space-input-padding: 9px;  /* occ: 3 | ex: input[type="text"], select */
  --space-ui-padding-lg-3: 15px;  /* occ: 3 | ex: button.btn-append */
  --space-ui-margin-y: 0.75em;  /* occ: 3 | ex: .transparence-detail */
  --space-modal-padding: 32px;  /* occ: 2 | ex: .modal-content */
  --space-ui-padding-sm-2: 1px;  /* orphan TODO étape 7 — .conn-ref-line, 0 usage var() (arbitrage David inventaire §4 confiance faible) */
  --space-ui-padding-lg-4: 22px;  /* occ: 2 | ex: .cgu-header */
  --space-ui-margin-sm-3: 0.25em;  /* occ: 2 | ex: #alCourantDomain ul */
  --space-ui-margin-sm-4: 0.15em;  /* orphan TODO étape 7 — #alCourantDomain li, 0 usage var() (arbitrage David inventaire §4) */
  --space-ui-padding-sm-3: 0.6em;  /* occ: 2 | ex: .transparence-table th,     .transparence-table td */
  --space-ui-padding-sm-4: 0.2em;  /* occ: 2 | ex: .transparence-coefs li,     .transparence-formules */
  --space-ui-margin-sm-5: -1px;  /* orphan TODO étape 7 — .visually-hidden a11y standard, 0 usage var() (arbitrage David inventaire §4) */
  --space-tab-margin-y: -2px;  /* occ: 1 | ex: .tab-item */
  --space-ui-margin-sm-6: 1.25em;  /* occ: 1 | ex: #alCourantDomain ul */
  --space-ui-padding-sm-5: 0.55em;  /* occ: 1 | ex: .rk-adjusted-banner */
  --space-ui-padding-sm-6: 1em;  /* occ: 1 | ex: .transparence-detail */
  --space-ui-padding-sm-7: 0.1em;  /* orphan TODO étape 7 — .badge-retenu, 0 usage var() (arbitrage David inventaire §4) */
  --space-table-margin: 15px;  /* B.1.bis | usage: .data-table margin-top */

  /* échelle px : multiple de 4 (--space-N = N*4px) */

  --space-1: 4px;  /* occ: 40 | ex: .card-header h3, .card-header--collapsible h3 */
  --space-2: 8px;  /* occ: 61 | ex: .btn-icon */
  --space-3: 12px;  /* occ: 36 | ex: p */
  --space-4: 16px;  /* occ: 20 | ex: .card-header--collapsible */
  --space-5: 20px;  /* occ: 19 | ex: .app-header */
  --space-7: 28px;  /* occ: 5 | ex: .card */

  /* ============= TYPOGRAPHIE ============= */

  --font-btn-size: 12px;  /* font-size | occ: 35 | ex: .btn-compact */
  --font-catalogue-size: 11px;  /* font-size | occ: 29 | ex: .cat-famille-count */
  --font-ui-size: 13px;  /* font-size | occ: 28 | ex: .app-header .subtitle-note */
  --font-ui-weight: 600;  /* font-weight | occ: 27 | ex: label */
  --font-card-header-weight: 700;  /* font-weight | occ: 26 | ex: .card-header h3, .card-header--collapsible h3 */
  --font-ui-family: 'DM Sans', Arial, sans-serif;  /* font-family | occ: 24 | ex: body */
  --font-ui-size-lg: 14px;  /* font-size | occ: 13 | ex: #versionTag */
  --font-ui-transform: uppercase;  /* text-transform | occ: 10 | ex: .sub-block h4 */
  --font-ui-line-height: 1;  /* line-height | occ: 9 | ex: .app-header h1 */
  --font-ui-family-alt-1: var(--font-family-title);  /* alias étape 3 §11 Lot 2 — .app-header h1. Suppression étape 7. */
  --font-catalogue-size-sm: 10px;  /* font-size | occ: 7 | ex: .cat-fourn-arrow */
  --font-modal-size: 0.9rem;  /* font-size | occ: 7 | ex: .acord-modal-text */
  --font-ui-weight-sm: 500;  /* font-weight | occ: 7 | ex: button */
  --font-ui-letter-spacing: 0.5px;  /* letter-spacing | occ: 7 | ex: th */
  --font-ui-size-lg-2: var(--font-size-xl);    /* alias étape 3 §11 Lot 2 — body. Suppression étape 7. */
  --font-ui-weight-sm-2: var(--font-weight-normal); /* alias étape 3 §11 Lot 2 — #versionTag + components.css L564. Suppression étape 7. */
  --font-ui-line-height-lg: 1.5;  /* line-height | occ: 5 | ex: p */
  --font-ui-line-height-lg-2: 1.4;  /* line-height | occ: 4 | ex: .sub-block .help-text */
  --font-acord-size: 0.75em;  /* font-size | occ: 3 | ex: .acord-effort-combi */
  --font-ui-size-sm: 0.85em;  /* font-size | occ: 3 | ex: .appuis-editable-cell:hover::after */
  --font-ui-size-sm-2: 0.95em;  /* font-size | occ: 3 | ex: .rk-adjusted-icon */
  --font-ui-size-sm-3: var(--font-size-em-small);  /* alias étape 3 §11 Lot 6.C — .transparence-table + variantes. Suppression étape 7. */
  --font-catalogue-line-height: 30px;  /* line-height | occ: 3 | ex: .cat-summary-label */
  --font-pond-line-height: 1.2;  /* line-height | occ: 3 | ex: .pond-sec-error */
  --font-select-acord-line-height: 24px;  /* Acord select Porteur | usage: line-height */
  --font-cell-rk-family: sans-serif;  /* font-family | occ: 2 | ex: #pondTableWrap td.cell-rk .elu-cas */
  --font-card-header-size: 22px;  /* font-size | occ: 2 | ex: .card-header h3, .card-header--collapsible h3 */
  --font-tab-size: 16px;  /* font-size | occ: 2 | ex: .tab-item */
  --font-cell-rk-size: 0.72em;  /* font-size | occ: 2 | ex: #pondTableWrap td.cell-rk .elu-cas */
  --font-input-size: 0.85rem;  /* font-size | occ: 2 | ex: .al-density-selector */
  --font-modal-size-lg: 0.95rem;  /* font-size | occ: 2 | ex: .acord-modal-select */
  --font-ui-weight-lg: 800;  /* font-weight | occ: 2 | ex: .app-header h1 */
  --font-ui-letter-spacing-lg: 1px;  /* letter-spacing | occ: 2 | ex: .app-header h1 */
  --font-ui-letter-spacing-sm: 0.3px;  /* letter-spacing | occ: 2 | ex: .fiabilite-badge */
  --font-card-header-line-height: 1.3;  /* line-height | occ: 2 | ex: .card-header h3, .card-header--collapsible h3 */
  --font-cell-rk-family-mono: monospace;  /* font-family | occ: 1 | ex: #pondTableWrap td.cell-rk */
  --font-ui-family-alt-2: var(--font-family-mono); /* alias étape 3 §11 Lot 2 — .details-formula. Suppression étape 7. */
  --font-ui-family-alt-3: var(--font-family-mono); /* alias étape 3 §11 Lot 2 — .transparence-coefs/formules. Suppression étape 7. */
  --font-ui-family-alt-4: var(--font-family-base); /* alias étape 3 §11 Lot 2 — .badge-retenu. Suppression étape 7. */
  --font-ui-size-lg-3: var(--font-size-display-xl);  /* alias étape 3 §11 Lot 6.C — .app-header h1 index.html. Suppression étape 7. */
  --font-ui-size-lg-4: var(--font-size-display-sm);  /* alias étape 3 §11 Lot 6.C — .app-header .subtitle. Suppression étape 7. */
  --font-modal-size-lg-2: var(--font-size-modal-h3); /* alias étape 3 §11 Lot 6.C — .modal-content h3. Suppression étape 7. */
  --font-ui-size-sm-4: var(--font-size-density-btn); /* alias étape 3 §11 Lot 6.C — .al-density-btn. Suppression étape 7. */
  --font-ui-size-lg-5: var(--font-size-cgu-h3);      /* alias étape 3 §11 Lot 6.C — .cgu-header h3. Suppression étape 7. */
  --font-modal-title-size: 1.2rem;  /* font-size | occ: 1 | ex: .acord-modal-title */
  --font-acord-size-lg: 1em;  /* font-size | occ: 1 | ex: .appuis-delete-btn,     .acord-delete-btn */
  --font-pond-size: 0.7em;  /* font-size | occ: 1 | ex: .pond-badge-manual */
  --font-ui-size-lg-6: var(--font-size-display-lg);          /* alias étape 3 §11 Lot 6.C — .app-header h1 recherche.html. Suppression étape 7. */
  --font-ui-size-sm-5: var(--font-size-badge-a-confirmer);   /* alias étape 3 §11 Lot 6.C — .badge-a-confirmer. Suppression étape 7. */
  --font-ui-size-sm-6: var(--font-size-transparence-marker); /* alias étape 3 §11 Lot 6.C — summary::before. Suppression étape 7. */
  --font-ui-letter-spacing-lg-2: 0.6px;   /* orphan TODO étape 7 — .sub-block h4, 0 usage var() (arbitrage David inventaire §4) */
  --font-ui-letter-spacing-sm-2: 0.4px;   /* orphan TODO étape 7 — .dim-contraintes-title, 0 usage var() (arbitrage David inventaire §4) */
  --font-ui-letter-spacing-sm-3: 0.06em;  /* orphan TODO étape 7 — .drilldown-title, 0 usage var() (arbitrage David inventaire §4) */
  --font-ui-letter-spacing-sm-4: 0.2px;   /* orphan TODO étape 7 — .badge-a-confirmer, 0 usage var() (arbitrage David inventaire §4) */
  --font-table-body-line-height: normal;  /* line-height | occ: 1 | ex: #alInlineTable tbody td input,     #alInlineTable  */
  --font-table-body-line-height-alt-1: var(--line-height-cell-dual);      /* alias étape 3 §11 Lot 6.C — #alInlineTable .cell-dual-wrap. Suppression étape 7. */
  --font-table-body-line-height-alt-2: var(--line-height-cell-secondary); /* alias étape 3 §11 Lot 6.C — .cell-value-secondary. Suppression étape 7. */
  --font-ui-line-height-lg-3: var(--line-height-loose);  /* alias étape 3 §11 Lot 2 — .details-panel. Suppression étape 7. */
  --font-ui-line-height-lg-4: var(--line-height-cgu-body);   /* alias étape 3 §11 Lot 6.C — .cgu-body. Suppression étape 7. */
  --font-ui-line-height-lg-5: var(--line-height-app-footer); /* alias étape 3 §11 Lot 6.C — .app-footer. Suppression étape 7. */

  /* ============= DIMENSIONS (largeurs / hauteurs) ============= */

  --width-table: 60px;  /* width | occ: 4 | ex: #pondTableWrap col.col-rk */
  --width-select-materiau: 110px;  /* B.1.bis | usage: .materiau-porteur-wrap[data-context="md_bat"] .materiau-porteur-select width */
  --min-width-conn-mode-select: 200px;  /* §144.9 prompt 47 | usage: .conn-mode-select min-width anti-troncature (libellés "2 connecteurs unitaires (pièces ext.)") */
  --width-col-source: 90px;  /* Acord colgroup | usage: col.col-source */
  --width-col-effort: 90px;  /* Acord colgroup | usage: col.col-effort (Descente/Arrachement/Horizontal) */
  --width-col-duree: 110px;  /* Acord colgroup | usage: col.col-duree */
  --width-col-porteur: 160px;  /* Acord colgroup | usage: col.col-porteur (Support rigide 14ch + flèche + marge) */
  --height-select-acord: 26px;  /* Acord select Porteur | usage: .materiau-porteur-wrap[data-context="acord"] .materiau-porteur-select height */
  --space-select-acord-arrow: 24px;  /* Acord select Porteur | usage: padding-right (réserve flèche dropdown native) */
  --space-select-acord-text: 8px;  /* Acord select Porteur | usage: padding-left (texte) */
  --max-width-ui: 1300px;  /* max-width | occ: 3 | ex: .app-header-inner */
  --min-width-col: 120px;  /* min-width | occ: 3 | ex: #alInlineTable tbody td.cell-g */
  --width-table-lg: 120px;  /* width | occ: 2 (col-mat-porteur, col-prov) | ex: #pondTableWrap col.col-mat-porteur. Prompt 64 (2026-05-18) : 80px → 120px pour rendre lisible le placeholder « — à saisir — » du <select.materiau-porteur-select> (min-width 110px via --width-select-materiau). D-DOCT-6 police 11px préservée (variable indépendante). */
  --width-col-conn: 110px;  /* width | occ: 3 | ex: #pondTableWrap col.col-conn */
  --width-input: 48px;  /* width | occ: 3 | ex: .repere-input */
  --height-ui: 8px;  /* height | occ: 2 | ex: .progress-wrap */
  --height-ui-lg: 48px;  /* height | occ: 2 | ex: .appui-icon.label */
  --max-height-catalogue: 400px;  /* max-height | occ: 2 | ex: .cat-fourn-wrap.open .cat-fourn-dropdown */
  --max-width-ui-sm: 1200px;  /* max-width | occ: 2 | ex: .app-header-inner */
  --min-width-ui: 220px;  /* min-width | occ: 2 | ex: .grid-row .field-group */
  --min-width-table: 780px;  /* min-width | occ: 2 | ex: #pondTableWrap table */
  --min-width-col-sm: 110px;  /* min-width | occ: 2 | ex: #alInlineTable tbody td select[data-field="classe_ */
  --min-width-modal: 150px;  /* min-width | occ: 2 | ex: .modal-filter-field.fam-field */
  --width-col-type: 70px;  /* width | occ: 2 | ex: #pondTableWrap col.col-type */
  --width-col-sec: 100px;  /* width | occ: 2 | ex: #pondTableWrap col.col-sec — élargi 72→100 mini-106-B bugfix §131.12 pour contenir suffixe (Xn) */
  --width-input-lg: 54px;  /* width | occ: 2 | ex: .pond-type-input */
  --height-ui-sm: 1px;  /* height | occ: 1 | ex: .visually-hidden */
  --height-ui-lg-2: var(--height-spinner);  /* alias étape 3 §11 Lot 5.C — .spinner. Suppression étape 7. */
  --height-appui-libres: 28px;  /* height | occ: 1 | ex: .al-density-btn */
  --height-ui-lg-3: var(--height-repere-input);  /* alias étape 3 §11 Lot 5.C — .repere-wrap. Suppression étape 7. */
  --height-btn: 24px;  /* height | occ: 1 | ex: .btn-toggle-details */
  --height-ui-lg-4: var(--height-connector-img);  /* alias étape 3 §11 Lot 4.C — .connector-card img. Suppression étape 7. */
  --max-height-btn: 36px;  /* max-height | occ: 1 | ex: #alInlineTable tbody td input,     #alInlineTable  */
  --max-height-ui: 80vh;  /* max-height | occ: 1 | ex: .cgu-box */
  --max-height-ui-alt-1: 800px;  /* max-height | occ: 1 | ex: .card-body-wrap */
  --max-height-catalogue-lg: 600px;  /* max-height | occ: 1 | ex: .cat-main-wrap.open .cat-main-dropdown */
  --max-height-ui-alt-2: 9999px;  /* max-height | occ: 1 | ex: .conn-detail-inner.open */
  --max-height-ui-alt-3: 56px;  /* max-height | occ: 1 | ex: .fournisseur-icon img */
  --max-width-modal: 440px;  /* max-width | occ: 1 | ex: .modal-content */
  --max-width-ui-sm-2: var(--max-width-conn-ref-line);     /* alias étape 3 §11 Lot 4.C — .conn-ref-line. Suppression étape 7. */
  --max-width-ui-sm-3: var(--max-width-conn-ref-display);  /* alias étape 3 §11 Lot 4.C — .conn-ref-line .conn-ref-display (nested). Suppression étape 7. */
  --max-width-ui-sm-4: var(--max-width-conn-ref-display-standalone);  /* alias étape 3 §11 Lot 5.C — .conn-ref-display standalone. Suppression étape 7. */
  --max-width-ui-sm-5: var(--max-width-cgu-box);  /* alias étape 3 §11 Lot 5.C — .cgu-box. Suppression étape 7. */
  --max-width-modal-lg: 560px;  /* max-width | occ: 1 | ex: .acord-modal-content */
  --max-width-ui-sm-6: var(--max-width-fournisseur-icon);  /* alias étape 3 §11 Lot 4.C — .fournisseur-icon img. Suppression étape 7. */
  --min-height-status: 30px;  /* min-height | occ: 1 | ex: .status */
  --min-height-tab: 60px;  /* min-height | occ: 1 | ex: .tab-item */
  --min-height-btn: 24px;  /* min-height | occ: 1 | ex: #alInlineTable tbody td input,     #alInlineTable  */
  --min-height-ui: 80px;  /* min-height | occ: 1 | ex: .results-wrap */
  --min-height-ui-lg: 90px;  /* min-height | occ: 1 | ex: .fournisseur-icon */
  --min-width-col-sm-2: var(--min-width-col-mat-porteur-al);  /* alias étape 3 §11 Lot 5.C — #alInlineTable materiau. Suppression étape 7. */
  --min-width-col-lg: 130px;  /* min-width | occ: 1 | ex: #alInlineTable tbody td.cell-felu */
  --min-width-catalogue: 200px;  /* min-width | occ: 1 | ex: .cat-grid .field-group */
  --min-width-catalogue-lg: 260px;  /* min-width | occ: 1 | ex: .cat-main-dropdown */
  --min-width-modal-lg: 400px;  /* min-width | occ: 1 | ex: .acord-modal-content */
  --width-modal: 90%;  /* width | occ: 1 | ex: .modal-content */
  --width-input-lg-2: var(--width-input-default);  /* alias étape 3 §11 Lot 5.C — input/select default. Suppression étape 7. */
  --width-input-lg-3: var(--width-label-input);    /* alias étape 3 §11 Lot 5.C — .label-input. Suppression étape 7. */
  --width-ui: 1px;  /* width | occ: 1 | ex: .visually-hidden */
  --width-ui-lg: 14px;  /* width | occ: 1 | ex: .spinner */
  --width-table-sm: 40px;  /* width | occ: 1 | ex: #pondTableWrap col.col-rep */
  --width-col-noeud: 45px;  /* width | occ: 1 | ex: #pondTableWrap col.col-noeud */
  --width-col-bois: 62px;  /* width | occ: 1 | ex: #pondTableWrap col.col-bois */
  --width-col-pdf: 100px;  /* width | occ: 1 | ex: #pondTableWrap col.col-pdf */
  --width-col-act: 70px;  /* width | occ: 1 | ex: #pondTableWrap col.col-act */
  --width-btn: 24px;  /* width | occ: 1 | ex: .btn-toggle-details */
  --width-pond: 190px;  /* width | occ: 1 | ex: .pond-connector */
  --width-ui-lg-2: var(--width-cgu-box);  /* alias étape 3 §11 Lot 5.C — .cgu-box. Suppression étape 7. */

}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Bandeau info (cyan)
   Référence : documentation/DESIGN.md §4.6
   Résolution collision prompt 53 BRIQUE A-bis : remplace les
   anciens --color-banner-warn-{bg,border} (cyan) supprimés,
   libérant les noms pour ambre warn (BRIQUE B).
   ════════════════════════════════════════════════════════ */
:root {
  --color-banner-info-bg:     var(--cyan-bg);      /* = #F0F9FF */
  --color-banner-info-border: var(--cyan-border);  /* = #0EA5E9 */
  --color-banner-info-text:   var(--cyan-text);    /* = #075985 */
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Bandeau warn standard + warn fort
   Référence : documentation/DESIGN.md §4.6, §5.3 #1, §5.3 #2
   Noms libérés par BRIQUE A-bis (cyan déplacé vers info).
   ════════════════════════════════════════════════════════ */
:root {
  /* Cibles §5.1 — anciens --color-ui-bg-light-2 (#FFF3CD) et
     --color-ui-border (#E67E22). #FFF3CD fusionné sur #FEF3C7
     par §5.3 #2 (régression sub-perceptible documentée). */
  --color-banner-warn-bg:     var(--amber-bg);     /* #FEF3C7 unifié */
  --color-banner-warn-border: var(--amber-border); /* #F59E0B */
  /* --color-banner-warn-text reste déclaré en L80 (#78350F)
     = équivalent --amber-text-dark, valeur identique */

  /* Variante warn FORT (§5.3 #1) — orange vif #E67E22 préservé */
  --color-banner-warn-bg-strong:     var(--orange-strong-bg);     /* #FFF3E0 */
  --color-banner-warn-border-strong: var(--orange-strong-border); /* #E67E22 */
  --color-banner-warn-text-strong:   var(--amber-text-dark);      /* #78350F */
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Badges fiabilité connecteur
   Référence : documentation/DESIGN.md §4.7, §5.3 #3
   §5.3 #3 : --color-fiab-moyen-bg pointe vers --amber-bg comme
   --color-banner-warn-bg (découplé L1, même L0). Si divergence
   future souhaitée, remonter au L0 en créant 2 nuances.
   ════════════════════════════════════════════════════════ */
:root {
  --color-fiab-eleve-bg:    var(--green-bg);
  --color-fiab-eleve-text:  var(--green-text);
  --color-fiab-moyen-bg:    var(--amber-bg);
  --color-fiab-moyen-text:  var(--amber-text);
  --color-fiab-faible-bg:   var(--orange-bg);
  --color-fiab-faible-text: var(--orange-text);
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Badges statut variantes fortes
   Référence : documentation/DESIGN.md §5.1 (3 dernières lignes)
   TODO : promotion L0 si réutilisé hors badges statut.
   ════════════════════════════════════════════════════════ */
:root {
  --color-badge-ok-text-strong:   #1A5A38;
  --color-badge-err-text-strong:  #7A1A1A;
  --color-badge-warn-text-strong: #7A4A00;
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Bordure cellule tableau
   Référence : documentation/DESIGN.md §5.1 (cible --color-acord-border)
   ════════════════════════════════════════════════════════ */
:root {
  --color-table-cell-border: #E5E7EB;
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Carte connecteur recherche.html
   Référence : documentation/DESIGN.md §5.1 (lignes 1-2)
   TODO : promotion L0 si réutilisé hors carte connecteur.
   ════════════════════════════════════════════════════════ */
:root {
  --color-connector-card-hover-bg:     #F5F0E8;
  --color-connector-card-hover-border: #D4A94C;
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Tableau details + Transparence
   Référence : DESIGN.md §4 + inventaire 2026-05-18 §2.1 Lot 3
   Valeurs hex directes — TODO promotion L0 si réutilisation
   future hors details/transparence.
   ════════════════════════════════════════════════════════ */
:root {
  /* Tableau details (lignes expandables sous .data-table) */
  --color-details-text-strong:  #1C1C1C;   /* .details-section-title + .details-total */
  --color-details-panel-text:   #3A3A34;   /* .details-panel corps */

  /* Transparence (composant accordéon de calcul détaillé recherche.html) */
  --color-transparence-bg:           #FAF7F0;   /* fond .transparence-detail */
  --color-transparence-border:       #E0D8C4;   /* bordure + bordures cellules */
  --color-transparence-text-strong:  #3A2F1C;   /* texte summary + section-title */
  --color-transparence-th-bg:        #F0EAD8;   /* fond .transparence-table th */
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Connecteurs / Carrousel / Fournisseurs
   Référence : DESIGN.md §4 + inventaire 2026-05-18 §2.1 Lot 4
   Valeurs hex directes — TODO promotion L0 si réutilisation
   future hors composants connecteur/fournisseur.
   ════════════════════════════════════════════════════════ */
:root {
  /* Carrousel sous-familles + cartes connecteur (recherche.html) */
  --color-connector-card-active-border: #B8912E;   /* .connector-card.active border + box-shadow */
  --color-connector-label-text:         #4A4A4A;   /* .connector-label text */
  --color-connector-cs-excluded-text:   #C0392B;   /* .connector-card.cs-excluded ::after warning */
  --height-connector-img:               60px;      /* .connector-card img height + width */

  /* Fournisseurs (icônes vendeurs) */
  --color-fournisseur-icon-border:      #D4D4D4;
  --color-fournisseur-icon-hover-bg:    rgba(127,165,160,0.2);
  --max-width-fournisseur-icon:         120px;     /* .fournisseur-icon img */

  /* Navigation breadcrumb (recherche.html) */
  --color-breadcrumb-separator-text:    #BBBBBB;   /* arbitrage David inventaire : pas d'alias --text-light (écart non sub-perceptible) */

  /* Hors-domaine */
  --color-conn-l1-ro-bg:                #F5F5F5;   /* .hors-domaine-content .conn-l1-row */

  /* Largeurs colonne réf connecteur (index.html) */
  --max-width-conn-ref-line:            130px;     /* .conn-ref-line container */
  --max-width-conn-ref-display:         90px;      /* .conn-ref-line .conn-ref-display (nested) */
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Modales / CGU / hors-domaine / broche-mini
   Référence : DESIGN.md §4 + inventaire 2026-05-18 §2.1 Lot 5
   Valeurs hex directes (TODO promo L0 si réutilisation future).
   Valeurs box-shadow extraites du rendu réel (cf prompt 58 §2.4).
   ════════════════════════════════════════════════════════ */
:root {
  /* Outils internes */
  --color-dev-badge-bg:                  var(--orange-dev);   /* = #E65100 — .dev-badge */
  --color-density-btn-text:              #374151;             /* .al-density-btn — TODO promo L0 */
  --color-btn-toggle-details-hover-text: #3D6B3D;             /* .btn-toggle-details:hover — TODO promo L0 */
  --color-input-error-bg-soft:           #FFF1F0;             /* .input-error background — TODO promo L0 */

  /* Broche-mini (tableau interne fiche connecteur recherche.html) */
  --color-broche-mini-th-bg:     #E8E0D0;     /* .broche-mini th background */
  --color-broche-mini-th-border: #D0C8B0;     /* .broche-mini th border */
  --color-broche-mini-td-border: #E0D8C8;     /* .broche-mini td border */

  /* Hors-domaine (accordéon connecteurs hors domaine) */
  --color-hors-domaine-border:     #CCCCCC;   /* .hors-domaine-block border */
  --color-hors-domaine-summary-bg: #F0F0F0;   /* .hors-domaine-summary background */
  --color-hors-domaine-text:       var(--text-mid);  /* arbitrage David : alias #555555 (vs #666666 original, sub-perceptible) */

  /* Ombres CGU / dropdown / toast (valeurs extraites du rendu réel) */
  --shadow-cgu:      0 8px 40px rgba(0, 0, 0, 0.30);   /* .cgu-box index.html L1014 */
  --shadow-dropdown: 0 -4px 20px rgba(0, 0, 0, 0.12);  /* .cat-fourn-dropdown index.html L1072 */
  --shadow-toast:    0 4px 16px rgba(0, 0, 0, 0.3);    /* #copyToast recherche.html L311 */

  /* Dimensions CGU + inputs + spinner + min-width AL */
  --max-width-cgu-box:       660px;     /* .cgu-box max-width */
  --width-cgu-box:           92%;       /* .cgu-box width */
  --width-input-default:     320px;     /* input/select width default */
  --width-label-input:       68px;      /* .label-input width */
  --height-spinner:          14px;      /* .spinner width + height */
  --height-repere-input:     32px;      /* .repere-wrap height */
  --min-width-col-mat-porteur-al: 80px; /* #alInlineTable td select[data-field="materiau"] */

  /* Largeur conn-ref-display standalone (scope distinct du nested 90px Lot 4) */
  --max-width-conn-ref-display-standalone: 100px;  /* .conn-ref-display standalone index.html L934 */
}

/* ════════════════════════════════════════════════════════
   L1 SÉMANTIQUES — Typographie (Lot 6)
   Référence : DESIGN.md §3.3 + §4, inventaire 2026-05-18 §2.2
   ════════════════════════════════════════════════════════ */
:root {
  /* Échelle display (titres app-header) */
  --font-size-display-xl: 58px;  /* .app-header h1 index.html (desktop) */
  --font-size-display-lg: 36px;  /* .app-header h1 recherche.html (fenêtre détachée) */
  --font-size-display-sm: 20px;  /* .app-header .subtitle index.html */

  /* Font-sizes spécifiques par composant */
  --font-size-modal-h3:            18px;     /* .modal-content h3 */
  --font-size-density-btn:         0.82rem;  /* .al-density-btn */
  --font-size-cgu-h3:              17px;     /* .cgu-header h3 */
  --font-size-badge-a-confirmer:   10.5px;   /* .badge-a-confirmer */
  --font-size-em-small:            0.9em;    /* .transparence-table + variantes */
  --font-size-transparence-marker: 0.8em;    /* .transparence-detail > summary::before */

  /* Line-heights spécifiques */
  --line-height-cell-dual:        1.15;  /* #alInlineTable .cell-dual-wrap (D-DOCT-5) */
  --line-height-cell-secondary:   1.05;  /* #alInlineTable .cell-value-secondary */
  --line-height-cgu-body:         1.75;  /* .cgu-body */
  --line-height-app-footer:       2;     /* .app-footer */
}