/* ==========================================================================
   SKATE CONNECT — MOBILE-FIXES-V2.CSS  (version clean, mobile/tablette only)

   RÈGLE STRICTE : aucune règle de ce fichier ne s'applique au-dessus de 1024px.
   Toutes les sections sont enveloppées dans un @media (max-width: 1024px)
   ou un sous-breakpoint plus restrictif.

   À injecter dans chaque page, idéalement juste AVANT </style>
   ou via <link rel="stylesheet" href="assets/css/mobile-fixes-v2.css">
   placé APRÈS les autres feuilles de style.
   ========================================================================== */


/* ==========================================================================
   GUARD GLOBAL — tout ce qui suit ne s'applique qu'à ≤ 1024px
   ========================================================================== */

@media (max-width: 1024px) {


  /* ========================================================================
     1. RETRAIT DES LOSANGES (◇ U+25C7 + shapes rotate(45deg))
     ========================================================================
     NOTE : les losanges ne sont retirés qu'en mobile/tablette.
     Sur desktop (>1024px), les losanges d'origine restent visibles.
     ======================================================================== */

  /* Losanges/points supprimés — listes sans puces décoratives */
  ul.dual-card-list li::before,
  ul.dm-list li::before,
  ul.tarif-details li::before,
  ul.service-list li::before,
  .dual-card-list li::before,
  .dm-list li::before,
  .tarif-details li::before,
  .service-list li::before,
  .dm-card .dm-list li::before,
  .dm-card-rose .dm-list li::before,
  .dm-card-ice .dm-list li::before {
    display: none !important;
  }
  .value-diamond {
    display: none !important;
  }


  /* ========================================================================
     2. SUPPORT iOS SAFARI — 100dvh + momentum scroll
     ======================================================================== */

  /* 100dvh uniquement sur le hero full-screen de index.html, pas sur les hero-page internes */
  @supports (height: 100dvh) {
    section.hero:not(.hero-page) {
      min-height: 100dvh;
    }
  }

  table, .admin-db-table, .week-scroll,
  .coach-tabs, .auth-tabs,
  .values-carousel,
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"],
  [style*="overflow-y:auto"],
  [style*="overflow-y: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Tap highlight discret aux couleurs du site */
  * {
    -webkit-tap-highlight-color: rgba(169, 192, 211, .15);
  }


  /* ========================================================================
     15. NAV FIXED + SCROLL SMOOTH iOS
     ======================================================================== */

  .nav {
    -webkit-backdrop-filter: blur(40px);
  }

  @supports not (backdrop-filter: blur(40px)) {
    .nav {
      background: rgba(255, 255, 255, .98) !important;
    }
  }

  /* Empêche le scroll du body quand drawer mobile ou modale ouverte */
  body.menu-open,
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }


  /* ========================================================================
     10. SAFE AREAS iPhone (notch + home indicator)
     ======================================================================== */

  @supports (padding: max(0px)) {
    .nav-inner {
      padding-left: max(16px, env(safe-area-inset-left)) !important;
      padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
    .footer {
      padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
    .cart-float,
    .resa-cta-fixed,
    [style*="position:fixed"][style*="bottom"] {
      bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
  }

} /* fin @media (max-width: 1024px) — guard global */


/* ==========================================================================
   1b. HERO TITLE — EFFET AFFICHE CINÉMA (La Glace / Réinventée)
   Desktop: 6.5rem / 4.5rem → Mobile: proportionnel, gros, imposant
   Valeurs calculées par Opus pour chaque device.
   ========================================================================== */

@media (max-width: 1024px) {
  /* HERO HOME — effet affiche (cible le h1 ET les spans enfants) */
  section#main.hero .hero-title,
  section#main.hero .hero-title > span[data-cms="hero_title_main"] {
    font-size: clamp(3.2rem, 14vw, 6.5rem) !important;
    line-height: 0.88 !important;
    letter-spacing: 0.02em !important;
    font-weight: 400 !important;
    font-family: 'Cinzel', serif !important;
  }
  section#main.hero .hero-title > .hero-title-accent {
    display: block !important;
    font-size: clamp(2rem, 8vw, 4.5rem) !important;
    line-height: 0.95 !important;
    letter-spacing: 0.01em !important;
    margin-top: 8px !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
  }
  section#main.hero > .hero-content {
    padding: 0 20px !important;
    max-width: 100% !important;
  }
  section#main.hero .hero-sub {
    font-size: 1.1rem !important;
    margin-top: 24px !important;
    margin-bottom: 36px !important;
  }
  section#main.hero .hero-sep {
    margin: 20px auto !important;
  }

}


/* ==========================================================================
   À PARTIR D'ICI : chaque bloc a son propre @media restrictif (≤1024px max)
   ========================================================================== */


