@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

:root {
   --iadn_dark: #213d5d;
   --iadn_light: #42b4d9;
   --iadn_lighter: #95e5ff;
}

/* Basic */
html {
   scroll-behavior: smooth;
}

.text-iadn {
   color: var(--iadn_dark);
}

.text-iadn-light {
   color: var(--iadn_light);
}

.fs-7 {
   font-size: 0.9rem !important;
   line-height: 13pt;
}

.bg-iadn {
   background: var(--iadn_dark);
}

.bg-iadn-light {
   background: var(--iadn_light);
}

.bg-iadn-lighter {
   background: var(--iadn_lighter);
   color: #fff;
}

.pointer {
   cursor: pointer;
}

.bg-white {
   background-color: #fff !important;
}

body {
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: normal;
   font-style: normal;
   background: #fff;
   margin: 0;
   color: #0f172a;
}

.complement {
   display: none;
}

.container {
   font-size: 13pt;
}

/* NAVBAR */
.navbar {
   background: #fff;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.342);
   position: sticky;
   top: 0;
   z-index: 1030;
   padding: .7rem 1rem;
}

.navbar-brand {
   font-weight: 700;
   color: var(--iadn_dark);
   font-size: clamp(1rem, 4vw, 1.5rem);
}

.navbar .nav-link {
   color: var(--iadn_dark);
   font-weight: 600;
   margin-left: .6rem;
}

.navbar .nav-link:hover {
   color: var(--iadn_light);
}

.navLogo {
   height: 40px;
   margin-right: 5px;
}

/* --- DROPDOWN (Bootstrap 5.3 compatible) --- */
.navbar .dropdown-menu {
   background: #fff;
   border: none;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
   margin-top: .5rem;
   border-radius: 6px;
   min-width: 200px;
   padding: .3rem 0;
}

.navbar .dropdown-item {
   color: var(--iadn_dark);
   font-weight: 500;
   padding: .6rem 1rem;
   transition: background 0.2s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
   background: var(--iadn_light);
   color: #fff;
}

/* PETIT INDICATEUR FLÈCHE ▼ DU DROPDOWN */
.navbar .dropdown-toggle::after {
   margin-left: .3rem;
   vertical-align: middle;
}

.header-default {
   height: 40vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   box-shadow: 0 4px 15px #111;
   margin-bottom: 20px;
}

.header-default h1 {
   color: var(--iadn_lighter);
   font-weight: 800;
   font-size: 3rem;
   text-shadow: 3px 3px 2px #333;
}

.header-default h6 {
   color: #fff;
   font-size: 1rem;
   margin-bottom: 0.5rem;
}

/* --- CAROUSEL --- */
.carousel-banner {
   position: relative;
   width: 100%;
   min-height: 50vh;
   overflow: visible !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.541);
}

.carousel-slide {
   position: relative;
   width: 100%;
   min-height: 50vh;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
}

.carousel-content {
   position: relative;
   z-index: 2;
   max-width: 720px;
   padding: 3rem 5%;
   color: #fff;
}

.carousel-content small {
   text-transform: uppercase;
   letter-spacing: 2px;
   opacity: .9;
   font-weight: 600;
}

.carousel-content h1 {
   font-size: clamp(1.8rem, 4vw, 3rem);
   font-weight: 800;
   margin: .6rem 0;
   line-height: 1.05;
   color: var(--iadn_lighter);
   text-shadow: 3px 3px 2px #333;
}

.carousel-content p {
   color: rgba(255, 255, 255, .92);
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: 1.25rem;
}

/* --- Position et style des chevrons du carrousel --- */
.carousel-control-prev,
.carousel-control-next {
   top: 50%;
   transform: translateY(-50%);
   width: 5%;
   opacity: 1;
}

/* Style des icônes (chevrons) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
   width: 2.5rem;
   height: 2.5rem;
   background-color: rgba(0, 0, 0, 0.35);
   border-radius: 50%;
   padding: 0.5rem;
   transition: all 0.3s ease;
}

/* Effet hover pour améliorer la lisibilité */
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
   background-color: rgba(0, 0, 0, 0.637);
}

