/* =========================================================
   SHELL.CSS — rail de navigation vertical + header + thème
   Chargé après app.css / responsive.css (ordre alphabétique Dash) :
   ce fichier fait autorité sur la coque de l'application.
   ========================================================= */

/* ---------------------------
   Navigateur : surfaces natives
--------------------------- */
html{ background: var(--bg-app); }
::selection{ background: color-mix(in srgb, var(--primary) 26%, transparent); color: inherit; }
body{ caret-color: var(--primary-ink); accent-color: var(--primary); }
html{ scrollbar-color: var(--border-strong) transparent; }

/* Transition douce lors d'une bascule de thème (seulement à ce moment-là) */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, fill 180ms ease !important;
}

/* ---------------------------
   Coque : réserve la largeur du rail
--------------------------- */
#app-shell{ padding-left: var(--rail-w); }

/* dcc.Tabs reste monté (tabs.value = page active) mais n'est plus affiché */
#tabs-shell,
#tabs-shell.is-stuck{
  display: none !important;
}

/* ---------------------------
   Rail
--------------------------- */
.nav-rail{
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1300;                  /* au-dessus du header (1200), sous les modales (2000) */
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.rail-brand{
  flex: 0 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rail-logo{
  width: 30px;
  height: 30px;
  display: block;
}

.rail-items,
.rail-foot{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
}
.rail-items{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-top: 6px;
  padding-bottom: 10px;
}
.rail-items::-webkit-scrollbar{ display: none; }

.rail-foot{
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid var(--rail-sep);
}

.rail-sep{
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  margin: 6px 0;
  background: var(--rail-sep);
}

.rail-item{
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rail-fg);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.rail-item > .bi{ line-height: 1; }
.rail-item:hover{
  background: var(--rail-hover);
  color: var(--rail-fg-hover);
}
.rail-item:active{ background: var(--rail-pressed); }
.rail-item:focus-visible{
  outline: 2px solid var(--rail-indicator);
  outline-offset: 2px;
  box-shadow: none;
}

.rail-item.is-active{
  background: var(--rail-active-bg);
  color: var(--rail-active-fg);
}
/* Repère de page active, collé au bord du rail */
.rail-item.is-active::before{
  content: "";
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rail-indicator);
}

.rail-item--danger:hover{
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger-ink);
}

.rail-label{ display: none; }

.rail-avatar{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1c8f87;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 3px color-mix(in srgb, var(--rail-indicator) 40%, transparent);
}
.rail-avatar .bi{ font-size: 14px; }

/* Bouton de thème : une icône par état (piloté par data-theme-pref) */
.theme-ico{ display: none; }
html:not([data-theme-pref]) .theme-ico--system,
html[data-theme-pref="system"] .theme-ico--system,
html[data-theme-pref="light"] .theme-ico--light,
html[data-theme-pref="dark"] .theme-ico--dark{ display: inline-block; }

/* Infobulle (créée par shell.js, en position fixe) */
.rail-tip{
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  transform: translate(-4px, -50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  transition: opacity 120ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rail-tip::before{
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: inherit;
  border-left: inherit;
  border-bottom: inherit;
  transform: translateY(-50%) rotate(45deg);
}
.rail-tip.is-visible{
  opacity: 1;
  transform: translate(0, -50%);
}

.rail-scrim{ display: none; }

/* Rail masqué (⌘⇧S / Ctrl+Shift+S) — bureau : pas de bouton, le header glisse à gauche */
@media (min-width: 768px){
  html.rail-hidden #app-shell{ padding-left: 0; }
  html.rail-hidden .nav-rail{ transform: translateX(-100%); visibility: hidden; }
  html.rail-animating #app-shell{ transition: padding-left 220ms cubic-bezier(0.16, 1, 0.3, 1); }
  html.rail-animating .nav-rail{ transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 220ms; }
  html.rail-animating:not(.rail-hidden) .nav-rail{ transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
}

/* ---------------------------
   Header
--------------------------- */
#app-shell > .app-header{
  position: sticky;
  top: 0;
  z-index: 1200;
  height: var(--header-height);
  min-height: 0;
  margin: 0;
  padding: 0 var(--page-gutter);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
}

#app-shell > .app-header .header-left{
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-burger{ display: none; }

.page-title{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--text-primary);
}
.page-title > span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-title-ico{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary-ink);
  font-size: 15px;
}

