/**
 * PESTALY - Mobile Only (iPhone 12/13/14/15)
 * Corrections UNIQUEMENT pour mobile, SANS toucher au desktop
 */

/* ============================================================================
   MOBILE ONLY (< 768px) - iPhone 12 = 390px
   ============================================================================ */

@media (max-width: 767.98px) {
    
    /* Container avec padding adapté et équilibré */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }
    
    /* Badge Google : mieux centré */
    div[style*="display: inline-flex"][style*="background: #f8f4ef"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Sections avec padding vertical réduit et horizontal équilibré */
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Titres de sections : mieux espacés */
    .sc-title h2,
    section h2 {
        padding-left: 5px !important;
        padding-right: 15px !important;
    }
    
    .sc-title p,
    section > .container > p {
        padding-left: 5px !important;
        padding-right: 15px !important;
    }
    
    .sc-title small {
        padding-left: 5px !important;
    }
    
    /* Hero section plus compact */
    .hero-section,
    #main-banner {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }
    
    #main-banner .container,
    .hero-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    #main-banner h1,
    .hero-section h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        padding-right: 10px !important;
    }
    
    #main-banner p,
    #main-banner .lead,
    .hero-section p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
        padding-right: 10px !important;
    }
    
    /* Boutons tactiles (min 44x44px) */
    .btn {
        min-height: 44px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95rem !important;
        width: auto !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
    
    .btn-sm {
        min-height: 38px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Boutons larges (FAQ, etc.) : largeur normale comme les autres */
    .btn-lg,
    a.btn[href*="faq"],
    a.btn[href*="actualites"],
    a.btn[href*="conseils"] {
        width: auto !important;
        max-width: 320px !important;
        padding: 0.75rem 2rem !important;
        font-size: 0.95rem !important;
        min-height: 48px !important;
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Toutes les colonnes lg-4 à 100% sur mobile */
    .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    /* Toutes les colonnes md-6 lg-4 à 100% sur mobile */
    .col-md-6.col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    /* Toutes les colonnes md-4 à 100% sur mobile */
    .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    /* Toutes les colonnes md-6 à 100% sur mobile */
    .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Icônes plus petites sur mobile */
    .text-center i[style*="font-size: 2rem"],
    .text-center i[style*="font-size: 3rem"] {
        font-size: 2rem !important;
    }
    
    .text-center div[style*="width: 80px"] {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Titres des cartes */
    h3, .h3 {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h4, .h4 {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Paragraphes */
    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Texte dans les cartes : pleine largeur */
    .text-center p,
    .card-body p {
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Photos franchisés : 180px x 180px sur mobile */
    /* Cibler index.html (120px) ET agences.html (100px) */
    .company-card .card-header > div[style*="width: 120px"],
    .company-card .card-header > div[style*="height: 120px"],
    .company-card .card-header > div[style*="width: 100px"],
    .company-card .card-header > div[style*="height: 100px"],
    .agency-item .card-header > div[style*="width: 100px"] {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto 1rem !important;
        background: white !important;
        border: 6px solid white !important;
        overflow: hidden !important;
    }
    
    /* Image : ZOOM FORT + décalage gauche pour cacher blanc droite */
    .company-card .card-header img,
    .company-card img[src*="assets/photos"],
    .agency-item .card-header img,
    .agency-item img[src*="assets/photos"] {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 43% 30% !important;
        background: none !important;
        transform: scale(2.0) !important;
        transform-origin: 43% 30% !important;
        display: block !important;
    }
    
    /* Formulaires : pas sticky sur mobile */
    .sidebar-form,
    .sticky-box {
        position: static !important;
        margin-top: 2rem !important;
    }
    
    /* Tables responsive */
    table {
        font-size: 0.85rem !important;
    }
    
    /* ============================================================
       FOOTER - Accordéon sur mobile
       ============================================================ */
    
    /* Footer : colonnes 100% en vertical */
    footer .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
    
    /* Logo et description : toujours visible */
    footer .row > div:first-child {
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    
    /* Titres footer : style accordéon cliquable */
    footer h5 {
        position: relative !important;
        padding: 1rem 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        user-select: none !important;
    }
    
    /* Chevron accordéon */
    footer h5::after {
        content: '\f078' !important;
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: transform 0.3s ease !important;
        color: #4d8a81 !important;
    }
    
    /* Chevron quand ouvert */
    footer h5.active::after {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    
    /* Listes : masquées par défaut */
    footer ul {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Listes quand ouvertes */
    footer ul.active {
        max-height: 500px !important;
        padding: 1rem 0 !important;
    }
    
    /* Items de liste : meilleur espacement */
    footer ul li {
        margin-bottom: 0.75rem !important;
    }
    
    /* Social links : centré */
    footer .social-links {
        text-align: center !important;
    }
    
    /* Stats inline : force horizontal */
    .row.align-items-center.text-center > div {
        display: inline-block !important;
        width: auto !important;
        margin: 0 0.5rem !important;
    }
    
    /* Éviter le zoom iOS sur les inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Cards uniformes */
    .card {
        margin-bottom: 1.5rem !important;
    }
    
    /* ============================================================
       STATISTIQUES - Plus grandes sur mobile
       ============================================================ */
    
    /* Section stats */
    #stats .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Chiffres stats : plus grands */
    #stats p[style*="font-size: 3.5rem"],
    .number-box p {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Labels stats : plus grands */
    #stats span[style*="font-size: 1.1rem"],
    .number-box span {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* Colonnes stats : mieux espacées */
    #stats .col-12.col-sm-4 {
        margin-bottom: 2rem !important;
    }
    
    /* Spacing entre éléments */
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* Espacement des rows */
    .row.g-4,
    .row.g-5 {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    
    .row.g-4 > *,
    .row.g-5 > * {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Bouton "Voir toutes nos agences" centré et large */
    .btn-lg {
        width: 100% !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    /* Centrer les boutons sur mobile */
    .text-center .btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* ============================================================
       PAGE AGENCES - Formulaire de recherche
       ============================================================ */
    
    /* Section recherche : padding minimal */
    section[style*="background"] .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Bloc blanc : padding réduit et pleine largeur */
    [style*="background: white"][style*="border-radius"][style*="padding: 3rem"] {
        padding: 1.5rem 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Titre : plus petit et centré */
    [style*="background: white"] h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
        padding: 0 0.5rem !important;
    }
    
    /* Formulaire de recherche : vertical sur mobile et pleine largeur */
    form.d-flex {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Input de recherche : pleine largeur */
    form.d-flex .form-control {
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 12px !important;
        font-size: 0.95rem !important;
    }
    
    /* Boutons : empilés verticalement et pleine largeur */
    form.d-flex .btn {
        width: 100% !important;
        margin: 0 !important;
        font-size: 0.95rem !important;
        padding: 12px 1rem !important;
        white-space: normal !important;
        border-radius: 8px !important;
    }
    
    /* Texte d'info : plus petit, centré et mieux espacé */
    form + p {
        font-size: 0.75rem !important;
        margin-top: 0.75rem !important;
        line-height: 1.5 !important;
        padding: 0 0.5rem !important;
        text-align: center !important;
    }
    
    /* ============================================================
       PAGE POURQUOI NOUS - Carte "Depuis 2015" PLEINE LARGEUR
       ============================================================ */
    
    /* Colonne contenant la carte "Depuis 2015" : pleine largeur */
    .col-lg-6:has([style*="background: linear-gradient(135deg, #031d2a"]) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Carte "Depuis 2015" : pleine largeur, pas de border-radius */
    .col-lg-6 > div[style*="background: linear-gradient(135deg, #031d2a"] {
        padding: 2rem 1.5rem !important;
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    /* Icône : plus petite */
    [style*="background: linear-gradient(135deg, #031d2a"] i[style*="font-size: 4rem"] {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Titre : plus petit */
    [style*="background: linear-gradient(135deg, #031d2a"] h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Paragraphe : plus compact */
    [style*="background: linear-gradient(135deg, #031d2a"] p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Row des stats : espacer correctement */
    [style*="background: linear-gradient(135deg, #031d2a"] .row.text-center {
        margin-top: 1rem !important;
        gap: 0.5rem !important;
    }
    
    /* Colonnes stats : plus petites et mieux espacées */
    [style*="background: linear-gradient(135deg, #031d2a"] .col-4 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        padding: 0 0.25rem !important;
    }
    
    /* Stats chiffres : plus petites */
    [style*="background: linear-gradient(135deg, #031d2a"] .col-4 div[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Stats labels : plus petites */
    [style*="background: linear-gradient(135deg, #031d2a"] .col-4 div[style*="font-size: 0.9rem"] {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* ============================================================
       PAGE DÉTAIL AGENCE - Sidebar et cartes
       ============================================================ */
    
    /* Carte "Besoin d'une intervention rapide" : plus compacte */
    [style*="background: linear-gradient(135deg, #4d8a81"] {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    [style*="background: linear-gradient(135deg, #4d8a81"] i {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    [style*="background: linear-gradient(135deg, #4d8a81"] h4 {
        font-size: 1.15rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    [style*="background: linear-gradient(135deg, #4d8a81"] p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Bouton téléphone : plus visible et espacé */
    [style*="background: linear-gradient(135deg, #4d8a81"] .btn-light {
        font-size: 1.25rem !important;
        padding: 12px 24px !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Bouton "Voir tous les avis" : espacement */
    .btn[href*="avis-"],
    a.btn[href*="avis"] {
        margin-top: 1rem !important;
    }
    
    /* Carte "Nos garanties" : plus compacte */
    .mt-4[style*="background: white"][style*="padding: 2rem"] {
        padding: 1.5rem 1rem !important;
    }
    
    .mt-4[style*="background: white"] h4 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .mt-4[style*="background: white"] ul li {
        font-size: 0.9rem !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Formulaire "Devis gratuit" : optimisé */
    [style*="background: white"][style*="border-radius: 20px"] {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    [style*="background: white"][style*="border-radius: 20px"] h4 {
        font-size: 1.15rem !important;
    }
    
    [style*="background: white"][style*="border-radius: 20px"] .form-label {
        font-size: 0.9rem !important;
    }
    
    [style*="background: white"][style*="border-radius: 20px"] .form-control,
    [style*="background: white"][style*="border-radius: 20px"] .form-select {
        font-size: 0.9rem !important;
    }
    
    /* ============================================================
       PAGE CONTACT - Formulaire optimisé
       ============================================================ */
    
    /* Cacher la sidebar sur mobile (page contact) */
    .col-lg-4.d-none.d-lg-block {
        display: none !important;
    }
    
    /* Colonne formulaire : pleine largeur */
    .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Bloc formulaire : padding réduit et pleine largeur */
    #contactForm {
        padding: 0 !important;
    }
    
    #contactForm > div[style*="background: white"],
    div[style*="background: white"][style*="padding: 3rem"][style*="border-radius: 20px"] {
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
    }
    
    /* Titres sections : plus petits */
    #contactForm h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Labels : plus compacts */
    #contactForm .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    /* Inputs et selects : taille adaptée */
    #contactForm .form-control,
    #contactForm .form-select,
    #contactForm textarea {
        padding: 12px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
    
    /* Colonnes : 100% sur mobile */
    #contactForm .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Bouton submit : pleine largeur */
    #contactForm .btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1rem !important;
    }
    
    /* Séparateur : marge réduite */
    #contactForm hr {
        margin: 1rem 0 !important;
    }
    
    /* ============================================================
       PAGE CONTACT - Cartes "Trust Indicators"
       ============================================================ */
    
    /* Cartes confiance : 1 par ligne sur mobile */
    .row.g-3.mt-4 > .col-6.col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Icônes : plus petites */
    .row.g-3.mt-4 i[style*="font-size: 2rem"] {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Padding cartes : réduit */
    .row.g-3.mt-4 > div > div[style*="padding: 1.5rem"] {
        padding: 1.25rem !important;
    }
    
    /* ============================================================
       PAGE URGENCE - Optimisation mobile (padding réduit)
       ============================================================ */
    
    /* Container principal : padding minimal */
    body:has([href*="urgence.html"]) .container,
    [class*="urgence"] .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Section CTA urgence : padding réduit */
    section[style*="background: #f8f4ef"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    section[style*="background: #f8f4ef"] .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Section CTA urgence : titres adaptés */
    section[style*="background: #f8f4ef"] h2[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    section[style*="background: #f8f4ef"] p[style*="font-size: 1.2rem"] {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Bouton appel : pleine largeur et adapté */
    section[style*="background: #f8f4ef"] .btn-lg {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        font-size: 1rem !important;
        padding: 14px 20px !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    
    /* Points avec checks : vertical sur mobile */
    section[style*="background: #f8f4ef"] p[style*="margin-top: 2rem"] {
        font-size: 0.85rem !important;
        line-height: 2 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    section[style*="background: #f8f4ef"] p span[style*="margin: 0 1rem"] {
        display: none !important;
    }
    
    /* Formulaire urgence : padding réduit et pleine largeur */
    div[style*="background: white"][style*="padding: 3rem"][style*="border-radius: 20px"] {
        padding: 1.5rem 0.75rem !important;
        border-radius: 12px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    
    /* Titre formulaire : plus petit */
    div[style*="background: white"] h2[style*="font-size: 2rem"] {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Icône formulaire : plus petite */
    div[style*="width: 80px"][style*="height: 80px"] {
        width: 60px !important;
        height: 60px !important;
    }
    
    div[style*="width: 80px"] i[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
    }
    
    /* Logo footer : même taille que header mobile (40px) */
    footer img[src="Logo_Pestaly.png"],
    footer img[alt="Pestaly"] {
        height: 40px !important;
        width: auto !important;
    }
}

/* FIN du @media (max-width: 767.98px) - Mobile Only */