/* ===========================================
   MYCUSTOM.CSS COMPLET - FONCTIONNEL 100%
   =========================================== */

/* 1. DÉSACTIVER ASTRA/WORDPRESS */


/*.main-header-bar, .ast-header, .ast-primary-header-bar,.site-header, .site-footer, .ast-footer,.elementskit-section, .ekit-wid-con,*/
/*.woocommerce, .ast-archive-header {*/
/*    display: none !important;*/
/*}*/

/***************************************************************/
/* CSS PERSONNALISEE FORMAT NORMAL  */


 /*  1. PROTÉGER Header/Footer ElementsKit TOUT SITE
=========================================== */
.elementskit-header,
.elementskit-footer,
.ekit-header,
.ekit-footer,
[data-elementskit-template-id*="header"],
[data-elementskit-template-id*="footer"] {
    display: block !important;
}

/* 2. DÉSACTIVER ASTRA HEADER/FOOTER (TOUT SITE) */
.main-header-bar,
.ast-primary-header-bar,
.ast-header,
.site-header,
.site-footer,
.ast-footer {
    display: none !important;
}


/**************************************DEBUT STYLE CUSTOM**********/
/* CSS PERSONNALISEE */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;  /* Évite scrollbar horizontale */
  overflow-y: auto ;
}


/* ---------------------------------------------ACCUEIL -----------------------------------------------------------*/

/* carre du content gauche */
.hero-section{
width:100%;
height:95vh;
background-image:url("../images/homepage/header/gradient-trace.png");
background-size:cover;
background-repeat:no-repeat;
position:relative;
overflow:hidden;
display:flex;
flex-direction:row;
justify-content:center;
align-items: center;


}

.hero-content{
    height:70%;
    width:50%;

display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap:2rem;

}

