@font-face {
  font-family: "Satoshi-Black";
  src: url("../font/Satoshi-Black.woff2") format("woff2"),
       url("../font/Satoshi-Black.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Satoshi-BlackItalic";
  src: url("../font/Satoshi-BlackItalic.woff2") format("woff2"),
       url("../font/Satoshi-BlackItalic.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Satoshi-Bold";
  src: url("../font/Satoshi-Bold.woff2") format("woff2"),
       url("../font/Satoshi-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
 font-family: "Satoshi-Medium";
 src: url("../font/Satoshi-Medium.otf") format('woff2'),
      url("../font/Satoshi-Medium.otf")format('woff');
 font-display: fallback;
}
@font-face {
 font-family: "Satoshi-Regular";
 src: url("../font/Satoshi-Regular.otf") format('woff2'),
      url("../font/Satoshi-Regular.otf")format('woff');
 font-display: fallback;
}

@font-face {
 font-family: "Satoshi-Medium";
 src: url("../font/Satoshi-Medium.otf") format('woff2'),
      url("../font/Satoshi-Medium.otf")format('woff');
 font-display: fallback;
}

@font-face{
font-family : "Satoshi-Italic";
src: url("../font/Satoshi-Italic.otf") format('woff2'),
      url("../font/Satoshi-Italic.otf")format('woff');
 font-display: fallback;


}

@font-face{
font-family : "Satoshi-LightItalic";
src: url("../font/Satoshi-LightItalic.otf") format('woff2'),
      url("../font/Satoshi-LightItalic.otf")format('woff');
 font-display: fallback;

}

@font-face{
font-family : "Satoshi-MediumItalic";
src: url("../font/Satoshi-MediumItalic.otf") format('woff2'),
      url("../font/Satoshi-MediumItalic.otf")format('woff');
 font-display: fallback;
}



html{
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    align-items: center;
    scroll-behavior: smooth;

}


#background-bleu{
    background-color:#1617A8!important;
}

img {
    width: auto;
}


li{
  list-style-type: none;
}

body, main {
  margin: 0;
  padding: 0;
}


/*NAVIGATION*/

.logo-nav{
      height: 60px; 
}

#header {
    background-image: linear-gradient(180deg, rgba(22,23,168,1) 0%, rgba(29,30,171,1)10%, rgba(29,30,171,0.8) 50%,rgba(255,255,255,0) 100%);
    position: fixed!important; /* Set the navbar to fixed position */
    top: 0;
    z-index: 999;
    width: 100%;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centrage vertical */
    height: 90px; /* Ajuste la hauteur de la navbar */
    margin:auto;
    width: 95%;
}

.logo-nav img {
    max-height: 80px; /* Taille du logo */
}

.navbar-left {
    display: flex;
    align-items: center; /* Centrage du logo */
}

.uk-navbar-right {
    display: flex;
    align-items: center;
}


.uk-navbar-right .nav-font {
    padding-right: 0!important;
}

.uk-navbar-nav .nav-font a {

    color: #ffffff !important;
    font-family: "Satoshi-regular";
    text-transform: none; /* Désactive la transformation en majuscule */
    font-size: 1vw;
    transition: text-shadow 0.3s ease, color 0.3s ease, filter 0.3s ease, padding 0.3s ease; /* Ajoute une transition douce */
}

.uk-navbar-nav .nav-font a:hover {
    text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px white; /* Effet de halo autour du texte */
}


.icon-menu{
    color: white!important;
}

/* Container principale */
.container {
    width: 95% ;

    margin:auto;
}

.container-small{
    width: 95% ;
    margin:auto;
}



/*GROS TEXTE HAUT DE PAGE*/


.service-buttons{
    font-size: 1.3vw;
    font-family: "Satoshi-Italic",sans-serif;
    border: 1px solid white;
    padding: 0px 10px;
    display: inline-block;
    text-transform: uppercase;
    max-width: 90%; 
    color: #ffff!important;
}

.service-buttons:hover{
    background-color: #ffff;
    padding: 0px 10px;
    display: inline-block;
    text-transform: uppercase;
}

.service-btn:hover{
    color:#1617A8!important;
    text-decoration: none!important;
}

.service-buttons1{
    margin-left: 10%;
    margin-top: 1%;
}

.service-buttons2{
    margin-left: 70%;
    margin-top: 1%;
}

.service-buttons3{
    margin-left: 50%;
    margin-top: 1%;

}

.accueil-ligne{
    text-align: right;
}

/*GROS TEXTE HAUT DE PAGE -reponsive */

.display-bottom{
   margin-top: 75%;
}
.explo{
    margin: 0px!important;
    padding: 0px!important;
}
.flex{
    display: flex; 
    align-items: center;
}

.épais{
    flex-grow: 1;
    vertical-align: text-top;
    border: 5px solid white;
}

.ration{
    margin-top:15px!important;
    text-align: right;
}

/*fin GROS TEXTE HAUT DE PAGE -reponsive */

/* SERVICE ACCUEIL - bouton services + BOUTONS*/

@media(min-width: 768px){
.row {
    display: flex;
}
}
.row {
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
}
.column {
flex: 1;
}

.text-column {
max-width: 100%;
}

.button-column {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 100%; /* Pour éviter tout problème de redimensionnement */


}



.accordion {
width: 100%;
text-align: center;
padding: 20px;
margin-top: 10px;
border: 1px solid white;
background-color: #1617A8 !important;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, filter 0.3s ease, padding 0.3s ease;
}

.accordion:hover {
text-decoration: none !important;
color: #fff;
background-color: #1617A8 !important;
filter: drop-shadow(0 0 5rem white);
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
    align-items: center;
  }
  .text-column, .button-column {

    text-align: left;
  }
  .accordion:hover {
        filter: none;
        text-decoration: none;
        background-color: #1617A8 !important;
}
}

