* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}

html, body {
  height: 100%;
  overflow: hidden; /* Masquer le défilement par défaut */
}

h1 {
  font-weight: 700;
  text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

h2 {
  font-weight: 500;
}

ul {
  padding: 10px;
}

nav {
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
  width: 100%;
  z-index: 1000; /* Pour s'assurer que le nav soit au-dessus des sections */
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px);
}

nav ul {
  list-style: none;
  text-align: left;
  display: flex; /* Utilise Flexbox pour aligner les éléments */
  align-items: center; /* Aligne les éléments verticalement au centre */
}

nav ul li {
  display: inline;
  padding: 22px;
  border-right: 1px solid rgba(255, 255, 255, .25);
}

nav ul li:last-child {
  margin-left: auto; /* Pousse le dernier élément à l'extrême droite */
  border-right: none; /* Facultatif : Enlever la bordure si elle n'est pas nécessaire */
}

nav a {
  color: #333; /* Couleur du texte du menu */
  text-decoration: none;
  /*font-size: 1.2em;*/
}

nav a > li {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

nav a > li:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

a {
  text-decoration: none;
  color: white;
}

a .btn {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
a .btn:hover {
  background-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.25);
}

h1,h2,p {
  padding-bottom: 30px;
}

.card > h1, .card > h2, .card > p {
  padding-bottom: 0;
}

p {
  line-height : 1.5;
  font-weight: 100;
  font-style: normal;
}

.section {
  height: 100vh; /* Chaque section occupe 100% de la hauteur de la fenêtre */
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: center;
  font-size: 2em;
  /* padding-top: 60px; *//* Pour éviter que le contenu soit caché derrière le nav */
  color: white; /* Couleur du texte */
}

.section h2 + p {
  display: none;
}

.section h2 {
  cursor: pointer;
  transition: color 0.2s;
}

.section h2:hover {
  color: rgba(255, 255, 255, 0.5);
}

.section > p {
  margin: 0 100px;
}

/*
#section1 {
background-color: #4CAF50;
}


#section2 {
background-color: #2196F3;
}

#section3 {
background-color: #f44336;
}
*/

.spacer {
  padding: 0;
  margin: 0;
  flex-grow: 2;
}

#section-intro {
  /*background-color: #006374;*/
  background: rgb(0,99,116);
  background: radial-gradient(circle, rgba(0,99,116,1) 0%, rgba(0,43,58,1) 100%);
}

#section-intro-wallpaper-usa {
  background-image: url("../images/la-jolla-cove.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.drapeau-usa {
  width: 400px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#section1 {
  background-color: #006374; /*vert mh*/
}
#section2 {
  background-color: #002b3a; /*vert fonce mh*/
}
#section3 {
  background-color: #E2250C; /*corail #E7332A*/
}
#section4 {
  background-color: #FF4B33;
}
#section5 {
  background-color: #6D4CA7;
}
#section6 {
  background-color: #4B218E;
}
#section7 {
  background-color: #F4B5D4;
}
#section8 {
  background-color: #D81E88;
}
#section9 {
  background-color: #EDE8E6;
}
#section10 {
  background-color: #E4D8C4;
}
#section11 {
  background-color: #F4EC5B;
}
#section12 {
  background-color: #FFB43D;
}
#section13 {
  background: linear-gradient(#F0B7A5, #FFFFFF);
}
#section14 {
  background: linear-gradient(#5AD5D9, #FFFFFF);
}
#section15 {
  background: linear-gradient(#6D4CA7, #FFFFFF);
}
#section16 {
  background: linear-gradient(#E4D8C4, #FFFFFF);
}
#section17 {
  background: linear-gradient(#006374, #002b3a);
}
#section18 {
  background: linear-gradient(#002b3a, #006374);
}
#section19 {
  background: linear-gradient(#006374, #002b3a);
}
#section20x {
  background: linear-gradient(#FF4B33, #E2250C);
}
#section21x {
  background: linear-gradient(#E2250C, #FF4B33);
}

#section20 {
  background: linear-gradient(#006374, #002b3a);
}
#section21 {
  background: linear-gradient(#002b3a, #006374);
}



#section22 {
  background: linear-gradient(#6D4CA7, #4B218E);
}
#section23 {
  background: linear-gradient(#4B218E, #6D4CA7);
}

#section24 {
  background: #6D4CA7;
  background: radial-gradient(circle, rgba(109, 76, 167, 1) 0%, rgba(75, 33, 142, 1) 100%);
}

#section25 {
  background: linear-gradient(#F4B5D4, #D81E88);
}
#section26 {
  background: linear-gradient(#D81E88, #F4B5D4);
}

#section27 {
  background: #F4B5D4;
  background: radial-gradient(circle, rgba(244, 181, 212, 1) 0%, rgba(216, 30, 136, 1) 100%);
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
  color: white;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-size: 1em;
  z-index: 1000;
  display: none;
}

.footer-left, .footer-right {
  flex: 1; /* Prend toute la largeur de la div */
}

