/*
Theme Name:   Breizh Web Studio BaseTheme
Theme URI:    https://www.breizhwebstudio.fr 
Author:       Breizh Web Studio
Author URI:   https://www.breizhwebstudio.fr
Description:  Thème de base de l'agence Breizh Web Studio
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  breizhwebstudio-base
*/

/* ==========================================================================
Theme Styles
========================================================================== */

:root {
    --color-background: #ffffff;
    --stroke-width: calc(1em / 16);
    --font-size: 120px;
    --font-weight: 700;
    --letter-spacing: calc(1em / 8);
}

@font-face {
    font-family: 'Chopin';
    src: url('fonts/Chopin-Light.woff2') format('woff2'),
        url('fonts/Chopin-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
        format("woff2");
    font-family: "Meta";
    font-style: normal;
    font-weight: normal;
}

body {
    display: flex;
    flex-direction: column; /* Aligner les enfants (header, content, footer) verticalement */
    width: 100%;
    align-items: stretch; /* Étirer les enfants sur toute la largeur par défaut */
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    font-family: sans-serif;
    overflow-x: hidden;
}

.no-padding { padding:0 !important;}
.flexdirection-row {flex-direction: row !important;}
.site-content {
    display: flex;
    flex-direction: column; /* Aligner le contenu principal verticalement */
    width: 100%;
    max-width: 1200px; /* Largeur maximale du contenu principal */
    margin: 0 auto; /* Centrer le contenu principal */
    padding: 0px 20px 20px 20px;
    flex-grow: 1; /* Permet au contenu principal de prendre l'espace disponible */
}

/* En-tête (header) */
#masthead {
    background-color: #f4f4f4;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* L'en-tête prend toujours 100% de la largeur */
    flex-shrink: 0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.supbaroptions {
    width:100%;
    background-color:black;
    height:40px;
    line-height:25px;
    z-index:10;
    box-sizing:border-box;
}

.supbarsocial {
    width:49%;
    padding-left:25px;
    box-sizing:border-box;
    text-align:left;
    display: inline-flex;
    flex-direction: row;
    vertical-align:top;
}

.supbarinfos {
    width:49%;
    padding-right:25px;
    box-sizing:border-box;
    text-align:right;
    display: inline-flex;
    flex-direction: row;
    color:white;
    justify-content: flex-end;
    vertical-align:top;
}

.buttonbws {
    display: flex;
    align-items: center;
    width: 170px;
    position: relative;
    padding: 0px 15px 0px 0px;
    box-sizing: border-box;
    color: #FFF;
    background: #000;
    background-clip: padding-box;
    border: solid 2px transparent;
    border-radius: 1em;
    justify-content: flex-end;
    margin-top: 5px;
}

.buttonbws::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -2px; 
    border-radius: inherit; 
    background: #E78F3D;
    background: linear-gradient(150deg,rgba(231, 143, 61, 1) 0%, rgba(201, 75, 152, 1) 33%, rgba(24, 156, 214, 1) 67%, rgba(147, 246, 127, 1) 100%);
}

.headerfb {
    width:29px;
    height:29px;
    background-color: #FFF;
    border-radius:8px;
    overflow:hidden;
    margin-top: 5px;
}

.headerfb img {
    width:29px;
    height:29px;
}

.header-right-logo {
    width:calc(100% - 128px);
    height:100%;
}

.header-right-text {
    width:100%;
    height:85px;
    text-align:left;
    padding-left:20px;
    box-sizing:border-box;
    font-family: 'Chopin';
}

#scrollToTop {
    position: fixed;
    bottom: 50px;
    left: calc(50% + 620px);
    z-index: 999;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#scrollToTop.show {
    opacity: 0.3;
    visibility: visible;
}

#scrollToTop.show:hover {
    opacity: 1;
}

span.titre-header-right-text {
    font-size:28px;
    font-weight:bold;
    letter-spacing: 0.15em;
}

span.sstitre-header-right-text {
    font-size:18px;
}

.site-header-inner {
    max-width: 1200px; /* Largeur maximale du contenu de l'en-tête */
    margin: 0 auto; /* Centre le contenu de l'en-tête */
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Assure que le conteneur interne prend toute la largeur de l'en-tête (jusqu'à la max-width) */
}

.site-title a {
    color: #333; /* Couleur du titre du site */
    text-decoration: none; /* Supprime le soulignement du lien */
    font-size: 1.5em; /* Taille de la police du titre */
    font-weight: bold; /* Texte en gras */
}

.site-description {
    color: #777; /* Couleur de la description du site */
    font-size: 0.9em; /* Taille de la police de la description */
    margin-top: 5px; /* Marge au-dessus de la description */
}

/* Navigation principale */
.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none; /* Supprime les puces de la liste */
    display: flex; /* Utilisation de Flexbox pour aligner les éléments du menu horizontalement */
    justify-content: flex-end;
}

.main-navigation li {
    margin-left: 15px; /* Espacement entre les éléments du menu */
}

.main-navigation li:first-child {
    margin-left: 0; /* Supprime la marge à gauche du premier élément */
}

