:root{
  --main-bg-color: #002366;
  --main-color-bg: #f5f2e2;
  --main-text: #111111;
  --secondary-color: #0137A2;
}
/* === RESET + BASE === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  background: var(--main-color-bg);
  color: var(--main-text);
}

/* === UTILS === */
.text-center { text-align: center; }
.text-white { color: #fff; }
.bg-black { background-color: #000; } .bg-blanc{background-color: #FFFFFF;}
.mt-1 { margin-top: 1rem; }
.p-2 { padding: 2rem; }

/* === SECTION PLEIN ÉCRAN === */
.fullscreen {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === IMAGE RESPONSIVE FULLSCREEN === */
.img-cover {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.text-justify{text-align: justify;}
/* === TYPO FLUIDE === */
h1 { font-size: clamp(2rem, 5vw, 4rem);font-weight: 700;color: var(--main-bg-color);}
h2{font-size: clamp(1.5rem, 4vw, 2rem);font-weight: 600;color: var(--main-bg-color);margin:50px 0 25px 25px}

h4{font-size:clamp(1.1rem, 2.1vw, 1.3rem);}
p { font-size: clamp(1rem, 2vw, 1.2rem);}
a:hover{text-decoration: none;}
.bg_bleu{ background-color: var(--main-bg-color)}
header,footer, header a, footer a, header a:hover, footer a:hover{color: var(--main-color-bg); text-decoration: none;}
footer{margin-top: 25px; margin-bottom: 25px; padding-top: 25px; padding-bottom: 25px;}
footer .row{max-width: 1400px; margin-left:auto; margin-right: auto;}
.designer, .copyright{font-size: 0.9rem; padding: 25px;}
.hr_footer{margin: 25px 20%;}
.reseaux_sociaux{width: 50%; font-size:1.5rem;}
#navbarSupportedContent .reseaux_sociaux{width: 100px;}
.nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{color:var(--main-color-bg);}
.nav-link:hover, .navbar-nav .nav-link.active:hover, .navbar-nav .nav-link.show:hover{color:var(--main-color-bg); font-weight: bold; }

.navbar-toggler{border-color: var(--main-color-bg); border-width: 2px; }
.container.text-center.langue{width: 25%;}
.switch{color:var(--main-color-bg);}
main{display:flex; flex-direction: column;}
#aero img{max-width: 100%;}
.aero-col1, .aero-col2{display: flex;  position: relative;}
.aero-col1{justify-content: center;}
.aero-col2{justify-content: right;}
.aero-img1, .aero-img2{position: absolute;}
.aero-img2{object-fit: cover;}
.defile{position:absolute; margin-top:-12vh; font-weight: 700; color: var(--main-bg-color);font-size:3rem;}
.aero-text{margin-left: 50%;position:absolute; display:flex;flex-direction: column;width: 50%;text-align: center;margin-top:-50vh}
.ticker-tape-container { overflow-x: hidden; width: 100%;display: flex;margin-left:10px;}
.basic-styling {  border-radius: 10px; padding: 2rem; color: var(--main-color-bg); font-size: 1.5rem;}
.basic-styling span { padding: 0.25rem 1rem;  border-radius: 10px;  border: 2px solid var(--main-bg-color);  background-color:var(--secondary-color);}
.aero-stitre{color: var(--main-bg-color);font-size:1.2rem;}
.pre-cta{margin-bottom: 25px;}
.cta{text-decoration: none; border: 3px solid var(--main-bg-color); background-color: none; color: var(--main-bg-color);  padding: 20px 50px; font-size: 1.5rem;transition-property: background-color; transition-duration: 500ms; }
.cta:hover, .cta:visited{text-decoration: none; background-color: var(--main-bg-color); color: var(--main-color-bg);transition-property: background-color; transition-duration: 1s; }
#reassurance,#diplome{color:var(--main-color-bg); font-size: 1.3rem; }
#reassurance p{text-align:center;}
#reassurance .bi {font-size: 3rem;}
#certificates_prof{color:var(--main-color-bg); }
.diplome svg, .diplome img{fill:#f5f2e2; width:150px; height: 150px;}
.carte{margin: 50px 25px; padding: 25px; border: solid 3px var(--main-color-bg); border-radius: 25px}
.slogan{margin: 50px 25px; font-size:1.3em;color: var(--main-bg-color);text-align:center;font-weight: 700}
.img-bump{transition: width 0.8s ease, height 0.8s ease;}
.img-bump:hover{transform: scale(1.1);}
.pdf-row, #avis{transform: scale(-1,-1); margin-top:25px;}
.menu_footer2{text-align: center;list-style-type: none;}
p.image_avis img { max-width: 100%;}
.image-pdf{max-width: 100%;margin-bottom: 50px;}
.pdf-col1{text-align: end;}
.pdf-col2{text-align: center;}
.title-pdf{font-size: 1.5rem;font-weight: bold;}
.ticker-tape {
  --direction: normal;
  --duration: 60s;
  --delay: 0s;
  --iteration-count: infinite;
  display: flex;
  gap: 1rem;
  flex: 0 0 auto;
  margin-right: 1rem;
  min-width: 100%;
  align-items: center;
  animation: marquee var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}
.atout_discord{margin-left: 20px;}
#cta-discord{margin-top: 50px; margin-bottom: 25px;}
.slogan_bas{font-size:clamp(1.5rem, 4vw, 2rem);font-weight: 600;color: var(--main-bg-color);}
/* === KEYFRAMES === */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* === MEDIA QUERIES BREAKPOINTS === */
/* Smartphones ≤ 480px */
@media screen and (max-width: 480px) {
  body { font-size: 14px; }
}

/* Mobiles larges ≤ 576px */
@media screen and (max-width: 576px) {
  #aero {margin-top: -15px !important;}
  #aero .row {flex-direction: column;}
  #aero .row>* {width: 100%;}
  .p-2 { padding: 1rem; }
  .aero-text{margin-left:10px;margin-right:10px;flex-direction:column;width:100%}
  .cta{font-size: 1em;font-weight: bold;}
  .basic-styling{font-size:1.1rem;}
  #diplome img { width: 80%; height: 80%;}
  .navbar-nav{text-align: center;}
  .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{font-size: 1.2rem;}
  .langue .row{margin-top: 10px;margin-bottom: 10px;}
  #navbarSupportedContent .reseaux_sociaux{width: 90%}
  .pdf-row{flex-direction: column;}
}

/* Tablettes ≤ 768px */
@media screen and (max-width: 768px) {
  h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
}

/* Laptops ≤ 992px */
@media screen and (max-width: 992px) {
  .container { max-width: 90%; margin: auto; }
}

/* Grands écrans ≤ 1200px */
@media screen and (max-width: 1200px) {
  body { font-size: 16px; }
}

/* Ultra-wide ≥ 1400px */
@media screen and (min-width: 1400px) {
  body { font-size: 18px; }
}