.hero-title{
color:white;
font-size:3.5rem;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero-description{
color:white;
font-size:1.6em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero-btn{
  font-size:1.3em;
  font-weight:bold;
padding:10px 20px 10px 20px;
border:0px;
border-radius:20px;
background-color: #3eadf5;
color:#ffffff;
}
.hero-btn:hover{
  background-color:#ffffff;
  color:#3eadf5;
  cursor:pointer;
}

/* carre des visuels */
.hero-visuals{
position:relative;
width:50%;
margin:0 auto;
height:70%;

}

.yellowcircle, .violetcircle, .topwhitesquare, .backwhitesquare {
  position: absolute;
}


.yellowcircle{
top: -3%;
  left: 45%;
  width: 220px;
  height: 220px;
 z-index:9;

}
.yellowcircle img {
  width: 100%;    
  height: auto; 
  display: block;  
}


.violetcircle{
 bottom: 13%;
  left: 20%;
  width: 160px;
  height: 160px;
  z-index:11;
}

.violetcircle img{
  height:auto;
  width:100%;
  display:block;
}

.topwhitesquare{
top: 8.5%;
  right:72%;
  width: 100px;
  height: 80px;
  z-index:8;
}
.topwhitesquare img{
 height:auto;
  width:100%;
  display:block;
}

.backwhitesquare{
bottom: 25%;
  left: 68%;
  width: 100px;
  height: 80px;
  transform:rotate(90deg);
  z-index:8;
}
.backwhitesquare img{
 height:auto;
  width:100%;
  display:block;
}

.imgprincipale{   
width: 100%;
  height: 100%;  
  text-align: center;
  display: table-cell;
  vertical-align: middle; 


}

.imgprincipale img{
    width:75%;
  position:relative;
  z-index:10;
    
}

/* Cerceaux decoratifs */
.cerceau1, .cerceau2 {
  position: absolute;
}



.cerceau1 {
  left:-13%;
top:75%;
  width: 380px;
  height: 380px;
  z-index:14;

}

.cerceau2 {
left:5%;
bottom:3%;
  width: 380px;
  height: 380px;
  z-index:13;
}

.cerceau1 img, .cerceau2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ---------------------------------------------------SECTION BODY1------------------------------------------------------------ */
.body1-section{
width:100%;
height:95vh;
position:relative;
display:flex; 
flex-direction: row;
justify-content:center;
align-items:center;

}

.body1-visuals{
position:relative;
width:50%;
margin:0 auto;
height:70%;


}

.body1-content{
    height:70%;
    width:50%;

display:flex;
flex-direction: column;
align-items:start;
justify-content: center;
gap:2rem;
position:relatif;

}

.body1-title{
color:black;
font-size:2rem;
font-family:'sans-serif';
}

.body1-description{
color:black;
font-size:1em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align:left;
width:80%;

}

.body1-btn{
    font-size:1.2em;
  font-weight:bold;
padding:10px 20px 10px 20px;
border:0px;
border-radius:20px;
background-color: #f5db11;
color:#100f0f;
}



.body1-visuals .imgprincipale{
  position:absolute;
width:100%;
height:100%;

}

.body1-visuals .imgprincipale img{
width:50%;
height:100%;
display:block;
margin:0 auto;
z-index:10;
}



.body1-visuals .yellowcerceau{
position:absolute;
 top: -3%;
  left: 55%; 
  width: 220px;
  height: 220px;
 z-index:12;
}
.body1-visuals .yellowcerceau img{
width:100%;
height:auto;
display:block;
}


.body1-visuals .graycircle{
position:absolute;
 top: -10%;
  left: 35%; 
  width: 400px;
  height: 400px;
 z-index:8;
}
.body1-visuals .graycircle img{
width:100%;
height:auto;
display:block;
}


.body1-visuals .blackcerceau{
position:absolute;
  top:27%;
  left: 45%;  
  width: 300px;
  height: 300px;
 z-index:9;
}
.body1-visuals .blackcerceau img{
width:100%;
height:auto;
display:block;
}


.body1-visuals .phonedesign{
position:absolute;
  top:13%;
  left: 19%;  
  width: 400px;
  height: 300px;
 z-index:11;
}
.body1-visuals .phonedesign img{
width:100%;
height:auto;
display:block;
}
/* cerceaux decoratifs section body 1 */

.body1-cerceauviolet, .body1-cerceaugris {
  position: absolute;
}



.body1-cerceauviolet {
  left:-7%;
top:45%;
  width: 250px;
  height: 250px;
  z-index:13;
  display:none;

}

.body1-cerceaugris{
left:580%;
bottom:103%;
  width: 300px;
  height: 300px;
  z-index:14;
}

.body1-cerceauviolet img, .body1-cerceaugris img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------section body 2 nos services-------------------------------------- */
.body2-section{
width:100%;
height:90vh;
position:relative;
display:flex;
flex-direction:row;
justify-content: center;
align-items: center;
background-image:url("../images/homepage/body/body2/backg.png");
background-size:cover;
background-repeat:no-repeat;
}

.body2-content{
    height:70%;
    width:50%;
    padding-left:15%;
    padding-right:5%;
display:flex;
flex-direction: column;
align-items:start;
justify-content: center;
gap:2rem;
position:relatif;

}

.body2-visuals{
position:relative;
width:50%;
margin:0 auto;
height:70%;

}


.body2-title{
color:black;
font-size:2rem;
font-family:'sans-serif';
}
.body2-description{
color:black;
font-size:1em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align:left;
width:80%;
}

.body2-subtitle{
color:black;
font-size:1.2em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align:left;
width:80%;
}

.body2-btn{
   font-size:1.2em;
  font-weight:bold;
padding:10px 20px 10px 20px;
border:0px;
border-radius:20px;
background-color: #f5db11;
color:#100f0f;
}

.communitymanager{
  position:relative;
position:absolute;
  top:3%;
  left: 9%;  
  width: 300px;
  height: auto;
  padding:2%;
  padding-top: 10%;
 z-index:11;
 border:5px solid #ae32e6;
 border-radius: 20px;
 background-color: white;
}

.communitymanager img{
  position:absolute;
  top:-15%;
width:40%;
height:50%;
display:block; 
}

.communicationglobale{
position:relative;
position:absolute;
  top:-10%;
  left: 49%;  
 width: 300px;;
  height: auto;
  padding:2%;
  padding-top: 10%;
 z-index:11;
 border:5px solid #ae32e6;
 border-radius: 20px;
 background-color: white;
}

.communicationglobale img{
  position:absolute;
  top:-15%;
width:40%;
height:50%;
display:block; 
}

.developpementweb{
  position:relative;
position:absolute;
  top:50%;
  left: 9%;  
  width: 300px;
  height: auto;
  padding:2%;
  padding-top: 10%;
 z-index:11;
 border:5px solid #ae32e6;
 border-radius: 20px;
 background-color: white;
}

.developpementweb img{
 position:absolute;
  top:-15%;
width:40%;
height:50%;
display:block; 
}

.uiuxdesign{
position:relative;
position:absolute;
  top:35%;
  left: 49%;  
 width: 300px;
  height: auto;
  padding:2%;
  padding-top: 10%;
 z-index:11;
 border:5px solid #ae32e6;
 border-radius: 20px;
 background-color: white;
}

.uiuxdesign img{
 position:absolute;
  top:-15%;
width:40%;
height:50%;
display:block; 
}

/*---------------------------------------------body 3 section------------------------------------ */

.body3-section{
width:100%;
height:100vh;
background-image:url("../images/homepage/body/body3/bg3.png");
background-size:cover;
background-repeat:no-repeat;
position:relative;
overflow:hidden;
display:flex; 
flex-direction: column;
justify-content: center;
align-items:center;
position:relative;
margin-top:-2%;
}

.all{
  width:70%;
  height:auto;
 
  margin:0 auto;
  text-align:center;
  padding:5%;
  position:relative;
  z-index:8;
}
.testimonials-content{
padding-top:2%;
padding-bottom:2%;

}

.testimonials-content h4{
margin-top:2%;
margin-bottom:2%;
color:white;
font-size:1.5em;
}

.testimonials-content h2{
color:white;
font-size:2.5em;
font-weight:bold;
}


.testimonials-card{
height:auto;
width:60%;
margin:0 auto;
background-color: white;
border-radius: 30px;
padding:3%;
z-index:10;
border-bottom:20px solid #ae32e6;
}



.quote{

width:200;
height:200px;
margin:0 auto;
color:gray;
}

.commentaire{
font-size:1.2em;
}

.commentaire-nom{
font-size:1.2em;
color:#ae32e6;
}

.commentaire-note{


}
/* elemnts decoratifs body 3 temoignage */
.imgtemoignage1{
position:absolute;
left:20%;
bottom:60%;
  width: 150px;
  height: 150px;
  z-index:14;
}
.imgtemoignage1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgtemoignage2{
position:absolute;
left:15%;
bottom:40%;
  width: 70px;
  height: 70px;
  z-index:14;
}
.imgtemoignage2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgtemoignage3{
position:absolute;
left:19.5%;
bottom:20%;
  width: 50px;
  height: 50px;
  z-index:14;
}
.imgtemoignage3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgtemoignage7{
position:absolute;
left: 27%;
bottom:10%;
  width: 150px;
  height: 150px;
  z-index:9;
}
.imgtemoignage7 img {
  width: 100%;
  height: 100%;
 object-fit: contain;
}

/* cote droit */
.imgtemoignage4{
position:absolute;
right:20%;
bottom:20%;
  width: 150px;
  height: 150px;
  z-index:8;
}
.imgtemoignage4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.imgtemoignage5{
position:absolute;
right:15%;
bottom:40%;
  width: 70px;
  height: 70px;
  z-index:8;
}
.imgtemoignage5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgtemoignage6{
position:absolute;
right:19.5%;
bottom:60%;
  width: 50px;
  height: 50px;
  z-index:8;
}
.imgtemoignage6 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgtemoignage8{
position:absolute;
right:27%;
bottom:52%;
  width: 150px;
  height: 150px;
  z-index:9;
}
.imgtemoignage8 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------------------------------body 4 section formulaire-------------------------------- */
.body4-section{
  /* margin-top:20px; */
width:100%;
height:80vh;
position:relative;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
padding:2%;

}

.body4-content{
width:50%;
height:70%;
gap:2rem;
display:flex;
flex-direction: column;
align-items:start;
justify-content:start;
gap:2rem;
position:relative;

}

.body4-visuals{
width:50%;
height:70%;
}

.body4-title{
  width:70%;
color:black;
font-size:2rem;
font-family:'sans-serif';
font-weight:bold;
}

.body4-subtitle{
color:#ae32e6;
font-size:1.2em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

width:80%;
}


.body4-description{
color:black;
font-size:1em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

width:80%;
}



.body4-visuals .form {
    width: 90%;
    margin: 0 auto;
    padding: 2%;
    border: 5px solid #e79af4;          /* Bordure avec votre couleur */
    border-radius: 20px;
    
    /* Effet de flou léger sur la bordure */
    box-shadow: 
        0 0 20px rgba(231, 154, 244, 0.4),    /* Flou extérieur violet clair */
        0 0 40px rgba(231, 154, 244, 0.2),    /* Flou plus large */
        inset 0 0 20px rgba(231, 154, 244, 0.1); /* Flou intérieur subtil */
    
    /* Alternative avec backdrop-filter pour flou moderne */
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.9); /* Fond légèrement transparent */
    position: relative;
}

/* Animation hover pour accentuer l'effet */
.body4-visuals .form:hover {
    box-shadow: 
        0 0 30px rgba(231, 154, 244, 0.6),
        0 0 60px rgba(231, 154, 244, 0.3),
        inset 0 0 30px rgba(231, 154, 244, 0.2);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}





.body4-visuals .form .form-group{
padding:5px;
width:90%;
margin:0 auto;

}


.body4-visuals .form .form-group label{
  display:block;
font-size:1em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1%;
}



.body4-visuals .form .form-group input,
.body4-visuals .form .form-group textarea {
    width: 90%;
    border-radius: 20px;
    border: 3px solid #e79af4;          /* Même couleur que la bordure */
    display: block;
    font-size: 1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 1%;
    transition: all 0.3s ease;          /* Transition fluide */
}

/* Effet focus sur les inputs */
.body4-visuals .form .form-group input:focus,
.body4-visuals .form .form-group textarea:focus {
    outline: none;
    box-shadow: 0 0 15px rgba(231, 154, 244, 0.5);
    border-color: #e79af4;
}

.body4-visuals .form .form-group .btn{
  width:40%;
  border:0px;
  border-radius: 20px;  
    display:block;
font-size:1em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1%;
background-color: #f5db11;
color:whitesmoke;
font-weight: 500;
}

/* les images dans la colonne 1 de la section 4 de l'accueill */
.body4-content .img1{
position:absolute;
/* right:27%; */
top:55%;
  width: 450px;
  height: 450px;
  z-index:10;
}

.body4-content .img1 img{
    width: 100%;
  height: 100%;
  object-fit: contain;
} 

.body4-content .img2{
 /* left:-22%; */

  width: 350px;
  height: 350px;
  z-index:9;
 
}

.body4-content .img2 img{
   width: 100%;
  height: 100%;
  object-fit: contain;
} 


/*-----------------------------------------------------------HEADER CUSTOM--------------------------------------------*/
/* rgba(102, 126, 234, 0.15); violet transparent
violet fin degradé #6c49ed;
violet debut degradé : #9245e6
*/
/* HEADER STICKY 3 COLONNES FLEXBOX */
/*-----------------------------------------------------------HEADER CUSTOM !IMPORTANT-------------------------------------------------*/
.custom-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #6c49ed !important;
    backdrop-filter: blur(15px) !important;
    padding: 1.2rem 0 !important;
    transition: all 0.3s ease !important;
    border: 0px !important;
}

