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

/* les variables */
:root{
  /* couleur linear-gradient(141deg, rgba(255, 255, 255, .01) 17.3%, #F3F6FF 78.21%) */ 
  --coul1:#254C9A;
  --coul1_0:#285CAF;
  --coul2:#BC8130;
  --coul2_0:#D39142;
  --coul3:#404041;
  --coul3_0:#5d5c5e;
  --coul4:#f1f1f2;
  --coul4_0:#FFFFFF;
  
  /* couleurs transparentes */
  --tcoul1:rgba(37, 76, 154,.2);
  --tcoul1_0:rgba(40, 92, 175,.2);
  --tcoul2:rgba(188, 129, 48,.2);
  --tcoul2_0:rgba(211, 145, 66,.2);
  --tcoul3:rgba(64, 64, 65,.2);
  --tcoul3_0:rgba(93, 92, 94,.2);
  --tcoul4:rgba(241, 241, 242,.2);
  --tcoul4_0:rgba(255, 255, 255,.2);

  /* les degrades */
  --linear-gradient-coul1:linear-gradient(130deg, var(--coul1) 17.3%, var(--coul1_0) 78.21%);
  --linear-gradient-coul1_0:linear-gradient(130deg, var(--coul1_0) 17.3%, var(--coul1) 78.21%);
  --linear-gradient-coul2:linear-gradient(130deg, var(--coul2) 17.3%, var(--coul2_0) 78.21%);
  --linear-gradient-coul2_0:linear-gradient(130deg, var(--coul2_0) 17.3%, var(--coul2) 78.21%);
  --mtblock-gradient:linear-gradient(180deg, rgba(37, 76, 154, 0.00) 35.56%, #254C9A 95.3%);
  --mtblock-hover-gradient:linear-gradient(180deg, rgba(37, 76, 154, 0.30) 35.56%, #254C9A 95.3%);
  
  /* font */
  /* --font1:'Roboto'; */
  --font1:'poppins', sans-serif;
  /* --font2:'Agdasima', sans-serif; */
  
  /* box-shadow */
  --bs1: 0px 0px 2px rgba(0,0,0,.2);
  --bs2:  0px 0px 5px rgba(0,0,0,.1);
}


body {
  font-family: var(--font1) !important;
} 

* {
  font-family: var(--font1) !important;
} 

p, h1, h2, h3, h4, h5, h6 {
  font-family: var(--font1) !important;
} 


 /* styles dimensionnement */
.wScreen{width: 100% !important;}.wMinScreen{min-width: 100% !important;}.wMaxScreen{max-width: 100% !important;}
.hScreen{height: 100vh !important;}.hMinScreen{min-height: 100vh !important;}.hMaxScreen{max-height: 100vh !important;}

 /* styles globaux */
a{
  text-decoration:none;
}

/* le box-sizing a tous les elements */
*,*::before, *:after{
  -moz-box-sizing: border-box;
  --webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* scrollbar-hidden, masquer la scroll bar */
.scrollbar-hidden {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}


/* font-size */
.fs-90{font-size: 90% !important; line-height: 1.5;}
.fs-85{font-size: 85% !important; line-height: 1.5;}
.fs-80{font-size: 80% !important; line-height: 1.5;}
.fs-75{font-size: 75% !important; line-height: 1.5;}
.fs-70{font-size: 70% !important; line-height: 1.5;}
.fs-65{font-size: 65% !important; line-height: 1.5;}
.fs-60{font-size: 60% !important; line-height: 1.5;}
.fs-55{font-size: 55% !important; line-height: 1.5;}
.fs-50{font-size: 50% !important; line-height: 1.5;}

/* background-font-family */
.font1{font-family: var(--font1) !important;}
.font2{font-family: var(--font2) !important;}

/* background-color */
.bg-coul1{background-color: var(--coul1) !important;}.bg-coul1-0{background-color: var(--coul1_0) !important;}
.bg-coul2{background-color: var(--coul2) !important;}.bg-coul2-0{background-color: var(--coul2_0) !important;}
.bg-coul3{background-color: var(--coul3) !important;}.bg-coul3-0{background-color: var(--coul3_0) !important;}
.bg-coul4{background-color: var(--coul4) !important;}.bg-coul4-0{background-color: var(--coul4_0) !important;}
.bg-none{background-color: rgba(0,0,0,.0)}

/* background-color  transparent*/
.bg-t-coul1{background-color: var(--tcoul1) !important;}.bg-t-coul1-0{background-color: var(--tcoul1_0) !important;}
.bg-t-coul2{background-color: var(--tcoul2) !important;}.bg-t-coul2-0{background-color: var(--tcoul2_0) !important;}
.bg-t-coul3{background-color: var(--tcoul3) !important;}.bg-t-coul3-0{background-color: var(--tcoul3_0) !important;}
.bg-t-coul4{background-color: var(--tcoul4) !important;}.bg-t-coul4-0{background-color: var(--tcoul4_0) !important;}

/* background-color */
.linear-gradient-coul1{background: var(--linear-gradient-coul1) !important;transition: all .2s ease-in-out;} .linear-gradient-coul1:hover{background: var(--linear-gradient-coul1_0) !important;transition: all .2s ease-in-out;}
.linear-gradient-coul2{background: var(--linear-gradient-coul2) !important;transition: all .2s ease-in-out;} .linear-gradient-coul2:hover{background: var(--linear-gradient-coul2_0) !important;transition: all .2s ease-in-out;}

.linear-gradient-coul2{background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1.5) 0%, rgba(0,0,0,0.1) 85%) !important;}

.radial-gradient-background{background: linear-gradient(180deg, var(--coul1) 10%, var(--coul4) 40%, var(--coul2) 80%);}
/* background-color text */
.text-linear-gradient-coul1{
  background: var(--linear-gradient-coul1) !important; background-clip: text !important;-webkit-background-clip: text !important;-webkit-text-fill-color: transparent !important;
}


/* foreground color */
.fg-coul1{color: var(--coul1) !important;}.fg-coul1-0{color: var(--coul1_0) !important;}
.fg-coul2{color: var(--coul2) !important;}.fg-coul2-0{color: var(--coul2_0) !important;}
.fg-coul3{color: var(--coul3) !important;}.fg-coul3-0{color: var(--coul3_0) !important;}
.fg-coul4{color: var(--coul4) !important;}.fg-coul4-0{color: var(--coul4_0) !important;}

/* style boutons */
.btn-coul1{color: var(--coul4) !important;background-color: var(--coul1) !important;}
.btn-coul1:hover{color: var(--coul4) !important;background-color: var(--coul1_0) !important;} 
.btn-coul2{color: var(--coul4) !important;background-color: var(--coul2) !important;}
.btn-coul2:hover{color: var(--coul4) !important;background-color: var(--coul2_0) !important;}
.btn-coul3{color: var(--coul4) !important;background-color: var(--coul3) !important;}
.btn-coul3:hover{color: var(--coul4) !important;background-color: var(--coul3_0) !important;}

/* style liens */
.lnk-coul1{color: var(--coul1) !important;} .lnk-coul1:hover{color: var(--coul1_0) !important;}
.lnk-coul2{color: var(--coul2) !important;} .lnk-coul2:hover{color: var(--coul2_0) !important;}
.lnk-coul3{color: var(--coul3) !important;} .lnk-coul3:hover{color: var(--coul3_0) !important;}
.lnk-coul4{color: var(--coul4) !important;} .lnk-coul4:hover{color: var(--coul4_0) !important;}

/* style texte */
.text-shadow{text-shadow: 2px 2px 4px var(--tcoul3) !important;}
.text-justify{text-align: justify;}
.whitespace-nowrap{white-space: nowrap !important;}
.whitespace-wrap{white-space: pre-wrap !important;}
.whitespace-normal{white-space: normal !important;}

/* style formulaires */

/* custom-input */
.custom-input:focus{
  background-color:rgba(0,0,0,0.0) !important;
  outline:none !important;
  border-width:0px !important;
}

/* custom-select-container */
.custom-select-container {
  position: relative;
}
.custom-select-dropdown {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ced4da;
  z-index: 1000;
  width: 100%;
}
.custom-select-dropdown.show {
  display: block;
}

/* style au survol */
.hover-shadow:hover{
  box-shadow:0 .1rem .5rem rgba(0,0,0,.175);
}
/* style au survol */
.responsive-img{
  width:100% !important;
  height:auto !important;
}


/****** 
########### mtBlock
 ******/
.mtblock-sqr{
  width: 100% !important;
  height: 0;
  padding-bottom: 100% !important;
  position: relative !important;
  background-color: #1213121e;
  background-position: top center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 1px;
}
.mtblock-rect{
  width: 100% !important;
  height: 0;
  padding-bottom: 80% !important;
  position: relative !important;
  background-color: #1213121e;
  background-position: top center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 1px;
}
.mtblock-sqr .mtblock-caption, .mtblock-rect .mtblock-caption{
  width: 100% !important;
  height: 100% !important;
  padding: 0px;
  overflow: hidden;
  position: absolute !important;
  top: 0;
  left: 0;
  background:var(--mtblock-gradient);
  transition: all .5s ease-in-out;
  border-radius: 1px;
}
.mtblock-sqr .mtblock-caption:hover, .mtblock-rect .mtblock-caption:hover{
  background:var(--mtblock-hover-gradient);
}



/* style ratio image */
.image-container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 Aspect Ratio */
  overflow: hidden;
  background: black;
  
}
.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain; /* Maintain aspect ratio without cropping or stretching */
}

