:root {
    --bordeaux: #670C26 ;
    --bordeaux-light: #FA948F ;
    --bordeaux-hover: #600018 ;
    --light-grey: #f8fafc ;
    --blue-grey: #F3F3F3 ;
    --dark-grey: #1e293b ;
    --text-grey: #000 ;
    --white: #ffffff ;
    --black: #000000 ;
    --yellow-warning: #FFC686 ;
    --border-warning: #FEAB4F ;
    --text-warning: #5c4200 ;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) ;
    --radius: 20px ;
    --font-main: 'Poppins Medium' ;
    --font-secondary: 'Open Sans' ;
}

.landing-page {
    scroll-behavior: smooth ;
    font-family: var(--font-main) !important ;
	margin: 0 ;
    padding: 0 ;
    color: var(--text-grey) ;
    background-color: var(--white) ;
}

.landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4 {
    margin: 0 ;
    color: var(--dark-grey) ;
    line-height: 1.2 ;
}

.landing-page p {
    line-height: 1.6 ;
}

.landing-page section {
    scroll-margin-top: 120px ;
}

.landing-page ul {
    text-align:left;
}

.landing-page li {
    padding-bottom: 8px ;
}

.landing-page a {
    color: var(--bordeaux) ;
    text-decoration: underline ;
    transition: color 0.3s ease ;
}

.landing-page a:hover {
    color: var(--bordeaux-hover) ;
    text-decoration: none ;
}

/* 1.landing-page . Hero Section */
.landing-page .hero {
    position: relative ;
    height: 50vh ;
    min-height: 480px ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    text-align: center ;
    background-color: var(--blue-grey) ;
    color: var(--white) ;
    padding: 0 20px ;
}

.landing-page .hero-content {
    position: relative ;
    z-index: 2 ;
    max-width: 700px ;
    animation: fadeInDown 1s ease-out ;
}

.landing-page .hero h1 {
    color: var(--black) ;
    margin-bottom: 20px ;
    font-size: 3.5rem ;
    line-height: 4.5rem ;
}

.landing-page .hero h1 strong {
    color: var(--bordeaux) ;
}

.landing-page .hero p {
    font-size: 1.25rem ;
    margin-bottom: 30px ;
    opacity: 0.9 ;
}

.landing-page .hero-content2 h3 {
	text-align:center;
}

.landing-page .cta-button {
    background-color: var(--bordeaux) ;
    color: var(--white) ;
    border: none ;
    padding: 16px 32px ;
    border-radius: 50px ;
    font-weight: 600 ;
    cursor: pointer ;
    transition: transform 0.3s, background-color 0.3s ;
    text-decoration: none ;
    display: inline-block ;
    box-shadow: 0 0 48px 0 rgba(217, 131, 54, .5) ;
}

.landing-page .cta-button:hover {
    background-color: var(--bordeaux-hover) ;
    transform: scale(1.05) ;
	color:white;
}

/* 2.landing-page . Navigation flottante */
.landing-page .nav-container {
    position: relative ;
    margin-top: -40px ;
    z-index: 10 ;
    display: flex ;
    justify-content: center ;
    padding: 0 20px ;
    height: 52px ;
}

.landing-page .nav-floating {
    background: var(--white) ;
    border-radius: 50px ;
    box-shadow: var(--shadow) ;
    display: flex ;
    align-items: center ;
    gap: 8px ;
    border: 3px solid var(--white) ;
    transition: all 0s ease ;
    
}

#nav-sentinel {
  height: 0px ;
}
.landing-page .nav-floating.landing-page .sticky {
    position: fixed ;
    top: 20px ;
    left: 50% ;
    transform: translateX(-50%) ;
    backdrop-filter: blur(12px) ;
    background: rgba(255,255,255,0.85) ;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) ;
    transition: all 0.3s ease ;
    
}

