/*
 * Page Interne Template Styles
 * Template pour les pages internes
 * @package WebStudios
 */

/* =============================================
   PAGE INTERNE MAIN STRUCTURE
   ============================================= */

.page-interne-template {
    padding: 140px 0 80px; /* Top padding accounts for fixed header */
    background: #FFFFFF;
}

.page_interne_sized {
    display: flex;
    width: calc(100% - 20px);
    max-width: 1280px;
    flex-direction: column;
    margin: 0 auto;
    box-sizing: border-box;
}

/* =============================================
   PAGE HEADER
   ============================================= */

.page_interne_header {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 60px;
}

.page_interne_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.page_interne_title .tilde {
    display: flex;
    align-items: center;
    width: 36px;
    height: clamp(40px, 6vw, 60px);
    flex-shrink: 0;
}

.page_interne_title .tilde img {
    width: 100%;
    height: auto;
}

.page_interne_title .flex_title_text {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.page_interne_title .flex_title_text > div:nth-child(1) {
    width: 100%;
    color: #3FB0E5;
    font: 400 clamp(2rem, 5vw, 3.75rem) / 1.1 OS_ALT_Regular_Italic;
    text-align: center;
    letter-spacing: -0.84px;
}

.page_interne_title .flex_title_text > div:nth-child(2) {
    width: 100%;
    color: #242424;
    font: 400 clamp(1.5rem, 4vw, 2.5rem) / 1.1 OS_ALT_Regular_Italic;
    text-align: center;
    letter-spacing: -0.84px;
}

.page_interne_intro {
    max-width: 700px;
    color: #242424;
    font: 400 clamp(1.125rem, 2vw, 1.375rem) / 1.5 OS_Regular;
    text-align: center;
}

/* =============================================
   PAGE CONTENT - ELEMENTOR ZONE
   ============================================= */

.page_interne_content {
    width: 100%;
}

.page-interne-content {
    width: 100%;
}

/* Elementor compatibility */
.page_interne_content .elementor {
    width: 100%;
}

.page_interne_content .elementor-section {
    width: 100%;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Tablet Devices */
@media (max-width: 992px) {
    .page-interne-template {
        padding: 120px 0 60px;
    }

    .page_interne_header {
        margin-bottom: 40px;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .page-interne-template {
        padding: 120px 0 40px;
    }

    .page_interne_title {
        flex-direction: column;
        text-align: center;
    }

    .page_interne_title .flex_title_text {
        width: 100%;
        justify-content: center;
    }

    .page_interne_title .flex_title_text > div:nth-child(1),
    .page_interne_title .flex_title_text > div:nth-child(2) {
        text-align: center;
    }

    .page_interne_intro {
        font-size: 16px;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .page_interne_sized {
        width: calc(100% - 30px);
    }
}