.main-navigation a {
    color: #3453f1; /* Couleur des liens du menu */
    text-decoration: none; /* Supprime le soulignement des liens */
    padding: 0px 7px; /* Marge intérieure autour des liens */
    display: block; /* Rend les liens cliquables sur toute leur surface */
}

.main-navigation a:hover {
    color: #007bff; /* Couleur des liens au survol */
}

/* Styles pour les options de l'en-tête */
.fullwidth-header {
    max-width: none !important;
    width: 100%;
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: #fff; /* Assure un fond blanc pour l'en-tête sticky */
}

/* Style à appliquer lorsque l'en-tête devient sticky (par exemple, une légère ombre) */
body.admin-bar .sticky-header {
    top: 32px; /* Compense la barre d'admin WordPress si elle est visible */
}

@media screen and (max-width: 782px) {
    body.admin-bar .sticky-header {
        top: 46px; /* Compensation pour la barre d'admin mobile */
    }
}

/* Classe pour rendre un bloc spécifique pleine largeur */
.full-width-block {
    width: 100%;
    max-width: none !important;
}

/* Si le bloc pleine largeur contient du contenu textuel, tu pourrais vouloir le centrer et limiter sa largeur */
.full-width-block > .wp-block-group__inner-container,
.full-width-block > .wp-block-columns {
    max-width: 1200px; /* Largeur maximale du contenu à l'intérieur du bloc pleine largeur */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.fullwidth-carousel {
    width: 100%;
    max-width: none;
}

/* Si tu veux limiter la largeur du contenu à l'intérieur du carrousel pleine largeur */
.fullwidth-carousel .swiper-wrapper {
    max-width: 1200px; /* Ou la largeur que tu souhaites */
    margin: 0 auto;
}

/* *************************************************
    Le CSS du slider appelé sur la page d'accueil 
************************************************** */

.full-width-section {
    width: 100vw; /* Prend toute la largeur de la fenêtre */
    position: relative; /* Pour le positionnement absolu des fonds si nécessaire */
    /* Ajoute des marges ou des paddings verticaux selon tes besoins */
}

.full-width-section .container {
    max-width: 1200px; /* Limite la largeur du contenu interne */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.swiper-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    box-sizing:border-box;
}

.slide-content {
    width: 100%; /* Limite la largeur du contenu dans la slide */
    height:100%;
    margin: 0; /* Centre le contenu horizontalement */
}

.slide-content h3 {
    font-size: 2em;
    margin-bottom: 15px;
}

.slide-content p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}

.slide-content ul {
    list-style: none;
    padding: 0;
}

.slide-content ul li {
    margin-bottom: 10px;
}

/* Styles de base pour le carrousel */
.swiper {
    width: 100%;
    height: auto; /* La hauteur sera définie inline */
    margin-bottom: 80px;
    margin-top: 20px;
}

/* Styles pour le carrousel en pleine largeur */
.full-width-section.fullwidth-carousel-wrapper {
    width: 100vw; /* Prend toute la largeur de la fenêtre */
    position: relative; /* Pour un éventuel positionnement absolu du fond */
    left: 0;
    right: 0;
    margin-left: calc(-50vw + 50%); /* Astuce pour centrer le bloc pleine largeur */
    margin-right: calc(-50vw + 50%); /* tout en évitant le scroll horizontal */
    margin-bottom: 0; /* Supprime la marge par défaut du carrousel pleine largeur */
}

.full-width-section.fullwidth-carousel-wrapper .swiper-wrapper {
    width: 100%;
}

.phoneheader {
    width:27px;
    height:28px;
    position:absolute;
    top:-5px;
    left:7px;
}

.phoneheader img {
    width:100%;
}

/* ==========================================================================
Animations des sliders
========================================================================== */
.slide-content {box-shadow:#000 0px 0px 5px;}

/*  Slide n°1  */
#slidenum1.slide-content h3 {
    opacity:0;
    font-size:35px;
    font-weight:bold;
    color:#404be1;
    position:relative;
    top:5px;
    left:10%;
    animation: slide-move-left-to-right-with-opacity 0.9s ease-in-out forwards;
}

#slidenum1.slide-content .list-infos {
    font-size:20px;
    position:relative;
}

#slidenum1.slide-content .list-infos.first-item-list {
    opacity:0;
    top:30px;
    left:12%;
    animation: slide-move-left-to-right-with-opacity 0.9s ease-in-out forwards;
    animation-delay: 0.5s;
}

#slidenum1.slide-content .list-infos.second-item-list {
    opacity:0;
    top:40px;
    left:14%;
    animation: slide-move-left-to-right-with-opacity 0.9s ease-in-out forwards;
    animation-delay: 0.8s;
}

#slidenum1.slide-content .list-infos.third-item-list {
    opacity:0;
    top:50px;
    left:16%;
    animation: slide-move-left-to-right-with-opacity 0.9s ease-in-out forwards;
    animation-delay: 1.1s;
}

#slidenum1.slide-content .list-infos.fourth-item-list {
    opacity:0;
    top:60px;
    left:18%;
    animation: slide-move-left-to-right-with-opacity 0.9s ease-in-out forwards;
    animation-delay: 1.4s;
}

#slidenum1.slide-content .slide-image-first{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    background-image: url("../../uploads/2025/05/slide-img-background-slide1.jpg");
    background-position: top right;
    background-repeat:no-repeat;
}