.landing-page .nav-floating a {
    text-decoration: none ;
    color: var(--black) ;
    font-weight: 500 ;
    transition: all 0.3s ;
    padding: 10px 40px ;
    border-radius: 50px ;
}

.landing-page .nav-floating a:hover {
    background-color: var(--bordeaux) ;
    color: var(--white) ;
}
.landing-page .nav-floating a.active {
    background-color: var(--bordeaux) ;
    color: var(--white) ;
}

/* 3.landing-page . Section Intro Grille */
.landing-page .section-padding {
    padding: 100px 20px ;
}

.landing-page .container {
    max-width: 900px ;
    margin: 0 auto ;
}

.landing-page .grid-4 {
    display: grid ;
    grid-template-columns: repeat(2, 1fr) ;
    gap: 15px ;
    position: relative ;
    max-width: 600px ;
    margin: 50px auto 0 ;
}

.landing-page .grid-item {
    aspect-ratio: 1 ;
    background: var(--light-grey) ;
    border-radius: var(--radius) ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    padding: 24px ;
    text-align: center ;
    font-size: 1.2rem ;
    font-weight: 700 ;
    transition: background 0.3s, transform 0.3s ;
}

.landing-page .grid-item:nth-child(2),
.landing-page .grid-item:nth-child(3) {
    background: #f1f5f9 ;
}

.landing-page .grid-item:hover {
    background: #e2e8f0 ;
    transform: translateY(-5px) ;
}

.landing-page .center-icon {
    position: absolute ;
    top: 50% ;
    left: 50% ;
    transform: translate(-50%, -50%) ;
    border-radius: 100px ;
    box-shadow: var(--shadow) ;
    z-index: 5 ;
}

/* 4.landing-page . Section Titre Bi-Couleur */
.landing-page .dual-title-section {
    text-align: center ;
    max-width: 700px ;
    margin: 0 auto ;
}

.landing-page .title-bordeaux {
    font-size: 2.5rem ;
    line-height: 3.5rem ;
    font-weight: 400 ;
    color: var(--black) ; 
    margin-bottom: 5px ;
	text-align:center;
}

.landing-page #vigilant .title-bordeaux {
	text-align:left;
}

.aui .landing-page h3.title-bordeaux {
	font-family: var(--font-main) !important ;
}


.landing-page .title-bordeaux strong { 
    color: var(--bordeaux) ;
    font-weight: 600 ;
}
.landing-page .title-dark { font-size: 2.5rem ; color: var(--black) ; margin-top: 0 ; font-weight: 400 ; text-align:center;}
.landing-page .title-dark strong { color: var(--bordeaux) ; font-weight: 600 ; }

/* 5.landing-page . Banner Bordeaux */
.landing-page .banner-bordeaux {
    background: var(--bordeaux) ;
    color: var(--white) ;
    padding: 80px 20px ;
}

.landing-page .banner-flex {
    display: flex ;
    align-items: center ;
    gap: 60px ;
    max-width: 1200px ;
    margin: 0 auto ;
}

.landing-page .banner-image {
    flex: 0 0 180px ;
    border-radius: var(--radius) ;
    overflow: hidden ;
}

.landing-page .banner-image img {
    width: 100% ;
    height: 100% ;
    object-cover: cover ;
}

.landing-page .banner-content {
    flex: 1 ;
}

.landing-page .icon-row {
    display: flex ;
    flex-wrap: nowrap ;
    justify-content: space-between ;
    gap: 30px ;
    margin-top: 40px ;
}

.landing-page .icon-item {
    flex: 1 0 25% ;
    text-align: center ;
}

.landing-page .icon-box {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    height: 124px ;
    background: rgba(255, 255, 255, 0.15) ;
    padding: 16px ;
    border-radius: 16px ;
    margin-bottom: 16px ;
    transition: background 0.3s ;
}

.landing-page .icon-box svg {
    width: 64px;
    height: 64px;
}

.landing-page .icon-box:hover { background: rgba(255, 255, 255, 0.25) ; }

