/* Fonts */

@import url("https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap");

.corinthia-regular {
  font-family: "Corinthia", cursive;
  font-weight: 400;
  font-style: normal;
}

.corinthia-bold {
  font-family: "Corinthia", cursive;
  font-weight: 700;
  font-style: normal;
}

.goot-sans-flex {
  font-family: "Google Sans Flex", sans-serif;
  font-size: 100%;
  font-weight: 500;
}

* {
  font-family: "Google Sans Flex", sans-serif;
  font-size: 100%;
  font-weight: 300;
}

a:-webkit-any-link {
  color: inherit;
  text-decoration: none;
}

.italic {
  font-style: italic;
}

.underlined {
  text-decoration: underline;
}

h2 {
  font-size: 150%;
  font-weight: 600;
}

h3 {
  font-size: 200%;
  font-weight: 600;
}

h4 {
  font-size: 300%;
  font-weight: 600;
}

@media screen and (max-width: 1200px) {
p {
  font-size: 90%;
}

  h2 {
  font-size: 120%;
  font-weight: 600;
}

h3 {
  font-size: 135%;
  font-weight: 600;
}

h4 {
  font-size: 150%;
  font-weight: 600;
}
}

.brandName {
  font-family: "Corinthia", cursive;
  font-weight: 900;
  font-size: 3.5em;
  color: #720044;
}

.inline {
  line-height: 1.2;
}

.inline strong {
  font-weight: 500;
}

.white-space-nowrap {
  white-space: nowrap;
}

/* General */

* {
  margin: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fadeed;
  overscroll-behavior-x: none !important;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.underBody {
  display: flex;
  flex-direction: column;
  padding: 7.4%;
}

footer {
  text-align: center;
  padding: 0.8% 0%;
  background-color: #6e5663 !important;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heightFill {
  height: -webkit-fill-available;
}
.widthFill {
  width: -webkit-fill-available;
}

.align-items-center {
  align-items: center;
}

.justify-space-around {
  justify-content: space-around;
}
.justify-space-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.containerGapSmall {
  gap: 0.45vw;
}

.containerGapMedium {
  gap: 1.4vw;
}

.containerGapLarge {
  gap: 2.6vw;
}

@media screen and (max-width: 1200px) {
  .containerGapSmall {
  gap: 2vw;
}

.containerGapMedium {
  gap: 3vw;
}

.containerGapLarge {
  gap: 4vw;
}
}

.accompagnement {
  padding-top: 4.5%;

  padding-bottom: 4.5%;
  padding-left: 5.5%;
}

.legalText {
  text-align: center;
  align-items: center;
}

.legalLink {
  transition: 0.2s ease;
}

.legalLink:hover {
  font-size: 110%;
  color: rgba(255, 255, 255, 0.75);
}

/* n'est pas affiché */
.hidden {
  display: none !important;
}

/* invisible sans perdre les dimentions */
.visiblent {
  opacity: 0%;
  pointer-events: none;
}

body.noScroll {
  pointer-events: none;
  overflow: hidden;
}

/* Components */

.titledContainer {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  color: white;
  padding: 4.5% 5.5%;
}

.horizontalTxtContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.textContainer {
  display: flex;
  flex-direction: column;
}


@media screen and (max-width: 1200px) {
  .txtImageContainer {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  .txtImageContainer img {
    width: 75vw !important;
    height: inherit !important;
  }

  
}

/* navbar */

.navBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 3em;
  background-color: #f5e7ef;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 1200px) {
  .navBar {
    padding: 0.75em 1.5em;
  }
}

#navLogo {
  height: 7em;
}

@media screen and (max-width: 1200px) {
  #navLogo {
    height: 5em;
  }
}

.navItem {
  font-size: 90%;
  font-weight: 300;
  color: #ba87a3;
  transition: 0.2s ease;
  white-space: nowrap;
}

@media screen and (max-width: 1200px) {
  #navItems {
    display: none;
  }
}

.navItem:hover {
  font-size: 105%;
  color: #720044;
}

.navItemActive {
  font-size: 120% !important;
  color: #720044;
}

.navItemUnderline {
  width: 0px;
  opacity: 0%;
  height: 1px;
  background-color: #720044;
}

.navItemActive .navItemUnderline {
  width: -webkit-fill-available;
  opacity: 100%;
}

.navContactButton * {
  align-items: center;
}

@media screen and (max-width: 1200px) {
  .navContactButton {
    display: none !important;
  }
}

.navContactButton {
  background-color: #720044;
  border: 0em;
  display: flex;
  direction: row;
  gap: 0.5em;
  color: white;
  border-radius: 220px;
  padding: 0.5em 1.5em;
  font-size: 120%;
  width: max-content;
  white-space: nowrap;
  align-items: center;
  transition: 0.2s ease;
}

