/* ============================================================
   components.css — Composants canoniques APPUIBOIS
   Chantier A.6.1 (cadrage refonte UI v2 §3.2)

   Source de vérité formelle pour les composants UI canoniques.
   Définitions D8 (cadrage §3.2) — chaque composant comporte :
     - classe CSS dédiée
     - tokens utilisés (référencés dans le commentaire)
     - exemple HTML minimal
     - variantes autorisées
     - tests statiques (à venir en B.1)

   PORTÉE A.6.1 — duplication contrôlée
   Les classes canoniques sont déclarées ici ET dans le CSS inline
   de index.html. Cette duplication est intentionnelle. La
   suppression des déclarations du CSS inline interviendra en
   A.6.3 (après renommage des tokens en A.6.2).

   Validation A.6.1 = zéro changement visuel (cascade neutre,
   valeurs identiques des deux côtés).

   Date    : 2026-04-30
   ============================================================ */

/* ============================================================
   .data-table — Tableau de données canonique

   Tokens utilisés      : --border, --min-width-table, --noir, --sage-pale, --surface, --text
   Variantes autorisées : .table-recap (legacy alias APPUIS LIBRES),
                          ajouts métier (.acord-table, .pond-table)
   Exemple HTML minimal :
     <table class="data-table">
       <colgroup>...</colgroup>
       <thead><tr><th>...</th></tr></thead>
       <tbody><tr><td>...</td></tr></tbody>
     </table>
   ============================================================ */

#acordContent table.data-table {
      min-width: var(--min-width-table);
    }

/* ═══════════════════════════════════════════════════════════════════
       Harmonisation tableaux — Commit 1/4 (préparation, ZÉRO application
       au DOM dans ce commit). Le commit 2 basculera les balises HTML
       sur ces classes pour aligner visuellement les 3 tableaux APPUIBOIS
       (ACORD pondéré / MD BAT pondéré / APPUIS LIBRES).
       Source : David — chantier 4-commits validé 30/04/2026.
       Tokens utilisés exclusivement : variables CSS du projet.
       ═══════════════════════════════════════════════════════════════════ */

    /* `.data-table` — classe canonique pour les 3 tableaux APPUIBOIS.
       Définit en explicite ce qui est aujourd'hui hérité des sélecteurs
       globaux `table { ... }`, `th { ... }`, `td { ... }` (l. 352-365).
       Au commit 2, les balises `<table class="data-table">` recevront
       ces styles via la classe au lieu du sélecteur global. Identique
       au comportement actuel — zéro changement visuel attendu. */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: var(--space-table-margin);
      background: var(--surface);
      font-size: var(--font-ui-size);
    }

.data-table thead th {
      background: var(--noir);
      color: var(--surface);
      font-size: var(--font-btn-size);
      font-weight: var(--font-ui-weight);
      letter-spacing: var(--font-ui-letter-spacing);
      padding: var(--space-input-padding) var(--space-3);
      text-align: center;
      border: 1px solid var(--color-ui-border-dark);
      text-transform: none;
    }

.data-table tbody td {
      border: 1px solid var(--border);
      padding: var(--space-2) var(--space-3);
      text-align: center;
      color: var(--text);
    }

/* Hotfix harmonisation visuelle (30/04/2026) — fix #1 zébrage APPUI
       SIMPLIFIÉ : APPUI SIMPLIFIÉ rend 3 <tr> par appui (le 3ème est
       `<tr class="details-row" hidden>` qui sert au panneau de détail
       collapsible). Le 3ème tr étant hidden mais comptabilisé par
       :nth-child, le pattern white/sage se décalait d'une ligne à
       chaque appui — zébrage chaotique perçu comme « cassé ».
       APPUI POTEAU (2 <tr> par appui) restait correct. Solution :
       CSS Selectors Level 4 `:nth-child(... of :not(.details-row))`
       qui exclut les details-row du comptage. Compat : Chrome 111+,
       Firefox 113+, Safari 9+ (parc cible OK). */
    .data-table tbody tr:nth-child(even of :not(.details-row)) td { background: var(--table-row-alt, var(--sage-pale)); }