/* --- VERSION MOBILE --- */
@media (max-width: 768px) {
   .carousel-banner {
      min-height: 42vh;
   }

   .carousel-slide {
      min-height: 42vh;
      justify-content: center;
      text-align: center;
   }

   .carousel-content {
      padding: 2rem 1.5rem;
      max-width: 95%;
   }

   .carousel-content h1 {
      font-size: 1.6rem;
      line-height: 1.2;
   }

   .carousel-content p {
      font-size: 0.9rem;
      line-height: 1.4;
   }

   .carousel-content .btn {
      width: 100%;
      justify-content: center;
   }

   .carousel-content .d-flex {
      flex-direction: column;
      gap: .75rem;
   }

   .carousel-control-prev,
   .carousel-control-next {
      top: 10%;
      width: 12%;
   }

   .carousel-control-prev-icon,
   .carousel-control-next-icon {
      width: 2rem;
      height: 2rem;
      padding: 0.4rem;
      background-color: rgba(0, 0, 0, 0.4);
   }
}

.carousel-item {
   touch-action: pan-y;
   -webkit-overflow-scrolling: touch;
}

.carousel-inner {
   position: relative;
   z-index: 0;
}

.text-grady {
   background: linear-gradient(to right, var(--iadn_dark), var(--iadn_light));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* === HERO BANNER === */
.hero-banner {
   position: relative;
   height: 50vh;
   width: 100%;
   display: flex;
   align-items: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.541);
}

/* Contenu */
.hero-content {
   max-width: 800px;
   color: #fff;
   text-align: left;
}

/* Sous-titre */
.banner-subtitle {
   color: #fff;
   font-size: 1rem;
   margin-bottom: 0.5rem;
}

/* Titre principal */
.banner-title {
   color: var(--iadn_lighter);
   font-weight: 800;
   font-size: 3rem;
   text-shadow: 3px 3px 2px #333;
}

/* Paragraphe */
.banner-text {
   color: #fff;
   font-size: 1.1rem;
   margin-top: 1rem;
   max-width: 600px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
   .hero-banner {
      height: 60vh;
      padding: 1rem;
   }

   .banner-title {
      font-size: 1.6rem;
   }

   .banner-text {
      font-size: 0.9rem;
   }
}

@media (max-width: 576px) {
   .banner-title {
      font-size: 1.4rem;
      line-height: 1.3;
   }

   .banner-text {
      font-size: 0.85rem;
   }
}

.btn-iadn {
   background: var(--iadn_light);
   color: #fff;
   font-weight: 500 !important;
   border-radius: 5px;
   padding: .6rem 1.05rem;
}

.btn-iadn:hover,
.btn-second-iadn:hover {
   background: var(--iadn_lighter);
   color: var(--iadn_dark);
}

.btn-second-iadn {
   background: var(--iadn_dark);
   color: #fff;
   font-weight: 500 !important;
   border-radius: 5px;
   padding: .6rem 1.05rem;
}

/* Responsive hero adjustments */
@media (max-width: 992px) {
   .carousel-banner {
      background-position: center top;
      min-height: 80vh;
   }

   .carousel-content {
      padding: 2.4rem 3%;
   }
}

@media (max-width: 576px) {
   .carousel-banner {
      min-height: 72vh;
   }

   .carousel-content {
      text-align: center;
      padding: 2rem 1.25rem;
   }

   .carousel-content h1 {
      font-size: clamp(1.6rem, 6vw, 2.2rem);
   }

   .carousel-content p {
      font-size: .98rem;
   }

   .btn-outline-iadn {
      margin-left: .5rem;
      display: inline-block;
   }
}

/* SECTIONS */
.titleSection {
   color: var(--iadn_light);
   text-align: center;
}

.subtitleSection {
   font-weight: 800;
   color: var(--iadn_dark);
}

.section-white {
   background: #fff;
   padding: 4.5rem 0 !important;
}

.section-gray {
   background: #f5f7fa;
   padding: 4.5rem 0 !important;
}

.separator {
   width: 100;
   border-top: 1px solid #eee;
   margin: 50px 0 !important;
}

/* FEATURES */
.feature-box {
   background: #fff;
   border-radius: 1rem;
   padding: 1.6rem;
   text-align: center;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   transition: transform .28s ease, box-shadow .28s ease;
   height: 100%;
}

.feature-box:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(16, 24, 40, .06);
}

.feature-box i {
   font-size: 2.4rem;
   color: var(--iadn_light);
   margin-bottom: .75rem;
}

.feature-box h4 {
   font-size: 2.25rem;
   font-weight: 700;
   color: var(--iadn_dark);
   margin-bottom: .5rem;
}

