/* TYPOGRAPHIE */

/* quicksand-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/quicksand-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/* quicksand-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/quicksand-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* quicksand-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/quicksand-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* lato-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* lato-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* COULEURS */

  :root{
    --vert-fonce:#337978;
    --vert:rgba(51, 121, 120, 0.7);
    --vert-clair:rgba(51, 121, 120, 0.1);
    --vert-tres-clair:rgba(51, 121, 120, 0.05);
    --violet-clair:#8E619D;
    --violet:#723984;
    --gris-fonce:#333333;
    --bleu:#446BC0;
    --bleu-clair:rgba(68, 107, 192, 0.1);
    --blanc:#FFFFFF;
  }


  /* GLOBAL */


  html{
    scroll-behavior: smooth;

  }


  h1{
    font-size: 2.5rem;
    font-family: "Quicksand";
    font-weight: 700;
    color: #333333;
    line-height: 3.75rem;
  }

  h1 span{
    font-size: 3rem;
    color: #723984;
  }

  h2{
    font-size: 2rem;
    font-weight: 700;
    font-family: "Quicksand";
    color: #333333;
    line-height: 3rem;
  }

  h2 span{
    color: #723984;
    font-size: 2.25rem;
  }

  h3{
    font-size: 1.5rem;
    line-height: 2.25rem;
    color: #333333;
    font-family: "Quicksand";
  }

  p{
    font-size: 1rem;
    font-family: "Lato";
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--gris-fonce);
  }

  p strong{
    color: #337978;
    font-weight: 700;
  }

  li{
    color: var(--gris-fonce);
  }

  li strong{
    color: #337978;
    font-weight: 700;
  }


  a{
    text-decoration: none;
    font-family: "Lato";
    font-weight: 600;
    font-size: 1rem;
    display: inline-block;
  }

  li{
    font-family: "Lato";
  }

  .container{
    padding: 100px 25px;
    max-width:1440px;
    margin:auto;
  }


  /* BURGER MENU */

  body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

  header{
    padding:1rem;
    width: 100vw;
    height: 120px;
    background-color: var(--violet-clair);
    position:fixed;
    z-index: 10000;
}

.container-header{
  max-width:1440px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


header ul{
    list-style-type: "";
    gap:25px;
}

button span{
  background-color: var(--blanc);
  border-radius: .375rem;
  height: 2px;
  width: 1.625rem;
  display: inline-block;
}

nav ul{
  padding:0 50px;
}

nav ul li a{
    color: var(--blanc);
}

nav #menu ul li{
  width:90%;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid white;
}

nav #menu ul li.current-menu-item{
  border-bottom:1px solid white;
}

nav #menu ul li:last-child{
  border:none;
}


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


#menu{
    margin:0;
    position: fixed;
    inset: 0;
    background-color: var(--violet);
    display: flex;
    flex-direction: column;
    gap:1rem;
    padding:2rem;
    top:120px;
    transition: ease-in-out 300ms;
    transform: translateX(100vw);
}

#menu ul li:last-child{
  align-self: flex-start;
}

[aria-expanded=true] + #menu{
    transform: translate(0);
}

button{
    position: relative;
    z-index:1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid var(--blanc);
    border-radius: 15px;
    padding:15px;
    background-color: var(--violet);
    gap: 6px;
    width:63px;
    height: 63px;
}

/* CROIX quand ouvert */
nav button.open span:nth-child(3) {
  opacity: 0;
}

nav button.open span:nth-child(2) {
  transform: rotate(45deg) translateY(6px) translateX(5px);
}

nav button.open span:nth-child(4) {
  transform: rotate(-45deg) translateY(-6px) translateX(5px);
}

@media screen and (min-width:1148px){

  .header-container button{
    display: none;
  }

  header{
    display:flex;
    flex-direction: row;
    /* justify-content: space-between; */
    align-items: center;
    
  }

  .container-header{
    max-width:1400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:100%;
    margin: auto;
  }

  header nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .btn-connexion{
    margin-left:100px;
  }

  #menu{
    position: static;
    transform: none;
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  #menu ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:30px;
    justify-content: center;
  }

  nav #menu ul li, a{
    border:none;
    width:auto;
    padding-bottom:3px;
    margin-bottom:0;
  }

  nav #menu ul li:hover{
    padding-bottom:2px;
    border-bottom:1px solid white;
  }



}

/**** BOUTONS ****/

.cta1{
  padding: 16px 32px;
  border-radius: 30px 0 30px 0;
  border: 1px solid var(--vert-fonce);
  background-color: var(--vert-fonce);
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  gap:10px;
}



.cta1:hover{
  padding: 16px 32px;
  background-color: #FFFFFF;
  border: 1px solid var(--vert-fonce);
  color: var(--vert-fonce);
}

.cta1:hover svg path{
  stroke:#337978;
}

.cta2{
  padding: 16px 32px;
  border-radius: 30px 0 30px 0;
  border: 1px solid var(--vert-fonce);
  color: var(--vert-fonce);
  display: flex;
  align-self: flex-start;
  gap:10px;

}

.cta2:hover{
  padding: 16px 32px;
  background-color: var(--vert-clair);
  border: 1px solid var(--vert-clair);
  color: var(--vert-tres-clair);
  border: none;
  color: #337978;
}

.back-to-top{
  border-radius: 15px 0 15px 0;
  padding: 8px;
  background-color: var(--vert-fonce);
  width:50px;
  height: 50px;
  position:fixed;
  right:4px;
  bottom:20px;

}

.back-to-top:hover{
  background-color: var(--vert);
}

