/* ------------------------------------------------------------------------- */
/* Propriétés générales                                                      */
/* ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

html {
  /* rq a voir compatiblité variables css : */
  /* https://caniuse.com/#feat=css-variables&search=css%20variables */
  --theme-color-first: #253577;
  --theme-color-second: #f7ca0c;
  --theme-color-second-lighten25: #fbe587;
  --theme-color-third: #576b87;
  --theme-color-third-lighten30: #adb9ca;
  --theme-color-white: #FFFFFF;
  --theme-color-black: #000000;
  --theme-color-white-darken80: #333333;

  --font-first: 'Roboto, cursive';

  --height-header: 6rem;
  --height-footer: 3rem;

  --decalage-logoContainer : 50px;
  font-family: 'Roboto', 'cursive';
  /* @media : taille minimum de l'espace logo + icone 
    min-width: 600px;
    min-height: 540px;
  */
}
body {
  font-size: 1rem;
  font-family: 'Roboto',' cursive';
  line-height: 1.6;

}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.2;
  font-size: 1.2rem;
}


/* ------------------------------------------------------------------------- */
/* Container principal                                                       */
/* ------------------------------------------------------------------------- */
.wrapper {
  width:100vw;
  height:100vh;
  min-width: 280px;
  min-height: 280px;
  overflow:auto;

  background-color: var(--theme-color-first);
}
@media (orientation: landscape) {
  .wrapper {
    display: flex;
  }
}
@media (min-width: 600px) and (min-height: 540px) {
  .wrapper {
    min-width: var(--logo-min-width);
    min-height: var(--logo-min-height);
    overflow:hidden;

    display: block;
  }
}

/* ------------------------------------------------------------------------- */
/* Container permettant de recentrer l'ensemble logo + icones                */
/* en fonction de la position des icones                                     */
/* ------------------------------------------------------------------------- */
.accueil-container {
  width: 100%;
  height: 40%;
}
@media (orientation: landscape) {
  .accueil-container {
    width: 40%;
    height: 100%;
  }
}
@media (min-width: 600px) and (min-height: 540px) {
  .accueil-container {
    width: 100%;
    height: calc(100% - var(--decalage-logoContainer));
    transform: translateY(var(--decalage-logoContainer));
  }
}

/* ------------------------------------------------------------------------- */
/* proprietes communes aux 2 containers superposees                           */
/* logo-container et icons-container                                         */
/* ------------------------------------------------------------------------- */
/* mobile */
.accueil-logo-container, .accueil-icons-container {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 1s;

  width: 280px;
  height: 240px;
}
/* gestion zoom pour très petits medias */
@media (orientation:portrait) and (min-height: 600px) {
  .accueil-logo-container, .accueil-icons-container {
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (orientation:landscape) and (min-width: 600px) {
  .accueil-logo-container, .accueil-icons-container {
    transform: translate(-50%, -50%) scale(1);
  }
}
/* + menu active (click sur le logo) */
.wrapper--activated-menu .accueil-logo-container,
.wrapper--activated-menu .accueil-icons-container {
  top:28%;
  left:50%;
} 
/* + menu active (click sur le logo) en orientation portrait */
@media (orientation: landscape) {
  .wrapper--activated-menu .accueil-logo-container,
  .wrapper--activated-menu .accueil-icons-container {
    top:50%;
    left:25%;
  }
}
/* desktop */
@media (min-width: 600px) and (min-height: 540px) {
  .wrapper .accueil-logo-container,
  .wrapper .accueil-icons-container {
    top:50%;
    left:50%;
    width: 440px;
    height: 380px;
  }
}

/* ------------------------------------------------------------------------- */
/* logo-container                                                            */
/* ------------------------------------------------------------------------- */
.accueil-logo-container .accueil-logo-img {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);

  width: 220px;
  cursor: pointer;
  transition: all 1s;
}
.accueil-logo-container {
   z-index: 10;

  background-color:var(--theme-color-white);
  box-shadow: inset 0 0 35px var(--theme-color-white-darken80);
  border-radius: 50%;
}

@media (min-width: 600px) and (min-height: 540px) {
  .accueil-logo-container .accueil-logo-img {
    width: 350px;
    cursor: auto;
  }
}
/* mobile : click sur le logo */
.wrapper--activated-menu .accueil-logo-container {
  transition: all 1s;
  transform: translate(-50%, -50%) scale(.3);
  background-color: var(--theme-color-third-lighten30);
}
@media (min-width: 600px) and (min-height: 540px) {
  .wrapper--activated-menu .accueil-logo-container {
    transform: translate(-50%, -50%);
    background-color:var(--theme-color-white);
  }
}

/* Affichage du nom de la categorie (mouse over sur icone) */
.accueil-icon-label {
  position: absolute; 
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;

  text-align: center;
  /*color: transparent;*/
  color: rgb(214, 192, 130); 
  font-size: 1.8rem;
  line-height: 1.4rem;
  transition: all 1s;
}
@media (min-width: 600px) and (min-height: 540px) {
  .accueil-icon-label--mouse-over {
    color: var(--theme-color-first);
  }

}


/* ------------------------------------------------------------------------- */
/* icons-container                                                           */
/* ------------------------------------------------------------------------- */
.accueil-icons-container {
  opacity: 0;
}
@media (min-width: 600px) and (min-height: 540px) {
  .accueil-icons-container {
    opacity: 1;
  }
}
/* mobile : click sur le logo */
.wrapper--activated-menu .accueil-icons-container {
  opacity: 1;
}

.accueil-icons-container .accueil-icon-container {

  position: absolute;

  width: 80px;
  height: 80px;

  background-color: var(--theme-color-white);
  box-shadow: inset 0 0 15px var(--theme-color-white-darken80);
  border-radius: 50%;

  cursor:pointer;
  transition: background-color 1s;
}

.accueil-icon-container .accueil-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}
.accueil-icon-container:hover {
  background-color: var(--theme-color-second-lighten25);
}