.navContactButton:hover {
  font-size: 135%;
  box-shadow: 0 0 20px rgba(114, 0, 68, 0.8);
}

.menuButton {
  display: none;
}

@media screen and (max-width: 1200px) {
  .menuButton {
    display: flex;
    background-color: #720044;
    color: white;
    transition: 0.2s ease;
    align-items: center;
    border: 0em;
    border-radius: 220px;
    padding: 0.5em 1em;
  }

  .menuButton ion-icon {
    width: 1.5em;
    height: 1.5em;
    transition: 0.2s ease;
  }

  .menuButton:hover {
    box-shadow: 0 0 20px rgba(114, 0, 68, 0.8);
  }

  .menuButton:hover ion-icon {
    width: 2em;
    height: 2em;
  }
}

#fixedTopNav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: 0.4s;
}

#stayInPlace {
  position: relative;
  z-index: 900;
}

.navMasked {
  transform: translateY(-100%);
}

#menu {
  display: none;
}

@media screen and (max-width: 1200px) {
  #menu {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    z-index: 1000;
    background-color: #fadeed;
    width: -webkit-fill-available;
    height: 100%;
    transition: 0.5s ease;
    opacity: 100%;
    transform: translateY(0%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #menu.hide {
    transform: translateX(100%);
  }

  .topMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.75em 1.5em;
    background-color: #f5e7ef;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }

  .closeMenuButton {
    display: flex;
    background-color: #720044;
    color: white;
    transition: 0.2s ease;
    align-items: center;
    border: 0em;
    border-radius: 220px;
    padding: 0.5em 1em;
  }

  .closeMenuButton ion-icon {
    width: 1.5em;
    height: 1.5em;
    transition: 0.2s ease;
  }

  .closeMenuButton:hover {
    box-shadow: 0 0 20px rgba(114, 0, 68, 0.8);
  }

  .closeMenuButton:hover ion-icon {
    width: 2em;
    height: 2em;
  }

  #MenuContactButton {
    width: -webkit-fill-available;
    background-color: #720044;
    border: 0em;
    display: flex;
    justify-content: center;
    direction: row;
    gap: 0.5em;
    color: white;
    padding: 1em 1.5em;
    font-size: 120%;
    white-space: nowrap;
    align-items: center;
    transition: 0.2s ease;
  }

  #MenuContactButton:hover {
    font-size: 135%;
    box-shadow: 0 0 20px rgba(114, 0, 68, 0.8);
  }

  .menuItem {
    color: black;
    font-size: 110%;
    font-weight: 500;
    transition: 0.2s ease;
    white-space: nowrap;
  }

  .menuItem:hover {
    font-size: 125%;
    font-weight: 500;
  }

  .menuItemSeparator {
    width: 100%;
    height: 2px;
    background-color: black;
  }
}

/* accompagnement section */

.uiIcon {
  height: 1.8em;
  width: 1.8em;
}

@media screen and (max-width: 1200px) {
.accompagnementItem {
  flex-direction: column;
}

.accompagnementItem .container {
  align-items: center;
}


}

.accompagnementSection {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  width: -webkit-fill-available;
  height: 100%;
  transition: 0.5s ease;
  opacity: 100%;
  transform: translateY(0%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.accompagnementSection.hide {
  opacity: 0%;
  transform: translateY(100%);
}

.accompagnementCard {
  border-radius: 0.5em;
}

.closeButtonContainer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.closeButtonContainer * {
  align-items: center;
}

.closeButton {
  background-color: black;
  border: 0em;
  display: flex;
  direction: row;
  gap: 0.5em;
  color: white;
  border-radius: 220px;
  padding: 0.5em 1.5em;
  width: max-content;
  transition: 0.2s ease;
}

.closeButton ion-icon {
  height: 2em;
  width: 2em;
}

.closeButton:hover {
  padding: 0.7em 1.7em;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 1200px) {
  .closeButton {
    padding: 0.25em 1em;
  }
}

.accompagnementContactButton {
  background-color: white;
  display: flex;
  direction: row;
  gap: 0.5em;
  color: black;
  border-radius: 0.8em;
  padding: 0.5em 1.5em;
  width: max-content;
  border: 0ch;
  transition: 0.2s ease;
}

.accompagnementContactButton:hover {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 1em 2em;
}

.seeMoreButton {
  padding: 1% 3.5%;
  color: white;
  width: max-content;
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  transition: 0.2s ease;
}

@media screen and (max-width: 1200px) {
  .seeMoreButton {
    justify-content: center;
    width: -webkit-fill-available;
    height: 100%;
  }
}


.seeMoreButton:hover {
  font-size: 110%;
}

#schemaMaladie {
  max-height: 26em;
}

@media screen and (max-width: 1200px) {
  #schemaMaladie {
    max-height: inherit !important;
    width: 75vw;
  }
}