#app-shell > .app-header .header-controls{
  flex: 0 1 auto;
  width: auto;
  margin-left: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
#app-shell > .app-header .toolbar{
  flex-wrap: nowrap;
  gap: 6px;
}
#app-shell > .app-header .header-tools{
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}

#app-shell > .app-header .header-icon-btn{
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: none;
  transition: background-color 150ms ease, color 150ms ease;
}
#app-shell > .app-header .header-icon-btn.btn-icon-only{ padding: 0; width: 36px; justify-content: center; }
#app-shell > .app-header .header-icon-btn .header-btn-icon{ font-size: 17px; }
#app-shell > .app-header .header-icon-btn:hover{
  background: var(--bg-muted);
  color: var(--text-primary);
}
#app-shell > .app-header .header-icon-btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------------------------
   Tablette : header compact
--------------------------- */
@media (max-width: 1024px){
  #app-shell > .app-header .field-label-inline{ display: none; }
  #app-shell > .app-header .header-btn-label{ display: none; }
  #app-shell > .app-header .header-icon-btn:not(.btn-icon-only){ width: 36px; padding: 0; justify-content: center; }
}

/* ---------------------------
   Mobile : le rail devient un tiroir
--------------------------- */
@media (max-width: 767px){
  #app-shell{ padding-left: 0; }

  .header-burger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 22px;
    cursor: pointer;
  }
  .header-burger:hover{ background: var(--bg-muted); }
  .header-burger:focus-visible{ outline: none; box-shadow: var(--focus-ring); }

  .page-title{ font-size: 0.95rem; }
  .page-title-ico{ display: none; }
  #app-shell > .app-header{ gap: 8px; }
  #app-shell > .app-header .header-controls{ gap: 6px; }
  #app-shell > .app-header .header-tools{ padding-left: 6px; }

  .nav-rail{
    width: min(272px, 84vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 240ms;
    box-shadow: none;
  }
  html.rail-open .nav-rail{
    transform: none;
    visibility: visible;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 12px 0 32px rgba(0,0,0,0.32);
  }

  .rail-brand{ justify-content: flex-start; padding: 0 18px; }
  .rail-brand-name{
    display: inline;
    color: var(--rail-brand-fg);
    font-weight: 650;
    font-size: 15px;
    letter-spacing: -0.01em;
  }
  .rail-items,
  .rail-foot{ align-items: stretch; padding: 0 12px; }
  .rail-foot{ padding-top: 10px; }
  .rail-sep{ width: auto; margin: 8px 10px; }
  .rail-item{
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    padding: 0 12px;
  }
  .rail-item.is-active::before{ left: -12px; }
  .rail-label{
    display: inline;
    font-size: 14.5px;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
  }

  .rail-scrim{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: var(--overlay-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  html.rail-open .rail-scrim{ opacity: 1; pointer-events: auto; }
  html.rail-open body{ overflow: hidden; }
}

@media (max-width: 420px){
  #app-shell > .app-header .header-tools .header-icon-btn[href]{ display: none; }  /* NBKLM */
}

@media (prefers-reduced-motion: reduce){
  html.rail-animating #app-shell,
  html.rail-animating .nav-rail,
  .nav-rail,
  html.rail-open .nav-rail,
  .rail-scrim,
  .rail-tip,
  .rail-item{ transition: none; }
}

/* ---------------------------
   Thème sombre : composants tiers (Dash core / DataTable / Plotly)
--------------------------- */
html[data-theme="dark"] .Select-control,
html[data-theme="dark"] .Select-menu-outer,
html[data-theme="dark"] .Select-menu,
html[data-theme="dark"] .Select-option,
html[data-theme="dark"] .Select--multi .Select-value{
  background-color: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
/* react-select force un fond blanc sur les états focus / ouvert (.Select.is-open > .Select-control) */
html[data-theme="dark"] .Select.is-focused > .Select-control,
html[data-theme="dark"] .Select.is-open > .Select-control,
html[data-theme="dark"] .Select.is-focused:not(.is-open) > .Select-control{
  background-color: var(--bg-surface) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .Select-input > input,
html[data-theme="dark"] .Select.is-focused .Select-input > input{
  background: transparent !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .Select.is-open .Select-arrow{ border-bottom-color: var(--primary-ink); }
html[data-theme="dark"] .Select-option.is-focused{ background-color: var(--bg-muted); }
html[data-theme="dark"] .Select-option.is-selected{ background-color: var(--primary-light); color: var(--primary-ink); }
html[data-theme="dark"] .Select-value-label,
html[data-theme="dark"] .Select--single > .Select-control .Select-value .Select-value-label,
html[data-theme="dark"] .Select-input > input{ color: var(--text-primary) !important; }
html[data-theme="dark"] .Select-placeholder,
html[data-theme="dark"] .Select--single > .Select-control .Select-placeholder{ color: var(--text-muted); }
html[data-theme="dark"] .Select-arrow{ border-top-color: var(--text-muted); }
html[data-theme="dark"] .Select-clear{ color: var(--text-muted); }

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  color-scheme: dark;
}

/* dash_table : les style_* inline passent par light-dark() ; on couvre le socle */
html[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner td,
html[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner th{
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner th{ background-color: var(--bg-subtle); }
html[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td{ background-color: var(--bg-muted); }
html[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]){
  background-color: var(--bg-surface);
  color: var(--text-primary);
}
html[data-theme="dark"] .dash-table-container .previous-next-container,
html[data-theme="dark"] .dash-table-container .page-number{ color: var(--text-secondary); }
/* Pagination : champ « page courante » (texte sombre par défaut de dash_table) */
html[data-theme="dark"] .dash-table-container .previous-next-container .page-number .current-page-container input.current-page,
html[data-theme="dark"] .dash-table-container .previous-next-container .page-number .current-page-container .current-page-shadow{
  color: var(--text-primary) !important;
  background-color: var(--bg-subtle) !important;
  border-color: var(--border-strong) !important;
  caret-color: var(--primary-ink);
}
html[data-theme="dark"] .dash-table-container .previous-next-container .page-number .current-page-container input.current-page::placeholder{
  color: var(--text-primary);
  opacity: 1;
}
html[data-theme="dark"] .dash-table-container .previous-next-container .page-number .current-page-container input.current-page:focus{
  border-color: var(--border-focus) !important;
  box-shadow: var(--focus-ring);
  outline: none;
}
html[data-theme="dark"] .dash-table-container .previous-next-container button.previous-page,
html[data-theme="dark"] .dash-table-container .previous-next-container button.next-page,
html[data-theme="dark"] .dash-table-container .previous-next-container button.first-page,
html[data-theme="dark"] .dash-table-container .previous-next-container button.last-page{
  color: var(--text-primary);
  background-color: transparent;
}
html[data-theme="dark"] .dash-table-container .previous-next-container button:disabled{ color: var(--text-muted); opacity: 0.45; }

/* Plotly : fond transparent + encres claires */
html[data-theme="dark"] .js-plotly-plot .main-svg{ background: transparent !important; }
html[data-theme="dark"] .js-plotly-plot .bg{ fill: var(--bg-surface) !important; }
html[data-theme="dark"] .js-plotly-plot .xtick text,
html[data-theme="dark"] .js-plotly-plot .ytick text,
html[data-theme="dark"] .js-plotly-plot .gtitle,
html[data-theme="dark"] .js-plotly-plot .xtitle,
html[data-theme="dark"] .js-plotly-plot .ytitle,
html[data-theme="dark"] .js-plotly-plot .legendtext{ fill: var(--text-secondary) !important; }
html[data-theme="dark"] .js-plotly-plot .gridlayer path,
html[data-theme="dark"] .js-plotly-plot .zerolinelayer path{ stroke: var(--border-color) !important; }
html[data-theme="dark"] .js-plotly-plot .xaxislayer-above path,
html[data-theme="dark"] .js-plotly-plot .yaxislayer-above path{ stroke: var(--border-strong) !important; }

/* Lecteur PDF / iframes : le document reste blanc, on adoucit le cadre */
html[data-theme="dark"] iframe{ color-scheme: light; }

/* CodeMap (React Flow) */
html[data-theme="dark"] .react-flow__background pattern circle,
html[data-theme="dark"] .react-flow__background circle{ fill: var(--border-strong); }
html[data-theme="dark"] .react-flow__controls-button{
  background: var(--bg-surface);
  border-bottom-color: var(--border-color);
  color: var(--text-primary);
  fill: var(--text-primary);
}
html[data-theme="dark"] .react-flow__controls-button:hover{ background: var(--bg-muted); }
html[data-theme="dark"] .react-flow__minimap{ background: var(--bg-subtle); }
html[data-theme="dark"] .react-flow__attribution{ background: transparent; }

/* HRSMap (Leaflet charge sa feuille après la nôtre : spécificité renforcée) */
.hrsm .hrsm-map.leaflet-container{ background: light-dark(#eef3f2, #121919); }
html[data-theme="dark"] .hrsm-label--site{ text-shadow: 0 0 3px #121919, 0 0 6px #121919; }
html[data-theme="dark"] .hrsm .leaflet-bar{ border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .hrsm .leaflet-bar a,
html[data-theme="dark"] .hrsm .leaflet-bar a:hover{
  background-color: var(--bg-surface);
  border-bottom-color: var(--border-color);
  color: var(--text-primary);
}
html[data-theme="dark"] .hrsm .leaflet-bar a:hover{ background-color: var(--bg-muted); }
html[data-theme="dark"] .hrsm .leaflet-bar a.leaflet-disabled{ background-color: var(--bg-subtle); color: var(--text-muted); }
html[data-theme="dark"] .leaflet-tooltip{
  background: var(--bg-raise);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* =========================================================
   Indicateurs de chargement — spinners Bootstrap 5.3
   (module « spinners » porté tel quel, MIT, sans le reste de Bootstrap ;
   couleur = currentColor → jetons du thème). Remplace les indicateurs natifs
   de dcc.Loading (type circle / dot) et les icônes tournantes des boutons.
   ========================================================= */
.spinner-border,
.spinner-grow{
  display: inline-block;
  flex-shrink: 0;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}
@keyframes spinner-border{ to{ transform: rotate(360deg); } }
.spinner-border{
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}
.spinner-border-sm{
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}
@keyframes spinner-grow{
  0%{ transform: scale(0); }
  50%{ opacity: 1; transform: none; }
}
.spinner-grow{
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-grow;
  background-color: currentcolor;
  opacity: 0;
}
.spinner-grow-sm{
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}
@media (prefers-reduced-motion: reduce){
  .spinner-border,
  .spinner-grow{ --bs-spinner-animation-speed: 1.5s; }
}
.visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Habillage commun (helper Python _bs_spinner) */
.lx-spinner{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--primary-ink);
}
.lx-spinner--block{
  display: flex;
  width: 100%;
  min-height: 72px;
  padding: 16px;
}
.lx-spinner-label{
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}
/* Trois points « grow » décalés (remplace dcc.Loading type="dot") */
.lx-spinner--dots .spinner-grow:nth-child(2){ animation-delay: 0.15s; }
.lx-spinner--dots .spinner-grow:nth-child(3){ animation-delay: 0.30s; }
.lx-spinner--dots{ gap: 6px; }
/* Dans un bouton : hérite de la couleur du libellé */
.btn .spinner-border-sm,
.toolbar-icon-btn .spinner-border-sm{ --bs-spinner-width: 0.95em; --bs-spinner-height: 0.95em; --bs-spinner-border-width: 0.15em; color: currentcolor; }

/* =========================================================
   Modale Aide — mêmes codes que la coque : tuiles d'icônes du rail,
   jetons de thème, pas de filets ni d'accents latéraux.
   ========================================================= */
.help-card{
  max-width: 1040px;
  height: auto;
  max-height: min(86vh, 880px);
}
.help-card .help-head{
  padding: 16px 16px 16px 22px;
  gap: 16px;
}
.help-head-main{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.help-head-main .page-title-ico{ width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
.help-card .help-head h2{
  margin: 0;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
}
.help-subtitle{
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.3;
}
.help-close{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.help-close:hover{ background: var(--bg-muted); color: var(--text-primary); }
.help-close:focus-visible{ outline: none; box-shadow: var(--focus-ring); }

.help-card .help-body{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 8px 40px;
  padding: 20px 24px 26px;
}
.help-col{ min-width: 0; }

/* Le h3 générique de .modal-body-scroll porte un accent latéral : neutralisé ici */
.help-card .modal-body-scroll h3.help-section-title{
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.help-resources{ margin-top: 28px; }

.help-group + .help-group{ margin-top: 18px; }
.help-group-title{
  margin: 0 0 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.help-modules,
.help-tips{
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-module,
.help-resource{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
}
.help-module-ico,
.help-tip-ico{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary-ink);
  font-size: 15px;
}
.help-module-text,
.help-tip-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 1px;
}
.help-module-name,
.help-tip-title{
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.35;
}
.help-module-desc,
.help-tip-body{
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.help-tip{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-subtle);
}
.help-tip + .help-tip{ margin-top: 10px; }
.help-tip-ico{ background: var(--bg-surface); border: 1px solid var(--border-color); }

.help-swatches{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.help-swatch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 6px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-surface);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.help-swatch-dot{
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
}

.help-flag{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.help-flag:first-child{ margin-top: 2px; }
.help-muted{ display: block; margin-top: 6px; color: var(--text-muted); font-size: var(--text-xs); }

.help-tip-body kbd{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin: 0 2px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}

.help-resource{
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.help-resource:hover{ border-color: var(--border-focus); background: var(--primary-light); }
.help-resource:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.help-resource:visited{ color: inherit; }
.help-resource-ext{ margin-left: auto; color: var(--text-muted); font-size: 14px; }
.help-resource:hover .help-resource-ext{ color: var(--primary-ink); }

@media (max-width: 860px){
  .help-card .help-body{ grid-template-columns: 1fr; gap: 24px; padding: 16px 18px 22px; }
}
@media (max-width: 640px){
  .help-card{ width: 100%; max-height: 92vh; }
  .help-subtitle{ display: none; }
}

/* =========================================================
   PCSBuilder — infobulle « Includes / Definition » (assets : pont JS dans
   app.py, pcs-tooltip-sync). Élément unique position:fixed rattaché au body
   pour échapper au défilement des colonnes. Police réduite ; fermeture dès que
   le pointeur quitte l'option ou l'infobulle (80 ms de traversée).
   ========================================================= */
.pcs-hover-tooltip{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: max-content;
  max-width: 300px;
  padding: 7px 10px;
  border: 1px solid light-dark(#a9e0d3, #2b4a44);
  border-radius: 8px;
  background: light-dark(#e9f7f3, #172624);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.8125rem;           /* 13px */
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 90ms ease-out, transform 90ms ease-out;
}
.pcs-hover-tooltip.is-visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;           /* seulement visible : sinon bloquerait les clics */
}
.pcs-hover-tooltip.has-more{ cursor: pointer; }
.pcs-hover-tooltip.is-expanded{
  max-height: min(60vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: default;
}
.pcs-tooltip-more-link{
  display: inline-block;
  margin-top: 4px;
  color: var(--primary-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce){ .pcs-hover-tooltip{ transition: none; } }

/* Repère discret sur les options documentées */
.pcs-axis-card label[data-tooltip]::after{
  content: "\F431";               /* bi-info-circle */
  font-family: "bootstrap-icons";
  margin-left: auto;
  padding-left: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease;
}
.pcs-axis-card label[data-tooltip]:hover::after{
  opacity: 1;
  color: var(--primary-ink);
}

/* =========================================================
   Chargements en cours (assets/busy-indicators.js)
   ========================================================= */
/* Zone occupée : table FAQ / Carnet / Izicod, CodeMap */
.lx-busy{ position: relative; min-height: 160px; }
.lx-busy > :not(.lx-busy-overlay){
  opacity: 0.45;
  transition: opacity 160ms ease;
}
/* Barre de progression indéterminée en tête de zone */
.lx-busy::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 0%, var(--primary) 40%, var(--primary-ink) 60%, transparent 100%)
    0 0 / 40% 100% no-repeat,
    color-mix(in srgb, var(--primary) 14%, transparent);
  animation: lx-progress-slide 1.1s ease-in-out infinite;
}
.lx-busy-overlay{ display: none; }
.lx-busy > .lx-busy-overlay{
  position: absolute;
  top: 56px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  color: var(--primary-ink);
  white-space: nowrap;
}
.lx-busy-label{
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Barre globale sous le header (toute autre attente) */
.lx-progress{
  position: fixed;
  top: var(--header-height);
  left: var(--rail-w);
  right: 0;
  z-index: 1250;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  background: linear-gradient(90deg, transparent 0%, var(--primary) 45%, var(--primary-ink) 55%, transparent 100%) 0 0 / 35% 100% no-repeat;
}
.lx-progress.is-active{
  opacity: 1;
  animation: lx-progress-slide 1.1s ease-in-out infinite;
}
html.rail-hidden .lx-progress{ left: 0; }
@media (max-width: 767px){ .lx-progress{ left: 0; } }
@keyframes lx-progress-slide{
  from{ background-position: -40% 0, 0 0; }
  to  { background-position: 140% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .lx-busy::before,
  .lx-progress.is-active{ animation-duration: 2.4s; }
}