.accueil-icon-container--pos1 {
  top: 40px;    
  left: 0px;
}
.accueil-icon-container--pos2 {
  top: -20px;    
  left: 100px;
}
.accueil-icon-container--pos3 {
  top: 40px;    
  right: 0px;
}
.accueil-icon-container--pos4 {
  bottom: 0px;    
  right: 40px;
}
.accueil-icon-container--pos5 {
  bottom: 0px;    
  left: 40px;
}
@media (min-width: 600px) and (min-height: 540px) {
  .accueil-icon-container--pos1 {
    top: 40px;    
    left: -70px;
  }
  .accueil-icon-container--pos2 {
    top: -96px;    
    left: 180px;
  }
  .accueil-icon-container--pos3 {
    top: 40px;    
    right: -70px;
  }
  .accueil-icon-container--pos4 {
    bottom: -40px;    
    right: 0px;
  }
  .accueil-icon-container--pos5 {
    bottom: -40px;    
    left: 0px;
  }
}

/* ------------------------------------------------------------------------- */
/* Menu mobile                                                               */
/* ------------------------------------------------------------------------- */
.mobile-menu-container {
  width: 100%;
  height: 60%;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  padding-bottom: 8vh;
  padding-right: 0;

  color: var(--theme-color-white);
  opacity: 0.9;
  text-align: center;
  font-size: 1.2rem;

  cursor: pointer;
}  
@media (orientation: landscape) {
  .mobile-menu-container {
    width: 60%;
    height: 100%;
    flex-direction: row;
    padding-bottom: 0;
    padding-right: 5vw;
  }
}
/* Menu activé (click sur le logo) */
@media (min-width: 600px) and (min-height: 540px) {
  .wrapper--activated-menu .mobile-menu-container {
    display: none;
  }
}

.mobile-menu {
  width: 90%;
  opacity: 0;
  transition: opacity 1s;
}
@media (orientation: landscape) {
  .mobile-menu {
    width: 70%;
  }
}
/* Menu activé (click sur le logo) */
.wrapper--activated-menu .mobile-menu {
  opacity: 1;
}

.mobile-menu-item {
  padding: 1.2vh 0;
  border-bottom: 1px solid var(--theme-color-white);
  transition: letter-spacing 1s;
}
@media (orientation: landscape) {
  .mobile-menu-item {
    padding: 2vh 0;
  }
}

.mobile-menu-item:last-child {
  border-bottom: none;
}

.mobile-menu-item:hover {
  color: var(--theme-color-second);
  letter-spacing: 0.2rem;
}

/* ------------------------------------------------------------------------- */
/* css pour les pages                                                        */
/* ------------------------------------------------------------------------- */
.page-container {
  min-height: 100vh;
}

