/* ==========================================
   CORRECTIONS POUR ADAPTATION PLEINE LARGEUR MOBILE
   ========================================== */

/* 1. FEED CONTAINER - Suppression des marges en mobile */
@media (max-width: 768px) {
    .feed-container {
        max-width: 100%;
        padding: 0; /* Supprime le padding latéral */
        margin: 0;
    }
    
    .post-card {
        border-radius: 0; /* Supprime les coins arrondis sur mobile */
        margin-left: 0;
        margin-right: 0;
    }
}

/* 2. CONTENT AREA - Ajustement responsive */
@media (max-width: 768px) {
    .content-area {
        padding: 20px 0; /* Padding vertical seulement */
        margin-left: 0;
    }
    
    .content-area.shifted {
        margin-left: 0; /* Pas de décalage sur mobile */
    }
}

/* 3. WELCOME TEXT - Pleine largeur avec padding interne minimal */
@media (max-width: 768px) {
    .welcome-text {
        padding: 0 15px; /* Petit padding pour ne pas coller au bord */
    }
    
    .welcome-text h1 {
        font-size: 28px;
    }
    
    .welcome-text p {
        font-size: 16px;
    }
}

/* 4. CONTENT CARDS - Adaptation mobile */
@media (max-width: 768px) {
    .content-card {
        border-radius: 0; /* Supprime les coins arrondis */
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 15px;
        padding: 20px 15px; /* Padding interne uniquement */
    }
}

/* 5. PUBLICATIONS GRID - Responsive */
@media (max-width: 768px) {
    .publications-grid {
        display: grid;
        grid-template-columns: 1fr; /* Une colonne sur mobile */
        gap: 0; /* Pas d'espace entre les cartes */
        padding: 0;
        margin: 0;
    }
    
    .publication-card {
        border-radius: 0;
        margin: 0 0 15px 0;
    }
}

/* 6. MAP CONTAINER - Pleine largeur */
@media (max-width: 768px) {
    .map-container {
        border-radius: 0;
        margin-left: -15px; /* Compense le padding du parent */
        margin-right: -15px;
        width: calc(100% + 30px);
    }
}

/* 7. WORSHIP SCHEDULE CARDS */
@media (max-width: 768px) {
    .worship-schedule-card {
        border-radius: 8px;
        margin-bottom: 10px;
    }
}

/* 8. FOOTER - Pleine largeur */
@media (max-width: 768px) {
    .footer {
        padding: 30px 15px 0; /* Petit padding interne */
    }
}

/* 9. CORRECTION POUR TRÈS PETITS ÉCRANS */
@media (max-width: 480px) {
    .feed-container {
        padding: 0;
    }
    
    .post-card {
        margin-bottom: 10px;
        border-radius: 0;
    }
    
    .content-area {
        padding: 15px 0;
    }
    
    .welcome-text {
        padding: 0 12px;
    }
    
    .welcome-text h1 {
        font-size: 24px;
    }
    
    .welcome-text p {
        font-size: 14px;
    }
    
    .content-card {
        padding: 15px 12px;
    }
}

