@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body {font-family:'Open+Sans', sans-serif; margin:0}

/* Header tags et class */

.container-component>*+* {
    margin-top:0em
}
.container-header {
  background-image: none;
    background:white;
    display:flex;
    justify-content: space-between;
    padding:5px 20px;
    gap:40px; 
}

.container-header .container-nav {
  padding-bottom: 0;
}

.container-nav .navbar {
  align-items: flex-end;
}

.containe-header .grid-child {
padding: 0.5em 3em;

}

.grid-child {margin-left:0;
    margin-right:0}

.container-header .navbar-brand{
    display:block;
padding-bottom: 0;
}

.brand-logo{width:8vh;
    display:flex;
    align-items:center;
margin-left: 5px;}

.container-header .site-description{
  font-size: 20px;font-weight: 600; 
color:rgb(2, 157, 152);
display:flex;
align-items:center;
padding: 0;
padding-top: 15px;
margin:0;

}

.container-header .mod-menu {color:black;
    display: flex;
    align-items: flex-end;
}

.site .container-header .metismenu-item {text-decoration: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap:40px;
  }


.site .container-header .mod-menu>.metismenu-item .active:after {
    background: rgb(2, 157, 152);
    right: 0;
}

      
.site .container-header .mod-menu>.metismenu-item :after {opacity:1;
  background:rgb(2, 157, 152) ;
  transition: all 0.8s ease-in-out
 
}

.grid-child {width:auto}


/* Premier module : Banner */

.site-grid{
    display:block;
    grid-gap:0
}

.banner_accueil .mod-custom  {
    color:white;
    min-height: 30vh;
    padding:15px 30px 20px 100px;
    display:flex;
    flex-direction:column;
    align-items: start;
    justify-content:center;
    position:relative;
    z-index:1;
gap:5px;
background-repeat: no-repeat;
background-size: cover;
padding-left: 60%;
background-position: 10% 40%;
}
.second_p_banner {
  text-shadow:3px 3px 1px rgb(0, 117, 124);}

.banner_accueil .mod-custom > * {
    position: relative;
    z-index: 1;
}

.banner_accueil .mod-custom:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color:white;
    opacity: .4; */
    z-index: 0;
}
.banner_accueil h1{
  
    text-shadow:3px 3px 1px rgb(0, 117, 124);}

.container-banner img { 
object-fit: cover; 
/* width: 100%; */
height: 100%;
}
.container-banner {
    margin:0;
    /* background:rgba(13, 113, 235, 0.273) */
}
.container-banner .blog-item {position:relative}

.container-banner .item-content>h1{
    font-size: clamp(18px, 4vw, 72px);
    

}
.container-banner strong{
  font-weight: 700;

}

.container-banner .item-content>h2{
    font-size: clamp(18px, 3vw, 72px)

}

.container-banner a {
  color: black;
  text-decoration: none;
  transition: all 0.2s ease;   
  font-weight: 500;
  border-color: white;
  border-radius: 40px;
  border: solid 2px;
  padding: 10px 40px;
  font-size: clamp(5px, 1vw, 200px);
  background:white;
  border:white;
  position:relative;
  z-index: 2;
  box-shadow:0px 0px 5px 2px rgb(0, 63, 66);
}

.container-banner a:hover{
  padding: 13px 46px;
  font-weight: 800;
  color: black;
}

.banner_all_pages {
  background:linear-gradient(90deg, rgb(0 113 109), 
  rgb(3 189 176) 30%, 
  rgb(3 189 176) 70%, rgb(0 113 109));
}


/* 2ème section: module titre nos formations */

.top-a {
    border:none;
background-color:white;
}
.container-top-a>* {
    margin:0
}

.card-body h3 {font-size: clamp(9px, 1.5vw, 72px);
font-weight: 400;}

.explication .mod-custom{
    display:block;
    text-align: center;


    ;
}

.explication ul{
    
    list-style-type: none; 
    display:flex
   
}

.explication li {
    text-decoration: none;
    border-color: rgb(2, 157, 152);
    /* border-radius: 40px; */
    border: solid 2px none;
    font-size: 20px;
    /* background:linear-gradient(45deg, blue, rgb(0, 128, 98), orange); */
    background: rgba(128, 128, 128, 0.278);
    color:black;
    padding: 2px 2px;
    width: 200px;
    margin: 10px auto;
}

