/* ══════════════════════════════════════════════════════════════════════════
   recherche_panneau.css — LE STYLE DE LA RECHERCHE, PORTÉ SOUS UNE RACINE
   Généré au chantier 999 (R7-2) depuis `frontend/recherche.html` L26-L772
   par `scripts/generer_recherche_panneau.py`. NE PAS ÉDITER À LA MAIN
   tant que `recherche.html` existe : la source reste ce fichier-là, et il
   disparaîtra au lot R7-6 (avec ce portage, qui deviendra la seule copie).

   ⛔ POURQUOI CHAQUE RÈGLE EST PORTÉE SOUS `#rechercheHote999`
   Le style d'origine porte 15 sélecteurs GÉNÉRIQUES (`*`, `body`, `button`,
   `button:hover:not(:disabled)`, `input[type=text]`, `select`, `label`…) et
   8 d'entre eux DIVERGENT de la règle de même nom dans `index.html`
   (mesuré : `backend/tests/tmp_diag/p999/css_generiques_diff.txt`) —
   `body`, `button`, `button:hover:not(:disabled)`, `input[type="text"]`,
   `select`, `label`, `.main-content`, `.fiabilite-badge`.
   Importées telles quelles dans la page principale, elles repeindraient
   TOUTE l'application : c'est la régression 844→846 (`AGENT.md` §0.9.1).

   Trois transpositions, et rien d'autre :
     · `body`            → `#rechercheHote999` (la racine joue le rôle du body)
     · `.main-content`   → `.rch-main` (deux `.main-content` dans une page
        rendraient `document.querySelector('.main-content')` ambigu, et
        c'est le nœud des deux verrous d'empreinte `dd75fe36f0c65f8f`)
     · `@keyframes fadeIn` → `rch-fadeIn` (aucune collision aujourd'hui,
        vérifié ; le préfixe garantit qu'il n'y en aura pas)
   Le portage AUGMENTE la spécificité de 0,1,0 : le style du panneau
   l'emporte donc sur les règles génériques d'`index.html` qui atteignent
   son contenu (`table`, `td`, `th`, `p`, `h2`, `h3`… n'ont pas d'équivalent
   côté recherche : celles-là s'appliquent, et c'est un point de recette).
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ NEUTRALISATION DES RÈGLES GÉNÉRIQUES D'`index.html` ═══════════════════
   Voir l'en-tête. Chaque valeur ci-dessous est celle du NAVIGATEUR, donc celle
   que l'élément avait dans la fenêtre `/recherche` — jamais une valeur choisie.
   Mesure de ce qui est imposé : `backend/tests/tmp_diag/p999/css_generiques_diff.txt`.
   ══════════════════════════════════════════════════════════════════════════ */
#rechercheHote999 button { margin-right: 0; margin-bottom: 0; }
#rechercheHote999 button:hover:not(:disabled) { box-shadow: none; }
#rechercheHote999 p { line-height: normal; margin-bottom: 1em; }
#rechercheHote999 h2 {
  color: inherit; font-family: inherit; font-size: 1.5em;
  font-weight: bold; margin: 0.83em 0;
}
#rechercheHote999 h3 {
  color: inherit; font-family: inherit; font-size: 1.17em;
  font-weight: bold; margin-bottom: 1em;
}
#rechercheHote999 table {
  background: transparent; border-collapse: separate; font-size: inherit;
  margin-top: 0; width: auto;
}
#rechercheHote999 th {
  background: transparent; border: none; color: inherit; font-size: inherit;
  font-weight: bold; letter-spacing: normal; padding: 1px;
  text-align: center; text-transform: none;
}
#rechercheHote999 th:first-child { border-left: none; }
#rechercheHote999 td {
  border: none; color: inherit; padding: 1px; text-align: start;
}
/* ⚠ SPÉCIFICITÉ CALIBRÉE, PAS AU MARTEAU. La règle d'`index.html` est
   `tbody tr:not(.details-row) td` (0,1,3) ; la neutraliser avec le même
   sélecteur donnerait (1,1,3), ce qui écraserait AUSSI les règles portées de
   la recherche (`.conn-l1-table td`, (1,1,1)). `#rechercheHote999 td` (1,0,1)
   suffit à battre (0,1,3) — l'identifiant l'emporte — et perd contre toute
   règle portée, ce qui est exactement le partage voulu. */
#rechercheHote999 td { background: transparent; }
/* Le survol : `index.html` porte `tbody tr:hover td { … !important }`. Un
   `!important` ne se bat qu'avec un `!important`, donc celui-ci est obligé.
   ⚠ Mesuré : sans le rattrapage ci-dessous, il éteignait le survol beige
   légitime de la liste des connecteurs (`.conn-l1-row:hover > td`) — défaut vu
   à la comparaison fenêtre/panneau, pas déduit. Le portage ré-affirme donc en
   `!important` les survols que la recherche déclare elle-même : voir
   `porter_css.py`, qui le fait mécaniquement, jamais à la main. */
#rechercheHote999 tbody tr:hover td {
  background: transparent !important; transition: none;
}