.data-table tbody tr:nth-child(odd  of :not(.details-row)) td { background: var(--surface); }

.data-table tbody tr.details-row td { background: var(--color-details-row-bg); }

.data-table tbody tr:hover td { background: var(--sage-pale) !important; transition: background 0.12s; }

/* ============================================================
   .source-banner — Bandeau source canonique

   Tokens utilisés      : --color-banner-source-bg, --color-banner-source-border, --color-banner-source-text, --font-modal-size, --space-2, --space-3
   Variantes autorisées : .acord-source-banner, .pond-source-banner
                          (sélecteur combiné préservé tel quel)
   Exemple HTML minimal :
     <div class="source-banner acord-source-banner">
       Source : ACORD iTech (PDF) — Fichier : ...
     </div>
   ============================================================ */

/* MC.3.5 — Rendu Acord minimal — pattern bandeau bleu de pièce.
       Point 5 (v2.15) : les mêmes styles servent au tableau pondéré
       MD BAT regroupé par pièce structurelle (.pond-source-banner /
       .pond-piece-block). Le wording du bandeau différencie la
       source ACORD vs MD BAT — pas besoin d'un 3ème style. */
    .acord-source-banner,
    .pond-source-banner {
      background: var(--color-banner-source-bg);
      border-left: 4px solid var(--color-banner-source-border);
      padding: var(--space-2) var(--space-3);
      margin: var(--space-3) 0;
      font-size: var(--font-modal-size);
      color: var(--color-banner-source-text);
    }

/* `.source-banner` — classe générique pour les bandeaux bleus de
       pièce structurelle. Style aligné EXACTEMENT sur les classes
       existantes `.acord-source-banner` et `.pond-source-banner`
       (l. 1101-1109) — zéro changement visuel à l'application. Au
       commit 2, les bandeaux pourront utiliser indifféremment l'une
       de ces 3 classes (sélecteur combiné avec les variantes ACORD /
       MD BAT). */
    .source-banner {
      background: var(--color-banner-source-bg);
      border-left: 4px solid var(--color-banner-source-border);
      padding: var(--space-2) var(--space-3);
      margin: var(--space-3) 0;
      font-size: var(--font-modal-size);
      color: var(--color-banner-source-text);
    }

/* ============================================================
   .cell-rk — Cellule Rk métier critique

   Tokens utilisés      : --font-cell-rk-family, --font-cell-rk-family-mono, --font-cell-rk-size, --gold, --sage
   Préservation métier  : valeurs Rk en doré (--gold), monospace,
                          avec sub-cas ELU en sans-serif petit.
                          Posée par le JS sur les cellules de réaction
                          caractéristique, indépendamment du conteneur
                          parent.
   Variantes autorisées : aucune (composant atomique)
   Sélecteur            : `td.cell-rk.cell-rk` (doublement de classe).
                          Spécificité (0,0,2,1) — bat les règles inline
                          `#pondTableWrap td` (0,1,0,1) qui définissaient
                          `color` sur les cellules MD BAT, sans nécessiter
                          de scope conteneur ni de `!important`.
                          La classe canonique fonctionne ainsi dans
                          TOUT tableau qui pose la classe `.cell-rk`
                          (MD BAT #pondTableWrap, ACORD #acordContent).
                          Astuce CSS standard documentée — utilisée
                          dans les design systems modernes pour résoudre
                          ce type de conflit de cascade.
                          APPUIS LIBRES n'utilise pas `.cell-rk` (vérifié)
                          — emploie `.cell-numeric`, `.cell-felu`.
                          Historique :
                            - 498edf1 : désengagement du scope #pondTableWrap
                            - <ce commit> : doublement de classe pour
                              regagner la spécificité face au CSS inline
   Exemple HTML minimal :
     <td class="cell-rk">
       22.06
       <span class="elu-cas">ELU 34</span>
     </td>
   ============================================================ */

