/* ============================================================================
   desktop-shell.css — SHELL « logiciel de bureau » OneProspect (INCRÉMENT 1)
   ----------------------------------------------------------------------------
   2026-06-25 · design-product-agent. Construit la STRUCTURE PC :
     - carte MapLibre en plein écran réel ;
     - une vraie NAVIGATION DESKTOP persistante (rail encre slate à gauche),
       large et lisible, qui laisse voir la carte (≠ drawer 320px téléphone).

   ── RÈGLE D'OR : TOUT est gaté sous `html.op-desktop`. Sans cette classe
   (= téléphone / fenêtre étroite), CE FICHIER N'A AUCUN EFFET → mobile FIGÉ.

   Couleurs : 100% canoniques (op-tokens.css). Encre slate = neutre navigation.
   Aucune couleur métier volée. Aucune phrase d'info posée dans l'UI.
   N'altère JAMAIS MapLibre (pas de transform/scale sur #map, juste du layout).
   ============================================================================ */

/* ===== Variables du shell desktop (gabarit réutilisable pour les futurs
   incréments : planning / fiche / recherche viendront se poser ici) ===== */
html.op-desktop {
  --opd-rail-w: 264px;          /* largeur du rail de navigation persistant */
  --opd-rail-w-collapsed: 76px; /* (réserve) rail réduit aux icônes */
  --opd-gap: 16px;              /* gouttière standard desktop */
  --opd-panel-w: 460px;         /* largeur cible d'un panneau desktop (colonne) */
  --opd-panel-w-wide: 640px;    /* panneau large (listes riches, futurs écrans) */
  --opd-rail-bg: var(--op-ink, #0f172a);
  --opd-rail-bg-2: #111c33;     /* dégradé bas du rail (encre légèrement bleutée) */
  --opd-rail-ink: #e8eef7;      /* texte clair sur encre */
  --opd-rail-ink-2: #93a4bd;    /* texte secondaire rail */
  --opd-rail-line: rgba(255, 255, 255, 0.08);
  --opd-rail-hover: rgba(255, 255, 255, 0.07);
  --opd-rail-active: rgba(255, 255, 255, 0.12);
}

/* ===== 1. CARTE PLEIN ÉCRAN — la carte occupe tout, le rail flotte par-dessus
   à gauche. On NE redimensionne PAS #map (MapLibre gère son canvas) : le rail
   est en overlay, la carte reste full-bleed → ressenti « bureau ». ===== */
html.op-desktop #map {
  inset: 0; /* inchangé : plein écran réel */
}

/* Le burger HUD n'a plus de sens en desktop (la nav est persistante) → masqué.
   Le bouton « recentrer » (#btn-reset) reste, juste décalé pour ne pas passer
   sous le rail. */
html.op-desktop #hud #btn-menu {
  display: none;
}
html.op-desktop #hud {
  left: calc(var(--opd-rail-w) + var(--opd-gap));
  top: var(--opd-gap);
}

/* ===== 2. RAIL DE NAVIGATION DESKTOP (persistant, encre slate) =====
   Construit par desktop-shell.ui.js dans #opd-rail. Large, lisible, sections
   structurées comme le menu mobile (mêmes blocs), mais TOUJOURS visible. ===== */
#opd-rail {
  display: none; /* invisible tant qu'on n'est pas en desktop */
}
html.op-desktop #opd-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--opd-rail-w);
  z-index: 9998; /* sous les contrôles carte (#opd-rail < map-ctrl 9999), au-dessus du HUD */
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--opd-rail-bg) 0%, var(--opd-rail-bg-2) 100%);
  color: var(--opd-rail-ink);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.4), 4px 0 24px rgba(15, 23, 42, 0.28);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

/* En-tête de marque du rail */
#opd-rail .opd-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--opd-rail-line);
  flex: 0 0 auto;
}
#opd-rail .opd-logo {
  /* [LOGOFAV 2026-07-03] logo officiel OneProspect (image), remplace la lettre "O" en dégradé bleu-violet. */
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  display: block;
  box-shadow: none;
}
#opd-rail .opd-brandline {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
  color: #fff;
}
#opd-rail .opd-brandsub {
  font-size: 11px;
  font-weight: 600;
  color: var(--opd-rail-ink-2);
  letter-spacing: 0.2px;
}

