*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 50% -10%,rgba(53,213,255,.22),transparent 32%),
        radial-gradient(circle at 100% 0%,rgba(155,92,255,.14),transparent 28%),
        linear-gradient(135deg,#07192d,#030d1a 60%,#061426);
    color:var(--text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.app-shell{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    min-height:100vh;
}

.sidebar{
    background:rgba(3,14,29,.96);
    border-right:1px solid var(--line-soft);
    padding:18px 12px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
}

.main{
    min-width:0;
    padding:26px;
    overflow:hidden;
}

.brand{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:20px;
}

.brand-mark{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#0d65a0,#0b426d);
    border:1px solid #2382bd;
    box-shadow:0 0 22px rgba(53,213,255,.2);
}

.brand strong{display:block;font-weight:950}
.brand span{display:block;color:var(--muted);font-size:.86rem}

.nav-category{
    margin:18px 0 8px;
    color:var(--cyan);
    font-size:.72rem;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.nav-link{
    display:block;
    padding:9px 11px;
    border-radius:10px;
    color:#c8d9e9;
    text-decoration:none;
    margin-bottom:3px;
    font-weight:750;
}

.nav-link:hover{
    background:rgba(53,213,255,.08);
    color:white;
}

.nav-link.active{
    background:linear-gradient(90deg,#1269a5,#0f4678);
    color:white;
    border:1px solid rgba(90,190,245,.65);
}

.sidebar-group{
    margin-bottom:6px;
}

.sidebar-group summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 11px;
    border-radius:10px;
    color:#d8e9f7;
    font-weight:900;
    background:rgba(53,213,255,.05);
    border:1px solid rgba(53,213,255,.10);
}

.sidebar-group summary::-webkit-details-marker{display:none}

.sidebar-group summary b{
    transition:transform .15s ease;
    color:var(--cyan);
}

.sidebar-group[open] summary b{
    transform:rotate(90deg);
}

.sidebar-submenu{
    margin:6px 0 8px 10px;
    padding-left:8px;
    border-left:1px solid rgba(53,213,255,.20);
}

.page-header{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
    align-items:flex-start;
}

.ux-header{
    align-items:flex-start;
}

.page-title{
    min-width:240px;
}

.eyebrow{
    color:var(--cyan);
    text-transform:uppercase;
    font-size:.72rem;
    font-weight:950;
    letter-spacing:.1em;
    margin-bottom:6px;
}

h1{
    font-size:2.15rem;
    line-height:1.04;
    letter-spacing:-.045em;
    margin:4px 0 6px;
}

p{color:var(--muted);margin:.25rem 0}

.header-actions{
    display:flex;
    gap:8px;
    align-items:center;
    white-space:normal;
    flex-wrap:wrap;
    justify-content:flex-end;
    min-width:0;
}

.hero-strip{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}

.hero-strip div{
    background:linear-gradient(180deg,rgba(14,58,95,.78),rgba(9,35,60,.78));
    border:1px solid var(--line-soft);
    border-radius:14px;
    padding:12px 14px;
}

.hero-strip span{
    display:block;
    color:var(--muted);
    font-size:.76rem;
    font-weight:850;
    margin-bottom:3px;
}

.hero-strip strong{
    display:block;
    color:white;
}

.workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    align-items:start;
}

.workspace-main{min-width:0}
.workspace-side{min-width:0}

@media(max-width:1100px){
    .app-shell{grid-template-columns:1fr}
    .sidebar{position:relative;height:auto}
    .page-header{display:block}
    .header-actions{margin-top:12px;justify-content:flex-start}
    .hero-strip{grid-template-columns:1fr}
    .main{padding:20px 14px 48px}
}

/* ==========================================================
   V12 MOBILE RESPONSIVE PATCH — Biomedical Watch
   Objectif: vraie lisibilité smartphone sans changer OVH/PHP.
   À garder en dernière règle CSS.
   ========================================================== */

@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  body {
    overflow-x: hidden !important;
    font-size: 15px !important;
  }

  .app-shell,
  .s06-shell,
  .s08-shell-collapsed,
  .s09-shell-collapsed {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sidebar,
  .s06-sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(116,178,230,.18) !important;
    padding: 12px 10px !important;
  }

  .brand,
  .s06-brand {
    margin-bottom: 10px !important;
  }

  .nav-category,
  .s06-nav-title {
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }

  .nav-link,
  .s06-nav,
  .sidebar-group summary,
  .s06-group summary {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: .95rem !important;
    border-radius: 12px !important;
  }

  .sidebar-submenu,
  .s06-submenu {
    margin-left: 4px !important;
    padding-left: 8px !important;
  }

  .main,
  .s06-main,
  .content,
  .workspace-main {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 12px 44px !important;
    overflow: visible !important;
  }

  .page-header,
  .ux-header,
  .s08-pagebar,
  .s14-topbar,
  .s09-topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-title,
  .s14-topbar-title,
  .s09-topbar-title {
    min-width: 0 !important;
    width: 100% !important;
  }

  h1,
  .page-header h1,
  .s14-hero-title h1,
  .s15-hero-title h1,
  .s09-hero h1 {
    font-size: clamp(1.55rem, 8vw, 2.05rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere !important;
  }

  p,
  .page-header p,
  .s14-hero-title p,
  .s15-hero-title p,
  .s09-hero p {
    font-size: .96rem !important;
    line-height: 1.42 !important;
  }

  .header-actions,
  .header-actions.app-nav,
  .toolbar,
  .filters,
  .hero-strip,
  .s14-hero,
  .s15-hero,
  .s09-hero,
  .dashboard-grid,
  .detail-grid,
  .bw-insight-grid,
  .bw-detail-grid,
  .bw-pie-layout,
  .bw-disease-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-actions,
  .header-actions.app-nav {
    justify-content: stretch !important;
  }

  .button,
  button,
  input,
  select,
  textarea,
  .language,
  .actions-menu summary,
  .s38-update-btn,
  .s09-update,
  .s14-update,
  .bw-update-button,
  .s38-reset,
  .bw-reset {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    font-size: 16px !important;
  }

  .panel,
  .card,
  .dash-card,
  .analytics-card,
  .company-card,
  .country-card,
  .hospital-card,
  .favorite-card,
  .bw-table-card,
  .bw-filter-panel,
  .bw-v98-table-card,
  .bw-v98-filter-card,
  .s38-filter-card,
  .s15-hero-disease,
  .s14-hero-disease {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dashboard-kpis,
  .kpis,
  .stats,
  .analytics-kpis {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dash-card,
  .kpi,
  .stat {
    min-height: auto !important;
  }

  .dash-card strong,
  .kpi strong,
  .stat strong {
    font-size: 1.75rem !important;
  }

  .bw-filter-grid,
  .bw-v98-filter-card .bw-filter-grid,
  .bw-filter-panel-advanced .bw-filter-grid,
  .bw-timeline-filters .bw-filter-grid,
  .s38-filters,
  .s38-filters.disease-only,
  .s38-filters.has-disease,
  .s38-filters.has-sep,
  .s14-filters,
  .s09-filters,
  .s08-filters,
  .s17-search-form,
  .bw-search-with-toggle {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .bw-filter-search,
  .bw-reset,
  .bw-failure-toggle,
  .s38-compact-check,
  .s11-compact-check {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bw-check,
  .bw-switch,
  .bw-radio-switch,
  .s38-compact-check div,
  .s11-compact-check div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .table-wrap,
  .s06-table-wrap,
  .bw-table-scroll,
  .bw-v98-table-card .s06-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
  }

  table,
  .data-table,
  .s06-table,
  .bw-science-table,
  .health-table {
    width: max-content !important;
    min-width: 900px !important;
    max-width: none !important;
    font-size: .86rem !important;
  }

  .data-table th,
  .data-table td,
  .s06-table th,
  .s06-table td,
  .bw-science-table th,
  .bw-science-table td {
    padding: 10px 9px !important;
    white-space: normal !important;
    vertical-align: top !important;
  }

  .data-table th:first-child,
  .data-table td:first-child,
  .s06-table th:first-child,
  .s06-table td:first-child,
  .bw-science-table th:first-child,
  .bw-science-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 4 !important;
    background: rgba(9,35,62,.98) !important;
    min-width: 130px !important;
    max-width: 170px !important;
  }

  .badge,
  .phase-pill,
  .health-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 170px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    padding: 7px 9px !important;
    font-size: .75rem !important;
  }

  .bar-row,
  .disease-row {
    grid-template-columns: minmax(86px, 120px) minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .s38-timeline-grid,
  .s38-global-grid {
    grid-template-columns: repeat(var(--count), minmax(110px, 145px)) !important;
    overflow-x: auto !important;
    padding: 34px 10px 18px !important;
  }

  .s38-timeline-grid::before {
    left: 26px !important;
    right: 26px !important;
    top: 47px !important;
  }

  .s38-sync-modal,
  .s38-phase-modal,
  .s08-modal,
  .s08-sync-modal {
    align-items: end !important;
    padding: 8px !important;
  }

  .s38-sync-card,
  .s38-phase-card,
  .s08-modal-card,
  .s08-sync-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    overflow: auto !important;
    border-radius: 18px 18px 12px 12px !important;
    padding: 18px 14px !important;
  }

  .s38-sync-steps > div {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .bw-source-progress,
  .bw-source-skip {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .main,
  .s06-main,
  .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .brand strong,
  .s06-brand strong {
    font-size: .95rem !important;
  }

  h1,
  .page-header h1 {
    font-size: 1.55rem !important;
  }

  table,
  .data-table,
  .s06-table,
  .bw-science-table,
  .health-table {
    min-width: 820px !important;
  }
}