/* ════════════════════════════════════════════════════════════════════
   mobile-fixes.css — Corrections responsive site vitrine Odysium
   ════════════════════════════════════════════════════════════════════

   Couvre les bugs d'affichage signalés par Théo (screenshots 2026-06-02) :
   1) Nav qui déborde horizontalement (icônes sociales + items menu)
   2) Blog en 3 colonnes ultra-étroites sur mobile (textes compressés)
   3) Page Contact 2 colonnes coupées à droite ("RÉSERVER EN LIGNE")
   4) Boutons CTA qui dépassent l'écran
   5) Footer désaligné sur mobile

   Stratégie : !important pour overrider les styles inline d'Alan.
   Cible : <768px (smartphones), <900px pour la nav (tablette portrait).
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. Anti-overflow horizontal GLOBAL
   Empêche tout scroll latéral indésirable, peu importe l'élément
   qui déborde.
   ──────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
body * {
  max-width: 100%;
}

/* ────────────────────────────────────────────────────────────────
   2. NAV — Icônes sociales (Insta/TikTok/FB/LinkedIn) sur mobile
   Sur tablette portrait et smartphone, on les cache : elles sont
   déjà accessibles via le footer et leur place sur la nav crée
   un débordement horizontal.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-socials,
  .nav-social,
  .nav .socials,
  nav [class*="social"] {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   3. NAV — Items de menu textuels sur mobile
   Sur smartphone, on cache les liens textuels du menu principal
   (le burger ≡ prend le relais). Sinon ils débordent et chevauchent
   le logo.
   IMPORTANT : NE PAS mettre overflow:hidden sur .nav-in car ça
   pourrait masquer le .mob-menu (position fixed) sur certains
   navigateurs, ce qui casse le burger sur les pages spécifiques.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-menu,
  .nav-links,
  nav > ul,
  nav .menu-items {
    display: none !important;
  }
  /* Le burger reste visible */
  .nav-burger,
  .burger,
  .menu-toggle {
    display: flex !important;
  }
  /* Nav container : éviter wrap mais SANS overflow:hidden */
  .nav, .nav-in {
    flex-wrap: nowrap !important;
  }
  /* Garantir que le .mob-menu (position fixed) n'est jamais
     affecté par max-width / overflow des règles globales */
  .mob-menu, #mobMenu {
    max-width: none !important;
    overflow-y: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   4. GRIDS — Forcer 1 colonne sur mobile
   Couvre les classes .g2, .g3, .g4 ET les styles inline avec
   repeat(N, 1fr) qu'Alan utilise dans les pages spécifiques
   (FORMULE PRO, footer 4 colonnes, etc.)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .g2, .g3, .g4,
  .grid-2, .grid-3, .grid-4,
  .split-2, .split-3, .split-4,
  .pilier-grid,
  [class*="cols-2"], [class*="cols-3"], [class*="cols-4"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* Styles inline 2-cols, 3-cols, 4-cols — patterns Alan */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns:1.5fr"],
  [style*="grid-template-columns: 1.5fr"],
  /* repeat(N,1fr) patterns */
  [style*="repeat(2,1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   5. CARDS BLOG — Permettre le texte de respirer
   Sur petit écran, les cards article doivent avoir une largeur
   utile et le texte ne doit pas être tronqué/compressé.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card, .article-card, [class*="card"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Texte normal flow, pas de white-space:nowrap qui forcerait
     les mots à se compresser */
  .card *, .article-card * {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   6. BOUTONS — Pleine largeur sur smartphone
   Boutons CTA "Demander un entretien d'évaluation", "Ouvrir le
   calendrier", "Nous contacter" doivent tenir dans l'écran.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .btn,
  button,
  a.btn,
  .cta,
  .btn-gold,
  [class*="btn"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
  }
  /* Container des boutons pas en flex-row qui force largeur fixe */
  .btn-group,
  .actions,
  [class*="btn-group"] {
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   7. IMAGES — Toujours responsive
   Aucune image ne doit dépasser la largeur de son conteneur.
   ──────────────────────────────────────────────────────────────── */
img:not(.nav-logo img):not([class*="logo"]) {
  max-width: 100% !important;
  height: auto !important;
}

/* ────────────────────────────────────────────────────────────────
   8. SECTIONS — Padding latéral cohérent sur mobile
   Évite les contenus collés aux bords + les cadres qui débordent.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  section,
  .section,
  main > div,
  main > article {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   9. FOOTER — Colonnes en stack + logo réduit
   Sur le screenshot 3, le footer est désaligné. On force le stack
   et on réduit le logo (Théo : "le logo est trop gros").
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer, .footer, .ft {
    text-align: left;
  }
  footer .grid,
  footer .ft-inner,
  footer [style*="grid-template-columns"],
  .ft .ft-inner,
  .footer .grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer ul, .footer ul {
    padding-left: 0 !important;
    list-style: none !important;
  }
  /* Logo footer : Théo "trop gros" → réduit à 36px sur mobile */
  footer img, .ft img {
    max-width: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
  }
  /* La taille du wordmark "ODYSIUM" dans le footer doit suivre */
  footer [style*="font-size"]:has(+ * ),
  .ft [class*="logo"] span,
  .ft-inner > div:first-child > div:first-child {
    font-size: 1.1rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   10. TYPOGRAPHIE — Tailles raisonnables sur très petit écran
   Évite les titres énormes qui sortent de l'écran.
   EXCLUSIONS importantes : .booking-modal__title (header modale RDV)
   doit rester à sa taille originale (14px), sinon il déborde du
   header (Théo : "dans le header, il n'y a de marge donc coupé").
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  h1:not(.booking-modal__title):not(.chat-msg-title) {
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  h2:not(.booking-modal__title) {
    font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
    line-height: 1.2 !important;
  }
  /* Pas de title qui se découpe milieu de mot (style hero "UNE VISION
     NÉE D'UN CONSTAT SIMPLE.") */
  h1:not(.booking-modal__title), h2:not(.booking-modal__title), h3 {
    hyphens: none !important;
  }
  /* Title de la modale RDV : taille fixe + tronqué si overflow */
  .booking-modal__title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 60px) !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   11. CONTAINERS — Largeurs max raisonnables
   Évite les blocs de width fixe en px qui dépassent.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [style*="width:"][style*="px"]:not([style*="max-width"]):not(.nav-logo):not(img) {
    max-width: 100% !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   12. SCROLL ANCHORS — Offset du header sticky
   Théo : "le bouton Voir la méthode complète ne mène nulle part sur
   mobile alors qu'il marche sur PC". Cause : sticky header de ~64px
   masque la cible. Fix : scroll-margin-top sur toutes les sections
   avec id pour qu'elles s'arrêtent SOUS le header.
   ──────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
section[id], div[id], article[id] {
  scroll-margin-top: 80px;
}

/* ────────────────────────────────────────────────────────────────
   13. PAGE CONTACT — Forcer le stack 2-cols → 1-col (bug récurrent)
   Théo : "Page Contact souci d'affichage" - le bloc "RÉSERVER EN
   LIGNE" déborde encore. On cible explicitement les containers
   contact + on force tous les grids à 1fr de manière agressive.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Toute section contact ou son enfant immédiat */
  .contact-grid,
  .contact-section,
  .contact-wrap,
  section[class*="contact"],
  /* Tous les divs avec un grid 2-cols inline (peu importe le ratio) */
  div[style*="display:grid"][style*="grid-template-columns"]:not([style*="1fr;"]):not([style*="1fr "]) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Page contact spécifiquement : tous les éléments grid > div */
  body > main section > div[style*="grid"],
  body > main > section > div > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   14. PAGE MENTORAT — Masquer la 2e image sur mobile
   Théo : "Retirer une des deux images dans la page Mentorat. IL
   FAUT APPLIQUER CETTE SUPPRESSION QUE SUR MOBILE".
   Stratégie : ciblage par classe ajoutée côté HTML (.mobile-hide).
   Sur PC : visible. Sur mobile (<768px) : display:none.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-hide,
  .mobile-only-hide {
    display: none !important;
  }
}