.footer-left a, .footer-right a {
  display: block; /* Transforme l'élément en bloc pour prendre toute la div */
  color: white; /* Couleur du texte du lien */
  text-decoration: none; /* Pas de soulignement sur le lien */
  padding: 10px; /* Ajout d'un peu d'espace autour du texte */
  text-align: center; /* Centre le texte */
  padding: 40px;
}

/* Définir l'animation de fondu */
@keyframes fadeIn {
from {
  opacity: 0; /* Commence transparent */
  background-color: black; /* Fond noir */
}
to {
  opacity: 1; /* Fin complètement opaque */
  background-color: transparent; /* Fin avec le fond normal */
}
}

/* Appliquer l'animation au body */
body {
  animation: fadeIn 0.7s ease-out; /* Animation de 0.7 seconde */
  background-color: black; /* Fond noir initial */
  color: black;
}

.enabled {
  background-color: red;
  background-color: rgba(255, 255, 255, 0.45);
}

.disabled {
  opacity: 0.5;
}

/* Styles pour la div popup */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  z-index: 1000;
  animation: popup-fade-in 0.5s forwards; /* Animation au moment de l'apparition */
}

/* Animation de fondu pour la popup */
@keyframes popup-fade-in {
0% {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8); /* Commence petite et invisible */
}
100% {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); /* Devient visible et à sa taille normale */
}
}

#popup-img-container { 
  position: relative;
}

#popup-img {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: var(--color-white);
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 90%;
  max-height: 90%;
  z-index: 1000;
  background-color: #fff;
}
#popup-img img {
  /*max-width: 101%;*/
  max-height: 85dvh;
  max-width: 130dvh;
  /*max-height: 85dvh;*/
}

/* Animation de fondu pour la fermeture */
@keyframes popup-fade-out {
0% {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); /* Taille normale et visible */
}
100% {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8); /* Devient petit et invisible */
}
}

/* Classe pour l'effet de fermeture */
.popup.hide {
  animation: popup-fade-out 0.5s forwards;
}

.card{
  /*background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(15px);
  margin: 40px 80px;
  padding: 40px;
  font-size: 16pt;

}

.card.btn {
  min-width: 400px;
  vertical-align: center;
  text-align: center;
}


.fulltxt{
  padding: 20px;
  margin: 0 150px;
  width: 100%;
}

.thumnail {
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 150px; /* Set a small width */
}

/* Style de l'élément contenant le texte */
/*
.fulltxt {
overflow: hidden; 
display: inline-block;
clip-path: inset(0 100% 0 0);
animation: typing 5s steps(40) 1s forwards, blink 0.75s step-end infinite;
}

/* Animation du texte qui "tape" progressivement */
@keyframes typing {
to {
  clip-path: inset(0 0 0 0);  /* Affiche tout le texte progressivement */
}
}

/* Animation du curseur clignotant */
@keyframes blink {
50% {
  border-color: transparent;
}
}



.img-shadow {
  filter: drop-shadow(5px 5px 5px #222);
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: center;
  margin: 0 60px;
}

.flex-row div {
  width: auto;
  margin: 20px;
}

.section > h1, .section > h2 {
  width: 100%;
  text-align: center;
}


#sqltheque-contexte, #sqltheque-specs-fonc, #sqltheque-specs-tech, #sqltheque-conclusion {
  display: none;
}

.nav-competences {
  border: 0;
}


/* -- CHECKBOX -- */
.checkbox-wrapper-11 {
  --text: #414856;
  --check: #4F29F0;
  --disabled: #C3C8DE;
  --border-radius: 10px;
  border-radius: var(--border-radius);
  position: relative;
  padding: 5px;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
}
.checkbox-wrapper-11 label {
  color: var(--text);
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: color 0.3s ease;
}
.checkbox-wrapper-11 label::before,
.checkbox-wrapper-11 label::after {
  content: "";
  position: absolute;
}
.checkbox-wrapper-11 label::before {
  height: 2px;
  width: 8px;
  left: -27px;
  background: var(--check);
  border-radius: 2px;
  transition: background 0.3s ease;
}
.checkbox-wrapper-11 label:after {
  height: 4px;
  width: 4px;
  top: 8px;
  left: -25px;
  border-radius: 50%;
}
.checkbox-wrapper-11 input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 15px;
  width: 15px;
  outline: none;
  border: 0;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: var(--background);
  display: grid;
  align-items: center;
}
.checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after {
  content: "";
  position: absolute;
  height: 2px;
  top: auto;
  background: var(--check);
  border-radius: 2px;
}
.checkbox-wrapper-11 input[type=checkbox]::before {
  width: 0px;
  right: 60%;
  transform-origin: right bottom;
}
.checkbox-wrapper-11 input[type=checkbox]::after {
  width: 0px;
  left: 40%;
  transform-origin: left bottom;
}
.checkbox-wrapper-11 input[type=checkbox]:checked::before {
  -webkit-animation: check-01-11 0.4s ease forwards;
  animation: check-01-11 0.4s ease forwards;
}
.checkbox-wrapper-11 input[type=checkbox]:checked::after {
  -webkit-animation: check-02-11 0.4s ease forwards;
  animation: check-02-11 0.4s ease forwards;
}
.checkbox-wrapper-11 input[type=checkbox]:checked + label {
  color: var(--disabled);
  -webkit-animation: move-11 0.3s ease 0.1s forwards;
  animation: move-11 0.3s ease 0.1s forwards;
}
.checkbox-wrapper-11 input[type=checkbox]:checked + label::before {
  background: var(--disabled);
  -webkit-animation: slice-11 0.4s ease forwards;
  animation: slice-11 0.4s ease forwards;
}
.checkbox-wrapper-11 input[type=checkbox]:checked + label::after {
  -webkit-animation: firework-11 0.5s ease forwards 0.1s;
  animation: firework-11 0.5s ease forwards 0.1s;
}