/* ==========================================================================
   3. ANTI-DÉBORDEMENT TABLETTE ÉTROITE (768-820px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 820px) {
  html, body { overflow-x: hidden; }
  .container, .container-wide {
    padding-left: 32px !important;
    padding-right: 32px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   4. TABLETTE PORTRAIT 768–900px — ZONE MORTE (3 cols → 2 cols)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 900px) {
  .maison-pillars,
  .featured-grid, .featured-grid-light,
  .tarifs-grid, .services-grid, .values-grid,
  .pricing-grid,
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  /* dash-grid reste en 3 colonnes même sur tablette */
  .dash-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .dual-grid {
    grid-template-columns: 1fr !important;
  }
  .dual-divider { height: .5px !important; }

  .deux-mondes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 32px !important;
  }
}


/* ==========================================================================
   5. iPad Pro 12.9" (1000-1024px) — AJUSTEMENT PADDING
   ========================================================================== */

@media (min-width: 1000px) and (max-width: 1024px) {
  .container, .container-wide {
    padding: 0 40px !important;
  }
}


/* ==========================================================================
   6. TABLETTE PAYSAGE 900–1024px — HERO UN CRAN PLUS PETIT
   ========================================================================== */

@media (min-width: 900px) and (max-width: 1024px) {
  .hero-title {
    font-size: 5rem !important;
    line-height: 1.05 !important;
  }
  .hero-title-accent {
    font-size: 3.2rem !important;
  }
}


/* ==========================================================================
   7. iPhone SE (≤ 380px) — TITRES LÉGAUX + HERO
   ========================================================================== */

@media (max-width: 380px) {
  .page-title {
    font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important;
    letter-spacing: .04em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .page-sub {
    font-size: 1rem !important;
  }
  h1:not(.hero-title) {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  .hero-title {
    font-size: clamp(4rem, 19.5vw, 4.5rem) !important;
    letter-spacing: 0.01em !important;
  }
  .hero-title-accent {
    font-size: clamp(2.4rem, 12.5vw, 2.8rem) !important;
  }
  .dash-welcome-name { font-size: 1.25rem !important; }
  .choice-card { padding: 28px 18px !important; }
}


/* ==========================================================================
   8. EMAILS & URLS LONGS — wrap sur mobile
   ========================================================================== */

@media (max-width: 768px) {
  .info-value,
  .info-value a,
  .footer-contact a,
  a[href^="mailto:"],
  a[href^="tel:"],
  a[href^="http"] {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}


/* ==========================================================================
   9. ORIENTATION PAYSAGE TÉLÉPHONE — hero compact
   ========================================================================== */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero-home, .hero-section, .hero-page, section.hero {
    min-height: auto !important;
    padding: 90px 24px 30px !important;
  }
  .hero-title { font-size: 2rem !important; }
  .hero-title-accent { font-size: 1.4rem !important; }
  .hero-sub {
    font-size: 1rem !important;
    margin-bottom: 20px !important;
  }
  .hero-ctas { gap: 10px !important; }

  .mobile-drawer, .mobile-menu {
    overflow-y: auto !important;
    max-height: 100vh !important;
  }
}


/* ==========================================================================
   11. mon-espace.html — FIXES ADDITIONNELS
   ========================================================================== */

@media (max-width: 768px) {
  /* 3 cartes stats (Élèves/Cours/Revenus) toujours sur la même ligne */
  .dash-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .dash-card {
    padding: 16px 8px !important;
  }
  .dash-card-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 10px !important;
  }
  .dash-card-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  .dash-card-title {
    font-size: .4rem !important;
    letter-spacing: .12em !important;
  }
  .dash-card-value {
    font-size: 1.2rem !important;
  }
  .dash-card-label {
    font-size: .7rem !important;
  }

  /* Bienvenue centré sur mobile */
  .dash-welcome {
    text-align: center !important;
  }
  .dash-welcome > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .dash-welcome > div:first-child > div:last-child {
    text-align: center !important;
  }
  .dash-welcome-name {
    text-align: center !important;
  }
  #registerForm .form-group label[style*="align-items:center"],
  #clientProfileModalOverlay label[style*="align-items:center"],
  #adminPanel label[style*="align-items:center"] {
    align-items: flex-start !important;
    padding-right: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #registerForm .form-group label input[type="checkbox"],
  #registerForm .form-group label input[type="radio"],
  #clientProfileModalOverlay label input[type="checkbox"],
  #clientProfileModalOverlay label input[type="radio"] {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
  }

  .profile-modal-overlay.open,
  .dash-modal-overlay.open,
  #clientProfileModalOverlay.open,
  #resaPopup[style*="display:flex"],
  #resaPopup[style*="display:block"],
  #signDechargeModal[style*="display:flex"] {
    z-index: 10001 !important;
  }

  body.modal-open .nav-toggle,
  body.modal-open .mobile-burger {
    visibility: hidden !important;
  }

  #adminOrganisationPanel input,
  #adminOrganisationPanel select,
  #adminOrganisationPanel textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix disciplines/couple checkboxes + radios alignement mobile */
  #clientProfileModalOverlay .pm-field label[style*="display:flex"],
  #registerForm label[style*="display:flex"],
  .profile-modal label[style*="display:flex"] {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Texte consentement LPD : forcer le wrap */
  #registerForm label span,
  #registerForm .form-group label > span {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  /* Auth box : ne pas couper le contenu sur mobile */
  .auth-box {
    overflow: visible !important;
    max-width: 100% !important;
    padding: 32px 20px !important;
  }
  .auth-form input, .auth-form select, .auth-form textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #clientProfileModalOverlay .pm-field label input[type="checkbox"],
  #clientProfileModalOverlay .pm-field label input[type="radio"] {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }
  #clientProfileModalOverlay .pm-field {
    text-align: left !important;
  }
}


