/*_______________________*/
/*Index des typographies */
/*_______________________*/
/*

//// JOSEFIN SANS ////
*SEMIBOLD
___josefin_sanssemibold
___josefin_sanssemibolditalic
*REGULAR
___josefin_sansregular
___josefin_sansitalic

//// ROBOTO ////
*BLACK
___robotoblack
___robotoblack_italic
*BOLD
___robotobold
___robotobold_italic
*REGULAR
___robotoregular
___roboto_italic
*LIGHT
___robotolight
___robotolight_italic

*/

/* GENERAL*/

html, body{
  padding: 0;
  margin-bottom: 100px;
  font-family: 'robotoregular';
  color: var(--gris);
  background-color: var(--offwhite);
  font-weight: 100;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

:root{
font-size: 12pt;
line-height: 16px;
font-weight: unset;
--gris: #333333;
--darkblue: #23527c;
--vertdeau: #00d084;
--vividorange: #ff6900;
--offwhite: #FFFAF0;
--pistache: #c1ffb5a1;
}

h1, h2, h3, h4{
  padding: 0;
  margin: 0;
}

h1{
  font-size: 32pt;
  font-family: 'josefin_sanssemibold';
}

h2{
font-size: 2rem;
font-family: 'robotoblack';
padding-bottom: 10px;
padding-top: 20px;
}

h2 em{
font-family: 'robotoblack_italic';
}

h3{
font-size: 16pt;
font-family: 'robotobold';
}

h3 em{
font-size: 16pt;
font-family: 'robotoblack_italic';
}

h4{
font-size: 14pt;
font-family: 'robotobold';
padding-bottom: 15px;
}

h4 em{
font-size: 14pt;
font-family: 'robotobold_italic';
}

p{
  margin: 0;
  font-size: 10pt;
  line-height: 12pt;
  font-family: 'robotoregular';
  padding-bottom: 8px;
}

a{
color:var(--vertdeau)
}

a:hover{
color:var(--vertdeau)
}

blockquote p{
margin: 0;
font-size: 12pt;
font-family: 'robotobold_italic';
width: 90% ;
padding-left: 15px;
padding-top : 10px;
padding-bottom : 10px;
line-height: 1.65rem;
}

p em{
margin: 0;
font-size: 10pt;
font-family: 'robotoitalic';
font-style: unset;
}

p strong{
margin: 0;
font-size: 10pt;
font-family: 'robotobold';
}

ul, li {
text-decoration: none;
list-style: none;
}

a{
  text-decoration: none;
  color : unset;
}
a:hover{
  color: var(--vividorange);
  transition: ease-in-out 0.2s;
}

button{
/*background:linear-gradient(-45deg, white, var(--pistache));
border: 2px solid var(--darkblue);*/
  background-size: 100% 100%;
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius:10px;
  padding:10px;
  font-family: 'robotobold';
  font-size: 1rem;
  appearance: auto;
  -webkit-appearance:auto;
  text-align: center;
  transition:all 0.3s ease;
  text-transform: uppercase;
  color: var(--offwhite);
  background-color: var(--darkblue);
}

button:hover {
box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
background-size: 150% 150%;
}

@keyframes Gradient {
0% {
  background-position: 0% 50%
}
50% {
  background-position: 100% 50%
}
100% {
  background-position: 0% 50%
}
}



/* MENU */

.navbar{
width : 100%;
height: fit-content;
background-color: unset;
top:0;
padding: 0px;
position: sticky;
z-index: 5;
}

#top-nav{
width: 100%;
font-family: 'robotobold';
background-color: var(--offwhite);
color : var(--gris);
position: inherit;
right: 0;
top: 0;
padding: 10px;
display: flex;
padding: 10px;
justify-content: end;
margin: 0px;
}

#top-nav.scrolled{
background-color: var(--gris);
color : var(--offwhite);
width: 100%;
font-family: 'robotobold';
position: inherit;
right: 0;
top: 0;
display: flex;
padding: 10px;
justify-content: end;
transition: ease-in-out 0.5s;
}

/* classe conditionelle navigation home */
.top-nav4{
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* classe conditionelle navigation pages grilles/agenda */
.top-nav5{
  background-color: var(--offwhite);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.nav{
left: 0;
padding: 15px;
font-size : 1rem;
}

.rs{
display: inline-flex;
justify-content: center;
align-items: center;
}

.rs-item{
width:20px;
margin: 10px;
}

.rs-item:hover{
animation-name: spin;
animation-duration: 500ms;
animation-iteration-count: 1;
animation-timing-function: linear; 
}

@keyframes spin {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(360deg);
}
}

/* MENU - TOPNAV */

.invisible{
  height: 0;
  width: 0;
  top:-40px;
  position: relative;
}

#sous-menu {
  color: var(--gris);
  height: fit-content;
  width: 100%;
}

.sous-menu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  top: 23px;
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10vh;
}

.menu{
  width:100%;
  position: relative;
  display: block;
  height: auto;
}

