/* ============================================================
   Bridge Crédit — Responsive overlay
   Targets the existing inline-style structure via data-screen-label
   + structural selectors. Use !important to override inline styles.
   ============================================================ */

/* -------- Breakpoints --------
   Desktop  : > 1024px (default)
   Tablet   : <= 1024px
   Mobile   : <= 768px
   Small    : <= 480px
*/

/* ============= TABLET (≤1024px) ============= */
@media (max-width: 1024px) {
  /* Section padding */
  section[data-screen-label] > div:first-child,
  section > div:first-child { padding-left: 0; padding-right: 0; }
  section[data-screen-label] { padding-left: 32px !important; padding-right: 32px !important; }

  /* All 2-col grids → 1 col on tablet */
  section[data-screen-label="01 Hero"] > div > div:nth-child(2),
  section[data-screen-label="03 Thèse"] > div > div:nth-child(2),
  section[data-screen-label="04 Comment ça marche"] > div > div:nth-child(2),
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(3),
  section[data-screen-label="08 CTA final"] > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Nav links shrink */
  nav > div:nth-child(2) { gap: 20px !important; }
}

/* ============= MOBILE (≤768px) ============= */
@media (max-width: 768px) {
  /* ---------- Global section padding ---------- */
  section[data-screen-label] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---------- NAV ---------- */
  nav {
    padding: 0 20px !important;
    height: 64px !important;
  }
  nav > div:nth-child(2) { display: none !important; } /* hide nav links */
  nav > div:nth-child(3) > a:first-child { display: none !important; } /* hide Connexion */
  nav > div:nth-child(3) > a:last-child { padding: 8px 16px !important; font-size: 12px !important; }
  nav > img { height: 22px !important; }

  /* ---------- HERO (01) ---------- */
  section[data-screen-label="01 Hero"] {
    padding-top: 64px !important;
    padding-bottom: 0 !important;
  }
  section[data-screen-label="01 Hero"] > div { padding: 0 !important; }
  section[data-screen-label="01 Hero"] > div > div:first-child {
    margin-bottom: 24px !important; flex-wrap: wrap !important;
  }
  section[data-screen-label="01 Hero"] > div > div:first-child > span:nth-child(2) {
    font-size: 11px !important;
  }
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    min-height: 0 !important;
  }
  /* H1 */
  section[data-screen-label="01 Hero"] h1 {
    font-size: clamp(48px, 13vw, 72px) !important;
    line-height: 0.95 !important;
  }
  /* Lead paragraph */
  section[data-screen-label="01 Hero"] p {
    font-size: 17px !important;
    margin-top: 20px !important;
  }
  section[data-screen-label="01 Hero"] p > span {
    font-size: 15px !important; line-height: 1.55 !important;
    padding: 0 !important; margin: 0 !important;
    display: block !important; margin-top: 12px !important;
  }
  /* Hero CTAs full width */
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:first-child > div {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:first-child a {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 24px !important;
  }
  section[data-screen-label="01 Hero"] > div > div:first-child {
    padding-bottom: 0 !important;
  }
  /* KPI panel (right column on desktop) */
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child {
    min-height: 0 !important;
    padding: 0 0 64px !important;
  }
  /* Big rendement KPI */
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child > div > div:first-child {
    padding: 24px 20px !important;
  }
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child > div > div:first-child > div:nth-child(3) {
    font-size: 56px !important;
  }
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child > div > div:first-child > div:nth-child(3) > span {
    font-size: 32px !important;
  }
  /* Bottom row 2 KPIs - stack on small */
  /* Bigger numbers within bottom row stay inline */
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child > div > div:nth-child(2) > div > div:nth-child(2) {
    font-size: 32px !important;
  }

  /* ---------- THESIS (03) ---------- */
  section[data-screen-label="03 Thèse"] > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  section[data-screen-label="03 Thèse"] h2 {
    font-size: 36px !important;
    line-height: 1.0 !important;
  }
  section[data-screen-label="03 Thèse"] p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  /* 3 indicators -> 1 col */
  section[data-screen-label="03 Thèse"] > div > div:nth-child(2) > div:nth-child(2) > div:last-child > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  section[data-screen-label="03 Thèse"] > div > div:nth-child(2) > div:nth-child(2) > div:last-child {
    padding: 24px !important;
  }

  /* ---------- HOW IT WORKS (04) ---------- */
  section[data-screen-label="04 Comment ça marche"] > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  section[data-screen-label="04 Comment ça marche"] h2 {
    font-size: 36px !important;
    position: static !important;
  }
  /* Steps grid: number + text -> stack */
  section[data-screen-label="04 Comment ça marche"] > div > div:nth-child(2) > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  section[data-screen-label="04 Comment ça marche"] > div > div:nth-child(2) > div:nth-child(2) > div h3 {
    font-size: 20px !important;
  }
  /* RDV CTA bandeau stack */
  section[data-screen-label="04 Comment ça marche"] > div > div:last-child {
    padding: 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  section[data-screen-label="04 Comment ça marche"] > div > div:last-child a {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------- CHARACTERISTICS (05) ---------- */
  section[data-screen-label="05 Caractéristiques"] h2 {
    font-size: 36px !important;
    margin-bottom: 40px !important;
  }
  /* Table rows: 2-col → stacked */
  section[data-screen-label="05 Caractéristiques"] > div > div:nth-child(3) > div {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 20px !important;
  }
  section[data-screen-label="05 Caractéristiques"] > div > div:nth-child(3) > div > div:first-child {
    font-size: 11px !important;
  }
  section[data-screen-label="05 Caractéristiques"] > div > div:nth-child(3) > div > div:last-child {
    font-size: 15px !important;
  }

  /* ---------- SIMULATOR (06) ---------- */
  section[data-screen-label="06 Simulateur"] h2 { font-size: 36px !important; }
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(4) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Controls + Chart panels reduce padding */
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(4) > div {
    padding: 24px !important;
  }
  /* Chart bars container can be a bit smaller */
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(4) > div:nth-child(2) > div:nth-child(3) {
    height: 180px !important;
  }
  /* Hide trimestriel value above bar on small screens (already conditional via opacity, just ensure font ok) */
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(4) > div:nth-child(2) > div:nth-child(3) > div > div:first-child {
    font-size: 9px !important;
  }
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(4) > div:nth-child(2) > div:last-of-type {
    font-size: 10px !important;
  }
  /* Stat amount displays smaller */
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(4) > div:first-child > div > div:first-child > div:last-child {
    font-size: 22px !important;
  }

  /* ---------- FAQ (07) ---------- */
  section[data-screen-label="07 FAQ"] h2 { font-size: 36px !important; margin-bottom: 40px !important; }
  section[data-screen-label="07 FAQ"] button[style*="width: 100%"] {
    font-size: 16px !important;
    padding: 20px 0 !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* CTA bandeau bottom of FAQ - stack */
  section[data-screen-label="07 FAQ"] > div > div:last-child {
    padding: 28px 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  section[data-screen-label="07 FAQ"] > div > div:last-child a {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------- SUBSCRIBE BAR (08) ---------- */
  section[data-screen-label="08 CTA final"] > div > div {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  section[data-screen-label="08 CTA final"] h2 {
    font-size: 40px !important;
  }
  section[data-screen-label="08 CTA final"] > div > div > div:first-child > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  section[data-screen-label="08 CTA final"] > div > div > div:first-child > div:last-child a {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Pricing card */
  section[data-screen-label="08 CTA final"] > div > div > div:last-child {
    padding: 24px !important;
  }
  section[data-screen-label="08 CTA final"] > div > div > div:last-child > div:nth-child(2) {
    font-size: 28px !important;
  }

  /* ---------- DISCLAIMER ---------- */
  body > div#root > div > section:nth-last-of-type(2) p {
    font-size: 13px !important;
  }

  /* ---------- FOOTER ---------- */
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  footer { padding: 48px 20px 24px !important; }

  /* ---------- TWEAKS PANEL ---------- */
  .tweaks {
    bottom: 16px !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
  }
}

/* ============= SMALL (≤480px) ============= */
@media (max-width: 480px) {
  section[data-screen-label] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Even smaller H1 hero */
  section[data-screen-label="01 Hero"] h1 {
    font-size: 44px !important;
  }
  /* Hero KPI rendement number */
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child > div > div:first-child > div:nth-child(3) {
    font-size: 44px !important;
  }
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child > div > div:first-child > div:nth-child(3) > span {
    font-size: 24px !important;
  }
  /* Bottom 2 KPIs stack */
  section[data-screen-label="01 Hero"] > div > div:nth-child(2) > div:last-child > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  /* Section H2s */
  section[data-screen-label="03 Thèse"] h2,
  section[data-screen-label="04 Comment ça marche"] h2,
  section[data-screen-label="05 Caractéristiques"] h2,
  section[data-screen-label="06 Simulateur"] h2,
  section[data-screen-label="07 FAQ"] h2 {
    font-size: 30px !important;
  }
  section[data-screen-label="08 CTA final"] h2 {
    font-size: 32px !important;
  }
  /* SubscribeBar countdown smaller */
  section[data-screen-label="08 CTA final"] > div > div > div:last-child > div:nth-child(3) > div > div:first-child {
    font-size: 18px !important;
  }
  /* Simulator big numbers in stats */
  section[data-screen-label="06 Simulateur"] > div > div:nth-child(4) > div:first-child > div > div:first-child > div:last-child {
    font-size: 20px !important;
  }
  /* Thesis stat numbers smaller */
  section[data-screen-label="03 Thèse"] > div > div:nth-child(2) > div:nth-child(2) > div:last-child > div:nth-child(2) > div > div:first-child {
    font-size: 30px !important;
  }
}

/* ============= TOUCH-FRIENDLY ============= */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets */
  a, button { min-height: 44px; }
}

/* ============= EXPLICIT OVERRIDES ============= */
/* Simulator: stack controls + chart on 2 floors below 900px */
@media (max-width: 900px) {
  .sim-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}