/* ==========================================================================
   PROFESSIONAL SHOW — MOBILE CSS
   Fichier : assets/css/professional-show-mobile.css
   Correctifs mobiles à inclure APRÈS professional-show.css
   ========================================================================== */


/* ════════════════════════════════════════════════
   1. RESET AVADA — pleine largeur sans débordement
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    #Content,
    #Content .content_wrapper,
    #Content .sections_group {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    #Content .section_wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #Content .items_group,
    #Content .column.one {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }
}


/* ════════════════════════════════════════════════
   2. HEADER PROFIL — layout colonne centré
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Réduit le padding top du header (navbar fixe) */
    #pro-header-section {
        padding: 80px 0 0 !important;
    }

    /* Card blanche/glassmorphism interne */
    #pro-header-section div[style*="padding: 40px"][style*="border-radius: 20px"] {
        padding: 20px 16px 20px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    /* Grille 3 colonnes → colonne unique centrée */
    #pro-header-section div[style*="grid-template-columns: auto 1fr auto"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center !important;
    }

    /* Logo / avatar */
    #pro-header-section div[style*="width: 120px; height: 120px"] {
        width: 90px !important;
        height: 90px !important;
        border-radius: 50% !important;
        border: 3px solid rgba(255,255,255,0.4) !important;
        box-shadow: 0 6px 24px rgba(0,0,0,0.25) !important;
        flex-shrink: 0 !important;
    }

    /* H1 nom */
    #pro-header-section h1[style*="font-size: 36px"] {
        font-size: 22px !important;
        margin: 4px 0 8px !important;
        text-align: center !important;
    }

    /* Badge catégorie */
    #pro-header-section div[style*="display: inline-block"][style*="border-radius: 8px"] {
        font-size: 12px !important;
        padding: 4px 12px !important;
        margin-bottom: 6px !important;
    }

    /* Ligne ville + téléphone */
    #pro-header-section div[style*="display: flex; flex-wrap: wrap; gap: 20px"] {
        justify-content: center !important;
        gap: 10px !important;
        font-size: 13px !important;
    }

    /* ── Bouton de réservation dans le header ──
       Caché sur mobile — remplacé par le sticky CTA bar
       géré par le JS (buildStickyCTA) */
    #pro-header-section div[style*="text-align: center"] > a[href*="booking"] {
        display: none !important;
    }

    /* Bloc "limite atteinte" — caché aussi (le sticky bar s'en charge) */
    #pro-header-section div[style*="background: linear-gradient(135deg, #fef3c7"] {
        display: none !important;
    }

    /* Vague de transition header → contenu */
   /* #pro-header-section::after {
        content: '';
        display: block;
        height: 24px;
        background: #f8fafc;
        border-radius: 20px 20px 0 0;
        margin-top: 20px;
    }*/
}


/* ════════════════════════════════════════════════
   3. STICKY CTA BAR — barre fixe en bas d'écran
   Injectée par professional-show.js → buildStickyCTA()
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    body.has-sticky-cta {
        padding-bottom: 72px !important;
    }

    #sticky-cta-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 500 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        background: white !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
        border-top: 1px solid #e2e8f0 !important;
        box-sizing: border-box !important;
    }

    /* Nom du prestataire — tronqué */
    #sticky-cta-bar .sticky-pro-name {
        flex: 1 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #2d3748 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    /* Bouton appel */
    #sticky-cta-bar .sticky-phone-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: #f1f5f9 !important;
        border: 2px solid #e2e8f0 !important;
        text-decoration: none !important;
        font-size: 20px !important;
        flex-shrink: 0 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background 0.2s !important;
    }

    #sticky-cta-bar .sticky-phone-btn:active {
        background: #e2e8f0 !important;
        transform: scale(0.96) !important;
    }

    /* Bouton réserver */
    #sticky-cta-bar .sticky-book-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 0 20px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: var(--pro-accent, #8b5cf6) !important;
        color: white !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        transition: opacity 0.2s !important;
    }

    #sticky-cta-bar .sticky-book-btn:active {
        opacity: 0.85 !important;
        transform: scale(0.97) !important;
    }
}


