/* ============ [01] MAX-WIDTH : 1024PX START ============ */
@media only screen and (max-width: 1024px)
{
    /* ============ [01] GENERAL START ============ */
    h1 {
        font-weight: 700;
        font-size: 2.3em;
    }

    h2 {
        font-weight: 700;
        font-size: 1.85em;
    }
    /* ============ [01] GENERAL END ============ */

    /* ============ [02] CLASS START ============ */
    .e-container-fluid {
        margin: 0 40px;
    }

    .e-container {
        padding: 0 80px;
    }

    .blog-card-three {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .order-left {
        order: 1 !important;
    }

    .order-right {
        order: 2 !important;
    }

    .hero-section, .page-heading, .page-heading-faqs {
        flex-direction: column;
        gap: 30px;
    }

    .hero-case-study-left {
        width: 100%;
    }

    .hero-case-study-right {
        width: 100%;
    }

    .hero-section-left, .page-heading-left, .page-heading-faqs-left {
        order: 2;
    }

    .hero-section-right, .page-heading-right, .page-heading-faqs-right {
        order: 1;
    }

    .hero-title-h2, .page-heading-center-h2, .page-heading-faqs-h2, .page-heading-h2, .page-heading-tabs-h2, .page-reference-title, .page-heading-brand-h2, .form-info-card-title-h2 {
        font-size: 1.85em;
    }

    .hero-section-left-width {
        width: 100% !important;
    }

    .page-terms-section h2 {
        font-size: 1.85em;
    }

    .page-terms-section h3 {
        font-size: 1.5em;
    }

    .page-terms-section h4 {
        font-size: 1.4em;
    }

    /* ==== Hero ==== */
    .hero-title-h1 {
        font-size: 2.3em;
    }

    .prestation-section {
        background-color: #969440;
        padding: 40px 60px;
        margin-top: -130px;
        box-shadow: var(--b-shadow);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
    }

    .prestation-section-bottom {
        margin-top: 18px;
    }

    .prestation-title {
        color: var(--white-color);
        font-size: 1.5em;
    }

    .prestation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    /* ==== /Hero ==== */

    /* ==== Page Heading ==== */
    .page-heading-center-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
        margin-top: 35px;
    }

    .page-heading-tabs-content-box {
        flex-direction: column;
        gap: 40px;
    }

    .page-heading-tabs-desc-left {
        width: 100%;
    }

    .page-heading-tabs-desc-right {
        width: 100%;
    }

    .page-heading-center-h3 {
        font-size: 1.5em;
    }

    .page-heading-brand-item {
        display: inline-block;
        margin: 25px;
        margin-top: 30px;
        margin-left: 0;
        margin-bottom: 0;
    }
    /* ==== /Page Heading ==== */

    /* ==== Page Reference ==== */
     .page-references-top {
        display: block !important;
    }

    .page-reference-top-right {
        margin-top: 25px;
    }

    .page-references-bottom {
        margin-top: 60px;
    }
    /* ==== /Page Reference ==== */

    /* ==== Page Infos ==== */
    .form-infos {
        margin: 0 auto;
        width: 100%;
    }
    /* ==== /Page Infos ==== */

    /* ==== Page Testimonials ==== */
    .card-testimonials {
        display: block !important;
    }

    .card-testimonials-company-img {
        width: 100%;
        height: 280px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0;
    }
    /* ==== /Page Testimonials ==== */

    /* ==== Page Case Study ==== */
    .page-case-study-details {
        display: block !important;
    }

    .page-case-study-details-left {
        width: 100%;
    }

    .page-case-study-details-right {
        width: 100%;
        margin-top: 50px;
    }
    /* ==== /Page Case Study ==== */
    /* ============ [02] CLASS END ============ */
}
/* ============ [01] MAX-WIDTH : 1024PX END ============ */


/* ============ [02] MAX-WIDTH : 991PX START ============ */
@media only screen and (max-width: 991px)
{
    /* ============ [01] GENERAL START ============ */
    h1 {
        font-weight: 700;
        font-size: 2.1em;
    }

    h2 {
        font-weight: 700;
        font-size: 1.75em;
    }
    /* ============ [01] GENERAL END ============ */

    /* ============ [02] CLASS START ============ */

    .hero-title-h2, .page-heading-center-h2, .page-heading-faqs-h2, .page-heading-h2, .page-heading-tabs-h2, .page-reference-title, .page-heading-brand-h2, .form-info-card-title-h2 {
        font-size: 1.75em;
    }

    .page-terms-section h2 {
        font-size: 1.75em;
    }

    .page-terms-section h3 {
        font-size: 1.45em;
    }

    .page-terms-section h4 {
        font-size: 1.35em;
    }

    /* ==== Hero ==== */
    .hero-title-h1 {
        font-size: 2.1em;
    }

    .prestation-title {
        color: var(--white-color);
        font-size: 1.45em;
    }
    /* ==== /Hero ==== */

    /* ==== Page Heading ==== */
    .page-heading-center-h3 {
        font-size: 1.45em;
    }
    /* ==== /Page Heading ==== */
    /* ============ [02] CLASS END ============ */
}
/* ============ [02] MAX-WIDTH : 991PX END ============ */


