@font-face {font-family: "capsu"; src: url('./polices/Capsuula.ttf')}

body {font-family: sans-serif; overflow-y: scroll; overflow-x: hidden; scroll-behavior: smooth;}

::selection{background-color: #ff8126; color: white;}
/* Firefox */
::-moz-selection {background-color: #ff8126; color: white;}

#logo img {height: 40px; margin: 1rem;}
header#header {z-index: 9999; top: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: fixed; width: 100%; background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));}
#reseaux {display: flex;}
#reseaux a {text-decoration: none; color: black; margin: 1rem; z-index: 999;}
#contenu {position: absolute; z-index: 999;}

.post {display: flex; color: inherit; position: relative; padding: 0rem; cursor: pointer;}
.post:before {position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 100%; background-color: #000; transform-origin: 0 bottom 0; transform: scaleY(0); transition: 0.4s ease-out;}
.post:hover .post-title {color: #fff;}
.post:hover:before {transform: scaleY(1);}
.post-title {position: relative; font-size: 1.2rem; line-height: 1.333; transition: 0.4s ease-out;}

.scroll {height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: -1; font-family: sans-serif; letter-spacing: 0.2em; margin-bottom: -100vh; font-size: 11px;}
.scroll span {display: block;}
.scroll svg {margin-top: 10px; width: 13px; height: 20px; -webkit-animation: scroll 0.95s ease-in-out alternate infinite; animation: scroll 0.95s ease-in-out alternate infinite;}

.ball {z-index: -1; width: 20px; height: 20px; border-radius: 40%; opacity: 0; margin: -19px auto; transition: transform 1s cubic-bezier(0.14, 0.15, 0.13, 0.99); overflow: hidden;}

section {z-index: 2; margin-top: 50vh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100vw;}
.gauche {width: 50%; display: flex; flex-direction: column; align-items: center;}
.droite {width: 50%; display: flex; flex-direction: column; align-items: center;}
h1,h2 {z-index: 999; font-family: capsu; text-align: center; margin-top: 10rem; margin-bottom: 5rem; font-size: 5rem;}
.cartes {display: flex; flex-direction: row; width: 100%;}
section h3 {font-size: 1.4rem; margin-bottom: 1rem;}

.cartes {align-items: center;}
.cartes img {box-shadow: 5px 0px 5px rgb(197, 197, 197);}
#carte-1 {margin-bottom: 10rem; display: flex; align-items: center;}
#carte-2 {flex-direction: row-reverse; margin-bottom: 10rem;}
#carte-2 .gauche img {max-width: 100%; margin: 4rem 0;}
#carte-3 {margin-bottom: 10rem;}
#carte-4 {margin-bottom: 10rem; text-align: center; display: flex; flex-direction: column;}
#carte-4 button {margin-top: 3rem;}
small {color: grey; margin-top: 0.5rem; font-size: 0.6rem; text-align: center;}

#bgc-carte-contact {background-color: white; width: 100%;}
h2#contact {margin-top: 4rem;}
#carte-contact {margin-bottom: 10rem;}
#carte-contact img {height: 50px; margin-bottom: 3rem; box-shadow: none;}
#carte-contact p {margin-bottom: 3rem; font-size: 2rem;}
#carte-contact a#youtube {color: black;}
#bloc-contact {border-top: 3px solid black; width: 100%; z-index: 999;}
#youtube img {margin: 0 1rem;}
a#youtube {display: flex; align-items: center;}



.remplissage:hover,.remplissage:focus {box-shadow: inset 0 0 0 2em var(--hover);}
.fill {--color: #ee29b3; --hover: #da1b94;}
.pulse {--color: #ec4b16; --hover: #ec6437;}
.close {--color: #117a6c; --hover: #1fb6bb;}
.raise {--color: #ffa260; --hover: #caec20;}
.up {--color: #e4cb58; --hover: #94e458;}
.slide {--color: #003688; --hover: #5900ff;}
.offset {--color: #1e4e52; --hover: #e5bf37;}

button {color: var(--color); transition: 0.25s;  background: none; border: 2px solid; font: inherit; line-height: 1; margin: 0.5em; padding: 1em 4em;}
button:hover, button:focus {border-color: var(--hover); color: #fff;}
button {color: var(--color); transition: 0.25s;
  &:hover, &:focus {border-color: var(--hover); color: #fff;}
}
section a {text-decoration: none;}

.remplissage:hover, .remplissage:focus {box-shadow: inset 0 0 0 2em var(--hover);}

footer {background-color: black; padding: 0.4rem; color: white; text-align: center;}
 
.accordeon {width: 80%;}
.accordeon_titre {width: auto; text-align: center; cursor: pointer; transition: 0.3s linear;}
.accordeon_titre p {padding: 1rem; transition: 0.3s linear;}
.accordeon_contenu {display: none; padding: 40px 80px;}
.accordeon-flex {text-align: center;}
.accorderon-gauche {width: 40%; margin: auto;}
.accorderon-gauche img {max-width: 100%;}
/* .accorderon-droite {width: 50%;} */
.accorderon-droite p {margin-bottom: 0.8rem; text-align: left; line-height: 1.4rem;}
#align-a-p {text-align: center !important;}
#align-a-p a {color: #1e4e52; font-weight: bold;}
#align-a-p a:hover {color: #e5bf37;}
.accordeon-small {display: flex; flex-direction: column;}

.wordCarousel {font-size: 2rem; font-weight: 100; color: black; text-align: left;}
.wordCarousel div {overflow: hidden; position: relative; float: right; height: 65px; padding-top: 10px; margin-top: -10px; text-align: right;}
.wordCarousel div li {font-family: sans-serif; color: black; font-weight: 1.8rem; padding: 0 10px; height: 45px; margin-bottom: 45px; display: block;}

.flip2 {
  -webkit-animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip3 {
  -webkit-animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip4 {
  -webkit-animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip5 {
  -webkit-animation: flip5 12s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip5 12s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

@-webkit-keyframes flip2 {
  0% {
    margin-top: -180px;
  }
  5% {
    margin-top: -90px;
  }
  50% {
    margin-top: -90px;
  }
  55% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -180px;
  }
}

@keyframes flip2 {
  0% {
    margin-top: -180px;
  }
  5% {
    margin-top: -90px;
  }
  50% {
    margin-top: -90px;
  }
  55% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -180px;
  }
}
@-webkit-keyframes flip3 {
  0% {
    margin-top: -270px;
  }
  5% {
    margin-top: -180px;
  }
  33% {
    margin-top: -180px;
  }
  38% {
    margin-top: -90px;
  }
  66% {
    margin-top: -90px;
  }
  71% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -270px;
  }
}
@keyframes flip3 {
  0% {
    margin-top: -270px;
  }
  5% {
    margin-top: -180px;
  }
  33% {
    margin-top: -180px;
  }
  38% {
    margin-top: -90px;
  }
  66% {
    margin-top: -90px;
  }
  71% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -270px;
  }
}
@-webkit-keyframes flip4 {
  0% {
    margin-top: -360px;
  }
  5% {
    margin-top: -270px;
  }
  25% {
    margin-top: -270px;
  }
  30% {
    margin-top: -180px;
  }
  50% {
    margin-top: -180px;
  }
  55% {
    margin-top: -90px;
  }
  75% {
    margin-top: -90px;
  }
  80% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -360px;
  }
}
@keyframes flip4 {
  0% {
    margin-top: -360px;
  }
  5% {
    margin-top: -270px;
  }
  25% {
    margin-top: -270px;
  }
  30% {
    margin-top: -180px;
  }
  50% {
    margin-top: -180px;
  }
  55% {
    margin-top: -90px;
  }
  75% {
    margin-top: -90px;
  }
  80% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -360px;
  }
}
@-webkit-keyframes flip5 {
  0% {
    margin-top: -450px;
  }
  5% {
    margin-top: -360px;
  }
  20% {
    margin-top: -360px;
  }
  25% {
    margin-top: -270px;
  }
  40% {
    margin-top: -270px;
  }
  45% {
    margin-top: -180px;
  }
  60% {
    margin-top: -180px;
  }
  65% {
    margin-top: -90px;
  }
  80% {
    margin-top: -90px;
  }
  85% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -450px;
  }
}
@keyframes flip5 {
  0% {
    margin-top: -450px;
  }
  5% {
    margin-top: -360px;
  }
  20% {
    margin-top: -360px;
  }
  25% {
    margin-top: -270px;
  }
  40% {
    margin-top: -270px;
  }
  45% {
    margin-top: -180px;
  }
  60% {
    margin-top: -180px;
  }
  65% {
    margin-top: -90px;
  }
  80% {
    margin-top: -90px;
  }
  85% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -450px;
  }
}

@-webkit-keyframes scroll {0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}



@media screen and (max-width: 1200px){

  section h3 {font-size: 1rem;}

}

@media screen and (max-width: 1000px){

  #carte-1, #carte-2, #carte-3, #carte-contact {flex-direction: column; width: 100%;}
  #carte-1 img, #carte-2 img, #carte-3 img {width: 100%;}
  #carte-1 h3, #carte-2 h3, #carte-3 h3 {margin-top: 2rem; text-align: center;}
  #carte-contact div.droite {margin-top: 4rem;}
  .gauche {width: 100%;}
  .droite {width: 100%;}
  #carte-1 img, #carte-2 img, #carte-3 img {width: 80%;}
}

@media screen and (max-width: 450px){

  div.ball {display: none;}   
  header#header {padding-bottom: 0.5rem;}
  #logo img {height: 30px; margin: 0.1rem;} 
  #reseaux {font-weight: bold;}
  #reseaux a {margin: 0.5rem; font-size: 1.3rem;}
  .post {background: none;}
  .post-title {font-size: 1.4rem;}
  .gauche {width: 95%;}
  .droite {width: 95%;}
  h2 {font-size: 4rem;}
  div.accordeon {width: 100%;}
  .accordeon-flex {flex-direction: column;}
  .accordeon_contenu {padding: 0.5rem;}
  .accorderon-gauche, .accorderon-droite {width: 100%;}
  .accorderon-gauche {margin-right: 0;}
  #carte-1 img, #carte-2 img, #carte-3 img {width: 90%;}
  #carte-4 : {width: 100%;}
  .fotorama {width: 100% !important;}
  .fotorama__img {width: 100vw;}
  #carte-contact a, #carte-contact p {font-size: 1.5rem; margin-bottom: 1.5rem;}
  #carte-contact {margin-bottom: 4rem;}
  #carte-contact img {width: 70%; object-fit: contain; margin-bottom: 1.5rem;}
  #carte-contact button::first-child {margin-bottom: 4rem;}
  #carte-contact div.droite {margin-top: 3rem;}
  #carte-contact button {font-size: 1rem;}
  footer {width: auto;}
}