/* Corps scrollable du rail */
#opd-rail .opd-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 8px;
  -webkit-overflow-scrolling: touch;
}
#opd-rail .opd-scroll::-webkit-scrollbar {
  width: 8px;
}
#opd-rail .opd-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

/* Titre de section (bloc) */
#opd-rail .opd-sec {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--opd-rail-ink-2);
  padding: 14px 10px 6px;
}
#opd-rail .opd-sec:first-child {
  padding-top: 4px;
}

/* Élément de navigation (ligne cliquable) */
#opd-rail .opd-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 9px 11px;
  margin: 2px 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--opd-rail-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  position: relative;
  transition: background 130ms ease;
}
#opd-rail .opd-nav:hover {
  background: var(--opd-rail-hover);
}
#opd-rail .opd-nav:active {
  transform: translateY(1px);
}
#opd-rail .opd-nav.is-active {
  background: var(--opd-rail-active);
}
/* Liseré couleur d'accent à gauche de l'item actif (couleur de la mission). */
#opd-rail .opd-nav.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--opd-accent, #fff);
}

/* Pastille d'icône (porte la couleur de la mission, comme les tuiles menu) */
#opd-rail .opd-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
#opd-rail .opd-ic svg {
  width: 19px;
  height: 19px;
}
/* Couleurs de mission (canoniques) sur la pastille — réflexe couleur conservé. */
#opd-rail .opd-nav[data-accent="annonce"] .opd-ic { background: var(--op-mission-annonce, #d946ef); }
#opd-rail .opd-nav[data-accent="relance"] .opd-ic { background: var(--op-mission-relance, #f59e0b); }
#opd-rail .opd-nav[data-accent="rue"]     .opd-ic { background: var(--op-mission-rue, #ef4444); }
#opd-rail .opd-nav[data-accent="boitage"] .opd-ic { background: var(--op-mission-boitage, #7c3aed); }
#opd-rail .opd-nav[data-accent="pro"]     .opd-ic { background: var(--op-mission-pro, #15803d); }
#opd-rail .opd-nav[data-accent="mandat"]  .opd-ic { background: var(--op-mission-mandat, #b8860b); }
#opd-rail .opd-nav[data-accent="recherche"] .opd-ic { background: var(--op-mission-recherche, #2563eb); }
#opd-rail .opd-nav[data-accent="slate"]   .opd-ic { background: rgba(255, 255, 255, 0.12); }

/* accent du liseré actif = couleur de mission de l'item */
#opd-rail .opd-nav[data-accent="annonce"]   { --opd-accent: var(--op-mission-annonce, #d946ef); }
#opd-rail .opd-nav[data-accent="relance"]   { --opd-accent: var(--op-mission-relance, #f59e0b); }
#opd-rail .opd-nav[data-accent="rue"]       { --opd-accent: var(--op-mission-rue, #ef4444); }
#opd-rail .opd-nav[data-accent="boitage"]   { --opd-accent: var(--op-mission-boitage, #7c3aed); }
#opd-rail .opd-nav[data-accent="pro"]       { --opd-accent: var(--op-mission-pro, #15803d); }
#opd-rail .opd-nav[data-accent="mandat"]    { --opd-accent: var(--op-mission-mandat, #b8860b); }
#opd-rail .opd-nav[data-accent="recherche"] { --opd-accent: var(--op-mission-recherche, #2563eb); }

/* Libellés de l'item */
#opd-rail .opd-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
#opd-rail .opd-t {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--opd-rail-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#opd-rail .opd-s {
  font-size: 11px;
  font-weight: 500;
  color: var(--opd-rail-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge (compteur) — repris du menu, miroir des badges existants. */
#opd-rail .opd-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#opd-rail .opd-badge.hidden {
  display: none;
}

/* Pied du rail (réserve : statut compte / version) */
#opd-rail .opd-foot {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-top: 1px solid var(--opd-rail-line);
  font-size: 11px;
  color: var(--opd-rail-ink-2);
}