#rechercheHote999 *,
#rechercheHote999 *::before,
#rechercheHote999 *::after { box-sizing: border-box; }
/* Étape 1 §11 DESIGN.md (prompt 51, 2026-05-18) :
       Bloc :root inline supprimé — les 25 tokens L0 identitaires
       étaient strictement dupliqués de ceux d'index.html (et
       maintenant promus dans frontend/css/design_tokens.css à
       l'étape 2 §11). recherche.html n'a aucune variable
       dynamique propre — tous les tokens sont chargés via
       <link rel="stylesheet" href="/css/design_tokens.css"> en
       <head> (ordre canonique DESIGN.md §2.3 : fonts → icons →
       tokens → components → inline ).
       --success / --success-pale RETIRÉS (décision §5.3 #4 ; 0
       usage actuel dans frontend). */
#rechercheHote999 {
      font-family: var(--font-family-base);
      background: var(--bg); margin: 0; padding: 0;
      color: var(--text); font-size: 15px;
    }
/* ── Header ── */
#rechercheHote999 .app-header {
      background: var(--noir);
      padding: 14px 0;
      border-top: 3px solid #b8860b;
    }
#rechercheHote999 .app-header-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 24px;
      display: flex; justify-content: space-between; align-items: center;
    }
#rechercheHote999 .app-header h1 {
      font-family: var(--font-family-title);
      color: #fff; margin: 0; font-size: var(--font-size-display-lg); font-weight: 700;
      letter-spacing: 1px; line-height: 1;
    }
#rechercheHote999 .app-header .accent { color: #b8860b; }
#rechercheHote999 .app-header .subtitle { color: var(--sage-light); font-size: 14px; margin: 2px 0 0; }
/* ── Main ── */
#rechercheHote999 .rch-main { max-width: 1200px; margin: 0 auto; padding: 16px 20px 40px; }
/* ── Card charges ── */
#rechercheHote999 .charges-bar {
      display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px;
      background: var(--gold-pale); border: 1px solid var(--gold-bright);
      border-radius: 10px; padding: 12px 18px; margin-bottom: 16px;
    }
#rechercheHote999 .charge-item { font-size: 13px; color: var(--text); white-space: nowrap; }
#rechercheHote999 .charge-label { color: var(--text-mid); }
#rechercheHote999 .charge-item strong { color: var(--gold); font-size: 15px; margin-left: 4px; }
/* ── Fiabilité badge ── */
#rechercheHote999 .fiabilite-badge {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.3px; cursor: help; vertical-align: middle;
    }
#rechercheHote999 .fiabilite-badge--eleve { background: #d1fae5; color: #065f46; }
#rechercheHote999 .fiabilite-badge--moyen { background: #fef3c7; color: #92400e; }
#rechercheHote999 .fiabilite-badge--faible { background: #fed7aa; color: #9a3412; }
/* ── Filtres ── */
#rechercheHote999 .filters-wrap {
      background: var(--surface); border: 1px solid var(--border);
      border-top: 3px solid var(--sage);
      border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
    }
#rechercheHote999 .filters-title {
      font-family: var(--font-family-title);
      font-size: var(--font-card-header-size); font-weight: 700; line-height: var(--font-card-header-line-height); color: var(--text); margin: 0 0 12px;
    }
#rechercheHote999 .filters-collapsed > *:not(.filters-title) { display: none !important; }
#rechercheHote999 .filters-collapsed .filters-chevron { transform: rotate(-90deg); }
/* ── Form elements ── */
#rechercheHote999 label { display: block; margin-bottom: 6px; font-weight: 600; color: #1a1a1a; font-size: 12px; }
#rechercheHote999 input[type="text"],
#rechercheHote999 input[type="number"],
#rechercheHote999 select {
      width: 100%; padding: 7px 10px; box-sizing: border-box; margin-bottom: 0;
      border: 1px solid var(--border); border-radius: 7px;
      font-family: var(--font-family-base); font-size: 13px; color: var(--text);
      background: var(--surface); outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
#rechercheHote999 input[type="text"]:focus,
#rechercheHote999 input[type="number"]:focus,
#rechercheHote999 select:focus {
      border-color: var(--sage);
      box-shadow: 0 0 0 3px rgba(127,165,160,0.18);
    }
/* ── Buttons ── */
#rechercheHote999 button {
      padding: 8px 16px; border: 1px solid var(--sage-dark); border-radius: 8px;
      cursor: pointer; background: var(--noir-mid); color: var(--sage-light);
      font-family: var(--font-family-base); font-size: 13px; font-weight: 500;
      transition: background 0.15s, color 0.15s, transform 0.15s;
    }