.section{
  display: flex;
  justify-content: center;
  align-items: center;
}

.vignette{
  width : 10vw;
  border-radius: 50%;
  margin-right: auto;
  margin-left: auto;
  display: block;
}


.theme-title{
  width : 100%;
  text-align: center;
  padding: 30px;
  font-family: 'josefin_sanssemibold';
  font-size: 2em;
}

.credits{
  color: var(--vividorange);
  /* float: right; */
  padding: 5px;
  font-size: 1rem;
  font-family: 'robotolight';
}


.menu-icon {
          display: none;
          font-size: 30px;
          cursor: pointer;
          color: red ;
      }


.pied{
  height: auto;
  font-size: 9pt;
  padding: 5px;
  width: 100%;
  color: white;
  background-color: var(--gris);
  bottom: 0;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
}

/* HOME */

.couverture{
  max-width : 100vw;
  max-height : 70vh;
  background-color: black;
}

.couvertureimage{
  width : 90vw;
  height : 70vh;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.titre{
  color: var(--offwhite);
  margin-top: -148.2px;
  padding: 50px;
}

/* ////////////////// */
/*      GRILLE        */
/* ////////////////// */

.bandeau{
  color : var(--offwhite);
  display: block;
  align-content: end;
background: linear-gradient(0deg, var(--offwhite) 0%,var(--gris) 117%);
  box-shadow: inset -2px -6px 20px var(--offwhite);
  text-shadow: 1px 1px 20px var(--gris);
}

.bandeau h1{
  padding: 20px;
}
#root{
  position: relative;
}

.clicdrop{
  display: flex;
  align-items: center;
  border-bottom: 1px dashed var(--gris);
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.clicdrop h2{
  text-align: center;
}
.clicdrop:hover{
color:var(--vividorange);
cursor: pointer;
}

.vignett3{
  width : 7vw;
  border-radius: 100%;
  display: block;
  margin : 15px;
  margin-bottom: 15px;
}

.rubrique, .rubriqu3{
  display: block;
  width : 70vw;
  background: rgb(255,255,255);
background: linear-gradient(180deg, var(--offwhite) 0%, rgba(222,222,222,1) 50%, var(--offwhite) 100%);
margin-left: auto;
margin-right: auto;
}

.rubrique{
  max-height: 0;
  overflow: hidden;
transition: max-height 0.5s ease;
}

.rubrique.show {
max-height: 1300px; 
}

.colgch, 
.coldr {
padding: 10px;
/*justify-content: center;
display: flex;
flex-direction: column;*/
float : left;
}
.colgch{
  width: 40%;
}
.coldr{
  width: 60%;
}

.textegrille{
padding : 10px;
margin-right : 30px;
height: fit-content;
}

.img-ppale{
  width : 50%;
  display: block;
  margin-left: auto;
margin-right: auto;
}



/* ////////////////// */
/* CAROUSSEL D'IMAGES */
/* ////////////////// */


.carousel {
  width: 50%;
  height: 550px; 
  margin-left: auto;
  margin-right:auto;
  border-radius: 3px;
  overflow: hidden;
}
  
  &:hover .controls {
    opacity: 1;
  }
  
  .controls {
    opacity: 0;
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    justify-content: space-between;
    width: 100%;
    z-index: 99999;
    transition: all ease 0.5s; }
    
    .control {
      margin: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7);
      opacity: .5;
      transition: ease .3s;
      cursor: pointer; }
      
      &:hover {
        opacity: 1;
      }
    
  
    .slides {
        
      left: 0;
      display: flex;
      width: 100%;
      height : 100% ;
    position: absolute;
      transition: 1s ease-in-out all; 
    align-items: center;
    }
      
    .slide {
  min-width: 100%;
 /* height: 100%; force chaque slide à remplir la hauteur du carousel */
  display: flex;
  justify-content: center;
  align-items: center;
    overflow: hidden;
}

.slide img {
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ////////////////// */
/* FIN CAROUSSEL D'IMAGES */
/* ////////////////// */


/* ////////////////// */
/*      AGENDA       */
/* ////////////////// */

.agenda {
  margin: 0 auto;
  width : 80vw ;
}

.item {
  width: 30%;
  margin-bottom: 16px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  float: left;
}

.img-agenda{
margin-left: auto;
margin-right: auto;
display: block;
width : 100%;
box-shadow: 0px -2px 59px -10px #333;
margin-bottom: 30px;
}

.bloc_date{
width:100%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
color: var(--darkblue);
padding: 20px;
border: 1px dashed var(--darkblue);
}

.bloc_date p{
color: var(--vividorange);

}

.date{
font-family:'josefin_sanssemibold';
font-size : 1.2rem;
width : fit-content;
padding : 0px 0px 0px 0px;
}

.lieu{
font-family: 'robotobold';
padding-bottom: 10px;
font-size: 1.3rem;
line-height: 1.5rem;
}

/* ////////////////// */
/*      ACTUS         */
/* ////////////////// */

#actus{
  width :70vw;
margin-left: auto;
margin-right: auto;
}