/* 6.landing-page . Section Texte + Warning */
.landing-page .features-grid {
    display: grid ;
    grid-template-columns: repeat(2, 1fr) ;
    gap: 30px ;
    margin-bottom: 50px ;
}

.landing-page .feature-card {
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #dadbdb;
    transition: all 0.3s ease;
}

.landing-page .feature-card:hover {
    border-color: var(--bordeaux);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}



.landing-page .feature-card-header {
    display: flex ;
    align-items: center ;
    gap: 15px ;
    margin-bottom: 15px ;
}

.landing-page .feature-card-header h4 {
    margin: 0 ;
    color: var(--bordeaux) ;
    font-size: 1.2rem ;
}

.landing-page .feature-card p {
    font-size: 0.95rem ;
    color: var(--text-grey) ;
    margin: 0 ;
    text-align: left ;
    line-height: 1.7 ;
}

.landing-page .warning-full {
    background: var(--yellow-warning) ;
    border-left: 6px solid var(--border-warning) ;
    padding: 1rem 1.5rem ;
    border-radius: 8px ;
    display: flex ;
    align-items: flex-start ;
    gap: 1rem ;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2) ;
    margin: 3.5rem 0 0 ;
    font-family: var(--font-secondary) ;
}

.landing-page .warning-text-content h4 { color: var(--text-warning) ; margin-bottom: 10px ; font-size: 1rem ; line-height: 35px ; font-weight: 900 ;}
.landing-page .warning-text-content p { color: var(--text-warning) ; margin: 0 ; font-weight: 500 ; font-size: 1rem ; line-height: 35px ; font-weight: 400 ;}
.landing-page .warning-text-content p strong { font-weight: 900 ; }

@media (max-width: 768px) {
    .landing-page .features-grid { grid-template-columns: 1fr ; }
    .landing-page .warning-full { flex-direction: column ; text-align: center ; }
}

/* 7.landing-page . Section Alternée */
.landing-page .alternating-container {
    display: flex ;
    flex-direction: column ;
    gap: 100px ;
}

.landing-page .block-row {
    display: flex ;
    align-items: flex-end ;
    gap: 60px ;
}

.landing-page .reverse { flex-direction: row-reverse ; }

.landing-page .block-image {
    flex: 1 ;
    height: 350px ;
    border-radius: var(--radius) ;
    overflow: hidden ;
    box-shadow: var(--shadow) ;
}

.landing-page .block-image img { width: 100% ; height: 100% ; object-fit: cover ; }

.landing-page .block-text { flex: 1 ; }
.landing-page .block-number { font-size: 4rem ; font-weight: 800 ; color: var(--bordeaux-light) ; display: block ; margin-bottom: 10px ; text-align:left;}

/* 8.landing-page . Banner Gris Bleuté */
.landing-page .banner-grey {
    background: var(--blue-grey) ;
    padding: 80px 20px ;
    text-align: center ;
}

/* 10.landing-page . FAQ Accordion */
.landing-page .faq-container {
    max-width: 850px ;
    margin: 60px auto 0 ;
    display: flex ;
    flex-direction: column ;
    gap: 15px ;
}

.landing-page .faq-item {
    background: transparent ;
    border: 1px solid var(--blue-grey) ;
    border-radius: 16px ;
    padding: 10px 25px ;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) ;
    cursor: pointer ;
}

/* Effet au survol */
.landing-page .faq-item:hover {
    background: var(--blue-grey) ;
    transform: translateX(10px) ;
    border-color: rgba(128, 0, 32, 0.1) ;
}

.landing-page .faq-item:hover .faq-question {
    color: var(--bordeaux) ;
    border-color: var(--bordeaux) ;
}

/* État actif (ouvert) */
.landing-page .faq-item.active {
    background: var(--white) ;
    border-color: var(--bordeaux) ;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05) ;
    transform: translateX(0) ;
    padding-bottom: 25px ;
}

