/*
  boussole-responsive.css
  Styles responsives centralisés — Boussole / Collège des Trois-Sapins
  Appliqué à toutes les pages de la plateforme.
*/

/* ═══════════════════════════════════════════════════
   BASE MOBILE-FIRST — tout ce qui doit toujours marcher
   ═══════════════════════════════════════════════════ */

/* Empêche tout débordement horizontal */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe {
  max-width: 100%;
}

/* Textes qui ne débordent pas */
p, li, td, th, span, div {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════
   TABLETTE & MOBILE — 768px
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  .nav {
    padding: 0 1rem !important;
    gap: .4rem !important;
    height: 50px !important;
  }
  /* Masquer les liens thèmes dans la nav */
  .nav-links,
  .nav-themes,
  .nav > .nav-link {
    display: none !important;
  }
  .nav-brand,
  .nav-logo {
    font-size: .82rem !important;
    letter-spacing: -.01em !important;
  }
  .nav-end {
    gap: .3rem !important;
  }
  .nav-cta,
  .nav-aide,
  .nav-sos {
    font-size: .68rem !important;
    padding: .26rem .6rem !important;
  }
  .nav-tag {
    display: none !important;
  }
  /* Liens de retour dans la nav */
  .nav-back {
    font-size: .7rem !important;
    padding: .22rem .5rem !important;
  }

  /* ── HERO ── */
  .hero {
    padding: 5rem 1.25rem 3rem !important;
  }
  .hero-inner {
    max-width: 100% !important;
    /* Annuler les grilles 2 colonnes dans le hero */
    display: block !important;
  }
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    line-height: .92 !important;
    margin-bottom: 1rem !important;
  }
  .hero-sub,
  .hero-subtitle {
    font-size: clamp(.95rem, 4vw, 1.15rem) !important;
    margin-bottom: .85rem !important;
  }
  .hero-desc,
  .hero-lead {
    font-size: .9rem !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
  .hero-lead + .hero-lead {
    margin-top: .5rem !important;
  }
  .hero-row,
  .hero-actions {
    flex-direction: column !important;
    gap: .75rem !important;
    align-items: flex-start !important;
  }
  .hero-btn,
  .btn-primary {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Partie aide du hero */
  .hero-aide,
  .hero-top {
    display: block !important;
  }
  .hero-aide a,
  .hero-aide-link,
  .hero-link {
    margin-top: .5rem !important;
    display: inline-flex !important;
  }

  /* ── CONTENU GÉNÉRAL ── */
  .content,
  .content-wrap {
    padding: 0 1.15rem !important;
  }
  .section {
    padding: 2rem 0 !important;
  }
  .sec-title {
    font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
    line-height: 1.08 !important;
  }
  .sec-body {
    font-size: .9rem !important;
  }

  /* ── TOUTES LES GRILLES → 1 colonne ── */
  .two-grid,
  .three-grid,
  .kn-grid,
  .compare,
  .two-col,
  .formes-grid,
  .specifics-grid,
  .normal-grid,
  .protec-grid,
  .lifestyle-grid,
  .perf-compare,
  .positions-grid,
  .diff-grid,
  .sig-grid,
  .sub-facts-row,
  .effects-row,
  .obj-grid,
  .contra-grid,
  .ist-row,
  .cb-criteria,
  .signals-grid,
  .brain-banner .cb-criteria,
  .ce,
  .ec-body {
    grid-template-columns: 1fr !important;
  }

  /* ── INDEX — thèmes ── */
  .themes-grid {
    grid-template-columns: 1fr !important;
  }
  .themes-row.row-3,
  .themes-row.row-2 {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* ── INDEX — bandes thèmes (ancien layout) ── */
  .theme-band {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 2rem 1.25rem !important;
  }
  .tb-color {
    min-height: 140px !important;
    font-size: 7rem !important;
  }
  .tb-content {
    padding: 1.5rem 0 !important;
  }
  .tb-links {
    padding-top: .5rem !important;
  }

  /* ── INDEX — SOS / aide ── */
  .sos-inner,
  .aide-inner,
  .psps-inner,
  .objectifs-inner,
  .intro {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* ── ÉQUIPE réseau santé ── */
  .team,
  .team-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* ── HUBS THÈMES ── */
  .hub-grid,
  .subthemes-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── MODULES — titres sections ── */
  .section-title,
  .sos-title,
  .aide-title,
  .psps-title,
  .intro-title,
  .obj-title,
  .reseau-title,
  .th-title {
    font-size: clamp(1.2rem, 5vw, 1.7rem) !important;
  }

  /* ── MODULES — tabs ── */
  .sub-tabs,
  .tech-tabs,
  .ist-tabs,
  .sig-tabs,
  .signes-tabs,
  .trans-tabs,
  .tabs,
  .emo-tabs {
    flex-wrap: wrap !important;
    gap: .35rem !important;
  }
  .stab,
  .ttab,
  .itab,
  .sigtab,
  .tab,
  .etab {
    font-size: .72rem !important;
    padding: .28rem .6rem !important;
  }

  /* ── MODULES — steps ── */
  .steps::before,
  .action-steps::before,
  .escalade-steps::before {
    display: none !important;
  }
  .step {
    flex-direction: row !important;
  }

  /* ── MODULES — cartes addiction (effets) ── */
  .effects-row {
    grid-template-columns: 1fr !important;
  }
  .sub-card .sub-body,
  .sub-body {
    padding: 0 1rem 1rem !important;
  }

  /* ── MODULES — formulaire médiateur ── */
  .two-col,
  .form-row {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  /* ── MODULES — accordion contraception ── */
  .contra-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── MODULES — IST ── */
  .ist-row {
    grid-template-columns: 1fr !important;
  }

  /* ── MODULES — info box ── */
  .info-box {
    padding: 1.1rem !important;
  }
  .consent-box,
  .critic-box,
  .binge-box,
  .brain-banner {
    padding: 1.1rem !important;
  }
  .cb-criteria {
    grid-template-columns: 1fr !important;
  }

  /* ── VIDÉOS — toujours pleine largeur ── */
  .video-card {
    border-radius: .65rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── RESSOURCES ── */
  .res-card,
  .res,
  .sos-card,
  .aide-card,
  .sc {
    padding: .8rem .9rem !important;
  }
  .rc-icon,
  .res-icon,
  .sc-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }

  /* ── STATIONS QR ── */
  .qr-grid,
  .qr-cards {
    grid-template-columns: 1fr !important;
  }

  /* ── FOOTER ── */
  .foot-top,
  .footer-inner,
  .foot-inner {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }
  .foot-links {
    gap: .75rem !important;
    flex-wrap: wrap !important;
  }
  footer {
    padding: 1.75rem 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════
   PETITS MOBILES — 440px
   ═══════════════════════════════════════════════════ */
@media (max-width: 440px) {

  /* Nav ultra-compacte */
  .nav {
    height: 48px !important;
  }
  .nav-brand,
  .nav-logo {
    font-size: .78rem !important;
    /* Tronquer le nom si trop long */
    max-width: 160px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .nav-cta,
  .nav-aide {
    font-size: .65rem !important;
    padding: .22rem .5rem !important;
  }

  /* Hero encore plus compact */
  .hero {
    padding: 4.5rem 1rem 2.5rem !important;
  }
  .hero-title {
    font-size: clamp(1.9rem, 10vw, 2.8rem) !important;
  }

  /* Équipe 1 colonne */
  .team,
  .team-grid {
    grid-template-columns: 1fr !important;
  }

  /* KN grid 2 colonnes sur petit écran */
  .kn-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Sections plus serrées */
  .section {
    padding: 1.75rem 0 !important;
  }
  .content,
  .content-wrap {
    padding: 0 1rem !important;
  }

  /* Masquer les éléments décoratifs lourds */
  .hero::before,
  .hero::after {
    display: none !important;
  }

  /* Tabs en colonne si trop nombreux */
  .emo-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .3rem !important;
  }
  .etab {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Boutons pleine largeur */
  .hero-btn,
  .btn-primary,
  .submit-btn {
    font-size: .88rem !important;
    padding: .75rem 1.2rem !important;
  }

  /* Cards plus petites */
  .card,
  .member {
    padding: .9rem !important;
  }
  .member-avatar,
  .m-avatar {
    width: 58px !important;
    height: 58px !important;
  }

  /* Steps plus compacts */
  .step-num {
    width: 26px !important;
    height: 26px !important;
    font-size: .68rem !important;
    flex-shrink: 0 !important;
  }
  .step-body,
  .step-text {
    font-size: .8rem !important;
  }

  /* Info boxes */
  .ib-point {
    font-size: .83rem !important;
  }
}