.header-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 3rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 3rem !important;
}

.logo-section {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    flex-shrink: 0 !important;
}

.logo-img {
    height: 55px !important;
    z-index: 2 !important;
}

.logo-text {
    height: 45px !important;
    position: relative !important;
    z-index: 3 !important;
}

/* MENU CENTRAL */
.menu-section {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

.main-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3rem !important;
    align-items: center !important;
}

.main-menu a {
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    padding: 0.7rem 1.2rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.main-menu a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* DROPDOWN SERVICES */
.dropdown {
    position: relative !important;
}

.dropdown-icon {
    margin-left: 0.4rem !important;
    font-size: 0.9rem !important;
    transition: transform 0.3s ease !important;
}

.dropdown:hover .dropdown-icon {
    transform: rotate(180deg) !important;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 250px !important;
    background:#6649ee !important; 
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    list-style: none !important;
    padding: 1.5rem !important;
    margin: 0.5rem 0 0 0 !important;
    border-radius: 15px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(10px) !important;
}

.dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(5px) !important;
}

.dropdown-menu li {
    margin: 0.4rem 0 !important;
}

.dropdown-menu a {
    display: block !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    
}

/* BOUTON CONTACT */
.cta-section {
    flex-shrink: 0 !important;
}

.cta-button {
    display: inline-block !important;
    background: white !important;
    color: #667eea !important;
    padding: 1rem 2rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 30px rgba(255,255,255,0.3) !important;
    transition: all 0.3s ease !important;
}

