/* --- LAYOUT GLOBAL (mobile first) --- */

.section-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px auto;
    max-width: 1200px;
    padding: 0 20px;
}

/* --- TEXT BLOCK --- */

.text-block {
    width: 100%;
    line-height: 1.6;
}

.text-block h1 {
    font-size: 1.9rem;
    margin-bottom: 8px;
}

.text-block h2 {
    margin-top: 28px;
    font-size: 1.25rem;
    position: relative;
}

.text-block h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #ffd071;
    margin-top: 6px;
    border-radius: 4px;
}

/* Contacts / icônes */
.contact-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon {
    display: flex;
    align-items: center;
}

/* --- IMAGES BLOCK --- */

.images-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.images-block img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* --- TABLETTE (> 700px) --- */

@media (min-width: 700px) {

    .section-container {
        gap: 40px;
    }

    .text-block h1 {
        font-size: 2.1rem;
    }

    .text-block h2 {
        font-size: 1.3rem;
    }
}

/* --- DESKTOP (> 900px) --- */

@media (min-width: 900px) {

    .section-container {
        flex-direction: row;
        align-items: flex-start;
    }

    .text-block {
        width: 55%;
    }

    .images-block {
        width: 40%;
    }

    .text-block h1 {
        font-size: 2.3rem;
    }
}

/* --- GRAND ÉCRAN (> 1200px) --- */

@media (min-width: 1200px) {
    .section-container {
        gap: 50px;
    }
}

/* --- FIX : empêcher les césures automatiques sur mobile --- */

.section-container,
.section-container * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* Assurer que mail + numéro ne se cassent JAMAIS */
.no-break {
    white-space: nowrap;
}