/* Hotfix centrage Rk (30/04/2026) — David option (a) : valeurs Rk
       centrees pour symetrie visuelle avec les en-tetes (eux-memes
       centres). Convention numerique « alignement droite » abandonnee
       car peu pertinente sur APPUIBOIS — chaque ligne est un appui
       distinct, pas une serie de mesures a comparer verticalement. */
    td.cell-rk.cell-rk { text-align: center; color: var(--gold); font-family: var(--font-cell-rk-family-mono); }

td.cell-rk.cell-rk .elu-cas { display: block; font-size: var(--font-cell-rk-size); color: var(--sage); font-family: var(--font-cell-rk-family); }

/* ============================================================
   .materiau-porteur-select — Select matériau porteur

   Tokens utilisés      : (aucun direct)
   Préservation D-quater-bis : font 11px préservée pour serrage
                               colonnes 1920×1080 (§17.bis.2
                               design_system v2.16)
   Variantes autorisées : aucune (divergence intentionnelle vs
                          .appui-select 13px non appliquée à
                          cette classe — D10 cadrage v2)
   Exemple HTML minimal :
     <select class="materiau-porteur-select">
       <option value="C24">C24</option>
       ...
     </select>
   ============================================================ */

.materiau-porteur-select {
      font-size: var(--font-catalogue-size); padding: var(--space-ui-gap) var(--space-1);
      border-radius: 6px; border: 1px solid var(--color-input-border);
      background: var(--surface); color: inherit;
      font-family: var(--font-ui-family);
      cursor: pointer; outline: none; box-sizing: border-box;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

.materiau-porteur-select:focus {
      border-color: var(--sage);
      box-shadow: 0 0 0 2px var(--color-input-fill);
    }

.materiau-porteur-wrap[data-context="md_bat"] .materiau-porteur-select {
      width: var(--width-select-materiau);
    }

/* Wrap ACORD : block-level pour stabiliser le rendu vertical
   du <select> natif en width: 100% (correctif placeholder décalé).
   Évite la circularité parent inline-flex ↔ enfant width: 100%
   responsable du décalage du texte vers le haut dans le select fermé. */
.materiau-porteur-wrap[data-context="acord"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.materiau-porteur-wrap[data-context="acord"] .materiau-porteur-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--height-select-acord);
  line-height: var(--font-select-acord-line-height);
  padding: 0 var(--space-select-acord-arrow) 0 var(--space-select-acord-text);
  box-sizing: border-box;
  font-family: var(--font-ui-family);
  font-size: var(--font-catalogue-size); /* D-quater-bis : 11px préservé */
  vertical-align: middle;
}

/* Chantier D-quater : dropdown porteur APPUIS LIBRES.
       D-quater-bis : libellé RIGIDE simplifié à « Support rigide » →
       min-width 140 → 110px (gain ~30px) pour serrage colonnes sur
       cible 1920×1080. */
    .materiau-porteur-wrap[data-context="appuis_libres"] .materiau-porteur-select {
      min-width: var(--min-width-col-sm);
    }

.materiau-porteur-select.input-error {
      border-color: var(--color-input-error-text) !important;
      box-shadow: 0 0 0 2px var(--color-input-error-fill) !important;
      background: var(--color-input-error-bg) !important;
    }