/* 10. SIDEBAR - Reste comme avant, mais overlay optimisé */
@media (max-width: 768px) {
    .sidebar {
        width: 280px;
        left: -280px;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    /* L'overlay prend tout l'écran */
    .sidebar-overlay.active {
        display: block;
    }
}

/* 11. CORRECTIONS BOOTSTRAP COLS RESPONSIVE */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* 12. NO PUBLICATIONS MESSAGE */
@media (max-width: 768px) {
    .no-publications {
        padding: 60px 15px;
        border-radius: 0;
    }
}

/* 13. VERSE CARD - Adaptation */
@media (max-width: 768px) {
    .verse-card {
        border-radius: 0;
        padding: 20px 15px;
    }
    
    .verse-text {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .verse-reference {
        font-size: 14px;
    }
}

/* 14. BTN CONTACT - Responsive */
@media (max-width: 768px) {
    .btn-contact {
        width: 100%;
        display: block;
        text-align: center;
        padding: 12px 20px;
    }
}

/* 15. SECTION DIVIDER - Pleine largeur */
@media (max-width: 768px) {
    .section-divider {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }
}

/* 16. CORRECTION SPÉCIFIQUE POUR LES IMAGES */
@media (max-width: 768px) {
    .publication-image {
        border-radius: 0;
        width: 100%;
    }
}

/* 17. HEADER - Reste centré mais adapté */
@media (max-width: 768px) {
    .header {
        padding: 15px 10px;
    }
    
    .logo-container {
        gap: 10px;
    }
    
    .logo-circle {
        width: 60px;
        height: 60px;
    }
}

/* 18. OPTIMISATION BODY RESPONSIVE */
body {
    overflow-x: hidden; /* Évite le scroll horizontal PARTOUT */
    width: 100%;
    position: relative;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        max-width: 100vw; /* Force la largeur à 100% du viewport */
    }
}

/* 19. POST MEDIA - Pleine largeur en mobile */
@media (max-width: 768px) {
    .post-media {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        border-radius: 0;
    }
    
    .media-slide {
        border-radius: 0;
    }
}

/* 20. CORRECTION POUR LES BORDURES ARRONDIES GLOBALES */
@media (max-width: 768px) {
    .post-card,
    .content-card,
    .publication-card,
    .no-publications {
        border-left: 0;
        border-right: 0;
    }
}

/* 21. VERROUILLAGE COMPLET DU CONTENEUR - ANTI-DÉBORDEMENT */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

html {
    overflow-x: hidden;
}

.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

/* Tous les éléments ne doivent pas dépasser */
* {
    max-width: 100%;
}

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

/* 22. CORRECTION SPÉCIFIQUE MOBILE - VERROUILLAGE TOTAL */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }
    
    body {
        max-width: 100vw;
    }
    
    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Forcer tous les éléments à ne pas déborder */
    .row {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Header fixe sans débordement */
    .header {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Content area verrouillée */
    .content-area {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        padding: 20px 0 !important;
        margin: 0 !important;
    }
    
    /* Footer sans débordement */
    .footer {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Empêcher le pseudo-élément du body de causer un débordement */
    body::before,
    body::after {
        max-width: 100vw;
        overflow: hidden;
    }
}

/* 23. CORRECTION POUR LE SIDEBAR (ne pas causer de débordement) */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -280px;
        max-width: 280px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .sidebar.open {
        left: 0;
    }
}

/* 24. CORRECTION POUR LES ÉLÉMENTS QUI DÉPASSENT SOUVENT */
@media (max-width: 768px) {
    /* Tables responsives */
    table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        display: block;
    }
    
    /* Pré-formatted text */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    
    /* Longues URLs ou textes */
    p, div, span {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* 25. CORRECTION TAILLE IMAGES PUBLICATIONS INDEX */
.publication-image {
    width: 100%;
    height: 200px; /* Hauteur fixe raisonnable */
    object-fit: cover; /* Coupe l'image proprement */
    object-position: center;
}

@media (max-width: 768px) {
    .publication-image {
        height: 180px; /* Un peu plus petit sur mobile */
    }
}

@media (max-width: 480px) {
    .publication-image {
        height: 160px; /* Encore plus compact sur très petits écrans */
    }
}

/* Si vous avez une grid de publications */
.publications-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 769px) {
    .publications-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .publications-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 15px;
    }
}

/* Style pour les cartes de publication */
.publication-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.publication-card .publication-image {
    flex-shrink: 0; /* Empêche l'image de rétrécir */
}

.publication-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.publication-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
    /* Limite à 2 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.publication-excerpt {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    /* Limite à 3 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .publication-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
    }
    
    .publication-excerpt {
        font-size: 0.85rem;
        -webkit-line-clamp: 2; /* Réduit à 2 lignes sur mobile */
    }
    
    .publication-body {
        padding: 12px;
    }
}