@font-face {
  font-family: 'Press Start 2P';
  src: url('/view/img/typo/Press_Start_2P/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/view/img/typo/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/view/img/typo/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6, a, button, input, textarea {
  font-family: 'Press Start 2P', monospace, sans-serif;
}

form label {
  font-family: 'Press Start 2P', monospace, sans-serif;
  font-size: 20px;
  font-weight: 300 !important;
}

p{
  font-family: 'IBM Plex Mono', monospace, sans-serif;
  font-weight: 300;
}

p strong{
  font-weight: 700;
}

* {

  padding: 0;
  font-size: 100%;
  font-family: "IBM Plex Mono";

  scroll-behavior: smooth;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #000000;
  font-size: 16px;
}

h1 {
  margin-top: 2rem;
  margin-bottom: 2rem;

  font-size: 28px;
}

/* HEADER */
header {
  background-color: white;
  color: #110D7A;
  font-family: "Press Start 2P";
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 1000;
  height: 150px;
  top: 0;

  justify-content: center;
}

#nav-container {
  width: 100vh;
  display: flex;
  position: relative;
}

#nav-container #logo {
  position: absolute;
  height: 90px;
  width: auto;
  padding-left: 20px;
  display: flex;
  align-self: center;
}

#nav-container #inscription {
  background-color: #C90F0F;
  padding: 10px;
  color: #fffae5;
}

#nav-container #inscription:hover {
  background-color: white;
  padding: 10px;
  color: #C90F0F;
}

nav {
  padding-right: 20px;
  padding-left: 25vw;
  height: 9vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: #110D7A;
  font-size: 16px;
}

nav a:visited {
  color: #110D7A;

}

nav a:hover {
  text-decoration: underline;
}

#user-icon {
  width: 40px;
  height: 40px;
}

.background-hero{
  z-index: 100;
  width: 100%;
  margin-top: 150px;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  width: 100%;
  height: 80vh;
  margin-top: -1vh;
  margin-bottom: 10vh;
}

h1 {
  color: #C90F0F;
  font-family: "Press Start 2P";
  line-height: 1.1;
}

h2 {
  color: #C90F0F;
  font-size: 32px;
  padding: 10px;
  font-family: "Press Start 2P";
}

#connexion {
  display: flex;
  flex-direction: column;
  gap: 3vh;
  align-items: center;
  text-align: center;
  gap: 8px;
}

#connexion .bienvenue {
  font-size: 0.9rem;
  color: #110D7A;
  font-style: italic    ;
}

#connexion a {
  color: #110D7A;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s;
}

#connexion a:hover,
#connexion a:focus {
  color: #C90F0F;
  text-decoration: underline;
  outline: none;
}

nav ul {
  margin: 3vh 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 5vh;
}

nav ul li a {
  color: #110D7A;
  text-decoration: none;
}

nav ul li a:hover,
nav ul li a:focus {
  text-decoration: underline;
  outline: none;
}

/* BOUTONS */
.btn,
.btn-infos {
  display: inline-block;
  padding: 2%;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
  cursor: pointer;
  user-select: none;
  text-align: center;
}

.btn {
  background-color: #C90F0F;
  color: #fffae5;
  border: none;
}

.btn-infos {
  background-color: #4B4E6D;
  color: #fffae5;
  border: none;
  margin-left: 2%;
}

.btn:hover,
.btn:focus,
.btn-infos:hover,
.btn-infos:focus {
  transform: scale(1.03);
  filter: brightness(1.1);
  outline: none;
}

/* SECTION HISTOIRE */


#histoire-grid {
  
  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-evenly;

  padding-top: 5vh;
  padding-bottom: 5vh;

  background-color: black;
  color: #fffae6;
  text-align: left !important;
  padding: 0;

  width: 100%;

  height: 100vh;

}

#histoire-texte {

  text-align: left !important;

  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 30%;

}

