body, html {
      margin: 0;
      padding: 0;
    font-family: 'Inter', sans-serif;
      background: linear-gradient(13deg, #021F47 9.23%, #103362 61.49%, #021F47 95.9%);
    }
    
    :root
		{
			--bg-1: #0a2747; /* bleu nuit haut */
			--bg-2: #0f3461; /* bleu nuit moyen */
			--bg-3: #0a2140; /* bleu nuit bas */
			--muted: #8ea6c9; /* texte secondaire */
			--white: #ffffff;
			--line: #325780; /* lignes inputs */
		}


	
 header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #021f47;
  padding: 10px 0;
  z-index: 1000;

  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
}

header .logo {
  height: 100px;  /* adjust size as needed */
  width: auto;
}
    header h1 {
      margin: 0;
      font-size: 18px;
    }

   .heroS {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.heroS video {
  width: 100%;
  height: 90%;
  object-fit: cover;
}

.heroS .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7); /* black with 0.7 opacity */
  z-index: 1;
}

    /* Expertise Section */
    .expertise {
      background: #021f47;
      color: white;
      padding: 100px 20px;
      text-align: center;
      position: relative;
      z-index: 2; /* goes above video */
    }
p.axis-text,p.axiss-text {font-size: 17px;
}
    .expertise h2 {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .expertise p {
      font-size: 16px;
      opacity: 0.9;
    }
    
    
    .container-hero {
			max-width: 1360px;
		}
		/* ==== SECTION HERO (bios + grand titre) ==== */
		.hero {
			padding: 60px 0 40px;
			position: relative;
		}
		.hero .bio {
			max-width: 100%; /* au lieu de 520px */
			font-size: 0.95rem;
			color: #ffffff !important;
		}
		.text-right {
			text-align: right;
		}
		.bio h6 {
			text-transform: none;
			letter-spacing: 0.2px;
			margin-bottom: 0.25rem;
			color: #ffffff !important;
			font-weight: 700;
			font-size: 20px !important;
		}
		.bio small {
			color: #ffffffc;
			font-weight: 600;
			font-size: 16px !important;
		}
		.hero-people {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			gap: 48px;
		}
		.hero-people img {
			width: 470px;
			height: auto;
			object-fit: cover;
			filter: drop-shadow(0 18px 38px rgba(0,0,0,.45));
		}
		.big-title {
			font-size: clamp(76px, 3vw + 12px, 48px);
			line-height: 1.15;
			text-align: center;
			font-weight: 400;
			margin: 28px 0 0;
			color: #ffffff;
			font-style: italic;
		}
		.big-title .strong-italic {

			font-style: italic;
			font-weight: 700;
			letter-spacing: 0.2px;
		}

		/* ==== SECTION CONTACT BAR ==== */
		.contact-bar {
			/*background: linear-gradient(180deg, #0c2e55 0%, #0b2849 100%);*/
			padding: 54px 0 62px;
			border-top: 1px solid rgba(255, 255, 255, 0.04);
			border-bottom: 1px solid rgba(255, 255, 255, 0.04);
		}
		.contact-title {
			font-weight: 800;
			font-size: clamp(54px, 2.6vw, 40px);
			margin: 0 0 10px;color: white;
			font-style: italic;
		}
		.form-rail {
			display: grid;
			grid-template-columns: 1.1fr 1fr 1.2fr 1fr auto;
			gap: 18px;
		}
		@media(max-width: 991.98px) {
			.form-rail {
				grid-template-columns: 1fr 1fr;
			}
			.text-right {
				text-align: left;
			}
		}
		@media(max-width: 575.98px) {
			.form-rail {
				grid-template-columns: 1fr;
			}
		}
		.ghost-input {
			background: transparent !important;
			color: var(--white) !important;
			border: none !important;
			border-bottom: 1px solid var(--line) !important;
			border-radius: 0 !important;
			padding-left: 0;
			padding-right: 0;
			height: 48px;
		}
		.ghost-input::placeholder {
			color: #9cb3d3;
		}
		.ghost-input:focus {
			box-shadow: none;
			border-bottom-color: #bcd6ff !important;
		}
		.send-btn {
			height: 48px;
			padding: 0 22px;
			background: transparent;
			color: white;
			border: none;
			border-radius: 999px;
			font-weight: 700;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			white-space: nowrap;
		}
		.send-btn:hover {
			background: #ffffff;
			color: #0a2343;
		}

		/* ==== FOOTER ==== */
		.site-footer {
			
			padding: 26px 0 34px;
			color: #cbd8ee;
			font-size: 0.95rem;
		}
		.contact-line {
			display: flex;
			align-items: center;
			gap: 18px;
			justify-content: center;
			flex-wrap: wrap;
			color: #cfe0ff;
		}
		.contact-line i {
			opacity: .9;
		}
		.copyright {
			margin-top: 16px;
			text-align: center;
			color: #ffffff;
			font-size: 0.85rem;
		}

		/* Accessibilité focus */
		.send-btn:focus-visible,
		.ghost-input:focus-visible {
			outline: 2px solid #bcd6ff;
			outline-offset: 2px;
		}
    
    
     .section-expertise{position:relative; padding:80px 0 100px;
           background: #021f47;
     }
    .section-expertise::after{
      content:""; position:absolute; inset:0;
      box-shadow: inset 0 0 140px rgba(0,0,0,.35);
      pointer-events:none;
      
    
    }

    .kicker{
      font-weight:800;
      color:white;
      font-size: clamp(26px, 3.6vw, 40px);
      text-align:center;
      text-shadow:0 6px 22px rgba(0,0,0,.35);
      font-size: 75px;
    
    font-style: italic;
    }
    .subtitle{
      text-align:center;
      margin-top:.5rem;
    font-size: 20px; 
      color:white;
    }

    .axis{ color: white;margin-top: 40px; align-items: flex-start; }
    .axis + .axis{ margin-top: 52px; }

    .axis-media img{
      width:100%; height:auto; object-fit:cover;
      display:block; 
    }

    .axis-title{
    
    font-size: 50px;
      font-weight:800; font-style:italic;
      text-shadow:0 4px 18px rgba(0,0,0,.35);
    }
        .axiss-title{
   
   font-size: 50px;
      font-weight:800; font-style:italic;
      text-shadow:0 4px 18px rgba(0,0,0,.35);
    }

    .axis-text{
      color: var(--ink-70);
     font-size
      max-width: 42ch;
      margin: 0 39px;
    }
        .axiss-text{
      color: var(--ink-70);
     font-size
      max-width: 42ch;
      
    }

    /* === Desktop only offsets === */
    @media (min-width: 992px){
      .axis-media img{ height:auto }

      /* keep your relative shifts */
      .axis-img   { position: relative; left: 46px; }
      .axiss-img  { position: relative; right: 120px; }

      .axis-title { position: relative; right: 170px;

          font-size: 60px;
          padding-top: 70px;
        white-space: nowrap;
      }
      .axiss-title{ position: relative;
        white-space: nowrap;
          
        left: 45px;
        font-size: 60px;
        padding-top: 70px;
          
          
      }

      .axis-text  { position: relative; }
      .axiss-text { position: relative; left: 54px; 
          
          
          
      }
    }

    /* Mobile: center everything */
    @media (max-width: 991.98px){
      .axis h3, .axis p{ text-align:center }
    }
    
    
    /* HERO VIDEO SECTION */
    .heroS {
      position: sticky;
      top: 0;
      bottom:0;
      height: 100vh;

    }

    .heroS video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 90%;
      object-fit: cover;
    }

   /* .heroS h1 {
      position: absolute;
      bottom: 20%;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-size: 2.5rem;
      text-align: center;
      max-width: 80%;
      z-index: 1;
    } */

    /* STICKY SECTION THAT OVERLAPS VIDEO */
    .sticky-wrapper {
      position: relative;
    
    }

    .sticky-section {
      position: sticky;
      top: 0;
      background: rgba(10, 40, 95, 0.95); /* semi-transparent background */
      color: white;
      padding: 4rem 2rem;
      text-align: center;
      z-index: 10;
    }

    .sticky-section h2 {
      font-size: 2rem;
      margin: 0;
    }

    .sticky-section p {
      font-size: 1.1rem;
      margin-top: 0.5rem;
    }
    
    
    
    /* Make contact bar and footer full width */