.actus{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width :70vw;
margin-left: auto;
margin-right: auto;
border-bottom: 1px var(--gris) solid
}

.item-ho{
margin: 20px;
padding : 20px;
  color : var(--darkblue);
  padding : 5px ;
  border-radius: 5px;
  transition: transform .4s;
  height: fit-content;
}

.img-agenda-ho{
margin-left: auto;
margin-right: auto;
display: block;
width : 100%;
box-shadow: 0px -2px 59px -10px #333;
margin-bottom: 30px;
}

.item-ho:hover{
transform: scale(1.1);
}

.ho{
  color: var(--gris);
  padding-bottom: 10px;
  font-family: 'robotoregular';
  font-size: 0.95rem;
  line-height: 1.3rem;
}

.ho h3{
font-size: 1rem;
  font-family: 'robotoregular';
  padding: 5px;
  color: var(--offwhite);
  background-color: var(--gris);
  border-radius: 7px;
  width: auto;
}


/* ////////////////// */
/*      BIO           */
/* ////////////////// */

.bio{
  width : 70vw ;
  margin-left: auto;
  margin-right: auto;
}

.bio p{
  padding-top : 10px;
  font-size: 1rem;
  line-height: 1.3rem;
  font-family : 'robotoregular';
}

.bio p em{
  font-size: 1rem;
  line-height: 1.3rem;
  font-family : 'robotolight_italic';
}
.bio p strong{
  font-size: 1rem;
  line-height: 1.3rem;
  font-family : 'robotoblack';
}

.bio p strong em, 
.bio p em strong{
  font-family: 'robotoblack_italic';
}

.bio p:first-letter {
font-family: 'Robotoblack';
  color: var(--gris);
  float: left;
  margin-bottom: 0px;
  margin-top: 1px;
  padding-right: 1px;
  font-size: 1.4rem;
}

.bio blockquote p:first-letter{
  font-family : unset;
  font-size : unset;
  color : unset;
  float : unset;
}

.bio blockquote{
  Width: 65%;
  color: var(--gris);
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  box-shadow: 3px 2px 10px var(--vertdeau);
  margin-top:30px;
  border-radius: 5px;
}

.bio blockquote p{
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: 'robotolight_italic';
}

.bio figure{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

.bio img{
  width : 30vw;
  height : auto;
}

.bio figcaption{
  font-family: 'Robotoregular';
  font-size: 0.8rem;
  color: var(--gris);
  width: 100%;
  position: relative;
  text-align: end;
}

.source{
  color:var(--vertdeau);
  text-align: end;
  font-family: 'robotoregular' !important;
  font-size: 0.8rem !important;
}

/* SPE MINI MOBILE */
@media screen and (min-width:300px) and (max-width: 600px) {

#top-nav{
  display: flex;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap-reverse;
  padding: 0;
}
.nav{
  padding : 10px;
  font-size: 0.9rem;
}

}

@media screen and (min-width:840px) and (max-width: 1000px) {
.carousel{
  width: 70%;
}}

@media screen and (min-width:0px) and (max-width: 1400px) {
.carousel{
  height: 400px;
}
.img-ppale{
  width: 70%;
}}


/* GENERAL MINI-MEDIUM MOBILE */

@media screen and (min-width:300px) and (max-width: 840px) {
  /* Largeurs de 300px à 840px - Smartphones et petites tablettes en portrait*/

  /*GEN*/
  h1{
    font-size: 24pt;
  }
  h2{
    padding-top: 10px;
    font-size: 1.8rem;
  }
 h4{
  font-size: 12pt;
 }

  /*NAV*/
.navbar{
  position: sticky;
}
.section{
  min-width: none;
  max-width: none;
  width : 100%;
}
#sous-menu{
  background-image: none;
}

/*HOME*/

.actus{
  display: block;
  grid-template-columns: none;
}
.sous-menu-grid{
  display : block;
  grid-template-columns: unset;
}
.theme-title{
  font-size: 1.6em;
  padding : unset;
  padding-bottom :50px;
  padding-top:10px;
}

/*AGENDA*/
.agenda2{
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.item2{
  padding-bottom: 30px;
}

/*GRILLES*/
#root{
  width:100%;
}

.clicdrop{
  width : 80%;
}

ul.listspec {
  padding : 0;
}

.rubrique, .rubriqu3{
  display : block ;
  grid-template-columns: unset;
  width:100%;
  margin-right: auto;
  margin-left: auto;
}

.coldr,
.colgch,
.car{
  width : 90%;
  margin-right: auto;
  margin-left: auto;
}
.carousel{
  width:100%;
}

.bio{
  width : 85vw;
}

.bio blockquote{
  width : 85vw;
}

.textegrille{
  margin-right: 0;
}

.textegrille ul{ 
  font-size: 10pt;
  line-height: 12pt;
}

.textegrille li{ 
  list-style:circle;
}


}