/* latin */
  @font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2lv0tKk.woff2) format('woff2');
    unicode-range: U+0000-00FF, ...;
  }


		.carousel-item::before {
			content: '';
			  position: absolute;
			  width: 1300px;
			  height: 853px;
			  background: #161f4f;
			  border-radius: 50%;
			  top: 10%;
			  right: 48%;
			  transform: translateY(-50%) rotate(-12.27deg);
			  mix-blend-mode: multiply;
			  opacity: .74;
			  z-index: 0;
        }
		        
        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            position: relative;
            z-index: 1;
        }
        
        .navbar {
			z-index:999;
            background-color: #161f4f;
			/*border-bottom: 6px solid #b03de7;*/
            box-shadow: inset 0 -6px 0 #b03de7;
        }
        
        .carousel-item {
            height: 500px;
            background-size: cover;
            background-position: center;
        }
        
        .carousel-item:nth-child(1) {
			background-image: url('https://cosparhq.cnes.fr/assets/uploads/2021/01/slide-acciel1.jpg');
			    background-size: cover;
			    background-position: center;
        }
        
        .carousel-item:nth-child(2) {
			background-image: url('https://cosparhq.cnes.fr/assets/uploads/2022/11/Dubai-1978x550.jpg');
			    background-size: cover;
			    background-position: center;
        }
        
        .carousel-item:nth-child(3) {
			background-image: url('https://cosparhq.cnes.fr/assets/uploads/2024/04/COSPAR-BUSAN-Background-v3zoom.jpg');
			    background-size: cover;
			    background-position: center;
        }
        
        .carousel-item .container {
            position: relative;
            height: 100%;
        }
        
        .carousel-caption-custom {
            position: absolute;
            top: 35%;
            transform: translateY(-50%);
            text-align: left;
            left: 15px;
            right: auto;
            padding-left: 0;
        }
        
		.carousel-caption-custom h2 {
		  font-size: 42px;
		  font-weight: 400;
		  margin-bottom: 1rem;
		  font-family: 'Barlow Condensed', sans-serif;
		  color: #fff;
		  text-transform: uppercase;
		  text-wrap: balance;
		  max-width: 57%;
		}
        
        .carousel-caption-custom p {
  		  font-family: 'Barlow Condensed', sans-serif;
            font-size: 1.25rem;
            margin-bottom: 1.5rem;
			color:#fff;
        }
		
		.navbar-nav .nav-link {
			font-family: 'Barlow Condensed', sans-serif;
			  font-weight: 400;
			  color: #fff !important;
			  font-size: 23px;
			  text-transform: uppercase;
            padding-bottom: 8px;
            border-bottom: solid 6px  rgba(240,248,255,0);
		}

        .navbar-nav .nav-link:hover {
			background-color: rgba(240,248,255,0.09);
            border-bottom: solid 6px #d0881a!important;
            
		}

		@media (max-width: 991.98px) {
		    /* Règle pour l'ellipse du logo-section */
		    .logo-section::before {
		        right: auto; /* Supprime le décalage initial */
		        left: 50%; /* Positionne le coin gauche à 50% du parent */
		        /* Ajout de translateX(-50%) pour centrer l'ellipse,
		           en gardant le translateY(-50%) pour la verticale et le rotate() */
		        transform: translate(-70%, -50%) rotate(-12.27deg); 
		    }

		    /* Règle pour l'ellipse du carousel-item */
		    .carousel-item::before {
		        right: auto; /* Supprime le décalage initial */
		        left: 50%; /* Positionne le coin gauche à 50% du parent */
		        /* Ajout de translateX(-50%) pour centrer l'ellipse,
		           en gardant le translateY(-50%) pour la verticale et le rotate() */
		        transform: translate(-70%, -50%) rotate(-12.27deg);
		    }
			.carousel-caption-custom h2 {
			  
			  max-width: 100%;
			}
		}
		.logo svg{ width:220px; height:auto; display:block }
	    /* Animation douce de l’étoile */
	    .pulse {
	      animation: starPulse 2.8s ease-in-out infinite;
	      transform-box: fill-box;
	      transform-origin: 50% 50%;
	      filter: url(#softGlow);
	    }
	    @keyframes starPulse {
	      0%, 100% { transform: scale(0.7);   opacity: 1; }
	      40%      { transform: scale(1.2); opacity: 0.98; }
	      60%      { transform: scale(0.78); opacity: 1; }
	    }
	    /* Accessibilité : pas d’animation si l’utilisateur préfère réduire les animations */
	    @media (prefers-reduced-motion: reduce) {
	      .pulse { animation: none; }
	    }
		.btn {font-family: 'Barlow Condensed', sans-serif; padding:8px 32px;
}
		
		.btn-light {
		  --bs-btn-color: #fff;
		  --bs-btn-bg: #b03de7;
		  --bs-btn-border-color: #b03de7;
		  --bs-btn-hover-color: #fff;
		  --bs-btn-hover-bg: #6a1a91;
		  --bs-btn-hover-border-color: #6a1a91;
		  --bs-btn-focus-shadow-rgb: 211,212,213;
		  --bs-btn-active-color: fff;
		  --bs-btn-active-bg: #6a1a91;
		  --bs-btn-active-border-color: 6a1a91;
		  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		  --bs-btn-disabled-color: #fff;
		  --bs-btn-disabled-bg: #6a1a91;
		  --bs-btn-disabled-border-color: 6a1a91;
		  text-transform: uppercase;
		}
		
		/* Le carrousel sert d’ancre au positionnement */
		#mainCarousel {
		  position: relative;
		  isolation: isolate; /* important pour le mix-blend-mode */
		}
		

		/* Bande des ronds, posée au bord haut et décalée de -50% (à cheval de moitié) */
		.carousel-dots {
			--dot-size: clamp(28px, 4vw, 56px);
			  position: relative;
			  left: 0;
			  right: 0;
			  bottom: calc(0.5 * var(--dot-size));
			  z-index: 2;
			  pointer-events: none;
			  mix-blend-mode: multiply;
		}

		/* Ligne de ronds, alignée à droite mais confinée par .container */
		.carousel-dots .container { position: relative; }
		.carousel-dots .dots {
		  display: flex;
		  justify-content: flex-end;
		  gap: clamp(10px, 2vw, 16px);
		}

		/* Style des ronds */
		.carousel-dots .dot {
		  width: clamp(28px, 4vw, 56px);
		  height: clamp(28px, 4vw, 56px);
		  border-radius: 50%;
		  mix-blend-mode: multiply;
		}

		/* Optionnel : réduire/masquer sur petit écran */
		@media (max-width: 576px){
		  .carousel-dots .dot { width: 24px; height: 24px; }
		  /* ou carrément :
		  .carousel-dots { display:none; } */
		}


        .logo-section {
            background-color: #d08819;
            padding: 6px 0;
            position: relative;
            overflow: hidden;
        }
        
        .logo-section::before {
  content: '';
  position: absolute;
  width: 1300px;
  height: 853px;
  background: #fff;
  border-radius: 50%;
  top: 220%;
  right: 48%;
  transform: translateY(-50%) rotate(-12.27deg);
  opacity: 1;
  z-index: 0;}