#rechercheHote999 button:hover:not(:disabled) { background: var(--sage-dark); color: #fff; transform: scale(1.02); }
#rechercheHote999 button:disabled { opacity: 0.4; cursor: not-allowed; }
#rechercheHote999 .btn-copy { background: transparent; border: 1px solid var(--sage); color: var(--sage-dark); font-size: 13px; padding: 3px 8px; border-radius: 6px; }
#rechercheHote999 .btn-copy:hover:not(:disabled) { background: var(--sage-pale); border-color: var(--sage-dark); color: var(--sage-dark); transform: none; }
#rechercheHote999 .btn-select { background: var(--vert); border: 1px solid var(--vert); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 6px; font-weight: 600; }
#rechercheHote999 .btn-select:hover:not(:disabled) { background: var(--vert-light); border-color: var(--vert-light); transform: none; }
#rechercheHote999 .btn-select-hors-verif { background: var(--warning); border: 1px solid var(--warning); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 6px; font-weight: 600; cursor: pointer; }
#rechercheHote999 .btn-select-hors-verif:hover { background: #a86900; border-color: #a86900; transform: none; }
/* ── Filter row ── */
#rechercheHote999 .modal-filter-row {
      display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
    }
#rechercheHote999 .modal-filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
#rechercheHote999 .modal-filter-field.fam-field { min-width: 150px; flex: 1.5; }
#rechercheHote999 .modal-filter-actions { display: flex; align-items: flex-end; gap: 8px; }
/* ── EC5 bar ── */
#rechercheHote999 .modal-ec5-bar {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      background: var(--sage-pale); border-left: 3px solid var(--sage); border-radius: 8px;
      padding: 8px 12px; margin-bottom: 10px;
    }
#rechercheHote999 .modal-ec5-label {
      font-size: 11px; font-weight: 700; color: var(--sage-dark);
      text-transform: uppercase; letter-spacing: 0.5px;
      align-self: center; white-space: nowrap;
    }
#rechercheHote999 .modal-ec5-bar .modal-filter-field label { font-size: 11px; color: var(--text-mid); }
#rechercheHote999 .modal-ec5-bar .modal-filter-field select {
      font-size: 12px; padding: 5px 8px;
      background: var(--surface); border: 1.5px solid var(--border);
      color: var(--text); border-radius: 6px;
    }
#rechercheHote999 .modal-ec5-bar .modal-filter-field input[type="number"],
#rechercheHote999 .modal-fam-bar .modal-filter-field input[type="number"] {
      font-size: 12px; padding: 5px 8px;
      background: var(--surface); border: 1.5px solid var(--border);
      color: var(--text); border-radius: 6px;
    }
/* ── Contraintes dimensionnelles (accordéon) ── */
#rechercheHote999 .dim-contraintes-block { margin: 8px 0; }
#rechercheHote999 .dim-contraintes-title { font-size: 12px; font-weight: 700; color: var(--text-mid, #555); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 4px; }
#rechercheHote999 .dim-line { font-size: 13px; line-height: 1.5; margin: 2px 0; }
#rechercheHote999 .dim-label { color: var(--text-mid, #555); margin-right: 6px; }
#rechercheHote999 .dim-value { color: var(--text, #1A1A1A); font-weight: 600; }
/* ── Famille-specific bar ── */
#rechercheHote999 .modal-fam-bar {
      display: none;
      background: #f0f4f8; border: 1px solid #b8d0e8; border-radius: 8px;
      padding: 8px 12px; margin-bottom: 8px;
      gap: 12px; align-items: center; flex-wrap: wrap;
    }
#rechercheHote999 .modal-fam-bar.visible { display: flex; }
#rechercheHote999 .modal-fam-bar-label {
      font-size: 11px; font-weight: 700; color: #2d5a8b;
      text-transform: uppercase; letter-spacing: 0.5px;
      align-self: center; white-space: nowrap;
    }
#rechercheHote999 .modal-broche-info {
      font-size: 11px; color: var(--gold); background: var(--gold-pale);
      border: 1px solid var(--gold-bright); border-radius: 5px;
      padding: 4px 8px; align-self: center; line-height: 1.5;
    }
#rechercheHote999 .modal-sabot-porteur-info {
      font-size: 11px;
      color: var(--color-modal-fam-bar-text,#2D5A8B);
      background: var(--color-modal-fam-bar-bg,#F0F4F8);
      border-left: 3px solid var(--color-modal-fam-bar-border,#B8D0E8);
      border-radius: 4px;
      padding: 5px 9px;
      align-self: center;
      line-height: 1.45;
    }
/* ── Alignement icônes-labels (priorité sur icons-style.css externe) ── */
#rechercheHote999 .modal-ec5-bar,
#rechercheHote999 .modal-fam-bar.visible {
      display: flex !important;
      align-items: center !important;
    }
/* ── Warning msg ──
       1078C : la règle d'ID est RETIRÉE. Elle n'a jamais servi (l'élément
       n'existait pas dans le markup) et, l'élément posé, sa spécificité d'ID
       aurait écrasé `.control-failure-message` — le composant canonique. */
/* ── Résultats ── */
#rechercheHote999 .results-wrap {
      background: var(--surface); border: 1px solid var(--border);
      border-top: 3px solid var(--gold);
      border-radius: 10px; padding: 16px 18px;
      min-height: 80px;
    }