/* ============================================================
   APPUIS LIBRES — Composant scopé (D10 cadrage v2)

   Tokens de composant locaux (préfixe --al-*).
   Scope strict : #alInlineTable et ses descendants.
   Variantes densité : .density-detaille / .density-compact

   Justification tokens locaux (D-A7.1) :
     - APPUIS LIBRES a un comportement métier spécifique
       (saisie inline, densité variable, calcul direct)
     - Les valeurs ne sont pas réutilisables dans d'autres
       composants
     - D8 du cadrage autorise les tokens locaux par composant
     - D10 explicite : APPUIS LIBRES en chantier séparé,
       tokens locaux conservés

   Variantes autorisées : aucune classe additionnelle
   (la densité est appliquée via .density-* sur #alInlineTable)

   Exemple HTML minimal :
     <table id="alInlineTable" class="density-detaille data-table">
       <thead>...</thead>
       <tbody>...</tbody>
     </table>
   ============================================================ */

#alInlineTable {
      --al-row-height:      64px;
      --al-input-height:    32px;
      --al-secondary-gap:   2px;
      --al-secondary-size:  0.7rem;
      --al-secondary-color: #6b7280;
    }
    #alInlineTable.density-compact  { --al-row-height: 44px; }
    #alInlineTable.density-detaille { --al-row-height: 64px; }

/* ============================================================
   CHANTIER 31 BLOC 1 — Badge source MD BAT/ACORD
   bandeau AFFAIRES (cf cadrage §4.3, design_system §22 sobriété)
   ============================================================ */

.element-source-badge {
  display: inline-block;
  margin-left: var(--space-ui-gap);
  padding: var(--space-ui-gap) var(--space-ui-margin);
  font-size: var(--font-catalogue-size);
  font-weight: var(--font-ui-weight);
  color: var(--color-input-text);
  background-color: var(--color-pond-bg);
  border: 1px solid var(--color-ui-border-light);
  border-radius: var(--space-ui-gap);
  vertical-align: baseline;
  line-height: var(--font-ui-line-height-lg-2);
}

/* Verrou UI : bouton Import grisé conditionnellement (cadrage §5).
   Le verrou backend HTTP 409 reste prioritaire (doctrine D8) — l'UI
   est confort. */
button[data-source-lock]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}


/* ============================================================
   CHANTIER 31 SOUS-BLOC B.α — Bandeau AFFAIRES v2 (.appui)
   - .dirty-marker : pastille discrète signalant état non enregistré
   - .bandeau-sep  : séparateur visuel entre groupes de boutons
   (cf cadrage v2 §4 sous-bloc B, D8 indicateur dirty)
   ============================================================ */

.dirty-marker {
  display: inline-block;
  margin-left: var(--space-ui-gap);
  color: var(--color-warning, #C17B00);
  font-weight: var(--font-card-header-weight);
  vertical-align: middle;
}

.dirty-marker.hidden {
  display: none;
}

.bandeau-sep {
  display: inline-block;
  margin: 0 var(--space-ui-margin);
  color: var(--color-ui-border-light);
  user-select: none;
}

/* Fix B.α — bandeau AFFAIRES cassé avec 7 boutons (4 .appui + 3 métier).
   Symptôme initial : titre AFFAIRES rendu en colonne lettre par lettre
   car le CSS global `.card-header-content { flex: 1; min-width: 0 }`
   permet au content de shrink à 0 quand `.card-header-actions` (flex-
   shrink: 0) prend toute la largeur disponible.
   Fix scopé au card #affairesImportCard : passer en flex-direction
   column pour que le titre/meta occupe sa propre ligne pleine largeur,
   puis les 7 boutons sur une 2e ligne avec wrap interne et alignement
   à droite. Pas d'impact sur les autres bandeaux du projet. */
#affairesImportCard .card-header--collapsible {
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--space-ui-margin);
}

#affairesImportCard .card-header-actions {
  flex-wrap: wrap;
  row-gap: var(--space-ui-gap);
  justify-content: flex-end;
}

/* Affaire/Élément/fichier : empêcher le wrap mid-mot pour la lisibilité,
   mais autoriser un retour ligne propre entre les segments. */