/* ==========================================================================
   12. reservation.html — FIXES SIGNATURE + MODALE DÉCHARGE
   ========================================================================== */

@media (max-width: 768px) {
  #signCanvas {
    height: 180px !important;
    touch-action: none;
  }

  #signDechargeModal {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  #signDechargeModal > div {
    padding: 20px !important;
    max-height: calc(100vh - 24px) !important;
  }

  #signDechargeModal div[style*="justify-content:flex-end"] {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  #signDechargeModal div[style*="justify-content:flex-end"] button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 14px 22px !important;
    font-size: .72rem !important;
  }

  span[onclick*="removeCartItem"],
  button[onclick*="remove"] {
    min-height: 40px !important;
    min-width: 40px !important;
  }
}


/* ==========================================================================
   13. patinoires.html — FILTRES CANTON
   ========================================================================== */

@media (max-width: 768px) {
  .filter-canton-list,
  .canton-filters,
  [class*="canton"][style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-chip, .canton-chip {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: .7rem !important;
  }

  .patinoire-search, [id*="patinoireSearch"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   13b. ESPACEMENT HERO → CONTENU (tarifs, services, etc.)
   ========================================================================== */

@media (max-width: 768px) {
  .tarifs-grid, .services-grid {
    margin-top: 16px !important;
  }
  .hero-page {
    padding-bottom: 32px !important;
  }
  .tarifs-section, .services-section {
    padding-top: 40px !important;
  }
}


/* ==========================================================================
   13c. PRIX CHF LISIBLES SUR MOBILE (tarifs + reservation)
   ========================================================================== */

@media (max-width: 768px) {
  .tarif-price {
    font-size: 2.8rem !important;
  }
  .tarif-price small {
    font-size: 1.1rem !important;
  }
  .cart-item-price {
    font-size: 1.3rem !important;
  }
  [data-price-display], [data-price] {
    font-size: inherit !important;
  }
}

@media (max-width: 380px) {
  .tarif-price {
    font-size: 2.4rem !important;
  }
}


/* ==========================================================================
   14. TYPO — PLANCHER MINIMUM SUR TOUS LES TEXTES MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  p, li, td, th, span:not([class*="icon"]):not([class*="Icon"]):not([data-cms*="hero_title"]):not([data-cms*="hero_subtitle"]):not(.hero-title-accent):not(.hero-title-tagline):not(.sec-label):not(.hero-label),
  label, .info-label, .form-label {
    font-size: max(.72rem, 12px);
  }

  /* Sec-label / hero-label (eyebrows bleus type "EXCLUSIF") : restent discrets,
     proportionnels au titre principal comme sur desktop, pas envahissants */
  .sec-label, .hero-label {
    font-size: 0.55rem !important;
    letter-spacing: 0.32em !important;
  }

  .mobile-item, .mobile-drawer a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}


/* ==========================================================================
   16. IMAGES — ratio + lazy protection
   ========================================================================== */

@media (max-width: 1024px) {
  img:not([width]):not([height]) {
    max-width: 100%;
    height: auto;
  }

  .hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* ==========================================================================
   17. TABLEAUX — SCROLL HORIZONTAL PROPRE
   ========================================================================== */

@media (max-width: 900px) {
  .tarif-comparison-table,
  table:not(.admin-db-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
    border-collapse: collapse;
  }
  .tarif-comparison-table th,
  .tarif-comparison-table td {
    padding: 10px 14px !important;
    font-size: .82rem !important;
  }
}


/* ==========================================================================
   18. FOCUS VISIBLE — accessibilité tactile
   ========================================================================== */

@media (max-width: 1024px) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--spark, #A9C0D3);
    outline-offset: 2px;
  }
}


/* ==========================================================================
   FIN — mobile-fixes-v2.css (version clean, scopée ≤1024px)
   ========================================================================== */