#rechercheHote999 .results-title {
      font-family: var(--font-family-title);
      font-size: var(--font-card-header-size); font-weight: 700; line-height: var(--font-card-header-line-height); color: var(--text); margin: 0 0 12px;
      display: flex; align-items: center; gap: 10px;
    }
#rechercheHote999 .results-collapsed > *:not(.results-title) { display: none !important; }
#rechercheHote999 .modal-no-results {
      color: var(--text-mid); font-style: italic; text-align: center; padding: 20px 0;
    }
/* ── Level-1 table ── */
#rechercheHote999 .conn-l1-table {
      width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px;
    }
#rechercheHote999 .conn-l1-table col.conn-col-ref { width: 16%; }
#rechercheHote999 .conn-l1-table col.conn-col-matiere { width: 10%; }
#rechercheHote999 .conn-l1-table col.conn-col-r1 { width: 10%; }
#rechercheHote999 .conn-l1-table col.conn-col-f1 { width: 8%; }
#rechercheHote999 .conn-l1-table col.conn-col-taux { width: 10%; }
#rechercheHote999 .conn-l1-table col.conn-col-ec5 { width: 10%; }
#rechercheHote999 .conn-l1-table col.conn-col-statut { width: 14%; }
#rechercheHote999 .conn-l1-table col.conn-col-details { width: 6%; }
#rechercheHote999 .conn-l1-table col.conn-col-actions { width: 16%; }
#rechercheHote999 .conn-l1-table th {
      position: sticky; top: 0; z-index: 1;
      background: var(--noir); color: #fff; font-weight: 700;
      padding: 6px 8px; text-align: left; border-bottom: 2px solid var(--gold);
      white-space: normal; overflow-wrap: anywhere;
    }
/* 1073 — l'en-tête reste collant pour parcourir la liste. Tant qu'une
       fiche détail est ouverte, le sticky est levé : l'en-tête ne peint
       plus par-dessus. À la fermeture, il redevient collant. */
#rechercheHote999 .conn-l1-table:has(.conn-detail-tr.open) th {
      position: static;
    }
#rechercheHote999 .conn-l1-table td {
      min-width: 0; padding: 5px 8px; border-bottom: 1px solid var(--border-light);
      vertical-align: middle; overflow-wrap: anywhere;
    }
#rechercheHote999 .conn-l1-table .conn-actions-cell { white-space: normal; }
#rechercheHote999 .conn-l1-table .conn-actions-cell button {
      max-width: 100%; white-space: normal; overflow-wrap: anywhere;
    }
#rechercheHote999 .conn-l1-row { cursor: pointer; transition: background 0.12s; }
#rechercheHote999 .conn-l1-row:hover > td { background: var(--gold-pale) !important; }
#rechercheHote999 .conn-l1-row.l1-ok td:first-child { border-left: 3px solid var(--vert); }
#rechercheHote999 .conn-l1-row.l1-lim td:first-child { border-left: 3px solid var(--warning); }
#rechercheHote999 .conn-l1-row.l1-dep td:first-child { border-left: 3px solid var(--danger); }
/* Mini-chantier 42 — NON COMPATIBLE (5e statut, doctrine §5.3 prime). */
#rechercheHote999 .conn-l1-row.l1-nc td:first-child { border-left: 3px solid #b91c1c; }
#rechercheHote999 .conn-l1-row.l1-nc > td { background: rgba(185, 28, 28, 0.04); }
#rechercheHote999 .conn-l1-row.l1-active > td { background: var(--gold-pale) !important; }
#rechercheHote999 .btn-detail {
      background: none; border: 1px solid var(--gold-bright); border-radius: 4px;
      padding: 2px 7px; cursor: pointer; font-size: 12px; margin: 0;
      color: var(--gold); line-height: 1; display: inline-block;
      transition: transform 0.25s ease;
    }
#rechercheHote999 .btn-detail.open { transform: rotate(90deg); }
/* ── Level-2 accordion ── */
#rechercheHote999 .conn-detail-tr { display: none; }
#rechercheHote999 .conn-detail-tr.open { display: table-row; }
#rechercheHote999 .conn-detail-td { padding: 0 !important; border-bottom: 2px solid var(--gold) !important; }
#rechercheHote999 .conn-detail-inner {
      background: var(--gold-pale); border-left: 4px solid var(--gold);
      overflow: hidden; max-height: 0;
      transition: max-height 0.3s ease;
      font-size: 12px;
    }
/* C3-quinquies : max-height 600px clippait les accordéons ouverts
       (note quadratique, traçabilité ACORD, etc.). Valeur large pour
       autoriser tout contenu tout en préservant la transition d'expand
       (none casserait la transition de fermeture, non-animable). overflow
       repassé à visible pour que l'extension dynamique des <details>
       enfants ne soit pas re-clippée si elle dépasse le seuil. */
#rechercheHote999 .conn-detail-inner.open {
      max-height: 9999px;
      overflow: visible;
    }
