/*
 * ============================================================
 *  OPTISHOW — fix-responsive.css
 *  Patch de correction locale → production
 *  À charger APRÈS style.css dans chaque HTML :
 *  <link rel="stylesheet" href="css/fix-responsive.css?v=1">
 *  (remplacer ../css/fix-responsive.css dans /pages/)
 * ============================================================
 */

/* ══════════════════════════════════════════════════════════
   A. BASE GLOBALE — raison n°1 des différences de rendu
   ══════════════════════════════════════════════════════════
   Sans font-size explicite sur html, le navigateur utilise
   sa valeur par défaut (souvent 16px MAIS modifiable par
   l'utilisateur ou différente selon le contexte file:// vs
   HTTP). On fixe un socle identique partout.
*/
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;       /* ← CORRECTION SCROLL HORIZONTAL MOBILE */
  max-width: 100%;
}

body {
  font-size: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  overflow-x: hidden;       /* ← double sécurité */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════
   B. CONTENEURS — évite que le contenu soit trop étroit
   ══════════════════════════════════════════════════════════
*/
.inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  /* padding horizontal de sécurité sur les très grands écrans
     (le padding principal vient de .sec, voir section C) */
}

/* ══════════════════════════════════════════════════════════
   C. .sec ET .process — CORRECTION CRITIQUE
   ══════════════════════════════════════════════════════════
   Dans style.css : .sec { padding: 100px 56px }
   Cette règle n'est JAMAIS réduite dans aucune media query.
   Sur mobile (375px), 56px × 2 = 112px de padding latéral
   soit 30 % de l'écran consommé rien qu'en marges de section.
   → Les blocs paraissent "petits" et l'espacement est écrasé.
*/

/* Desktop large : inchangé (56px déjà présent dans style.css) */

/* Tablette (≤ 1024px) */
@media (max-width: 1024px) {
  .sec,
  .process {
    padding: 80px 40px;
  }
  .photo-strip-inner {
    padding: 70px 40px;
  }
  .cta-final {
    padding: 80px 40px;
  }
}

/* Mobile large (≤ 768px) */
@media (max-width: 768px) {
  .sec,
  .process {
    padding: 60px 20px;
  }
  .photo-strip-inner {
    padding: 56px 20px;
  }
  .cta-final {
    padding: 60px 20px;
    text-align: center;
  }
  footer {
    padding: 48px 20px 28px;
  }
}

/* Mobile small (≤ 480px) */
@media (max-width: 480px) {
  .sec,
  .process {
    padding: 48px 16px;
  }
  .photo-strip-inner {
    padding: 48px 16px;
  }
  .cta-final {
    padding: 48px 16px;
  }
  footer {
    padding: 40px 16px 24px;
  }
}

/* ══════════════════════════════════════════════════════════
   D. NAV — harmonisation responsive
   ══════════════════════════════════════════════════════════
*/
@media (max-width: 1024px) {
  nav {
    padding: 0 28px;
  }
}
@media (max-width: 768px) {
  nav {
    padding: 0 20px;
    height: 64px;
  }
}
@media (max-width: 480px) {
  nav {
    padding: 0 14px;
  }
}

