/* Fonts - Clash Grotesk */
@font-face {
   font-family: 'ClashGrotesk-Variable';
   src: url('../fonts/ClashGrotesk-Variable.woff2') format('woff2'),
      url('../fonts/ClashGrotesk-Variable.woff') format('woff'),
      url('../fonts/ClashGrotesk-Variable.ttf') format('truetype');
   font-weight: 200 700;
   font-display: swap;
   font-style: normal;
}


/* ========== CSS Variable ========== */
:root {
   /* ===== Colors ===== */
   --primary-color: #ffffff;
   --secondary-color: #1e1e1e;
   --background-color: #65B0F9;

   /* ===== Font Weights ===== */
   --font-regular: 400;
   --font-medium: 500;
   --font-semi-bold: 600;
   --font-bold: 700;
   --font-extra-bold: 800;
}

/* ========== CSS Base ========== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'ClashGrotesk-Variable', sans-serif;
}

html {
   scroll-behavior: smooth;
}

body {
   width: 100%;
   min-height: 100vh;
   min-height: 100svh;
   min-height: 100dvh;
   min-height: 100lvh;
   background-color: var(--background-color);
   color: var(--secondary-color);
   font-weight: var(--font-regular);
   letter-spacing: 8%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'ClashGrotesk-Variable', sans-serif;
   font-weight: var(--font-bold);
}

p {
   font-weight: var(--font-medium);
   line-height: 1.625;
}

ul {
   list-style-type: none;
}

a {
   color: var(--secondary-color);
   text-decoration: none;
}

img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

button {
   cursor: pointer;
   border: none;
   background: none;
   display: flex;
   justify-content: center;
   align-items: center;
}

.section {
   scroll-margin: 76px;
}

.section_title {
   font-size: 1.75rem;
}

.material-symbols-outlined {
   font-size: 2.25rem;
   color: var(--secondary-color);
}

.container {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

/* ========== Header ========= */
.header {
   width: 100%;
   /* max-width: 1600px; */
   margin: 0 auto;
   padding: 20px 15px;
   background-color: var(--background-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 99;
   box-shadow: 0 5px 4px 1px rgba(25, 25, 25, 0);
   transition: box-shadow .25s ease-out;
}

.header.active {
   background-color: var(--primary-color);
   box-shadow: 0 5px 4px 1px rgba(25, 25, 25, 0.2);
}

/* ===== Logo ===== */
.header__title {
   font-size: 28px;
   font-weight: var(--font-semi-bold);
   transition: color .25s ease-out;
}

/* .header.active .header__title {
   color: var(--background-color);
} */

/* .header.active .toggle span {
   color: var(--background-color);
   transition: color .25s ease-out;
} */

/* ===== Navbar ===== */
.navbar {
   position: absolute;
   top: 76px;
   left: 0;
   right: 0;
   transform: translateX(-100%);
   transition: transform .25s ease-out;
}

.navbar.active {
   transform: translateX(0);
}

.navbar__list {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   z-index: 10;
   box-shadow: 0 5px 4px 1px rgba(25, 25, 25, 0.2);
}

.navbar__item {
   width: 100%;
}

.navbar__link {
   padding: 20px 15px;
   display: block;
   font-size: 20px;
   font-weight: var(--font-semi-bold);
   color: var(--secondary-color);
   background-color: var(--background-color);
   transition: all .25s ease-out;
}

.navbar__link:hover {
   color: var(--background-color);
   background-color: var(--secondary-color);
}

/* .header.active .navbar__link {
   color: var(--background-color);
} */

/* ========== Main =========*/
.main {
   padding: 25px 15px;
   max-width: 1500px;
   margin: 0 auto;
}

/* ========== Filter tags =========*/
.filter {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 5px;
}

.carousel__button {
   display: none;
}

.filter__list {
   display: flex;
   flex-direction: column;
   display: none;
}

.filter__div {
   width: 100%;
   border: 3px solid var(--secondary-color);
   background-color: var(--primary-color);
   border-radius: 25px;
   cursor: pointer;
}

.filter__div.active .filter__list {
   display: flex;
}

.filter__tag {
   background-color: var(--primary-color);
   border-bottom: 3px solid var(--secondary-color);
   padding: 15px;
   white-space: nowrap;
   cursor: pointer;
}

.filter__title {
   padding: 10px 15px;
}

.filter__div.active .filter__title {
   border-bottom: 3px solid var(--secondary-color);
}

.filter__tag:last-child {
   border: none;
   border-bottom-left-radius: 22px;
   border-bottom-right-radius: 22px;
}

.filter__tag.active,
.filter__tag:hover {
   background-color: var(--secondary-color);
}

.filter__tag.active .filter__tag-link,
.filter__tag:hover .filter__tag-link {
   color: var(--primary-color);
}

.filter__tag-link {
   font-size: .875rem;
   font-weight: var(--font-semi-bold);
   color: var(--secondary-color);
}

/* ========== Première section =========*/
.section:first-of-type {
   margin-top: 25px;
}

.section__container {
   display: flex;
   flex-direction: column;
   gap: 25px;
}

/* ===== Partie gauche - Master ===== */
.section__left-item {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 10px;
   background-color: var(--primary-color);
   padding: 40px;
   border-radius: 25px;
}

.left-item__title {
   font-size: 1.5rem;
}

/* ===== Tags de la formation ===== */
.left-item__tags {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.left-item__tag {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: .875rem;
   font-weight: var(--font-semi-bold);
   color: var(--secondary-color);
   background-color: var(--primary-color);
   padding: 8px 12px;
   border: 3px solid var(--secondary-color);
   border-radius: 25px;
   white-space: nowrap;
}

.left-item__tag .material-symbols-outlined {
   font-size: 1.5rem;
}

.left-item__location {
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   display: flex;
   align-items: center;
   gap: 10px;
}

.left-item__location span {
   font-size: 1.5rem;
   font-weight: var(--font-semi-bold);
}

/* ===== Description de la formation ===== */
.left-item__description {
   text-align: left;
}

/* ===== Partie droite - Formations similaires ===== */
.section__right-item {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.right-item__title {
   font-size: 1.75rem;
}

.right-item__formation-container {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 15px;
   border-radius: 25px;
}

.formation {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 15px;
   width: 100%;
   background-color: var(--primary-color);
   border-radius: 20px;
   padding: 15px;
   box-shadow: 0 5px 4px 1px rgba(25, 25, 25, 0.2);
}

.formation__title {
   font-size: 1.25rem;
}

.formation__location {
   font-size: 1.15rem;
   font-weight: var(--font-semi-bold);
   display: flex;
   align-items: center;
   gap: 5px;
}

.formation__location span {
   font-size: 2rem
}

.formation__link {
   display: inline-block;
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   color: var(--primary-color);
   background-color: var(--secondary-color);
   border: 3px solid var(--secondary-color);
   padding: 15px;
   border-radius: 25px;
   cursor: pointer;
}

.formation__link:hover {
   background-color: var(--primary-color);
   color: var(--secondary-color);
}

/* .formation__link {
   margin-right: 5px;
} */

.formation__link .material-symbols-outlined {
   font-size: 1.5rem;
}

/* ========== Deuxième section ========== */
.section__gallery {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;
   margin-top: 10px;
}

/* ===== Logo de l'établissement ===== */
.left-item__logo {
   width: auto;           
   height: auto;          
   max-width: 100%;       
   max-height: 60px;      
   object-fit: contain;   
   margin-bottom: 15px;   
   display: none;         
   align-self: flex-start;
}

.gallery {
   width: 100%;
   height: 150px;
   background-color: var(--primary-color);
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 4px 1px rgba(25, 25, 25, 0.2);
   cursor: pointer;

   transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;
}

.gallery:not(.active):hover {
   transform: translateY(-6px) scale(1.02);
   box-shadow: 0 12px 20px rgba(25, 25, 25, 0.25);
}

.gallery.active {
   grid-area: 1/1/3/3;
   height: 400px;
   cursor: pointer;
}

#tauxSelectivite,
/* #tauxSelectivite-modal, */
#tauxCadre,
/* #tauxCadre-modal, */
#diplomeOrigine,
/* #diplomeOrigine-modal, */
#salaire,
/* #salaire-modal, */
#comparaisonSexe,
/* #comparaisonSexe-modal, */
#propositionDiplomeOrigine,
/* #propositionDiplomeOrigine-modal, */
#processusSelection,
/* #processusSelection-modal, */
#repartitionDiplomeOrigine

/* #repartitionDiplomeOrigine-modal */
   {
   width: 100%;
   height: 100%;
}

/* Tous les modals sont cachés par défaut */
.gallery .modal-viz {
   display: none;
   visibility: hidden;
   width: 100%;
   height: 100%;
}

/* Affiche le modal seulement si la figure est active */
.gallery.active .modal-viz {
   display: flex;
   visibility: visible;
   justify-content: center;
   align-items: center;
}

/* Tous les non modals montré par defaut */
.gallery .non-modal {
   display: flex;
   visibility: visible;
   justify-content: center;
   align-items: center;
}

/* Ne pas affiche le non modal seulement si la figure est active */
.gallery.active .non-modal {
   display: none;
   visibility: hidden;
   width: 100%;
   height: 100%;
}

/*.modal__container {
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(25, 25, 25, 0.6);
   z-index: 99;
   place-content: center center;
}

.modal {
   position: relative;
   width: 90vw;
   max-width: 1024px;
   padding: 50px 30px;
   margin: 0 auto;
   background-color: var(--background-color);
}

.modal .modal__btn {
   position: absolute;
   top: 10px;
   right: 10px;
}

.modal .modal__btn .material-symbols-outlined {
   color: var(--background-color);
} 

.modal img {
   object-fit: contain;
}

#modalViz {
   width: 100%;
   height: 100%;
   min-height: 400px;
}*/

/* ========== Troisième section ========== */
.section:last-child {
   display: flex;
   flex-direction: column;
}

.section__map {
   width: 100%;
   max-width: 738px;
   height: 250px;
   border: none;
   border-radius: 15px;
   overflow: hidden;
   margin: 10px 0 20px 0
}

.section__detail {
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: var(--font-semi-bold);
   font-size: 1.125em;
}

.section__detail:not(:last-child) {
   margin-bottom: 10px;
}

.section__details .material-symbols-outlined {
   font-size: 1.5rem;
}

.contact {
   margin-bottom: 10px;
}

/* ========== Footer ========== */
.footer {
   width: 100%;
   padding: 25px 15px;
   text-align: center;
   background-color: var(--primary-color);
}

.footer__text {
   font-size: 1rem;
   font-weight: var(--font-medium);
   color: var(--secondary-color);
}


/* ===== Responsive ===== */
/* 540px */
@media screen and (min-width: 540px) {

   /* ==== Header ==== */
   .header {
      padding: 20px 25px;
   }

   /* ==== Navbar ==== */
   .navbar__link {
      padding: 20px 25px
   }

   /* ==== Main ==== */
   .main {
      padding: 25px;
   }

   /* ==== Deuxième section ==== */
   .gallery {
      height: 180px;
   }

   /*.modal {
      padding: 50px 60px;
   }*/

   /* ==== Troisième section ==== */
   .section__map {
      height: 350px;
   }
}

/* 640px */
@media screen and (min-width: 640px) {

   /* ==== Deuxième section ==== */
   .section__gallery {
      grid-template-columns: repeat(3, 1fr);
   }

   .gallery {
      height: 200px;
   }
   .gallery.active {
      height: 100%;
   }

   /*.modal {
      padding: 50px 60px;
   }*/
}

/* 768px */
@media screen and (min-width: 768px) {

   /* ==== Header ==== */
   .header {
      padding: 20px 40px;
   }

   /* ==== Navbar ==== */
   .navbar__link {
      padding: 20px 40px
   }

   /* ===== Main ===== */
   .main {
      padding: 40px;
   }

   /* ==== Tags ==== */
   .filter__list {
      flex-direction: row;
      flex-wrap: wrap;
      display: flex;
      gap: 15px;
   }

   .filter__div {
      display: none;
   }

   .filter__tag {
      border-radius: 25px;
      border: 3px solid var(--secondary-color);
   }

   .filter__tag.active {
      background-color: var(--secondary-color);
   }

   .filter__tag.active .filter__tag-link {
      color: var(--primary-color);
   }

   .filter__tag:last-child {
      border: 3px solid var(--secondary-color);
      border-radius: 25px;
   }

   /* ==== Deuxième section ==== */
   .right-item__formation-container {
      width: 70%;
   }

   .formation {
      width: 688px;
   }

   .gallery.active {
      height: 100%;
   }

   /*.modal {
      width: 80vh; 
      padding: 50px 80px;
      height: 65vh;
   }*/

   /* ==== Troisième section ==== */
   .section__details {
      font-size: 1.125rem;
   }

   .section__detail:not(:last-child) {
      margin-bottom: 15px;
   }

   .section__details .material-symbols-outlined {
      font-size: 2rem;
   }
}

/* 1024px */
@media screen and (min-width: 1024px) {

   /* ==== Navbar ==== */
   .toggle {
      display: none;
      pointer-events: none;
   }

   .navbar {
      position: static;
      transform: translateX(0);
   }

   .navbar__list {
      width: auto;
      flex-direction: row;
      align-items: center;
      gap: 40px;
      box-shadow: none;
   }

   .navbar__item {
      width: auto;
   }

   .navbar__link {
      display: inline;
      font-size: 1.125rem;
      padding: 0;
      background-color: transparent;
      color: var(--secondary-color);
      position: relative;
      text-decoration: none;
   }

   .navbar__link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 2px;
      background-color: var(--secondary-color);
      transition: width 0.25s ease;
   }

   .navbar__link:hover {
      color: var(--secondary-color);
      background-color: transparent;
   }

   .navbar__link:hover::after {
      width: 100%;
   }

   /* ==== Main ==== */
   .main {
      padding: 80px 40px;
   }

   /* ==== Première section ==== */
   .section__container {
      flex-direction: row;
      justify-content: space-between;
   }

   .section:first-of-type {
      margin-top: 50px;
   }

   .section__left-item {
      flex: 2;
   }

   .section__right-item {
      flex: 1;
   }

   /* ===== Partie gauche - Master ===== */
   .section__left-item {
      display: flex;
      flex-direction: column;
      gap: 20px;
   }

   .left-item__logo {
      max-height: 100px; 
      margin-bottom: 1.5rem; 
   }

   .left-item__title {
      font-size: 2.4375rem;
   }

   .left-item__description {
      text-align: start;
   }

   .left-item__tag .material-symbols-outlined {
      font-size: 1.25rem;
   }

   .formation__link {
      font-size: .875rem;
   }

   .formation {
      width: auto;
   }

   /* ===== Partie droite - Formations similaires ===== */
   .right-item__formation-container {
      width: 100%;
   }

   /* ==== Deuxième section ==== */
   .section__gallery {
      grid-template-columns: repeat(4, 1fr);
   }

   .gallery {
      height: 220px;
   }

   /*.modal {
      padding: 50px 80px;
      height: 80vh;
      height: 80svh;
   }*/

   /* ==== Troisième section ==== */
   .container__map {
      display: flex;
      justify-content: start;
      gap: 30px;
   }

   .section__map {
      width: 60%;
      height: 428px;
   }
}

/* 1320px */
@media screen and (min-width: 1320px) {

   /* ==== Main ==== */
   .main {
      padding: 80px 60px;
   }

   /* ==== Deuxième section ==== */
   .gallery {
      height: 234px;
   }
}