@charset "UTF-8";
/* 
0 - 600px :     Phone
600 - 900px :   Tablet Portrait
900 -  1200px : Tablet Landscape
1200 - 1800px : is where our normal styles apply (common desktop)
1800px + :      Big Desktop
 
$breakpoint argument choices: 
- phone
- tab-port
- tab-land
- big-desktop

ORDRE : Base + Typo > General layout + Grid > Page Layout > Components
*/
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  70% {
    transform: translateX(2rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem); }
  70% {
    transform: translateX(-2rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

/* Sélecteur universel pour retirer les paramètrage par défaut des navigateurs. */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  /* 
    Pour utiliser les rem dans les tailles, on va déclarer la font-size du root (R de REM veut dire root) 
    En mettant 10px, c'est plus facile pour calculer ensuite car du coup 1 rem = 10px. 
    */
  /* font-size: 10px; */
  /* 
    On peut également convertir ces 10px en pourcentages. 
    Ca sera alors un pourcentage de la taille par défaut qui est souvent 16px. 
    */
  font-size: 62.5%;
  /* 
    Attention à l'ordre des mediaqueries, 
    il faut mettre les plus grand largeurs en premier 
    et les plus petites en dernier 
    */
  scroll-behavior: smooth; }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }

body {
  /* 
C'est une bonne pratique de déplacer le box-sizing dans le body 
et de dire dans le sélécteur universel 
que pour tous les éléments le box-sizing doit être hérité. 
Ainsi ca sera le box-sizing border-box qui sera appliqué partout. 
*/
  box-sizing: border-box;
  /* box-sizing permet de dire que les paddings et les margins ne doivent pas être ajoutées aux hauteurs et largeurs des éléments cf. "Schéma Box-sizing" sur Notion */
  scroll-behavior: smooth; }
  @media only screen and (max-width: 56.25em) {
    body {
      padding: 0; } }

@font-face {
  font-family: 'DMSerifDisplay';
  src: local("DM Serif Display"), local("DM-Serif-Display"), url("./fonts/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'DMSerifDisplay';
  src: local("DM Serif Display"), local("DM-Serif-Display"), url("./fonts/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap; }

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  /* font-size: 16px; */
  line-height: 1.7;
  color: #353535; }

.u-center-text {
  text-align: center !important; }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }
  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-big {
      margin-bottom: 5rem !important; } }

.u-margin-bottom-medium {
  margin-bottom: 4rem !important; }
  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-medium {
      margin-bottom: 3rem !important; } }

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important; }

.u-margin-top-big {
  margin-top: 8rem !important; }

.u-margin-top-huge {
  margin-top: 10rem !important; }

.bandeau {
  height: 95vh;
  background: url("../img/image_bandeau@2x.webp");
  background-size: cover;
  background-position: bottom;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column; }
  .bandeau_title {
    font-family: 'DMSerifDisplay';
    color: #FFDD67;
    font-size: 9rem;
    font-weight: 500;
    line-height: 0.9;
    text-align: center;
    margin-bottom: 20vh; }
    .bandeau_title_sub {
      font-size: 5rem; }
  .bandeau_arrow {
    margin-bottom: 10vh; }

.presentation {
  display: flex;
  min-width: 768px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 20px;
  flex-direction: row;
  gap: 5rem;
  justify-content: center; }
  @media only screen and (max-width: 37.5em) {
    .presentation {
      flex-direction: column;
      min-width: inherit;
      max-width: inherit;
      padding: 50px 20px; } }
  .presentation_left {
    margin-right: 40px;
    width: 40%; }
    @media only screen and (max-width: 37.5em) {
      .presentation_left {
        margin-right: 0;
        width: 100%; } }
    .presentation_left img {
      width: 100%;
      border-radius: 5%; }
  .presentation_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 60%; }
    @media only screen and (max-width: 37.5em) {
      .presentation_right {
        width: 100%; } }

.presentation_subtitle {
  font-weight: 600;
  font-size: 6rem;
  margin-bottom: 3vh;
  font-family: 'DMSerifDisplay'; }
  @media only screen and (max-width: 56.25em) {
    .presentation_subtitle {
      font-size: 5rem; } }