.explication p{
    font-size:25px;
    font-weight:700;
    animation-duration: 3s;
    animation-name:initial;
    animation-iteration-count: infinite;
}



/* ****************************
*******************************
*******************************

Section cercle formation: 

*******************************
*******************************
*******************************

*/


.question{
margin:10px;
padding:10px;
padding-top:30px;
font-size:clamp(5px, 2vw, 150px)
}

.items-leading {
    /* background: rgb(245, 241, 235); */
  } 

  .item-cercle .fields-container {
width: 70vw;
height: 70vw;
margin:auto;
max-height:  1200px;
max-width: 1200px;
}


.cercle-formations {
    list-style-type: none;
    }

   .item-cercle ul {
      aspect-ratio: 1 / 1;
      display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0fr; 
  grid-template-rows: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". . . . . . . . . . ."
    ". . . couleurs couleurs . feedback feedback . . ."
    ". . . couleurs couleurs . feedback feedback . . ."
    ". langage langage . . . . . entretien entretien ."
    ". langage langage . Center Center Center . entretien entretien ."
    ". . . . Center Center Center . . . ."
    ". jeu jeu . Center Center Center . questionnement questionnement ."
    ". jeu jeu . . . . . questionnement questionnement ."
    ". . . public public . ecoute ecoute . . ."
    ". . . public public . ecoute ecoute . . ."
    ". . . . . . . . . . ."; 

    margin:0;
    padding:0;
}
  
    
  
  .item-cercle li {
    border-radius:50%;
    text-align:center;
   display:grid;
    place-content:center;
    padding:10px;
  } 
  

  .item-cercle li {
    font-family:"Roboto",sans-serif;
    transition:all 0.3s linear;
    text-transform:uppercase;
    list-style-type: none;
    box-shadow:3px 10px 5px 5px rgba(128, 128, 128, 0.558);
  }

  .item-cercle h3{
    font-size: clamp(0.5px, 0.9vw, 150px);
    padding:0 15px
  }

  .item-cercle img {
    width: clamp(5px, 3.5vw, 150px);
    filter:grayscale(0.7)
  }

  .item-cercle p {
   margin-bottom:0;
  }
  
  .item-cercle li:hover img {
    filter:grayscale(0)
  }

  .item-cercle li:nth-child(9) {
    background: url("/images/Resize_AdobeStock_image_banner_cours_communication_formation_nsit0108.webp");
    background-repeat: no-repeat;
    background-size: 250%;
    background-position: 40% 15%;
    grid-area: Center;
    border-radius:50%;
    display:grid; 
    place-content:center;
    text-align:center;
    padding:0;
    position: relative;
    overflow:hidden;
    box-shadow:0px 0px 7px 7px rgba(128, 128, 128, 0.558);
  }

  .item-cercle li:nth-child(9):before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background: white;
    opacity:0.3 */
  }

  .item-cercle a{
    color: black;
  text-decoration: none;
  transition: all 0.2s ease;   
  font-weight: 500;
  border-color: white;
  border-radius: 40px;
  border: solid 2px;
  padding: 10px 40px;
  font-size: clamp(5px, 1vw, 200px);
  background:white;
  border:white;
  position:relative;
  z-index: 2;
  box-shadow:0px 0px 5px 2px rgb(0, 63, 66);
  }

  .item-cercle a:hover{
    padding: 13px 46px;
    font-weight: 800;
    color: black;
  }

  .item-cercle li:nth-child(9) h3{
    font-size:clamp(5px,2vw,72px);
    color:white;
    position: relative;
    z-index: 1;
    text-shadow:3px 3px 1px rgb(0, 117, 124);
  }

  

  .item-cercle li:nth-child(1) {
    grid-area: couleurs;
    background: linear-gradient(  145deg,
    hsl(0deg 0% 100%) 9%,
    hsl(40deg 2% 96%) 50%,
    hsl(40deg 2% 92%) 65%,
    hsl(40deg 2% 87%) 74%,
    hsl(40deg 2% 83%) 81%,
    hsl(40deg 2% 79%) 86%,
    hsl(40deg 2% 75%) 90%,
    hsl(40deg 2% 71%) 93%,
    hsl(40deg 2% 67%) 96%,
    hsl(40deg 2% 63%) 100%
  );
  transform: translate(14px, 41.2px);
    
  }
  .item-cercle li:nth-child(1):hover {
    /* box-shadow:20px 40px 0 rgba(254, 2, 2, 0.925);     */
    transform: translate(35px, 103px);
  }

  .item-cercle .fields-container *:hover ~ li:nth-child(9) {
    transform: scale(1.1);
    background-size: 250%;
    background-position: 25% 15%;
  }

  .item-cercle li:nth-child(2) {
    grid-area: feedback;
    background: linear-gradient(  210deg,
    hsl(0deg 0% 100%) 9%,
    hsl(40deg 2% 96%) 50%,
    hsl(40deg 2% 92%) 65%,
    hsl(40deg 2% 87%) 74%,
    hsl(40deg 2% 83%) 81%,
    hsl(40deg 2% 79%) 86%,
    hsl(40deg 2% 75%) 90%,
    hsl(40deg 2% 71%) 93%,
    hsl(40deg 2% 67%) 96%,
    hsl(40deg 2% 63%) 100%
  );
  transform: translate(-14px, 41.2px);
  }
  .item-cercle li:nth-child(2):hover {
    transform: translate(-35px, 103px);
  }
  .item-cercle li:nth-child(3){
    grid-area: entretien;
    background: linear-gradient(
      250deg,
      hsl(0deg 0% 100%) 9%,
    hsl(40deg 2% 96%) 50%,
    hsl(40deg 2% 92%) 65%,
    hsl(40deg 2% 87%) 74%,
    hsl(40deg 2% 83%) 81%,
    hsl(40deg 2% 79%) 86%,
    hsl(40deg 2% 75%) 90%,
    hsl(40deg 2% 71%) 93%,
    hsl(40deg 2% 67%) 96%,
    hsl(40deg 2% 63%) 100%
  );
  transform: translate(-41.2px, 14px);
  }
  .item-cercle li:nth-child(3):hover {
    transform: translate(-103px, 35px);
  }

  .item-cercle li:nth-child(4) {
    grid-area: questionnement;
    background: linear-gradient( 295deg,
    hsl(0deg 0% 100%) 9%,
    hsl(40deg 2% 96%) 50%,
    hsl(40deg 2% 92%) 65%,
    hsl(40deg 2% 87%) 74%,
    hsl(40deg 2% 83%) 81%,
    hsl(40deg 2% 79%) 86%,
    hsl(40deg 2% 75%) 90%,
    hsl(40deg 2% 71%) 93%,
    hsl(40deg 2% 67%) 96%,
    hsl(40deg 2% 63%) 100%
  );
  transform: translate(-41.2px, -14px);
  }

  .item-cercle li:nth-child(4):hover {
    transform: translate(-103px, -35px);
  }
  .item-cercle li:nth-child(5){
    grid-area: ecoute;
    background: linear-gradient(
      335deg,
      hsl(0deg 0% 100%) 9%,
      hsl(40deg 2% 96%) 50%,
      hsl(40deg 2% 92%) 65%,
      hsl(40deg 2% 87%) 74%,
      hsl(40deg 2% 83%) 81%,
      hsl(40deg 2% 79%) 86%,
      hsl(40deg 2% 75%) 90%,
      hsl(40deg 2% 71%) 93%,
      hsl(40deg 2% 67%) 96%,
      hsl(40deg 2% 63%) 100%
    );
    transform: translate(-14px, -41.2px);
  }

  .item-cercle li:nth-child(5):hover {
    transform: translate(-35px, -103px);

  }
  .item-cercle li:nth-child(6){
    grid-area: public;
    background: linear-gradient(
      25deg,
      hsl(0deg 0% 100%) 9%,
      hsl(40deg 2% 96%) 50%,
      hsl(40deg 2% 92%) 65%,
      hsl(40deg 2% 87%) 74%,
      hsl(40deg 2% 83%) 81%,
      hsl(40deg 2% 79%) 86%,
      hsl(40deg 2% 75%) 90%,
      hsl(40deg 2% 71%) 93%,
      hsl(40deg 2% 67%) 96%,
      hsl(40deg 2% 63%) 100%
    );
    transform: translate(14px, -41.2px);
    
  }

  .item-cercle li:nth-child(6):hover {
    transform: translate(35px, -103px);
  
  }

  .item-cercle li:nth-child(7) {
    grid-area: jeu;
    background: linear-gradient(
      60deg,
      hsl(0deg 0% 100%) 9%,
      hsl(40deg 2% 96%) 50%,
      hsl(40deg 2% 92%) 65%,
      hsl(40deg 2% 87%) 74%,
      hsl(40deg 2% 83%) 81%,
      hsl(40deg 2% 79%) 86%,
      hsl(40deg 2% 75%) 90%,
      hsl(40deg 2% 71%) 93%,
      hsl(40deg 2% 67%) 96%,
      hsl(40deg 2% 63%) 100%
    );
    transform: translate(41.2px, -14px);
  }

  .item-cercle li:nth-child(7):hover {
    transform: translate(103px, -35px);
  }
  
  .item-cercle li:nth-child(8) {
    grid-area: langage;
    background: linear-gradient(  115deg,
    hsl(0deg 0% 100%) 9%,
    hsl(40deg 2% 96%) 50%,
    hsl(40deg 2% 92%) 65%,
    hsl(40deg 2% 87%) 74%,
    hsl(40deg 2% 83%) 81%,
    hsl(40deg 2% 79%) 86%,
    hsl(40deg 2% 75%) 90%,
    hsl(40deg 2% 71%) 93%,
    hsl(40deg 2% 67%) 96%,
    hsl(40deg 2% 63%) 100%
  );
  transform: translate(41.2px, 14px);
  }

  .item-cercle li:nth-child(8):hover {
    transform: translate(103px, 35px);
  }



  /* ****************************
*******************************
*******************************

Section types de formations

*******************************
*******************************
*******************************

*/

