/* =====================================================
   HAURANA — CORRECTIONS MOBILES GLOBALES v2.1
   Appliqué sur toutes les pages via <link>
   ===================================================== */

/* ── 1. ANTI-OVERFLOW HORIZONTAL ──────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    section, .hero, .page-hero, main {
        overflow-x: hidden;
    }
}

/* ── 2. NAVBAR STABLE ──────────────────────────────── */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

/* ── 3. BOUTONS FLOTTANTS — ESPACEMENT GÉNÉREUX ────── */
/*
   Empilement depuis le bas avec 12px d'air entre chaque bouton :
   bottom: 20px  (h:56px)  → Chat      → top à 76px
   bottom: 88px  (h:52px)  → SOS       → top à 140px  (gap: 12px)
   bottom: 152px (h:52px)  → Stress    → top à 204px  (gap: 12px)
*/

/* ── BULLES FLOTTANTES — gérées par le stack #haurana-fab-stack ──
   Le stack se positionne automatiquement, on ne surcharge pas les positions.
   On corrige seulement la fenêtre chat et le panel stress.
*/

/* Fenêtre chat — s'ouvre à gauche des bulles, au-dessus du sticky CTA */
#haurana-chat-window {
    bottom: 80px !important;
    right: 84px !important;
    width: calc(100vw - 100px) !important;
    max-width: 340px !important;
    z-index: 8989 !important;
}

/* Panel stress — à gauche des bulles */
#haurana-stress-panel {
    right: 84px !important;
    bottom: 80px !important;
    width: calc(100vw - 100px) !important;
    max-width: 280px !important;
}

/* Tooltips — cachées sur mobile */
@media (max-width: 768px) {
    .sos-tooltip,
    .stress-tooltip {
        display: none !important;
    }
}

