/* ============================================================
   SB COACH — couche responsive fluide
   Chargée après le <style> propre à chaque page : peut donc utiliser
   !important pour l'emporter sur les styles inline d'origine (issus
   de l'export Claude Design) sans les réécrire un par un.
   Rien ici ne change le rendu à partir de 1440px de large : toutes
   les règles sont bornées par des media queries < 1440px, sauf la
   nav (utile aussi en fenêtre réduite sur grand écran) et le
   hamburger (masqué au-delà de 980px).
   ============================================================ */

html, body { overflow-x: hidden; }
img, video { max-width: 100%; }

/* ---------------------------------------------------------------
   1. NAV — padding fluide + logo fluide + menu hamburger < 980px
   --------------------------------------------------------------- */
nav { padding-left: clamp(20px, 4vw, 56px) !important; padding-right: clamp(20px, 4vw, 56px) !important; }
nav img[alt="SBCOACH"] { height: clamp(38px, 5vw, 72px) !important; }

.sb-menu-btn { display: none; flex-direction: column; gap: 4px; padding: 8px; background: none; border: none; cursor: pointer; z-index: 110; position: relative; }
.sb-menu-btn span { display: block; width: 22px; height: 1.5px; background: #f4f0ea; transition: transform .3s ease, opacity .3s ease; }
.sb-menu-btn.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sb-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.sb-menu-btn.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.sb-mobile-menu { box-sizing: border-box; position: fixed; inset: 0; z-index: 100; background: #0b0b0b; padding: 110px 32px 40px; display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .35s ease; overflow-y: auto; }
.sb-mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.sb-mobile-menu a { display: block; padding: 20px 0; border-bottom: 1px solid rgba(244,240,234,0.14); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #f4f0ea; }
.sb-mobile-menu .sb-menu-foot { margin-top: 24px; font-family: 'JetBrains Mono',ui-monospace,monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,240,234,0.5); display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 980px) {
  .sb-nav-links { display: none !important; }
  .sb-menu-btn { display: flex !important; }
}

/* ---------------------------------------------------------------
   2. Filet de sécurité : marges gauche/droite fluides partout
   --------------------------------------------------------------- */
section, footer { padding-left: clamp(20px, 5vw, 56px) !important; padding-right: clamp(20px, 5vw, 56px) !important; }

/* ---------------------------------------------------------------
   3. FOOTER — grille qui se replie, logo fluide, liens qui passent à la ligne
   --------------------------------------------------------------- */
footer > div:first-child { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: clamp(28px, 5vw, 64px) !important; }
footer img[alt="SBCOACH"] { height: clamp(56px, 7vw, 96px) !important; }
footer > div:last-child { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 560px) {
  footer > div:last-child { flex-direction: column; align-items: flex-start !important; gap: 16px; }
}

/* ---------------------------------------------------------------
   4. Grilles fluides génériques (appliquées via classes ajoutées au HTML)
   Bornées à < 1440px : au-delà, le rendu desktop original est intact.
   --------------------------------------------------------------- */
@media (max-width: 1439px) {
  .sb-grid-auto-sm { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
  .sb-grid-auto-md { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
  .sb-grid-auto-lg { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
}

/* Grilles à 2 colonnes asymétriques (texte + colonne sticky, etc.) :
   on les fait passer sur 1 colonne et on désactive le sticky en dessous
   de 900px, où la composition à 2 colonnes devient trop étroite. */
@media (max-width: 900px) {
  .sb-split { grid-template-columns: 1fr !important; gap: clamp(32px, 7vw, 64px) !important; }
  .sb-split-sticky { position: static !important; top: auto !important; }
}

/* ---------------------------------------------------------------
   5bis. Lignes techniques (mentions légales, ticker photo, petites
   lignes de tarifs) : plusieurs <span> en justify-content:space-between
   sans retour à la ligne — se chevauchent en dessous de 640px sans ce
   correctif. On les laisse passer à la ligne au lieu de se chevaucher.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .sb-finerow { flex-wrap: wrap; row-gap: 10px; column-gap: 20px; justify-content: flex-start !important; }
}

/* ---------------------------------------------------------------
   5ter. Formulaire de contact : paires de champs (prénom/nom,
   email/téléphone) — 1 colonne sous 560px pour rester confortable.
   --------------------------------------------------------------- */
@media (max-width: 560px) {
  .sb-form-row { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ---------------------------------------------------------------
   5. Boutons — on garde le look, on resserre un peu sous 480px
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  .btn-tech--lg .btn-tech__inner { padding: 16px 26px !important; }
}