.cta-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(255,255,255,0.4) !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .mobile-toggle { 
        display: flex !important; 
    }
    .menu-section, .cta-section { 
        display: none !important; 
    }
}


/* custom footr--------------------------------------------------------------------*/
.custom-footer{
  background-image:url("../images/homepage/footer/footer-bg.png");
background-size:cover;
background-repeat:no-repeat;
position:relative;
    color: white;
    padding: 2rem 0;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top:5%;
    height:auto;
}


.div1{
    display: flex !important;           
    flex-direction: row !important;    
    justify-content: center !important; 
    align-items: center !important;    
    gap: 2rem !important;             
    width: 30% !important;
    padding: 2rem !important;
 
}

.image-left, .image-right {
    width: 45% !important;            
    max-width: 200px !important;
    height: auto !important;
    object-fit: cover !important;
   
}

.row1{
    display: flex !important;           
    flex-direction: row !important;    
    justify-content: space-around !important; 
    align-items: center !important;    
    gap: 2rem !important;             
    width: 100% !important;
    padding: 2rem !important;
    
}


.footer-container{
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3rem !important;
}


.row2{
    display: flex !important;           
    flex-direction: row !important;    
    justify-content: flex-end !important; 
    align-items: center !important;    
    gap: 2rem !important;             
    width: 100% !important;
    padding: 2rem !important;
   
}