/*  Slide n°2  */


/* ==========================================================================
paragraphe n°1 home
========================================================================== */
#post-24 h1.entry-title {
    margin:0 auto;
    width:80%;
    font-family: 'Chopin';
    font-size: 35px;
}

.textintroglobal {
    position:relative;
    margin:-29px auto 120px auto;
    width:80%;
    text-align:justify;
    text-indent:295px;
    line-height:23px;
}

/* ==========================================================================
bandeau jaune home
========================================================================== */
.cartes-bandeau {
    width:100%;
    height:287px;
    margin:20px auto;
    display:flex;
    justify-content: space-evenly;
}

.carte-bandeau {
    height:287px;
    display:block;
    width:268px;
    background-color: #FFF;
}

.image-bandeau-jaune {
    height:180px;
    width:100%;
    text-align:center;
}

.titre-bandeau-jaune {
    width:100%;
    height:30px;
    text-align:center;
    font-weight:bold;
    line-height:30px;
    font-size:22px;
}

.texte-bandeau-jaune {
    width:100%;
    text-align:center;
    font-size: 14px;
    padding: 5px 15px;
    box-sizing: border-box;
}

.bandeau-parallax {
    width:100%;
    height:650px;
}

/* ==========================================================================
bd home
========================================================================== */
.pourquoibws {
    width:100%;
    height:340px;
    display:flex;
    margin:30px auto;
}

.presentationbd {
    text-align:right;
}

p.titrepresentationbd {
    font-size:27px;
    font-family:'Chopin';
    padding-right:25px;
    box-sizing:border-box;
}

span.titrebwspresentationbd {
    font-size:45px;
}

p.textpresentationbd {
    width:90%;
    margin-left:10%;
    text-align:justify;
    font-size: 18px;
    line-height: 27px;
    padding-right:25px;
    box-sizing:border-box;
}

.imagesbd {
    width:1110px;
    height:380px;
    margin:20px auto;
    border:1px solid #000;
    box-shadow:5px 5px 15px rgba(0,0,0,0.4);
    display:flex;
}

.imagebdqe, .imagebdac, .imagebdpt {
    position:relative;
    width:370px;
    height:380px;
}

.textbdqe, .textbdac, .textbdpt {
    position:absolute;
    background-color:white;
    border:1px solid #272626;
    border-radius:8px;
    text-align:justify;
    box-sizing:border-box;
    padding:5px 8px;
    max-width:370px;
    opacity:0;
    transform:translateY(-50px);
    transition:all 0.5s ease-in;
}

.imagebdqe:hover .textbdqe, .imagebdac:hover .textbdac, .imagebdpt:hover .textbdpt {
    opacity:1;
    transform:translateY(0px);
}

.textbdqe {
    top: 345px;
    left: -35px;
    z-index:1010;
}

.textbdac {
    top:372px;
    z-index:1010;
}

.textbdpt {
    top: 345px;
    right: -35px;
    z-index:1010;
}

.titrebd {
    text-align:center;
    width:100%;
    font-weight:bold;
    font-size:18px;
    line-height:26px;
    margin-bottom:10px;
}

.imagebdqe .titrebd {
    border-bottom:5px solid rgb(26, 151, 68);
}
.imagebdac .titrebd {
    border-bottom:5px solid rgb(223, 193, 24);
}
.imagebdpt .titrebd {
    border-bottom:5px solid rgb(230, 144, 17);
}

.wp-block-nk-awb {
    min-height: 250px;
}

/* ==========================================================================
bannière bleue home
========================================================================== */

.wp-block-nk-awb.bluebann {
    margin-top:160px;
    box-sizing:border-box;
    padding:0px;
    clip-path: ellipse(100% 50% at 50% 50%);
}

.htmlinsidebluebann {
    width:100%;
}

.animinsidebluebann {
    width:220px;
    height:120px;
    margin:10px 0 0 120px;
    background-color:white;
    position:relative;
    padding-top: 5px;
    background-image: url("../../uploads/2025/05/background-buage.jpg");
    background-repeat:no-repeat;
    background-position:0 0;
    animation: nuage-background 20s ease-in-out infinite;
}

.animinsidebluebann img {
    z-index:950;
}

.imginsidebluebann {
    width:100%;
    height:375px;
    display:flex;
    color:white;
}

.txtinsidebluebann {
    margin-left:100px;
}

.txtinsidebluebann .titlebluebann {
    text-align:left;
    font-size:46px;
    width:100%;
    font-weight:bold;
    margin-top:30px;
}

.txtinsidebluebann p {
    text-align:justify;
    font-size:20px;
}

.txtinsidebluebann button {
    padding: 11px 31px;
    font-size: 20px;
    border-radius: 25px;
    background-color: #4adda8;
    color: #000;
    border: none;
    margin-top:30px;
}

/* ==========================================================================
FOOTER 
========================================================================== */