/* ════════════════════════════════════════════════
   4. CTA FINAL EN BAS DE PAGE — illisible corrigé
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Section violette finale */
    .section[style*="background: linear-gradient(135deg, #667eea"] {
        padding: 40px 0 !important;
    }

    .section[style*="background: linear-gradient(135deg, #667eea"] .section_wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Titre */
    .section[style*="background: linear-gradient(135deg, #667eea"] h2 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
        color: white !important;
    }

    /* Sous-titre */
    .section[style*="background: linear-gradient(135deg, #667eea"] p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        color: rgba(255,255,255,0.9) !important;
    }

    /* Conteneur boutons → colonne */
    .section[style*="background: linear-gradient(135deg, #667eea"] div[style*="display: flex"][style*="gap: 16px"] {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    /* Tous les boutons CTA final — lisibles et pleine largeur */
    .section[style*="background: linear-gradient(135deg, #667eea"] a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        border: none !important;
    }

    /* Bouton "Réserver en ligne" — fond blanc, texte violet */
    .section[style*="background: linear-gradient(135deg, #667eea"] a[style*="background: white"] {
        background: white !important;
        color: #667eea !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    }

    /* Boutons "Appeler" et "Email" — fond blanc semi-transparent, texte blanc */
    .section[style*="background: linear-gradient(135deg, #667eea"] a[style*="rgba(255,255,255,0.2)"] {
        background: rgba(255,255,255,0.25) !important;
        color: white !important;
        border: 2px solid rgba(255,255,255,0.4) !important;
        backdrop-filter: blur(8px) !important;
    }

    /* Safe area iPhone */
    .section[style*="background: linear-gradient(135deg, #667eea"] {
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }
}


/* ════════════════════════════════════════════════
   5. PHOTOSWIPE — espace vide en haut corrigé
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Fond noir plein écran */
    .pswp {
        --pswp-bg: #000 !important;
    }

    /* Supprime tout padding/offset vertical */
    .pswp__scroll-wrap,
    .pswp__container,
    .pswp__item {
        padding-top: 0 !important;
        top: 0 !important;
    }

    /* Image en contain — affiche l'entièreté sans rogner */
    .pswp img.pswp__img {
        object-fit: contain !important;
        object-position: center center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Barre du haut */
    .pswp__top-bar {
        top: env(safe-area-inset-top, 0) !important;
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.6),
            transparent
        ) !important;
    }

    /* L'espace noir en haut vient du zoom-wrap
       qui ne centre pas correctement sur mobile */
    .pswp__zoom-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
}


/* ════════════════════════════════════════════════
   6. GALERIE VIEWER — corrections mobile
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .pg-viewer {
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
        max-height: none !important;
    }

    .pg-main-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        max-height: none !important;
    }

    .pg-thumb {
        width: 68px !important;
        height: 51px !important;
        border-radius: 8px !important;
    }

    .pg-strip {
        justify-content: flex-start !important;
        padding: 4px 4px !important;
    }
}

@media (max-width: 480px) {
    .pg-viewer {
        aspect-ratio: 1 / 1 !important;
    }

    .pg-thumb {
        width: 56px !important;
        height: 56px !important;
    }
}


/* ════════════════════════════════════════════════
   7. SECTIONS GÉNÉRALES — padding/margin mobile
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Toutes les sections avec padding 40px 20px */
    .section[style*="padding: 40px 20px"] {
        padding: 24px 0 !important;
    }

    .section[style*="padding: 40px 20px"] .section_wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Titres h2 de section */
    h2[style*="font-size: 28px"] {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }
}