.formation-details .fields-container {
  list-style-type: none;
}

.formation-details .fields-container .field-value section {
  padding-right: 5px;
}

.accueil .formation-details section {
 /* visibility:hidden; */
 display: none;
}

.accueil .formation-details {
  list-style-type: none;
  /* background: rgba(128, 128, 128, 0.164); */
}

.fields-container {
  list-style-type: none;

}
.formation-details .field-value .fields-container {
  display:flex;
  padding:25px;
  flex-wrap:wrap;
}


.formation-details .field-value .fields-container > li {
/* flex-wrap: wrap; */
width: calc(33% - 30px);
min-width: 200px;
position:relative;
border: solid 2px ;
border-color: rgb(2, 157, 152);
margin:0px 15px;
box-shadow: 8px 8px 12px rgb(2, 157, 152);
background-color: white;
border-radius: 20px;
/* background-color: rgba(254, 232, 182, 0.236); */
/* transition: 2s ease-in-out; */
}

.accueil .formation-details .field-value .fields-container > li:hover img {
transform: scale(1.1);
transition: all 0.4s ease;
/* rotate: 360deg;
transition: rotate 1s; */
}
.accueil .formation-details .field-value .fields-container a:hover {
  /* transform: scale(1.1); */
  transition: all 0.4s ease;
  padding: 13px 45px;
    /* font-weight: 600; */
  /* rotate: 360deg;
  transition: rotate 1s; */
  }