.page-container .header {
  height: var(--height-header);
  background: var(--theme-color-first);
}
.page-container .header .img-logo-cms {
  background-color: var(--theme-color-white);
  height: 4rem;
  padding: .5rem;
  margin: 1rem;
}
.page-container .main {
  min-height: calc(100vh - var(--height-header) - var(--height-footer));
}
.page-container .footer {
  height: var(--height-footer);
  background: var(--theme-color-first);
}

  main{
    background-color: white;
    min-height:  calc(100vh - 64px - 260px);

  }
  /* ------------------------------------------------------------------------- */
  /* css pour le footer                                                        */
  /* ------------------------------------------------------------------------- */

  .footer {
    display: flex;
    justify-content:center;
    padding: 1em 3px;
    background-image: url("../images/footer.png");
    text-decoration-color: var(--theme-color-third-lighten30);
    height: 4em;
}
.dropdown {
  margin: 5px;
    
}
.type {
   margin: 5px;
  font-weight: bold;
  color: #f1f1f1;
}
.footer a:hover{
  text-decoration: none;
  color: #C5B589;  
}
.icon{
 margin-left: auto;
}
/* custom styling for specific icons */
.fa-envelope {
  color: #f1f1f1;   
}
.fa-info {
  color: #f1f1f1;  
}
.fa-facebook {
  color: #f1f1f1;  
}
.fa-youtube{
  color: #f1f1f1;
}

@media(max-width:509px){
  .footer{
    flex-wrap: wrap;
    height: auto;
  }
}

/* ------------------------------------------------------------------------- */
/* css pages de présentation CMS, Actulités, Nos offres, Nous soutenir       */
/* ------------------------------------------------------------------------- */
.row {
  justify-content: center;
}

.litle-card{

  border: none;
  margin: 1em;
  color: #253577;
}

.litle-card img{
 height: 10em;
 width: 100%;
 object-fit: cover;
}


/* ------------------------------------------------------------------------- */
/* css la page contact                                                        */
/* ------------------------------------------------------------------------- */

  .transparence {
    border-radius:5px;
    padding-bottom: 2em;
  }

	#map {
	  height: 500px;
    width : 440px;
  }

  @media (max-width:550px)
  {
	#map {
	  height: 500px;
    width : auto;
    margin: 0;
	}
  }


/* ------------------------------------------------------------------------- */
/* css la page info                                                      */
/* ------------------------------------------------------------------------- */

.infos{
  color:#253577 ;
}



/* ------------------------------------------------------------------------- */
/*                                                         */
/* ------------------------------------------------------------------------- */

  .cardContainer
  {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  .containerCustom
  {
    position: relative;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

  }

  .containerCustom .cardCustom{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 100px 0;


  }

  .containerCustom .cardCustom .imageBx{
    position: relative;
    left:25px;
    width: 500px;
    height: 400px;
    background: #ff0;
    z-index: 1;
  }
  .containerCustom .cardCustom .imageBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;;
  }


  .containerCustom .cardCustom .contentBx{
    position: relative;
    right: 25px;
    width: 500px;
    height: 500px;
    background: #253577;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 60px 20px 100px;

  }

  .containerCustom .cardCustom h2{
    font-size: 30px;
    color:#fff;

  }

  .containerCustom .cardCustom p{
    margin-top: 10px;
    color:#fff;
    
  }

  .containerCustom .cardCustom a{
    
    display: inline-block;
    margin-top: 15px;
    color:#fff;
    text-decoration: none;
    padding: 10px;
    border: 1px solid #fff;

  }
  @media (max-width:1030px)
  {
    .containerCustom .cardCustom 
    {
      flex-direction: column;
      max-width: 350px;
    }
    .containerCustom .cardCustom .imageBx
    {
      width: 100%;
      height: 250px;
      left:0;
    }
    .containerCustom .cardCustom .contentBx
    {
      width: 100%;
      height: auto;
      right: 0;
      padding: 30px;
      text-align: center

    }
    .containerCustom .cardCustom .contentBx::before{
      top: 0;
      bottom:0;
    }

  }

h1{
  text-align: center;
  font-size: 2em;
  color: #253577;
  padding: 1em;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: var(--theme-color-first);
  border: 10px solid var(--theme-color-first);
  filter: none;
  /*filter: invert(1);*/
  border-radius: 50%;
  width: 55px;
  height: 55px;
}

hr.style-one {
  border: 0;
  height: 2px;
  width: 300px;
  background: #253577;
  background-image: -webkit-linear-gradient(left, #ccc, #253577, #ccc);
  background-image: -moz-linear-gradient(left, #ccc, #253577, #ccc);
  background-image: -ms-linear-gradient(left, #ccc, #253577, #ccc);
  background-image: -o-linear-gradient(left, #ccc, #253577, #ccc);
  }

  #cardCollection{
    padding: 5em 0 ;
    width: 90%; 
    margin: 0 auto;
  }

  

  .presentation {
    font-size: 1.2em;
    text-align: center;
    padding: 1em 0 2em 0;
    color: #253577;
}