.feature-box p {
   color: #777;
}

/* FORMATS */
.format-box {
   background: var(--iadn_dark);
   border-radius: 7px;
   padding: 1.6rem;
   text-align: left;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   transition: transform .28s ease, box-shadow .28s ease;
   height: 100%;
   color: #fff;
}

.format-box i {
   font-size: 1.4rem;
   color: var(--iadn_lighter);
   margin-right: .5rem;
}

.format-box h5 {
   font-size: 1.2rem;
   font-weight: 500;
   color: var(--iadn_lighter);
   margin-bottom: .5rem;
   border-bottom: 1px dotted #eeeeee;
   padding-bottom: .75rem;
   margin-bottom: .5rem;
}

.form-select {
   color: var(--iadn_dark);
   font-weight: 500;
}

.form-select option {
   background-color: #d4f4ff;
   color: var(--iadn_dark);
   font-weight: 500;
}

.col-titre {
   text-align: center;
   padding: 10px 0;
   background-color: var(--iadn_dark);
   color: #fff;
   margin-bottom: 5px;
   border-radius: 5px;
}

.col-titre-light {
   text-align: center;
   padding: 10px 0;
   background-color: var(--iadn_light);
   color: #fff;
   margin-bottom: 5px;
   border-radius: 5px;
   font-weight: 500;
}

.calendarClasse {
   display: inline-block;
   width: 300px;
   margin: 5px 5px 0 0;
   padding: 5px;
   text-align: center;
}

.emploiDiv {
   display: inline-block;
   vertical-align: top;
   min-width: 290px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   transition: transform .28s ease, box-shadow .28s ease;
   height: 100%;
}

.emploiDiv:hover {
   transform: translateY(-6px);
   box-shadow: 0 10px 20px rgba(107, 107, 107, 0.24);
}

.labelMentions {
   color: var(--iadn_light);
   font-weight: 500;
   font-size: 1rem;
   margin-right: 5px;
}

/* CARDS (exact as you specified) */
.card {
   border: none;
   border-radius: 1rem;
   overflow: hidden;
   position: relative;
   color: white;
   height: 750px;
   /* fixed desktop height you asked */
}

@media (max-width:768px) {
   .card {
      height: auto;
   }
}

.card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
   display: block;
}

.card:hover img {
   transform: scale(1.05);
}

.card-overlay {
   position: absolute;
   inset: 0;
   margin-top: 50%;
   background: linear-gradient(to top, rgba(0, 41, 61, 1), rgba(0, 41, 61, .9), transparent);
   padding: 2rem 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: end;
   border-bottom-left-radius: 1rem;
   border-bottom-right-radius: 1rem;
}

.card-title {
   font-weight: 700;
   font-size: 1.3rem;
}

.card-title span {
   color: var(--iadn_light);
}

.card-text {
   font-size: .95rem;
   line-height: 1.5;
   margin-top: .5rem;
   color: rgba(255, 255, 255, .95);
}

.card-text strong {
   color: #fff;
}

.icon-link {
   position: absolute;
   bottom: 1.5rem;
   right: 1rem;
   color: var(--iadn_lighter);
   font-size: 1.3rem;
   transition: transform .2s;
}

.icon-link:hover {
   transform: translateY(-3px);
   color: var(--iadn_light);
}

.linky {
   display: inline-block;
   text-decoration: none;
   color: var(--iadn_light);
   transition: all .3s;

   &:hover {
      color: #a00;
      transform: scale(.97);
   }
}

/* Footer */
footer {
   background: var(--iadn_dark);
   color: #fff;
   text-align: center;
   padding: 1.4rem 1rem;
}

.logoFooter {
   height: 40px;
   margin-right: 5px;
   filter: brightness(0) invert(1);
}

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

footer a:hover {
   color: var(--iadn_light);
   text-decoration: none;
}

.nav-link-footer {
   color: #fff;
}

.nav-link-footer:hover {
   color: var(--iadn_lighter);
}