/* Pied de page (footer) */
#colophon {
    background-color: #000; /* Couleur d'arrière-plan du pied de page */
    color: #fff; /* Couleur du texte du pied de page */
    text-align: center; /* Alignement du texte au centre */
    font-size: 0.9em; /* Taille de la police du pied de page */
    border-top:4px solid #333;
}
#colophon .site-content {
    padding-bottom:0px;
}
.contentfooter {
    width:100%;
    min-height: 450px;
    background-color:#000;
    display:flex;
}
.contentfooterleft {
    width:40%;
    height:100%;
    box-sizing:border-box;
    padding:4px 0 15px 15px;
    text-align:left;
}
.contentfootercenter {
    width:30%;
    height:100%;
    box-sizing:border-box;
    padding:70px 10px 15px 10px;
    text-align:center;
}
.contentfooterright {
    width:30%;
    height:100%;
    box-sizing:border-box;
    padding:4px 15px 15px 0px;
    text-align:right;
}
.site-info{
    background-color:#333;
    padding:10px 0 10px 0;
}
.site-info a {
    color: #fff; /* Couleur des liens dans le pied de page */
    text-decoration: none; /* Supprime le soulignement des liens */
}

.site-info a:hover {
    text-decoration: underline; /* Souligne les liens au survol */
}
.titrecontentfooterleft {
    color:#7d85e9;
    font-size:16px;
    padding-left:30px;
    height:26px;
    line-height:26px;
    width:100%;
    box-sizing:border-box;
    background-repeat:no-repeat;
    background-position: bottom left;
    margin-bottom:5px;
    padding-top: 7px;
    font-weight: bold;
    margin-top: 20px;
}
.titrecontentfooterleft#titrecontentfooteradresse {
    background-image: url("../../uploads/2025/05/footer-adresse-logo.png");
}
.titrecontentfooterleft#titrecontentfootercontact {
    background-image: url("../../uploads/2025/05/footer-contact-logo.png");
}
.titrecontentfooterleft#titrecontentfooterhoraires {
    background-image: url("../../uploads/2025/05/footer-horaires-logo.png");
}
.txtcontentfooterleft {
    font-size:18px;
    color:white;
}
span.smalltxt1 {
    font-size:14px;
}
.logobwsfooter {
    width:100%;
    box-sizing:border-box;
    height:128px;
    padding-left:128px;
    background-repeat:no-repeat;
    background-position: bottom left;
    background-image: url("../../uploads/2025/05/logo-bws-footer.jpg");
    margin:25px 0 20px 0;
    padding-top:15px;
    font-family: 'Chopin';
}
footer .main-navigation ul {
    display:block;
    margin-top:50px;
}
footer .main-navigation ul li {
    display:flex;
    width:100%;
    line-height:20px;
    text-align:right;
    justify-content: flex-end;
    font-size:18px;
    margin:0 0 15px 0;
    font-weight: bold;
}
footer .main-navigation ul li a,
footer .main-navigation ul li a:link,
footer .main-navigation ul li a:visited {
    color:#7d85e9;
}
.hermineseparation {
    background-repeat:no-repeat;
    background-position: bottom right;
    background-image: url("../../uploads/2025/05/hermine-footer.jpg");
    width:100%;
    height:39px;
    margin:10px 0 10px 0;
}
footer .main-navigation ul#menu-footer {
    display:block;
    margin-top:0px;
}

/* Message bloquant si orientation paysage */
.rotate-notice {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    color: #333;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    font-size: 1.5rem;
    text-align: center;
    padding-top: 40vh;
    box-sizing: border-box;
}

/* 🔒 Restriction paysage uniquement sur écrans ≤ 1024px */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .content {
        display: none;
    }

    .rotate-notice {
        display: block;
    }
}

/* Responsive portrait mobile/tablette */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .content h1 {
        font-size: 1.8rem;
    }

    .content p {
        font-size: 1rem;
    }
}

/* Appliquer uniquement à la page avec ID 9 */
body.page-id-9 {
    position: relative;
    overflow-x: hidden;
    background-color: #fff;
}

body.page-id-9 h2{
    position:absolute;
    font-size: 72px;
    color: rgb(26, 16, 54);
    border-bottom: 1px solid rgb(26, 16, 54);
    text-transform: uppercase;
}

body.page-id-12 {
    background-color: #000000;
    background-image: url(../../uploads/2025/06/body-background-marketing.jpg);
    background-repeat:repeat-y;
    background-position: center;
}

/* body page "conseil & formation" */
body.page-id-15 {
    perspective: 800px;
}

.groupprestaweb {
    width:100%;
    position:relative;
    display:flex;
    margin-top:50px;
    flex-direction: row;
    flex-wrap: wrap;
}

.groupprestaweb .groupprestawebelemt {
    width:50%;
    box-sizing:border-box;
    height:250px;
    position:relative;
}

#groupprestaweb01 img{
    position:absolute;
    top:0;
    left:0;
}

#groupprestaweb01 .txtgroupprestaweb{
    margin:0 10px 0 266px;
    text-align:justify;
}

#groupprestaweb02 img{
    position:absolute;
    top:80px;
    right:0;
}

#groupprestaweb03{
    margin-top:57px;
}
#groupprestaweb04{
    margin-top:60px;
}

#groupprestaweb02 .txtgroupprestaweb{
    margin:100px 223px 0 20px;
    text-align:justify;
}

#groupprestaweb03 img{
    position:absolute;
    top: 80px;
    left: 50px;
}

