/* Styles spécifiques — ctznos-software */
body.page-ctznos-software { background-color: black; }

/* IMAGE DE FOND FIXE */
.background {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../../../media/ctznos_soft.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

@media (max-width: 900px) {
    .background {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 60vh;
        background-image: url("../../../media/ctznos_soft.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

@media (max-width: 530px) {
    .background {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 45vh;
        background-image: url("../../../media/ctznos_soft.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

/* CONTENU QUI SCROLL */
.content {
    position: relative;
    z-index: 1;
}

.section-text1 {
    color: white;
    text-align: center;
    font-weight: bold;
    margin-top: 7%;
    font-size: 20px;
}

.section-text1-1 {
    color: white;
    text-align: center;
    align-items: center;
    margin-top: 1%;
    font-size: 10px;
    display: flex;
    margin-bottom: 4%;
    justify-content: center;
}

@media (max-width: 850px) {
    .section-text1 {
        color: white;
        text-align: center;
        font-weight: bold;
        margin-top: 7%;
        font-size: 12px;
    }

    .section-text1-1 {
        color: white;
        text-align: center;
        align-items: center;
        margin-top: 1%;
        font-size: 7px;
        display: flex;
        margin-bottom: 4%;
        justify-content: center;
    }
}

.download-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px 0;
}

.download-btn {
    display: inline-block;
    padding: 15px 25px;
    background-color: #0071E3;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    margin-bottom: 3%;
    transition: 0.3s ease;
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.184);
}

.download-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
}

.image-container img {
    max-width: 70%;
    height: auto;
}

.section-text2 {
    color: white;
    text-align: center;
    font-weight: bold;
    margin-top: 10%;
    font-size: 20px;
}

.section-text1-2 {
    color: white;
    text-align: center;
    align-items: center;
    margin-top: 1%;
    font-size: 10px;
    display: flex;
    margin-bottom: 4%;
    justify-content: center;
}

@media (max-width: 850px) {
    .section-text2 {
        color: white;
        text-align: center;
        font-weight: bold;
        margin-top: 7%;
        font-size: 12px;
    }

    .section-text1-2 {
        color: white;
        text-align: center;
        align-items: center;
        margin-top: 1%;
        font-size: 7px;
        display: flex;
        margin-bottom: 4%;
        justify-content: center;
    }
}

.image-carou {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
    margin-top: 6%;
}

.image-carou img {
    max-width: 70%;
    height: auto;
}

.section-text3 {
    color: white;
    text-align: center;
    font-weight: bold;
    margin-top: 10%;
    font-size: 20px;
}

.section-text1-3 {
    color: white;
    text-align: center;
    align-items: center;
    margin-top: 1%;
    font-size: 10px;
    display: flex;
    margin-bottom: 4%;
    justify-content: center;
}

@media (max-width: 850px) {
    .section-text3 {
        color: white;
        text-align: center;
        font-weight: bold;
        margin-top: 7%;
        font-size: 12px;
    }

    .section-text1-3 {
        color: white;
        text-align: center;
        align-items: center;
        margin-top: 1%;
        font-size: 7px;
        display: flex;
        margin-bottom: 4%;
        justify-content: center;
    }
}

.img1 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

/* LE RECTANGLE */
.img1-box {
    width: 80%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 40px;
    background: linear-gradient(120deg, #232323, #131313);
    padding: 45px;
    border-radius: 80px;
}

.img1-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
}

.img1-text h2 {
    flex: 1;
    color: white;
    margin-bottom: 5%;
}

.img1-text p {
    flex: 1;
    color: white;
}

.img2 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

/* LE RECTANGLE */
.img2-box {
    width: 80%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 40px;
    background: linear-gradient(120deg, #232323, #131313);
    padding: 45px;
    border-radius: 80px;
}

.img2-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
}

.img2-text h2 {
    flex: 1;
    color: white;
    margin-bottom: 5%;
}

.img2-text p {
    flex: 1;
    color: white;
}

.img3 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

/* LE RECTANGLE */
.img3-box {
    width: 80%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 40px;
    background: linear-gradient(120deg, #232323, #131313);
    padding: 45px;
    border-radius: 80px;
}

.img3-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
}

.img3-text h2 {
    flex: 1;
    color: white;
    margin-bottom: 5%;
}

.img3-text p {
    flex: 1;
    color: white;
}

.section-text4 {
    color: white;
    text-align: center;
    font-weight: bold;
    margin-top: 10%;
    font-size: 20px;
}

.section-text1-4 {
    color: white;
    text-align: center;
    align-items: center;
    margin-top: 1%;
    font-size: 10px;
    display: flex;
    margin-bottom: 4%;
    justify-content: center;
}

@media (max-width: 850px) {
    .section-text4 {
        color: white;
        text-align: center;
        font-weight: bold;
        margin-top: 7%;
        font-size: 12px;
    }

    .section-text1-4 {
        color: white;
        text-align: center;
        align-items: center;
        margin-top: 1%;
        font-size: 7px;
        display: flex;
        margin-bottom: 4%;
        justify-content: center;
    }
}

/* */
.container-famille {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 80px 0px;
    margin-top: 40px;
}

.famille-text {
    flex: 1;
    max-width: 600px;
    margin-left: 7%;
}

.section-text5 {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 20px;
}

.section-text1-5 {
    color: white;
    text-align: center;
    font-size: 10px;
}

@media (max-width: 850px) {
    .section-text5 {
        color: white;
        text-align: center;
        font-weight: bold;
        margin-top: 7%;
        font-size: 12px;
    }

    .section-text1-5 {
        color: white;
        text-align: center;
        align-items: center;
        margin-top: 1%;
        font-size: 7px;
        display: flex;
        margin-bottom: 4%;
        justify-content: center;
    }
}

.bloc-image {
    flex: 1;
    display: flex;
    justify-content: right;
}

.bloc-image img {
    width: 100%;
    max-width: 450px;
    height: auto;
}

/* Section 6 : Image à gauche, Texte à droite */
.container-famille6 {
    display: flex;
    flex-direction: row-reverse;
    /* Inverse l'ordre : Image (2ème en HTML) devient 1ère à gauche */
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 80px 0px;
    margin-top: 40px;
}

.famille-text6 {
    flex: 1;
    max-width: 600px;
    margin-right: 7%;
    /* Marge à droite pour équilibrer */
}

.section-text6 {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 20px;
}

.section-text1-6 {
    color: white;
    text-align: center;
    font-size: 10px;
}

@media (max-width: 850px) {
    .section-text6 {
        color: white;
        text-align: center;
        font-weight: bold;
        margin-top: 7%;
        font-size: 12px;
    }

    .section-text1-6 {
        color: white;
        text-align: center;
        align-items: center;
        margin-top: 1%;
        font-size: 7px;
        display: flex;
        margin-bottom: 4%;
        justify-content: center;
    }
}

.bloc-image6 {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /* Aligne l'image vers la gauche */
}

.bloc-image6 img {
    width: 100%;
    max-width: 450px;
    height: auto;
}

.section-text7 {
    color: white;
    text-align: center;
    font-weight: bold;
    margin-top: 10%;
    font-size: 20px;
}

.section-text1-7 {
    color: white;
    text-align: center;
    align-items: center;
    margin-top: 1%;
    font-size: 10px;
    display: flex;
    margin-bottom: 4%;
    justify-content: center;
}

@media (max-width: 850px) {
    .section-text7 {
        color: white;
        text-align: center;
        font-weight: bold;
        margin-top: 7%;
        font-size: 12px;
    }

    .section-text1-7 {
        color: white;
        text-align: center;
        align-items: center;
        margin-top: 1%;
        font-size: 7px;
        display: flex;
        margin-bottom: 4%;
        justify-content: center;
    }
}