/* Optimisations mobiles pour la page d'accueil - La Cristallerie */

/* Modification de la couleur de "SÈVRES. VIVRE AUX PORTES DE PARIS." pour correspondre à celle de "RÉSIDENCE. UNE SIGNATURE LOFT DESIGN." */
.sevres-intro {
    color: #a67c52 !important;
}

/* Styles pour la section hero */
.hero {
    min-height: 100vh !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

/* Éliminer la bande blanche entre hero et main */
main {
    margin-top: -1px !important;
}

/* Les styles pour le titre de transformation sont maintenant dans new-transformation-title.css */

/* Correction du bouton de disponibilités pour garantir qu'il fonctionne correctement */
.disponibilites-btn {
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
    display: inline-block !important;
    pointer-events: auto !important;
}

.disponibilites-decorative {
    pointer-events: none !important;
}

.signature-top {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* Ajustement de la position pour s'assurer que le titre est visible */
.transformation-title {
    position: relative;
    padding-top: 10px !important;
}

/* Correction radicale des problèmes de débordement du logo dans la section hero */
@media (max-width: 767px) {
    .main-title img {
        max-width: 90% !important;
        width: auto !important;
        height: auto !important;
    }
    
    .hero-content {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero {
        padding: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        height: 90vh !important; /* Réduire la hauteur pour éviter les débordements */
    }
    
    /* Éliminer tout espace entre hero et transformation */
    main {
        margin-top: -1px !important;
    }
    
    /* Garantir que la section transformation est bien visible */
    .transformation {
        padding-top: 80px !important;
    }
    
    /* Ajuster la position du texte signature-top */
    .signature-top {
        margin-top: 0 !important;
        padding-top: 30px !important;
        z-index: 5 !important;
        position: relative !important;
    }
}

/* Correction spécifique pour les très petits écrans */
@media (max-width: 375px) {
    .main-title img {
        max-width: 85% !important;
    }
    
    /* Ajustement supplémentaire pour le titre LA TRANSFORMATION sur les très petits écrans */
    .transformation-title .line1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    
    .transformation-title .line2 {
        font-size: 16px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
}

/* Breakpoints multiples pour une adaptation optimale sur tous les formats d'écran */

/* Grands écrans (1440px - 1920px) */
@media (min-width: 1440px) and (max-width: 1920px) {
    .transformation-title .line1 {
        font-size: 46px;
    }
    
    .transformation-title .line2 {
        font-size: 38px;
    }
    
    .re-architecture-title .line1 {
        font-size: 46px;
    }
    
    .re-architecture-title .moderniser {
        font-size: 38px;
    }
    
    .confort-unique h2 {
        font-size: 46px;
    }
    
    .sevres-title h2 {
        font-size: 46px;
    }
    
    .disponibilites-title {
        font-size: 46px;
    }
}

/* Écrans moyens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .transformation-title .line1 {
        font-size: 42px;
    }
    
    .transformation-title .line2 {
        font-size: 34px;
    }
    
    .re-architecture-title .line1 {
        font-size: 42px;
    }
    
    .re-architecture-title .moderniser {
        font-size: 34px;
    }
    
    .confort-unique h2 {
        font-size: 42px;
    }
    
    .sevres-title h2 {
        font-size: 42px;
    }
    
    .disponibilites-title {
        font-size: 42px;
    }
    
    .transformation-quote h3 {
        font-size: 22px;
        line-height: 1.4;
    }
}

/* Tablettes larges (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .transformation-title .line1 {
        font-size: 38px;
    }
    
    .transformation-title .line2 {
        font-size: 30px;
        white-space: normal;
    }
    
    .re-architecture-title .line1 {
        font-size: 38px;
    }
    
    .re-architecture-title .moderniser {
        font-size: 30px;
    }
    
    .confort-unique h2 {
        font-size: 38px;
        line-height: 1.2;
    }
    
    .sevres-title h2 {
        font-size: 38px;
    }
    
    .sevres-title .effervescence {
        font-size: 30px;
    }
    
    .disponibilites-title {
        font-size: 38px;
    }
    
    .transformation-quote h3 {
        font-size: 20px;
        line-height: 1.4;
        padding: 0 20px;
    }
    
    /* Ajustement des espacements */
    .transformation-title {
        margin-bottom: 40px;
    }
    
    .transformation-content {
        gap: 40px;
    }
}

/* Tablettes (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .transformation-title .line1 {
        font-size: 34px;
    }
    
    .transformation-title .line2 {
        font-size: 26px;
        white-space: normal;
        letter-spacing: 0;
    }
    
    .re-architecture-title .line1 {
        font-size: 34px;
    }
    
    .re-architecture-title .moderniser {
        font-size: 26px;
        letter-spacing: 0;
    }
    
    .confort-unique h2 {
        font-size: 34px;
        line-height: 1.2;
    }
    
    .confort-unique .subtitle {
        font-size: 14px;
    }
    
    .sevres-title h2 {
        font-size: 34px;
        line-height: 1.2;
    }
    
    .sevres-title .effervescence {
        font-size: 26px;
        display: block;
        margin-top: 10px;
    }
    
    .disponibilites-title {
        font-size: 34px;
        line-height: 1.2;
    }
    
    .transformation-quote h3 {
        font-size: 18px;
        line-height: 1.4;
        padding: 0 15px;
    }
    
    /* Ajustement des espacements */
    .transformation-title {
        margin-bottom: 30px;
        margin-top: 40px;
    }
    
    .transformation-content {
        gap: 30px;
        margin-top: 50px;
    }
    
    .signature-top {
        margin-bottom: 30px;
        margin-top: 30px;
    }
    
    /* Amélioration de l'interlignage */
    .transformation-title h2,
    .re-architecture-title,
    .sevres-title h2,
    .disponibilites-title {
        line-height: 1.3;
    }
}

/* Mobiles larges (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .transformation-title .line1 {
        font-size: 30px;
    }
    
    .transformation-title .line2 {
        font-size: 22px;
        white-space: normal;
        letter-spacing: 0;
        line-height: 1.3;
    }
    
    .re-architecture-title .line1 {
        font-size: 30px;
    }
    
    .re-architecture-title .moderniser {
        font-size: 22px;
        letter-spacing: 0;
        margin-top: 8px;
        display: block;
    }
    
    .confort-unique h2 {
        font-size: 30px;
        line-height: 1.3;
    }
    
    .confort-unique .subtitle {
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    .sevres-title h2 {
        font-size: 30px;
        line-height: 1.3;
    }
    
    .sevres-title .effervescence {
        font-size: 22px;
        display: block;
        margin-top: 10px;
    }
    
    .disponibilites-title {
        font-size: 30px;
        line-height: 1.3;
    }
    
    .transformation-quote h3 {
        font-size: 16px;
        line-height: 1.4;
        padding: 0 10px;
    }
    
    /* Ajustement des espacements */
    .transformation-title {
        margin-bottom: 25px;
        margin-top: 30px;
    }
    
    .transformation-content {
        gap: 25px;
        margin-top: 40px;
        flex-direction: column;
    }
    
    .signature-top {
        margin-bottom: 20px;
        margin-top: 20px;
        padding-left: 20px;
    }
    
    /* Amélioration de l'interlignage */
    .transformation-title h2,
    .re-architecture-title,
    .sevres-title h2,
    .disponibilites-title {
        line-height: 1.4;
    }
    
    /* Ajustement des espacements entre les lignes de titre */
    .spacing-title,
    .sevres-title .spacing {
        margin-top: 15px;
    }
}

/* Correction radicale pour le titre LA TRANSFORMATION */
@media (max-width: 767px) {
    .transformation-title {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        overflow: hidden !important;
    }
    
    .transformation-title h2 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        font-size: 28px !important;
    }
    
    .transformation-title .line1 {
        font-size: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: inline-block !important;
        box-sizing: border-box !important;
    }
    
    .transformation-title .subtitle {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        font-size: 22px !important;
    }
    
    .transformation-title .line2 {
        font-size: 22px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: inline-block !important;
        box-sizing: border-box !important;
    }
}