/* ════════════════════════════════════════════════
   8. BREADCRUMB
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .breadcrumb {
        padding: 12px 16px 0 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
}


/* ════════════════════════════════════════════════
   9. INFOS PRATIQUES — grille → colonne
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .info-card-v2 {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .info-card-v2:hover {
        transform: none !important;
    }

    .card-icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }

    .card-icon { font-size: 26px !important; }
    .card-title { font-size: 18px !important; margin-bottom: 16px !important; }

    .card-action-btn {
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        width: 100% !important;
    }
}


/* ════════════════════════════════════════════════
   10. HORAIRES
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    div[style*="background: #f7fafc"][style*="padding: 30px"][style*="border-left: 4px solid #3b82f6"] {
        padding: 16px !important;
        border-radius: 12px !important;
    }
}


/* ════════════════════════════════════════════════
   11. AVIS — header stats + formulaire
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .reviews-header-wrapper {
        padding: 20px 16px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
    }

    .reviews-stats-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .average-rating-block {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .rating-number { font-size: 56px !important; }

    .rating-bar-row {
        grid-template-columns: 52px 1fr 64px !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .review-form-wrapper { margin: 16px 0 !important; }
    .form-header-premium  { padding: 24px 16px !important; }
    .review-form-premium  { padding: 20px 16px !important; gap: 20px !important; }
    .form-title-premium   { font-size: 22px !important; }

    .form-section {
        grid-template-columns: 32px 1fr !important;
        gap: 10px !important;
    }

    .section-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .star-rating-premium  { gap: 6px !important; }
    .star-btn             { padding: 10px 4px !important; min-height: 60px !important; border-radius: 10px !important; }
    .star-btn .star-icon  { font-size: 20px !important; }
    .star-label           { display: none !important; }

    .input-group-modern   { grid-template-columns: 1fr !important; gap: 12px !important; }

    .reviews-list-container {
        padding: 20px 16px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .reviews-list-header  { flex-direction: column !important; gap: 12px !important; }
    .reviews-list-title   { font-size: 20px !important; }
    .reviews-filters      { width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 4px !important; }

    .filter-btn { white-space: nowrap !important; padding: 8px 14px !important; font-size: 13px !important; }

    .review-card-premium  { padding: 16px !important; border-radius: 12px !important; }

    .review-card-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .reviewer-avatar { width: 44px !important; height: 44px !important; }
    .avatar-initials { font-size: 16px !important; }
    .reviewer-name   { font-size: 15px !important; }
    .review-rating-stars { font-size: 16px !important; }
    .review-comment  { font-size: 14px !important; }
}


/* ════════════════════════════════════════════════
   12. SERVICES — onglets + cards
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .services-tabs-wrapper { border-radius: 12px !important; }
    .services-tabs-nav     { scrollbar-width: none !important; }
    .services-tabs-nav::-webkit-scrollbar { display: none !important; }

    .service-tab-btn {
        min-width: 100px !important;
        padding: 12px 12px !important;
        font-size: 12px !important;
    }

    .tab-icon  { font-size: 16px !important; }
    .tab-label { font-size: 12px !important; }
    .tab-count { font-size: 11px !important; }

    .services-tabs-content { padding: 12px !important; }

    .service-card {
        padding: 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .service-card h4 { font-size: 16px !important; }

    .service-book-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
    }
}


/* ════════════════════════════════════════════════
   13. RÉSEAUX SOCIAUX
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .social-card-mobile-fix {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .social-links-fix {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .social-links-fix a {
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}


/* ════════════════════════════════════════════════
   14. FEEDBACK TACTILE
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .info-card-v2:active,
    .filter-btn:active,
    .service-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* Désactive les hovers desktop sur mobile */
    .service-card:hover,
    .info-card-v2:hover,
    .review-card-premium:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}


/* ════════════════════════════════════════════════
   15. SAFE AREA — notch / Dynamic Island
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Le sticky CTA gère déjà son propre padding-bottom */
    .section:last-child {
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }
}