#affaireImportMeta {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ============================================================
   CHANTIER 31 v2 ajustements (test_first_19) — Bouton « Supprimer
   cet import » discret, icône-only ghost, sur les bandeaux
   ACORD (Fd-ELU) et MD BAT (pondéré).
   Style cohérent avec .btn-icon danger-icon existant.
   ============================================================ */

.btn-remove-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: var(--space-ui-gap) var(--space-ui-margin);
  background: transparent;
  border: 1px solid var(--color-ui-border-light);
  color: var(--color-input-text);
  border-radius: var(--space-ui-gap);
  font-size: var(--font-catalogue-size);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-remove-import:hover,
.btn-remove-import:focus-visible {
  color: var(--color-input-error-text);
  border-color: var(--color-input-error-text);
  background: var(--color-input-error-fill);
  outline: none;
}

/* Position : bouton positionné absolument à droite + centré
   verticalement sur le bandeau, sans casser le rendu inline du
   contenu (display flex global casserait l'enchaînement
   « ... — Fichier : <strong>X</strong> — ... »).
   `position: absolute` + bandeau parent `position: relative`
   garantit l'alignement à la même position X entre tous les
   bandeaux Source (peu importe la hauteur multi-ligne du texte
   ou la longueur du nom de fichier). Padding-right du parent
   réservé pour ne pas que le texte coule sous le bouton. */
/* CHANTIER 31 v2 test-first 25 — alignement poubelle bandeau sur
   colonne Action.

   Cible visuelle : centre horizontal du bouton .btn-remove-import
   = centre horizontal de la colonne Action du tableau qui suit
   (largeur --width-col-act, dernière colonne).

   Méthode : `right: calc(var(--width-col-act) / 2)` puis
   `transform: translate(50%, -50%)`. translateX(50%) décale le
   bouton de la moitié de SA largeur vers la droite, ce qui place
   son CENTRE à la position `right` mesurée depuis le bord droit
   du bandeau parent. Si bandeau et tableau partagent la même
   largeur (ce qui est le cas — ils sont dans le même conteneur),
   alors centre bouton = parentRight − col-act/2 = centre colonne
   Action. */
.source-banner {
  position: relative;
  padding-right: var(--width-col-act);
}
.source-banner .btn-remove-import {
  position: absolute;
  top: 50%;
  /* CHANTIER 31 v2 test-first 26 — `--source-banner-btn-right` est
     posé en JS par alignSourceBannerRemoveBtns() pour faire correspondre
     le centre du bouton au centre de la colonne Action effectivement
     rendue (la pondéré MD BAT en table-layout: fixed avec colgroup
     inférieur à 100% redistribue les largeurs ; col-act dépasse 70px).
     Fallback pré-mesure : moitié de --width-col-act. */
  right: var(--source-banner-btn-right, calc(var(--width-col-act) / 2));
  transform: translate(50%, -50%);
  /* CHANTIER 31 v2 test-first 26 — neutraliser margin-right/bottom: 10px
     hérités de la règle globale `button` (index.html l. 322), qui
     décalent visuellement le bouton de 10px à gauche par rapport à la
     position calculée par `right`. */
  margin: 0;
  float: none;
}
/* CHANTIER 31 v2 test-first 26 — empêcher le tremblement au hover.
   La règle globale `button:hover:not(:disabled) { transform: scale(1.02) }`
   (index.html l. 325) écrase notre `translate(50%, -50%)` et provoque un
   saut visuel de ~14px sur l'icône. On préserve explicitement le
   translate à tous les états interactifs ; le retour visuel hover/focus
   est déjà assuré par le changement de couleur (color, border-color,
   background) ci-dessus. */
.source-banner .btn-remove-import:hover,
.source-banner .btn-remove-import:focus,
.source-banner .btn-remove-import:focus-visible,
.source-banner .btn-remove-import:active {
  transform: translate(50%, -50%);
}