#rechercheHote999 .conn-detail-pad { padding: 14px 18px; }
#rechercheHote999 .conn-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

    @media (max-width: 640px) {#rechercheHote999 .conn-detail-cols { grid-template-columns: 1fr; }}
#rechercheHote999 .detail-col-title {
      font-weight: 700; font-size: 11px; color: var(--gold);
      text-transform: uppercase; letter-spacing: 0.5px;
      border-bottom: 1px solid var(--gold-bright); padding-bottom: 4px; margin-bottom: 8px;
    }
#rechercheHote999 .detail-line { margin-bottom: 3px; color: var(--text-mid); line-height: 1.5; }
#rechercheHote999 .detail-line strong { color: var(--text); }
/* §134.11.11 — Ligne explicative effet de durée par connecteur */
#rechercheHote999 .detail-duree-line { margin-top: 6px; font-style: italic; opacity: 0.85; }
#rechercheHote999 .detail-ok { color: var(--vert); }
#rechercheHote999 .detail-warn { color: var(--warning); }
#rechercheHote999 .detail-err { color: var(--danger); }
#rechercheHote999 .detail-elu { color: var(--sage); font-style: italic; }
/* Mini broche table */
#rechercheHote999 .broche-mini { border-collapse: collapse; font-size: 11px; margin: 5px 0; }
#rechercheHote999 .broche-mini th { background: var(--color-broche-mini-th-bg); padding: 3px 7px; border: 1px solid var(--color-broche-mini-th-border); font-weight: 600; }
#rechercheHote999 .broche-mini td { padding: 3px 7px; border: 1px solid var(--color-broche-mini-td-border); text-align: center; }
#rechercheHote999 .broche-mini .b-active { background: var(--gold); color: #fff; font-weight: 700; }
/* ── Taux / statut ── */
#rechercheHote999 .taux-ok { color: var(--vert);    font-weight: 700; }
#rechercheHote999 .taux-limite { color: var(--warning); font-weight: 700; }
#rechercheHote999 .taux-depasse { color: var(--danger);  font-weight: 700; }
#rechercheHote999 .statut-ok { color: var(--vert);    font-size: 12px; white-space: nowrap; }
#rechercheHote999 .statut-lim { color: var(--warning); font-size: 12px; white-space: nowrap; }
#rechercheHote999 .statut-dep { color: var(--danger);  font-size: 12px; white-space: nowrap; }
#rechercheHote999 .statut-nv { color: #6b7280; font-size: 12px; white-space: nowrap; font-style: italic; }
#rechercheHote999 .taux-nv { color: #9ca3af; font-style: italic; }
/* Prompt 670 (D4b) — VÉRIFIÉ SOUS RÉSERVE (poussée reprise par contact d'appui). Ambre
       distinct, jamais un vert ; sélectionnable (comme un hors-vérif motivé). Cf DESIGN.md. */
#rechercheHote999 .statut-reserve { color: #b45309; background: #fff7ed; padding: 2px 6px; border-radius: 4px;
                      font-size: 11px; white-space: normal; font-weight: 700; cursor: help;
                      border: 1px solid #b45309; }
#rechercheHote999 tr.l1-reserve { background: rgba(180, 83, 9, 0.05); }
/* Mini-chantier 42 — NON COMPATIBLE (5e statut, doctrine §5.3). */
#rechercheHote999 .statut-nc { color: #b91c1c; background: #fef2f2; padding: 2px 6px; border-radius: 4px;
                   font-size: 11px; white-space: nowrap; font-weight: 700; cursor: help; }
#rechercheHote999 .taux-nc { color: #b91c1c; font-style: italic; opacity: 0.85; }
#rechercheHote999 .taux-nc::after { content: " (indicatif)"; font-size: 9px; color: #92400e; }
/* Prompt 177 : bloc hors domaine supprimé */
#rechercheHote999 .conn-l1-table .statut-ok,
#rechercheHote999 .conn-l1-table .statut-lim,
#rechercheHote999 .conn-l1-table .statut-dep,
#rechercheHote999 .conn-l1-table .statut-nv { white-space: normal; }
#rechercheHote999 .acord-info-banner {
      background: var(--color-banner-info-bg);
      border-left: 4px solid var(--color-banner-info-border);
      padding: var(--space-1) var(--space-3);
      margin: var(--space-1) 0;
      font-size: var(--font-modal-size);
      color: var(--color-info-banner-text);
      border-radius: var(--radius-md);
    }
/* ── Copy toast ── */
#rechercheHote999 #copyToast {
      position: fixed; bottom: 24px; right: 24px;
      background: var(--noir); color: var(--sage-light);
      padding: 10px 18px; border-radius: 8px; font-size: 13px;
      box-shadow: var(--shadow-toast);
      opacity: 0; transition: opacity 0.25s; pointer-events: none;
      z-index: 999;
    }
#rechercheHote999 #copyToast.show { opacity: 1; }
/* ── Grille connecteurs ── */
#rechercheHote999 .connector-grid {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 10px; justify-content: flex-start;
    }