.formation-details .field-value .fields-container > li ul {
  list-style: disc;

} 

.formation-details .field-value .fields-container > li ul ul {
  list-style: circle;
}

.accueil .formation-details .field-value .fields-container > li ul {
  list-style-type: none;
}

.formation-details .formation-title {
list-style-type: none;
text-decoration: none;
font-size: 2vw;
position:relative;
justify-content: center;

}

.formation-details .field-value img {
  object-fit: cover;
  border-radius: 10%;
  height: 100%;
  width: 47%;
  }

  .formation-details .formation-description p {
padding:10px;

  }

  .item-content ~ .fields-container {
    padding-left: 0;
  }

  .page-formation .formation-description a {
    /* visibility: hidden; */
    display: none;
  }

  .formation-details .formation-description a {
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;   
    font-weight: 400;
    border-color: rgb(2, 157, 152);
    border-radius: 40px;
    border: solid 2px;
    padding: 7px 35px;
    font-size: 17px;
    background:rgb(2, 157, 152);
    border:rgb(2, 157, 152);
  }


  
  /* .formation-details .formation-description a:hover { */
    /* color:black;
    background: white;
    border-color:white; */
    /* padding: 13px 45px;
    font-weight: 600 } */

/* ********************
********************
********************
Section contactez-nous 
********************
********************
*********************/