/* ============ [03] MAX-WIDTH : 767PX START ============ */
@media only screen and (max-width: 767px)
{
    /* ============ [01] GENERAL START ============ */
    h1 {
        font-weight: 700;
        font-size: 1.9em;
    }

    h2 {
        font-weight: 700;
        font-size: 1.6em;
    }
    /* ============ [01] GENERAL END ============ */

    /* ============ [02] CLASS START ============ */
    .box-two {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .box-item:nth-child(odd) {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .box-item:nth-child(even) {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .blog-card-three {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .blog-card-title a {
        color: var(--body-color);
        font-weight: 700;
        font-size: 1.2em;
        line-height: 1.3;
    }

    .hero-title-h2, .page-heading-center-h2, .page-heading-faqs-h2, .page-heading-h2, .page-heading-tabs-h2, .page-reference-title, .page-heading-brand-h2, .form-info-card-title-h2 {
        font-size: 1.6em;
    }

    .page-terms-section h2 {
        font-size: 1.6em;
    }

    .page-terms-section h3 {
        font-size: 1.35em;
    }

    .page-terms-section h4 {
        font-size: 1.3em;
    }

    /* ==== Hero ==== */
    .hero-title-h1 {
        font-size: 2em;
    }

    .prestation-section {
        background-color: #969440;
        padding: 30px 40px;
        margin-top: -130px;
        box-shadow: var(--b-shadow);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
    }

    .prestation-title {
        color: var(--white-color);
        font-size: 1.35em;
    }

    .prestation-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    /* ==== /Hero ==== */

    /* ==== Page Heading ==== */
    .page-heading-center-h3 {
        font-size: 1.35em;
    }
    /* ==== /Page Heading ==== */

    /* ==== Page Infos ==== */
    .form-info-card {
        background-color: var(--white-color);
        padding: 30px 40px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

    .form-info-form-top {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-top: 40px;
    }
    /* ==== /Page Infos ==== */

    /* ==== Page Testimonials ==== */
    .card-testimonials-company-img {
        width: 100%;
        height: 250px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0;
    }
    /* ==== /Page Testimonials ==== */
    /* ============ [02] CLASS END ============ */

    #banner-cookies {
        left: 10px; /* Réduit la marge à gauche */
        bottom: 10px; /* Réduit la marge en bas */
        width: calc(100% - 20px); /* Adapte la largeur à l'écran */
        padding: 15px 20px; /* Réduit le padding */
    }

    .banner-cookies-top-p {
        font-size: 0.9em; /* Réduit la taille du texte */
    }

    .customize-btn {
        margin-left: 5px; /* Réduit l'espacement entre les boutons */
    }

    .modal-content {
        width: 90%; /* Réduit la largeur du modal */
        padding: 20px 20px 70px; /* Ajuste le padding pour les petits écrans */
    }

    .modal-title {
        font-size: 1.5em; /* Réduit la taille du titre */
    }

    .modal-desc p {
        font-size: 0.8em; /* Réduit la taille du texte descriptif */
    }

    .modal-form-actions {
        padding: 10px 20px; /* Réduit le padding des boutons */
    }
}
/* ============ [03] MAX-WIDTH : 767PX END ============ */


/* ============ [04] MAX-WIDTH : 576PX START ============ */
@media only screen and (max-width: 576px)
{
    /* ============ [01] GENERAL START ============ */
    h1 {
        font-weight: 700;
        font-size: 1.8em;
    }

    h2 {
        font-weight: 700;
        font-size: 1.5em;
    }
    /* ============ [01] GENERAL END ============ */

    /* ============ [02] CLASS START ============ */
    .e-container-fluid {
        margin: 0 40px;
    }

    .e-container {
        padding: 0 40px;
    }

    .hero-title-h2, .page-heading-center-h2, .page-heading-faqs-h2, .page-heading-h2, .page-heading-tabs-h2, .page-reference-title, .page-heading-brand-h2, .form-info-card-title-h2 {
        font-size: 1.5em;
    }

    .page-terms-section h2 {
        font-size: 1.5em;
    }

    .page-terms-section h3 {
        font-size: 1.35em;
    }

    .page-terms-section h4 {
        font-size: 1.28em;
    }

    /* ==== Hero ==== */
    .hero-title-h1 {
        font-size: 1.8em;
    }

    .prestation-title {
        color: var(--white-color);
        font-size: 1.35em;
    }

    .prestation-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }

    .prestation-item {
        position: relative;
        display: flex;
        align-items: center;
        padding: 20px 20px;
        background-color: var(--white-color);
        color: var(--body-color);
        border: 1px solid var(--border-2-color);
        border-bottom: 3px solid var(--secondary-color);
        box-shadow: var(--b-shadow);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }
    /* ==== /Hero ==== */

    /* ==== Page Heading ==== */
    .page-heading-center-h3 {
        font-size: 1.35em;
    }
    /* ==== /Page Heading ==== */

    /* ==== Page Testimonials ==== */
    .card-testimonials-company-img {
        width: 100%;
        height: 200px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0;
    }

    .card-testimonials-right {
        padding: 25px 30px;
    }
    /* ==== /Page Testimonials ==== */
    /* ============ [02] CLASS END ============ */
}
/* ============ [04] MAX-WIDTH : 576PX END ============ */


/* ============ [05] MAX-WIDTH : 480PX START ============ */
@media only screen and (max-width: 480px)
{
    /* ============ [01] GENERAL START ============ */
    h1 {
        font-weight: 700;
        font-size: 1.7em;
    }

    h2 {
        font-weight: 700;
        font-size: 1.4em;
    }
    /* ============ [01] GENERAL END ============ */

    /* ============ [02] CLASS START ============ */
    .e-container-fluid {
        margin: 0 20px;
    }

    .e-container {
        padding: 0 20px;
    }

    .hero-title-h2, .page-heading-center-h2, .page-heading-faqs-h2, .page-heading-h2, .page-heading-tabs-h2, .page-reference-title, .page-heading-brand-h2, .form-info-card-title-h2 {
        font-size: 1.4em;
    }

    .page-terms-section h2 {
        font-size: 1.4em;
    }

    .page-terms-section h3 {
        font-size: 1.3em;
    }

    .page-terms-section h4 {
        font-size: 1.25em;
    }

    /* ==== Hero ==== */
    .hero-title-h1 {
        font-size: 1.7em;
    }

    .prestation-title {
        color: var(--white-color);
        font-size: 1.3em;
    }
    /* ==== /Hero ==== */

    /* ==== Page Heading ==== */
    .page-heading-center-h3 {
        font-size: 1.3em;
    }
    /* ==== /Page Heading ==== */
    /* ============ [02] CLASS END ============ */
}
/* ============ [05] MAX-WIDTH : 480PX END ============ */


/* ============ [06] MAX-WIDTH : 390PX START ============ */
@media only screen and (max-width: 390px)
{
    /* ============ [01] GENERAL START ============ */
    h1 {
        font-weight: 700;
        font-size: 1.6em;
    }

    h2 {
        font-weight: 700;
        font-size: 1.3em;
    }

    p {
        font-size: 1em;
        margin-top: 8px;
    }

    a {
        text-decoration: none;
        cursor: pointer;
        font-size: 1em;
    }
    /* ============ [01] GENERAL END ============ */

    /* ============ [02] CLASS START ============ */
    .btn {
        font-size: 1em;
        padding: 8px 12px;
        box-shadow: var(--b-shadow);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
    }

    .hero-title-h2, .page-heading-center-h2, .page-heading-faqs-h2, .page-heading-h2, .page-heading-tabs-h2, .page-reference-title, .page-heading-brand-h2, .form-info-card-title-h2 {
        font-size: 1.3em;
    }

    .page-terms-section h2 {
        font-size: 1.3em;
    }

    .page-terms-section h3 {
        font-size: 1.25em;
    }

    .page-terms-section h4 {
        font-size: 1.2em;
    }

    /* ==== Hero ==== */
    .hero-title-h1 {
        font-size: 1.6em;
    }

    .prestation-title {
        color: var(--white-color);
        font-size: 1.25em;
    }
    /* ==== /Hero ==== */

    /* ==== Page Heading ==== */
    .page-heading-center-h3 {
        font-size: 1.25em;
    }

    .page-heading-desc li,
    .page-heading-center-desc li,
    .accordion-faqs-card li,
    .page-heading-tabs-content-box li,
    .page-terms-section li {
        position: relative;
        font-size: 1em;
        margin-top: 10px;
    }

    .page-heading-desc li::before,
    .page-heading-center-desc li::before,
    .accordion-faqs-card li::before,
    .page-heading-tabs-content-box li::before,
    .page-terms-section li::before {
        position: absolute;
        content: "";
        top: 5px;
        left: -16px;
        width: 9px;
        height: 9px;
        background-color: var(--primary-color);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }
    /* ==== /Page Heading ==== */

    /* ==== Page Testimonials ==== */
    .card-testimonials-company-img {
        width: 100%;
        height: 180px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0;
    }
    /* ==== /Page Testimonials ==== */

    /* ============ [02] CLASS END ============ */
}
/* ============ [06] MAX-WIDTH : 390PX END ============ */