#groupprestaweb03 .txtgroupprestaweb{
    margin:0px 80px 0 0;
    text-align:justify;
}

#groupprestaweb04 img{
    position:absolute;
    top: 58px;
    left: -75px;
}

#groupprestaweb04 .txtgroupprestaweb{
    margin:95px 0px 0 153px;
    text-align:justify;
}

.groupprestawebcentre {
    position: absolute;
    top: 195px;
    left: calc(50% - 235px);
    width: 470px;
    height: 150px;
}

.groupprestawebcentre .backgroundellipse {
    width: 100%;
    height: 100%;
    clip-path: ellipse(49% 39% at 50% 50%);
    background-color: #ffd2cc;
    transform: rotate(11deg);
    opacity:0.3;
    z-index: 1;
}

.groupprestawebcentre span.txtbigred{
    font-size: 80px;
    font-weight: bold;
    color: red;
    line-height: 13px;
}

.groupprestawebcentre span.txttitreagence{
    font-size: 54px;
    font-family: 'Chopin';
}

.groupprestawebcentre .backgroundtxt{
    position:absolute;
    width:100%;
    height:100%;
    top:10px;
}

.contenubandeaux {
    position:relative;
    width:100%;
    height:auto;
}

.contenubandeaux .imgsitevitrine {
    position:absolute;
    top:-5px;
    right:10px;
}

.contenubandeaux .txtsitevitrine {
    position:relative;
    margin:33px 416px 115px 67px;
    text-align:right;
    line-height:20px;
}

.contenubandeaux .txtsitevitrine span.titreparagraphe {
    color:#829bd8;
    font-size:20px;
    line-height: 35px;
    font-weight:bold;
}

h3.titreh3bws {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size:80px;
    color:white;
    text-align:right;
    margin: -52px 20px 0 0;
}

h3.titreh3bwsl {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size:80px;
    color:white;
    text-align:left;
    margin: -52px 20px 0 0;
}

.prestawebcol {
    width:49%;
    margin-top:60px;
    display:inline-block;
    line-height:28px;
    vertical-align: top;
}

.prestawebcoltitre {
    color:#f1a532;
    font-size:22px;
    margin:10px 0 15px 0;
    font-weight:bold;
}

.prestawebcoltxtcenter {
    text-align:center;
    margin-top:30px;
    line-height:20px;
    font-weight:bold;
}

.prestawebcoltxtcenter .boutonpresta {
    padding: 8px 34px;
    background-color: #f1a532;
    text-align: center;
    color: white;
    margin: 15px auto;
    width: 150px;
    border-radius: 15px;
}

#bwsecommerce .imgsitevitrine {
    position:absolute;
    top:-5px;
    left:10px;
}

#bwsecommerce .txtsitevitrine {
    position:relative;
    margin:33px 17px 35px 497px;
    text-align:left;
    line-height:23px;
}

.wp-block-nk-awb {
    margin-top:80px;
}

#bwsecommerce .txtsitevitrine span.titreparagraphe {
    color:white;
}

h3#h3delegationbws {
    font-size:74px;
}

#delegationbws .txtsitevitrine span.titreparagraphe {
    color:black;
}

#delegationbws .txtsitevitrine {
    margin: 33px 416px 17px 25px;
    line-height:24px; 
}

.prdelegationtxtcol {
    width:80%;
    margin:20px auto;
    display:flex;
}

.prdelegationtxtcol .prdelegationimg{
    width:179px;
    min-width: 179px;
    flex-shrink: 0;
    height:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.prdelegationtxtcol .prdelegationimg img{
    width:100%;
    margin:10px 0;
}

.prdelegationtxtcol .prdelegationtxt {
    flex-grow: 1;
    padding-left: 20px;
    text-align: justify;
    line-height:25px;
}

.prdelegationtxtcol .prdelegationtxt .titreprdelegationtxt{
    color:#f4b30a;
    font-weight:bold;
    margin-bottom:10px;
    font-size:20px;
}

.orangeinfos {
    width:90%;
    margin:30px auto;
    padding:30px;
    box-sizing:border-box;
    background-color:#fbbc12;
    color:white;
    border-radius:25px;
}

.prestawebcoltxtcenter .boutonprestainvert {
    padding: 8px 34px;
    background-color: #fff;
    text-align: center;
    color: #f1a532;
    margin: 15px auto;
    width: 150px;
    border-radius: 15px;
}

#bwsautres .imgsitevitrine {
    position:absolute;
    top:-12px;
    left:10px;
}

#bwsautres .txtsitevitrine {
    position:relative;
    margin:33px 17px 175px 408px;
    text-align:left;
    line-height:23px;
}

.blocitemsautres {
    width:100%;
    height:auto;
    display:flex;
    box-sizing:border-box;
    justify-content: space-evenly;
    margin:80px auto;
}

.blocitemsautres .itemautres {
    width:284px;
    height:auto;
}

.itemautresimg {
    width:100%;
    height:229px;
    overflow:hidden;
    text-align:center;
    border-left:1px solid black;
    border-right:1px solid black;
    border-top:1px solid black;
    background-color:white;
    box-sizing:border-box;
}

.itemautresimg img{
    width:100%;
    height:auto;
    vertical-align: bottom;
}