/* Chantier 94 — scroll vertical de secours ; hauteur relevée (2026-06-18)
       pour afficher toutes les familles sans scroller sur un écran standard. */
#rechercheHote999 #connectorGrid {
      max-height: 600px;
      overflow-y: auto;
    }
#rechercheHote999 .connector-card {
      display: flex; flex-direction: column; align-items: center;
      cursor: pointer; padding: 6px;
      border: 2px solid transparent; border-radius: 6px;
      transition: border-color 0.2s, background 0.2s;
      width: 80px;
      background: #fafafa;
    }
#rechercheHote999 .connector-card:hover { background: #f5f0e8; border-color: #d4a94c; }
#rechercheHote999 .connector-card.active {
      border-color: var(--color-connector-card-active-border); background: #f5f0e8;
      box-shadow: 0 0 0 1px var(--color-connector-card-active-border);
    }
#rechercheHote999 .connector-card img {
      width: var(--height-connector-img); height: var(--height-connector-img); object-fit: contain; border-radius: 4px;
    }
#rechercheHote999 .connector-media-placeholder {
      width: var(--height-connector-img); height: var(--height-connector-img);
      display: flex; align-items: center; justify-content: center;
      box-sizing: border-box; padding: 4px; border: 1px dashed #a9a39a; border-radius: 4px;
      color: #6f6a63; background: #f1efeb; font-size: 9px; font-weight: 600;
      line-height: 1.15; text-align: center;
    }
#rechercheHote999 .connector-media-placeholder.connector-media-placeholder--bar {
      width: 48px; height: 48px; flex: 0 0 48px; margin-right: 8px;
    }
#rechercheHote999 .connector-label {
      font-size: 11px; font-weight: 700; color: var(--color-connector-label-text);
      margin-top: 4px; text-align: center; line-height: 1.2;
    }
#rechercheHote999 .connector-card.cs-excluded { opacity: 0.4; }
#rechercheHote999 .connector-card.cs-excluded .connector-label::after { content: " ⚠"; color: var(--color-connector-cs-excluded-text); }
/* ── Mini-80bis : compatibilité section bois pied de poteau ── */
/* La décision vient EXCLUSIVEMENT du backend (bloc
       `section_compatibilite` livré mini-80). Frontend = consommateur
       pur, aucune évaluation locale. */
#rechercheHote999 .conn-l1-row.card-non-compatible-section {
      opacity: 0.55;
      filter: grayscale(0.4);
    }
#rechercheHote999 .conn-l1-row.card-non-compatible-section .btn-select:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
#rechercheHote999 .conn-l1-row.card-vigilance-section {
      box-shadow: inset 3px 0 0 0 #e67e22;
    }
/* Badges section (carrousel résultats) */
#rechercheHote999 .badge-section-statut {
      display: inline-block;
      padding: 1px 5px;
      font-size: 0.65em;
      font-weight: 700;
      border-radius: 3px;
      letter-spacing: 0.3px;
      vertical-align: middle;
      margin-left: 4px;
      cursor: help;
    }
#rechercheHote999 .badge-section-statut.badge-non-compatible {
      background: #c0392b;
      color: #fff;
    }
#rechercheHote999 .badge-section-statut.badge-vigilance {
      background: #e67e22;
      color: #fff;
    }
/* ── Badges pertinence hauteur (prompt 143) ── */
#rechercheHote999 .badge-pertinence {
      display: inline-block;
      padding: 1px 5px;
      font-size: 0.65em;
      font-weight: 700;
      border-radius: 3px;
      letter-spacing: 0.3px;
      vertical-align: middle;
      margin-left: 4px;
      cursor: help;
    }
#rechercheHote999 .badge-pertinence.badge-recommande {
      background: var(--vert, #2E7D5A);
      color: #fff;
    }
#rechercheHote999 .badge-pertinence.badge-limite-haute {
      background: var(--warning, #C17B00);
      color: #fff;
    }
/* ── Drilldown 2 niveaux ── */
#rechercheHote999 .search-drilldown { width: 100%; }
#rechercheHote999 .drilldown-level { display: none; }
#rechercheHote999 .drilldown-level.active {
      display: block;
      animation: rch-fadeIn 0.2s ease-out;
    }

    @keyframes rch-fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
#rechercheHote999 .drilldown-title {
      font-size: 11px; font-weight: 700; color: var(--text-mid);
      margin: 0 0 12px; letter-spacing: 0.06em; text-transform: uppercase;
    }
/* ── Grille fournisseurs (niveau 1) ── */
#rechercheHote999 .fournisseur-grid {
      display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 0 8px;
    }
#rechercheHote999 .fournisseur-icon {
      min-width: 150px; min-height: 90px;
      background: #fff; border: 2px solid var(--color-fournisseur-icon-border); border-radius: 10px;
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; padding: 14px 20px;
      cursor: pointer;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    }
#rechercheHote999 .fournisseur-icon:hover:not(.disabled-family) {
      border-color: var(--sage); transform: translateY(-2px);
      box-shadow: 0 4px 12px var(--color-fournisseur-icon-hover-bg);
    }