/* Mobiles (320px - 575px) */
@media (max-width: 575px) {
    .transformation-title .line1 {
        font-size: 26px;
    }
    
    .transformation-title .line2 {
        font-size: 18px;
        white-space: normal;
        letter-spacing: 0;
        line-height: 1.4;
        padding: 0 10px;
    }
    
    .re-architecture-title .line1 {
        font-size: 26px;
    }
    
    .re-architecture-title .moderniser {
        font-size: 18px;
        letter-spacing: 0;
        margin-top: 10px;
        display: block;
        line-height: 1.4;
    }
    
    .confort-unique h2 {
        font-size: 26px;
        line-height: 1.3;
    }
    
    .confort-unique .subtitle {
        font-size: 11px;
        letter-spacing: 0.8px;
        margin-top: 15px;
    }
    
    .sevres-title h2 {
        font-size: 26px;
        line-height: 1.3;
    }
    
    .sevres-title .effervescence {
        font-size: 18px;
        display: block;
        margin-top: 15px;
        line-height: 1.4;
    }
    
    .disponibilites-title {
        font-size: 26px;
        line-height: 1.3;
    }
    
    .transformation-quote h3 {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 5px;
        letter-spacing: 0;
    }
    
    /* Ajustement des espacements */
    .transformation-title {
        margin-bottom: 20px;
        margin-top: 25px;
    }
    
    .transformation-content {
        gap: 20px;
        margin-top: 30px;
        flex-direction: column;
    }
    
    .signature-top {
        margin-bottom: 15px;
        margin-top: 15px;
        padding-left: 15px;
        font-size: 9px;
    }
    
    /* Amélioration de l'interlignage */
    .transformation-title h2,
    .re-architecture-title,
    .sevres-title h2,
    .disponibilites-title {
        line-height: 1.5;
    }
    
    /* Ajustement des espacements entre les lignes de titre */
    .spacing-title,
    .sevres-title .spacing {
        margin-top: 20px;
        display: block;
    }
    
    /* Ajustements spécifiques pour les très petits écrans */
    @media (max-width: 375px) {
        .transformation-title .line1 {
            font-size: 24px;
        }
        
        .transformation-title .line2 {
            font-size: 16px;
        }
        
        .re-architecture-title .line1 {
            font-size: 24px;
        }
        
        .re-architecture-title .moderniser {
            font-size: 16px;
        }
        
        .confort-unique h2 {
            font-size: 24px;
        }
        
        .sevres-title h2 {
            font-size: 24px;
        }
        
        .sevres-title .effervescence {
            font-size: 16px;
        }
        
        .disponibilites-title {
            font-size: 24px;
        }
        
        .transformation-quote h3 {
            font-size: 13px;
        }
    }
}