/* style ratio video */

.video-container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 Aspect Ratio */
  overflow: hidden;
  background: black;
}
.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain; /* Maintain aspect ratio without cropping or stretching */
}
.video-container-caption{
  width: 100% !important;
  height: 100% !important;
  padding: 0px;
  overflow: hidden;
  position: absolute !important;
  top: 0;
  left: 0;
  background:rgba(0,0,0,0.2);
  transition: all .5s ease-in-out;
  border-radius: 1px;
}
.video-container-caption:hover{
    background:rgba(0,0,0,0.5);
}

/* style square*/
.square {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* Maintient le ratio 1:1 */
  position: relative;
}
.square-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* style square*/
.hover-coul1:hover{background-color: var(--coul1) !important;transition: all .3s ease-in-out;}
.hover-t-coul1:hover{background-color: var(--tcoul1) !important;transition: all .3s ease-in-out;}

/* scroll-container */
.scroll-container{
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scroll-container::-webkit-scrollbar {
  display: none;
}
.scroll-item{
  flex: 0 0 auto;
  width: 300px;
  height: auto;
  margin: 10px;
  overflow: hidden;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
}

/* auto scroll-container */
/* Hide scrollbar for IE, Edge and Firefox */
.autoscroll {
  width: 100% !important;
  overflow-x: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.autoscroll::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.autoscroll-container {
      width: 100% !important;
      overflow-x: hidden;
      white-space: nowrap;
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
      box-sizing: border-box;
  }
  .autoscroll-container::-webkit-scrollbar {
      display: none;
  }
  .content-wrapper{
      display: inline-block;
      white-space: nowrap;
  }
  .content-wrapper div{
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
  }
  

  /* Affichage de block absolute au survol du lien */
  .link-container{
    position: relative;    
  } 
  .hover-link{
    position: relative;    
  }
  .hover-block{
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    z-index: 1000;
    transform: translateY(10px);
  }
  .link-container:hover .hover-block{
    display: block;  
    opacity: 1;
    transform: translateY(0); 
  }
  .link-container:hover .hover-link{
    opacity: .3;
  }