/* AOS – transitions douces et directionnelles */
[data-aos] {
   opacity: 0;
   transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

[data-aos].aos-animate {
   opacity: 1;
}


/* accessibility */
@media (prefers-reduced-motion: reduce) {
   * {
      transition: none !important;
      animation: none !important;
   }
}


/*============================================
	CARD-AGENDA
=============================================*/
.card-Agenda {
   display: flex;
   align-items: stretch;
   border: 1px solid #d4d4d4;
   border-radius: 10px;
   overflow: hidden;
   background: #ffffff;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   margin-bottom: 12px;
}

.card-Agenda-l {
   flex: 1;
   background: #f2f2f2;
   padding: 14px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.card-Agenda-l-title {
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 6px;
   color: var(--iadn_dark);
}

.card-Agenda-l-info {
   font-size: .8rem;
   color: #777;
}

.card-Agenda-r {
   font-family: "Oswald", sans-serif;
   background: #e8f2ff;
   padding: 10px;
   min-width: 80px;
   border-left: 4px solid #5fa8ff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.card-Agenda-j,
.card-Agenda-m {
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .5px;
   font-weight: 500;
}

.card-Agenda-d {
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.2;
   color: var(--iadn_dark);
}

/*-----------------------------------------------
	SCHEMA
-----------------------------------------------*/
.schema,
.schema2 {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
}

svg.connectors {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: visible;
   z-index: 1;
}

.stage-box {
   color: #fff;
   border-radius: 6px;
   padding: 16px 12px;
   text-align: center;
   font-weight: 600;
   margin-bottom: 40px;
   position: relative;
   z-index: 2;
}

.stage-box small {
   display: block;
   font-weight: 400;
   opacity: .9;
   font-size: 0.95rem;
}

.bleu1 {
   background: var(--iadn_light);
}

.bleu2 {
   background: var(--iadn_dark);
}

/*-----------------------------------------------
	FORMULAIRE DE CONTACT
-----------------------------------------------*/
.group-form {
   margin-bottom: 10px;
}

.form-label {
   margin: 0;
   font-size: 11pt;
   font-weight: 600;
   color: var(--iadn_light);
}

.link {
   color: var(--iadn_light);
   text-decoration: none;
   font-size: 11pt;
   font-weight: 500;
}

.link:hover {
   color: #a00;
}

.pointer {
   cursor: pointer;
}

#consent {
   height: 25px;
   width: 25px;
   cursor: pointer;
   margin-right: 7px;
}

/* Styles CSS pour améliorer le responsive */
.swal-mobile-container {
   z-index: 99999 !important;
}

.swal-mobile-popup {
   max-width: 90% !important;
   margin: 20px auto !important;
   font-size: 14px !important;
}

@media (max-width: 768px) {
   .swal-mobile-popup {
      width: 95% !important;
      padding: 15px !important;
   }
}

/*-----------------------------------------------
	LOADER
-----------------------------------------------*/
#Wait {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   min-height: 100vh;
   text-align: center;
   width: 100%;
   color: var(--iadn_dark);
}

#Wait section {
   margin: 40vh auto 0;
}

#Wait section div {
   font-weight: 600;
}

#Wait section span {
   color: var(--iadn_light);
}

.Div_loader {
   width: 120px;
   height: 120px;
   margin: 20px auto;
}

.Div_loader img {
   position: absolute;
   width: 80px;
   margin: 17px 0 0 -40px;
   z-index: 5;
}

.loader {
   border: 1px solid var(--iadn_light);
   border-radius: 50%;
   border-top: 1px solid var(--iadn_dark);
   width: 120px;
   height: 120px;
   -webkit-animation: loader_spin 1s linear infinite;
   animation: loader_spin 1s linear infinite;
   background: #fafafa;
}

@-webkit-keyframes loader_spin {
   0% {
      -webkit-transform: rotate(360deg);
   }

   100% {
      -webkit-transform: rotate(0deg);
   }
}

@keyframes loader_spin {
   0% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

/*-----------------------------------------------
	SCROLLBAR
-----------------------------------------------*/
::-webkit-scrollbar {
   width: 7px !important;
   height: 7px !important;
}

::-webkit-scrollbar-track {
   box-shadow: inset 0 0 3px #999;
   background: #f8f8f8;
}

::-webkit-scrollbar-thumb {
   background: var(--iadn_lighter);
}

::-webkit-scrollbar-thumb:hover {
   background: #aaa;
   cursor: grab;
}

.clignoter {
   animation: clignoter 1.5s ease-in-out infinite;
}

@keyframes clignoter {
   0%, 20% {
      opacity: 1;
   }

   50% {
      opacity: 0;
   }

   80%, 100% {
      opacity: 1;
   }
}