.histoire-p {
  color: #fffae6 !important;
}

#histoire-image {

  display: flex;
  justify-content: center;
  align-items: center;

  width: 60%;
}

#histoire-image img {
  height: 80%;

  object-fit: cover;
}

/* CONCEPT - textes */
.contenu {
  width: 75%;
  padding: 0 20px;
  font-family: "IBM Plex Mono";
  color: #000000;
  line-height: 1.6;
}

.contenu h2 {
  color: #C90F0F;
  font-size: 24px;
  text-align: start;
  margin-bottom: 4vh;
  margin-top: 4vh;
  font-family: "Press Start 2P";
}

.contenu h5 {
  color: #000000;
  font-weight: normal;
  text-align: start;

  margin-bottom: 4vh;
}

.contenu p {
  font-size: 16px;
  text-align: justify;
  text-justify: inter-word;
}

/* CONCEPT - images */
.image {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}

.image > div {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
}

.image img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.image img:hover,
.image img:focus {
  transform: scale(1.05);
  outline: none;
}

/* COMMENTAIRES */
.commentaires {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 2rem auto;
  max-width: 1000px;
}

.commentaires li {
  padding: 1rem 1.25rem;
  transition: all 0.2s ease-in-out;
}

.commentaires li .avis-container {
  margin-left: 5%;
  width: 95%;
  height: 80%;
}

.commentaires li:hover,
.commentaires li:focus-within {
  transform: translateY(-3px);
}

/* INFOS PRATIQUES */

.info-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  }

  .info-div-1 { grid-area: 1 / 1 / 2 / 2; }
  .info-div-2 { grid-area: 1 / 2 / 2 / 3; }
  .info-div-3 {
    grid-area: 2 / 1 / 3 / 3;
    background-color: #fffae5;

  }
  .info-div-4 { grid-area: 3 / 1 / 4 / 2; }
  .info-div-5 { grid-area: 3 / 2 / 4 / 3; }
  .info-div-6 { grid-area: 4 / 1 / 5 / 2; }
  .info-div-7 { grid-area: 4 / 2 / 5 / 3; }

  .info-div-3 .info-subdiv {
    display: flex;
    align-items: center;
  }
  
  .info-div-3 .info-subdiv img {
    max-width: auto;
    height: auto;
  }

  .info-title {
    display: flex;
    align-items: center;
    gap: 25px;
  }
  
  .title-container img {
    width: 24px;
    height: 24px;
  }

/* INSCRIPTION */

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: auto;
}

form > div {
  display: flex;
  flex-direction: column;
}

form label {
  margin-bottom: 0.4rem;
  font-weight: bold;
}

form input,
form textarea {
  padding: 0.5rem;
  font-size: 1rem;
  background-color: #ffffff;
  border: 1px solid #000000;
}

.form-inscription {
  background-color: #d9d9d9;
  border: 1px solid #000000;
  padding: 5vh;
}

.inscription-main {
  background-color: #d9d9d9;
  height: 100%;
}

.form-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 5vh;
  gap: 2vh;
}

.form-actions input[type="submit"] {
  background-color: #C90F0F;

  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
}

.form-actions input[type="submit"]:hover {
  background-color: #a80d0d;
}

.form-actions a {
  color: black;
  text-decoration: underline;
  font-weight: 500;
  font-size: 16px;
}

.form-actions {
  color: black;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  font-family: 'Press Start 2P', monospace, sans-serif;
}

.form-actions a:hover {
  color: #C90F0F;
}

form label {
  color: black;
}

/*CONNEXION*/
.form-connexion {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1.2rem;
  margin: 0;
  margin-top: 5%;
  width: 50%;
}

.form-connexion div input {
  background-color: #d9d9d9;
  border: none;
}


.form-connexion div label {
  text-align: start;
}

/* FOOTER */
.footer {
  background-color: #110D7A;
  color: white !important;
  font-size: 24px;
  padding: 5vw 5vh;
  font-family: "Press Start 2P" !important;
}