/* ══════════════════════════════════════════════════════════
   E. HERO — typographie fluide renforcée
   ══════════════════════════════════════════════════════════
*/
@media (max-width: 768px) {
  .hero {
    padding: 90px 20px 50px;
  }
  .hero-h1 {
    font-size: clamp(36px, 10vw, 64px);
    letter-spacing: -1px;
  }
  .hero-h2 {
    font-size: clamp(18px, 5vw, 32px);
  }
  .hero-sub {
    font-size: 15px;
    max-width: 100%;
  }
  .hero-stats {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-stats .hstat {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 80px 14px 40px;
  }
  .hero-h1 {
    font-size: clamp(32px, 10vw, 52px);
  }
  .hero-h2 {
    font-size: clamp(16px, 6vw, 28px);
  }
  .hero-stats .hstat {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════
   F. BOUTONS — taille minimum pour ne jamais paraître trop petits
   ══════════════════════════════════════════════════════════
*/
.btn-or,
.btn-dark,
.btn-or-pill {
  /* force un min-height pour éviter les boutons écrasés */
  min-height: 44px; /* standard Apple / WCAG recommandé */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .btn-or {
    font-size: 14px;
    padding: 14px 32px;
  }
  .btn-dark {
    font-size: 13px;
    padding: 13px 28px;
  }
}

@media (max-width: 480px) {
  .btn-or,
  .btn-dark {
    font-size: 13px;
    padding: 13px 20px;
    width: 100%;
    justify-content: center;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* ══════════════════════════════════════════════════════════
   G. IMAGES — comportement responsive sécurisé
   ══════════════════════════════════════════════════════════
*/
img {
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════════
   H. GRILLE SERVICES — passage fluide entre colonnes
   ══════════════════════════════════════════════════════════
*/
@media (max-width: 1200px) {
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   I. FOOTER — colonnes adaptées au mobile
   ══════════════════════════════════════════════════════════
*/
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    gap: 32px;
  }
  .footer-brand {
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-legal-links {
    gap: 14px;
    flex-wrap: wrap;
  }
}

/* ══════════════════════════════════════════════════════════
   J. TYPOGRAPHIE RESPONSIVE — clamp() renforcé
   ══════════════════════════════════════════════════════════
   Garantit que les textes ne seront jamais trop petits sur
   aucun viewport, et jamais trop grands sur les très grands
   écrans.
*/
.sec-h {
  font-size: clamp(26px, 4.5vw, 58px);
}

@media (max-width: 768px) {
  .sec-h {
    font-size: clamp(22px, 6vw, 36px);
  }
  .hstat-num {
    font-size: clamp(22px, 5vw, 32px);
  }
  .step-n {
    font-size: clamp(32px, 8vw, 48px);
  }
}

/* ══════════════════════════════════════════════════════════
   K. PRÉVENTION DU ZOOM AUTO IOS — champs de formulaire
   ══════════════════════════════════════════════════════════
*/
input,
select,
textarea {
  font-size: 16px;
}

/* ══════════════════════════════════════════════════════════
   L. CORRECTION SCROLL HORIZONTAL MOBILE
   ══════════════════════════════════════════════════════════
   3 éléments identifiés qui causent le débordement :
   1. html overflow-x visible → fixé en section A
   2. .rev-carousel-wrap (max-width: 1100px fixe)
   3. .rev-slide (calc 33% de 1100px = trop large sur mobile)
*/

/* Carousel d'avis — conteneur */
.rev-carousel-wrap {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

/* Marquee et ticker jeux — sécurité overflow */
.mq {
  overflow: hidden;
}
.games-ticker-wrap {
  overflow: hidden;
}
.games-ticker {
  will-change: transform; /* optimise l'animation sans débordement */
}

/* Hero avatars — masqués sur tablette/mobile */
@media (max-width: 1024px) {
  .hero-avatar-left,
  .hero-avatar-right {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   O. NAV MOBILE — masquer les éléments qui cachent panier/menu
   ══════════════════════════════════════════════════════════
   Sur mobile, .nav-right contient :
   lang-flags (~79px) + client-nav-slot + cart btn + hamburger
   Sur écran 375px, ça déborde → panier et hamburger invisibles.
   Solution : masquer lang-flags sur mobile, compacter le logo.
*/
@media (max-width: 768px) {
  /* Masquer les drapeaux de langue — trop encombrants sur mobile */
  .lang-flags { display: none !important; }

  /* Logo compact sur mobile */
  .nav-logo-circle { width: 40px !important; height: 40px !important; }
  .nav-logo-txt { font-size: 15px !important; }

  /* Espacement resserré dans nav-right */
  .nav-right { gap: 6px !important; }

  /* Cart button compact — icône seule + badge */
  .nav-cart-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
}

@media (max-width: 480px) {
  /* Logo encore plus compact sur petits écrans */
  .nav-logo-circle { width: 34px !important; height: 34px !important; }
  .nav-logo-txt { font-size: 14px !important; }
  .nav-right { gap: 4px !important; }
  nav { padding: 0 12px !important; }
}

/* ══════════════════════════════════════════════════════════
   M. CARTE FEATURED (Pack Pro Esport) — débordement mobile
   ══════════════════════════════════════════════════════════
   padding: 44px 48px sur la carte = 96px de padding latéral
   sur un écran de 390px → contenu coupé à droite.
*/
@media (max-width: 768px) {
  .svc-card.featured {
    padding: 24px 16px;
    animation: none; /* box-shadow animé = débordement visuel */
    box-shadow: 0 0 0 3px #E8601A, 0 0 30px rgba(232,96,26,0.4);
  }
  .svc-card.featured .svc-name {
    font-size: 22px;
    word-break: break-word;
  }
  .svc-card.featured .svc-price {
    font-size: 38px !important;
  }
  .svc-card.featured > div {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Grille des features 2 colonnes → 1 colonne */
  .svc-feats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .svc-card.featured {
    padding: 18px 12px;
  }
  .svc-card.featured .svc-price {
    font-size: 32px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   P. FEATURED CARD — badge et grilles internes mobile
   ══════════════════════════════════════════════════════════
   Le badge "Pack tout en 1 · Le plus complet" est en
   width:fit-content et déborde sur petit écran.
   Les stats (4 cols) et features (3 cols) sont trop étroites.
*/
@media (max-width: 768px) {
  /* Badge : pleine largeur, texte qui wrape */
  .feat-badge-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .feat-badge-wrap span {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }

  /* Stats 4 colonnes → 2×2 */
  .feat-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Titres du featured card */
  .svc-card.featured [style*="clamp(28px"] {
    font-size: clamp(22px, 6vw, 36px) !important;
  }
  .svc-card.featured [style*="clamp(36px"] {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
}

@media (max-width: 480px) {
  .feat-badge-wrap span {
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }
  .feat-stats-grid {
    gap: 6px !important;
  }
  /* Stats text compact */
  .feat-stats-grid [style*="font-size:22px"] {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   N. AUTRES GRILLES — passage 1 colonne sur mobile
   ══════════════════════════════════════════════════════════
*/
@media (max-width: 768px) {
  /* Steps process — 2 colonnes max sur mobile */
  .steps {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Feature cards — 1 colonne sur mobile */
  .feature-cards-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }

  /* Avis grid — 1 colonne */
  .rev-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Formulaire — 1 colonne */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Modal */
  .modal-row {
    grid-template-columns: 1fr !important;
  }

  /* Section pourquoi — forcer 1 colonne */
  #pourquoi [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .steps {
    grid-template-columns: 1fr !important;
  }
  .rev-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Carousel avis — 1 slide visible sur mobile */
@media (max-width: 768px) {
  .rev-carousel-section {
    padding: 60px 0;
  }
  .rev-carousel-wrap {
    padding: 0 16px;
  }
  .rev-slide {
    flex: 0 0 100%;        /* 1 avis à la fois sur mobile */
    min-width: 0;
  }
  .rev-track-outer {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .rev-slide {
    flex: 0 0 100%;
    padding: 20px 16px;
  }
}

/* Sections avec padding latéral — évite tout débordement */
@media (max-width: 768px) {
  .photo-strip-inner,
  .newsletter-inner {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Grille booking — 1 colonne sur mobile */
  .booking-grid {
    grid-template-columns: 1fr !important;
  }

  /* Feature cards — scroll interne au lieu de déborder */
  .feature-cards-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  /* Steps — 1 colonne */
  .steps {
    flex-direction: column;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════
   Q. BOUTON "ESPACE CLIENT" — trop grand dans la nav mobile
   ══════════════════════════════════════════════════════════
   Le JS injecte ce bouton avec des styles inline.
   On utilise !important pour les surcharger sur mobile.
*/
@media (max-width: 768px) {
  #client-nav-slot a {
    padding: 7px 12px !important;
    font-size: 11px !important;
    gap: 4px !important;
    letter-spacing: .02em !important;
    box-shadow: none !important;
  }
}

@media (max-width: 480px) {
  /* Masquer le texte, garder seulement l'icône 👤 */
  #client-nav-slot a {
    padding: 6px 7px !important;
    font-size: 0 !important;
    max-width: 32px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border-radius: 50% !important;
    gap: 0 !important;
  }
  /* Remettre l'emoji à taille normale via pseudo-element trick */
  #client-nav-slot a::before {
    content: '👤';
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════════════
   R. SECTION SUPPORT "Nous serons là pour vous"
   ══════════════════════════════════════════════════════════
   .photo-strip-inner a flex-row avec image 300x300.
   Sur mobile l'image comprime le texte → mots sur lignes séparées.
   Fix : passer en colonne, masquer le logo.
*/
@media (max-width: 768px) {
  .photo-strip2 .photo-strip-inner {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
    padding: 48px 20px !important;
  }
  .photo-strip2 .photo-strip-inner > div:first-child {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Masquer le grand logo (300x300) sur mobile — trop encombrant */
  .community-img {
    display: none !important;
  }
  /* Boutons sociaux en colonne sur mobile */
  .photo-strip2 .photo-strip-inner [style*="flex-direction:row"],
  .photo-strip2 .photo-strip-inner [style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Titres et textes de la section */
  .ps-h {
    font-size: clamp(26px, 7vw, 42px) !important;
  }
  .ps-sub {
    max-width: 100% !important;
    font-size: 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   S. SECTION CTA ORANGE "Prêt à dominer"
   ══════════════════════════════════════════════════════════
   La section a un flex-row (texte + image PC 160px flex-shrink:0).
   Sur mobile l'image PC comprime le texte et "dominer" déborde.
   Fix : passer en colonne, masquer l'image PC.
*/
@media (max-width: 768px) {
  .cta-final {
    padding: 60px 20px !important;
  }
  /* Dépiler le flex-row → colonne */
  .cta-flex-row {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }
  /* Masquer l'image PC gaming sur mobile */
  .cta-flex-row img {
    display: none !important;
  }
  /* Texte centré */
  .cta-flex-row > div {
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  /* Boutons CTA — empiler en colonne */
  .cta-final-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .cta-final-btns .btn-w,
  .cta-final-btns .btn-w2 {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 13px !important;
    padding: 14px 24px !important;
  }
  /* Fix le ticker games en haut de la section */
  .cta-final > div[style*="margin:-80px -56px"] {
    margin: -60px -20px 30px !important;
  }
  /* Titre de la section */
  .cta-final h2 {
    font-size: clamp(32px, 9vw, 52px) !important;
    letter-spacing: -1px !important;
  }
}

@media (max-width: 480px) {
  .cta-final {
    padding: 48px 16px !important;
  }
  .cta-final > div[style*="margin:-80px -56px"] {
    margin: -48px -16px 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   T. SOCIAL PROOF TOAST — plus compact sur mobile
   ══════════════════════════════════════════════════════════
   Le toast #sp-toast est injecté par social-proof.js avec
   min-width:300px, padding:18px 22px et icon 52x52px.
   Sur mobile 375px il prend trop de place en bas à gauche.
*/
@media (max-width: 768px) {
  #sp-toast {
    left: 10px !important;
    bottom: 14px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    padding: 10px 12px 10px 10px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  #sp-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    min-width: 38px !important;
  }
  #sp-pack {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  #sp-action {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
  #sp-time {
    font-size: 10px !important;
    margin-top: 3px !important;
  }
}

@media (max-width: 480px) {
  #sp-toast {
    padding: 9px 10px 9px 9px !important;
    gap: 8px !important;
  }
  #sp-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 15px !important;
  }
  #sp-pack { font-size: 11px !important; }
  #sp-action { font-size: 9px !important; }
  #sp-time { font-size: 9px !important; }
}