/* ============================================================================
   desktop-interactions.css — STYLES DU LOT S2 (clavier · omnibox · survol carte)
   ----------------------------------------------------------------------------
   2026-08-27 · cahier des charges PC pro, lot B (« ADN souris/clavier »).
   Doctrine : pc_design_system.md §2 G4 (modale compacte 480-560), §3.1 (typo PC),
   §3.4 (survol/clavier/focus : capsule kbd au patron .actu-kbd, focus visible
   outline 2px + offset 2px, scrollbars fines 8px), §5.1 (TOUT gate html.op-desktop
   -> le mobile ne peut pas etre atteint par ce fichier), §5.3 (couleurs
   canoniques uniquement), §5.5 (transitions <= 200 ms, aucune animation en boucle).

   REGLE DE PROPRIETE : ce fichier ne style QUE des classes posees par les 3
   modules du lot (`opd-omni*`, `opd-kbd`, `opd-k-cur`, `opd-k-host`, `opd-hl-cur`,
   `opd-hl-host`). Il n'y a AUCUN selecteur d'un module tiers : quand une ligne de
   « Rechercher » se colore, c'est parce que NOUS lui avons pose `opd-k-cur` /
   `opd-hl-cur`, jamais parce qu'on redefinit `.oprch-row`. Rollback = retirer le
   <link> : les modules continuent de fonctionner, sans decor.

   Couleurs : encre canonique (--op-ink #0f172a) pour tout ce lot. Le survol et la
   navigation clavier N'ENGAGENT RIEN : ils ne portent donc aucune couleur de
   mission (rose annonces, orange a revoir, or mandat...), qui resterait a leur
   proprietaire.
   ============================================================================ */

/* ===========================================================================
   1. CAPSULE CLAVIER — patron `.actu-kbd` (actualite.ui.js) repris a l'identique
   en geometrie : 18 px de haut, radius 5, fond translucide. Difference assumee :
   ici le fond est clair (nos composants sont sur surface blanche, la capsule de
   la veille vit sur un bouton colore).
   =========================================================================== */
html.op-desktop .opd-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: #f1f5f9;
  border: 1px solid var(--op-line, #e2e8f0);
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}
html.op-desktop .opd-kbd svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* ===========================================================================
   2. LIGNE COURANTE — clavier (`opd-k-cur`) et survol (`opd-hl-cur`)
   §3.2 : « ligne selectionnee = fond accent 8 % + lisere 3 px a gauche ».
   Le lisere est rendu par `box-shadow: inset` et non par une bordure : aucune
   largeur n'est ajoutee a la ligne -> le gabarit du module proprietaire ne bouge
   pas d'un pixel (pas de reflow, pas de saut au premier survol).
   =========================================================================== */
html.op-desktop .opd-hl-cur {
  background: rgba(15, 23, 42, 0.045);
}
html.op-desktop .opd-k-cur {
  background: rgba(15, 23, 42, 0.08);
  box-shadow: inset 3px 0 0 0 var(--op-ink, #0f172a);
}
/* le clavier prime sur le survol quand les deux coexistent */
html.op-desktop .opd-k-cur.opd-hl-cur {
  background: rgba(15, 23, 42, 0.08);
}

/* ===========================================================================
   3. CONTENEURS DE LISTE CABLES
   `overscroll-behavior: contain` (standard du marche, cahier des charges §1.4) :
   la molette qui atteint le bas d'une liste ne doit plus faire defiler/zoomer ce
   qu'il y a derriere (typiquement la carte). Classes posees par nos modules
   (desktop-keys : `opd-k-host` · hoverlink : `opd-hl-host`).
   =========================================================================== */
html.op-desktop .opd-k-host,
html.op-desktop .opd-hl-host {
  overscroll-behavior: contain;
}

/* ===========================================================================
   4. OMNIBOX — gabarit G4 « modale compacte » (§2)
   =========================================================================== */
html.op-desktop .opd-omni {
  position: fixed;
  inset: 0;
  /* au-dessus de tous les panneaux metier connus (le plus haut recense est
     #opm-list a 99000) et SOUS le tour guide (2147483000+), qui doit rester
     maitre de l'ecran quand il tourne. */
  z-index: 100460;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html.op-desktop .opd-omni[hidden] {
  display: none;
}
html.op-desktop .opd-omni-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55); /* scrim canonique G4 */
}
html.op-desktop .opd-omni-box {
  position: relative;
  margin-top: 12vh;
  width: 560px;                        /* G4 : 480-560 px */
  max-width: calc(100vw - 48px);
  background: var(--op-surface, #fff);
  border: 1px solid var(--op-line, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;                       /* colonne flex : sans ca, la liste ne
                                          defile pas (piege connu du projet) */
}

/* --- en-tete : une seule ligne, hauteur <= --opd-head-h (56) --- */
html.op-desktop .opd-omni-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  flex: 0 0 auto;
  padding: 0 14px;
  border-bottom: 1px solid var(--op-line, #e2e8f0);
}
html.op-desktop .opd-omni-headic {
  flex: 0 0 auto;
  display: inline-flex;
  color: #64748b;
}
html.op-desktop .opd-omni-headic svg {
  width: 18px;
  height: 18px;
}
html.op-desktop .opd-omni-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--op-ink, #0f172a);
  letter-spacing: -0.2px;
}
html.op-desktop .opd-omni-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

/* --- liste dense (§3.2 : ligne 40 px, 13 px/600, secondaire 11.5 px/500) --- */
html.op-desktop .opd-omni-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 44vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 6px;
}
html.op-desktop .opd-omni-list::-webkit-scrollbar {
  width: 8px;
}
html.op-desktop .opd-omni-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}
html.op-desktop .opd-omni-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--op-ink, #0f172a);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 130ms ease;
}
html.op-desktop .opd-omni-row:hover {
  background: rgba(15, 23, 42, 0.05);
}
html.op-desktop .opd-omni-ic {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.06);
  color: var(--op-ink, #0f172a);
}
html.op-desktop .opd-omni-ic svg {
  width: 16px;
  height: 16px;
}
html.op-desktop .opd-omni-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
html.op-desktop .opd-omni-tx .t {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.op-desktop .opd-omni-tx .s {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* la capsule « Entree » n'apparait que sur la ligne courante : une capsule par
   ligne serait du bruit, aucune ne serait une decouverte. */
html.op-desktop .opd-omni-ent {
  flex: 0 0 auto;
  visibility: hidden;
}
html.op-desktop .opd-omni-row.opd-k-cur .opd-omni-ent {
  visibility: visible;
}

/* ===========================================================================
   5. FOCUS VISIBLE (§3.4) — accessibilite clavier reelle, sur NOS composants.
   =========================================================================== */
html.op-desktop .opd-omni-row:focus-visible,
html.op-desktop .opd-omni-input:focus-visible {
  outline: 2px solid var(--op-ink, #0f172a);
  outline-offset: 2px;
}