.landing-page .faq-question {
    width: 100% ;
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    background: none ;
    border: none ;
    padding: 15px 0 ;
    font-size: 1.125rem ;
    font-weight: 600 ;
    cursor: pointer ;
    text-align: left ;
    transition: color 0.3s ease ;
    color: var(--black) ;
}

.landing-page .faq-icon-wrapper {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    width: 36px ;
    height: 36px ;
    background: var(--light-grey) ;
    border-radius: 50% ;
    color: var(--text-grey) ;
    transition: all 0.4s ease ;
}

.landing-page .faq-item.active .faq-icon-wrapper {
    background: var(--bordeaux) ;
    color: var(--white) ;
    transform: rotate(180deg) ;
}

.landing-page .faq-answer {
    max-height: 0 ;
    overflow: hidden ;
    color: var(--text-grey) ;
    font-size: 1rem ;
    line-height: 1.7 ;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) ;
    opacity: 0 ;
    font-weight: 400 ;
	text-align:left;
}

.landing-page .faq-item.active .faq-answer {
    max-height: 330px ;
    opacity: 1 ;
    margin-top: 10px ;
    padding-right: 40px ;
	text-align:left;
}

.landing-page .faq-item a {
    color: var(--bordeaux) ;
    text-decoration: underline ;
    font-weight: 500 ;
    transition: color 0.3s ease ;
}

.landing-page .faq-icon { transition: 0.3s ; }
.landing-page .faq-item.active .faq-icon { transform: rotate(180deg) ; }

/* 10b.landing-page . Stepper Section */
.landing-page .stepper-container {
  max-width: 900px ;
  margin: 0 auto ;
  position: relative ;
  padding-left: 80px ;
}

.landing-page .step-container__wrapper {
  opacity: 0 ;
  transform: translateY(20px) ;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) ;
  pointer-events: none ;
  max-height: 0 ;
}

.landing-page .step-container__wrapper.active {
  opacity: 1 ;
  transform: translateY(0) ;
  pointer-events: all ;
  max-height: none ;
}

.landing-page .stepper-line {
  position: absolute ;
  left: 18px ;
  top: 30px ;
  bottom: 30px ;
  width: 3px ;
  background: linear-gradient(to bottom, var(--bordeaux) 0%, rgba(128, 0, 32, 0.2) 100%) ;
  z-index: 0 ;
}

.landing-page .stepper-item {
  display: flex ;
  gap: 30px ;
  margin-bottom: 32px ;
  position: relative ;
  align-items: flex-start ;
}

.landing-page .stepper-item:last-child {
  margin-bottom: 0 ;
}

.landing-page .stepper-number {
  width: 40px ;
  height: 40px ;
  background: var(--bordeaux) ;
  color: var(--white) ;
  border-radius: 50% ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  font-size: 1.5rem ;
  font-weight: 700 ;
  flex-shrink: 0 ;
  z-index: 2 ;
  position: relative ;
  margin-left: -80px ;
  box-shadow: 0 0 0 8px #f8fafc, var(--shadow) ;
  transition: all 0.4s ease ;
}

.landing-page .stepper-item:hover .stepper-number {
  transform: scale(1.15) ;
  box-shadow: 0 0 0 12px #f8fafc, 0 15px 30px rgba(128, 0, 32, 0.3) ;
}

.landing-page .stepper-content {
  flex: 1 ;
  background: var(--white) ;
  padding: 30px ;
  border-radius: 20px ;
  border: 1px solid #f1f5f9 ;
  transition: all 0.4s ease ;
}

.landing-page .stepper-item:hover .stepper-content {
  border-color: var(--bordeaux) ;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) ;
  transform: translateX(8px) ;
}

.landing-page .stepper-content h3 {
  font-size: 1.125rem ;
  font-weight: 700 ;
  margin-bottom: 8px ;
  line-height: 2rem ;
  color: var(--black) ;
  text-align:left;
}

