/* -------------------------------
    Responsive Design - Mobile & Tablette
   ------------------------------- */

/* === 1. Mobile Portrait (≤ 480px) === */
@media screen and (max-width: 480px) {
    /*  * { outline: 1px solid red !important; }  */
    body,
    .site-content,
    .site-header-inner { box-sizing:border-box; }

    /* Header */
    header#masthead { padding: 0px; }
    .supbaroptions,
    .swiper,
    #scrollToTop,
    .parallax-bws { display:none !important; }
    .logo { width: 120px; height: auto; }
    nav.main-menu { display: none; }
    .mobile-toggle { display: block; }
    .site-branding { width:40px; margin-left: 60px; margin-top: 5px; }
    .site-branding img { width:100%; height:auto; }
    span.titre-header-right-text { font-size:22px;}
    .header-right-logo { width: calc(100% - 100px); }
    .header-right-text { padding-left: 10px; text-align:center; height: 56px; }
    span.sstitre-header-right-text { font-size: 14px; }
    .site-header-inner { padding-left: 10px; padding-right: 10px; align-items: flex-start; }


    /* Contenu principal */
    #content,
    .sidebar { width: 100%; float: none; }
    #content { padding:0; }
    .imagesbd { width:100%; flex-direction: column; height: auto; box-sizing: border-box; }
    .imagesbd img { width:100%; height:auto; }
    [data-animate-on-scroll] { visibility: visible; }
    .pourquoibws,
    .cartes-bandeau { flex-direction: column; height:auto; align-items: center; }
    .carte-bandeau { margin: 10px auto; }
    #thumbs-up-animation,
    .btninsidebluebann { display:none; }
    .txtinsidebluebann { margin-left:0px; padding-right: 10px; }
    .txtinsidebluebann .titlebluebann { font-size: 26px; }
    .txtinsidebluebann p { font-size: 14px; }
    .imginsidebluebann { width: calc(100% + 30px); margin-left: -30px; }
    .imginsidebluebann img { max-width:202px; height:auto; }
    .nk-awb .nk-awb-inner, 
    .nk-awb .nk-awb-overlay, 
    .nk-awb .nk-awb-wrap { width:100%;}
    .pourquoibws,
    #pourquoibws-wrapper { width: 100%; height: auto; }
    .wp-block-nk-awb.bluebann { margin-top:0; }
    .textbdpt,
    .textbdac,
    .textbdqe { transition:none; position:static; display:block; opacity:1; width:100%; height:auto; margin: 5px auto 10px auto; border: none; }
    .imagebdqe,
    .imagebdac,
    .imagebdpt { width: 100%; height: auto; }
    .personnage-bd img { margin:0 auto; }
    p.textpresentationbd { padding: 0 25px; margin-left:0; width:100%; }
    .personnage-bd { display: flex; }
    .quotesafter {bottom: -50px; width: 25px; height: 25px; right: 12px; }
    .quotesbefore { left: -46px; top: -41px; width: 25px; height: 25px; }
    .textintroglobal { margin: 1px auto 80px auto; text-indent:0; }
    #post-24 h1.entry-title { margin: 45px auto 0 auto; }
    /* Contenu principal -- Prestations Web */
    .globe-orbit-wrap { display:none; }
    #animtitreprestationweb .text { top: -4px; bottom:unset; transform: translateX(-95%); font-size: 20px; }
    #animtitreprestationweb .overlay { display:none; }
    .titreprestationweb { height: 75px; }
    .groupprestaweb { margin-top: 30px; flex-direction: column; }
    .groupprestawebcentre { position: static; width: 100%; }
    .groupprestawebcentre span.txttitreagence { font-size: 40px; }
    .groupprestawebcentre .backgroundtxt { left: 10px; width: calc(100% - 10px); }
    .groupprestawebcentre span.txtbigred { font-size: 46px; }
    #groupprestaweb01 img { position: static; float: left; width: 110px; margin: 0 5px 5px 4px; }
    .groupprestaweb .groupprestawebelemt { height: 112px; width: 100%; }
    #groupprestaweb01 .txtgroupprestaweb { margin: 0 10px 0px 10px; }
    #groupprestaweb02 .txtgroupprestaweb { margin: 20px 100px 0 10px; }
    #groupprestaweb02 img { position: relative; right: 0; float: right; width: 96px; top: -118px; }
    #groupprestaweb03 .txtgroupprestaweb { margin: 0px 10px 0 110px; }
    #groupprestaweb03 img { position: relative; top: -74px; left: 10px; width: 90px; }
    .txtgroupprestaweb { font-size:14px; }
    #groupprestaweb03 { margin-top: 12px; height: 93px; }
    #groupprestaweb04 { margin-top: 0px; height: 85px; }
    #groupprestaweb04 img { position: relative; top: -97px; right: 3px; width: 110px; float: right; left: unset; }
    #groupprestaweb04 .txtgroupprestaweb { margin: 8px 122px 0 10px; }
    h3.titreh3bws,
    h3.titreh3bwsl,
    h3.titreh3bws { font-size: 29px; text-shadow: 2px 2px 3px rgba(73, 72, 72, 0.8); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; margin: -26px 15px 0 0; text-align:right;}
    .nk-awb-wrap-content { width:100%; }
    .wp-block-nk-awb { margin-top: 50px; }
    .contenubandeaux { display: flex; flex-direction: column; }
    .contenubandeaux .imgsitevitrine {position: relative; top: -1px; right: 0px; overflow: hidden; }
    .contenubandeaux .imgsitevitrine img { margin-left: -174px; }
    .wp-block-nk-awb { padding: 20px 0; }
    .contenubandeaux .txtsitevitrine { margin: 10px; text-align: justify; }
    .prestawebcol { box-sizing:border-box; width: 100%; margin-top: 30px; padding:0 10px; }
    #prestawebvitrine,
    #prestawebecomm { display:none; }
    .contenubandeaux .imgsitevitrine img { margin-left: -71px; }
    #bwsecommerce .imgsitevitrine { position: relative; top: 7px; left: 0px; }
    #bwsecommerce .txtsitevitrine { margin: 10px; text-align:justify; }
    h3#h3delegationbws { font-size: 24px; margin-top: -13px; }
    .contenubandeaux .imgsitevitrine { position: relative; top: 15px; height: 300px; }
    .contenubandeaux #idecommerce.imgsitevitrine { height: 238px; }
    .contenubandeaux #idvitrine.imgsitevitrine { height: 300px; }
    .contenubandeaux #idvitrine.imgsitevitrine img { margin: 0px 0px 0px 0px; width: 135%; position: relative; right: 136px; }
    .contenubandeaux .imgsitevitrine img { margin: -40px 0px 0px 0px; width: 100%; }
    #delegationbws .txtsitevitrine { margin: 20px 10px 10px 10px; }
    .prdelegationtxtcol { width: 100%; }
    .prdelegationtxtcol .prdelegationimg { width: 110px; min-width: 110px; }
    .prdelegationtxtcol .prdelegationtxt { padding:0px 5px; text-align: left; }
    .orangeinfos { color: #000000; }
    #bwsautres #idautrespresta.imgsitevitrine { position: relative; top: 12px; left: 0px; height: 235px; }
    .blocitemsautres { margin: 20px auto; flex-direction: column; align-items: center; }
    .blocitemsautres .itemautres { width: 90%; margin-bottom: 30px; }
    .txtbloccontact { font-size:56px; width: 100%; text-align: center; margin-bottom: -73px; }
    .infosautres { margin: -1px auto 36px auto; }
    #bwsautres .txtsitevitrine { margin:10px; }
    .groupprestawebcentre .backgroundellipse { width: 95%; }
    /* Contenu principal -- Marketing */
    h2.titremarketing { font-size: 4rem; -webkit-text-stroke: 3px #d6f4f4; width:97%; }
    .imgpresentationmarketing { width:100%; margin: 10px 0px 50px 0px; height: auto; }
    .imgpresentationmarketing::after,
    .designgraphique::after { display:none; }
    .imgpresentationmarketing img { width:100%; height:auto; }
    body.page-id-12 { background-size: 66%; }
    .designgraphique { margin: 122px auto 80px auto; flex-direction: column; width: 100%; height: auto;  }
    .sweet-title span:nth-child(1) { padding-right:0; }
    .sweet-title span:before { top:0; left:0; }
    .textdesigngraphique,
    .textcreacontenus { padding: 50px 10px 10px 10px; width:100%; height:auto; }
    .imgdesigngraphique,
    .textcreacontenus img.imgcreacontenu { width: 100%; height: auto; margin:20px 0; }
    /* Contenu principal -- Conseil et formation */
    #titre-ui .text-titre-ui { font-size: 2rem; width: 100%; left: 167px; top: 26px; }
    .titreconseilformation { width: 80%; margin:30px auto; min-height: 51px; }
    .contenairfaisabilite,
    .contenairstrategie,
    .contenairwordpress,
    .contenairmagento { width: 96%; height: auto; padding:20px 10px; box-sizing:border-box; }
    .contenairfaisabilite { margin:50px 0 0 2%; }
    .contenairstrategie { margin:250px 0 0 2%; text-align:left; }
    .contenairwordpress { margin:250px 0 0 2%; }
    .imgfaisabilite { top:unset; right: 20px; bottom: -240px; width: 300px; height: 300px; }
    .wave { display:none; }
    .contenairstrategie h3 { margin: 20px auto 20px auto; }
    .liststrategie li, .listmagento li { padding-left: 35px; background-image: url(../../../uploads/2025/07/puce.png); background-position: top left; }
    .txtstrategie, .txtmagento { text-align:left; }
    .contenairstrategie::after { right: 0px; }
    .txtstrategie > .liststrategie:nth-of-type(2) { margin-bottom:200px; }
    .imgstrategie { left: 61px; top: 1080px; width: 200px; height: 200px; } 
    .contenairwordpress::after { left: -22px; }
    .imgwordpress { top:unset; right:unset; left: -6px; bottom: -212px; transform: rotate(-15deg); width:150px; height:150px; }
    .contenairmagento { margin:250px 0 172px 2%; }
    .contenairmagento::after { right: -9px; }
    .contenairmagento h3 { margin: 23px auto 20px auto; }
    .imgmagento { top:unset; left: 194px; width: 150px; bottom: -140px; height: 150px; transform: rotate(15deg); }
    /* Contenu principal -- Référencement */
    h2.titreseo { font-size: 45px; text-align:center; }
    .blocseo { flex-direction: column; margin: 120px auto 140px auto; }
    .imgseo { width:90%; margin: 0 auto 15px auto; }
    .textseo::before { content:""; width: 100%; height:1px; border: 10px solid; border-image-slice: 1; border-width: 5px; border-image-source: linear-gradient(to right, #4285F4, #EA4335,#FBBC05,#34A853,#4285F4); border-bottom: 0; border-right: 0; border-left: 0; position: relative; top: -14px; display: block; }
    .textseo { width: 94%; border-top: 0; border-left: 0;  padding: 15px 12px; margin-left: 3%; }
    .bloctitreseo { left:0; }
    .bloctitreseo h3 { font-size: 31px; width:100%; text-align:center; }
    #strategieseo .bloctitreseo { position:relative; margin-bottom:-12px; }
    #strategieseo .textseo::after,
    #redactionseo .textseo::after { content:""; width: 100%; height:1px; border: 10px solid; border-image-slice: 1; border-width: 5px; border-image-source: linear-gradient(to right, #4285F4, #EA4335,#FBBC05,#34A853,#4285F4); border-top: 0; border-right: 0; border-left: 0; position: relative; bottom: -15px; display: block; margin-bottom: 10px; }
    .textseo.alignright { text-align: left; border-image-slice: 0; }
    .listseoreverse li { background-image: url(../../../uploads/2025/07/puce.png); padding-left: 35px; background-position: top left; }
    #rapportsseo.blocseo { margin: 120px auto 60px auto; }
    /* Contenu principal -- Contact */
    .titrecontact { height: 97px; margin:20px auto; }
    .bloclienscontact { flex-direction: column; }
    .bloclienscontactinfos, .bloclienscontacthoraires { width:100%; }
    #googlemap-contact { display:none; }
    .imgcontact { top:unset; right:unset; bottom:323px; left:50px; }
    .bloclienscontacthoraires { height: 300px; margin-top: 320px; }


    /* Footer */
    footer { font-size: 14px; }
    .logobwsfooter { display:block; width:100%;}
    .contentfooter { flex-direction: column; }
    .contentfooterleft,
    .contentfootercenter,
    .contentfooterright { width:100%; }
    footer .main-navigation ul li { justify-content: space-evenly; }
    .hermineseparation { background-position: bottom center; }
}

/* === 2. Tablette Portrait (768px - 1024px) === */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    header {
        padding: 20px;
    }

    .logo {
        width: 150px;
    }

    .content {
        width: 70%;
        float: left;
    }

    .sidebar {
        width: 30%;
        float: right;
    }

    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* === 3. Interdire l'affichage paysage mobile/tablette === */
@media screen and (orientation: landscape) and (max-width: 1024px) {
    body::before {
        content: "Veuillez passer en mode portrait pour consulter ce site.";
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #000;
        color: #fff;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 18px;
        padding: 20px;
    }

    body > *:not(style) {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    #mobile-menu-toggle {
        display: block;
    }

    #site-navigation {
        display: none;
    }
}