/* =====================================================================
   WASATE CLOUD — Mobile UX polish (à charger EN DERNIER)
   ---------------------------------------------------------------------
   Ajustements ciblés pour l'expérience mobile sans toucher au design :
   - touch targets ≥ 44px (Apple/Google guideline)
   - inputs ≥ 16px pour bloquer l'auto-zoom iOS Safari
   - safe-area-inset pour iPhone à notch
   - tap-highlight propre
   - fix background-attachment fixed sur iOS
   ===================================================================== */

/* ----- Tap highlight propre (sinon flash bleu par défaut) */
a, button, [role="button"], .btn, input[type="submit"], input[type="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* ----- Boutons : tap target ≥ 44px */
.btn {
    min-height: 44px;
}
.btn-sm {
    min-height: 36px; /* OK pour boutons secondaires non-critiques */
}

/* ----- Inputs : font-size 16px sur mobile pour bloquer auto-zoom iOS */
@media (max-width: 768px) {
    .input, .textarea, .select,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="search"], input[type="number"],
    input[type="url"], textarea, select {
        font-size: 16px;
    }
    /* Boutons un peu plus grands sur mobile */
    .btn {
        font-size: var(--text-base);
        padding: var(--space-3) var(--space-5);
    }
}

/* ----- Safe area insets (iPhone notch / Android gesture bar) */
@supports (padding: max(0px)) {
    .site-header .container {
        padding-left: max(var(--space-6), env(safe-area-inset-left));
        padding-right: max(var(--space-6), env(safe-area-inset-right));
    }
    .site-footer {
        padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
    }
    .container, .container-narrow {
        padding-left: max(var(--space-6), env(safe-area-inset-left));
        padding-right: max(var(--space-6), env(safe-area-inset-right));
    }
}

/* ----- Fix iOS Safari : background-attachment fixed clignote au scroll */
@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll;
    }
}

/* ----- Hero : réduire l'espace vertical sur mobile (trop d'air sinon) */
@media (max-width: 720px) {
    .hero {
        padding: var(--space-12) 0 var(--space-12);
    }
    .hero .lead {
        font-size: var(--text-base);
    }
    .hero-cta .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Section padding réduit aussi */
    .section {
        padding: var(--space-12) 0;
    }
    .section-warm {
        padding: var(--space-12) 0;
    }
    /* Footer moins compact */
    .site-footer {
        margin-top: var(--space-16);
        padding-top: var(--space-12);
    }
}

/* ----- Focus ring plus visible sur mobile pour l'accessibilité */
@media (max-width: 720px) {
    .btn:focus-visible,
    .input:focus, .textarea:focus, .select:focus {
        outline-offset: 3px;
    }
}

/* ----- Empêcher overscroll horizontal accidentel */
html, body {
    overflow-x: hidden;
}

/* =====================================================================
   ANTI-DÉBORDEMENT UNIVERSEL (cause n°1 du "cassé" mobile)
   ===================================================================== */
/* Aucun média/élément large ne dépasse la largeur de son conteneur. */
img, video, iframe, canvas, svg, table, pre, blockquote {
    max-width: 100%;
}
img, video { height: auto; }
/* Mots/URLs très longs cassent au lieu de pousser la page en largeur. */
body, p, li, td, .card, .section-card {
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Décorations hors-flux (cercles/blobs ::before/::after) : on clippe pour
   supprimer le scroll horizontal fantôme — `clip` n'altère ni le sticky ni
   le layout (contrairement à overflow:hidden). */
.hero-premium, .final-cta, .stats-band {
    overflow-x: clip;
}

/* =====================================================================
   PALIER TABLETTE (769–1024px) — calibrage de l'entre-deux iPad
   ---------------------------------------------------------------------
   Purement additif : ne touche ni au mobile (≤720) ni au desktop (>1024).
   On resserre seulement les espacements desktop (trop aérés sur iPad) et
   on borne la typo du hero.
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container, .container-narrow {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
    .section, .section-warm, .section-cream {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
    /* Le hero desktop est souvent surdimensionné sur iPad portrait. */
    .hero-premium h1, .hero h1 {
        font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    }
    /* Cartes prix : 2 par ligne sur tablette (au lieu de 3 serrées ou 1). */
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ----- Réduction motion respect du système (a11y) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}