.footer-content-container {
  display: flex;
  justify-content: center;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.875rem;
  align-items: start;
  margin-bottom: 1.25rem;

  font-family: "Press Start 2P" !important;

  width: 75%;
}

.footer-column h3 {
  font-size: 12px;
  line-height: 3;
  margin-bottom: 2vh;
  color: white;
}

.footer-column p,
.footer-column a {
  display: block;
  margin: 0.25rem 0;
  color: white;
  text-decoration: none;
  font-size: 0.75rem;
}

.footer-column a:hover,
.footer-column a:focus {
  text-decoration: underline;
  outline: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
  padding-top: 5vh;
}

.footer-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5vh;
}

/* SECTIONS */
.hero-section, .hero-section img {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {

  #connexion {
    flex-direction: column;
  }

  .commentaires {
    grid-template-columns: 1fr;
  }

  #histoire-grid {
    padding: 5vh;
  }

  .image {
    flex-direction: column;
    gap: 5vh;
  }

}

@media (max-width: 912px) {

  .infos-container {
    flex-direction: column !important;
    align-items: center;
  }

  .infos-container .info-container {
    width: 75%;
    margin-bottom: 5vh;
  }

  .form-actions {
    flex-direction: column;
    align-items: center;
  }

  #grid-4x4 {
    grid-template-columns: repeat(1, 1fr) !important;

  }

  nav {
    flex-direction: column;
    background-color: #ffffff !important;


    padding-right: 0px !important;


    width: 30% !important;
    height: 100%;

    position: fixed;
    top: 0px;
    right : 0px;

    padding: 1vh 1vw !important;

    justify-content: start !important;
  }

  nav a {
    width: 100%;

    padding-right: 0px !important;
    margin-left: 0vw !important;

    font-size: 12px;

     

  }

  nav a #inscription {
    font-size: 12px;
  }

  .menu-toggle {
    display: flex;
  }

  #burger-menu {
    display: inline !important;
  }

  #logo {
    height: 45px !important;
  }

}

@media (max-width: 1240px) {

  #histoire-grid {

    flex-direction: column;

    width: 100%;
  
    height: auto;

    padding-left: 24px;
    padding-right: 24px;
    margin-left: 0px;
    margin-right: 0px;

    left: 0px;

    overflow-x: hidden;

  }

  #histoire-texte {
  
    width: 80vw
  
  }

  
  #histoire-image {

    padding-top: 5vh;
    padding-bottom: 5vh;
  }

  #histoire-image img {
    width:400px;
    height: auto;
    object-fit: cover;
  }

  nav {
    flex-direction: column;
    background-color: #ffffff !important;


    padding-right: 0px !important;


    width: 30% !important;
    height: 100%;

    position: fixed;
    top: 0px;
    right : 0px;

    padding: 1vh 1vw !important;

    justify-content: start !important;
  }

  nav a {
    width: 100%;

    padding-right: 0px !important;
    margin-left: 0vw !important;

    font-size: 12px;

     

  }

  nav a #inscription {
    font-size: 12px;
  }

  .menu-toggle {
    display: flex;
  }

  #burger-menu {
    display: inline !important;
  }

  #logo {
    height: 45px !important;
  }

}

#grid-4x4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vh;
  padding: 2vh;

  background-repeat: no-repeat;
  background-size: cover;

  background-image: url("../img/fond.png");

  background-position: bottom;

  height: 60vh;

}

.connexion-container a {
  width: 20%;

}

.connexion-container {
  display: flex;
  justify-content: right;
  align-items: center;
}

.connexion-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.connexion {
  margin-top: 150px;
  padding-top: 5vh;
  margin-bottom: 150px;
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  text-align: center;
}

.main, body {
  width: 100%;
  padding: 0;
  margin: 0;

}
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 150px;
}

