/*
@media screen and (min-width: 1000px) and (max-width: 1520px){
    
    nav > ul > li > a{
        text-decoration: none;
        color: white;
        font-weight: 700;
        font-size: 13px;
    }

    .baniere h1{
        font-size: 35px;
        color: rgb(187, 187, 187);
    }

    
    .contenu-elm h2{
        font-size: 19px;
        margin: 0 0 5px 0;
    }

    .contenu-elm h6{
        font-size: 12px;
        margin: 0;
        font-weight: 100;
    }

    .submenu{
        width: 390px;
    }

    .img_ctn img{
        width: 90%;
    }

    .marketing_section h2{
        font-size: 30px;
    }

    .marketing_section p{
        font-size: 16px;
    }

    .list_marketing-elm ul li{
        font-size: 13px;
    }

    .globe h2{
        font-size: 30px;
    }

    .form-elmt-ctn p{
        font-size: 11px;
    }

    .digitalisation_section{
        height: 85vh;
    }

}

@media screen and (min-width: 1521px) and (max-width: 1920px){
    .mask3{
        display: none;
    }
}
*/





/* Réinitialisation pour tous les écrans */
* {
    box-sizing: border-box;
}


/* Ajustement pour header scrolled sur mobile */
@media screen and (max-width: 767px) {
    header.scrolled .menu-toggle {
        color: #2A284B;
    }
    header.scrolled nav > ul > li > a {
        color: #2A284B;
    }
}