#rechercheHote999 .fournisseur-icon img {
      max-width: var(--max-width-fournisseur-icon); max-height: 56px; object-fit: contain; margin-bottom: 8px;
    }
#rechercheHote999 .fournisseur-icon .icon-label {
      font-size: 12px; font-weight: 600; color: var(--text-mid); text-align: center;
    }
/* ── Fil d'ariane ── */
#rechercheHote999 .breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; margin-bottom: 12px; color: var(--text-mid);
    }
#rechercheHote999 .breadcrumb-link {
      color: var(--sage-dark); text-decoration: none;
      padding: 3px 8px; border-radius: 4px;
      transition: background 0.15s; cursor: pointer;
    }
#rechercheHote999 .breadcrumb-link:hover { background: var(--sage-pale); text-decoration: underline; }
#rechercheHote999 .breadcrumb-separator { color: var(--color-breadcrumb-separator-text); font-size: 15px; }
#rechercheHote999 .breadcrumb-current { color: var(--text); font-weight: 600; }
/* ── Badge « à venir » fournisseurs (prompt 168) ── */
#rechercheHote999 .badge-a-venir {
      display: block; font-size: 10px; color: #999; font-style: italic; margin-top: 2px;
    }
#rechercheHote999 .fournisseur-icon.disabled-family .badge-a-venir { color: #bbb; }
/* ── Icônes familles désactivées (aucun connecteur compatible) ── */
#rechercheHote999 .connector-card.disabled-family {
      opacity: 0.35;
      filter: grayscale(1);
      cursor: not-allowed;
      /* pointer-events reste auto pour permettre hover + tooltip natif */
    }
/* Prompt 288 — drill-down : masquer les cartes hors de la famille focalisée
       (le clic badge « Étrier » ne montre que les sous-familles étrier). Compose
       avec .cs-excluded / .disabled-family (classes distinctes). */
#rechercheHote999 .connector-card.grid-fam-hidden { display: none; }
/* Sprint 245 — famille dont le pack n'est pas activé sur la licence
       (pré-grisage via /me). NO-OP si AUTH off (aucune classe ajoutée). */
#rechercheHote999 .connector-card.pack-locked {
      opacity: 0.4;
      filter: grayscale(1);
      cursor: not-allowed;
      pointer-events: none;
    }
/* Prompt 906 — état provisoire distinct d'un vrai pack absent : le contrôle
       de licence n'a pas répondu, donc aucune nouvelle sélection n'est permise. */
#rechercheHote999 .connector-card.pack-check-failed {
      opacity: 0.4;
      filter: grayscale(1);
      cursor: not-allowed;
      pointer-events: none;
    }
#rechercheHote999 .control-failure-message {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
      background: var(--gold-pale); border-left: 3px solid var(--warning);
      color: var(--text); font-size: 13px; line-height: 1.4;
    }
#rechercheHote999 .control-failure-message[hidden] { display: none; }
#rechercheHote999 .control-failure-message button { flex: 0 0 auto; padding: 5px 10px; }
/* MC.3.7 — Accordéon traçabilité Acord */
#rechercheHote999 .acord-traceability {
      margin-top: 16px;
      padding: 8px 12px;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      font-size: 0.9rem;
    }
#rechercheHote999 .acord-traceability summary {
      cursor: pointer;
      font-weight: 600;
      padding: 4px 0;
    }
#rechercheHote999 .acord-trace-body {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #e5e7eb;
    }
#rechercheHote999 .acord-trace-section {
      margin-bottom: 10px;
      padding: 6px 8px;
      background: #fff;
      border-left: 3px solid #0ea5e9;
      border-radius: 2px;
    }
#rechercheHote999 .acord-trace-section strong {
      color: #0369a1;
    }
/* B-Phase 2 — Bandeau + badge matériau porteur non reconnu */
#rechercheHote999 .warning-materiau-non-reconnu {
      background: #FFF3CD;
      border: 1px solid #E67E22;
      border-left: 5px solid #E67E22;
      border-radius: 6px;
      padding: 10px 14px;
      margin: 0 0 14px 0;
      color: #78350F;
      font-size: 13px;
      line-height: 1.4;
    }
#rechercheHote999 .warning-materiau-non-reconnu strong {
      color: #78350F;
      font-size: 14px;
    }
#rechercheHote999 .warning-materiau-non-reconnu p {
      margin: 4px 0 0 0;
    }
#rechercheHote999 .warning-materiau-non-reconnu .materiau-label {
      font-family: var(--font-family-base);
      font-weight: 700;
      color: #78350F;
    }
#rechercheHote999 .badge-a-confirmer {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 7px;
      border-radius: 10px;
      background: #FFF3CD;
      border: 1px solid #E67E22;
      color: #78350F;
      font-size: var(--font-size-badge-a-confirmer);
      font-weight: 600;
      letter-spacing: 0.2px;
      cursor: help;
      vertical-align: middle;
      white-space: nowrap;
    }
