/* ==========================================================================
   NOXA — responsive.css
   Rend le site lisible et utilisable sur mobile + tablette, SANS rien changer
   sur PC. Les styles du site sont INLINE (grilles fixes, nav horizontale) :
   on les bat donc avec des sélecteurs d'attribut + !important, uniquement
   à l'intérieur des media queries (aucun impact au-dessus de 900px).
   ========================================================================== */

/* --- Base (toutes tailles) : garde-fous anti-débordement horizontal ------- */
html { overflow-x: hidden; }
img { max-width: 100%; }

/* Éléments injectés par responsive.js — masqués par défaut (bureau) */
.nx-burger { display: none; }
.nx-mobile-panel { display: none; }

/* Bouton hamburger */
.nx-burger {
  margin-left: auto;
  width: 44px; height: 40px;
  border: 1px solid #ffffff1c;
  border-radius: 10px;
  background: #ffffff08;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  z-index: 60;
}
.nx-burger span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: #F2F3F6;
  transition: transform .22s ease, opacity .18s ease;
}
header.nx-open .nx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nx-open .nx-burger span:nth-child(2) { opacity: 0; }
header.nx-open .nx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau de navigation mobile (overlay vertical) */
.nx-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 40;               /* sous le header (z-index:50) : header + burger restent cliquables */
  background: #050507f5;
  overflow-y: auto;
}
.nx-mobile-panel.nx-open { display: block; }
.nx-mobile-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 86px 20px 40px;
  max-width: 560px;
  margin: 0 auto;
}
.nx-mlink {
  display: block;
  padding: 15px 18px;
  border-radius: 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #F2F3F6 !important;
  border: 1px solid #ffffff12;
  background: #0D0E13;
}
.nx-mlink:hover { background: #111116; color: #fff !important; }
.nx-mdiv { height: 1px; background: #ffffff12; margin: 12px 4px; }
.nx-mcta {
  display: block;
  text-align: center;
  padding: 15px 18px;
  border-radius: 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #F2F3F6 !important;
  border: 1px solid #ffffff1c;
  background: #0D0E13;
}
button.nx-mcta { /* ex « Se déconnecter » : même rendu que les liens du menu */
  width: 100%;
  background: #0D0E13; /* même fond que la classe (neutralise le style navigateur des <button>) */
  cursor: pointer;
}
.nx-mcta.nx-primary {
  background: #3B6EF5;
  border-color: #3B6EF5;
  color: #fff !important;
}
.nx-mcta.nx-primary:hover { background: #2F5BE0; }

/* ==========================================================================
   TABLETTE — jusqu'à 900px
   ========================================================================== */
@media (max-width: 900px) {

  /* Nav : masque la barre horizontale + les actions, affiche le hamburger.
     Gated par .nx-mobile-ready : si responsive.js échoue, la nav reste. */
  header.nx-mobile-ready > div > nav { display: none !important; }
  header.nx-mobile-ready > div > .nx-header-actions { display: none !important; }
  header.nx-mobile-ready .nx-burger { display: flex !important; }

  /* Titres */
  h1 { font-size: 40px !important; line-height: 1.15 !important; }
  h2 { font-size: 30px !important; line-height: 1.2 !important; }

  /* Grilles à 4 colonnes -> 2 colonnes */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Splits 2 colonnes -> 1 colonne */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1.35fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1.7fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Maquettes / layouts avec sidebar en pixels -> empilés */
  [style*="grid-template-columns:190px 1fr"],
  [style*="grid-template-columns:130px 1fr"],
  [style*="grid-template-columns:236px 1fr"],
  [style*="grid-template-columns:232px 1fr"] { grid-template-columns: 1fr !important; }

  /* Réduit les très grands espacements des splits */
  [style*="gap:70px"] { gap: 30px !important; }
  [style*="gap:60px"] { gap: 30px !important; }

  /* Tableaux HTML : scroll horizontal plutôt que débordement */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; }
}

/* ==========================================================================
   MOBILE — jusqu'à 600px
   ========================================================================== */
@media (max-width: 600px) {

  /* Titres plus compacts */
  h1 { font-size: 30px !important; line-height: 1.18 !important; letter-spacing: -.5px !important; }
  h2 { font-size: 23px !important; line-height: 1.22 !important; letter-spacing: -.3px !important; }
  h3 { font-size: 19px !important; }

  /* TOUTES les grilles multi-colonnes -> 1 colonne */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1.35fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1.7fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.3fr 1fr 1fr"],
  [style*="grid-template-columns:190px 1fr"],
  [style*="grid-template-columns:130px 1fr"],
  [style*="grid-template-columns:236px 1fr"],
  [style*="grid-template-columns:232px 1fr"] { grid-template-columns: 1fr !important; }

  /* Espacements verticaux des sections réduits + marge latérale plus douce */
  section[data-screen-label] {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  footer > div { padding-left: 16px !important; padding-right: 16px !important; }

  /* Réduit les grands gaps résiduels */
  [style*="gap:70px"] { gap: 26px !important; }
  [style*="gap:60px"] { gap: 26px !important; }
  [style*="gap:44px"] { gap: 24px !important; }
  [style*="gap:40px"] { gap: 22px !important; }
  [style*="gap:34px"] { gap: 20px !important; }

  /* Larges blocs / tableaux : scroll horizontal plutôt que débordement */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; }
}

/* Sécurité : jamais de panneau mobile / burger visible sur grand écran */
@media (min-width: 901px) {
  .nx-mobile-panel { display: none !important; }
  .nx-burger { display: none !important; }
}