.card-body .mod-custom {
  height: 25vw;
  background: url("/images/headers/silhouette-cameleon.png");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: 40% 15%;
    /* opacity: 0.1; */
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-body {position: relative;}

.card-body .mod-custom a {
 position:relative;
 z-index: 2;
}

.card-body .mod-custom:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color:white;
  opacity: .96;
  z-index: 0;
}

.main-bottom {
  border:none;
  /* position:relative; */
}

.main-bottom p {
  margin: 0
}

.main-bottom a {
  color: white;
  text-decoration: none;
  transition: all 0.2s ease;   
  font-weight: 500;
  border-color: rgb(2, 157, 152);
  border-radius: 40px;
  border: solid 2px;
  padding: 0.6vw 0.6vw;
  font-size: 1vw;
  background:rgb(2, 157, 152);
  border:rgb(2, 157, 152);
  margin-bottom: 0;
}


.main-bottom a:hover {
color:white;
  /* background: white;
  border-color:white; */ 
  padding: 0.9vw 0.9vw;
  font-weight: 600
}










/* ********************
********************
********************
Footer
********************
********************
*********************/

.footer {
  background: linear-gradient(90deg, rgb(0 113 109), 
  rgb(3 189 176) 30%, 
  rgb(3 189 176) 70%, rgb(0 113 109));
  color:white;
  margin:0
}

.footer .grid-child{
  flex-wrap: wrap;
  display:flex;
  justify-content: space-between; } 


  .footer .mod-custom {
    display: flex; 
  justify-content:space-between;
  align-items: flex-start;
width: 100%;}

.footer .grid-child {
  max-width:none;
  padding: 30px 30px 10px 30px;
}
.footer .img_footer {
  filter: brightness(0) invert(100%);
  width: clamp(50px, 12vw, 12vw)
}

.footer a{
  text-decoration: none;
  color:white;
  transition: all 0.5s ease;
  font-weight: 600;
  font-size:clamp(10px, 1vw, 1vw)
}

.footer p{
  font-size:clamp(10px, 1vw, 1vw)
}
 
.footer a:hover{
  color:white;
}

.footer ul {
  position:relative;
  display:flex;
  flex-direction: row;
  gap:20px
}


.footer .mod-menu a {
  font-weight: 200;
  font-size: clamp(10px, 0.5vw, 0.6vw)
}

.footer .mod-menu a:hover {
  font-weight: 200;
  text-decoration: none;
}

.footer strong{
  font-weight: 200;
  font-size: clamp(10px, 0.5vw, 0.6vw)
}

.footer .footer_contact a {
  color: rgb(2, 157, 152);
  text-decoration: none;
  transition: all 0.2s ease;   
  font-weight: 400;
  border-color: white;
  /* border-radius: 40px; */
  border: solid 2px;
  padding: 7px 20px;
  font-size: 17px;
  background:white;
  border:white;
}

/* ********************

********************

********************

PAGE FORMATION 
********************

********************

*********************/

.banner_all_pages .mod-custom  {
  color:white;
  min-height: 15vh;
  padding:15px 30px 20px 100px;
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content:center;
  position:relative;
  z-index:1;
gap:5px;
background-repeat: no-repeat;
background-size: cover;
/* padding-left: 60%; */
background-position: 10% 25%;
}

.banner_all_pages .mod-custom > * {
  position: relative;
  z-index: 1;
}

.banner_all_pages .mod-custom:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* background-color:white;
  opacity: .4; */
  z-index: 0;
}

.page-formation .formation-details .field-value img {
  width:47%;
  margin-bottom: -30px;

}



/* ********************

********************

********************

PAGE A PROPOS 
********************

********************

*********************/

.propos .blog-items{
  /* background:red; */
  padding:30px 20vw;

}