.accordion.active + .panel {
display: block;
max-height: 200px;
}

.panel {
    width: 100%;
    background-color: white;
    margin-bottom: 10px;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-in-out;
    text-align: center;
    margin: auto;
    max-height: 0;
    opacity: 0;
}

.panel p {
    padding: 10px;
    color: rgba(22,23,168,1)!important;
    font-family: Satoshi-Italic!important;
    font-size: 1.2vw!important;
    line-height: 1.2; /* Correction ici */
}

/* fluidifier l'ouverture du panel */
.panel.open {
    max-height: 500px; /* Ajuste selon la taille du contenu */
    opacity: 1;
}



@media only screen and (max-width: 768px) {.panel p{
padding: 10px;
color: rgba(22,23,168,1)!important;
font-family: Satoshi-Italic!important;
font-size: 2.8vw!important;
}

}

.bouton{
    font-size: 1vw;
    font-family: "Satoshi-Italic",sans-serif;
    border: 1px solid white;
    padding: 0px 10px;
    display: inline-block;
    text-transform: uppercase;
    max-width: 90%; 
    color: #ffff!important;
}

@media only screen and (max-width: 768px) {
.bouton {
font-size: 3vw;
margin-bottom: 10px;
}
}

.bouton:hover{
    background-color: #ffff;
    padding: 0px 10px;
    display: inline-block;
    text-transform: uppercase;
}

.bouton:hover a{
    color:#1617A8!important;
    text-decoration: none!important;
}

.contact{
    font-family: "Satoshi-mediumitalic",sans-serif;
    text-decoration: none!important;
    color: rgba(22,23,168,1)!important;
}

.contact:hover{
    font-family: "Satoshi-mediumitalic",sans-serif;
    text-decoration-line: underline!important;
    color: rgba(22,23,168,1)!important;
}

/* fin SERVICE ACCUEIL - bouton services + BOUTONS*/






/*IMAGE HOVER*/
 @media screen and (min-width: 768px){
.img-hover {
    position: relative;
    display: block;
    overflow: hidden; /* Évite que le pseudo-élément déborde */
}

.img-hover img {
    width: 100%; /* S'assure que toutes les images prennent la largeur de leur conteneur */
    height: auto;
    display: block;
}

.img-hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(22,23,168,1) 0%, rgba(29,30,171,1) 13%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.img-hover:hover::before {
    opacity: 1;
}

}

/*fin IMAGE HOVER*/


/*IMAGE HOVER BLANC*/
 @media screen and (min-width: 768px){
.img-hover-blanc {
    position: relative;
    display: block;
    overflow: hidden; /* Évite que le pseudo-élément déborde */
}

.img-hover-blanc img {
    width: 100%; /* S'assure que toutes les images prennent la largeur de leur conteneur */
    height: auto;
    display: block;
}

.img-hover-blanc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}


.img-hover-blanc:hover::before {
    opacity: 1;
}

}
/*fin IMAGE HOVER BLANC*/

/*PROJET-ACCUEIL*/

@media(min-width: 768px){.projets-grid-home {
    display: grid;
    grid-template-columns: 5fr 3fr 4fr; /* Définit les proportions */
    gap: 20px; /* Espacement entre les éléments */
}
}

.projets-grid-home div {
    width: 100%; /* Pour éviter tout problème de redimensionnement */
}

@media(max-width: 768px){
.bouton-projet-index{
    margin-top: 20px!important;
}}

/*fin PROJET-ACCUEIL*/



/*PARTIE BLANCHE*/


.blanc {
    background-color: #ffffff; /* Utiliser 'background-color' pour définir une couleur de fond */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Les éléments sont disposés en colonne */
    width: 100vw;  /* Prend toute la largeur de l'écran */
    height: auto; /* Permet d'ajuster la hauteur en fonction du contenu */
    justify-content: center;
    align-items: center; /* Centre les éléments horizontalement */
    padding-top: 30px;
    padding-bottom: 20px;
}