.arrow {
  fill: #FFDD67; }
  .arrow:hover {
    fill: #FFFFFF; }

.presentation_text {
  font-size: 2rem;
  margin-bottom: 2vw;
  padding-right: 20px;
  color: #000; }
  @media only screen and (max-width: 75em) {
    .presentation_text {
      font-size: 14px;
      margin-bottom: 20px;
      /* padding-right: 20px; */
      /* width: inherit; */ } }

.cta {
  width: 100%;
  font-size: 4rem;
  font-family: 'DMSerifDisplay';
  text-align: center;
  display: block;
  padding: 5vh 0;
  background-color: #FFDD67;
  color: #000; }
  @media only screen and (max-width: 56.25em) {
    .cta {
      font-size: 3.5rem; } }

.cta a {
  text-decoration: none;
  display: inline-block;
  background-color: #FFF;
  color: #000;
  padding: 2vh 2vw;
  margin: 1vw;
  border-radius: 8px;
  font-family: 'Poppins';
  font-weight: 700; }
  .cta a:hover {
    background-color: #000;
    color: #FFF; }

.cta-gras {
  font-weight: 600; }

.domaines {
  background-color: #000; }

.domaines h2 {
  width: 100%;
  font-family: 'DMSerifDisplay';
  color: #FFF;
  font-size: 5rem;
  text-align: center;
  display: block;
  padding: 10vh 0 5vh 0; }
  @media only screen and (max-width: 37.5em) {
    .domaines h2 {
      padding: 6vh 1vw;
      font-size: 3.1rem; } }

.domains_cards_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 10vh;
  max-width: 1440px;
  margin: 0 auto; }
  @media only screen and (max-width: 56.25em) {
    .domains_cards_container {
      padding-bottom: 1vh; } }

.domain_card {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 20%;
  height: 330px;
  padding: 20px 10px;
  align-items: center;
  gap: 3rem; }
  .domain_card:link, .domain_card:visited {
    text-decoration: none;
    color: #FFF;
    font-weight: 300;
    font-size: 2rem; }
  .domain_card:hover, .domain_card:active {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 2rem;
    background-color: #FFDD67; }
  @media only screen and (max-width: 56.25em) {
    .domain_card {
      margin-bottom: 10px;
      width: 90%; }
      .domain_card:not(:last-child) {
        border-bottom: 1px solid #D6D6D6; } }
  .domain_card_icon_container {
    width: 150px;
    height: 150px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    /* padding: 40px; */
    border: 1px solid #D6D6D6;
    background-color: #FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; }
  .domain_card_icon {
    width: 60px; }
  .domain_card_text {
    align-content: center;
    display: flex;
    flex-wrap: wrap; }
    @media only screen and (max-width: 56.25em) {
      .domain_card_text {
        font-size: 2.5rem; } }
    .domain_card_text:link, .domain_card_text:visited {
      text-decoration: none;
      color: #353535;
      font-weight: 300;
      font-size: 2rem; }
      @media only screen and (max-width: 56.25em) {
        .domain_card_text:link, .domain_card_text:visited {
          font-size: 2.5rem; } }
    .domain_card_text:hover, .domain_card_text:active {
      text-decoration: none;
      color: #353535;
      font-weight: 600;
      font-size: 2rem; }
      @media only screen and (max-width: 56.25em) {
        .domain_card_text:hover, .domain_card_text:active {
          font-size: 2.5rem; } }

.confiance {
  width: 100%;
  font-weight: 300;
  font-style: italic;
  font-size: 2.6rem;
  text-align: center;
  display: block;
  padding: 10vh 15vw;
  margin: 0;
  background-color: #FFDD67; }
  @media only screen and (max-width: 37.5em) {
    .confiance {
      padding: 5vh 5vw; } }

.button-hover {
  margin-top: 4rem;
  position: relative;
  width: 160px;
  height: 112px;
  background: transparent;
  border: none;
  cursor: pointer; }

.svg-off,
.svg-on {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease; }

.stroke-light {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px; }

.stroke-dark {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px; }

.svg-on {
  opacity: 0; }

.button-hover:hover .svg-off {
  opacity: 0; }

.button-hover:hover .svg-on {
  opacity: 1; }

.domain_card:hover .svg-off {
  opacity: 0; }

.domain_card:hover .svg-on {
  opacity: 1; }

.main_internal_page_bandeau {
  height: 60vh;
  background-color: #FFDD67;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 8vh 0; }
  @media only screen and (max-width: 56.25em) {
    .main_internal_page_bandeau {
      height: auto; } }
  .main_internal_page_bandeau_icon {
    width: 4vw;
    fill: #353535; }
    @media only screen and (max-width: 56.25em) {
      .main_internal_page_bandeau_icon {
        width: 6vw; } }
    @media only screen and (max-width: 37.5em) {
      .main_internal_page_bandeau_icon {
        width: 10vw; } }
  .main_internal_page_bandeau_title {
    font-size: 4.8rem;
    font-weight: 600;
    width: 60vw;
    text-align: center;
    font-family: 'DMSerifDisplay'; }
    @media only screen and (max-width: 56.25em) {
      .main_internal_page_bandeau_title {
        font-size: 2.8rem;
        width: auto;
        margin-bottom: 20px; } }
  .main_internal_page_bandeau_intro {
    font-size: 2rem;
    width: 40vw;
    margin: 0 auto;
    text-align: center; }
    @media only screen and (max-width: 75em) {
      .main_internal_page_bandeau_intro {
        width: 80%; } }
    @media only screen and (max-width: 56.25em) {
      .main_internal_page_bandeau_intro {
        width: 90%; } }

.main_internal_page_title {
  width: 100%;
  font-weight: 300;
  font-size: 3.6rem;
  text-align: center;
  display: block;
  border-top: 1px solid #E8E8E8;
  padding: 10vh 0 0 0; }

.main_internal_page_text {
  font-size: 2rem;
  width: 50vw;
  margin: 0 auto;
  padding: 10vh 0; }
  @media only screen and (max-width: 56.25em) {
    .main_internal_page_text {
      width: 90%; } }
  .main_internal_page_text li {
    margin-left: 40px; }

.parcours_presentation {
  display: flex;
  min-width: 768px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 20px;
  flex-direction: column;
  justify-content: center; }
  @media only screen and (max-width: 56.25em) {
    .parcours_presentation {
      flex-direction: column;
      width: 100%;
      padding: 50px 20px;
      min-width: inherit;
      max-width: inherit; } }
  .parcours_presentation_title h2 {
    font-size: 3.6rem;
    font-weight: 300;
    padding: 7vh 0;
    width: 100%;
    text-align: center; }
    @media only screen and (max-width: 56.25em) {
      .parcours_presentation_title h2 {
        font-size: 2.8rem;
        width: auto;
        margin-bottom: 20px; } }
  .parcours_presentation_content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-bottom: 4rem; }
    @media only screen and (max-width: 56.25em) {
      .parcours_presentation_content {
        flex-direction: column;
        justify-items: center;
        align-items: center;
        width: 100%; } }
    .parcours_presentation_content_left {
      margin-right: 40px;
      width: 40%; }
      @media only screen and (max-width: 56.25em) {
        .parcours_presentation_content_left {
          margin-right: 0;
          margin-bottom: 20px;
          width: 100%; } }
      .parcours_presentation_content_left img {
        width: 100%;
        border-radius: 15px; }
  .parcours_presentation_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 60%; }
    @media only screen and (max-width: 56.25em) {
      .parcours_presentation_right {
        width: 100%; } }

.parcours_presentation_subtitle {
  font-weight: 600;
  font-size: 4rem;
  margin-bottom: 3vh; }

.parcours_presentation_text {
  font-size: 2rem;
  padding-right: 20px; }
  @media only screen and (max-width: 75em) {
    .parcours_presentation_text {
      font-size: 2rem; } }

.contact-form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  background-color: #E8E8E8; }

#app {
  min-width: 768px;
  max-width: 1200px; }
  @media only screen and (max-width: 56.25em) {
    #app {
      min-width: inherit;
      max-width: inherit;
      width: 90%; } }

.btn--send {
  float: right; }

.contact_intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 5rem;
  text-align: left;
  font-size: 2rem;
  width: 90%; }
  @media only screen and (max-width: 56.25em) {
    .contact_intro {
      flex-direction: column;
      padding: 0 1rem; } }
  .contact_intro .colored-letter {
    font-weight: 600;
    color: #000;
    margin-right: 1vw;
    width: 40%;
    text-align: right;
    display: inline-block; }
    @media only screen and (max-width: 56.25em) {
      .contact_intro .colored-letter {
        width: 22%; } }
  .contact_intro .contact-info-container {
    display: inline-block; }
  .contact_intro .address,
  .contact_intro .mobile,
  .contact_intro .phone,
  .contact_intro .email {
    width: 100%;
    display: flex;
    color: #000; }
  .contact_intro .footer-text-link {
    text-decoration: none;
    color: #000; }

.confirmation_container {
  text-align: center;
  font-size: 2rem; }
  .confirmation_container h2 {
    font-size: 2.4rem; }
  .confirmation_container a:link, .confirmation_container a:visited {
    text-decoration: none;
    color: inherit;
    font-weight: 300;
    font-size: 2rem; }
  .confirmation_container a:hover, .confirmation_container a:active {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    font-size: 2rem; }

.input-error-style {
  border: 1px solid red !important; }

.error-message {
  color: red;
  font-weight: 600; }

.error-message-box {
  display: block;
  background-color: rgba(255, 0, 0, 0.7);
  border: 1px solid #bc0000;
  padding: 5px 10px;
  width: 90%;
  margin: 1.5rem auto;
  color: #fff;
  text-align: center;
  font-weight: 300; }

.presse-article {
  width: 100%;
  margin: 3rem auto;
  padding: 4rem 4rem;
  border: 1px solid #353535; }

.date-article {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 1.5rem; }

.auteur-article {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 1.5rem; }

.extrait-article {
  font-style: italic;
  margin-bottom: 1rem; }

.description-article {
  margin-bottom: 2rem; }

.main_internal_page_presse {
  font-size: 2rem;
  width: 70vw;
  margin: 0 auto;
  padding: 10vh 0; }
  @media only screen and (max-width: 75em) {
    .main_internal_page_presse {
      width: 90%; } }

.avis_clients {
  margin: 5vh; }

.domaines_white {
  background-color: #FFF; }

.domaines_white h2 {
  color: #000; }

.domaines h2.no-bottom-border {
  border-bottom: none; }

.google-map {
  overflow: hidden;
  padding-bottom: 56.25%;
  /* Ratio 16:9 */
  position: relative;
  height: 0;
  background-color: #FFF; }

.google-map iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute; }

.btn, .btn:link, .btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  /* 
        Il faut spécifier sur l'état initial qu'on veut des transitions lorsque les transformations 
        appliquées sur les hover et les active. 
        Là on dit que les transitions doivent s'appliquer aux transformations sur toutes les propriétés possibles
        et que ca doit durer 0,2 secondes. 
        */
  transition: all 0.2s;
  position: relative;
  font-size: 1.6rem;
  border: none;
  cursor: pointer; }

.btn:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  /* 
        Explications sur l'ombre : 
        Première valeur est la direction sur l'axe des X
        Deuxième valeur est la direction sur l'axe des Y, 
        Troisième valeur est le niveau de flou
        Quatrième valeur est la couleur (ici noir transparent à 20%)
        */ }
  .btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0; }

.btn:active, .btn:focus {
  outline: none;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.btn::after {
  /* Dans un after, il faut toujours un content même si c'est vide. */
  content: '';
  display: inline-block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s; }

.btn--white {
  background-color: #FFF;
  color: #353535; }
  .btn--white::after {
    background-color: #FFF; }

.btn--primary {
  background-color: #FFDD67;
  color: #353535; }
  .btn--primary::after {
    background-color: #FFDD67; }

.btn--animated {
  animation: moveInBottom 0.5s ease-out 0.75s;
  /* 
        Cette propriété ci-dessous permet de dire qu'on démarre en étant dans l'état 0% de l'animation.
        Cela empêche de voir le bouton au chargement de la page.  
        */
  animation-fill-mode: backwards; }

.btn-text:link, .btn-text:visited {
  background-color: #FFF;
  border-radius: 8px;
  border: 0.3rem solid #000;
  font-size: 1.8rem;
  font-weight: 500;
  color: #000;
  display: inline-block;
  text-decoration: none;
  padding: 2vh 2vw;
  display: flex; }

.btn-text:hover {
  background-color: #000;
  color: #FFF;
  /* box-shadow: 0 1rem 2rem rgba($color-black,.15); */ }

.btn-text_arrow {
  margin-left: 2vw; }

.small-btn-text:link, .small-btn-text:visited {
  background-color: #FFDD67;
  font-size: 1.6rem;
  font-weight: 500;
  color: #353535;
  display: inline-block;
  text-decoration: none;
  padding: 0.5rem 2rem;
  height: 4rem;
  margin-right: 3rem; }

.small-btn-text:hover {
  background-color: #FFDD67;
  color: #353535;
  /* box-shadow: 0 1rem 2rem rgba($color-black,.15); */ }

.form__group:not(:last-child) {
  margin-bottom: 2rem; }

.form__input {
  font-size: 1.5rem;
  font-family: inherit;
  color: inherit;
  padding: 1.5rem 2rem;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-bottom: 3px solid transparent;
  width: 100%;
  display: block;
  transition: all 0.3s; }
  .form__input:focus {
    outline: none;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #FFDD67; }
  .form__input:focus:invalid {
    border-bottom: 3px solid #353535; }
  .form__input::-webkit-input-placeholder {
    color: #666; }

.form__textarea {
  font-size: 1.5rem;
  font-family: inherit;
  color: inherit;
  padding: 1.5rem 2rem;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-bottom: 3px solid transparent;
  width: 100%;
  display: block;
  transition: all 0.3s;
  min-height: 20rem; }
  .form__textarea:focus {
    outline: none;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #FFDD67; }
  .form__textarea:focus:invalid {
    border-bottom: 3px solid #353535; }
  .form__textarea::-webkit-input-placeholder {
    color: #666; }

.form__label {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 2rem;
  margin-top: 0.7rem;
  display: block;
  transition: all 0.3s; }

.form__input:placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem); }

.form__textarea:placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem); }

.form__radio-group {
  width: 49%;
  display: inline-block; }
  @media only screen and (max-width: 56.25em) {
    .form__radio-group {
      width: 100%;
      margin-bottom: 2rem; } }

.form__radio-input {
  display: none; }

.form__radio-label {
  font-size: 1.6rem;
  cursor: pointer;
  position: relative;
  padding-left: 4.5rem; }

.form__radio-button {
  height: 3rem;
  width: 3rem;
  border: 5px solid #FFDD67;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: -0.4rem; }
  .form__radio-button::after {
    content: '';
    display: block;
    height: 1.3rem;
    width: 1.3rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFDD67;
    opacity: 0;
    transition: opacity; }

.form__radio-input:checked + .form__radio-label .form__radio-button::after {
  opacity: 1; }

.popup {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: all .3s; }
  @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
    .popup {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgba(0, 0, 0, 0.3); } }
  .popup:target {
    opacity: 1;
    visibility: visible; }
  .popup:target .popup__content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); }
  .popup__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 50rem;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
    background-color: #FFF;
    border-radius: 3px;
    display: table;
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    transition: all .4s .2s; }
  .popup__left {
    width: 33.3333333%;
    display: table-cell; }
  .popup__right {
    width: 66.6666667%;
    display: table-cell;
    vertical-align: middle;
    padding: 3rem 5rem; }
  .popup__img {
    display: block;
    width: 100%; }
  .popup__text {
    font-size: 1.4rem;
    margin-bottom: 4rem;
    column-count: 2;
    column-gap: 4rem;
    column-rule: 1px solid #D6D6D6;
    hyphens: auto; }
  .popup__close:link, .popup__close:visited {
    color: #353535;
    position: absolute;
    top: 1.5rem;
    right: 2.5rem;
    font-size: 3rem;
    text-decoration: none;
    display: inline-block;
    line-height: 1; }
  .popup__close:hover {
    color: #FFDD67; }

#cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #D6D6D6;
  text-align: center;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
  z-index: 9999; }

#cookie-consent p {
  margin: 0; }

#cookie-consent button {
  display: inline-block;
  margin: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer; }

#cookie-consent button.accept {
  background-color: #FFDD67;
  color: #353535; }

#cookie-consent button.decline {
  background-color: #E8E8E8;
  color: #353535; }

.footer {
  text-align: center; }
  .footer_logo_container {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center; }
    @media only screen and (max-width: 56.25em) {
      .footer_logo_container {
        margin-top: 0; } }
  .footer_logo {
    width: 20vw; }
    @media only screen and (max-width: 37.5em) {
      .footer_logo {
        width: 70vw; } }
  .footer_logo_baseline {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1rem; }
    @media only screen and (max-width: 37.5em) {
      .footer_logo_baseline {
        font-size: 2.4rem; } }
  .footer_cta {
    font-family: 'DMSerifDisplay';
    font-weight: 300;
    line-height: 1.2;
    font-size: 4rem; }
    @media only screen and (max-width: 56.25em) {
      .footer_cta {
        font-size: 3.5rem; } }
    .footer_cta a:link, .footer_cta a:visited {
      font-family: 'Poppins';
      display: inline-block;
      text-decoration: none;
      color: #FFF;
      font-weight: 600;
      background-color: #000;
      border-radius: 15px;
      padding: 2vh 2vw;
      margin-top: 2vh; }
    .footer_cta a:hover, .footer_cta a:active {
      background-color: #FFDD67;
      color: #000; }

.footer_container {
  margin: 0 auto;
  background-color: #FFF;
  height: 80vh;
  color: #000;
  padding: 0 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around; }
  @media only screen and (max-width: 56.25em) {
    .footer_container {
      height: 600px;
      padding: 10px;
      flex-direction: column; } }

.social_medias {
  display: flex;
  flex-direction: row;
  justify-content: center; }
  .social_medias a svg {
    color: white; }
    @media only screen and (max-width: 37.5em) {
      .social_medias a svg {
        width: 3rem; } }

.linkedin_icon {
  margin-right: 5vh; }

.info {
  text-align: center;
  font-size: 2.5rem;
  padding: 0 7vw; }
  @media only screen and (max-width: 56.25em) {
    .info {
      font-size: 2rem; } }

.contact_informations {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw;
  text-align: left;
  font-size: 2.5rem;
  height: 20vh;
  background-color: #000; }
  @media only screen and (max-width: 56.25em) {
    .contact_informations {
      flex-direction: column;
      font-size: 2.4rem;
      gap: 2rem;
      align-items: flex-start;
      height: auto;
      padding: 3vh 2vw 3vh 10vw; } }

.colored-letter {
  font-weight: 600;
  color: #F1E151;
  margin-right: 1vw; }

.address {
  display: flex;
  flex-direction: row;
  color: #FFF; }

.contact_informations .address,
.contact_informations .mobile,
.contact_informations .phone,
.contact_informations .email {
  font-family: 'DMSerifDisplay';
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  color: #FFF; }
  @media only screen and (max-width: 56.25em) {
    .contact_informations .address,
    .contact_informations .mobile,
    .contact_informations .phone,
    .contact_informations .email {
      gap: 2rem; } }

.footer_bar {
  background-color: #292929;
  height: 5vh;
  color: #D6D6D6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw; }
  @media only screen and (max-width: 56.25em) {
    .footer_bar {
      height: auto;
      padding: 10px 5px;
      flex-direction: column;
      font-size: 1.7rem; } }

.legal a:link, .legal a:visited {
  color: #D6D6D6;
  display: inline-block; }

.legal a:hover, .legal a:active {
  color: #F1E151;
  display: inline-block; }

.footer-text-link {
  text-decoration: none;
  color: #FFF; }

/* .footer {
    background-color: $color-grey-dark-3;
    padding: 10rem 0; 
    font-size: 1.4rem;

    @include respond(tab-port) {
        padding: 8rem 0;
    }

    &__logo-box {
        text-align: center;
        margin-bottom: 8rem;

        @include respond(tab-port) {
            margin-bottom: 6rem;
        }
    }

    &__logo {
        width: 15rem;
        height: auto;
    }

    &__navigation {
        border-top: 1px solid $color-grey-light; 
        padding-top: 2rem;
        display: inline-block;

        @include respond(tab-port) {
            width: 100%;
            text-align: center;
        }
    }

    &__list {
        list-style: none;
    }

    &__item {
        display: inline-block;

        &:not(:last-child) {
            margin-right: 1.5rem;
        }
    }

    &__link {
        &:link,
        &:visited {
            color: $color-grey-light;
            background-color: $color-grey-dark-3;
            text-decoration: none;
            text-transform: uppercase;
            display: inline-block;
            transition: all .2s;
        }

        &:hover,
        &:active {
            color: $color-primary;
            box-shadow: 0 1rem 2rem rgba($color-black,.4);
            transform: rotate(5deg) scale(1.3);
        }
    }

    &__copyright {
        color: $color-white;
        border-top: 1px solid $color-grey-light;
        padding-top: 2rem;
        width: 80%;
        float: right;

        @include respond(tab-port) {
            float: none;
            width: 100%;
            text-align: center;
        }
    }
} */
.row {
  max-width: 114rem;
  margin: 0 auto;
  /* Ici on sélectionne par attribut.  */ }
  .row:not(:last-child) {
    margin-bottom: 8rem; }
    @media only screen and (max-width: 56.25em) {
      .row:not(:last-child) {
        margin-bottom: 6rem; } }
  @media only screen and (max-width: 56.25em) {
    .row {
      max-width: 50rem;
      padding: 0 3rem; } }
  .row::after {
    content: "";
    display: table;
    clear: both; }
  .row [class^="col-"] {
    float: left; }
    .row [class^="col-"]:not(:last-child) {
      margin-right: 6rem; }
      @media only screen and (max-width: 56.25em) {
        .row [class^="col-"]:not(:last-child) {
          margin-right: 0;
          margin-bottom: 6rem; } }
    @media only screen and (max-width: 56.25em) {
      .row [class^="col-"] {
        width: 100% !important; } }
  .row .col-1-of-2 {
    width: calc((100% - 6rem) / 2); }
  .row .col-1-of-3 {
    width: calc((100% - 2 * 6rem) / 3); }
  .row .col-2-of-3 {
    width: calc(2 * (100% - 2 * 6rem) / 3 + 6rem); }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 6rem) / 4); }
  .row .col-2-of-4 {
    width: calc(2 * (100% - 3 * 6rem) / 4 + 6rem); }
  .row .col-3-of-4 {
    width: calc(3 * (100% - 3 * 6rem) / 4 + 2 * 6rem); }

.header {
  height: 8rem;
  background-color: #FFF;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }

.logo_container {
  margin-left: 1vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  height: 100%; }
  @media only screen and (max-width: 56.25em) {
    .logo_container {
      margin-left: 10px; } }

.logo {
  font-family: 'DMSerifDisplay';
  color: #353535;
  text-transform: uppercase;
  font-size: 2rem;
  margin-right: 1vw; }

.separator {
  font-size: 2rem;
  margin-right: 1vw;
  color: #E8E8E8; }
  @media only screen and (max-width: 37.5em) {
    .separator {
      display: none; } }

.baseline {
  font-size: 1.2rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5rem; }
  @media only screen and (max-width: 37.5em) {
    .baseline {
      display: none; } }

.navigation {
  /* Display NONE jusqu'à que le JS mediaQueryManager soit chargé et gère cela */
  display: none; }

.desktop .burger__checkbox {
  display: none; }

.desktop .burger__button {
  display: none; }

.desktop .burger__background {
  display: none; }

.desktop .navigation {
  display: block;
  height: 100%;
  /* @include respond(tab-port) {
display: none;
} */ }

.desktop .menu {
  display: flex;
  flex-direction: row;
  height: 100%;
  font-family: 'DMSerifDisplay'; }

.desktop .menu_item {
  list-style: none;
  margin-right: 2vw;
  height: 100%;
  padding: 0 1vw;
  display: flex;
  align-items: center;
  font-size: 1.7rem; }
  .desktop .menu_item.active {
    border-top: 3px solid #000; }

.desktop .menu_item_link:link, .desktop .menu_item_link:visited, .desktop .menu_item_link:hover, .desktop .menu_item_link:active {
  color: #000;
  text-decoration: none; }

.desktop .submenu {
  position: relative; }

.desktop .submenu .submenu_items {
  display: none; }

.desktop .submenu:hover .submenu_items {
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #FFF;
  top: 8rem;
  left: -5px;
  width: 20vw; }

.desktop .menu_item.active.submenu:hover .submenu_items {
  /* Petite retouche pour gérer l'espace supplémentaire crée par la présence du border-top de la rubrique active  */
  top: 7.7rem; }
  @media only screen and (max-width: 56.25em) {
    .desktop .menu_item.active.submenu:hover .submenu_items {
      top: 7.5rem; } }

.desktop .submenu_item {
  list-style: none; }
  .desktop .submenu_item_link {
    display: block;
    padding: 1vh 1vw; }
    .desktop .submenu_item_link:link, .desktop .submenu_item_link:visited {
      color: #000;
      text-decoration: none;
      background-color: #FFF; }
    .desktop .submenu_item_link:hover, .desktop .submenu_item_link:active {
      color: #FFF;
      text-decoration: none;
      background-color: #000; }

/* RECUPERATION MENU MOBILE NATOURS */
.mobile .submenu_item {
  width: 80%;
  margin: 0 auto;
  display: block;
  list-style: none;
  padding: 10px 2rem; }
  .mobile .submenu_item:not(:last-child) {
    border-bottom: 1px solid #000; }

.mobile .submenu_item_link {
  font-size: 2rem;
  font-weight: 300;
  color: #D6D6D6;
  text-decoration: none; }

.mobile .navigation {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  width: 100%;
  transition: all 1s;
  overflow: auto; }

.mobile .menu {
  width: 100%;
  /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
  margin-top: 13vh;
  list-style: none;
  text-align: center;
  font-family: 'DMSerifDisplay'; }

.mobile .menu_item {
  margin: 1rem; }

.mobile .menu_item_link:link, .mobile .menu_item_link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  /* padding: 1rem 2rem; */
  color: #FFF;
  text-decoration: none; }

.mobile .menu_item_link:hover, .mobile .menu_item_link:active {
  color: #FFDD67; }

.burger__checkbox {
  display: none; }

.burger__button {
  background-color: #FFF;
  height: 7rem;
  width: 7rem;
  position: absolute;
  top: 6px;
  right: 6px;
  /* border-radius: 50%; */
  z-index: 2000;
  text-align: center;
  cursor: pointer; }

.burger__background {
  height: 6rem;
  width: 6rem;
  /* border-radius: 50%; */
  position: absolute;
  top: 8px;
  right: 8px;
  background-image: radial-gradient(#353535, #292929);
  z-index: 1000;
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1); }

.burger__checkbox:checked ~ .burger__background {
  transform: scale(80);
  position: fixed; }

.burger__checkbox:checked ~ .navigation {
  display: block;
  opacity: 1;
  width: 100%; }

.burger__icon {
  position: relative;
  margin-top: 3.5rem; }
  .burger__icon, .burger__icon::before, .burger__icon::after {
    width: 3rem;
    height: 2px;
    background-color: #7B7B7B;
    display: inline-block; }
  .burger__icon::before, .burger__icon::after {
    content: '';
    position: absolute;
    left: 0;
    transition: all 0.2s; }
  .burger__icon::before {
    top: -0.8rem; }
  .burger__icon::after {
    top: 0.8rem; }

.burger__button:hover .burger__icon::before {
  top: -1rem; }

.burger__button:hover .burger__icon::after {
  top: 1rem; }

.burger__checkbox:checked + .burger__button .burger__icon {
  background-color: transparent; }

.burger__checkbox:checked + .burger__button {
  background-color: transparent;
  position: fixed; }

.burger__checkbox:checked + .burger__button .burger__icon::before {
  top: 0;
  transform: rotate(135deg);
  background-color: #FFF; }

.burger__checkbox:checked + .burger__button .burger__icon::after {
  top: 0;
  transform: rotate(-135deg);
  background-color: #FFF; }