/* Correction de l'interlignage des titres sur plusieurs lignes */
/* Règles de base pour tous les formats d'écran */

/* Titre "LA TRANSFORMATION D'UN IMMEUBLE EMBLÉMATIQUE" */
.transformation-title h2 {
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
}

.transformation-title .subtitle {
    margin-top: 0 !important;
    line-height: 1.1 !important;
}

/* Titre "SÈVRES, ENTRE EFFERVESCENCE ET SÉRÉNITÉ" */
.sevres-title h2 {
    line-height: 1.1 !important;
}

.sevres-title .effervescence {
    margin-top: 5px !important;
    display: inline-block !important;
}

/* Ajustements spécifiques pour les mobiles */
@media (max-width: 767px) {
    /* Titre "LA TRANSFORMATION D'UN IMMEUBLE EMBLÉMATIQUE" */
    .transformation-title h2 {
        line-height: 0.95 !important;
        margin-bottom: 5px !important;
    }
    
    .transformation-title .subtitle {
        margin-top: -5px !important;
        line-height: 1 !important;
    }
    
    /* Titre "SÈVRES, ENTRE EFFERVESCENCE ET SÉRÉNITÉ" */
    .sevres-title h2 {
        line-height: 0.95 !important;
    }
    
    .sevres-title .effervescence {
        margin-top: 0 !important;
    }
}

/* Ajustements encore plus spécifiques pour les petits mobiles */
@media (max-width: 575px) {
    /* Titre "LA TRANSFORMATION D'UN IMMEUBLE EMBLÉMATIQUE" */
    .transformation-title h2 {
        line-height: 0.9 !important;
        margin-bottom: 3px !important;
    }
    
    .transformation-title .subtitle {
        margin-top: -8px !important;
        line-height: 0.95 !important;
    }
    
    /* Titre "SÈVRES, ENTRE EFFERVESCENCE ET SÉRÉNITÉ" */
    .sevres-title h2 {
        line-height: 0.9 !important;
    }
    
    .sevres-title .effervescence {
        margin-top: -3px !important;
    }
}

/* Ajustements supplémentaires pour les boutons et CTA */
@media (max-width: 767px) {
    .btn-atouts,
    .sevres-btn,
    .disponibilites-btn {
        font-size: 14px;
        padding: 12px 20px;
    }
    
    .btn-circle-gold {
        width: 40px;
        height: 40px;
    }
    
    .btn-arrow {
        width: 14px;
        height: 14px;
    }
}

/* Optimisations pour les espacements entre les sections */
@media (max-width: 767px) {
    section {
        padding: 50px 0;
    }
    
    .transformation,
    .re-architecture,
    .confort-unique,
    .sevres-section,
    .disponibilites-section {
        padding: 40px 0;
    }
}