.propos h3{
  font-weight: 800;
  font-size:2vw
}

.propos .item-content img {
  /* border-radius:50%; */
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;

}

/* ********************

********************

********************

PAGE CONTACT
********************

********************

*********************/

.contact .com-contact{
  /* background:red; */
  padding:30px 20vw;

}

.com-contact__container h3 {
  display:none
}

.com-contact__container {
  position:relative;
  justify-content: center;
  grid-template:none
}

.com-contact__container a {
  text-decoration: none;
  color:black;
  font-weight: 600;
}

.com-contact__container dt>span {
  color:rgb(2, 157, 152);
  font-size:25px
}


.com-contact__container a:hover {
  text-decoration: none;
  color:black;

}

.m-0 legend{
  display:none;
  
}

.com-contact__container dl {
  gap:20px;
  font-size: clamp(15px, 1vw, 50px);
}

.control-group .spacer {
  display:none
}

.btn-primary {
  color: white;
  text-decoration: none;
  transition: all 0.2s ease;   
  /* font-weight: 400; */
  /* border-color: white; */
  /* border-radius: 40px; */
  /* border: solid 2px;
  padding: 7px 20px;
  font-size: 17px; */
  background:rgb(2, 157, 152);
  border:rgb(2, 157, 152);
}

.btn-primary:hover {
  color: white;
  text-decoration: none;  
  font-weight: 600;
  /* border-color: white; */
  /* border-radius: 40px; */
  /* border: solid 2px;
  padding: 7px 20px;
  font-size: 17px; */
  background:rgb(2, 157, 152);
  border:rgb(2, 157, 152);
}


#system-message-container joomla-alert[type=success] {
  --alert-accent-color:rgb(2, 157, 152);
}
  

#system-message-container joomla-alert .joomla-alert--close {
  color:rgb(2, 157, 152)
}

#system-message-container{
  padding:15px
}

.contact .banner_all_pages .mod-custom p {
  display:none
}

/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */
/* POUR MOBILE */