.contact-bar.full-width,
.site-footer.full-width {
    width: 100%;
    padding: 2rem 0; /* optional vertical padding */
}

/* Backgrounds */
.contact-bar.full-width {
    background: linear-gradient(13deg, #021F47 9.23%, #103362 61.49%, #021F47 95.9%);
}

.site-footer.full-width {
    background-color: #021F47; /* or your desired footer color */
}


.demain {
color: #ffffff;
    text-align: center;
    font-size: 60px;
    line-height: 90%;
    font-weight: 400;
    position: relative;
    position: absolute;
    bottom: 35%;
    left: 24%;
    width: 54%;z-index: 999;
}
.demain-span {
  font-weight: 400;
  font-style: italic;
}
.demain-span2 {
  font-weight: 800;
  font-style: italic;
}
    
    
    .close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #ffffff; /* color of X */
}

.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
    /* Media query for tablets and smaller screens */
@media (max-width: 768px) {
    
    .kicker ,.axis-title, .axiss-title {
        font-size: 30px;
    }
    .axis-title, .axiss-title {
       font-size: 27px;
        margin-top: 20px;
        margin-bottom: 15px;
    }
    .demain {
        font-size: 31px;
               bottom: 15%;   left: 0%;    padding: 1px 10px;
    width: 100%;
    }
    .big-title{
        font-size: clamp(40px, 3vw + 12px, 48px);
    }
    .hero-people img {
        width: 100%;
    }
        .big-title {
        font-size: clamp(33px, 3vw + 12px, 48px);
    }
    .heroS {
       height: 47vh;
    }
    
    .section-expertise {
        padding: 20px 0 100px;
    }
    .contact-bar{
      padding: 0px;
    }
    .contact-title {
        font-size: clamp(35px, 2.6vw, 40px);
    }  
    

    .section-expertise ,.hero {
        z-index: 999999 !important;
     }
     
     .hero-people img
{
    width: 100% !important;

}

.align-items-center
 {
    gap: 20px;
}
    
}