.buttons-discovery{
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 10vh;
  margin-top: 5vh;

  justify-content: left;
  justify-self: left;
}

.buttons-discovery a:hover {
  text-decoration: underline;
}

.comment-content {
  margin-left: 5vh;
  font-size: 12px !important;
}

.comment-container{
  gap: 5vh;
}

.logo_c_c {
  width: 60%;
  object-fit: cover;
}

.discovery{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 75%;
}

#discovery-title {
  width: 100%;
  text-align: center;

}

.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 75%;
}

.dossier {
  width: 75%;
}

.dosso1 {
  width: 100% !important;
}

#grid-4x4 .grid-item a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-discovery{
  height: 50vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;

  display: flex;
  flex-direction: column;

  align-items: center;


}

.crenaux-tarifs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 75%;
}

.crenaux-tarifs .creneau {
  width: 40vh;
  height: 40vh;

}

.crenaux-tarifs .tarifs {
  width: 40vh;
  height: 40vh;

}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 75%;
}

.footer-links img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.footer-line {
  width: 75%;
}

.crenaux, .tarifs {
  background-color: #fffae5;
}

.commentaires li{
  background-image: url("/view/img/picto/avis.svg");
  background-repeat: no-repeat;

  background-size:100%;
  background-repeat: no-repeat;
}

.concept-intro {
  background-image: url("/view/img/bannier_concept.svg");
  width: 100%;
  z-index: 100;
  height: 50vh;
  margin-top: 150px;
  margin-bottom: 4vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-repeat: no-repeat;
  background-size: cover;
}

.concept-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 150px;
}

footer p{
  color: #fffae5;
}

.btn-inscr {
  text-align: start;
  width: 20%;
  margin-top: 5vh;
}

.footer-bottom p {
  color: #fffae5;
  font-family: "Press Start 2P";
  font-size: 12px ;
}

.footer-column p {
  color: #fffae5;
  font-family: "Press Start 2P";
  font-size: 8px ;
  line-height: 5;
}

.concept-main image {
  width: 100%;
  display: flex;
}

.contenu .image {
margin-top: 15vh;}

.info-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr 2fr repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  }
  
.info-element-1 { grid-area: 1 / 1 / 2 / 2; }

.info-element-2 {
  grid-area: 2 / 1 / 3 / 2; 
  background-color: #fffae6;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.info-element-2 .info-subdiv{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.info-element-2 .info-subdiv img {
  height: 80%;
  object-fit: cover;
}

.info-element-3 { grid-area: 3 / 1 / 4 / 2; }
.info-element-4 { grid-area: 4 / 1 / 5 / 2; }

.info-div {
display: flex;
justify-content: space-between;
width: 100%;
}

.info-intro {
  background-image: url("/view/img/banniere_infos.svg");
  width: 100%;
  height: 50vh;
  z-index: 100;
  margin-bottom: 4vh;
  margin-top: 150px;
  display: flex;
  align-items: center;
  justify-content: center;

  background-repeat: no-repeat;
  background-size: cover;
}

.big-title {
  font-size: 48px;
  color: #fffae6;
}

.info-content {
  width: 100%;
}

.info-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.info-subdiv h2{
  text-align: start !important;
  margin-left: 0;
  padding-left: 0;
}

.infos-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 5vh;
  width: 75%;
}

.inscription-main {
  margin-top: 150px;
  padding-bottom: 5vh;
  padding-left: 10vh;
  padding-right: 10vh;
}

.inscription-title {
  padding-top: 5vh;
  width: 75%;
}

.form-inscription-element-5 {
  grid-column: 1 / span 2;
  width: 100% !important;
}

.form-inscription-element {
  padding-top: 2vh;
  padding-bottom: 2vh;
  width: 75%;
}

input::placeholder {
  font-family: 'IBM Plex Mono', monospace, sans-serif;
  font-size: 20px;
}