/* CHANTIER 31 v2 fix UX 23 — table-layout: fixed sur les 2 tableaux
   MD BAT non pondérés pour que la largeur de la colonne Action soit
   stricte (70px). En auto-layout, max-width sur td est ignoré : la
   table redistribue selon le contenu et l'espace restant.
   Les autres colonnes restent flex (col sans width = part égale du
   reste après les colonnes à largeur fixe). */
#verticalTable,
#horizontalTable,
.mdbat-vertical-table,
.mdbat-horizontal-table {
  table-layout: fixed;
  width: 100%;
}

/* CHANTIER 32 — espacement entre groupes par PDF source dans le
   tableau MD BAT non pondéré (1 section par origin_file). */
.mdbat-source-block + .mdbat-source-block {
  margin-top: var(--space-4);
}

/* CHANTIER 31 v2 fix UX 23 — colonne Action unifiée tous tableaux
   (MD BAT non pondéré / MD BAT pondéré / ACORD Fd-ELU / ACORD
   RÉACTIONS PAR CAS). Largeur fixe via token --width-col-act
   pour éviter le tronquage « Actio » et garantir l'alignement
   horizontal entre tableaux. text-align center pour la corbeille.
   max-width nécessaire car les tableaux #verticalTable et
   #horizontalTable n'ont pas de colgroup ni table-layout fixed
   (auto-layout) → sans max-width, la colonne s'élargit pour
   absorber l'espace restant. */
th.col-act,
td.col-act {
  width: var(--width-col-act);
  min-width: var(--width-col-act);
  max-width: var(--width-col-act);
  text-align: center;
  white-space: nowrap;
}

/* §144.9 (2026-05-18, prompt 47) — Menu déroulant mode connecteur
   X2/X3 harmonisé sur la convention `.materiau-porteur-select` du
   design system (§24.1). Bug constaté David capture 2026-05-18 :
   `.conn-mode-select` initial (§144 commit b2896b0) divergeait
   visuellement de `.materiau-porteur-select` (padding, border,
   tokens), créant une incohérence sur le même tableau d'appuis +
   troncature + flèche manquante.

   Doctrine §144.9 : style strictement aligné sur la convention
   `.materiau-porteur-select` (font-size, padding, border-radius,
   border, background, focus-ring), avec une seule divergence
   contrôlée : `min-width` plus large (200px vs 110px Porteur) car
   les libellés mode connecteur sont longs (« 2 connecteurs
   unitaires (pièces ext.) »). `appearance` laissé natif (browser
   arrow) pour cohérence stricte avec Porteur. */
.conn-mode-select {
  font-size: var(--font-catalogue-size);
  padding: var(--space-ui-gap) var(--space-1);
  border-radius: 6px;
  border: 1px solid var(--color-input-border);
  background: var(--surface);
  color: inherit;
  font-family: var(--font-ui-family);
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-left: var(--space-ui-margin-sm);
  /* §144.9 — min-width anti-troncature (libellés longs §144) */
  min-width: var(--min-width-conn-mode-select);
}
.conn-mode-select:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 2px var(--color-input-fill);
}
.conn-ref-mode-suffix {
  font-size: var(--font-ui-size-sm);
  color: var(--sage-dark);
  margin-left: var(--space-ui-gap);
}

/* §144 — badge mode dans la barre de charges de recherche.html.
   Affiché quand piece_multiplicator >= 2 pour indiquer à l'utilisateur
   si la liste correspond à 1 connecteur composé (effort total) ou
   2 connecteurs unitaires (effort/2 Option A conservatrice). */
.charge-item--mode144 {
  border-left: 3px solid var(--gold);
  padding-left: var(--space-ui-margin-sm);
}
.mode144-badge {
  font-size: var(--font-ui-size-sm);
  color: var(--gold);
  font-weight: var(--font-ui-weight);
}
.mode144-badge--compose {
  color: var(--sage-dark);
  font-weight: var(--font-ui-weight-sm-2);
}