@import url(core/skeleton.css);


/* ---------- PART 1 -------------- */
#titlepage {
    height: 139px;  
    padding-top: 80px;
    background: no-repeat center;
    /*background-image: url(/images/logo_divers/citation.png);
    background-position-y: bottom;*/
}
#titlepage h1 {
    margin: 40px 0 40px 457px;
    text-transform: capitalize;
}


/* ---------- PART 2 -------------- */

/*-----------------------------------------------block bureau-------------------------------------------------*/

div.block_bureau{
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: space-evenly;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  flex-wrap: wrap;
  flex-direction: column;

  width: 100%;
  height: max-content;

  position: relative;
  top: 3em;
  left: 0em;
}

div.block_bureau div.ligne{
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: space-evenly;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  flex-direction: row;
  flex-wrap: wrap;

  width: 100%;
  height: max-content;

  position: relative;
  top: 0em;
  left: 0em;

  z-index: 1;
}



div.block_bureau div.ligne div.individu{
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: space-evenly;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  flex-direction: row;
  flex-wrap: wrap;

  width: 14%;
  height: 19em;

  position: relative;
  top: 0em;
  left: 0em;

  max-width: 1050px;
  /*min-width: 500px;*/
}

div.block_bureau div.ligne div.individu div.box_individu{
  width: 16em;
  height: 16em;

  position: relative;
  top: 0em;
  left: 0em;
  
  /*
  background-color: #F5F4EF99;

  
  border: solid 1px;
  border-color: brown;
  border-radius: 15px;
  */
}

div.block_bureau div.ligne div.individu div.box_individu div.photo_individu{
  width: 100%;
  height: 100%;

  border-radius: 15px;
  /*background-color: blue;*/
  background-size: 122% 145%;
  background-position-y: 13%;
  background-position-x: 40%;
  z-index: 2;
  position: relative;
  transition: transform 0.5s ease;
}

div.block_bureau div.ligne div.individu div.box_individu div.photo_individu{
  transform: scale(1.15);
}


div.block_bureau div.ligne div.individu div.box_individu:hover div.overlay-text {
  position: absolute;
  bottom: -29px;
  left: 0;
  right: 0;
  background: rgb(255 255 255 / 84%);
  color: black;
  text-align: center;
  padding: 5px;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
  border: 2px solid #8f2929;
  border-radius: 19px;
  /* font-weight: lighter; */
  font-size: smaller;
  font-family: 'Crete Round';
}

div.block_bureau div.ligne div.individu div.box_individu div.photo_individu div.overlay-text {
  opacity: 0;
}

div.block_bureau div.ligne div.individu div.box_individu:hover div.photo_individu div.overlay-text {
  opacity: 1;
}
        


#anais{
  background-image: url(/images/team/11.png);
}

#mitantsoa{
  background-image: url(/images/team/12.png);
}

#sariaka{
  background-image: url(/images/team/13.png);
}

#lucas{
  background-image: url(/images/team/14.png);
}

#orlane{
  background-image: url(/images/team/6.png);
}

#coralia{
  background-image: url(/images/team/4.png);
}

#mbolatiana{
  background-image: url(/images/team/7.png);
}

#antoine{
  background-image: url(/images/team/5.png);
}

#stephanie{
  background-image: url(/images/team/1.png);
}

#fenitra{
  background-image: url(/images/team/2.png);
}

#mathieu{
  background-image: url(/images/team/3.png);
}

#xavier{
  background-image: url(/images/team/8.png);
}

#fanaja{
  background-image: url(/images/team/9.png);
}

#yohann{
  background-image: url(/images/team/10.png);
}

#aina{
  background-image: url(/images/team/18.png);
}

#onja{
  background-image: url(/images/team/17.png);
}

#yga{
  background-image: url(/images/team/15.png);
}

#hery{
  background-image: url(/images/team/16.png);
}

#yoan{
  background-image: url(/images/team/19.png);
}

#individu_20{
  background-image: url(/images/team/20.png);
}


/*-----------------------------------------------fin de block bureau-------------------------------------------------*/
#cta-equipe h3 {
  width: 65%;
}

#cta-equipe div.wrapper div {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 3%;
}

#cta-equipe div.wrapper div.second_ben {
    height : 50em;
    display: flex;
}

#cta-equipe div.wrapper div div.subpart {
    width: 50%;
}

