/* responsive.css — règles globales pour rendre tout le site responsive.
   Inclus après les autres CSS pour battre les inline styles via !important. */

/* ============ DÉSACTIVATION DU SCALER EN-DESSOUS DE 1024px ============ */
@media (max-width: 1023px) {
  #scaler {
    width: 100% !important;
    transform: none !important;
    max-width: 100% !important;
  }
  #stage {
    height: auto !important;
    overflow-x: hidden !important;
  }
  /* clip et non hidden : hidden sur html ET body fait de body un conteneur
     de défilement qui ne défile jamais, et le menu (position: sticky)
     cessait de coller. hidden reste en repli pour Safari < 16. */
  html, body {
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }
}

/* ============ TABLET (≤ 1023px) ============ */
@media (max-width: 1023px) {
  /* Toutes les classes "...-pad" : réduit le padding latéral */
  [class*="-pad"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ============ MOBILE LARGE (≤ 900px) ============ */
@media (max-width: 900px) {
  /* Padding latéral plus serré */
  [class*="-pad"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Toutes les sidebars/TOC sticky cachées sur mobile */
  .no-toc,
  .nt-side,
  aside[class*="-toc"],
  aside[class*="-side"] {
    display: none !important;
  }

  /* Tous les grids inline-style passent en 1 colonne.
     minmax(0,1fr) et non 1fr : une piste 1fr vaut minmax(auto,1fr), et
     « auto » en minimum vaut la largeur min-content du contenu — la piste
     refuse donc de descendre en dessous, quelle que soit la place. Replier
     en 1fr ne suffisait pas : sur guides.html le bloc titre gardait 372 px
     dans une colonne de 347, et depassait de l'ecran. Le minimum a 0 rend
     la reduction possible ; les mots trop longs debordent alors de leur
     bloc au lieu de pousser toute la page. */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Headers : passer en colonne avec gap */
  header[style*="display: flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Navigation : wrap + center */
  nav[style*="display"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Titres : réduction franche */
  h1 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.08 !important; letter-spacing: -0.5px !important; }
  h2 { font-size: clamp(22px, 5.5vw, 30px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(18px, 4.5vw, 22px) !important; line-height: 1.2 !important; }

  /* Texte large des hero/intro */
  p[style*="font-size: 19"],
  p[style*="font-size: 20"],
  p[style*="font-size: 21"],
  p[style*="font-size: 22"] {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Boutons CTA très grands : réduire */
  a[style*="padding: '15px 28px"],
  a[style*="padding: '14px 26px"],
  a[style*="padding: '14px 24px"],
  button[style*="padding: '15px 28px"] {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  /* Numéros d'étape énormes : réduits */
  [style*="width: 60, height: 60"],
  [style*="width: 78, height: 78"] {
    width: 50px !important;
    height: 50px !important;
    font-size: 18px !important;
  }
}

/* ============ MOBILE SMALL (≤ 480px) ============ */
@media (max-width: 480px) {
  [class*="-pad"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Padding vertical réduit aussi */
  section[class*="-pad"] {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* Cards : padding interne réduit */
  [class*="-card"] {
    padding: 16px !important;
  }

  /* Footer : tout en colonne */
  footer {
    text-align: center !important;
  }
  footer > div {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
  }

  /* Tabs / pills dans header : wrap */
  [style*="overflowX: 'auto'"],
  [style*="overflow-x: auto"] {
    flex-wrap: wrap !important;
  }
}

/* ============ FAB FLOTTANT : adapter en mobile ============ */
@media (max-width: 600px) {
  /* Panel du FAB : pleine largeur en bas */
  [style*="position: fixed"][style*="bottom: 100"] {
    bottom: 90px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 65vh !important;
  }
  /* Bouton FAB lui-même */
  [style*="position: fixed"][style*="bottom: 24"][style*="border-radius: '50%'"] {
    bottom: 16px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
  }
}

/* ============ MODE URGENCE PLEIN ÉCRAN : adapter ============ */
@media (max-width: 600px) {
  [style*="position: fixed"][style*="inset: 0"] [style*="padding: '20px 40px"],
  [style*="position: fixed"][style*="inset: 0"] [style*="padding: '40px 40px"],
  [style*="position: fixed"][style*="inset: 0"] [style*="padding: '18px 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============ IMAGES & MEDIA ============ */
@media (max-width: 900px) {
  img, image-slot, video {
    max-width: 100% !important;
    height: auto !important;
  }
}