.btn1{
  padding: 16px 32px;
  border-radius: 15px;
  border: 1px solid var(--vert-fonce);
  background-color: var(--vert-fonce);
  color: #FFFFFF;
  width: fit-content;
  height: auto;
  font-family: "Lato";
  font-weight: 700;
  display:flex;
  flex-direction: row;
  gap:10px;

}

.btn1:hover{
  padding: 16px 32px;
  background-color: #FFFFFF;
  border: 1px solid var(--vert-fonce);
  color: var(--vert-fonce);
}

.btn1:hover svg path{
stroke: #337978;
}


.btn2{
  padding: 16px 32px;
  border-radius: 15px;
  border: 1px solid var(--vert-fonce);
  color: var(--vert-fonce);
}

.btn2:hover{
  padding: 16px 32px;
  background-color: var(--vert-clair);
  border: 1px solid var(--vert-clair);
  color: var(--vert-tres-clair);
  border: none;
  color: #337978;
}

.btn-connexion{
  padding: 16px 32px;
  border-radius: 15px;
  border: 1px solid var(--blanc);
  background-color: var(--violet);
  color: #FFFFFF;
  display: flex;
  gap:10px;
  width:fit-content;
}

.btn-connexion:hover{
  padding: 16px 32px;
  border-radius: 15px;
  border: 1px solid var(--blanc);
  background-color: var(--vert-fonce);
  color: #FFFFFF;
}

.btn-espace{
  padding: 16px 32px;
  border-radius: 15px;
  background-color: var(--bleu);
  color: #FFFFFF;
  margin: 0 auto;
  width:345px;
  height: auto;
  font-family: "Lato";
  font-weight: 700;
  font-size: 1rem;
}

.btn-espace:hover{
  padding: 16px 32px;
  border-radius: 15px;
  background-color: var(--bleu-clair);
  color: var(--bleu);
}

.btn-niveaux{
  background-color: var(--blanc);
  border-radius: 15px;
  color: var(--vert-fonce);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:7px 10px;
}

.btn-niveaux:hover{
  background-color: #337978;
  color: var(--blanc);
}

.btn-niveaux:hover svg path{
  stroke:var(--blanc);
}

.btn-solution:hover{
  background-color: #5C9493;
}

/*#region******** PAGE 404 *************/



.page-404{
  display: flex;
  flex-direction: column;
  gap:40px;
  padding-top:100px;
}

.page-404 .container{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.page-404 h2{
  font-family: "Lato";
  font-weight: 400;
}

.page-404 h2 span{
  font-style: italic;
  color: #333333;
}

.button-404{
 display: flex;
 flex-direction: column;
 gap:25px;
}

.button-404 .btn1, .btn2{
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap:10px;
}

/*#endregion*/


/*#region******** FOOTER **************/

footer{
  background-color: var(--violet-clair);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:30px;
}

.footer-container{
  padding: 80px 25px;
}

.container-footer{
  max-width:1200px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap:40px;
}

.infos-footer{
  display: flex;
  flex-direction: column;
  gap:8px;
}

.container-footer p{
color: var(--blanc);
}

footer nav{
  padding:0;
  display: flex;
  flex-direction: column;
  gap:8px;
}

footer nav{
  list-style-type: none;
  color: var(--blanc);
  font-family: "Lato";
  font-size: 1rem;
  padding:0;
}

footer nav a{
  color: var(--blanc);
  font-weight: 400;
  padding-bottom:3px;
}

footer nav a:hover{
  padding-bottom:2px;
  border-bottom:1px solid white;
}


/*#endregion*/


/*#region******* CONTACT *********/

.contact{
  padding-top: 100px;
}

.contact h1{
  margin-bottom: 15px;
}

.contact strong{
  font-size: 30px;
}

.formulaire{
  display: flex;
  flex-direction: column;
  gap:30px;
  margin-top:80px;
}

.contact-form{
  display: flex;
  flex-direction: column;
  gap:37px;
}


.contact-form .champ{
  display: flex;
  flex-direction: column;
  gap:15px;
}

.contact-form label{
  font-family: "Lato";
}

.contact-form .ligne-1, .ligne-2{
  display: flex;
  flex-direction: column;
  gap:37px;
}

.contact-form .champ input, textarea{
  border-radius: 15px;
  border: 1px solid var(--vert-fonce);
  height: 53px;
}

.contact-form .champ textarea{
  height: 149px;
}

#condition{
font-size: .875rem;
}

.contact-form a{
  color: #333333;
  text-decoration: underline;
  font-weight: 400;
  font-size: .875rem;
}



.wpforms-field-label{
  font-family: 'Lato';
  color: var(--gris-fonce)!important;
  font-weight: 400 !important;
}

.wpforms-field-medium{
  border-radius: 15px !important;
  height: 53px !important;
}

.wpforms-field-container textarea{
  height:150px !important;
}

.wpforms-submit-container .wpforms-submit{
  background-color: var(--vert-fonce)!important;
  font-family: 'Lato'!important;
  border-radius: 15px !important;
  padding:24px 32px !important;
}

@media screen and (min-width:768px){

.contact .formulaire .contact-form{
  width:60%;
}
}


@media screen and (min-width:1440px){

  .contact .contact-form .champ{
    width:100%;
  }

  .contact .contact-form .ligne-1, .ligne-2{
    display: flex;
    flex-direction: row;
  }

  .wpforms-container {
    margin: 0 !important;
    width: 60% !important;;
  }

}


/*#endregion*/

/*#region******* A PROPOS ***********/

.a-propos{
  padding-top:100px;
}

