/* === Mobile Overrides (<=520px) — 2‑colonnes conservées, tailles adaptées proportionnellement === */
@media (max-width: 520px){
  html, body{ overflow-x: hidden; }
  .container{ padding: 0 10px !important; }

  /* Échelle légère: polices/paddings réduits mais lisibles */
  :root{
    --fs-12: clamp(11px, 2.8vw, 12px);
    --fs-13: clamp(12px, 3.1vw, 13px);
    --fs-14: clamp(12px, 3.4vw, 14px);
    --pad-8: clamp(6px, 1.6vw, 8px);
    --pad-10: clamp(6px, 2vw, 10px);
    --gap-12: clamp(6px, 2vw, 12px);
  }

  .section{ padding: var(--pad-10) !important; border-radius: 16px; }
  label{ font-size: var(--fs-13); }
  input, select{ min-height: 42px; font-size: 16px; } /* évite le zoom iOS */

  /* Stepper compact */
  .stepper{ padding: 0 4px; }

  /* KPI: toujours 2 colonnes */
  #kpiBlock .kpis{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: var(--gap-12) !important;
  }
  #kpiBlock .kpi{ padding: var(--pad-8) var(--pad-10); font-size: var(--fs-13); }

  /* Drawer button pleine largeur (style conservé) */
  .kpi-drawer .btn{ width: 100%; }

  /* Tabs sur deux colonnes visuelles */
  .tabs{ gap: var(--pad-8); padding: 0 var(--pad-8); }
  .tab{ padding: 10px 8px; font-size: var(--fs-13); }

  /* Graphique: réduit proportionnellement mais lisible */
  .chart, #chartHost{ height: clamp(220px, 62vw, 340px) !important; }
  .chart-card canvas{ width: 100% !important; height: 100% !important; display: block; }
  .chart-card .chart-tagline{ font-size: var(--fs-14); margin-top: 6px; }

  /* ICC drawer: 2 colonnes conservées */
  .icc-grid, .icc-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
    gap: var(--gap-12) !important;
    align-items: start;
  }
  .icc-grid .field, .icc-row .field{ width: 100% !important; }

  /* CTA pied de page: côte à côte comme PC */
  .footer-nav{ flex-direction: row; gap: var(--gap-12); }
  .footer-nav .btn{ flex: 1 1 auto; min-width: 0; }

  /* Paddles masqués sur mobile pour éviter le chevauchement */
  .scroll-indicator, #scroll-paddle-right{ display:none !important; }

  /* Hero compact */
  .global-hero{ font-size: var(--fs-14); padding: 8px 0; }
}

/* Ultra‑petits (≤360px) : on garde 2 colonnes mais un peu plus serré */
@media (max-width: 360px){
  #kpiBlock .kpis{ grid-template-columns: repeat(2, minmax(110px, 1fr)) !important; gap: 8px !important; }
  .tabs{ gap: 6px; }
  .tab{ font-size: 12px; }
  .global-hero{ font-size: 13px; }
}

/* === ICC block — compact 2‑cols on mobile (keep desktop untouched) === */
@media (max-width: 520px){
  /* Force 2 colonnes dans le tiroir ICC malgré d'autres overrides */
  #kpi-drawer-panel.form-row,
  #kpi-drawer-panel .form-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: 8px !important;
    align-items: start;
    width: 100%;
    max-width: 100%;
  }

  /* Champs plus compacts */
  #kpi-drawer-panel .form-field label{
    font-size: 12px !important;
    margin-bottom: 3px !important;
    line-height: 1.1;
    white-space: normal;
  }
  #kpi-drawer-panel .form-field input,
  #kpi-drawer-panel .form-field select{
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* Inline ligne taux + bouton */
  #kpi-drawer-panel .input-row{ gap: 6px !important; }
  #kpi-drawer-panel .input-row > input{ height: 36px !important; }
  #kpi-drawer-panel .input-row > .pill-btn{ height: 36px !important; padding: 6px 10px !important; }

  /* Carte estimation à droite: réduit la typographie pour tenir */
  #kpi-drawer-panel .kpi-label{ font-size: 12px !important; }
  #kpi-drawer-panel .kpi-value{ font-size: 18px !important; }

  /* Sélecteurs CP/Ville/Canton harmonisés */
  #iccLocalityRow select, #iccLocalityRow input{ height: 36px !important; }
}

/* ≤360 px: grille toujours 2 colonnes mais plus serrée */
@media (max-width: 360px){
  #kpi-drawer-panel .form-row{
    grid-template-columns: repeat(2, minmax(110px, 1fr)) !important;
    gap: 6px !important;
  }
}

/* === Fix complémentaire mobile: resserrer la colonne de droite et la typo de la carte === */
@media (max-width: 520px){
  body[data-page="projections"] .kpi-grid{
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) minmax(110px, 0.85fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  body[data-page="projections"] .kpi-card{ padding: 10px !important; }
  body[data-page="projections"] .kpi-card .kpi-label{ font-size: 12px !important; }
  body[data-page="projections"] .kpi-card .kpi-value{ font-size: 20px !important; }
}

/* === ICC drawer proportional scale on small devices (keeps layout, desktop untouched) === */
@media (max-width: 520px){
  #kpi-drawer-panel{
    --icc-scale: .90;               /* default scale for small phones */
    transform: scale(var(--icc-scale));
    transform-origin: left top;
    width: calc(100% / var(--icc-scale));  /* keep visual width aligned with card */
    /* improve rendering on scaled text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media (max-width: 360px){
  #kpi-drawer-panel{ --icc-scale: .84; }
}


/* === Touch Landscape Runtime Patch (2025-09-18) === */
.touch-landscape .form-grid{
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  align-items: stretch !important;
}
.touch-landscape .form-grid > .field{ min-width: 0 !important; }

/* Make both controls visually identical */
.touch-landscape .form-grid .field select,
.touch-landscape .form-grid .field input[type="date"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  inline-size:100% !important;
  max-inline-size:100% !important;
  min-inline-size:0 !important;
  box-sizing:border-box !important;
  min-height:44px !important;
  padding:10px 12px !important;
}

/* Ensure the date input doesn't shrink due to the calendar button */
.touch-landscape .form-grid .field input[type="date"]{
  position: relative !important;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px !important; /* space for calendar icon */
}
.touch-landscape .form-grid .field input[type="date"]::-webkit-calendar-picker-indicator{
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* WebKit internals full width */
.touch-landscape .form-grid .field input[type="date"]::-webkit-date-and-time-value,
.touch-landscape .form-grid .field input[type="date"]::-webkit-datetime-edit,
.touch-landscape .form-grid .field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.touch-landscape .form-grid .field input[type="date"]::-webkit-datetime-edit-year-field,
.touch-landscape .form-grid .field input[type="date"]::-webkit-datetime-edit-month-field,
.touch-landscape .form-grid .field input[type="date"]::-webkit-datetime-edit-day-field{
  min-width:100% !important;
  width:100% !important;
  display:inline-block !important;
  box-sizing:border-box !important;
}
/* === End Touch Landscape Runtime Patch === */

/* --- auto patch: hide fullscreen overlays when running as installed PWA/TWA --- */
@media (display-mode: standalone), (display-mode: fullscreen) {
  #overlay, .overlay,
  #fullscreen-overlay, .fullscreen-overlay,
  [data-overlay], [data-fullscreen-overlay],
  .fs-overlay, #fs-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html.no-fullscreen-overlay, body.no-fullscreen-overlay { overflow: auto !important; }
}