/* ============================================================
   responsive_mobile.css — Cohérence visuelle mobile (≤768px)
   Centralise les overrides mobile pour les 5 pages principales :
   index, legende-sylvania, store, inscription, download-options
   Utilise !important pour overrider les styles inline existants.
   ============================================================ */

/* ── Phase 2 : Typographie globale ── */
@media (max-width: 768px) {

    /* Titres : réduction proportionnelle pour ne pas déborder du viewport 375px */
    h1, .h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    h2, .h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    h3, .h3 { font-size: 1.25rem !important; line-height: 1.3 !important; }
    h4, .h4 { font-size: 1.1rem !important; }
    h5, .h5 { font-size: 1rem !important; }

    /* Body : garantir 16px minimum sur les inputs/labels pour éviter le zoom iOS */
    body { font-size: 15px; }
    input, select, textarea, .form-control { font-size: 16px !important; }
    label, .form-label { font-size: 0.95rem !important; }

    /* Texte justifié → aligné gauche (lisibilité mobile) */
    [style*="text-align: justify"],
    [style*="text-align:justify"] { text-align: left !important; }
}

/* ── Cartes & conteneurs ── */
@media (max-width: 768px) {

    /* Cartes globales : réduire padding */
    .card { padding: 16px !important; margin-bottom: 16px !important; }
    .card-header { padding: 14px 16px !important; margin: -16px -16px 16px -16px !important; }
    .card-body { padding: 16px !important; }
    .card-body.p-4, .card-body.p-md-5 { padding: 16px !important; }

    /* Bloc intro contenu (Légende, etc.) : padding réduit, max-width 100% */
    [style*="max-width: 850px"],
    [style*="max-width:850px"],
    [style*="max-width: 900px"],
    [style*="max-width:900px"] { max-width: 100% !important; }

    /* Paddings inline excessifs : 25px / 28px / 40px → 14-16px sur mobile */
    [style*="padding: 25px"],
    [style*="padding:25px"] { padding: 14px !important; }
    [style*="padding: 28px"],
    [style*="padding:28px"] { padding: 14px !important; }
    [style*="padding: 40px"],
    [style*="padding:40px"] { padding: 16px !important; }
}

/* ── Boutons ── */
@media (max-width: 768px) {

    /* Boutons standards : padding réduit */
    .btn { padding: 10px 18px !important; font-size: 0.95rem !important; }
    .btn-lg { padding: 12px 24px !important; font-size: 1rem !important; letter-spacing: 0.3px !important; }

    /* Cibler les boutons CTA aux paddings inline démesurés */
    .btn[style*="padding: 16px 40px"],
    .btn[style*="padding:16px 40px"],
    .btn[style*="padding: 15px 40px"],
    .btn[style*="padding:15px 40px"],
    .btn[style*="padding: 14px 28px"],
    .btn[style*="padding:14px 28px"] { padding: 12px 20px !important; }
}

/* ── Stats (modern_stats.css n'a pas de media query) ── */
@media (max-width: 768px) {
    .modern-stat-card { padding: 16px !important; }
    .modern-icon { width: 40px !important; height: 40px !important; }
    .stat-value { font-size: 1.4rem !important; }
    .stat-label { font-size: 0.7rem !important; }
}

/* ── Bannières Sylvania (Home) ── */
@media (max-width: 768px) {
    .sylvania-banner { padding: 16px !important; }
    .sylvania-banner h4 { font-size: 1.1rem !important; }
    .sylvania-banner p { font-size: 0.9rem !important; }
}

/* ── Phase 1 : Légende Sylvania — overrides spécifiques ── */
@media (max-width: 768px) {
    /* Icône couronne 6rem → 3.5rem */
    [style*="font-size: 6rem"],
    [style*="font-size:6rem"] { font-size: 3.5rem !important; margin-bottom: 15px !important; }

    /* H1 et H2 inline 3.5rem / 1.8rem déjà couverts par règles h1/h2 ci-dessus */

    /* Grilles col-md-6 sans col-12 explicite : forcer 1 colonne <768px (Bootstrap col-md = 768px, donc col-md-6 = déjà 100% sous 768px, mais on sécurise) */
    .row > [class*="col-md-6"] { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Bordures latérales 4px → 3px pour gagner de la place */
    [style*="border-left: 4px solid"] { border-left-width: 3px !important; }
}

/* ── Phase 4 : Store — éviter scroll horizontal ── */
@media (max-width: 768px) {
    .store-item { min-width: 0 !important; }
    .store-item.legendary { min-width: 0 !important; }

    /* Forcer col-12 sur grilles store qui n'ont que col-md-* / col-sm-* */
    .store-grid .row > [class*="col-md-"]:not([class*="col-12"]),
    .store-grid .row > [class*="col-sm-"]:not([class*="col-12"]) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── Phase 4 : Download — paddings inline ── */
@media (max-width: 768px) {
    /* .file-info, .download-btn déjà gérés par download-options.php inline media query */
    .launcher-nouveautes,
    .launcher-history { padding: 12px !important; }

    /* Liens download avec padding inline 28px */
    .download-options-page [style*="padding: 28px"] { padding: 14px !important; }
}

/* ── Petits écrans (≤375px : iPhone SE et plus petits) ── */
@media (max-width: 375px) {
    h1, .h1 { font-size: 1.75rem !important; }
    h2, .h2 { font-size: 1.35rem !important; }

    .btn { padding: 9px 14px !important; font-size: 0.9rem !important; }
    .btn-lg { padding: 11px 18px !important; font-size: 0.95rem !important; }

    .card,
    .card-body { padding: 12px !important; }

    .modern-icon { width: 36px !important; height: 36px !important; }
    .stat-value { font-size: 1.2rem !important; }
}