/* ==========================================================================
   TAC — Feuille de style MOBILE globale
   S'applique à toutes les pages du site (index, about, services,
   formations, blog, resources, contact, espace-client, espace-formateur).

   Le site étant construit avec beaucoup de styles "inline" (style="..."),
   ce fichier cible ces styles via des sélecteurs d'attribut ([style*="..."])
   avec !important pour pouvoir les surcharger proprement sur mobile,
   sans toucher au HTML existant.
   ========================================================================== */

/* --------------------------------------------------------------------
   Base : empêcher tout débordement horizontal, quel que soit l'écran
   -------------------------------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, iframe, video, table {
  max-width: 100%;
}

/* Bouton hamburger : masqué par défaut (desktop), affiché seulement sur mobile */
#tac-menu-toggle {
  display: none;
}

/* ==========================================================================
   TABLETTES ET MOBILES — jusqu'à 768px
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- Grilles supplémentaires non couvertes par le CSS existant ---- */
  div[style*="grid-template-columns:repeat(6,1fr)"],
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns:1fr 2fr"],
  div[style*="grid-template-columns:1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Sections pleine largeur : réduire le padding latéral ---- */
  div[style*="padding:60px 40px"],
  div[style*="padding:50px 40px"],
  div[style*="padding:40px 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  div[style*="padding:12px 40px"],
  div[style*="padding:8px 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- Titres : réduire les tailles de police fixes trop grandes ---- */
  [style*="font-size:64px"] { font-size: 30px !important; }
  [style*="font-size:52px"] { font-size: 28px !important; }
  [style*="font-size:48px"] { font-size: 27px !important; }
  [style*="font-size:42px"] { font-size: 25px !important; }
  [style*="font-size:40px"] { font-size: 25px !important; }
  [style*="font-size:38px"] { font-size: 24px !important; }
  [style*="font-size:36px"] { font-size: 23px !important; }
  [style*="font-size:34px"] { font-size: 22px !important; }
  [style*="font-size:32px"] { font-size: 21px !important; }
  [style*="font-size:30px"] { font-size: 20px !important; }

  /* ---- Formulaires : champs pleine largeur, plus de min-width ---- */
  input[style*="min-width:250px"],
  input[style*="min-width:200px"],
  input[style*="width:300px"],
  textarea[style*="min-width"],
  select[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ---- Tableaux (ex : programmes de formation) : défilement horizontal
         plutôt que débordement / écrasement ---- */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  /* ---- Cartes et rangées avec beaucoup d'espace : resserrer les gaps ---- */
  div[style*="gap:32px"] { gap: 16px !important; }
  div[style*="gap:28px"] { gap: 14px !important; }
  div[style*="gap:24px"] { gap: 12px !important; }

  /* ---- Boutons / liens en ligne : permettre l'empilement propre ---- */
  a[style*="padding:14px 28px"],
  a[style*="padding:12px 24px"] {
    text-align: center !important;
    justify-content: center !important;
  }

  /* ---- Empêcher le scroll de la page quand le menu est ouvert ---- */
  body.tac-nav-open {
    overflow: hidden !important;
  }

  /* ---- Cacher les décorations purement esthétiques qui débordent ---- */
  div[style*="position:absolute"][style*="border-radius:50%"] {
    display: none !important;
  }

  /* ----------------------------------------------------------------
     MENU MOBILE — bouton hamburger (3 barres) en haut à droite,
     qui ouvre le menu en plein écran par-dessus le contenu.
     ---------------------------------------------------------------- */
  #mobnav-btn { display: none !important; } /* ancien bouton Superfish, inutilisé */

  #tac-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: fixed !important;
    top: 12px !important;
    right: 14px !important;
    width: 42px;
    height: 42px;
    background: #1B3A8C;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    z-index: 10001;
    cursor: pointer;
    padding: 0;
  }
  #tac-menu-toggle span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  body.tac-nav-open #tac-menu-toggle {
    background: #F5C518;
  }
  body.tac-nav-open #tac-menu-toggle span {
    background: #1B3A8C;
  }
  body.tac-nav-open #tac-menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.tac-nav-open #tac-menu-toggle span:nth-child(2) { opacity: 0; }
  body.tac-nav-open #tac-menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Panneau de menu : masqué par défaut, affiché en plein écran quand ouvert */
  nav.top-menu {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15,36,96,0.98) !important;
    z-index: 10000 !important;
    padding: 90px 24px 24px !important;
    overflow-y: auto !important;
  }
  body.tac-nav-open nav.top-menu {
    display: block !important;
  }
  nav.top-menu .nav-inner,
  nav.top-menu .container,
  nav.top-menu .row,
  nav.top-menu .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  nav.top-menu ul#menu-main-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  nav.top-menu ul#menu-main-menu li {
    list-style: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  nav.top-menu ul#menu-main-menu li a {
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 16px 6px !important;
    text-align: left !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }
  nav.top-menu ul#menu-main-menu li a:hover,
  nav.top-menu ul#menu-main-menu li.current-menu-item a {
    color: #F5C518 !important;
  }
  #sb-search { display: none !important; }
}

/* ==========================================================================
   PETITS MOBILES — jusqu'à 480px
   ========================================================================== */
@media (max-width: 480px) {

  [style*="font-size:36px"] { font-size: 20px !important; }
  [style*="font-size:32px"] { font-size: 19px !important; }
  [style*="font-size:30px"] { font-size: 18px !important; }

  div[style*="padding:60px 40px"],
  div[style*="padding:50px 40px"],
  div[style*="padding:40px 40px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Barre d'infos du haut : passer les éléments en colonne pour éviter
     le texte tronqué */
  div[style*="background:#0F2460;padding:8px 40px"] .top-bar-inner,
  div[style*="background:#0F2460"] > div {
    row-gap: 6px !important;
  }
}