/* ── 4. GRIDS → 1 COLONNE SUR MOBILE ──────────────── */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .hero-visual,
    .dashboard-mockup,
    .floating-card {
        display: none !important;
    }

    .hero {
        padding: 90px 0 40px !important;
    }

    .hero-title, h1.hero-title {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .btn-primary,
    .btn-nav-cta,
    a.btn-primary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.95rem !important;
        padding: 0.9rem 1.25rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .email-capture {
        width: 100% !important;
    }

    .email-capture > div {
        flex-direction: column !important;
    }

    .social-proof {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .section-title {
        font-size: 1.6rem !important;
    }

    .features-grid,
    .problem-grid,
    .sessions-grid,
    .exercises-grid,
    .articles-grid,
    .tips-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .footer-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .footer-nav div,
    .footer-links-row {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .cta-title {
        font-size: 1.6rem !important;
    }

    .explore-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 5. PAGES SECONDAIRES MOBILE ────────────────────── */
@media (max-width: 768px) {
    .page-hero {
        padding: 90px 0 2rem !important;
    }

    .page-hero h1 {
        font-size: 1.7rem !important;
        line-height: 1.25 !important;
    }

    .page-hero p {
        font-size: 0.95rem !important;
    }

    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px;
    }

    .tabs::-webkit-scrollbar { display: none; }

    .tab-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .session-card,
    .exercise-card,
    .article-card,
    .tip-card {
        width: 100% !important;
        margin: 0 !important;
    }

    .nav-links {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ── 6. PLAYER MODAL MOBILE ─────────────────────────── */
@media (max-width: 768px) {
    .player-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .player-modal {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1.25rem 1rem 2rem !important;
    }

    .breathing-circle {
        width: 90px !important;
        height: 90px !important;
        font-size: 0.8rem !important;
    }

    .timer-circle {
        width: 110px !important;
        height: 110px !important;
    }

    .timer-display {
        font-size: 1.8rem !important;
    }

    .player-emoji {
        font-size: 2rem !important;
        margin-bottom: 0.4rem !important;
    }

    .player-controls {
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .ctrl-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    .ctrl-primary {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.2rem !important;
    }

    .sound-btn {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* ── 7. MODAL EXERCICES MOBILE ──────────────────────── */
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-box {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        width: 100% !important;
    }
}

/* ── 8. BANNIÈRE RGPD MOBILE ────────────────────────── */
@media (max-width: 768px) {
    #haurana-rgpd-banner {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .rgpd-actions {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 9. SCROLL INDICATOR ────────────────────────────── */
.scroll-indicator {
    display: none !important;
}

@media (min-width: 769px) {
    .scroll-indicator {
        display: flex !important;
    }
}

/* ── 10. CHATBOT WINDOW MOBILE — ANTI-ZOOM CLAVIER ──── */
/*
   Règle critique iOS/Android :
   font-size >= 16px sur les <input> empêche le zoom automatique du navigateur.
   position: fixed sur la fenêtre empêche le scroll involontaire.
*/

/* Fenêtre chat — fixe en bas, stable même quand clavier ouvert */
#haurana-chat-window {
    position: fixed !important;
    /* Ne pas utiliser bottom dynamique sur mobile — rester ancré */
}

/* Input anti-zoom iOS : font-size minimum 16px */
#haurana-chat-window input,
#haurana-chat-window textarea,
#chat-input,
.chat-input-area input,
.chat-input-area textarea {
    font-size: 16px !important;    /* CRITIQUE : empêche zoom iOS Safari */
    -webkit-text-size-adjust: 100% !important;
}

/* Sur mobile : fenêtre chat plein écran pour éviter les conflits clavier */
@media (max-width: 480px) {
    #haurana-chat-window {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        z-index: 99990 !important;
        display: none;
    }

    /* Quand ouvert */
    #haurana-chat-window.open,
    #haurana-chat-window[style*="flex"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Zone de saisie collée au bas, au-dessus du clavier */
    .chat-input-area {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
        flex-shrink: 0 !important;
    }

    /* Messages scrollables */
    #chat-messages,
    .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    /* Empêcher que le body scroll quand chat ouvert */
    body.chat-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    #haurana-stress-panel {
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
        bottom: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* ── 11. STICKY MOBILE CTA ───────────────────────────── */
@media (max-width: 768px) {
    body { padding-bottom: 64px !important; }
    body:not([data-page="index"]) { padding-bottom: 0 !important; }
    body.chat-open .sticky-mobile-cta { display: none !important; }
}

/* ── 12. NOUVELLES SECTIONS — RESPONSIVE MOBILE ─────── */
@media (max-width: 768px) {

    .how-steps {
        grid-template-columns: 1fr !important;
    }
    .how-steps::before { display: none !important; }

    .faq-grid {
        grid-template-columns: 1fr !important;
    }

    .fidel-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .badges-row {
        gap: 0.6rem !important;
    }
    .badge-pill {
        padding: 0.4rem 0.7rem !important;
    }
    .badge-pill-info strong { font-size: .7rem; }
    .badge-pill-info span { font-size: .6rem; }

    .sources-bar {
        padding: 0.75rem 1rem !important;
    }
    .source-chip {
        font-size: .65rem !important;
        padding: .2rem .55rem !important;
    }

    .how-section [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    .demo-screen {
        height: 380px !important;
    }
    .ds-phone {
        width: 230px !important;
    }

    .fidelisation-section .section-title {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 400px) {
    .fidel-grid { grid-template-columns: 1fr !important; }
    .demo-screen { height: 340px !important; }
}

/* ── 13. TOUCH TARGETS iOS/Android ──────────────────── */
@media (max-width: 768px) {
    button, .btn-primary, .btn-secondary, .deo-btn, .ds6-cta {
        min-height: 44px;
    }

    .stat-src {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    .faq-card {
        padding: 1.1rem !important;
    }

    .tooltip-src {
        display: none !important;
    }
}

/* ── 14. SCROLL SMOOTH iOS ───────────────────────────── */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ── 15. PROGRAMME PHÉNIX — FIX MOBILE COMPLET ──────── */
@media (max-width: 768px) {

    /* Conteneur principal */
    .phenix-container,
    .program-container,
    [class*="phenix"],
    [id*="phenix"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Header programme */
    .program-header,
    .phenix-header {
        padding: 1.25rem 1rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center !important;
    }

    /* Stats bar programme (streak, jours...) */
    .stats-row,
    .program-stats,
    .streak-bar {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: center !important;
    }

    .stat-card,
    .streak-card {
        flex: 1 1 calc(50% - 0.75rem) !important;
        min-width: 120px !important;
        max-width: 48% !important;
    }

    /* Grille des jours — 2 colonnes max sur mobile */
    .days-grid,
    .weeks-grid,
    .program-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
        padding: 0 0.5rem !important;
    }

    /* Semaines tabs — scrollable horizontal */
    .weeks-tabs,
    .semaines-nav,
    .program-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }
    .weeks-tabs::-webkit-scrollbar { display: none; }

    .week-tab,
    .semaine-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 0.78rem !important;
        padding: 0.45rem 0.85rem !important;
    }

    /* Carte de jour */
    .day-card,
    .jour-card {
        padding: 0.85rem !important;
        font-size: 0.8rem !important;
    }

    /* Badges grid → 2 colonnes */
    .badges-grid,
    .badge-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .badge-item {
        padding: 0.85rem 0.6rem !important;
        font-size: 0.75rem !important;
    }

    .badge-item .badge-emoji { font-size: 1.8rem !important; }

    /* Modale détail jour */
    .day-modal,
    .jour-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        padding: 1.5rem 1rem 2rem !important;
        bottom: 0 !important;
        top: auto !important;
        position: fixed !important;
    }

    /* Journal de bord */
    .journal-textarea,
    .journal-input {
        font-size: 16px !important;  /* anti-zoom iOS */
        width: 100% !important;
    }

    /* Texte titre section */
    .phenix-title,
    .program-title {
        font-size: 1.5rem !important;
    }
}

/* ── 16. FIX CHATBOT ZOOM CLAVIER — JAVASCRIPT PATCH ── */
/*
   Le JS dans widgets.js doit gérer visualViewport.
   Ce CSS stabilise les éléments fixes pendant le resize.
*/
@media (max-width: 768px) {
    /* Empêcher le layout shift lors de l'ouverture du clavier */
    #haurana-chat-window {
        /* Utiliser dvh pour tenir compte du clavier virtuel */
        max-height: 100dvh !important;
    }

    /* Boutons flottants — ne pas bouger quand clavier s'ouvre */
    #haurana-chat-btn,
    #haurana-sos-btn,
    #haurana-stress-fab {
        position: fixed !important;
        /* bottom défini plus haut */
        /* transform: none — éviter les conflits avec les animations */
    }
}


/* ── 1. ANTI-OVERFLOW HORIZONTAL ──────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    /* PAS de overflow-y: hidden — la page doit défiler verticalement */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Force tous les containers à ne pas dépasser — sans couper le contenu */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    /* overflow: hidden supprimé — il cachait le contenu mobile ! */
}

/* Éléments à position absolue sur mobile — éviter le débordement */
@media (max-width: 768px) {
    section, .hero, .page-hero, main {
        overflow-x: hidden;
    }
}

/* ── 2. NAVBAR STABLE ──────────────────────────────── */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

/* ── 3. BOUTONS FLOTTANTS — EMPILEMENT VERTICAL ───── */
/*
   Ordre vertical depuis le bas (spacing 16px entre chaque) :
   bottom: 24px  → Chatbot (bleu-vert, index.html seulement)
   bottom: 100px → SOS (rouge)
   bottom: 168px → Stress thermomètre (bleu-vert)
*/

/* Chatbot — bottom: 20px right: 16px */
#haurana-chat-btn {
    bottom: 20px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 8990 !important;
}

#haurana-chat-window {
    bottom: 88px !important;
    right: 16px !important;
    width: calc(100vw - 40px) !important;
    max-width: 360px !important;
    z-index: 8989 !important;
}

/* Stack géré par widgets.js — pas de surcharge des positions individuelles */

/* Tooltips — cachées sur mobile pour éviter l'overflow */
@media (max-width: 768px) {
    .sos-tooltip,
    .stress-tooltip {
        display: none !important;
    }
}

/* ── 4. GRIDS → 1 COLONNE SUR MOBILE ──────────────── */
@media (max-width: 768px) {
    /* Hero 2 colonnes → 1 colonne */
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Cacher l'illustration desktop sur mobile */
    .hero-visual,
    .dashboard-mockup,
    .floating-card {
        display: none !important;
    }

    /* Hero padding réduit */
    .hero {
        padding: 90px 0 40px !important;
    }

    /* Titres responsive */
    .hero-title, h1.hero-title {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    /* Boutons pleine largeur sur mobile */
    .btn-primary,
    .btn-nav-cta,
    a.btn-primary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.95rem !important;
        padding: 0.9rem 1.25rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Email capture */
    .email-capture {
        width: 100% !important;
    }

    .email-capture > div {
        flex-direction: column !important;
    }

    /* Social proof */
    .social-proof {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    /* Stats bar */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Section titles */
    .section-title {
        font-size: 1.6rem !important;
    }

    /* Features / Problems grid */
    .features-grid,
    .problem-grid,
    .sessions-grid,
    .exercises-grid,
    .articles-grid,
    .tips-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer links */
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    /* Footer nav wrapping */
    .footer-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .footer-nav div,
    .footer-links-row {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    /* CTA section */
    .cta-title {
        font-size: 1.6rem !important;
    }

    /* Explore cards */
    .explore-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 5. PAGES SECONDAIRES MOBILE ────────────────────── */
@media (max-width: 768px) {
    /* Page hero */
    .page-hero {
        padding: 90px 0 2rem !important;
    }

    .page-hero h1 {
        font-size: 1.7rem !important;
        line-height: 1.25 !important;
    }

    .page-hero p {
        font-size: 0.95rem !important;
    }

    /* Tabs horizontaux scrollables */
    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px;
    }

    .tabs::-webkit-scrollbar { display: none; }

    .tab-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Cards */
    .session-card,
    .exercise-card,
    .article-card,
    .tip-card {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Nav links cachés sur mobile */
    .nav-links {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ── 6. PLAYER MODAL MOBILE ─────────────────────────── */
@media (max-width: 768px) {
    .player-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .player-modal {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1.25rem 1rem 2rem !important;
    }

    /* Réduire éléments pour que tout rentre */
    .breathing-circle {
        width: 90px !important;
        height: 90px !important;
        font-size: 0.8rem !important;
    }

    .timer-circle {
        width: 110px !important;
        height: 110px !important;
    }

    .timer-display {
        font-size: 1.8rem !important;
    }

    .player-emoji {
        font-size: 2rem !important;
        margin-bottom: 0.4rem !important;
    }

    .player-controls {
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .ctrl-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    .ctrl-primary {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.2rem !important;
    }

    .sound-btn {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* ── 7. MODAL EXERCICES MOBILE ──────────────────────── */
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-box {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        width: 100% !important;
    }
}

/* ── 8. BANNIÈRE RGPD MOBILE ────────────────────────── */
@media (max-width: 768px) {
    #haurana-rgpd-banner {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .rgpd-actions {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 9. SCROLL INDICATOR ────────────────────────────── */
.scroll-indicator {
    display: none !important;
}

@media (min-width: 769px) {
    .scroll-indicator {
        display: flex !important;
    }
}

/* ── 10. CHATBOT WINDOW MOBILE ──────────────────────── */
/* Géré par la section plus haut — pas de surcharge ici */

/* ── 11. STICKY MOBILE CTA — espace bas de page ──────── */
@media (max-width: 768px) {
    /* Compenser le CTA sticky en bas */
    body { padding-bottom: 64px !important; }

    /* Sur les pages sans sticky CTA (pages légales etc.) */
    body:not([data-page="index"]) { padding-bottom: 0 !important; }

    /* Masquer le sticky quand chat ouvert */
    body.chat-open .sticky-mobile-cta { display: none !important; }
}

/* ── 12. NOUVELLES SECTIONS — RESPONSIVE MOBILE ─────── */
@media (max-width: 768px) {

    /* How section steps → vertical */
    .how-steps {
        grid-template-columns: 1fr !important;
    }
    .how-steps::before { display: none !important; }

    /* FAQ grid → 1 col */
    .faq-grid {
        grid-template-columns: 1fr !important;
    }

    /* Fidélisation grid → 2 cols */
    .fidel-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Badges row → wrap centré */
    .badges-row {
        gap: 0.6rem !important;
    }
    .badge-pill {
        padding: 0.4rem 0.7rem !important;
    }
    .badge-pill-info strong { font-size: .7rem; }
    .badge-pill-info span { font-size: .6rem; }

    /* Sources chips */
    .sources-bar {
        padding: 0.75rem 1rem !important;
    }
    .source-chip {
        font-size: .65rem !important;
        padding: .2rem .55rem !important;
    }

    /* How-step garanties grid → 1 col */
    .how-section [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* Section demo screen */
    .demo-screen {
        height: 380px !important;
    }
    .ds-phone {
        width: 230px !important;
    }

    /* Fidélisation section title */
    .fidelisation-section .section-title {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 400px) {
    .fidel-grid { grid-template-columns: 1fr !important; }
    .demo-screen { height: 340px !important; }
}

/* ── 13. TOUCH TARGETS iOS/Android ──────────────────── */
@media (max-width: 768px) {
    /* Boutons minimums 44px (Apple HIG) */
    button, .btn-primary, .btn-secondary, .deo-btn, .ds6-cta {
        min-height: 44px;
    }

    /* Stat-src (badge source) — tap target agrandi */
    .stat-src {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    /* FAQ cards — tap confortable */
    .faq-card {
        padding: 1.1rem !important;
    }

    /* Tooltip sources → désactivé sur mobile (tap ouvre la source) */
    .tooltip-src {
        display: none !important;
    }
}

/* ── 14. SCROLL SMOOTH iOS ───────────────────────────── */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}