.form-inscription-element-2, .form-inscription-element-4, .form-inscription-element-7, .form-inscription-element-9 {

  margin-left: 25%;

}

.legal-main {

  margin-top: 150px;

  display: flex;
  align-items: center;
  justify-content: center;

}

.legal-submain {
  width: 75%;
}

.legal-submain h1 {
  font-size: 36px;
}

.legal-submain h2 {
  font-size: 24px;
}

.legal-grid {

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 15vh;
  grid-row-gap: 2vh;

}
    
.legal-section-1 { grid-area: 1 / 1 / 2 / 2; }
.legal-section-2 { grid-area: 1 / 2 / 2 / 3; }
.legal-section-3 { grid-area: 2 / 1 / 3 / 3; }
.legal-section-4 { grid-area: 3 / 1 / 4 / 3; }
.legal-section-5 { grid-area: 4 / 1 / 5 / 3; }
    
.legal-main .legal-submain .legal-grid .legal-section p {
  padding-left: 1vh;
}

.legal-main .legal-submain .legal-grid .legal-section h2 {
  color: #000000;
  font-size: 24px;
}

.info-subdiv img {
  height: 80%;
}

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

  nav {
    flex-direction: column;
    background-color: #ffffff !important;


    padding-right: 0px !important;


    width: 30% !important;
    height: 100%;

    position: fixed;
    top: 0px;
    right : 0px;

    padding: 1vh 1vw !important;

    justify-content: start !important;
  }

  nav a {
    width: 100%;

    padding-right: 0px !important;
    margin-left: 0vw !important;

    font-size: 12px;

  }

  nav a #inscription {
    font-size: 12px;
  }

  .menu-toggle {
    display: flex;
  }

  #burger-menu {
    display: inline !important;
  }

  #logo {
    height: 45px !important;
  }



  #grid-4x4 {


    gap: 0vh !important;
  
  }


}

.menu-toggle{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1002;
}

.menu-toggle .rectangle{
  background-color: #110D7A;
  position: absolute;
  width: 100%;
  height: 10px;

  z-index: 1002;

  right: 0;

  top: 0;

  margin-right: 20px;

  margin-top: 20px;

}

.menu-toggle .rectangle:nth-child(2) {
  top: -20px;
}

.menu-toggle .rectangle:last-child {
  top: 20px;
}

.active {
  display: none !important; 
}

#burger-menu {
  display: none;
}

.info-accueil {
  background-color: #fffae6;
  padding: 2vh;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-subdiv p {
  font-weight: 700;
}

.info-content {
  margin-bottom: 150px;
}

.info-map-area {
  display: flex;
  gap: 10vh;
  flex-direction: row;
  align-items: start !important;
}

.info-div-3 {
  padding: 2vh;
}

.info-div-1 .info-subdiv, .info-div-4 .info-subdiv, .info-div-6 .info-subdiv {

  padding-left: 10vw;
}
.info-div-2 .info-subdiv, .info-div-5 .info-subdiv, .info-div-7 .info-subdiv {
  
  padding-left: 10vw;
}

.info-div-1, .info-div-2, .info-div-4, .info-div-5, .info-div-6, .info-div-7 {
  width: 50vw;
}

.info-div-3 {
  margin-bottom: 5vh;
}

.info-div-3 {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 5vh;
  padding-bottom: 5vh;
 
}

.info-div-3 .info-title {
  left: 0;
  width: 80%;
  margin-bottom: 5vh;
}


#menu-2 {
  display: flex;
  gap: 2vw;
  flex-direction: row;
  list-style: none;
  padding-left: 10vw;
}

.messagerie-main {
  margin-top: 150px;
  margin-bottom: 150px;
  padding-left: 10vw;
  padding-right: 10vw;
}

th{
  padding: 16px;
}

td{
  padding: 16px;
}

.video-teaser {
  position: absolute;
  width: 40vw;
  offset-position: 50px 50px;

}

#nav-links {
  gap: 7vw;
}