.main-menu-footer {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3rem !important;
    align-items: center !important;
}

.main-menu-footer a {
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    padding: 0.7rem 1.2rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.main-menu-footer a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) !important;
}

/***************************style mobile responsive old************/


/* ****************************************************************************** MOBILE PRIORITÉ : @media max-width 767px */
@media (max-width: 767px) {
 
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;  /* Évite scrollbar horizontale */
}

/* ---------------------------------------------ACCUEIL -----------------------------------------------------------*/
.hero-section{
width:100%;
height:95vh;
background-image:url("../images/homepage/header/gradient-trace.png");
background-size:cover;
background-repeat:no-repeat;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
padding-bottom:2px;


}

.hero-content{
    height:70%;
    width:90%;
    margin:0 auto;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap:2rem;

padding:5px;
}

.hero-title{
    text-align:center;
color:white;
font-size:2em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero-description{
  text-align: center;
color:white;
font-size:1.6em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero-btn{
  font-size:1.3em;
  font-weight:bold;
padding:10px 20px 10px 20px;
border:0px;
border-radius:20px;
background-color: #3eadf5;
color:#ffffff;
}
.hero-btn:hover{
  background-color:#ffffff;
  color:#3eadf5;
  cursor:pointer;
}

/* carre des visuels */
.hero-visuals{
    
position:relative;
height:70%;
  width:90%;
margin:0 auto;

}

.yellowcircle, .violetcircle, .topwhitesquare, .backwhitesquare {
display:none;
}


.imgprincipale{   
width: 100%;
  height: 100%;  
  text-align: center;
  display: table-cell;
  vertical-align: middle; 


}

.imgprincipale img{
    width:95%;
  position:relative;
  z-index:10;
  bottom:5px;
    
}

/* Cerceaux decoratifs */
.cerceau1, .cerceau2 {
  position: absolute;
}



.cerceau1 {
  left:-33%;
top:85%;
  width: 380px;
  height: 380px;
  z-index:14;
display:none;
}

.cerceau2 {
left:5%;
bottom:3%;
  width: 380px;
  height: 380px;
  z-index:13;
  display:none;
}

.cerceau1 img, .cerceau2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/******************************************** body 1 section****************************************************/

.body1-section{
  width:100%;
  height:95vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:2rem;
  padding:2px;
  padding-top:10px;
  padding-bottom: 10px;
  
 
}

.body1-content{
  width:90%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  gap:1.5rem;
 
}

.body1-visuals{
  width:90%;
 height:90vh;
  margin:0 auto;

 padding:15px;
}

.body1-visuals .yellowcerceau, .body1-visuals .blackcerceau, .body1-visuals .graycircle, .body1-visuals .phonedesign{
  display:none;
}

.body1-cerceauviolet, .body1-cerceaugris{
  display:none;
}

.body1-visuals .imageprincipale{
  width:100%;
  height:100%; 
}

.body1-title{
  text-align:center;
  font-size:2rem;
}

.body1-description{
  text-align:center;
  font-size:medium;
}

.body1-btn{
font-size:1.3em;
}

/**************************************** body 2 section ************************************************/
/* BODY2 SERVICES (INCHANGÉ) */
    .body2-section { 
        height: auto !important;
        padding: 8% 4% !important; 
    }
    
    .body2-content {
        display: none !important;
    }
    
    .body2-visuals { 
        width: 100% !important; 
        height: auto !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3.5rem !important;
        padding: 2rem 0 !important;
    }
    
    .communitymanager, .communicationglobale, 
    .developpementweb, .uiuxdesign {
        position: static !important;
        width: 92% !important;
        max-width: 92vw !important;
        height: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 4rem 3rem !important;
        gap: 2rem !important;
        border: 5px solid #ae32e6 !important;
        border-radius: 25px !important;
        background-color: white !important;
    }
    
    .communitymanager p, .communicationglobale p,
    .developpementweb p, .uiuxdesign p {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
        line-height: 1.7 !important;
        margin: 0 !important;
        padding: 0 0.5rem !important;
        width: 100% !important;
    }
    
    .communitymanager img, .communicationglobale img,
    .developpementweb img, .uiuxdesign img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
    }

    /************************************************************************ body 3 section *****************************************************/
   .body3-section{
width:100%;
height:auto;
background-image:url("../images/homepage/body/body3/bg3.png");
background-size:cover;
background-repeat:no-repeat;
position:relative;
margin-top:2%;
}

.all{
  width:95%;
  height:auto;
 
  margin:0 auto;
  text-align:center;
  padding:5%;
  position:relative;
  z-index:8;

}
.testimonials-content{
padding-top:2%;
padding-bottom:2%;

}

.imgtemoignage1 , .imgtemoignage2, .imgtemoignage3, .imgtemoignage4, .imgtemoignage5, .imgtemoignage6, .imgtemoignage7, .imgtemoignage8{
display:none;

}

.testimonials-content{

}

.testimonials-card{
width:95%;
}

.commentaire{

}

/***************************************************** body 4 section ****************************************************/
.body4-section{
width:100%;
height:70vh;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;


}

.body4-content{
display:none;
}

.body4-visuals{
  width:90%;
  margin:0 auto;
height:350px;

}

.body4-visuals .form {
    width: 90%;
    margin: 0 auto;
    padding: 2%;
    border: 5px solid #e79af4;          /* Bordure avec votre couleur */
    border-radius: 20px;
    
    /* Effet de flou léger sur la bordure */
    box-shadow: 
        0 0 20px rgba(231, 154, 244, 0.4),    /* Flou extérieur violet clair */
        0 0 40px rgba(231, 154, 244, 0.2),    /* Flou plus large */
        inset 0 0 20px rgba(231, 154, 244, 0.1); /* Flou intérieur subtil */
    
    /* Alternative avec backdrop-filter pour flou moderne */
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.9); /* Fond légèrement transparent */
    position: relative;
}