/* ==========================================================================
   Mobile (320px – 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {

    
    /* Afficher le bouton menu sur mobile */
    .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
    }

    /* Header */
    header {
        padding: 0 10px;
    }

    .logo-ctn img{
        width: 100px;
    }

    /* Masquer le menu par défaut */
    nav {
        display: none !important;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 3;
    }

    /* Afficher le menu quand actif */
    nav.active {
        display: block !important;
    }

    /* Menu en colonne */
    nav > ul {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }

    nav > ul > li {
        margin: 0;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        width: 100%;
    }

    .menu_title{
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    nav .menu_title i{
        background-color: #922676;
        color: white;
        padding: 10px;
    }

    nav > ul > li:last-child {
        border-bottom: none;
    }

    nav > ul > li .menu_title a {
        color: #2A284B;
    }

    nav > ul > li:last-child  a{
        border: 1px solid #922676;
        border-radius: 8px;
        padding: 10px 25px;
        color: #922676;
    }
   
    /* Sous-menu */
    .submenu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        display: none; /* Masqué par défaut */
    }

    .submenu.active {
        display: block; /* Affiché quand actif */
    }

    .submenu li a {
        padding: 10px 0;
        font-size: 14px;
    }

    .contenu-elm h2{
        font-size: 16px;
    }

    /* Banière */
    .baniere {
        flex-direction: column;
        justify-content: center;
        padding-left: 20px;
        padding-right: 20px;
        height: 100%;
    }
    .baniere div {
        width: 100%;
    }
    .baniere h1 {
        font-size: 24px;
        text-align: center;
        line-height: 40px;
    }
    .baniere .img_ctn {
        display: none;
    }

    .baniere .img_ctn img {
        width: 80%;
        margin-top: 20px;
    }

    /* Marketing Section */
    .marketing_section {
        padding: 20px;
    }
    .marketing_section h2 {
        font-size: 24px;
        padding: 0;
    }
    .marketing_section h3 {
        font-size: 18px;
        padding: 0;
    }
    .marketing_section p {
        font-size: 16px;
        padding: 0;
    }
    .image_marketing {
        padding: 0;
    }

    /* Services */
    #services-select{
        display: block;
        height: 40px;
        background-color: #922676;
        color: white;
        border: none;
        padding: 0 10px;
    }
    .services {
        padding: 20px;
    }
    .services h2 {
        font-size: 24px;
    }
    .services p {
        font-size: 14px;
    }
    .services-list {
        padding: 0;
        height: auto;
    }
    .services-list-ctn {
        flex-direction: column;
        height: auto;
        width: 100%;
    }
    .button-select {
        display: none;
    }
    .button-select button {
        width: 50%;
        height: auto;
        padding: 10px;
        font-size: 14px;
        border-radius: 5px;
        margin: 5px 0;
    }
    .services-ctn {
        width: 100%;
        padding: 0;
        height: auto;
        background: none;
    }
    .list-service {
        width: 100%;
        padding: 20px;
        margin: 5px 0;
    }
    .list-services-ctn{
        position: relative;
        width: 100%;
        display: none;
    }
    .list-services-ctn.active{
        display: block;
    }
    .list-type{
        height: auto !important;
    }
    .list-service{
        height: 200px;
        margin: 10px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .btnplus_ctn{
        height: auto !important;
    }
    .btnplus_ctn a{
        background-color: #922676;
        color: white;
    }

    /* Formation */
    .rubrique_recherche {
        height: auto;
    }
    .container_bg_v {
        padding: 20px;
    }
    .container_bg_v h2 {
        font-size: 20px;
        width: 100%;
        margin-bottom: 20px;
    }
    .search-container {
        width: 100%;
        flex-direction: column;
    }
    .search-box {
        width: 100%;
        border-radius: 5px;
        height: 40px;
    }
    .search-button {
        width: 100%;
        border-radius: 5px;
        margin-top: 10px;
        height: 40px;
    }
    .other_search_txt {
        width: 100%;
        justify-content: center;
    }
    .formation-ent {
        flex-direction: column;
        padding: 0 20px;
        bottom: -50px;
        position: relative;
    }
    .element-form {
        width: 100%;
        margin: 10px 0;
    }
    .rubrique_thematique {
        padding: 80px 20px 20px;
    }
    .thematique {
        width: 50%;
    }

    /* Newsletter */
    .newsletter_ctn {
        padding: 20px;
    }
    .newsletter_ctn h2 {
        font-size: 24px;
    }
    .newsletter_ctn p {
        width: 100%;
        font-size: 14px;
    }
    .newsletter_input-container {
        width: 100%;
        flex-direction: column;
    }
    .newsletter_input-container .search-box {
        width: 100%;
        border-radius: 5px;
        height: 40px;
    }
    .newsletter_input-container .search-button {
        width: 100%;
        border-radius: 5px;
        margin-top: 10px;
        height: 40px;
    }
    .social_ico {
        width: 100%;
    }

    /* Footer */
    footer {
        padding: 20px;
    }
    .footer_list_ctn {
        flex-direction: column;
        align-items: center;
    }
    .footer_list_ctn ul {
        text-align: center;
        padding: 0;
    }
    .footer_list_ctn ul li {
        margin: 10px 0;
    }


    /* =============================== Page Marketing ================================== */

    /* Header */
    .header_mkt .menu-toggle i{
        color: #922676;
    }

    /* Section 1: Banière Marketing */
    .baniere_marketing {
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        height: 60%;
        background: #ffecfa;
    }
    .baniere_marketing > div {
        width: 100%;
    }
    .baniere_marketing h1 {
        font-size: 24px;
        text-align: center;
    }
    .btn-ctn-mark {
        padding: 20px 0;
        justify-content: center;
    }
    .btn-ctn-mark a {
        font-size: 16px;
        padding: 10px 15px;
    }
    .imgdiv-mark {
        background: none;
        margin-top: 20px;
    }
    .imgdiv-mark img {
        width: 80%;
        margin-left: 0;
        display: none;
    }

    /* Section 2: Resume Marketing Digital */
    .resume_marketing {
        padding: 20px;
    }
    .resume_marketing h2 {
        font-size: 24px;
        width: 100%;
    }
    .resume_marketing > hr {
        width: 20%;
    }
    .resume_marketing > p {
        width: 100%;
        font-size: 14px;
    }
    .container_mkt-dgt {
        flex-direction: column;
        padding: 20px 0;
    }
    .container_mkt-dgt > div {
        width: 100%;
    }
    .mkt-dgt ul {
        column-count: 1;
    }
    .ctn-img_mkt {
        margin-top: 20px;
    }
    .ctn-img_mkt img {
        width: 100%;
    }

    /* Section 3: Axe d'intervention */
    .axe-intervention {
        height: auto;
        padding-bottom: 40px;
    }
    .container_axe {
        flex-direction: column;
        padding: 20px;
    }
    .container_axe .axe-list-ctn {
        width: 100%;
        margin: 10px 0;
        justify-content: flex-start;
    }
    .axe-intervention > p {
        right: 25%;
        bottom: 0;
        font-size: 14px;
    }

    /* Section 4: Management */
    .container_mgmt {
        padding: 0;
    }
    .display-service {
        padding-left: 0;
    }
    .container_mgmt .single-service {
        width: 100%;
        margin: 20px 0;
    }
    .container_mgmt .single-service i,
    .container_mgmt .single-service img {
        position: static;
        margin-right: 10px;
    }
    .container_mgmt .single-service .title-service {
        align-items: flex-start;
    }

    /*================= Page communication ================*/

    .imgdiv-mark-com img{
        display: none;
    }

     /* Sections 2-4: Stratégie, Communication 360°, Design, Audiovisuel */
     .strategie, .communication-360, .design_graphique, .audiovisuel {
        padding: 20px;
    }
    .strategie h2, .communication-360 h2, .design_graphique h2, .audiovisuel h2 {
        font-size: 24px;
        width: 100%;
    }
    .strategie > hr, .communication-360 > hr, .design_graphique > hr, .audiovisuel > hr {
        width: 20%;
    }
    .strategie > p, .communication-360 > p, .design_graphique > p, .audiovisuel > p {
        width: 100%;
        font-size: 14px;
    }
    .container_strategie, .container_com-360, .container_design, .container_audio {
        flex-direction: column;
        padding: 20px 0;
    }
    .container_strategie > div, .container_com-360 > div, .container_design > div, .container_audio > div {
        width: 100%;
    }
    .strat-com ul, .mkt-com-360 ul, .sol-design ul, .audiodiv ul {
        column-count: 1;
    }
    .strat-com p:last-child, .mkt-com-360 p:last-child, .sol-design p:last-child, .audiodiv p:last-child {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .ctn-img_com, .ctn-img_com-360, .ctn-img_audio {
        margin-top: 20px;
    }
    .ctn-img_com img, .ctn-img_com-360 img, .ctn-img_audio img {
        width: 100%;
    }
    .ctn-img_com img, .ctn-img_mkt img, .ctn-img_audio img {
        display: none;
    }

    /*================= Page solutions digitales ================*/

    /* Section 1: Bannière */
    .solution_ban {
        height: 50%;
    }
    .bgban {
        padding: 20px;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .solution_ban h1 {
        font-size: 24px;
        margin-top: 20px;
    }
    .ctn-solution {
        display: none;
    }
    .list-solution {
        width: 90%;
        flex-direction: column;
    }
    .list-solution a {
        width: 100%;
        margin: 10px 0;
        height: auto;
        padding: 15px;
    }
    .list-solution a h2 {
        font-size: 16px;
    }
    .list-solution a p {
        font-size: 12px;
    }

    /* Section 2: Transformation digitale */
    .transformation-section {
        padding: 20px;
    }
    .transformation-header {
        padding: 0;
    }
    .transformation-section > h2 {
        font-size: 24px;
        padding: 0;
        text-align: center;
        display: flex;
        justify-content: center;
        color: #08833C;
    }
    .transformation-header h3 {
        font-size: 18px;
        padding: 0;
    }
    .transformation-header p {
        font-size: 14px;
    }
    .trans-ctn, .visible-div {
        height: auto;
        flex-direction: column;
    }
    .trans-ctn .arc-container {
        display: none;
    }
    .trans-ctn .arc-container .arc {
        left: 0;
        width: 80%;
        height: 80%;
        margin: 0 auto;
    }
    .trans-ctn .content {
        height: auto;
    }
    .trans-ctn .content .item {
        transform: translateX(0) !important;
        margin: 0;
    }
    .trans-ctn .content .description{
        opacity: 1;
        margin: 0;
    }
    .cta-trans {
        width: 100%;
        flex-direction: column;
        padding: 10px;
    }
    .cta-trans a {
        margin-top: 10px;
    }

    /* Section 3: Développement informatique */
    .developpement-infor > h2 {
        padding: 20px;
        font-size: 25px;
        text-align: center;
        display: flex;
        justify-content: center;
        color: #08833C;
    }
    .developpement-infor .dev-header {
        padding: 0 20px;
    }
    .container-inf {
        padding: 20px;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }
    .container-inf-cpt {
        padding: 20px;
        height: auto;
    }
    .container-inf-cpt-list {
        grid-template-columns: repeat(3, 1fr);
    }
    .container-inf-cpt .list-dev img {
        width: 40px;
    }
    .list-dev span{
        font-size: 14px;
    }

    /* Section 4: Développement web */
    .web-ctn {
        display: none;
    }
    .section-content {
        flex-direction: column;
    }
    .section-content > div {
        width: 100%;
    }
    .section-content-left{
        align-items: center;
    }
    .section-content img {
        display: none;
    }

    /* Section 5: Développement mobile */
    .mob-ctn {
        display: none;
    }
    .dev-mobile-ctn {
        flex-direction: column;
    }
    .dev-mobile-ctn > div {
        width: 100%;
    }
    .container-mob {
        align-items: center;
    }
    .list-app-type-left h2, .list-app-type-left p,
    .list-app-type-right h2, .list-app-type-right p {
        text-align: center;
    }
    .list-app-type-left img, .list-app-type-right img {
        margin: 0;
    }
    .ctn-img-mob img {
        width: 80%;
        margin: 20px 0;
    }

    /* Section 6: Identité graphique */
    .section-graphique {
        padding: 20px;
    }
    .id-graph-ctn {
        flex-direction: column;
    }
    .id-graph-ctn > div {
        width: 100%;
    }
    .id-graph-ctn .id-graph-content-right img {
        display: none;
    }
    .id-graph-ctn ul {
        column-count: 1;
    }

    .id-graph-header h2{
        text-align: center;
        font-size: 25px;
    }
    .id-graph-header p{
        text-align: center;
    }

    /* Section 7: Sécurité informatique */
    .section-securite {
        padding: 20px;
    }
    .securite-ctn {
        flex-direction: column;
    }
    .securite-ctn > div {
        width: 100%;
    }
    .securite-ctn img {
        width: 100%;
        margin-top: 20px;
    }
    .securite-header p{
        text-align: center;
    }

    /*================= Page Formations ================*/

    /* Section 1: Bannière */
    .formation_ban {
        height: 60%;
    }
    .bgbanformation {
        padding: 20px;
    }
    .formation_ban h1 {
        font-size: 32px;
        padding: 20px;
    }

    /* Section 2: Introduction */
    .introduction {
        padding: 20px;
        flex-direction: column;
    }
    .introduction > div {
        width: 100%;
    }
    .introduction a {
        margin-left: 0;
        text-align: center;
        display: block;
    }
    .img-intro img {
        display: none;
    }

    /* Section 3: Liste des formations */
    .formation_liste {
        padding: 20px;
    }
    .ctn-liste-form {
        flex-direction: column;
    }
    .ctn-liste-form.top, .ctn-liste-form.bottom {
        transform: translateY(0);
    }
    .ctn-liste-form .hexagon {
        width: 100%;
        height: auto;
        padding: 20px;
        margin: 10px 0;
    }
    .ctn-liste-form .hexagon h3, .ctn-liste-form .hexagon h2 {
        font-size: 16px;
    }
    .ctn-liste-form .hexagon p {
        font-size: 12px;
    }
    .ctn-liste-form .hexagon.hex4{
        display: none;
    }
    /* Section 4: Axes de formations */
    .formation_section {
        padding: 20px;
    }
    .ctn-list-form {
        flex-direction: column;
    }
    .ctn-list-form > div {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .formation_section .box {
        height: auto;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
        text-align: center;
    }
    .formation_section .box .img-box {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .ctn_btn-axe {
        flex-direction: column;
        padding: 20px 0;
    }
    .ctn_btn-axe a {
        margin: 10px 0;
        text-align: center;
    }

    /* Formulaire Catalogue */
    .catalogue-ctn form {
        width: 90%;
        padding: 20px;
    }
    .catalogue-ctn form input, .catalogue-ctn form textarea {
        font-size: 16px;
        padding: 15px 10px;
    }

    /* Section 5: Certifications ICDL */
    .certification {
        padding: 20px;
        flex-direction: column;
    }
    .certification .img-box, .certification .heading_container {
        width: 100%;
    }
    .certification .img-box img {
        display: none;
    }
    .certificat-list-ctn {
        flex-direction: column;
    }
    .certificat-list-ctn .certificat-list {
        width: 100%;
        margin-bottom: 20px;
    }

    /*=========================== Page contact ======================== */

    /* Section 1: Bannière */
    .contact_ban {
        height: 40%;
    }
    .bgbancontact {
        padding: 20px;
        height: 100%;
    }
    .contact_ban h1 {
        font-size: 45px;
        padding: 30px;
    }

    /* Section 2: Contact Us */
    #contact-ctn{
        flex-direction: column-reverse;
    }
    .contact-us {
        padding: 20px;
    } 

    .contact-us .container{
        padding: 0 !important;
        margin: 0 !important;
    }
    .contact-us .inner {
        box-shadow: none;
    }
    .contact-us .contact-us-left {
        height: 300px;
        margin-bottom: 20px;
    }
    .contact-us .contact-us-form {
        padding: 20px;
    }
    .contact-us .contact-us-form h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .contact-us .contact-us-form p {
        font-size: 12px;
        margin-bottom: 20px;
    }
    .contact-us .form .form-group {
        margin-bottom: 15px;
    }
    .contact-us .form .form-group input,
    .contact-us .form .form-group textarea {
        font-size: 12px;
        padding: 0 10px;
        height: 40px;
    }
    .contact-us .form .form-group textarea {
        height: 80px;
        padding: 10px;
    }
    .contact-us .contact-info {
        margin-top: 20px;
    }
    .contact-us .single-info {
        padding: 20px 40px;
        height: auto;
        margin-bottom: 20px;
    }
    .contact-us .single-info i {
        font-size: 30px;
        left: 20px;
    }
    .contact-us .single-info .content {
        margin-left: 35px;
    }
    .contact-us .single-info .content h3 {
        font-size: 16px;
    }
    .contact-us .single-info .content p {
        font-size: 12px;
    }


}

/* ==========================================================================
   Tablette (768px – 1023px)
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Header */
    header {
        padding: 0 30px;
    }
    .logo-ctn img{
        width: 80px;
    }
    nav > ul > li {
        margin: 0;
        padding: 0 10px;
    }
    nav > ul > li .menu_title{
        display: flex;
        align-items: center;
    }
    header.scrolled nav > ul > li .menu_title a{
        color: #2A284B;
    }
    nav > ul > li .menu_title a, nav > ul > li:last-child a{
        font-size: 12px;
    }
    header.scrolled nav > ul > li .menu_title i{
        margin-left: 7px;
        color: #2A284B;
    }
    .submenu {
        width: 350px;
    }

    /* Banière */
    .baniere {
        padding: 50px 30px;
        height: 80vh;
    }
    .baniere h1 {
        font-size: 25px;
    }
    .baniere img{
        width: 90%;
    }
    /* Marketing Section */
    .marketing_section {
        padding: 50px 30px;
    }
    .marketing_section h2 {
        font-size: 32px;
        padding: 0 30px;
    }
    .marketing_section h3 {
        font-size: 20px;
        padding: 0 30px;
    }
    .marketing_section p {
        padding: 0 30px;
    }

    /* Services */
    .services {
        padding: 50px 30px;
    }
    .services-list {
        padding: 20px 30px;
    }
    .services-list-ctn {
        width: 100%;
    }
    .button-select {
        width: 40%;
    }
    .services-ctn {
        width: 70%;
    }
    .button-select{
        width: 30%;
    }
    .button-select button{
        font-size: 12px;
    }
    .list-service h3{
        font-size: 12px;
    }
    .list-service img{
        width: 40%;
    }

    /* Formation */
    .container_bg_v {
        padding: 50px 30px;
    }
    .search-container {
        width: 80%;
    }
    .container_bg_v h2{
        width: 80%;
    }
    .formation-ent {
        padding: 0 50px;
        flex-wrap: wrap;
    }
    .element-form {
        width: 45%;
    }
    .rubrique_thematique {
        padding: 100px 50px 50px;
    }
    .thematique {
        width: 33.33%;
    }

    /* Newsletter */
    .newsletter_input-container {
        width: 60%;
    }

    footer{
        padding: 50px 30px;
    }


    /* =========================================== Page Marketing ======================================= */

    .menu-toggle {
        display: none; /* Bouton masqué sur tablette */
    }

    /* Section 1: Banière Marketing */
    .baniere_marketing {
        padding: 50px 30px;
        height: 80vh;
    }
    .baniere_marketing h1 {
        font-size: 25px;
    }
    .imgdiv-mark img {
        width: 50%;
    }
    .btn-ctn-mark a{
        font-size: 15px;
    }
    /* Section 2: Resume Marketing Digital */
    .resume_marketing {
        padding: 50px 30px;
    }
    .resume_marketing h2 {
        width: 60%;
    }
    .resume_marketing > p {
        width: 80%;
    }
    .container_mkt-dgt {
        padding: 20px 50px;
    }
    .mkt-dgt ul {
        column-count: 1;
    }
    .ctn-img_mkt img{
        display: none;
    }
    .container_mkt-dgt .mkt-dgt{
        width: 100%;
    }
    .ctn-img_mkt{
        display: none;
        width: 0;
    }
    .mkt-dgt ul{
        column-count: 2;
    }

    /* Section 3: Axe d'intervention */
    .container_axe {
        padding: 20px 50px;
        flex-wrap: wrap;
    }
    .axe-intervention {
        height: 70vh;
    }
    .container_axe .axe-list-ctn {
        width: calc(50% - 40px);
    }

    .container_mgmt .single-service h3{
        font-size: 15px;
    }
    .container_mgmt .single-service p{
        font-size: 13px;
    }
    .container_mgmt .single-service i{
        font-size: 30px;
    }

    /* Section 4: Management */
    .display-service {
        padding: 0;
    }

    /*================= Page communication ================*/

    /* Sections 2-4 */
    .strategie, .communication-360, .design_graphique, .audiovisuel {
        padding: 50px 30px;
    }
    .strategie h2, .communication-360 h2, .design_graphique h2, .audiovisuel h2 {
        width: 80%;
    }
    .strategie > p, .communication-360 > p, .design_graphique > p, .audiovisuel > p {
        width: 80%;
    }
    .container_strategie, .container_com-360, .container_design, .container_audio {
        padding: 20px 0;
    }
    .strat-com ul, .mkt-com-360 ul, .sol-design ul, .audiodiv ul {
        column-count: 2;
    }
    .strat-com, .mkt-com-360, .sol-design, .audiodiv {
        width: 100% !important;
    }
    .ctn-img_com, .ctn-img_com-360, .ctn-img_audio {
        display: none;
        width: 0;
    }

    .ctn-img_com img, .ctn-img_com-360 img, .ctn-img_audio img{
        display: none;
    }

    /*================= Page solutions digitales ================*/

    .menu-toggle {
        display: none;
    }

    /* Section 1: Bannière */
    .solution_ban {
        height: 80vh;
    }
    .bgban {
        padding: 50px;
    }
    .solution_ban h1 {
        font-size: 32px;
    }
    .list-solution {
        width: 90%;
        flex-wrap: wrap;
    }
    .list-solution a {
        width: calc(50% - 20px);
    }

    /* Section 2: Transformation digitale */
    .transformation-section {
        padding: 50px 30px;
    }
    .transformation-section > h2{
        text-align: center;
        color: #08833C;
        display: flex;
        justify-content: center;
        margin-top: 80px;
    }
    .transformation-section h3{
        padding: 20px 20px 0 20px;
    }
    .transformation-header {
        padding: 0 50px;
    }
    .trans-ctn .arc-container {
        display: none;
    }
    .trans-ctn .content {
        height: auto !important;
    }
    .trans-ctn .content .item{
        transform: translateX(0px) !important;
    }
    .trans-ctn .content .description{
        opacity: 1;
    }
    .trans-ctn .content{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .visible-div .item{
        width: 45%;
        margin: 10px !important;
    }
    .cta-trans{
        width: 100%;
    }
    .cta-trans p{
        font-size: 15px;
    }

    /* Section 3: Développement informatique */
    .developpement-infor > h2 {
        padding: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        color: #08833C;
    }
    .developpement-infor .dev-header {
        padding: 0 50px;
    }
    .container-inf {
        padding: 50px;
        grid-template-columns: repeat(3, 1fr);
    }
    .container-inf-cpt {
        padding: 50px;
    }
    .container-inf-cpt-list {
        grid-template-columns: repeat(4, 1fr);
    }
    .container-inf .list-dev img{
        width: 58px;
    }
    .list-dev span{
        font-size: 14px;
    }
    /* Section 4: Développement web */
    .web-ctn {
        padding: 50px 30px;
    }
    .section-content h2{
        font-size: 20px;
    }
    .section-content p{
        font-size: 14px;
    }

    /* Section 5: Développement mobile */
    .mob-ctn {
        padding: 50px 30px;
    }
    .container-mob .list-app-type h2{
        font-size: 17px;
    }
    .dev-mobile-ctn p{
        font-size: 13px;
    }

    /* Section 6: Identité graphique */
    .section-graphique {
        padding: 50px;
    }
    .id-graph-ctn ul {
        column-count: 3;
    }
    .id-graph-content-right{
        display: none;
        width: 0 !important;
    }
    .id-graph-content-left{
        width: 100% !important;
    }
    /* Section 7: Sécurité informatique */
    .section-securite {
        padding: 50px 30px;
    }
    .securite-ctn h3{
        font-size: 20px;
    }
    .securite-ctn p{
        font-size: 14px;
    }

    /*================= Page Formations ================*/

    .menu-toggle {
        display: none;
    }

    /* Section 1: Bannière */
    .bgbanformation {
        padding: 50px 30px;
    }
    .formation_ban h1 {
        font-size: 48px;
    }

    /* Section 2: Introduction */
    .introduction {
        padding: 50px;
    }
    .introduction .intro{
        width: 100% !important;
    }
    .img-intro {
        display: none;
        width: 0 !important;
    }

    /* Section 3: Liste des formations */
    .formation_liste {
        padding: 50px;
    }
    .ctn-liste-form {
        flex-wrap: wrap;
    }
    .ctn-liste-form .hexagon {
        width: calc(50% - 10px);
    }

    .ctn-liste-form .hexagon.hex4{
        display: none;
    }

    /* Section 4: Axes de formations */
    .formation_section {
        padding: 50px 30px;
    }
    .ctn-list-form > div {
        width: calc(50% - 20px);
    }
    .ctn_btn-axe {
        padding: 20px;
    }
    .formation_section .box .img-box{
        margin-right: 10px;
    }
    .detail-box p{
        font-size: 13px;
    }
    .formation_section .box .detail-box h5{
        margin-bottom: 5px;
    }

    /* Formulaire Catalogue */
    .catalogue-ctn form {
        width: 60%;
    }

    /* Section 5: Certifications ICDL */
    .certification {
        padding: 50px 30px;
    }
    .certificat-list-ctn .certificat-list {
        width: calc(50% - 20px);
    }
    .certification .img-box{
        display: none;
        width: 0;
    }
    .certification .heading_container{
        width: 100%;
    }

    /*=========================== Page contact ======================== */
    /* Section 1: Bannière */
    .bgbancontact {
        padding: 0 50px;
    }
    .contact_ban h1 {
        font-size: 60px;
        padding: 50px 30px;
    }

    /* Section 2: Contact Us */
    .contact-us {
        padding: 50px;
    }
    .contact-us .contact-us-left {
        height: 400px;
        margin-bottom: 30px;
    }
    .contact-us .contact-us-form {
        padding: 30px;
    }
    .contact-us .contact-us-form h2 {
        font-size: 28px;
    }
    .contact-us .form .form-group input,
    .contact-us .form .form-group textarea {
        font-size: 14px;
    }
    .contact-us .contact-info {
        margin-top: 30px;
    }
    .contact-us .contact-info .contact-box{
        margin: 10px;
    }
    .contact-us .single-info {
        padding: 30px 50px;
    }

}

/* ==========================================================================
   Ordinateur (1024px – 1919px)
   ========================================================================== */
@media screen and (min-width: 1024px) and (max-width: 1919px) {
    /* Styles déjà bien adaptés dans ton CSS existant, quelques ajustements mineurs */
    header {
        padding: 0 80px;
    }
    .baniere {
        padding: 80px;
    }
    .marketing_section {
        padding: 60px 80px;
    }
    .services {
        padding: 40px 80px;
    }
    .services-list {
        padding: 20px 80px;
    }
    .rubrique_recherche {
        height: 75vh;
    }
    .container_bg_v {
        padding: 80px;
    }
    .formation-ent {
        padding: 0 80px;
    }
    .rubrique_thematique {
        padding: 120px 80px 80px;
    }
    .newsletter_ctn {
        padding: 0 0 20px 0;
    }
    footer {
        padding: 20px 150px;
    }

        /* =============================== Page Marketing ============================ */

    /* Section 1: Banière Marketing */
    .baniere_marketing {
        padding: 80px;
    }
    .baniere_marketing h1 {
        font-size: 36px;
    }

    /* Section 2: Resume Marketing Digital */
    .resume_marketing {
        padding: 40px 80px;
    }
    .container_mkt-dgt {
        padding: 40px 80px;
    }

    /* Section 3: Axe d'intervention */
    .container_axe {
        padding: 20px 80px;
    }

    /* Section 4: Management */
    .display-service {
        padding-left: 60px;
    }

    /*================= Page communication ================*/

    /* Sections 2-4 */
    .strategie, .communication-360, .design_graphique, .audiovisuel {
        padding: 40px 80px;
    }
    .container_strategie, .container_com-360, .container_design, .container_audio {
        padding: 40px 0;
    }

    /*================= Page solutions digitales ================*/

     /* Section 1: Bannière */
     .bgban {
        padding: 80px;
    }
    .solution_ban h1 {
        font-size: 36px;
    }
    .list-solution {
        width: 80%;
    }

    /* Section 2: Transformation digitale */
    .transformation-section {
        padding: 80px 80px 0;
    }
    .transformation-header {
        padding: 0 80px;
    }
    .trans-ctn .arc-container {
        width: 600px;
        height: 600px;
    }

    /* Section 3: Développement informatique */
    .developpement-infor > h2 {
        padding: 80px 80px 20px;
    }
    .developpement-infor .dev-header {
        padding: 0 80px;
    }
    .container-inf {
        padding: 60px 80px;
    }
    .container-inf-cpt {
        padding: 60px 80px;
    }

    /* Section 4: Développement web */
    .web-ctn {
        padding: 80px 80px 0;
    }

    /* Section 5: Développement mobile */
    .mob-ctn {
        padding: 80px;
    }

    /* Section 6: Identité graphique */
    .section-graphique {
        padding: 80px;
    }

    /* Section 7: Sécurité informatique */
    .section-securite {
        padding: 80px;
    }

    /* Section 1: Bannière */
    .bgbanformation {
        padding: 0 80px;
    }
    .formation_ban h1 {
        font-size: 56px;
    }

    /* Section 2: Introduction */
    .introduction {
        padding: 80px;
    }

    /* Section 3: Liste des formations */
    .formation_liste {
        padding: 80px;
    }

    /* Section 4: Axes de formations */
    .formation_section {
        padding: 80px 80px 0;
    }

    /* Formulaire Catalogue */
    .catalogue-ctn form {
        width: 50%;
    }

    /* Section 5: Certifications ICDL */
    .certification {
        padding: 80px;
    }

    /*=========================== Page contact ======================== */
    /* Section 1: Bannière */
    .bgbancontact {
        padding: 0 80px;
    }
    .contact_ban h1 {
        font-size: 80px;
    }

    /* Section 2: Contact Us */
    .contact-us {
        padding: 80px;
    }
    .contact-us .contact-us-left {
        height: 500px;
    }
    .contact-us .contact-us-form {
        padding: 40px;
    }
}

/* ==========================================================================
   Grand écran / TV (1920px et plus)
   ========================================================================== */
@media screen and (min-width: 1920px) {
    /* Augmentation des tailles pour les grands écrans */
    header {
        padding: 0 150px;
    }
    .baniere {
        padding: 150px;
        height: 120vh;
    }
    .baniere h1 {
        font-size: 60px;
    }
    .marketing_section {
        padding: 100px 150px;
    }
    .marketing_section h2 {
        font-size: 48px;
        padding: 0 300px;
    }
    .marketing_section h3 {
        font-size: 30px;
        padding: 0 300px;
    }
    .marketing_section p {
        font-size: 24px;
        padding: 0 300px;
    }
    .services {
        padding: 80px 150px;
    }
    .services h2 {
        font-size: 40px;
    }
    .services-list {
        padding: 50px 150px;
    }
    .list-service {
        padding: 60px;
    }
    .rubrique_recherche {
        height: 100vh;
    }
    .container_bg_v {
        padding: 150px;
    }
    .container_bg_v h2 {
        font-size: 36px;
        width: 50%;
    }
    .search-container {
        width: 50%;
    }
    .formation-ent {
        padding: 0 150px;
    }
    .rubrique_thematique {
        padding: 200px 150px 150px;
    }
    .newsletter_ctn h2 {
        font-size: 40px;
    }
    .newsletter_input-container {
        width: 30%;
    }
    footer {
        padding: 50px 300px;
    }

     /* =============================== Page Marketing ============================ */

     /* Section 1: Banière Marketing */
    .baniere_marketing {
        padding: 150px;
        height: 120vh;
    }
    .baniere_marketing h1 {
        font-size: 48px;
    }
    .btn-ctn-mark a {
        font-size: 24px;
        padding: 20px 30px;
    }
    .imgdiv-mark img {
        width: 50%;
    }

    /* Section 2: Resume Marketing Digital */
    .resume_marketing {
        padding: 80px 150px;
    }
    .resume_marketing h2 {
        font-size: 40px;
        width: 50%;
    }
    .resume_marketing > p {
        width: 50%;
        font-size: 18px;
    }
    .container_mkt-dgt {
        padding: 80px 150px;
    }
    .mkt-dgt p {
        font-size: 20px;
    }
    .mkt-dgt ul li {
        font-size: 18px;
    }

    /* Section 3: Axe d'intervention */
    .axe-intervention {
        height: 50vh;
    }
    .container_axe {
        padding: 50px 150px;
    }
    .container_axe .axe-list-ctn i {
        font-size: 50px;
        padding: 25px;
    }
    .container_axe .axe-list-ctn span {
        font-size: 48px;
    }
    .container_axe .axe-list-ctn p {
        font-size: 18px;
    }
    .axe-intervention > p {
        font-size: 18px;
        right: 150px;
    }

    /* Section 4: Management */
    .resume_marketing#marketing-management {
        padding-bottom: 100px;
    }
    .display-service {
        padding-left: 100px;
    }
    .container_mgmt .single-service {
        margin: 40px 60px;
    }
    .container_mgmt .single-service h3 {
        font-size: 26px;
    }
    .container_mgmt .single-service p {
        font-size: 18px;
    }

    /*================= Page communication ================*/

    /* Sections 2-4 */
    .strategie, .communication-360, .design_graphique, .audiovisuel {
        padding: 80px 150px;
    }
    .strategie h2, .communication-360 h2, .design_graphique h2, .audiovisuel h2 {
        font-size: 40px;
        width: 50%;
    }
    .strategie > p, .communication-360 > p, .design_graphique > p, .audiovisuel > p {
        width: 50%;
        font-size: 18px;
    }
    .container_strategie, .container_com-360, .container_design, .container_audio {
        padding: 80px 0;
    }
    .strat-com p, .mkt-com-360 p, .sol-design p, .audiodiv p {
        font-size: 20px;
    }
    .strat-com ul li, .mkt-com-360 ul li, .sol-design ul li, .audiodiv ul li {
        font-size: 18px;
    }
    .strat-com p:last-child a, .mkt-com-360 p:last-child a, .sol-design p:last-child a, .audiodiv p:last-child a {
        font-size: 18px;
        padding: 15px 25px;
    }

    /*================= Page solutions digitales ================*/

    /* Section 1: Bannière */
    .solution_ban {
        height: 80vh;
    }
    .bgban {
        padding: 150px;
    }
    .solution_ban h1 {
        font-size: 48px;
    }
    .list-solution {
        width: 60%;
    }
    .list-solution a h2 {
        font-size: 20px;
    }
    .list-solution a p {
        font-size: 16px;
    }

    /* Section 2: Transformation digitale */
    .transformation-section {
        padding: 150px 150px 0;
    }
    .transformation-section > h2 {
        font-size: 40px;
    }
    .transformation-header h3 {
        font-size: 28px;
    }
    .transformation-header p {
        font-size: 20px;
    }
    .trans-ctn, .visible-div {
        height: 120vh;
    }
    .trans-ctn .arc-container {
        width: 700px;
        height: 700px;
    }
    .trans-ctn .needle img {
        width: 250px;
    }
    .trans-ctn .content {
        height: 700px;
    }
    .trans-ctn .content h2 {
        font-size: 20px;
    }
    .trans-ctn .content ul li {
        font-size: 18px;
    }
    .cta-trans {
        width: 60%;
    }

    /* Section 3: Développement informatique */
    .developpement-infor > h2 {
        font-size: 40px;
        padding: 150px 150px 20px;
    }
    .developpement-infor .dev-header {
        padding: 0 150px;
    }
    .container-inf {
        padding: 80px 150px;
    }
    .container-inf-cpt {
        padding: 80px 150px;
        height: 130vh;
    }
    .container-inf-cpt h2 {
        font-size: 32px;
    }
    .container-inf-cpt .list-dev img {
        width: 120px;
    }

    /* Section 4: Développement web */
    .web-ctn {
        padding: 150px 150px 0;
    }
    .section-content h2 {
        font-size: 36px;
    }
    .section-content p {
        font-size: 20px;
    }

    /* Section 5: Développement mobile */
    .mob-ctn {
        padding: 150px;
    }
    .dev-mobile-header h2 {
        font-size: 40px;
    }
    .dev-mobile-header p {
        font-size: 20px;
    }
    .container-mob .list-app-type h2 {
        font-size: 24px;
    }
    .container-mob .list-app-type p {
        font-size: 18px;
    }
    .container-mob img {
        width: 70px;
    }

    /* Section 6: Identité graphique */
    .section-graphique {
        padding: 150px;
    }
    .id-graph-header h2 {
        font-size: 40px;
    }
    .id-graph-ctn h3 {
        font-size: 30px;
    }
    .id-graph-ctn p {
        font-size: 20px;
    }
    .id-graph-ctn ul li {
        font-size: 18px;
    }

    /* Section 7: Sécurité informatique */
    .section-securite {
        padding: 150px;
    }
    .securite-header h2 {
        font-size: 40px;
    }
    .securite-ctn h3 {
        font-size: 30px;
    }
    .securite-ctn p {
        font-size: 20px;
    }

    /*================= Page Formations ================*/

    /* Section 1: Bannière */
    .formation_ban {
        height: 80vh;
    }
    .bgbanformation {
        padding: 0 150px;
    }
    .formation_ban h1 {
        font-size: 72px;
    }

    /* Section 2: Introduction */
    .introduction {
        padding: 150px;
    }
    .introduction p {
        font-size: 20px;
    }
    .introduction a {
        padding: 15px 25px;
        font-size: 18px;
    }
    .img-intro img {
        width: 70%;
    }

    /* Section 3: Liste des formations */
    .formation_liste {
        padding: 150px;
    }
    .ctn-liste-form .hexagon {
        width: 300px;
        height: 320px;
    }
    .ctn-liste-form .hexagon h3, .ctn-liste-form .hexagon h2 {
        font-size: 22px;
    }
    .ctn-liste-form .hexagon p {
        font-size: 16px;
    }

    /* Section 4: Axes de formations */
    .formation_section {
        padding: 150px 150px 0;
    }
    .heading_container h2 {
        font-size: 48px;
    }
    .formation_section .box {
        height: 250px;
    }
    .formation_section .box .img-box i {
        font-size: 50px;
    }
    .formation_section .box .detail-box h5 {
        font-size: 20px;
    }
    .formation_section .box .detail-box p {
        font-size: 18px;
    }
    .ctn_btn-axe a {
        padding: 18px 30px;
        font-size: 18px;
    }

    /* Formulaire Catalogue */
    .catalogue-ctn form {
        width: 40%;
    }
    .catalogue-ctn form input, .catalogue-ctn form textarea {
        font-size: 22px;
        padding: 25px 15px;
    }
    .catalogue-ctn form button {
        font-size: 20px;
    }

    /* Section 5: Certifications ICDL */
    .certification {
        padding: 150px;
    }
    .certification .heading_container h2 {
        font-size: 48px;
    }
    .certification p {
        font-size: 20px;
    }
    .certificat-list-ctn .certificat-list h3 {
        font-size: 16px;
    }
    .certificat-list-ctn .certificat-list ul li {
        font-size: 16px;
    }

    /*=========================== Page contact ======================== */
    /* Section 1: Bannière */
    .contact_ban {
        height: 80vh;
    }
    .bgbancontact {
        padding: 0 150px;
    }
    .contact_ban h1 {
        font-size: 110px;
        padding: 100px;
    }

    /* Section 2: Contact Us */
    .contact-us {
        padding: 150px;
    }
    .contact-us .contact-us-left {
        height: 600px;
    }
    .contact-us .contact-us-form {
        padding: 60px 50px;
    }
    .contact-us .contact-us-form h2 {
        font-size: 40px;
    }
    .contact-us .contact-us-form p {
        font-size: 16px;
    }
    .contact-us .form .form-group input,
    .contact-us .form .form-group textarea {
        font-size: 16px;
        height: 60px;
        padding: 0 20px;
    }
    .contact-us .form .form-group textarea {
        height: 120px;
        padding: 20px;
    }
    .contact-us .single-info {
        padding: 50px 70px;
        height: 180px;
    }
    .contact-us .single-info i {
        font-size: 50px;
    }
    .contact-us .single-info .content h3 {
        font-size: 22px;
    }
    .contact-us .single-info .content p {
        font-size: 16px;
    }

}