/* 
 * Styles personnalisés pour landing2.html
 * Couleurs extraites du logo: assets/logo.jpeg
 */

:root {
  /* Couleurs principales - bleu royal de l'image */
  --brand-primary: #1d44a1;
  --brand-secondary: #3d6bc7;
  --brand-accent: #5a8ae8;
  --brand-dark: #1A1A1A;
  --brand-light: #F5F5F5;
  --brand-text-on-primary: #FFFFFF;
  --brand-text-on-light: #1A1A1A;
  --brand-text-on-dark: #FFFFFF;
}

/* Effet de pointillés en arrière-plan - Grille subtile de points bleus comme l'image */
body {
  background-color: #FFFFFF;
  position: relative;
  background-image: 
    radial-gradient(circle, rgba(29, 68, 161, 0.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(29, 68, 161, 0.06) 0.5px, transparent 0.5px);
  background-size: 40px 40px, 20px 20px;
  background-position: 0 0, 20px 20px;
  background-attachment: fixed;
}

.page-wrapper {
  background-color: transparent;
  position: relative;
}

/* Points flottants en arrière-plan - subtils */
#floating-particles {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* S'assurer que le contenu est au-dessus des points flottants */
.page-wrapper {
  position: relative;
  z-index: 1;
}

.section_home-hero,
.section_home-numbers,
.section_home-partners,
.section_home-portfolio,
.section_home-testimonials,
.section_home-perks,
.section_home-pricing,
.section_home-cta,
.section_home-faqs,
.section_home-process,
.section_home-footer {
  position: relative;
  z-index: 1;
}

/* Pour les sections avec fond sombre */
.section_home-numbers,
.section_home-cta {
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

/* Override des variables CSS existantes */
html {
  --accent: var(--brand-primary);
  --accentHighContrast: var(--brand-primary);
  --onAccent: #FFF;
}

/* Boutons principaux */
/* Animation de flottement pour les boutons */
@keyframes floatButton {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulseButton {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(29, 68, 161, 0.3);
  }
  50% {
    box-shadow: 0 6px 25px rgba(29, 68, 161, 0.5);
  }
}

/* Animation de remplissage vertical de couleur au hover */
@keyframes fillHoverVertical {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  100% {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* Boutons dans la section hero - bleu au lieu de noir */
.section_home-hero .button-secondargy {
  background-color: var(--brand-primary) !important; /* Bleu au lieu de noir */
  color: #FFFFFF !important; /* Blanc pur pour contraste maximal */
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  border: none !important;
  animation: floatButton 3s ease-in-out infinite, pulseButton 2s ease-in-out infinite !important;
  box-shadow: 0 4px 15px rgba(29, 68, 161, 0.3) !important;
}

.section_home-hero .button-secondargy:hover {
  background-color: #0a1f4d !important; /* Bleu sombre au survol */
  color: #FFFFFF !important;
  opacity: 1 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(10, 31, 77, 0.6) !important;
  animation-play-state: paused !important; /* Pause l'animation au survol */
}

/* Texte dans les boutons hero - contraste amélioré */
.section_home-hero .button-secondargy .text-block-6,
.section_home-hero .button-secondargy .text-block-7,
.section_home-hero .button-secondargy div {
  color: #FFFFFF !important; /* Blanc pur */
  font-weight: 600 !important;
}

/* Masquer le point orange dans les boutons hero */
.section_home-hero .button-secondargy .dot.is-yellow {
  display: none !important;
}

/* Boutons généraux (hors hero) - gardent le style noir */
.button-secondargy {
  background-color: #1A1A1A !important; /* Noir pour meilleur contraste */
  color: #FFFFFF !important; /* Blanc pur pour contraste maximal */
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.button-secondargy:hover {
  background-color: #0a1f4d !important; /* Bleu sombre au survol */
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Texte dans les boutons généraux - contraste amélioré */
.button-secondargy .text-block-6,
.button-secondargy .text-block-7,
.button-secondargy div {
  color: #FFFFFF !important; /* Blanc pur */
  font-weight: 600 !important;
}

/* Point dans les boutons généraux - contraste amélioré */
.button-secondargy .dot.is-yellow {
  background-color: #FFFFFF !important; /* Blanc pour visibilité sur fond noir */
  width: 8px !important;
  height: 8px !important;
}

/* Section tarifs - Boutons avec meilleur contraste */
/* Boutons blancs pour Pack Croissance et Pack Multi-Canaux */
.section_home-pricing .button-pricing.on-short-form {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-weight: 700 !important;
}

.section_home-pricing .button-pricing.on-short-form:hover {
  background-color: #0a1f4d !important; /* Bleu sombre au survol */
  color: #FFFFFF !important;
  border-color: #0a1f4d !important;
}

/* Texte "Commencer maintenant" dans les boutons blancs */
.section_home-pricing .button-pricing.on-short-form div,
.section_home-pricing .button-pricing.on-short-form div[link],
.section_home-pricing .button-pricing.on-short-form > div {
  color: #000000 !important; /* Noir pur pour contraste maximal */
  font-weight: 700 !important;
  opacity: 1 !important;
  font-size: 1rem !important;
  text-shadow: none !important;
}

/* Texte blanc au hover pour les boutons blancs */
.section_home-pricing .button-pricing.on-short-form:hover div,
.section_home-pricing .button-pricing.on-short-form:hover div[link],
.section_home-pricing .button-pricing.on-short-form:hover > div {
  color: #FFFFFF !important; /* Blanc au hover */
}

/* Point dans les boutons blancs */
.section_home-pricing .button-pricing.on-short-form .dot.is-white {
  background-color: #000000 !important; /* Noir pour visibilité sur fond blanc */
}

/* Bouton noir pour Pack HyperCroissance (carte du milieu) */
.section_home-pricing .button-pricing.main {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700 !important;
}

.section_home-pricing .button-pricing.main:hover {
  background-color: #0a1f4d !important; /* Bleu sombre au survol */
  color: #FFFFFF !important;
}

/* Texte "Commencer maintenant" dans le bouton noir */
.section_home-pricing .button-pricing.main div,
.section_home-pricing .button-pricing.main div[link],
.section_home-pricing .button-pricing.main > div {
  color: #FFFFFF !important; /* Blanc pur */
  font-weight: 700 !important;
  opacity: 1 !important;
  font-size: 1rem !important;
  text-shadow: none !important;
}

/* Point dans le bouton noir */
.section_home-pricing .button-pricing.main .dot {
  background-color: #FFFFFF !important; /* Blanc pour visibilité sur fond noir */
}

/* Point dans les boutons - bleu au lieu d'orange */
.dot.is-yellow {
  background-color: var(--brand-primary) !important; /* Bleu au lieu d'orange */
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important; /* Gradient bleu au lieu d'orange */
}

/* Navigation sticky */
.sticky-nav {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.sticky-nav-link {
  color: var(--brand-dark) !important;
}

.sticky-nav-link:hover {
  color: var(--brand-primary) !important;
}

/* Navigation principale */
/* Navbar fusionnée avec le hero - pas de fond blanc */
.navbar {
  background-color: transparent !important;
  background: transparent !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Supprimer tout fond blanc de la navbar */
.navbar .padding-global,
.navbar .navigation-wrapper,
.navbar .container-large,
.navbar .container-medium,
.navbar .container-small {
  background: transparent !important;
}

/* Logo dans la navbar - visible sur le fond du hero */
.navbar .w-nav-brand,
.navbar .brand,
.navbar .logo,
.navbar img.logo {
  position: relative;
  z-index: 101;
  background: transparent !important;
}

/* S'assurer que le hero s'étend jusqu'en haut sur tous les écrans */
.page-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

html {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.nav-link-3 {
  color: var(--brand-dark) !important;
}

.nav-link-3:hover {
  color: var(--brand-primary) !important;
}

/* Section hero - Fond blanc avec pointillés en arrière-plan */
.section_home-hero {
  background: #FFFFFF !important;
  color: var(--brand-text-on-light);
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 4rem !important;
  min-height: 100vh;
  overflow: visible;
}

/* Le hero doit commencer dès le tout début de la page */
.section_home-hero .padding-global {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ajuster le contenu du hero pour laisser de l'espace pour la navbar */
.section_home-hero .container-large,
.section_home-hero .container-medium {
  padding-top: 6rem !important; /* Espace pour la navbar flottante */
}

/* Effet de flottement au survol - accélération */
.section_home-hero:hover {
  animation-duration: 15s;
}

/* Sur mobile, ajustements supplémentaires */
@media (max-width: 768px) {
  .section_home-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 100vh;
    padding-bottom: 2rem !important;
  }
  
  .section_home-hero .container-large,
  .section_home-hero .container-medium {
    padding-top: 5rem !important; /* Moins d'espace sur mobile */
  }
  
  .navbar {
    position: absolute !important;
    top: 0 !important;
    z-index: 100;
    background-color: transparent !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  /* Le logo doit être visible sur le fond du hero */
  .navbar .w-nav-brand,
  .navbar .brand,
  .navbar .logo,
  .navbar img.logo {
    position: relative;
    z-index: 101;
  }
}

/* ============================================
   RESPONSIVE MOBILE DU HERO - AMÉLIORATIONS
   ============================================ */

/* Section hero principale */
.head_section {
  width: 100% !important;
  padding: 1rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Wrapper principal du hero */
.head_section .wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 1rem !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Heading wrapper - ajustements mobile */
.heading_wrapper {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
}

/* Barre du haut - responsive */
.head_bar_top {
  width: 100% !important;
  padding: 0.5rem 0 !important;
  margin-bottom: 1rem !important;
  text-align: center !important;
}

.head_bar_top_texte {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  padding: 0.5rem 1rem !important;
  display: inline-block !important;
}

/* Titre principal - responsive mobile */
.heading_1 {
  font-size: 2rem !important;
  line-height: 1.3 !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 1rem !important;
  text-align: center !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -moz-hyphens: auto !important;
}

.heading_1 .is_violet {
  display: inline !important;
  margin-bottom: 0 !important;
  white-space: normal !important;
}

/* Texte sous le titre - responsive */
.texte_sous {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 1rem !important;
  text-align: center !important;
  max-width: 100% !important;
}

/* Boutons - responsive mobile */
.bouton_primary {
  width: 100% !important;
  max-width: 100% !important;
  padding: 1rem 1.5rem !important;
  margin: 0.75rem 0 !important;
  font-size: 1rem !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.bouton_primary_texte {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
  flex: 1 !important;
}

.arrow-bouton {
  width: 20px !important;
  height: 20px !important;
  margin-left: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Wrapper des bénéfices - responsive */
.benefice_wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
  padding: 1rem 0 !important;
  margin: 1.5rem 0 !important;
}

.benefice_wrapper_solo {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

.texte_block {
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

/* Video wrapper - responsive */
.video_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.video_wrapper .w-embed {
  width: 100% !important;
  padding: 0 !important;
}

.video_wrapper iframe {
  width: 100% !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: 400px !important;
  border-radius: 12px !important;
}

/* Padding responsive */
.padding_xxsmall {
  height: 0.5rem !important;
}

.padding_xsmall {
  height: 1rem !important;
}

/* Classes de visibilité mobile */
.is_hidden_mobile {
  display: none !important;
}

.is_mobile {
  display: block !important;
}

/* Media queries spécifiques pour différentes tailles d'écran */
@media (max-width: 480px) {
  .heading_1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    padding: 0 1rem !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  
  .heading_1 .is_violet {
    display: inline !important;
  }
  
  .head_bar_top_texte {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.75rem !important;
  }
  
  .texte_sous {
    font-size: 0.9rem !important;
    padding: 0 0.5rem !important;
  }
  
  .bouton_primary {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.95rem !important;
  }
  
  .bouton_primary_texte {
    font-size: 0.95rem !important;
  }
  
  .benefice_wrapper {
    gap: 0.75rem !important;
    padding: 0.75rem 0 !important;
  }
  
  .benefice_wrapper_solo {
    gap: 0.5rem !important;
  }
  
  .texte_block {
    font-size: 0.85rem !important;
  }
  
  .video_wrapper iframe {
    min-height: 180px !important;
    max-height: 300px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .heading_1 {
    font-size: 2.25rem !important;
    line-height: 1.3 !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  
  .heading_1 .is_violet {
    display: inline !important;
  }
  
  .texte_sous {
    font-size: 1.05rem !important;
  }
  
  .bouton_primary {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .benefice_wrapper {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .benefice_wrapper_solo {
    flex: 0 0 auto !important;
    min-width: 150px !important;
  }
}

/* Amélioration pour les très petits écrans */
@media (max-width: 360px) {
  .heading_1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    padding: 0 0.75rem !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  
  .heading_1 .is_violet {
    display: inline !important;
  }
  
  .head_section .wrapper {
    padding: 0 0.75rem !important;
  }
  
  .bouton_primary {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  .video_wrapper iframe {
    min-height: 160px !important;
    max-height: 250px !important;
  }
}

/* Desktop - masquer les éléments mobile */
@media (min-width: 769px) {
  .is_mobile {
    display: none !important;
  }
  
  .is_hidden_mobile {
    display: block !important;
  }
  
  .benefice_wrapper {
    flex-direction: row !important;
    justify-content: center !important;
  }
}

.section_home-hero h1,
.section_home-hero h2,
.section_home-hero h3,
.section_home-hero h4,
.section_home-hero h5,
.section_home-hero h6 {
  color: var(--brand-primary) !important; /* Bleu pour les titres */
  font-weight: 700;
}

.section_home-hero h1,
.section_home-hero h2,
.section_home-hero h3,
.section_home-hero h4,
.section_home-hero h5,
.section_home-hero h6 {
  color: var(--brand-primary) !important; /* Bleu pour les titres */
  font-weight: 700;
}

.section_home-hero p,
.section_home-hero .max-width-48rem {
  color: #1A1A1A !important; /* Noir pour le paragraphe descriptif */
  line-height: 1.6;
}

.section_home-hero div,
.section_home-hero span {
  color: var(--brand-primary) !important; /* Bleu pour les autres éléments */
}

/* Titres - contraste amélioré */
h1, h2 {
  color: var(--brand-text-on-light);
  font-weight: 700;
}

h1 {
  color: #0A0A0A;
}

h2 {
  color: #1A1A1A;
}

/* Textes sur fond clair */
p, div, span, .text-size-small, .text-size-medium {
  color: var(--brand-text-on-light);
}

/* Textes sur fond sombre */
.section_home-numbers p,
.section_home-numbers div,
.section_home-numbers span,
.section_home-cta p,
.section_home-cta div,
.section_home-cta span {
  color: var(--brand-text-on-primary) !important;
}

/* Liens - contraste amélioré */
a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}

/* Liens sur fond sombre */
.section_home-numbers a,
.section_home-cta a {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: underline;
}

.section_home-numbers a:hover,
.section_home-cta a:hover {
  color: #FFFFFF !important;
  text-decoration: none;
}

/* Section résultats/statistiques */
.section_home-numbers {
  background-color: var(--brand-primary);
  color: var(--brand-text-on-primary);
}

.home_numbers-banner {
  background-color: var(--brand-primary);
  color: var(--brand-text-on-primary);
}

.results-numbers {
  color: #FFFFFF !important; /* Blanc à 100% - opacité complète */
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  opacity: 1 !important;
}

.section_home-numbers h2,
.section_home-numbers div,
.section_home-numbers .text-size-medium {
  color: #FFFFFF !important; /* Blanc à 100% - opacité complète */
  opacity: 1 !important;
}

.section_home-numbers .and-counting {
  color: #FFFFFF !important; /* Blanc à 100% - opacité complète */
  opacity: 1 !important;
}

/* Tous les textes de la section nombres - blanc à 100% */
.section_home-numbers p,
.section_home-numbers span,
.section_home-numbers .text-block,
.section_home-numbers .text-size-large,
.section_home-numbers .text-size-small {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Section partenaires */
.section_home-partners {
  background-color: transparent !important;
  color: var(--brand-text-on-light);
}

.section_home-partners h2,
.section_home-partners .text-size-medium,
.section_home-partners .text-color-grey {
  color: var(--brand-text-on-light);
}

.section_home-partners .text-color-grey {
  color: #5B5B5B !important;
}

/* Centrer horizontalement uniquement (axe X) la section partenaires */
.track-partners {
  margin-left: auto;
  margin-right: auto;
}

/* Afficher immédiatement le bouton Commencer dans la section process */
.section_home-process .hero_buttons-wrapper[data-w-id="8901ac68-0ba4-787f-547c-183ccd41f815"] {
  opacity: 1 !important;
}

/* Section portfolio */
.section_home-portfolio {
  background-color: #FFFFFF;
}


/* Section témoignages */
.section_home-testimonials {
  background-color: #FFFFFF;
  color: var(--brand-text-on-light);
}

.section_home-testimonials h2,
.section_home-testimonials p,
.section_home-testimonials .testimonial-author {
  color: var(--brand-text-on-light);
}

.section_home-testimonials p {
  color: #2A2A2A;
  line-height: 1.7;
}

.section_home-testimonials .testimonial-author {
  color: #5B5B5B;
  font-weight: 600;
}

/* Section avantages */
.section_home-perks {
  background-color: #FFFFFF; /* Fond blanc pour meilleur contraste avec les icônes */
  color: var(--brand-text-on-light);
}

.section_home-perks h2,
.section_home-perks h3,
.section_home-perks p,
.section_home-perks div {
  color: var(--brand-text-on-light);
}

/* Icônes GIF animées - changement de couleur orange vers bleu */
.section_home-perks img[src*=".gif"],
.section_home-perks img[src*="giphy"],
.section_home-perks .perks-card img,
.section_home-perks .perks-grid img,
.section_home-perks .perks-wrapper img {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95);
  /* Rotation de 200 degrés pour passer de l'orange au bleu */
  /* Ajustement de la saturation et de la luminosité pour correspondre au bleu du logo */
}

/* Tous les éléments avec gradient orange - changement vers bleu */
[style*="linear-gradient"][style*="#ff744d"],
[style*="linear-gradient"][style*="#ffc64d"],
[style*="linear-gradient"][style*="#f69f1e"],
[style*="linear-gradient"][style*="orange"],
.bg-white[style*="gradient"],
.div-block-9[style*="gradient"],
.hero-arrow[style*="gradient"] {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* Icônes et éléments orange dans le hero - changement vers bleu */
.section_home-hero [style*="#ff744d"],
.section_home-hero [style*="#ffc64d"],
.section_home-hero [style*="#f69f1e"],
.section_home-hero [style*="orange"],
.section_home-hero svg[fill*="#ff744d"],
.section_home-hero svg[fill*="#ffc64d"],
.section_home-hero svg[fill*="#f69f1e"] {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* Tous les SVG et icônes orange - changement vers bleu */
svg[fill*="#ff744d"],
svg[fill*="#ffc64d"],
svg[fill*="#f69f1e"],
svg[fill*="orange"],
[class*="money"],
[class*="dollar"] {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* Éléments décoratifs orange - changement vers bleu (SAUF les sparks/étincelles) */
.element_arrow-down,
.element_flames,
.element_underline-main,
.element_underline,
img.element_arrow-down,
img.element_flames,
img.element_underline-main,
img.element_underline,
svg.element_arrow-down,
svg.element_flames,
svg.element_underline-main,
svg.element_underline {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* Les sparks/étincelles doivent RESTER ORANGE - pas de conversion */
[class*="spark"],
[class*="burst"],
[class*="radiate"],
[class*="ray"],
[class*="étincelle"],
img[src*="spark"],
img[src*="burst"],
img[src*="radiate"],
svg[class*="spark"],
svg[class*="burst"] {
  filter: none !important; /* Pas de conversion - reste orange */
}

/* Section partenaires - éléments orange vers bleu */
.section_home-partners .element_arrow-down,
.section_home-partners .element_flames,
.section_home-partners .element_underline-main,
.section_home-partners .element_underline,
.section_home-partners img,
.section_home-partners svg {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* Toutes les images et SVG dans toutes les sections */
img[src*="arrow"],
img[src*="flame"],
img[src*="underline"],
img[src*="orange"],
svg[fill*="orange"],
svg[stroke*="orange"] {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* Règle générale pour tous les éléments visuels orange - FORCER le changement */
* {
  --orange-to-blue-filter: hue-rotate(200deg) saturate(1.2) brightness(0.95);
}

/* Cibler spécifiquement les éléments avec des classes contenant "arrow", "flame", "underline" */
[class*="arrow"],
[class*="flame"],
[class*="underline"] {
  filter: var(--orange-to-blue-filter) !important;
}

/* EXCLURE la sticky-nav de tous les filtres - doit rester bleue */
.sticky-nav,
.sticky-nav *,
.sticky-nav-element,
.sticky-nav-element *,
.sticky-nav .message-wrapper,
.sticky-nav .message-wrapper *,
.sticky-nav .links-wrapper,
.sticky-nav .links-wrapper *,
.sticky-nav .sticky-nav-link,
.sticky-nav .nav-icon,
.sticky-nav img,
.sticky-nav svg {
  filter: none !important;
}

/* Les sparks/étincelles doivent RESTER ORANGE - pas de conversion */
[class*="spark"],
[class*="burst"],
[class*="radiate"],
[class*="ray"],
[class*="étincelle"],
img[src*="spark"],
img[src*="burst"],
img[src*="radiate"],
svg[class*="spark"],
svg[class*="burst"] {
  filter: none !important; /* Pas de conversion - reste orange */
}

/* Cibler uniquement les images et SVG dans la section partenaires */
.section_home-partners img,
.section_home-partners svg,
.section_home-partners [class*="arrow"],
.section_home-partners [class*="flame"],
.section_home-partners [class*="underline"] {
  filter: var(--orange-to-blue-filter) !important;
}

/* Amélioration de la visibilité des icônes */
.section_home-perks img {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.section_home-perks img:hover {
  opacity: 0.9;
}

/* Section tarifs */
.section_home-pricing {
  background-color: #FFFFFF;
  color: var(--brand-text-on-light);
}

.section_home-pricing h2,
.section_home-pricing h3,
.section_home-pricing p,
.section_home-pricing div {
  color: var(--brand-text-on-light);
}

.price-card {
  border-color: var(--brand-primary);
}

.price-card:hover {
  border-color: var(--brand-secondary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Section CTA */
.section_home-cta {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: var(--brand-text-on-primary);
}

.section_home-cta h1,
.section_home-cta h2,
.section_home-cta h3,
.section_home-cta p,
.section_home-cta div,
.section_home-cta span,
.section_home-cta a {
  color: var(--brand-text-on-primary) !important;
}

.section_home-cta a.button,
.section_home-cta button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--brand-text-on-primary) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.section_home-cta a.button:hover,
.section_home-cta button:hover {
  background-color: #0a1f4d !important; /* Bleu sombre au survol */
  border-color: #0a1f4d !important;
  color: #FFFFFF !important;
}

/* Section FAQ - Contraste amélioré */
.section_home-faqs {
  background-color: var(--brand-light);
  color: var(--brand-text-on-light);
}

.section_home-faqs h2,
.section_home-faqs .h2-line-one,
.section_home-faqs .h2-line-two,
.section_home-faqs .h2-line-three {
  color: #0A0A0A !important; /* Contraste élevé pour les titres */
  font-weight: 700;
}

/* Panneaux accordéon - contraste amélioré */
.section_home-faqs .accordion-item---brix {
  background-color: #1A1A1A !important; /* Fond sombre pour les panneaux */
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.section_home-faqs .accordion-item---brix:hover {
  background-color: #252525 !important; /* Légèrement plus clair au survol */
}

/* Titres des questions - contraste élevé */
.section_home-faqs .accordion-item-title---brix {
  color: #F5F5F5 !important; /* Texte clair sur fond sombre */
  font-weight: 600;
  font-size: 1.1rem;
}

/* Points bleus - changement de orange vers bleu */
.section_home-faqs .dot.yellow {
  background-color: var(--brand-primary) !important; /* Bleu au lieu d'orange */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Contenu des réponses - contraste élevé */
.section_home-faqs .accordion-content---brix {
  background-color: #1A1A1A !important; /* Fond sombre cohérent */
}

.section_home-faqs .accordion-paragraph---brix {
  color: #E0E0E0 !important; /* Texte clair pour lisibilité */
  line-height: 1.7;
  font-size: 1rem;
}

/* Icônes plus/moins - contraste amélioré */
.section_home-faqs .open-close-line---brix {
  background-color: #FFFFFF !important; /* Blanc pour visibilité */
  opacity: 0.9;
}

.section_home-faqs .open-close-icon-wrapper---brix {
  opacity: 1;
}

/* Conteneur des questions */
.section_home-faqs .accordion-trigger---brix {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
}

.section_home-faqs .accordion-trigger---brix:hover .accordion-item-title---brix {
  color: #FFFFFF !important; /* Blanc pur au survol */
}


/* ============================================
   SECTION PROCESSUS - DESIGN PROPRE BLEU/BLANC
   ============================================ */

/* Section principale - Fond blanc */
.section_home-process {
  background-color: #FFFFFF !important;
  color: var(--brand-text-on-light) !important;
  position: relative !important;
  padding: 6rem 0 !important;
}

.section_home-process.padding-section-xl.is-white {
  background-color: #FFFFFF !important;
  color: var(--brand-text-on-light) !important;
}

/* Conteneur principal - Style original */
.section_home-process .process_contents {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: space-between;
  display: flex;
}

/* Colonne gauche - Style original */
.section_home-process .process_content-left {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  flex: 0 46%;
  align-items: flex-start;
}

.section_home-process .process_content-left .h2-line-one,
.section_home-process .process_content-left .h2-line-two,
.section_home-process .process_content-left .h2-line-three {
  color: var(--brand-text-on-light) !important;
  font-weight: 700 !important;
}

.section_home-process .process_content-left p {
  color: var(--brand-text-on-light) !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  margin: 2rem 0 !important;
}


/* Bouton "Commencer" */
/* Bouton dans la section process - même style que hero */
.section_home-process .button-secondargy {
  background-color: var(--brand-primary) !important; /* Bleu comme hero */
  color: #FFFFFF !important; /* Blanc pur pour contraste maximal */
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  border: none !important;
  animation: floatButton 3s ease-in-out infinite, pulseButton 2s ease-in-out infinite !important;
  box-shadow: 0 4px 15px rgba(29, 68, 161, 0.3) !important;
}

.section_home-process .button-secondargy:hover {
  background-color: #0a1f4d !important; /* Bleu sombre au survol */
  color: #FFFFFF !important;
  opacity: 1 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(10, 31, 77, 0.6) !important;
  animation-play-state: paused !important; /* Pause l'animation au survol */
}

/* Texte dans le bouton process - même style que hero */
.section_home-process .button-secondargy .text-block-6,
.section_home-process .button-secondargy .text-block-7,
.section_home-process .button-secondargy div {
  color: #FFFFFF !important; /* Blanc pur */
  font-weight: 600 !important;
}

/* Masquer le point jaune dans le bouton process */
.section_home-process .button-secondargy .dot.is-yellow {
  display: none !important;
}

/* Colonne droite - Style original */
.section_home-process .process_content-right {
  flex: 1;
  position: relative;
}

/* Conteneur des cartes - Espace pour la timeline */
.section_home-process .process_content-right .process-card-container {
  padding-left: 3rem; /* Espace pour la timeline à gauche */
  position: relative;
  z-index: 0;
  overflow: visible !important; /* Permet aux chiffres et au hover de dépasser */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Wrapper pour chaque carte - permet aux chiffres de dépasser */
.section_home-process .process-card-container > * {
  position: relative;
  overflow: visible !important;
}

/* Forcer les cartes à contenir leur contenu */
.section_home-process .process-card-container > .process_card {
  overflow: hidden !important; /* Cache le contenu qui dépasse */
}

/* Conteneur parent pour les cartes et les chiffres - position relative pour le positionnement absolu des chiffres */
.section_home-process .process-card-container > .process_card,
.section_home-process .process-card-container > .process-number-huge {
  position: relative;
}

/* Cartes de processus - Fond bleu au lieu de noir */
.section_home-process .process_card {
  background-color: var(--brand-primary) !important; /* Bleu au lieu de noir */
  background-image: none !important; /* Désactive toute image de fond par défaut */
  color: #FFFFFF !important; /* Texte blanc */
  border-radius: 24px !important;
  padding: 2rem 2rem 2rem !important; /* Padding uniforme, le titre commence en haut */
  position: relative !important;
  overflow: hidden !important; /* Cache le contenu qui dépasse, sauf le chiffre qui est à l'extérieur */
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Pseudo-élément pour l'effet de remplissage vertical */
.section_home-process .process_card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a1f4d !important; /* Bleu sombre */
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1 !important; /* Au-dessus du fond mais en dessous du contenu et des chiffres */
  border-radius: 24px !important; /* Coins arrondis identiques à la carte (24px) */
  pointer-events: none !important; /* Ne bloque pas les interactions */
}

.section_home-process .process_card:hover {
  box-shadow: 0 8px 30px rgba(10, 31, 77, 0.6) !important;
}

/* Animation de remplissage vertical au hover */
.section_home-process .process_card:hover::before {
  transform: scaleY(1);
}

/* S'assurer que le contenu reste au-dessus du pseudo-élément */
.section_home-process .process_card > * {
  position: relative;
  z-index: 2 !important; /* Au-dessus du pseudo-élément (z-index: 1) */
}

/* Forcer les titres à rester dans les cartes - priorité maximale */
.section_home-process .process_card .process_card-heading {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.section_home-process .process_card .process_card-heading .heading_process,
.section_home-process .process_card .process_card-heading h3 {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* S'assurer qu'aucun élément enfant ne change la couleur au hover */
.section_home-process .process_card:hover * {
  color: #FFFFFF !important; /* Texte blanc au hover */
}

.section_home-process .process_card:hover .process_card-heading {
  border-bottom-color: rgba(255, 255, 255, 0.3) !important; /* Ligne blanche au hover */
}


/* Texte dans les cartes - Blanc */
.section_home-process .process_card p {
  color: #FFFFFF !important; /* Texte blanc */
  opacity: 0.9 !important;
}

/* Titre des cartes - Blanc au lieu d'orange - Fixé en haut */
.section_home-process .process_card-heading .heading_process,
.section_home-process .process_card-heading h3.heading_process {
  color: #FFFFFF !important; /* Blanc au lieu d'orange */
  -webkit-text-fill-color: #FFFFFF !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 700 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
}

.section_home-process .process_card-heading .heading_process strong {
  display: inline !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ligne de séparation sous le titre - Blanc - Fixé en haut */
.section_home-process .process_card-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* Ligne blanche semi-transparente */
  padding-bottom: 1rem !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  float: none !important;
}

/* Chiffres - Style avec cercle blanc et bordure bleue - EN DEHORS DES CARTES */
.section_home-process .process-number-huge {
  color: #1d44a1 !important; /* Chiffre bleu */
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  background-color: #FFFFFF !important; /* Fond blanc */
  border: 3px solid #1d44a1 !important; /* Contour bleu */
  border-radius: 50% !important; /* Cercle */
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  position: absolute !important;
  z-index: 99999 !important; /* TRÈS TRÈS élevé pour être au-dessus de TOUT */
  box-shadow: 0 4px 15px rgba(29, 68, 161, 0.3) !important;
  pointer-events: none !important; /* Ne bloque pas les interactions */
  isolation: isolate !important; /* Crée son propre contexte d'empilement */
  transform: translateZ(0) !important; /* Force un nouveau contexte de rendu */
  /* Position calculée dynamiquement par JavaScript */
}





/* Éléments décoratifs - Conversion en bleu */
.section_home-process .element_hearts-copy,
.section_home-process .element_paperplane {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* Soulignement du titre - BLEU */
.section_home-process .element_underline-process {
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.95) !important;
}

/* ============================================
   TIMELINE ORIGINALE - STYLE DU PREMIER LANDING PAGE
   ============================================ */

/* Timeline wrapper - Style original - Positionné dans la colonne droite */
/* Timeline wrapper - MASQUÉ */
.section_home-process .process_content-right .timeline-wrapper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

/* Barre verticale bleue - Style original converti en bleu - MASQUÉE */
.section_home-process .timeline-bottom {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Cercles de timeline - Bleus - MASQUÉS */
.section_home-process .timeline-circle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Wrapper des cercles - Style original - MASQUÉ */
.section_home-process .circles-wrapper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Masque de timeline - Style original avec fond blanc au lieu de noir - MASQUÉ */
.section_home-process .timeline-mask {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Masque gris pour fond blanc - Style original - MASQUÉ */
.section_home-process .timeline-mask.is-grey {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Footer */
footer {
  background-color: var(--brand-dark);
  color: white;
}

/* Éléments interactifs */
button, .button, a.button {
  background-color: var(--brand-primary);
  color: white;
  border: none;
}

button:hover, .button:hover, a.button:hover {
  background-color: #0a1f4d !important; /* Bleu sombre au survol */
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 31, 77, 0.4);
}

/* Textes en surbrillance */
.text-highlight {
  color: var(--brand-primary);
}

/* Bordures et séparateurs */
hr, .divider {
  border-color: var(--brand-primary);
  opacity: 0.3;
}

/* Badges et tags */
.badge, .tag {
  background-color: var(--brand-accent);
  color: var(--brand-dark);
}

/* Section Footer - Contraste amélioré pour visibilité maximale */
.section_home-footer {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  padding: 2rem 0 1rem 0 !important;
}

/* Conteneur principal du footer */
.footer-content-topo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Liens de navigation du footer - Contraste élevé */
.footer-content-topo .div-block-5 {
  display: flex !important;
  flex-direction: row !important;
  gap: 2rem !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}

.footer-content-topo .div-block-5 a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  padding: 0.5rem 1rem !important;
  opacity: 1 !important;
}

.footer-content-topo .div-block-5 a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  opacity: 0.9 !important;
}

/* Section extras du footer */
.footer-extras {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 1rem !important;
  margin-top: 1rem !important;
}

/* Email dans le footer - Contraste élevé */
.footer-extras .div-block-8 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.footer-extras .text-color-grey {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  opacity: 1 !important;
}

.footer-extras .text-color-grey:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  opacity: 0.9 !important;
}

.footer-extras .text-color-grey strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.footer-extras .text-color-grey div {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Liens sociaux - Contraste amélioré */
.sociakl-links--wrapper {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
  justify-content: center !important;
  align-items: center !important;
}

.sociakl-links--wrapper .social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s ease !important;
  padding: 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.sociakl-links--wrapper .social-link:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.sociakl-links--wrapper .social-link img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease !important;
  width: 20px !important;
  height: 20px !important;
}

.sociakl-links--wrapper .social-link:hover img {
  opacity: 1 !important;
}

/* Liens légaux - Contraste amélioré */
.section_home-footer a[href*="legal-pages"],
.section_home-footer a[href*="privacy"],
.section_home-footer a[href*="refund"],
.section_home-footer a[href*="terms"] {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  margin: 0.5rem 0 !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  opacity: 1 !important;
}

.section_home-footer a[href*="legal-pages"]:hover,
.section_home-footer a[href*="privacy"]:hover,
.section_home-footer a[href*="refund"]:hover,
.section_home-footer a[href*="terms"]:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  opacity: 1 !important;
}

.section_home-footer a[href*="legal-pages"] div,
.section_home-footer a[href*="privacy"] div,
.section_home-footer a[href*="refund"] div,
.section_home-footer a[href*="terms"] div {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

/* Copyright - Contraste amélioré */
.section_home-footer > div > div > div > div > div:last-child {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.85rem !important;
  margin-top: 1rem !important;
  text-align: center !important;
  opacity: 1 !important;
}

.section_home-footer > div > div > div > div > div:last-child div {
  color: rgba(255, 255, 255, 0.8) !important;
  opacity: 1 !important;
}

/* Image du footer */
.section_home-footer .image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-top: 2rem !important;
  opacity: 0.3 !important;
  filter: brightness(0) invert(1) !important;
}

/* Espacement général */
.section_home-footer .padding-medium {
  margin: 1.5rem 0 !important;
}

.section_home-footer .padding-small {
  margin: 1rem 0 !important;
}

/* Barre de navigation sticky - Style comme dans l'image (fond sombre, boutons arrondis) */
.sticky-nav {
  background-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important; /* Z-index très élevé pour être au-dessus de tout */
  width: 100% !important;
  padding: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.sticky-nav .padding-global {
  padding: 0 !important;
}

.sticky-nav .container-small {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.sticky-nav-element {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: 56px !important;
  padding: 0 1.5rem !important;
  margin: 0 auto !important;
  background-color: #1d44a1 !important; /* BLEU au lieu de gris */
  background: linear-gradient(135deg, #1d44a1 0%, #3d6bc7 100%) !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 20px rgba(29, 68, 161, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  filter: none !important; /* Exclure des filtres */
  z-index: 10000 !important; /* Z-index très élevé */
}

/* Boutons email et téléphone - Style arrondi rectangulaire */
.sticky-nav-element .message-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background-color: rgba(60, 60, 60, 0.8) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

.sticky-nav-element .message-wrapper:hover {
  background-color: rgba(80, 80, 80, 0.9) !important;
  transform: translateY(-2px) !important;
}

.sticky-nav-element .message-wrapper .nav-icon {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}

.sticky-nav-element .message-wrapper:hover .nav-icon {
  opacity: 1 !important;
}

/* Conteneur des liens */
.sticky-nav-element .links-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2rem !important;
  flex: 1 !important;
  flex-wrap: nowrap !important;
  padding: 0 2rem !important;
}

/* Liens de navigation - Texte clair sur fond sombre */
.sticky-nav-element .sticky-nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.sticky-nav-element .sticky-nav-link:hover {
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ajouter un padding-bottom au body pour éviter que le contenu soit caché par la barre fixe */
body {
  padding-bottom: 80px !important;
}

/* Responsive - ajustements pour mobile */
@media (max-width: 768px) {
  .sticky-nav {
    padding: 0.5rem !important;
    background-color: transparent !important;
  }

  body {
    padding-bottom: 80px !important;
  }

  .sticky-nav-element {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0.5rem 1rem !important;
    flex-wrap: nowrap !important; /* Pas de wrap - tout sur une ligne */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border-radius: 28px !important; /* Coins arrondis en haut */
    background-color: #1d44a1 !important; /* BLEU au lieu de gris */
    background: linear-gradient(135deg, #1d44a1 0%, #3d6bc7 100%) !important;
    box-shadow: 0 -2px 10px rgba(29, 68, 161, 0.4) !important;
    filter: none !important; /* Exclure des filtres */
  }

  /* Bouton email à gauche */
  .sticky-nav-element > .message-wrapper:first-child {
    order: 1 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }

  /* Liens au centre */
  .sticky-nav-element .links-wrapper {
    order: 2 !important;
    flex: 1 !important;
    width: auto !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 0.5rem !important;
    flex-wrap: nowrap !important; /* Pas de wrap */
    overflow: hidden !important;
  }

  /* Bouton téléphone à droite */
  .sticky-nav-element > .message-wrapper:last-child {
    order: 3 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }

  .sticky-nav-element .message-wrapper {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background-color: rgba(60, 60, 60, 0.8) !important;
    border-radius: 10px !important;
  }

  .sticky-nav-element .message-wrapper .nav-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .sticky-nav-element .sticky-nav-link {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.5rem !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* Masquer "Carrières" et "Accueil" sur mobile pour économiser l'espace */
  .sticky-nav-element .hide-mobile-landscape {
    display: none !important;
  }

  /* Masquer le lien "Accueil" sur mobile */
  .sticky-nav-element .sticky-nav-link[href="index.html"] {
    display: none !important;
  }

  /* Ajuster le padding du conteneur */
  .sticky-nav .padding-global {
    padding: 0 !important;
  }

  .sticky-nav .container-small {
    padding: 0 !important;
  }
}

  .footer-content-topo .div-block-5 {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .footer-extras {
    gap: 1rem !important;
  }

  .sociakl-links--wrapper {
    gap: 0.75rem !important;
  }

  /* Centrer le texte "Commencer" dans les boutons sur mobile */
  .button-secondargy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: row !important;
  }

  .button-secondargy .text-block-6,
  .button-secondargy .text-block-7 {
    text-align: center !important;
    width: auto !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .button-secondargy .dot {
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  /* Centrer le logo en haut au milieu sur mobile */
  .navbar .navigation-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
    width: 100% !important;
  }

  .navbar .w-nav-brand,
  .navbar .brand {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .navbar .logo,
  .navbar img.logo {
    margin: 0 auto !important;
    display: block !important;
  }
}

/* Responsive pour très petits écrans */
@media (max-width: 480px) {
  .sticky-nav {
    padding: 0.4rem !important;
  }

  .sticky-nav-element {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    border-radius: 24px !important;
    flex-wrap: nowrap !important; /* Toujours sur une ligne */
  }

  .sticky-nav-element .links-wrapper {
    gap: 0.4rem !important;
    padding: 0 0.3rem !important;
    flex-wrap: nowrap !important;
  }

  .sticky-nav-element .sticky-nav-link {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.4rem !important;
    white-space: nowrap !important;
  }

  .sticky-nav-element .message-wrapper {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .sticky-nav-element .message-wrapper .nav-icon {
    width: 18px !important;
    height: 18px !important;
  }

  body {
    padding-bottom: 75px !important;
  }

  /* Masquer le texte "Basé à Pune" sur mobile */
  .navbar .nav_text-wrapper {
    display: none !important;
  }
}

/* Masquer le message "Media not found" dans les lecteurs vidéo Wistia */
/* Cibler les éléments d'erreur Wistia */
.w-video-wrapper .w-error,
.wistia_embed .w-error,
.w-video-wrapper [class*="error"],
.wistia_embed [class*="error"],
.w-video-wrapper [class*="Error"],
.wistia_embed [class*="Error"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Masquer les messages d'erreur dans les conteneurs vidéo */
.portfolio_wrapper .w-video-wrapper,
.section_home-portfolio .w-video-wrapper,
.section_home-portfolio .wistia_embed {
  min-height: 200px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

/* Style pour les vidéos qui ne se chargent pas */
.portfolio_wrapper .w-video-wrapper:empty::before,
.section_home-portfolio .w-video-wrapper:empty::before {
  content: "Vidéo en cours de chargement...";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--brand-text-on-light);
  font-size: 0.9rem;
}