@media screen and (max-width: 768px) {
  .contact .com-contact {
    padding: 30px 8vw;
  }

  .page-formation .formation-details .field-value img {
    width: 64%;
    margin-bottom: -30px;
  }

  .footer .mod-custom {
    flex-direction: column;
    position: relative;
    align-items: center;
  }

  .footer .mod-custom p {
    flex-direction: column;
    position: relative;
    text-align: center;
  }

  .page-formation .
  .footer .img_footer {
    width: clamp(50px, 19vw, 19vw);
    margin-top: 15px;
}
.contact .com-contact__info{
  position:relative;
  text-align: center;
}

.contact .com-contact h3 {
  font-weight: 500;
  padding-top: 25px;
}

.banner_all_pages .mod-custom{
  /* padding-left: 45%; */
  align-items: center;
  padding:20px 0px
}
.banner_accueil .mod-custom{
  padding-left: 10%;
}

.footer a{
  font-size:clamp(10px, 4vw, 4vw)
}

.footer p{
  font-size:clamp(10px, 4vw, 4vw)
}

.container-header .navbar-toggler {
  color:black;
  border:none
} 
.site .container-header .navbar-collapse a{ 
  font-size:3vw;

}

.container-header .mod-menu {
  align-items: center;
  margin-top: 21px;
  gap: 10px;
}
.metismenu.mod-menu .metismenu-item {
font-size:0.5rem;
}

.propos h3{
  font-size:5vw
}

.propos .container-banner a{

  padding: 9px 17px;
    font-size: clamp(5px, 4vw, 200px);
}
.page-formation .container-banner a{

  padding: 9px 17px;
    font-size: clamp(5px, 4vw, 200px);
}
.accueil .container-banner a{
  padding: 6px 25px; 
  font-size: clamp(5px, 3vw, 200px);
}
.propos .blog-items {
  padding: 30px 10vw 0px 10vw;}


  .card-body .mod-custom {
    height: 47vw;
    background-size: 120%;
    background-position: 50% 80%;}

    .main-bottom a {
    font-size: 4vw;
      padding: 3vw 3vw;}

      .formation-details .field-value .fields-container > li {
        width: 100%;
        min-width: none;
      }

      .page-formation ul {
        padding:0
      }
      .formation-details .field-value .fields-container {
        padding: 20px 5px;}

        .formation-details .field-value .fields-container li{
          padding: 0px 10px;
          margin: 7px 15px;}

          .formation-details .field-value img {
          
            width: 69%;
            margin-bottom: 6px;}

/* ACCUEIL pour MOBILE */
/* ACCUEIL pour MOBILE */
 .banner_accueil .mod-custom {
  align-items: center;
  text-align: center;
 }

 .banner_accueil .mod-custom strong {
  font-weight: 700;
  display:block;
 }

 .accueil .container-banner a {
  padding: 10px 31px;
  font-size: clamp(5px, 5vw, 200px);}

.accueil .item-content h3 {
  /* display: none; */
  font-size: 5vw;
}



.item-cercle ul {
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(9, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:none;

margin:0;
padding:0;}


.item-cercle li:nth-child(9){
  /* grid-area: 1 / 1 / 2 / 2; transform: translate(0);
  overflow: visible; */
  display: none;
}
.item-cercle li:nth-child(1){
  grid-area: 2 / 1 / 3 / 2; 
}
.item-cercle li:nth-child(2){
  grid-area: 3 / 1 / 4 / 2; 
}
.item-cercle li:nth-child(3){
  grid-area: 4 / 1 / 5 / 2; 
}
.item-cercle li:nth-child(4){
  grid-area: 5 / 1 / 6 / 2; 
}
.item-cercle li:nth-child(5){
  grid-area: 6 / 1 / 7 / 2; 
}
.item-cercle li:nth-child(6){
  grid-area: 7 / 1 / 8 / 2; 
 
}
.item-cercle li:nth-child(7){
  grid-area: 8 / 1 / 9 / 2; 
  
}
.item-cercle li:nth-child(8){
  grid-area: 9 / 1 / 10 / 2; 
  
}

.site .item-cercle li {
  border-radius: 0;
  box-shadow: 1px 1px 8px 5px rgba(128, 128, 128, 0.558);
  transform: translate(0);
  margin: 15px;background: linear-gradient( 145deg, hsl(0deg 0% 100%) 9%, 
  hsl(40deg 2% 96%) 50%, hsl(40deg 2% 92%) 65%, 
  hsl(40deg 2% 87%) 74%, hsl(40deg 2% 83%) 81%,
   hsl(40deg 2% 79%) 86%, hsl(40deg 2% 75%) 90%,
    hsl(40deg 2% 71%) 93%, hsl(40deg 2% 67%) 96%,
     hsl(40deg 2% 63%) 100% );
  
}

.site .item-cercle li:hover {
  transform: translate(0);}

.accueil .item-cercle .fields-container {
 height: 100%;
 width: 100%;
 padding:0px 12px;
 margin:0px
}
.accueil .item-cercle .fields-container h3 {
 font-size:3.3vw
 }

 .accueil .item-cercle img {
  width: clamp(5px, 11.5vw, 150px);
  filter: grayscale(0);

  }
  .blog-items {
   
  margin: 0;}

  .accueil .formation-details .field-value .fields-container {
    padding: 5px 5px;}

  

/* Nav pour MOBILE */
/* Nav pour MOBILE */
.navbar-collapse {
  position: fixed;
  top: 110px;
  height:100%;
  left: 0;
  width: 100%;
   background: white; 
   text-align: center; 
  justify-content: center;
   align-items: flex-start; 
   background-color: rgb(2, 157, 152);
   /* background-image: url("/images/headers/silhouette-cameleon.png"); */
   
}

.site .container-header .navbar-collapse a {
font-size:8vw;
color:white;
} 

.container-nav .navbar {
  align-items: flex-end;
  padding:10px

}
.second_p_banner {display:none}



.metismenu.mod-menu .metismenu-item.active>a{
  background: white;
color: #009d98;
display: block;
padding: 0px 39px;
border-radius: 10px;
font-size: 7vw;
text-decoration: none;
}
.metismenu.mod-menu .metismenu-item > a,
.metismenu.mod-menu .metismenu-item > a:hover{

text-decoration: none;
}

}
  
   @media screen and (max-width: 768px) {
	
	.item-cercle ul {
  aspect-ratio: inherit;
 }

}