/* Animation hover pour accentuer l'effet */
.body4-visuals .form:hover {
    box-shadow: 
        0 0 30px rgba(231, 154, 244, 0.6),
        0 0 60px rgba(231, 154, 244, 0.3),
        inset 0 0 30px rgba(231, 154, 244, 0.2);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}





.body4-visuals .form .form-group{
padding:5px;
width:90%;
margin:0 auto;

}


.body4-visuals .form .form-group label{
  display:block;
font-size:1em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1%;
}



.body4-visuals .form .form-group input,
.body4-visuals .form .form-group textarea {
    width: 90%;
    border-radius: 20px;
    border: 3px solid #e79af4;          /* Même couleur que la bordure */
    display: block;
    font-size: 1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 1%;
    transition: all 0.3s ease;          /* Transition fluide */
}

/* Effet focus sur les inputs */
.body4-visuals .form .form-group input:focus,
.body4-visuals .form .form-group textarea:focus {
    outline: none;
    box-shadow: 0 0 15px rgba(231, 154, 244, 0.5);
    border-color: #e79af4;
}

.body4-visuals .form .form-group .btn{
  width:40%;
  border:0px;
  border-radius: 20px;  
    display:block;
font-size:1em;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1%;
background-color: #f5db11;
color:whitesmoke;
font-weight: 500;
}