@media (min-width: 1600px) {
    .blanc{
         height: 85vh; /* Prend 70% de la hauteur de l'écran */
    }
}

.home-etoile{
   position: absolute;
    left: 85%;
    transform-origin: center;
}

/* Appliquer la rotation à l’image */
.home-etoile{
    height: auto;
    transition: transform 0.6s ease-in-out;
}

/* Effet de rotation au survol */
.home-etoile:hover {
    transform: rotate(360deg);
}


/* Taille de l'étoile selon la résolution */
.width-grand-etoile {
    transform: scale(0.6);
}

@media (min-width: 1600px) {
    .width-grand-etoile {
        transform: scale(1.0);
    }
}


/*fin PARTIE BLANCHE*/


/*QUESTIONNAIRE ACCUEIL*/



/* Masquer l'icône par défaut (+) */
.uk-accordion-title:before {
    display: none!important; /* Masque l'icône par défaut (+) */
}

/* Ajout de l'étoile avant le titre de l'accordéon */
.uk-accordion-title {
    display: flex;
    align-items: center; /* Aligne verticalement l'étoile et le texte */
    gap: 20px; /* Ajoute un espace entre l'étoile et le texte */
    position: relative;
    padding-left: 30px; /* Crée de l'espace pour l'étoile */
    padding-top: 0.5%;
}

.active1{
    margin-top: 0!important;
    padding-bottom: 0.5%;
}


/* 🟢 Survol : fond blanc */
.active1:hover {
    background-color: #FFFFFF;
    transition: background-color 0.3s ease;
}

/* 🔵 Après clic : fond blanc et texte bleu */
.active1.selected {
    background-color: #FFFFFF !important;
}

.active1.selected h4 {
    color: rgba(22, 23, 168, 1) !important;
}
.active1:hover h4{
    color: rgba(22,23,168,1)!important;
}

/* 🟡 Modifier l’image de l’étoile quand l’élément est sélectionné */
.uk-accordion-title:hover .etoile-petite  {
    content: url('../img/etoile-bleue.png') !important;
}


.active1.selected .uk-accordion-title .etoile-petite{
    content: url('../img/etoile-bleue.png') !important;
}

.border-bottom{
    border-bottom: 1px solid white;
}

@media(max-width: 968px){
    .uk-accordion-title img{
        width: 30px;
    }
    .uk-accordion-title:hover img {
    content: url('../img/etoile-bleue.png') !important;
    width: 30px;
}
    .uk-accordion-title{
        padding: 10px;
    }

}


/*fin QUESTIONNAIRE ACCUEIL*/

.articles-align {
width: 100%;
text-align: center;
border: 1px solid white;
background-color: #1617A8 !important;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, filter 0.3s ease, padding 0.3s ease;
}

.articles-align:hover {
text-decoration: none !important;
color: #fff;
background-color: #1617A8 !important;
filter: drop-shadow(0 0 5rem white);
}
}

.article-margin{
    padding: 20px!important;
    margin-top: 20px!important;
}

/*UN DUO CRÉATIF*/


.box-decalage{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;

}

@media (min-width: 1308px){
    .box-decalage{
         width: 80%!important;

    }
}
.section-decalage {
    display: grid;
    grid-template-columns: auto 1fr; /* Une colonne pour le p, une autre pour le h3 */
    align-items: baseline; /* Alignement basé sur la ligne de base du texte */
    gap: 1rem; /* Espacement entre le p et le h3 */

}


@media (min-width: 1308px){
    .ligne-flex{

    display: flex;
    align-items: baseline; /* Aligne les textes en fonction de leur base */
    gap: 3rem; /* Espacement entre le titre et le texte */
}
}

@media (min-width: 1308px) {
    .petit-titre1{
    bottom: unset;
    padding-top: 10px;
    
}}



@media (min-width: 1308px){
.petit-titre2{
    bottom: unset;
    padding-top: 10px;
}
}



@media (min-width: 1308px) {
.petit-titre{
    white-space: nowrap; /* Empêche le retour à la ligne */    
    margin: 0;
    position: absolute;
    right: calc(86.5vw - 1.7125rem);
    text-align: right;

}
}
.decalage-h3{
    margin-top: 0px!important;
}



@media (max-width: 1308px) {
.ligne-flex p{
    margin-bottom: 0px!important;
}
.decalage-h3{
    margin-top: 15px!important;
}
}

@media (min-width: 1308px) {
    .decalage-h3 {
    text-indent: calc(13.5vw - 0.1875rem); /* Garde l'indentation */
    flex: 1; /* Permet au h3 de prendre l'espace restant */
    
}
}