/* ===== 3. GABARIT DE PANNEAU DESKTOP (réutilisable — incréments suivants) =====
   Les panneaux actuels (#feature-panel.sheet, #prospection-panel.sheet, etc.)
   restent gérés par leur propre CSS sur mobile. En desktop on les décale juste
   pour qu'ils ne passent JAMAIS sous le rail (les conversions colonne viendront
   par écran, increment par increment). Ici : on garantit la cohabitation. ===== */
html.op-desktop .sheet,
html.op-desktop #feature-panel.sheet,
html.op-desktop #prospection-panel.sheet {
  /* le bloc desktop existant de map.css place .sheet à droite (right:12px) :
     on ne le déplace pas, il laisse déjà voir la carte ET le rail à gauche. */
}

/* La classe utilitaire .opd-panel sera la base des futurs panneaux colonne
   (planning, fiche, recherche). Disponible dès maintenant, non utilisée encore. */
html.op-desktop .opd-panel {
  position: fixed;
  top: var(--opd-gap);
  bottom: var(--opd-gap);
  left: calc(var(--opd-rail-w) + var(--opd-gap));
  width: var(--opd-panel-w);
  max-width: calc(100vw - var(--opd-rail-w) - var(--opd-gap) * 2);
  background: var(--op-surface, #fff);
  border: 1px solid var(--op-line, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.op-desktop .opd-panel--wide {
  width: var(--opd-panel-w-wide);
}

/* ============================================================================
   INCRÉMENT 2 (+ SUITE) — PANNEAUX EN COLONNES BUREAU (2026-06-25, design-product-agent)
   ----------------------------------------------------------------------------
   Les panneaux denses (Planning « Ma semaine », Recherche, FICHE) cessent d'être
   des « faux téléphones flottants » : ils deviennent de vraies COLONNES BUREAU
   confortables, ancrées au shell (rail à gauche), la carte MapLibre restant
   visible. TOUT gaté `html.op-desktop` → ZÉRO effet mobile (mobile = figé).
   On NE touche PAS au markup ni à la logique des modules : on réagence juste
   leur conteneur (override de positionnement). Couleurs canoniques, fond
   neutre cohérent (plus de scrim noir « appli mobile »). MapLibre intact.

   ── SUITE inc2 (marqueur build : INC2SUITE) :
     • 4.1 Planning  : inchangé (déjà colonne 640px ancrée gauche).
     • 4.2 Recherche : ÉLARGIE 460px → 720px (= largeur V2, corps 2 colonnes
                       respiré), décalée à droite du rail, docks réalignés.
     • 4.3 FICHE     : NOUVEAU — colonne bureau 480px dockée à droite du rail,
                       device 390px déplafonné (DESKTOP ONLY ; mobile = 390 figé).
   ============================================================================ */

/* ---- 4.1 PLANNING « Ma semaine » (#opsem-root / .ops-device) -------------
   Mobile : #opsem-root = overlay plein écran + scrim sombre, .ops-device =
   colonne 430px centrée (= téléphone flottant en desktop). En desktop on :
   (a) supprime le scrim sombre → fond transparent (la carte reste vue),
   (b) ancre la colonne à GAUCHE (droite du rail) au lieu de la centrer,
   (c) lui donne une largeur bureau confortable (640px) + chrome carte propre,
   (d) remplace l'ombre noire « device » par l'ombre douce du shell.        */
html.op-desktop #opsem-root {
  background: transparent;          /* plus de scrim noir plein écran */
  justify-content: flex-start;      /* colonne ancrée à gauche, plus de centrage */
  align-items: stretch;
  pointer-events: none;             /* le vide laisse voir/atteindre la carte */
  padding: var(--opd-gap) 0 var(--opd-gap) calc(var(--opd-rail-w) + var(--opd-gap));
}
html.op-desktop #opsem-root .ops-device {
  pointer-events: auto;             /* la colonne, elle, reste interactive */
  width: var(--opd-panel-w-wide);   /* 640px : confortable pour les cartes */
  max-width: calc(100vw - var(--opd-rail-w) - var(--opd-gap) * 2);
  height: 100%;
  margin: 0;                        /* annule la marge mobile @520px */
  border-radius: 18px;
  border: 1px solid var(--op-line, #e2e8f0);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18); /* ombre douce du shell */
}

/* ---- 4.2 RECHERCHE (#oprch) ----------------------------------------------
   Recherche V2 (recherche.css?v=recherchev2) a SON propre layout desktop
   @media(min-width:900px) : #oprch = 720px collé au bord gauche (left:0,
   right:auto) avec un corps en 2 colonnes (.oprch-body grid 1fr 1fr) et les
   docks #oprch-go / #oprch-qdock à left:740px. C'est le « large » voulu.
   Sous op-desktop on NE LE RÉTRÉCIT PAS (l'ancien override 460px écrasait la
   grille 2 colonnes → corps à l'étroit) : on le DÉCALE juste à droite du rail
   en CONSERVANT 720px, et on réaligne les docks sur le nouveau bord. La carte
   MapLibre reste visible à droite. (sélecteurs plus spécifiques → l'emportent.) */
html.op-desktop {
  --opd-rch-w: 720px;               /* = largeur colonne Recherche V2 (design V2) */
}
html.op-desktop #oprch {
  left: var(--opd-rail-w);          /* collé au rail (la colonne porte son ombre V2) */
  right: auto;
  width: var(--opd-rch-w);
  max-width: calc(100vw - var(--opd-rail-w));
  /* recherche.css gère déjà fond / scroll / ombre / corps 2 colonnes de la
     colonne V2 : on ne touche QUE l'ancrage horizontal. */
}
html.op-desktop #oprch-go {
  left: calc(var(--opd-rail-w) + var(--opd-rch-w) + var(--opd-gap));
  right: auto;
  width: 380px;
  max-width: calc(100vw - var(--opd-rail-w) - var(--opd-rch-w) - var(--opd-gap) * 2);
}
html.op-desktop #oprch-qdock {
  left: calc(var(--opd-rail-w) + var(--opd-rch-w) + var(--opd-gap));
  right: auto;
  width: 440px;
  max-width: calc(100vw - var(--opd-rail-w) - var(--opd-rch-w) - var(--opd-gap) * 2);
}