@-webkit-keyframes move-11 {
50% {
  padding-left: 8px;
  padding-right: 0px;
}
100% {
  padding-right: 4px;
}
}

@keyframes move-11 {
50% {
  padding-left: 8px;
  padding-right: 0px;
}
100% {
  padding-right: 4px;
}
}
@-webkit-keyframes slice-11 {
60% {
  width: 100%;
  left: 4px;
}
100% {
  width: 100%;
  left: -2px;
  padding-left: 0;
}
}
@keyframes slice-11 {
60% {
  width: 100%;
  left: 4px;
}
100% {
  width: 100%;
  left: -2px;
  padding-left: 0;
}
}
@-webkit-keyframes check-01-11 {
0% {
  width: 4px;
  top: auto;
  transform: rotate(0);
}
50% {
  width: 0px;
  top: auto;
  transform: rotate(0);
}
51% {
  width: 0px;
  top: 8px;
  transform: rotate(45deg);
}
100% {
  width: 5px;
  top: 8px;
  transform: rotate(45deg);
}
}
@keyframes check-01-11 {
0% {
  width: 4px;
  top: auto;
  transform: rotate(0);
}
50% {
  width: 0px;
  top: auto;
  transform: rotate(0);
}
51% {
  width: 0px;
  top: 8px;
  transform: rotate(45deg);
}
100% {
  width: 5px;
  top: 8px;
  transform: rotate(45deg);
}
}
@-webkit-keyframes check-02-11 {
0% {
  width: 4px;
  top: auto;
  transform: rotate(0);
}
50% {
  width: 0px;
  top: auto;
  transform: rotate(0);
}
51% {
  width: 0px;
  top: 8px;
  transform: rotate(-45deg);
}
100% {
  width: 10px;
  top: 8px;
  transform: rotate(-45deg);
}
}
@keyframes check-02-11 {
0% {
  width: 4px;
  top: auto;
  transform: rotate(0);
}
50% {
  width: 0px;
  top: auto;
  transform: rotate(0);
}
51% {
  width: 0px;
  top: 8px;
  transform: rotate(-45deg);
}
100% {
  width: 10px;
  top: 8px;
  transform: rotate(-45deg);
}
}
@-webkit-keyframes firework-11 {
0% {
  opacity: 1;
  box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
}
30% {
  opacity: 1;
}
100% {
  opacity: 0;
  box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
}
}
@keyframes firework-11 {
0% {
  opacity: 1;
  box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
}
30% {
  opacity: 1;
}
100% {
  opacity: 0;
  box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
}
}

/* TIMELINE */
.timeline-container {
  position: relative;
  width: 90%;
  margin: 40px auto; /* Ajout d'un espacement pour éviter les collisions */
}

/* Ligne centrale */
.timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 50%; /* Ligne parfaitement au centre */
  left: 0;
  right: 0;
  height: 4px;
  background: #007BFF;
  z-index: 1;
}

/* Événements individuels */
.event {
  position: relative;
  text-align: center;
  z-index: 2;
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Points sur la ligne */
.event::before {
  content: '';
  position: absolute;
  top: 50%; /* Aligne précisément au centre */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: #fff;
  border: 4px solid #007BFF;
  border-radius: 50%;
  z-index: 3;
}

/* Texte des événements */
.event h3 {
  font-size: 1rem;
  margin: 0;
  color: #007BFF;
}

.event p {
  font-size: 0.85rem;
  margin: 5px 0 0;
  color: #333;
  text-align: center;
}

/* Positionnement des textes (au-dessus ou en dessous) */
.event:nth-child(odd) h3,
.event:nth-child(odd) p {
  transform: translateY(-40px); /* Texte au-dessus */
}

.event:nth-child(even) h3,
.event:nth-child(even) p {
  transform: translateY(40px); /* Texte en dessous */
}

/* -------- */

.black {
  color: black;
}

#example-form{
  display: flex;
  justify-content: flex-end;
}

.fermer {
  border: 1px solid black;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.45);

  backdrop-filter: blur(15px);
  margin: 10px;
  padding: 10px 20px;
  font-size: 12pt;

}

.card.btn {
  min-width: 400px;
  vertical-align: center;
  text-align: center;
}