#formation {
  height: 21.5em;
}

#immersion {
  width: 27em;
}

@media screen and (max-width: 1200px) {
  #immersion {
    width: 75vw;
  }
}

.playerButton {
  width: max-content;
}

.playerButton ion-icon {
  height: 4em;
  width: 4em;
  position: absolute;
  z-index: 101;
  color: white;
  transition: 0.2s ease;
}

.playerButton:hover ion-icon {
  height: 5em;
  width: 5em;
}

/* first screen section (logo fullscreen) */

#firstScreen {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#firstScreen .underBody {
  padding: 4em;
}

/* #firstScreenBackgroundLayerBlurred {
  position: absolute;
  top: 0;
  z-index: 100;
  width: 100vw;
  height: 99vh;
  overflow: hidden;
  background-image: url(/images/first.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
} */

.layer {
  position: absolute;
  inset: 0;
}

.background {
  background-image: url(/images/first.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 0;
}

.blur {
  backdrop-filter: blur(20px);
  background-color: rgba(114, 0, 68, 0.5);
  z-index: 1;
}

#colorLayer {
  background-color: rgba(186, 135, 163, 0.7);
}

#brandLayer {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
}

#firstScreenBackgroundLayer {
  z-index: 2;
  padding: 3em 3em;
}

#contactLayer {
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 4em 4em;
}

#firstChevron {
  width: 5em;
  height: 5em;
  transition: 0.2s ease;
  color: #720044;
}

#firstChevron:hover {
  width: 6.5em;
  height: 6.5em;
  color: rgba(114, 0, 68, 0.5);
}

.firstContactLink {
  transition: 0.2s ease;
  color: #720044;
}

.firstContactLink:hover {
  font-size: 175%;
  color: rgba(114, 0, 68, 0.5);
}

@media screen and (max-width: 1200px) {
  #contactContainer {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
}

#discoverButton {
  align-items: center;
  transition: 0.2s ease;
}

#discoverButton:hover {
  color: #720044;
  font-size: 110%;
}

/* contact Section */

.whoAmiImageContainer {
  height: 15vw;
  display: flex;
  flex-direction: row;
  width: -webkit-fill-available;
  flex-wrap: wrap;
  justify-content: space-between;
}

.whoAmiImageContainer img {
  height: 100%;
}

.contactLink {
  transition: 0.2s ease;
}

.contactLink:hover {
  font-size: 110%;
  color: rgba(255, 255, 255, 0.75);
}

.socialIcon {
  height: 3.2em;
  width: 3.2em;
  transition: 0.2s ease;
}

.socialIcon:hover {
  height: 3.5em;
  width: 3.5em;
  color: rgba(255, 255, 255, 0.75);
}

.formulaire {
  display: flex;
  flex-direction: column;
  background-color: #edcade;
  padding: 3.5% 5%;
  align-items: center;
}

.formulaire * {
  border: 0cap;
  font-weight: 500;
}

.formulaire input {
  background-color: #ffffff;
  border-radius: 4px;
  width: -webkit-fill-available;
  padding: 0.7% 2%;
}

#formMessage {
   background-color: #ffffff;
  border-radius: 4px;
  width: -webkit-fill-available;
  padding: 0.7% 2%;
}

#formMotif::placeholder {
  color: black;
}

#Submit {
  width: min-content;
  background-color: #720044;
  color: white;
  border-radius: 4px;
  padding: 0.7% 2%;
  transition: 0.2s ease;
}

#Submit:hover {
  padding: 1% 2.5%;
  box-shadow: 0 0 25px rgba(114, 0, 68, 0.8);
}

.temoignageContainer {
  align-items: flex-start !important;
}

.temoignageBlock {
  padding: 2%;
  background-color: white;
  color: black;
  max-width: 20%;
}

@media screen and (max-width: 1200px) {
  .temoignageBlock {
    max-width: inherit !important;
  }
}

@media screen and (max-width: 1200px) {
#temoignageBlock3 { display: none;}
#temoignageBlock4 { display: none;}
}

#temoignageContainer2 {
  display: none;
}

@media screen and (max-width: 1200px) {
#temoignageContainer2 {
  display: flex;
}

}

.ellipse {
  height: 1em;
  width: 1em;
}

.readMoreButton {
  width: -webkit-fill-available;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.imageContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.imageContainer img {
  object-fit: cover;
  width: 25vw;
}

#ReadMore {
  background-color: white;
  color: black;
  padding: 1%;
  border: 0cap;
}