/* ---- 4.3 FICHE (#feature-panel.op-maquette) — DOCK COLONNE BUREAU ----------
   ⚠️ RÈGLE NICOLAS : la largeur « device » 390px (M26) est LA largeur validée
   en MOBILE → on n'y touche JAMAIS hors op-desktop. Ici on agit UNIQUEMENT sous
   html.op-desktop : la fiche cesse d'être un « faux téléphone 390px centré dans
   un panneau 520px » et devient une vraie COLONNE BUREAU dockée à droite du rail.

   Mobile (pas de op-desktop) = strictement figé : aucun de ces sélecteurs ne
   s'applique. On NE touche PAS le markup ni la logique de fiche.ui.js (pur CSS),
   et on NE touche PAS fiche.maquette.scoped.css (tout est ici, gaté op-desktop). */

/* largeur colonne fiche bureau (≈ device 390 + air de lecture) */
html.op-desktop {
  --opd-fiche-w: 480px;
}

/* (a) Le panneau fiche devient une colonne bureau ancrée à DROITE du rail
   (réflexe « fiche à droite » conservé : map.css la met déjà à right:12px),
   élargie, pleine hauteur utile. On surcharge le verrou 78vh de map.css. */
html.op-desktop #feature-panel.op-maquette.sheet {
  width: var(--opd-fiche-w) !important;
  max-width: calc(100vw - var(--opd-rail-w) - var(--opd-gap) * 2) !important;
  top: var(--opd-gap) !important;
  bottom: var(--opd-gap) !important;
  height: auto !important;
  max-height: none !important;
}

/* (b) La .device REMPLIT la colonne : on lève le plafond 390px (M26) — mais
   SEULEMENT sous op-desktop. Le contenu de la maquette est fluide (max-width:100%)
   et s'élargit proprement. On conserve height:100% (jamais le 844px fixe iPhone).
   Sélecteur plus spécifique que `#feature-panel.op-maquette .device` → gagne. */
html.op-desktop #feature-panel.op-maquette .device {
  width: 100% !important;
  max-width: none !important;       /* retire le cap 390px (desktop UNIQUEMENT) */
  margin: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}