.itemautrestitre {
    width:100%;
    height:53px;
    line-height:53px;
    border-left:1px solid black;
    border-right:1px solid black;
    color:white;
    text-align:center;
    font-size:18px;
    background-color: #1875e7;
    box-sizing:border-box;
}

.itemautrestxt {
    width:100%;
    height:auto;
    padding: 10px 15px;
    box-sizing:border-box;
}

.infosautres {
    width:80%;
    text-align:center;
    margin:0 auto 80px auto;
    font-size:16px;
    line-height:20px;
}

.txtbloccontact {
    width: 740px;
    text-align: left;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: 118px;
    background-clip: text;
    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
    color: var(--color-background);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    letter-spacing: var(--letter-spacing);
    padding: calc(--stroke-width / 2);
    -webkit-text-stroke-color: transparent;
    -webkit-text-stroke-width: var(--stroke-width);
    margin-bottom:-130px;
}

.quotesbefore {
    font-size: 155px;
    font-family: 'Times New Roman', Times, serif;
    color: #f76331;
    position: absolute;
    left: -367px;
    top: 30px;
}

.quotesafter {
    font-size:155px;
    font-family: 'Times New Roman', Times, serif;
    color:#f76331;
    position: absolute;
    right: -66px;
    bottom:-10px;
}

#pourquoibws-wrapper {
    margin:80px auto;
}

#orbit-text {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    font-family: 'Poppins', Arial, sans-serif;
    font-size:25px;
}
.orbit-letter {
    position: absolute;
    left: 0; top: -110px;
    font-weight: bold;
    color: #2184c1;
    user-select: none;
    font-size: 1.32em;
    text-shadow: none !important;  /* désactive la lueur externe */
    transition: opacity 0.25s;
    will-change: transform, opacity;
    user-select: none;
}

.titreprestationweb {
    width:100%;
    height:290px;
    position:relative;
}

#animtitreprestationweb {
    width: calc(100% - 340px);
    height: 340px;
    position: absolute;
    right: 0;
    top: 0;
}

.confetti {
    position: absolute;
    width: 10px; height: 16px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 15;
    box-shadow: 0 0 2px #fff7;
    opacity: 0.85;
    will-change: transform, opacity, left, top;
}

h2.titremarketing {
    transition: all 0.5s;
    -webkit-text-stroke: 4px #d6f4f4;
    font-variation-settings: "wght" 900, "ital" 1;
    font-size: 13rem;
    text-align: center;
    color: transparent;
    font-family: "Meta", sans-serif;
    font-weight: normal;
    text-shadow: 10px 10px 0px #07bccc,
        15px 15px 0px #e601c0,
        20px 20px 0px #e9019a,
        25px 25px 0px #f40468,
        45px 45px 10px #482896;
    cursor: pointer;
    margin:20px auto 60px auto;
    text-align:left;
}

h2.titremarketing:hover {
    font-variation-settings: "wght" 100, "ital" 0;
    text-shadow: none;
}

.imgpresentationmarketing {
    width:1000px;
    height:667px;
    margin:10px 50px 50px 150px;
    position:relative;
}

.imgpresentationmarketing::after {
    content:"";
    position:absolute;
    width:1116px;
    height:57px;
    background-image: url(../../uploads/2025/06/body-background-marketing-shadow.jpg);
    background-repeat:no-repeat;
    background-position: center;
    bottom: -57px;
    right: 26px;
}

.designgraphique {
    width:100%;
    height:500px;
    margin: 250px auto 80px auto;
    position: relative;
    display:flex;
    background-color:white;
}

.designgraphique::after{
    content:"";
    position:absolute;
    width:1116px;
    height:57px;
    background-image: url(../../uploads/2025/06/body-background-marketing-shadow.jpg);
    background-repeat:no-repeat;
    background-position: center;
    bottom: -57px;
    right: 76px;
}

.textdesigngraphique {
    width:700px;
    height:500px;
    padding:80px 30px 30px 30px;
    box-sizing:border-box;
}

.imgdesigngraphique {
    width:500px;
    height:500px;
}

.imgdesigngraphique img {
    width:100%;
}

@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;700;900&display=swap");

.header {
    margin:150px auto;
}

.title-wrapper {
    font-family: "Exo 2", sans-serif;
    display: grid;
    align-items: center;
    justify-content: center;
    transform: skew(0, -5deg);
    position:absolute;
    top: -63px;
    left: 0;
}