/*FOOTER!!*/

.footer{
 background-image: linear-gradient(180deg, rgba(22,23,168,1) 0%, rgba(255,255,255,1) 100%);
 display: flex;
 align-items: flex-end;
 height: 20vh!important;
 width: 100%!important;
}


.f-blanc{
 background-color: #ffff!important;
 display: flex;
 align-items: flex-end;
 height: 20vh!important;
 width: 100%!important;
}

.footer-bleu-line{
    border: solid;
    border-width: 0.01em!important; 
    color: rgba(22,23,168,1)!important;
    margin:5px 0 5px 0!important;
}

.align-footer{
    display: flex;
    justify-content: space-between;
}



.align-bas{
    margin-top: 10px!important;
     margin-bottom: 0px;
}



.start{
    align-items: start;
}

@media(max-width:968px){
.flex-bottom{
    display: flex;
    align-items: flex-end!important;
}
}

.logo-f{
    height: 60px; 
}

a.f-contact{
    font-family: Satoshi-Medium!important;
    color: #1617A8!important;
}


/* FIN ____FOOTER!!*/


/*LIGNE ------HR + vertical*/



hr.bleu-line{
    color: rgba(22,23,168,1)!important;
    border: 1px solid;


}
.vertical-line{
    border-left: 1px solid #1617A8;
    display: inline-block;
    height: 10px;
    margin: 0 20px;
}

.hr-nomargin{
    margin: 0px!important;
}

@media (min-width:768px){
.vertical-line-body{
    border-left: 1px solid white;
    display: inline-block;
    height: 100%;
    margin: 0 20px;
}
}

@media (min-width: 768px) {
  .responsive-hr {
    display: none!important;
  }
}

/* Afficher sur les petits écrans */
@media (max-width: 767px) {
  .responsive-hr {
    color: rgba(22,23,168,1)!important;
    border: 1px solid;
    margin-top:3%;
    margin-bottom:0%;
  }
}

/* fin ---- LIGNE ------HR + vertical*/

/* en attente*/
.centre{
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.wait-f{
    overflow: hidden!important;
    background-color: rgba(22,23,168,1)!important;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* empêche le scroll */
    display: flex;
    flex-direction: column;
}

.wait-main{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wait-section {
    text-align: center;
}

.wait-footer {
    flex-shrink: 0; /* le footer ne se réduit pas */
}

@media(min-width:768px){
.merci{
    margin-top: 12%!important;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.merci-s{
    display: none;
}
}

.merci2{
    display: flex;
    flex-direction: column;
}

#flex-merci{
    flex: 80vh!important;

}

@media(max-width:768px){
.merci{
    display: none;
}


.merci-s{
    margin-top: 42%!important;
    justify-content: center;
    align-items: center;
    text-align: left!important;
}


.f-merci{
    position: relative;
    bottom: 0px;
    width: 100%;
}

#typing-text2 {
    display: block;
    min-height: 50px; /* Réserve de la place pour le texte final */
    overflow: hidden;
    white-space: pre-line; /* Permet aux <br> de fonctionner */
    text-align: center;
}


.merci-fix {
    position: absolute; /* Fixe l'élément et empêche qu'il ne soit poussé */
    top: 30%; /* Ajuste la hauteur selon ton design */
    left: 50%; /* Centre horizontalement */
    transform: translateX(-50%); /* Centrage parfait */
    width: 100%;
    text-align: center;
}

}

/* fon en attente*/


/*Scrollbar*/
/* Appliquer uniquement aux navigateurs WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    position: absolute; /* S'assurer qu'elle est au-dessus */
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: transparent; !important;
    border-radius: 17px;
    border: 3px solid rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Pour Firefox */
html {
    scrollbar-color: white transparent;
    scrollbar-width: thin;
}

.over-flow-hidden{
    overflow: hidden!important;
}

/*FIN ______Scrollbar*/




/* État initial: tout le main invisible et flou */
.anim {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

.anim{
      opacity: 1;
}


/*____________________________________________________________________________________________________________
page réseaux */
.reseaux{
  display: flex;
  flex-direction: column;
  gap: 40px; /* espace entre les boutons */

}
.reseaux .bouton{
    max-width: 100%!important;
     border-radius: 40px!important;
}

.reseaux .bouton a {
  display: inline-block;
  font-size: 2vw;
  transition: 0.3s;
  padding-top: 1%;
  padding-bottom: 1%;


}

.reseau-main{
    flex: 1!important;

}
@media(max-width:768px){
    .reseaux{

  gap: 40px; /* espace entre les boutons */
  

}
.margin-small-reseaux{
    margin-top: 35%!important;
}
 
.reseaux .bouton a {
  font-size: 5vw;
  padding-top: 2%;
  padding-bottom: 2%;


}
}