/* C2 — Bandeau "Valeurs ajustées" + suffixes Rk catalogue/formule */
/* C3-bis : bandeau compact (badge inline, padding réduit)
       C3-quater : sorti de .conn-detail-cols, donc dans le flux block.
       inline-flex + width contenu garantit qu'il reste compact même
       en pleine largeur. Les contraintes grid de C3-ter ne sont plus
       nécessaires (et inactives hors grid). */
#rechercheHote999 .rk-adjusted-banner {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      padding: 0.15em 0.55em;
      margin: 0 0 0.5em 0;
      font-size: 0.85em;
      background: #fff8e1;
      border-left: 2px solid #f0c040;
      border-radius: 3px;
      color: #6b4f00;
      line-height: 1.3;
      font-style: italic;
    }
#rechercheHote999 .rk-adjusted-icon { font-size: 0.95em; line-height: 1; }
#rechercheHote999 .rk-adjusted-text { font-style: italic; }
#rechercheHote999 .rk-suffix {
      font-style: italic;
      color: #6b6b6b;
      font-size: 0.95em;
    }
/* ─── C3 — Accordéon "Détail du calcul" ─── */
#rechercheHote999 .transparence-detail {
      margin-top: 0.75em;
      padding: 0.75em 1em;
      background: var(--color-transparence-bg);
      border: 1px solid var(--color-transparence-border);
      border-radius: 6px;
    }
#rechercheHote999 .transparence-detail > summary {
      cursor: pointer;
      font-weight: 600;
      color: var(--color-transparence-text-strong);
      padding: 0.25em 0;
      list-style: none;
    }
#rechercheHote999 .transparence-detail > summary::-webkit-details-marker { display: none; }
#rechercheHote999 .transparence-detail > summary::before {
      content: '\25B6';
      display: inline-block;
      margin-right: 0.5em;
      font-size: var(--font-size-transparence-marker);
      transition: transform 0.2s;
    }
#rechercheHote999 .transparence-detail[open] > summary::before {
      transform: rotate(90deg);
    }
#rechercheHote999 .transparence-section {
      margin-top: 0.75em;
    }
#rechercheHote999 .transparence-section h4 {
      font-size: 0.95em;
      font-weight: 600;
      margin: 0 0 0.4em 0;
      color: var(--color-transparence-text-strong);
    }
#rechercheHote999 .transparence-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--font-size-em-small);
    }
#rechercheHote999 .transparence-table th,
#rechercheHote999 .transparence-table td {
      padding: 0.4em 0.6em;
      border-bottom: 1px solid var(--color-transparence-border);
      text-align: left;
      vertical-align: top;
    }
#rechercheHote999 .transparence-table th {
      font-weight: 600;
      background: var(--color-transparence-th-bg);
    }
#rechercheHote999 .transparence-coefs,
#rechercheHote999 .transparence-formules,
#rechercheHote999 .transparence-formules-combinees {
      list-style: none;
      padding-left: 0.5em;
      margin: 0;
      font-family: var(--font-family-mono);
      font-size: var(--font-size-em-small);
    }
#rechercheHote999 .transparence-coefs li,
#rechercheHote999 .transparence-formules li,
#rechercheHote999 .transparence-formules-combinees li {
      padding: 0.2em 0;
    }
#rechercheHote999 .transparence-formules-combinees li.formule-retenue {
      background: #fff8e1;
      border-left: 3px solid #f0c040;
      padding: 0.4em 0.6em;
      border-radius: 4px;
      margin: 0.2em 0;
    }
#rechercheHote999 .badge-retenu {
      display: inline-block;
      margin-left: 0.5em;
      padding: 0.1em 0.5em;
      background: var(--vert);
      color: #fff;
      border-radius: 10px;
      font-size: 0.75em;
      font-weight: 600;
      font-family: var(--font-family-base);
    }
#rechercheHote999 .note-quadratique {
      font-size: 0.85em;
      color: #6b6b6b;
      font-style: italic;
      margin-top: 0.5em;
    }
#rechercheHote999 .transparence-remarque p {
      font-size: var(--font-size-em-small);
      color: #6b6b6b;
      font-style: italic;
      margin: 0;
    }
/* Chantier D — Badge ancrage (support rigide / pied de poteau).
       Palette warning warm/sand cohérente avec design_system §24
       et bandeau "Valeurs ajustées" (chantier C). */
#rechercheHote999 .badge-ancrage {
      display: inline-block;
      margin: 8px 0 12px;
      padding: 8px 12px;
      background: #FFF3CD;
      border-left: 4px solid #E67E22;
      color: #78350F;
      font-size: 13px;
      border-radius: 4px;
      line-height: 1.4;
    }
#rechercheHote999 .badge-ancrage strong { color: #B45309; }
/* Garde-fou §59.2 — signal visuel non bloquant si une valeur d'URL
       ne match aucune option du select (cf. _setSelectCaseInsensitive).
       Palette warning warm/sand alignée design_system §24. */
#rechercheHote999 .materiau-non-reconnu {
      border-color: #E67E22 !important;
      background-color: #FFF3CD !important;
    }