.top-title {
    order: 1;
    text-align: center;
    display: block;
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.bottom-title {
    order: 3;
    text-align: center;
    display: block;
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-top: 2rem;
    padding-left: 2rem;
}

.sweet-title {
    order: 2;
    color: #fde9ff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 0.75em;
    text-align: center;
    text-shadow: 3px 1px 1px #4af7ff, 2px 2px 1px #165bfb, 4px 2px 1px #4af7ff,
        3px 3px 1px #165bfb, 5px 3px 1px #4af7ff, 4px 4px 1px #165bfb,
        6px 4px 1px #4af7ff, 5px 5px 1px #165bfb, 7px 5px 1px #4af7ff,
        6px 6px 1px #165bfb, 8px 6px 1px #4af7ff, 7px 7px 1px #165bfb,
        9px 7px 1px #4af7ff;
}
.sweet-title span {
    display: block;
    position: relative;
}

.sweet-title span:before {
    content: attr(data-text);
    position: absolute;
    text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9,
        -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
    z-index: 1;
}

.sweet-title span:nth-child(1) {
    padding-right: 2.25rem;
}

.sweet-title span:nth-child(2) {
    padding-left: 2.25rem;
}

.disclaimer {
    width: 100%;
    height: 2rem;
    text-align: center;
    color: #fff;
}
.disclaimer a {
    color: #fff;
}

.textcreacontenus {
    width:100%;
    min-height:500px;
    box-sizing:border-box;
    padding:70px 30px 30px 30px;
}

.imgcreacontenu {
    width:700px;
    height:249px;
    float:right;
    margin:15px 0px 0px 15px;
}

.normliens a,
.normliens a:visited,
.normliens a:link,
.normliens a:hover {text-decoration:none;}

.titreconseilformation {
    width: 77%;
    min-height: 168px;
    position: relative;
    background-color: #fff;
    margin-top: 40px;
    border-radius: 20px;
}

.contenairfaisabilite {
    width:80%;
    height:550px;
    position: relative;
    padding-top:20px;
    margin-top:100px;
}

.contenairfaisabilite::after {
    content:"";
    width:115%;
    height:115%;
    position: absolute;
    clip-path: polygon(0 0, 92% 5%, 94% 88%, 1% 100%);
    background-color: white;
    opacity:0.8;
    top:-20px;
    left:-30px;
    z-index: -1;
}

.txtfaisabilite,
.txtstrategie,
.txtwordpress,
.txtmagento {
    font-size:18px;
}

.contenairfaisabilite h3,
.contenairstrategie h3 {
    text-align: center;
    font-family: 'Chopin';
    font-size: 37px;
    margin: 0 auto 20px auto;
    border-bottom: 2px solid #fb3106;
    width: 75%;
    letter-spacing: 0.1em;
}

.contenairstrategie {
    width:80%;
    height:650px;
    position: relative;
    padding-top:20px;
    margin:200px 0 0 20%;
}

.contenairstrategie::after {
    content:"";
    width:115%;
    height:115%;
    position: absolute;
    clip-path: polygon(10% 5%, 100% 1%, 99% 96%, 7% 87%);
    background-color: white;
    opacity:0.8;
    top:-20px;
    right:-30px;
    z-index: -1;
}

.txtstrategie,
.txtmagento {
    text-align:right;
}

.contenairwordpress {
    width:80%;
    height:550px;
    position: relative;
    padding-top:20px;
    margin-top:200px;
}

.contenairwordpress::after {
    content:"";
    width:115%;
    height:115%;
    position: absolute;
    clip-path: polygon(0 0, 92% 5%, 94% 88%, 1% 100%);
    background-color: white;
    opacity:0.8;
    top:-20px;
    left:-30px;
    z-index: -1;
}

.contenairwordpress h3,
.contenairmagento h3{
    text-align: center;
    font-family: 'Chopin';
    font-size: 37px;
    margin: 0 auto 20px auto;
    border-bottom: 2px solid #c72454;
    width: 95%;
    letter-spacing: 0.1em;
}

.contenairmagento {
    width:80%;
    height:650px;
    position: relative;
    padding-top:20px;
    margin:200px 0 150px 20%;
}

.contenairmagento::after {
    content:"";
    width:115%;
    height:115%;
    position: absolute;
    clip-path: polygon(10% 5%, 100% 1%, 99% 96%, 7% 87%);
    background-color: white;
    opacity:0.8;
    top:-20px;
    right:-30px;
    z-index: -1;
}

.imgfaisabilite img,
.imgstrategie img,
.imgwordpress img,
.imgmagento img { width:100%; }
.imgfaisabilite {
    position:absolute;
    right:-400px;
    top:200px;
    width:400px;
    height:400px;
    clip-path: polygon(63% 8%, 0 55%, 95% 100%);
}
.imgstrategie {
    position:absolute;
    left:-400px;
    top:200px;
    width:400px;
    height:400px;
    clip-path: polygon(41% 2%, 100% 35%, 73% 98%, 0 54%);
}
.imgwordpress {
    position:absolute;
    right:-218px;
    top:218px;
    width:225px;
    height:225px;
    z-index:50;
}
.imgmagento {
    position:absolute;
    left: -196px;
    top: 133px;
    width:225px;
    height:225px;
    z-index:50;
}

.listfaisabilite,
.listwordpress {
    list-style:none;
}
.listfaisabilite li,
.listwordpress li {
    padding-left:35px;
    background-image: url(../../uploads/2025/07/puce.png);
    background-repeat:no-repeat;
    background-position: top left;
    line-height: 25px;
}
.liststrategie,
.listmagento {
    list-style:none;
}
.liststrategie li,
.listmagento li {
    padding-right:35px;
    background-image: url(../../uploads/2025/07/puce-reverse.png);
    background-repeat:no-repeat;
    background-position: top right;
    line-height: 25px;
}

/* page "référencement SEO"  */

h2.titreseo {
    font-size:60px;
    color:#b3b3b3;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(to right, #4285F4, #EA4335,#FBBC05,#34A853,#4285F4);
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
h2.titreseo span { font-size:90px; }
.blue   { color: #4285F4; }
.red    { color: #EA4335; }
.yellow { color: #FBBC05; }

.blocseo {
    display:flex;
    width:100%;
    min-height:250px;
    margin:120px auto 200px auto;
    position:relative;
}

.imgseo {
    width:30%;
    height:auto;
}
.imgseo img { width:100%; }

.listseo,
.listseoreverse {
    list-style:none;
}

.listseo li {
    padding-left:35px;
    background-image: url(../../uploads/2025/07/puce.png);
    background-repeat:no-repeat;
    background-position: top left;
    line-height: 25px;
}

.listseoreverse li {
    padding-right:35px;
    background-image: url(../../uploads/2025/07/puce-reverse.png);
    background-repeat:no-repeat;
    background-position: top right;
    line-height: 25px;
}

.textseo {
    width:70%;
    height:auto;
    box-sizing:border-box;
    padding:0 25px;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(to bottom, #4285F4, #EA4335,#FBBC05,#34A853,#4285F4);
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
    font-size:18px;
}

.textseo.alignright { 
    text-align:right;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(to bottom, #4285F4, #EA4335,#FBBC05,#34A853,#4285F4);
    border-bottom: 0;
    border-left: 0;
    border-top: 0;
}

.bloctitreseo {
    position:absolute;
    width:100%;
    height:40px;
    top:-60px;
    left:10px;
    z-index:50;
}

.bloctitreseo h3 {
    color: #4285F4;
    font-size: 35px;
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.4);
    margin: 0;
}

.titrecontact {
    width:100%;
    height:200px;
    margin-bottom:20px;
}

.bloclienscontact {
    width:100%;
    min-height:200px;
    display:flex;
    margin:10px auto 100px auto;
    position:relative;
}

.bloclienscontactinfos,
.bloclienscontacthoraires {
    width:49%;
    min-height:200px;
    padding:0 15px;
    box-sizing:border-box;
    font-size:18px;
    line-height:18px;
    color:rgb(92, 91, 91);
    border: 10px solid;
    border-image-slice: 1;
    border-width: 10px;
    border-image-source: linear-gradient(to bottom, #09f0ba, #04c3e2,#01a8fb,#7c53e9,#ef0ad5,#ff8759,#fed216);
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
}
.bloclienscontactinfos { margin-right:2%; }
.bloclienscontacthoraires { height:300px; }

.titreinfoscontact,
.titrehorairescontact {
    color: #7d85e9;
    font-size: 22px;
    padding-left: 30px;
    height: 26px;
    line-height: 26px;
    width: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: bottom left;
    margin-bottom: 5px;
    padding-top: 7px;
    font-weight: bold;
}

.titreinfoscontact#titreinfoscontactadresse { background-image: url(../../uploads/2025/05/footer-adresse-logo.png); }
.titreinfoscontact#titreinfoscontacttel { background-image: url(../../uploads/2025/05/footer-contact-logo.png); }
.titreinfoscontact#titreinfoscontactrdv { background-image: url(../../uploads/2025/07/calendrier.png); }
.txtinfoscontact { margin:10px 35px 40px 5px; line-height:20px; }

.bloclienscontact a,
.bloclienscontact a:link,
.bloclienscontact a:visited { text-decoration:none; color:rgb(92, 91, 91); font-weight:bold; transition:all 0.3s ease-in-out; }
.bloclienscontact a:hover {   
    background: linear-gradient(to right,#09f0ba, #04c3e2,#01a8fb,#7c53e9,#ef0ad5,#ff8759,#fed216);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.titrehorairescontact { background-image: url(../../uploads/2025/05/footer-horaires-logo.png); margin-bottom:35px; }
.txthorairescontact {
    font-size:18px;
    line-height:25px;
    width:100%;
    height:25px;
    margin-bottom:5px;
    box-sizing:border-box;
    padding-left:10px;
    color:rgb(92, 91, 91);
}

.txthorairescontact span {
    font-weight:bold;
    color:#5762fc;
}

.imgcontact {
    width: 259px;
    height: 281px;
    position: absolute;
    right: 290px;
    top: 333px;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 10px;
    border-image-source: linear-gradient(to top left, #09f0ba, #04c3e2,#01a8fb,#7c53e9,#ef0ad5,#ff8759,#fed216);
}

.imgcontact img {
    width:100%;
}

/* Masquer le bouton hamburger en desktop */
#mobile-menu-toggle {
    display: none;
    font-size: 2rem;
    background-color: #fff;
    border: none;
    color: #333;
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 999;
}

/* Menu mobile latéral */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 250px;
    background: #333;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 2rem 1rem;
    transition: left 0.3s ease;
}

.mobile-menu.open {
    left: 0;
}

.mobile-menu a,
.mobile-menu a:link,
.mobile-menu a:visited,
.mobile-menu a:hover { color:#fff; }

#mobile-menu-close {
    font-size: 2rem;
    background-color: #fff;
    border: none;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

.mobile-menu ul {
    list-style: none;
    padding: 2rem 0 0 0;
}

.mobile-menu li {
    margin: 1rem 0;
}

.mobile-menu a {
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;
}