.a-propos .container{
  display: flex;
  flex-direction: column;
  gap:80px;
}

.a-propos .formatrice{
  gap:50px;
}

.a-propos .formatrice .texte-intro-apropos{
  display: flex;
  flex-direction: column;
  gap:50px;
}

.a-propos .contenu-1, .contenu-2, .contenu-3, .contenu-4, .contenu-5, .contenu-6{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.a-propos .texte-intro-apropos picture{
  margin: 0 auto;
}

.a-propos .formatrice img{
  border-radius: 30px 0 30px 0;
  box-shadow: -20px -20px 0px 1px rgba(217, 230, 229, 1);
  transform: translateX(10px);
  margin-top:20px;
  margin:60px auto 0 auto;
}

.a-propos .parcours{
  background-color: #EBF2F1;
}

.a-propos .parcours .contenu-4 h2,
.a-propos .parcours .contenu-5 h2,
.a-propos .parcours .contenu-6 h2{
  position: relative;
}

.a-propos .parcours .contenu-4 .rond-1,
.a-propos .parcours .contenu-5 .rond-2,
.a-propos .parcours .contenu-6 .rond-3{
  position: absolute;
  right:0;
  bottom: -30px;
}

.a-propos .prendre-contact{
  display: flex;
  flex-direction: column;
  gap:40px;
  background-color: var(--blanc);

}


.a-propos .boutons{
  display: flex;
  flex-direction: column;
  gap:25px;
  align-self: flex-start;
}


@media screen and (min-width:768px) {

  .a-propos .container:first-of-type p{
    width:80%;
  }

  .a-propos .parcours .contenu-4{
    position: relative;
    padding-left:230px;
  }
  
  .a-propos .parcours .contenu-4 .rond-1,
  .a-propos .parcours .contenu-5 .rond-2,
  .a-propos .parcours .contenu-6 .rond-3{
    left:-150px;
    top:0px;
  }
  
  .a-propos .parcours .contenu-5{
    position: relative;
    padding-left:230px;
  }
  
  
  .a-propos .parcours .contenu-6{
    position: relative;
    padding-left:230px;
  }


  .a-propos .prendre-contact .boutons{
    display: flex;
    flex-direction: row;
  }
  
}

@media screen and (min-width:1390px){


  .a-propos .formatrice .contenu-formatrice{
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .a-propos .formatrice .texte-intro-apropos{
    width:70%;
  }

  .a-propos .formatrice .contenu-formatrice .texte-intro-apropos p{
    padding-right:0;
  }

  .a-propos .parcours .contenu-4, .contenu-6{
    width:65%;
    }

  .a-propos .parcours .contenu-5{
    width:65%;
    margin-left:400px;
    }
}


/*#endregion*******/


/*#region******* SOLUTIONS SUR MESURE ***********/

/* HERO */

.solutions-sur-mesure{
  padding-top:100px;
}

.hero{
  background-color: #EBF2F1;
  padding-bottom:140px;
}


/* REDIRECTION */

:target{
  scroll-margin-top:150px;
}

.redirection h2{
  display: none;
}

.redirection ul{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:17px;
  padding:0;
  margin-top:-60px;
}

.redirection ul li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style-type: none;
  text-align: center;
  background-color: #337978;
  width: 290px;
  height: 118px;
  border-radius: 30px 0 30px 0;
  padding:20px 45px;
}

.redirection ul li a{
  color:var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.solutions-sur-mesure .texte-dev{
  display: flex;
  flex-direction: column;
  gap:40px;
}


/* fenetre modale */
/* Style de la modale */
.modal {
  display: none; /* Caché par défaut */
  position: fixed;
  z-index: 100000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image à l'intérieur de la modale */
.modal-content {
  max-width: 60%;
  max-height: 60%;
  border-radius: 5px;
}

/* Bouton de fermeture */
.close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.zoomable{
    cursor: zoom-in;
}


@media screen and (min-width:768px){

.ex img{
  max-width:450px;
  border-radius: 15px;
}

.ex-developpement img{
  max-width:600px;
  border-radius: 15px;
}

}


@media screen and (min-width:1024px){

 

  .redirection ul{
    width:70%;
    margin:-60px auto 0 auto;
  }

  .solutions-sur-mesure .macros{
    padding:0;
  }

}

@media screen and (min-width:1440px){
  .redirection ul{
    width:100%;
    margin:-60px auto 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

}

/* MACROS */

.macros .intro{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.exemples-macro{
  display: flex;
  flex-direction: column;
  gap:40px;
  padding-top:0;
}

.exemples-macro .ex{
  background-color: #EBF2F1;
  border-radius:15px;
  padding:50px;
  display: flex;
  flex-direction: column;
  gap:40px;
}

/* POWER BI / POWER QUERY / FICHIERS EXCEL */

.developpement{
  background-color: #EBF2F1;
  display: flex;
  flex-direction: column;
  gap:100px;
}

.developpement .ex-developpement{
  display: flex;
  flex-direction: column;
  gap:40px;
}


@media screen and (min-width: 768px){


  .solutions-sur-mesure .redirection ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width:100%;
  }

  .solutions-sur-mesure .macros{
    padding: 100px 25px;
  }

  .solutions-sur-mesure .macros .intro p{
    width:80%;

  }

  .solutions-sur-mesure .exemples-macro .ex .texte-ex{
    display: flex;
    flex-direction: column;
    gap:40px;

  }

  .solutions-sur-mesure .developpement p{
    width:80%;
  }

  .solutions-sur-mesure .texte-dev{
    display: flex;
    flex-direction: column;
    gap:40px;
  }


}

@media screen and (min-width:1024px){

  .solutions-sur-mesure .hero{
    padding: 150px 120px;
  }


  .solutions-sur-mesure .redirection ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width:100%;
  }

  .solutions-sur-mesure .macros{
    padding: 100px 25px;
  }

  .solutions-sur-mesure .macros .intro p{
    width:55%;

  }

  .solutions-sur-mesure .exemples-macro .ex{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding:50px 100px;
  }

  .solutions-sur-mesure .exemples-macro .ex:nth-child(odd) {
    flex-direction: row-reverse;
  }

  .solutions-sur-mesure .exemples-macro .ex .texte-ex{
    display: flex;
    flex-direction: column;
    gap: 40px;
    width:50%;
  }

  .solutions-sur-mesure .developpement .ex-developpement{
    display: flex;
    flex-direction: column;
    /*align-items: center;
    justify-content: space-between;*/
  }

  .solutions-sur-mesure .developpement .ex-developpement .texte-dev{
    width:80%;
    display: flex;
    flex-direction: column;
    gap:40px;
  }

  .solutions-sur-mesure .developpement .ex-developpement .texte-dev p{
    width:100%;
    padding:0;
  }

  }
  
  @media screen and (min-width:1200px){
      .solutions-sur-mesure .developpement .ex-developpement {
          display: flex;
          flex-direction: row;
          align-items: center;
      }
      
     .solutions-sur-mesure .developpement .ex-developpement:nth-child(even){
    flex-direction: row-reverse;
      
    }
  }
  
  @media screen and (min-width:1390px){
      .solutions-sur-mesure .macros {
        padding: 100px 120px 0px 120px;
      }
  }

/*#endregion*/


/*#region FORMATION */

.formation .hero{
  display: flex;
  flex-direction: column;
  
  gap:28px;
  padding-bottom:100px;
}

.formation .hero h1 span{
  color: #723984;
  font-size: 2.5rem;
}

.formation{
  padding-top:100px;
}

.formation ul{
    padding:0;
  }

  .ariane-container ul li{
    padding:20px 25px 0 25px;
    margin:0;
  }

.infos{
  display: flex;
  flex-direction: column;
  gap:50px;
  padding-bottom:0;
}

.formation .infos{
  padding:50px 120px;
}

.infos .fil-d-ariane p{
  color: #337978;
}

.formation .infos-formation{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.formation .item{
  display: flex;
  align-items: center;
  gap:23px;
}

.formation .item .description{
  display: flex;
  flex-direction: column;
  width:60%;
}

.titre{
  display: flex;
  gap:20px;
  align-items: center;
}

.titre h2{
  width:80%;
}

.objectif li{
  display: flex;
  align-items: center;
}


.programme ul li{
  font-size: .875rem;
  display: flex;
  /* align-items: center; */
  gap:15px;
}

.programme{
  display: flex;
  flex-direction: column;
  gap:80px;
}

.programme .objectif, .contenu, .organisation{
  display: flex;
  flex-direction: column;
  gap:30px;
}

.programme .liste{
  display: flex;
  flex-direction: column;
  gap:25px;
}

.programme .liste:last-child{
  padding-bottom: 0;
}

.formation .contenu .left, .right{
  display: flex;
  flex-direction: column;
  gap:50px;
}

.prendre-contact{
  background-color:#EBF2F1 ;
  display: flex;
  flex-direction: column;
  gap:40px;
}

.liste-organisation{
  display: flex;
  flex-direction: column;
  gap:50px;
}

.liste-contenu, .liste-organisation ul{
  list-style-type: none;
}

.liste-contenu{
  display: grid;
  gap:50px;
}

.infos-formation .svg-formation{
  width:90px;
  height: auto;
}

@media screen and (min-width:1040px){

  .formation .infos .infos-formation{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:5px;
    width:100%;
  }

  .formation .infos .item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width:20%;
  }

  .liste-contenu{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:50px;
  }
}




/*#endregion*/

/*#region CATALOGUE */

.hero-catalogue{
  background-color:#EBF2F1;
  display: flex;
  flex-direction: column;
  gap:40px;
  padding:200px 25px 250px 25px;
}

.certification{
  background-color: #337978;
  padding:25px 50px;
  border-radius: 15px;
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:12px;
  margin:-150px 25px 0 25px;
}

.certification p{
  color: var(--blanc);
  font-weight: 400;
}


.les-formations{
  display: flex;
    flex-direction: column;
    align-items: center;
}

.les-formations .logiciels{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:40px;
  padding-top:50px;
}

.les-formations .logiciels .left, .middle, .right{
  display: flex;
  flex-direction: column;
  gap:50px;
  width:100%;
}

.les-formations .logiciels .card-formation{
  background-color:#EBF2F1 ;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  gap:30px;
  padding:25px 20px;
  height: 100%;
  
}

.les-formations .logiciels .card-formation h3{
  color: #337978;
  text-align: center;
}


.les-formations .logiciels .card-formation .niveau{
  display: flex;
  flex-direction: column;
  width:100%;
  gap:20px;
}

.les-formations .logiciels .card-formation img{
  width:95px;
}

@media screen and (max-width:425px){

  .catalogue .les-formations .logiciels{
    width:90%;
}

.logiciels .liste-cards-formations {
  display: grid;
  gap: 30px;}
}

@media screen and (min-width:768px){

.catalogue .les-formations .certification{
  width:80%;
}

.catalogue .les-formations{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.catalogue .les-formations .logiciels{
  display: flex;
  flex-direction:row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width:80%;
  gap:20px;
}

.catalogue .les-formations .logiciels .card-formation{
  /* height: fit-content; */
  width: 100%;
}

.logiciels .liste-cards-formations {
  display: grid;
  gap: 30px;
    grid-template-columns: repeat(2, 1fr);
}

.catalogue .prendre-contact h2{
  width:100%;
}
}

@media screen and (min-width:1024px){

  .catalogue .les-formations .logiciels{
    width:100%;
  }

  .logiciels .liste-cards-formations {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
  }


  .les-formations .logiciels .left, .middle, .right{
    width:30%;
  }
}


@media screen and (min-width:1390px){

  .les-formations .logiciels{
    display: flex;
    flex-direction: row;
  }

  .les-formations .logiciels .left, .middle, .right{
    display: flex;
    flex-direction: column;
    gap:40px;
    width:30%;
  }

  .logiciels .liste-cards-formations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    /* columns: 3;
    column-gap: 40px;
    break-inside: avoid; */
  }

  .certification p{
    max-width:500px;
  }

  .certification .svg-certif{
    width:95px;
    height: auto;
  }

}


/*#endregion */

/*#region ACCUEIL */

.hero-accueil{
  padding-top:200px;
  display: flex;
  flex-direction: column;
  gap:40px;
  background-color:#EBF2F1;
  position: relative;
}


.hero-accueil .texte-hero{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cut-off-design{
  position: absolute;
  right:0px;
  bottom:-50px;
}


.hero-accueil .texte-hero h1 span:first-child{
  font-weight: 400;
  color: #333333;
  font-size: 2.25rem;
}

.hero-accueil .texte-hero .call-to-action{
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.hero-accueil .texte-hero .cta2{
  padding:16px 22px;
}

.hero-accueil .image-hero{
  margin-top:20px;
}

.hero-accueil .image-hero img{
  border-radius: 30px 0 30px 0;
  box-shadow: -20px -20px 0px 1px rgba(217, 230, 229, 1);
  transform: translateX(20px);
}

.hero-accueil .image-hero picture{
  display: flex;
  justify-content: center;
}



.accueil .carrousel{
  display: flex;
  flex-direction: column;
  gap:40px;
  
}

.accueil .carrousel .cta2{
  display: flex;
  align-self:flex-start;
  width: fit-content;
  margin: auto;
}

.accueil .carrousel .carrousel-formation{
  display: flex;
  flex-direction: row;
  gap:27px;
}

.accueil .carrousel .carrousel-formation li{
  background-color: #EBF2F1;
  min-width:228px;
  min-height: 280px;
  border-radius: 15px;
  padding:20px;
  display: flex;
  flex-direction: column;
  gap:30px;
  align-items: center;
  justify-content: center;
}

.carrousel-formation {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 10px;
  padding: 10px;
  
}

.accueil .carrousel .card-accueil {
  min-width: 250px;
  height: 150px;
  background: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  scroll-snap-align: start;
}

.accueil .carrousel .carrousel-formation li h3{
  color: var(--vert-fonce);
}

.accueil .arguments{
  background-color: #EBF2F1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:40px;
}

.accueil .arguments .chiffres{
  display: flex;
  flex-direction: column;
  gap:40px;
  width:50%;
  text-align: center;
  justify-content: space-evenly;
}

.accueil .arguments .chiffres li{
  position: relative;
  z-index: 5;
  flex: 1;
}
.accueil .arguments .chiffres li::before{
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background-color: var(--vert-clair);
  z-index: -1;
}

.accueil .arguments .chiffres li span{
  font-size: 3rem;
  font-weight: 700;
  color: #723984;
}

.carrousel-partenaires{
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* overflow: hidden; */
}

.partenaires-1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap:50px;
  width:100%;
  margin-top:50px;

}

.partenaires-1 img{
  height:95px;
}

.accueil .avis{
  background-color:#EBF2F1 ;
  display: flex;
  flex-direction: column;
  gap:40px;
}

.carrousel-avis{
  display: flex;
  flex-direction: column-reverse;
  gap:40px;
  justify-content: space-around;
  align-items: center;
  width:100%;
}

/*CARROUSEL*/

.splide{
  width:90%;
}

.splide__slide{
  background-color: var(--blanc);
  border:1px solid #337978;
  border-radius:15px;
  padding:23px;
  display: flex;
  flex-direction: column;
  gap:8px;
  width: calc(96%) !important;

}

.splide__list{
  display: flex;
  flex-direction: row;
  gap: 8px;
}



.accueil .avis .note{
  display: flex;
  flex-direction: column;
  text-align: center;
  gap:5px;
}

.accueil .avis .note span{
  font-size: 1.5rem;
}

.accueil .sur-mesure{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.accueil .sur-mesure .image-sur-mesure{
  align-self: center;
  margin-top:20px;
  position: relative;
}

.accueil .sur-mesure .image-sur-mesure img{
  border-radius: 30px 0 30px 0;
  box-shadow: -20px -20px 0px 1px rgba(217, 230, 229, 1);
  transform: translateX(10px);
}

.accueil .sur-mesure .texte-sur-mesure{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.accueil .sur-mesure .cta2{
  display: flex;
  align-self:flex-start;
  width: fit-content;
  margin: auto;
}

@media screen and (min-width:768px) {

  .hero-accueil .texte-hero p{
    width:80%;
  }

  .hero-accueil .texte-hero .call-to-action{
    display: flex;
    flex-direction: row;
  }

  .hero-accueil .image-hero{
    align-self: center;
  }

  .accueil .carrousel h2{
    width:70%;
  }

  .accueil .arguments h2{
    align-self: flex-start;
    width:60%;
  }

  .accueil .arguments .chiffres{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width:70%;
    flex-wrap: wrap;
    gap:70px;
  }

  .accueil .arguments .chiffres li{
    position: relative;
  }

  .accueil .arguments .chiffres li{
    /* flex: 0; */
    width: fit-content !important;
   }
  
  .accueil .arguments .chiffres li:nth-child(1) svg{
    position: absolute;
    top:0px;
    left:0px;
    transform: translateX(5%);
  }
  
  .accueil .arguments .chiffres li:nth-child(2) svg{
    position: absolute;
    top:0px;
    left:0px;
    transform: translateX(-7%);
  }
  
  .accueil .arguments .chiffres li:nth-child(3) svg{
    position: absolute;
    top:0px;
    left:0px;
    transform: translateX(5%);
  }
  
  .accueil .arguments .chiffres li:nth-child(4) svg{
    position: absolute;
    top:0px;
    left:0px;
    transform: translateX(-17%);
  }
  
  .accueil .arguments .chiffres li:nth-child(5) svg{
    position: absolute;
    top:0px;
    left:0px;
    transform: translateX(-23%);
  }
 

  .accueil .partenaires h2{
    width:60%;
  }

  .accueil .partenaires h2{
    width:100%;
    padding-bottom:80px;
  }

  .accueil .partenaires .carrousel-partenaires{
    display: flex;
    flex-direction: column;
    gap:60px;
    align-items: center;
  }

  .accueil .partenaires .partenaires-1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap:60px;
    width:95%;
  }

  .accueil .partenaires .partenaires-1 li img{
    max-height: 95px;
  }

  /* .accueil .partenaires .partenaires-2 li img{
    max-height:55px;
  } */

  .accueil .sur-mesure p{
    width:80%;
  }

  .footer-container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    text-align: left;
  }

  .footer-container svg{
    order:1;
  }

  .splide__slide{
    width: calc(48%) !important;
  }
  }

  @media screen and (min-width:1024px){
    .accueil .arguments .chiffres{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width:60%;
      flex-wrap: wrap;
      gap:70px;
    }

    .accueil .carrousel .carrousel-formation{
      display: flex;
      flex-direction: row;
      gap:10px;
      justify-content: center;
    }

    .splide__slide{
      width: calc(48%) !important;
    }
  }

  @media screen and (min-width:1390px){

    .header-container{
      padding: 16px 120px;
    }

    .container{
      padding: 100px 120px;
    }

    h1{ 
      font-size: 3rem;
      line-height: 4.5rem;
    }

    h1 span{
      font-size: 4rem;
    }

    h2{
      font-size:2rem;
    }

    span h2{
      font-size: 2.5rem;
    }


    /* ACCUEIL */

    .accueil .hero-accueil{
      display: flex;
      flex-direction: row;
      padding-top:200px;
    }

   .accueil .hero-accueil .texte-hero{
    width:60%;
   }

   .accueil .hero-accueil .h1{
    padding-right:50px;
   }

   .accueil .hero-accueil p{
    font-size: 1.125rem;
    line-height: 1.875rem;
   }

   .hero-accueil .texte-hero p{
    width:80%;
  }

   .accueil .carrousel .carrousel-formation{
    margin:auto;
   }

   .accueil .carrousel .carrousel-formation{
    display: flex;
    flex-direction: row;
    gap:27px;
  }

   .counter-container {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.counter {
    font-size: 40px;
    font-weight: bold;
    color: #007bff;
}

   .accueil .arguments .chiffres{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width:60%;
    gap:70px;
    padding-top:30px;
  }
  
  .accueil .arguments .chiffres li{
    flex: 1;
    
   }

   .accueil .arguments h2{
    width:100%;
   }

   .accueil .arguments .chiffres li{
    font-size: 1.25rem;
   }

   .accueil .arguments .chiffres li span{
    font-size: 4rem;
   }

   .accueil .arguments .chiffres li::before{
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 100%;
    background-color: var(--vert-clair);
    z-index: -1;
  }

  .accueil .partenaires h2{
    width:100%;
    padding-bottom:80px;
  }


  .accueil .avis h2{
    width:70%;
  }

  .accueil .carrousel-avis{
    display: flex;
    flex-direction: row-reverse;
  }

  .accueil .sur-mesure{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }

  .accueil .sur-mesure .texte-sur-mesure{
    width:50%;
    display: flex;
    flex-direction: column;
  }

  .accueil .sur-mesure .texte-sur-mesure p{
    width:100%;
  }

  .accueil .sur-mesure .texte-sur-mesure .cta2{
   margin:0;
  
  }
  .splide__slide{
    width: calc(48%) !important;
  }

  .splide{
    width:70%;
  }
  

  /* CATALOGUE DE FORMATION */

  .catalogue .hero-catalogue{
    padding:200px 120px 150px 120px;
  }

  .catalogue .hero-catalogue p{
    width:80%;
  }

  .catalogue .les-formations .certification {
    display: flex;
    flex-direction: row;
    max-width:750px;
    margin-top:-60px;
  }

  .catalogue .logiciels{
    padding-bottom:100px;
    display:flex;
    justify-content: space-between;
    
  }

  .catalogue .les-formations .logiciels .left, .middle, .right{
    display: flex;
    flex-direction: column;
    
  }

  }

  @media screen and (min-width:1440px){
    .catalogue .hero-catalogue p{
      width:60%;
    }
  }

  

/*#endregion*/

/*#region MENTIONS LEGALES */

.legal .principal{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.hero-legal{
  padding-top:200px;
  background-color: #EBF2F1;
}

.legal .paragraphe{
  display: flex;
  flex-direction: column;
  gap:40px;
}



/*#endregion */

/*#region PLAN DU SITE */

.wsp-container{
  display: flex;
  flex-direction: column;
  gap:50px;
}

.wsp-pages-list, .wsp-formationss-list{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wsp-pages-list li a, .wsp-formationss-list li a{
  color: var(--gris-fonce);
}

.wsp-container h2{
  color: #723984;
}

/*#endregion*/

/***************** ESPACE APPRENANT *******************/

/* GLOBAL */

.fil-d-ariane p{
  color: #446BC0;
  font-weight: 700;
  padding-bottom:50px;
}

.fil-d-ariane a{
  color: #333333;
  font-weight: 400;
}

.fil-d-ariane a:hover{
    text-decoration: underline;
}

/* HEADER */

.logiciel_actif{
  color: white;
  font-weight: 700;
  font-size: 24px;
}

.prout{
  padding:0px;
}

.espace-apprenant{
  /* display: flex;
  justify-content: space-between;
  align-items: flex-end; */
  padding:1rem;
  width: 100vw;
  height: 120px;
  background-color: var(--vert-fonce);
  position:sticky;
  z-index: 10000;
}

.espace-apprenant p{
  font-weight: 700;
  color: white;
  font-size: 1.25rem;
  
}


#menu-apprenant{
  margin:0;
  position: fixed;
  inset: 0;
  background-color: #478685;
  display: flex;
  flex-direction: column;
  gap:1rem;
  padding:2rem;
  transition: transform 0.35s ease-in-out;
  top:120px;
  z-index:1000;
  transform: translateX(100vw);
}



#menu-apprenant li:last-child{
align-self: flex-start;
border-bottom:1px solid white;
width:100%;
padding-bottom:15px;

}

[aria-expanded=true] + #menu-apprenant{
  transform: translate(0);
}

.btn-apprenant{
  position: relative;
  z-index:1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--blanc);
  border-radius: 15px;
  padding:15px;
  background-color: var(--bleu);
  gap: 6px;
  width:63px;
  height: 63px;
}

@media screen and (min-width:1024px){

  .espace-apprenant{
    padding:16px 120px;
  }

  .btn-apprenant{
    display: none;
  }

}

/* FOOTER */


.footer-apprenant{
  background-color: var(--vert-fonce);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:20px;
  margin-top:130px;
}

.footer-container{
  padding: 80px 25px;
}

footer ul{
  padding:0;
  display: flex;
  flex-direction: column;
  gap:8px;
}

footer ul li{
  list-style-type: none;
  color: var(--blanc);
  font-family: "Lato";
  font-size: 1rem;
  padding:0;
}

footer ul li a{
  color: var(--blanc);
  font-weight: 400;
}

@media screen and (min-width:768px){
  .footer-container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    text-align: left;
  }

  .container-footer{
    max-width:1400px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap:40px;
    width:100%;
    margin: auto;
  }

  .footer-container svg{
    order:1;
  }
}

@media screen and (min-width:1390px){
  .footer-container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    text-align: left;
    padding:16px 120px;
    }

  .footer-container .liens-utiles-footer ul{
    display: flex;
    flex-direction: row;
    gap:25px;
  }

  .container-footer{
    max-width:1400px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap:40px;
    width:100%;
    margin: auto;
  }

  .footer-apprenant{
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      text-align: left;
      padding:16px 120px;
      
  }

  .footer-apprenant .liens-utiles-footer ul{
    display: flex;
    flex-direction: row;
    gap:25px;
  }
  
}

/* BOUTONS */

.btn-tdb{
display: inline-block;
background-color: #446BC0;
color: var(--blanc);
border-radius:15px ;
width:160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}

.btn-tdb:hover{
  background-color:#EDF1F9;
  color: #446BC0;
}

.btn-niveau{
  border: 1px solid #446BC0;
  padding:8px 16px;
  border-radius:15px 0 15px 0;
  color: #333333;
  font-weight: 400;
  width: fit-content;
}

.btn-niveau:hover{
  background-color: #446BC0;
  color: var(--blanc);
}

.btn-niveau.active{
  background-color: #446BC0;
  color:var(--blanc);
}

.btn-quiz{
  background-color: #446BC0;
  color: var(--blanc);
  border-radius: 30px 0 30px 0;
  padding:16px 24px;
  display: flex;
  justify-content: space-between;
}

.btn-quiz:hover{
  background-color: #EDF1F9;
  color: #446BC0;
}

.btn-quiz svg path{
  stroke:var(--blanc);
}

.btn-quiz:hover svg path{
  stroke: #446BC0;
}

.item-deroulant-btn{
  background-color: #446BC0;
  width:100%;
  color: var(--blanc);
  font-weight: 700;
}

/*#region CONNEXION */


.connexion h1{
  font-family: "Lato";
  font-weight: 400;
}

.connexion .identifiant{
  padding-top:200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:40px;
  text-align: center;
}

.connexion .identifiant .contact-form label{
  text-align: left;
}

.connexion .identifiant .contact-form .motdepasse{
  text-align: right;
}

.connexion .identifiant p a{
  color: var(--gris-fonce);
  text-decoration: underline;
  font-weight: 400;
}

.retour-accueil:hover{
  color: #723984 !important;
}

.unlog:hover{
  text-decoration: underline;
}

@media screen and (min-width:768px){
  .connexion .contact-form{
    width:50%;
    align-self: center;
  }
}

@media screen and (min-width:1024px){

  .connexion .contact-form{
    width:40%;
    align-self: center;
  }

}

.uwp-login-class .card-body h3{
  display: none;
}

.uwp-remember-me{
  display: none;
}

.uwp-footer-links{
  display: none;
}

.form-control{
  border:none;
}

.mb-3{
  font-family: 'Lato' !important;
  
}

.bsui button:not(:disabled), .bsui [type="button"]:not(:disabled), .bsui [type="reset"]:not(:disabled), .bsui [type="submit"]:not(:disabled) {
  font-family:'Lato';
  text-transform:initial !important;
  
}

.uwp-login-form button{
  background-color: #446BC0 !important;
}


/*#endregion*/

/*#region TABLEAU DE BORD */

.tableau-de-bord{
  /* padding-top:200px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:40px;
}

.tableau-de-bord h1{
  font-family: "Lato";
  font-weight: 400;
}

.tableau-de-bord .item-tdb{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:20px;
}

.tableau-de-bord ul li{
  list-style-type: none;
}

.tableau-de-bord ul{
  padding:0;
}

@media screen and (min-width:768px){

  .tableau-de-bord .item-tdb{
    display: flex;
    justify-content: center;
  }

  .tableau-de-bord .item-tdb li a{
    min-width:275px;
    min-height: 275px;
  }

}

/*#endregion */

/*#region TELECHARGEMENTS*/

.telechargements .fichiers-telecharger{
  display: flex;
  flex-direction: column;
  gap:40px;
}

.telechargements h1{
  font-family: "Lato";
  font-weight: 400;
  text-align: center;
}

.telechargements .fichiers-telecharger p{
  text-align: center;
}

.telechargements .fichiers-telecharger .niveau{
  display: flex;
  gap:15px;
  flex-wrap: wrap;
  justify-content: center;
  padding:10px;
}

.telechargements .fichiers-telecharger .liste-telecharger{
  display: flex;
  flex-direction: column;
  gap:8px;
}

.telechargements .fichiers-telecharger .liste-telecharger ul{
  width:100%;
}

.telechargements .fichiers-telecharger .liste-telecharger li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid #c8c8c8;
  padding:10px 0;
  font-size: .875rem;
}

.zone-categorie{
  margin-bottom:50px;
}

.btn-telecharger{
  border: 2px solid white;
  border-radius: 15px;
  padding:6px 16px;
  display: flex;
  align-items: center;
  gap:10px;
  font-size: .875rem;
  color: var(--blanc);
  background-color: #446BC0;
}

.btn-telecharger:hover{
  background-color: var(--blanc);
  color: #446BC0;
  border: 2px solid #446BC0;
}

.btn-telecharger:hover svg path{
  stroke: #446BC0 !important;
}

.btn-telecharger-mini{
  border: 2px solid white;
    border-radius: 15px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    color: var(--blanc);
    background-color: #EDF1F9;
}

.btn-telecharger-mini:hover{
  border:2px solid #446BC0;
}

.btn-telecharger-mini svg path{
  stroke:#446BC0;
}



.telechargements .fichiers-telecharger .liste-telecharger li a svg path{
  stroke:var(--blanc);
}

.telechargements .fichiers-telecharger .liste-telecharger .tele-categorie{
  background-color: #446BC0;
  color: var(--blanc);
  padding:15px 15px;
  border-radius: 15px;
  border-bottom:none;
}



/*#endregion */


/*#region QUIZ */


.telechargements .liste-quiz{
  list-style-type: none;
  padding:0;
  display: flex;
  flex-direction: column;
  gap:23px;
}

.kahoot{
  display: flex;
  flex-direction: column;
  gap:10px;
}

.kahoot:last-child li{
  display: flex;
  gap:15px;
}

/*#endregion */

/*#region ASTUCES LOGICIELS */

 .liste-astuces {
  display: flex;
  flex-direction: column;
  gap: 32px;
  z-index: 0;
}

 .open-astuce-btn {
  background-color: var(--bleu);
  color: var(--blanc);
  font-weight: 700;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  gap: 8px;
  border: none;
  text-align: start;
  width: 100%;
  cursor: pointer;
}

 .astuce-content {
  padding-block: 16px;
}

 .telechargements .fichiers-telecharger .astuce-content p {
  margin-bottom: 16px;
  width:90%;
  text-align: left;
}

.telechargements .fichiers-telecharger .astuce-content img{
  margin: auto;
}

 .astuce-content-window {
  height: 0;
  overflow: hidden;
}
.open .astuce-content-window {
  height: initial;
}

 .open svg {
  transform: rotate(180deg);
}

@media screen and (min-width:768px) {
  .telechargements .fichiers-telecharger .liste-deroulante{
    display: flex;
    flex-direction: row;
  }
}

/*#endregion */

/*#region VIDEOS */

.liste-videos{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:50px;
  /* flex-wrap: wrap; */
}

.miniature-video{
  width:346px;
  height:192px;
}

.video{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width:100%;
}

.liste-videos p:empty {
  display: none;
}

.video a{
  color: #333333;
  font-weight: 700;
}

.video a:hover{
  text-decoration: underline;
}



@media screen and (min-width:768px){
.liste-videos{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap:50px;
  flex-wrap: wrap;
}

.video{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width:45%;
}

.miniature-video{
  width:346px;
  height:192px;
}

}

@media screen and (min-width:1440px){
  .video{
    width:25%;
  }
}




/*#endregion*/

/************# TRES GRAND ECRAN **************/