/* =====================================================================
   Peaceful Consulting USA — Home responsive fixes (Étape 4B)
   v1 — 2026-09-29
   Chargé UNIQUEMENT par /fr/ et /en/. Corrige EXCLUSIVEMENT le responsive.
   Ne touche aucun contenu, prix, paiement, ni composant JS validé.
   Toutes les règles sont sous media queries mobiles -> desktop inchangé.
   ===================================================================== */

/* ---- BLOCKING: sections commerciales a grilles inline fixes ----
   #projet-vie (FR + EN) et #projet-familial (FR) sont codees en styles
   inline avec des colonnes px fixes -> jamais responsives. On force le
   passage en 1 colonne sur mobile. Selecteurs STRICTEMENT scopes aux IDs.
   !important requis pour surcharger les styles inline (sans !important sur
   l'inline, la regle auteur !important gagne). */
@media (max-width: 768px){
  #projet-vie [style*="grid-template-columns"],
  #projet-vie [style*="grid-template:"],
  #projet-vie [style*="grid:"],
  #projet-vie > .container > div,
  #projet-familial [style*="grid-template-columns"],
  #projet-familial [style*="grid-template:"],
  #projet-familial [style*="grid:"],
  #projet-familial > .container > div{
    grid-template-columns: 1fr !important;
  }
  #projet-vie img,
  #projet-familial img{ max-width: 100% !important; height: auto; }
}

/* ---- MAJOR: selecteur de langue inaccessible sur mobile ----
   global.css masque .nav-inner > .lang-switcher a <=768. On le retablit
   pres du hamburger (CSS pur, aucune modif de global.js ni de la logique
   de langue). */
@media (max-width: 768px){
  .nav-inner > .lang-switcher{
    display: inline-flex !important;
    align-items: center;
    order: 98;
    margin-left: auto;   /* pousse switcher + hamburger a droite */
    margin-right: 12px;  /* espace avant le hamburger */
  }
  .nav-inner > .hamburger{ order: 99; }
  .nav-inner > .lang-switcher .lang-btn{
    min-height: 40px;    /* zone tactile confortable */
    display: inline-flex;
    align-items: center;
  }
}

/* ---- MINOR: petits mobiles (<=480), grilles 2 col trop serrees ----
   No-op si la classe est absente de la home. */
@media (max-width: 480px){
  .results-grid,
  .about-stats,
  .cert-levels,
  .solutions-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ---- COSMETIC: photo hero, micro-debordement a 320 ---- */
@media (max-width: 480px){
  .hero-photo-wrap{
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto;
    margin-right: auto;
  }
}