.landing-page .stepper-content p {
  color: var(--black) ;
  font-weight: 400 ;
  font-size: 1.125rem ;
  line-height: 2rem ;
  margin: 0 ;
  text-align:left;
}

.landing-page .stepper-content strong {
  font-weight: 700 ;
  color: var(--bordeaux) ;   
}

.landing-page .stepper-content .bullet-list {
  margin: 0 ;
  padding-left: 0 ;
}

/* 11.landing-page . Footer Banner */
.landing-page .footer-section {
    padding: 80px 0 40px ;
    background: var(--blue-grey) ;
}

.landing-page .footer-section h2 {
    text-align: center ;
    font-size: 2rem ;
    margin-bottom: 48px ;
}

.landing-page .footer-main-links {
    display: flex ;
    flex-direction: column ;
    gap: 40px ;
    margin-bottom: 80px ;
}

.landing-page .footer-link-block {
    display: flex ;
    flex-direction: column ;
    gap: 0 ;
}

.landing-page .footer-link-block h3 {
    font-size: 1.5rem ;
    line-height: 2.5rem ;
    color: var(--black) ;
    font-weight: 500 ;
    margin: 0 ;
}

.landing-page .footer-link-block a {
    font-size: 1.125rem ;
    line-height: 2.5rem ;
    color: var(--bordeaux) ;
    text-decoration: none ;
    font-weight: 400 ;
    width: fit-content ;
    position: relative ;
    transition: opacity 0.3s ;
    text-decoration: underline ;
}

.landing-page .footer-link-block a:hover {
    opacity: 0.8 ;
    text-decoration: none ;
}

.landing-page .useful-links-title {
    font-size: 1.2rem ;
    color: var(--dark-grey) ;
    margin-bottom: 25px ;
    font-weight: 600 ;
}

.landing-page .useful-links-grid {
    display: grid ;
    grid-template-columns: repeat(3, 1fr) ;
    gap: 20px ;
}

.landing-page .useful-card {
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    padding: 25px 30px ;
    background: var(--white) ;
    border-radius: 16px ;
    text-decoration: none ;
    color: var(--dark-grey) ;
    font-weight: 600 ;
    transition: all 0.3s ease ;
    border: 1px solid transparent ;
}

.landing-page .useful-card:hover {
    background: var(--white) ;
    border-color: var(--bordeaux) ;
    color: var(--bordeaux) ;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) ;
}

.landing-page .useful-card .chevron-icon {
    transition: transform 0.3s ease ;
}

.landing-page .useful-card:hover .chevron-icon {
    transform: translateX(5px) ;
}

.landing-page .footer-bottom-info {
    margin-top: 100px ;
    padding-top: 30px ;
    border-top: 1px solid #f1f5f9 ;
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    color: #94a3b8 ;
    font-size: 0.85rem ;
}

@media (max-width: 992px) {
    .landing-page .useful-links-grid {
    grid-template-columns: 1fr ;
    }
    .landing-page .footer-bottom-info {
    flex-direction: column ;
    gap: 20px ;
    text-align: center ;
    }
}

/* Animations */
@keyframes fadeInDown {
    from { opacity: 0 ; transform: translateY(-20px) ; }
    to { opacity: 1 ; transform: translateY(0) ; }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .landing-page .hero h1 { font-size: 2rem ; }
    .landing-page .grid-4 { grid-template-columns: repeat(2, 1fr) ; }
    .landing-page .banner-flex, .landing-page .warning-layout, .landing-page .block-row, .landing-page .block-row.landing-page .reverse {
    flex-direction: column ;
    grid-template-columns: 1fr ;
    gap: 40px ;
    }
    .landing-page .nav-floating { gap: 15px ; padding: 10px 20px ; font-size: 0.8rem ; }
    .landing-page .icon-row { flex-wrap: wrap ; justify-content: center ; }
}