/****************************************************** footer *************************************************************/


 .footer-container .row1 .div2{

 }

 .footer-container .row2{
  display: flex; 
  flex-direction:row;
  justify-content: center; 
  align-items: center; 

 }

 .main-menu-footer {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3rem !important;
    align-items: center !important;
}




.image-left, .image-right {
    width: 150px !important;
    height: auto !important;
    object-fit: contain !important;
}

.image-right{
  display:none;
}

.footer-container .row2 img{
  width:35px;
}

.footer-container .row2 {
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}



/***********************************************************HEADER********************************************************************/

 .custom-header {
        padding: 1rem 0 !important;
    }
    
    .header-container {
        padding: 0 1.5rem !important;
        gap: 1rem !important;
        position: relative !important;
    }
    
    /* 1. LOGO CENTRE */
    .logo-section {
        flex: 1 !important;
        justify-content: center !important;
    }
    
    .logo-img { height: 45px !important; }
    .logo-text { height: 38px !important; }
    
    /* 2. MENU CACHÉ PAR DÉFAUT */
    .menu-section {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(108, 73, 237, 0.98) !important;  /* ✅ Arrière-plan violet */
        backdrop-filter: blur(20px) !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2.5rem !important;
        padding: 3rem 2rem !important;
        opacity: 0 !important;
        transform: translateY(-100%) scale(0.95) !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 9999 !important;
    }
    
    /* 3. MENU OUVERT - FULLSCREEN */
    .menu-section.mobile-open {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
    
    /* 4. MENU VERTICAL - LI PLEIN LARGEUR */
    .main-menu {
        flex-direction: column !important;
        gap: 1.8rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .main-menu li {
        width: 100% !important;
    }
    
    .main-menu a {
        font-size: 1.6rem !important;
        padding: 1.2rem 2.5rem !important;
        display: block !important;
        width: 100% !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, 0.15) !important;  /* ✅ Fond blanc transparent */
        color: white !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }
    
    .main-menu a:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(1.05) !important;
    }
    
    /* 5. DROPDOWN MOBILE */
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.2) !important;
        margin-top: 1rem !important;
        width: 100% !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    
    .dropdown:hover .dropdown-menu,
    .dropdown.active .dropdown-menu {
        max-height: 300px !important;
    }
    
    /* 6. CTA MASQUÉ */
    .cta-section {
        display: none !important;
    }
    
    /* 7. HAMBURGER VISIBLE + ANIMATION */
    .mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        z-index: 10000 !important;
    }
    
    .mobile-toggle span {
        width: 28px !important;
        height: 3px !important;
        background: white !important;
        border-radius: 3px !important;
        transition: all 0.3s ease !important;
        transform-origin: center !important;
    }
    
    /* ANIMATION CROIX */
    .mobile-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px) !important;
    }
    
    .mobile-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .mobile-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px) !important;
    }

}




/****************************************************************** 3. TABLETTE 768px-1023px *************************************************************/
@media (min-width: 768px) and (max-width: 1023px) {

}