#cta-equipe div.wrapper div div.subpart h4 {
    width: 51%;
    height: 1em;
    margin-left: 32%;
}

#cta-equipe div.wrapper div div.subpart span.photofrance{
    background-image: url(/images/concert/32.jpg);
    background-repeat: no-repeat;
    background-size: 95% 189%;
    background-position-y: 58%;

    height: 100%;
    width: 100%;
}

#cta-equipe div.wrapper div div.subpart span.photomada{
    background-image: url(/images/team/teammada2.jpg);
    background-repeat: no-repeat;
    background-size: 118% 137%;
    background-position-x: 47%;
    background-position-y: 37%;

    height: 100%;
    width: 100%;
}

#cta-equipe div.wrapper div.second_ben span.photogarden{
    background-image: url(/images/Garden-party/2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
    height: 100%;
    width: 50%;
    margin-left: 25%;
}


/* ---------- PART 3 -------------- */

div.subpart {
    
  padding: 0 0 15px 0;
  text-align: left;
}

.quote-section {
  padding: 3em 1em;
}

.quote-card {
  background: rgba(255, 255, 240, 0.54);
  border: 2px solid #8f2929;
  padding: 1em 2.5em 1em 2.5em;
  margin: 0 auto;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: 'Georgia', serif;
  text-align: center;
}

.quote-text {
  font-size: 1.5em;
  font-style: italic;
  color: #3b2f2f;
  margin-bottom: 0.5em;
}

.quote-text::before,
.quote-text::after {
  content: '"';
  font-size: 100px;
  color: rgba(0, 0, 0, 0.1);
  position: absolute;
  font-family: 'Times New Roman', serif;
}

.quote-text::before {
  top: 16.5%;
  left: 28%;
}

.quote-text::after {
  top: 20.5%;
  right: 28.5%;
}

.quote-author {
  font-size: 0.95em;
  color: #6a5849;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .quote-text {
    font-size: 1.2em;
  }
}


@media screen and (max-width: 480px) {
  .send-button {
    width: 99%;
  }

  #titlepage {
    display: none;
    background-size: contain;
  }

  div.block_bureau {
    padding-top: 20px;
  }

  div.block_bureau div.ligne div.individu, div.block_bureau div.ligne div.individu div.box_individu {
    height: 11.5em;
  }


  div.block_bureau div.ligne div.individu div.box_individu {
    justify-content: center; /* Centrage horizontal */
    align-items: center;
    padding-bottom: 15px;
  }
  

  div.block_bureau div.ligne div.individu div.box_individu div.photo_individu {
    width: 8.5em;
    height: 8.5em;
    left: 1em;
    transition: none;
    align-items: center;
    display: flex;
  }


  div.block_bureau div.ligne div.individu div.box_individu div.photo_individu div.overlay-text {
    opacity: 1;
  }

  div.block_bureau div.ligne div.individu div.box_individu:hover div.photo_individu div.overlay-text {
    all: unset;
    position: absolute;
    left: 105%;
    right: 0;
    background: rgb(255 255 255 / 84%);
    color: black;
    text-align: center;
    padding: 5px;
    /*transition: opacity 0.5s ease;*/
    z-index: 2;
    border: 2px solid #8f2929;
    border-radius: 19px;
    /* font-weight: lighter; */
    font-size: 80%;
    font-family: 'Crete Round';
    margin: auto;
    width: 40vw;
  }

  div.block_bureau div.ligne div.individu div.box_individu div.overlay-text {
    all: unset;
    position: absolute;
    left: 105%;
    right: 0;
    background: rgb(255 255 255 / 84%);
    color: black;
    text-align: center;
    padding: 5px;
    opacity: 0;
    /*transition: opacity 0.5s ease;*/
    z-index: 2;
    border: 2px solid #8f2929;
    border-radius: 19px;
    /* font-weight: lighter; */
    font-size: 80%;
    font-family: 'Crete Round';
    margin: auto;
    width: 40vw;
  }



  #cta {
    padding: 105px 0;
  }

  #cta div.wrapper div div.subpart {
    width: 100%;
    height: auto;
  }

  #cta div.wrapper div div.subpart h4 {
    width: 100%;
    margin-left: 0%;
    text-align: center;
  }

  #cta div.wrapper div.second_ben {
    height: 30em;
  }

  #cta div.wrapper div.second_ben span.photogarden {
    height: 100%;
    width: 100%;
    margin-left: 0%;
  }

}