/* ============================================================
   FICHIER : home.css
   DESCRIPTION : Styles spécifiques à la page d'accueil (Home)
                 Structure : Hero, Feature, Stats
   ============================================================ */


/* ============================================================
   SECTION HERO (Bannière principale avec image de fond)
   ============================================================ */

   /* ==========================================
   HERO ACCUEIL - VIDÉO
========================================== */
.hero-home {
  position: relative;
  width: 100%;
  height: 60vh;           /* Hauteur = 60% de la hauteur d'écran */
  min-height: 400px;      /* Hauteur minimum absolue */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #031634;    /* Couleur de fond si la vidéo ne charge pas */
}

/* ── VIDÉO ── */
.hero-home-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 👍 LA CLÉ : la vidéo couvre tout sans déformation */
  z-index: 0;
}


/* ── CONTENU TEXTE ── */
.hero-home-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 4vw;
  max-width: 1200px;
  width: 100%;
}

/* ── TITRE ── */
.hero-home-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(2.8rem, 12vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem 0;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: hvFadeUp 0.6s ease 0.2s forwards;
}

.hero-home-title .accent {
  color: #0AAA66;
  text-shadow: 0 0 10px rgba(10, 184, 106, 0.7);
}

/* ── SOUS-TITRE ── */
.hero-home-sub {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 800px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  opacity: 0;
  animation: hvFadeUp 0.6s ease 0.35s forwards;
}

/* ── ANIMATION ── */
@keyframes hvFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE ── */
@media (max-width: 640px) {
  .hero-home {
    height: 50vh;
    min-height: 350px;
  }
  .hero-home-title {
    font-size: 3.2rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  }
  .hero-home-title .accent {
    text-shadow: 0 0 12px rgba(10, 184, 106, 0.9);
  }
}

/* ============================================================
   ANIMATION : Fade-up (apparition avec translation)
   ============================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.8s ease forwards;
}

/* Délais d'apparition pour les éléments enfants */
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.18s; }
.fade-up:nth-child(3) { animation-delay: 0.26s; }
.fade-up:nth-child(4) { animation-delay: 0.34s; }

/* Keyframes de l'animation */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   ADAPTATIONS RESPONSIVE pour le HERO
   ============================================================ */
@media (max-width: 760px) {
    .home-hero {
        padding: clamp(28px, 8vw, 40px) clamp(16px, 6vw, 24px);
        min-height: 320px;
        border-radius: 0;
    }

    .home-hero h1 {
        font-size: clamp(28px, 7vw, 34px); /* Titre plus petit sur mobile */
        margin-bottom: 14px;
    }

    .home-hero p {
        font-size: clamp(15px, 3.5vw, 18px); /* j'aimerais une version encore plus petit de celui-ci. */
        max-width: 100%;
    }
}



/* ============================================================
   SECTION STATS (Chiffres clés en cartes)
   ============================================================ */

.long-stats1{
    max-width: 1000px; /* ou la largeur désirée */
    margin: 0 auto;   /* centre horizontalement */
    padding: 0 1rem;  /* padding pour les petits écrans */
}

/* Grille 4 colonnes pour les statistiques */
.home-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1rem);
}

/* ============================================================
   ADAPTATIONS RESPONSIVE pour les STATS
   ============================================================ */
@media (max-width: 900px) {
    .home-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes */
    }
}

@media (max-width: 620px) {
    .home-stats__grid {
        grid-template-columns: 1fr; /* 1 colonne sur très petit écran */
    }
}



.feature-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.feature-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.feature-number {
  width: 48px;
  height: 48px;
  background: rgba(10,184,106,0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: #0AAA66;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.feature-item:hover .feature-number {
  background: #0AAA66;
  color: white;
  transform: translateY(-2px);
}

.feature-text h3 {
  font-size: 18px;
  font-weight: 700;
  color: #031634;
  margin: 0 0 8px 0;
}

.feature-text p {
  font-size: 0.95rem;
  color: #53657a;
  line-height: 1.6;
  margin: 0;
}

.align-btn {
margin-left: auto;
margin-right: auto;
}

.align-btn:hover {
  background: #0AAA66;
  transform: translateY(-3px);
  gap: 12px;
}

/* Animations légères */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-list { animation-delay: 0.2s; }
.align-btn { animation-delay: 0.3s; }

/* ============================================================
   GESTION DES ANIMATIONS POUR LES UTILISATEURS AVEC RÉDUCTION DE MOUVEMENT
   ============================================================ */

/* ========== VARIABLES ========== */
:root {
  --eaas-primary: #0AAA66;
  --eaas-primary-dark: #089b58;
  --eaas-primary-glow: rgba(10,184,106,0.12);
  --eaas-bg: #102847;
  --eaas-surface: rgba(255,255,255,0.04);
  --eaas-border: rgba(255,255,255,0.08);
  --eaas-text: #ffffff;
  --eaas-text-secondary: rgba(255,255,255,0.7);
  --eaas-text-muted: rgba(255,255,255,0.5);
  --eaas-radius-sm: 6px;
  --eaas-radius-md: 10px;
  --eaas-radius-lg: 14px;
  --eaas-radius-xl: 99px;
  --eaas-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CONTAINER PRINCIPAL */
.eaas-container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 0;
  position: relative;
  z-index: 1;
}

/* ========== GRILLE PRINCIPALE ========== */
.eaas-grid {
  display: flex;
  gap: 90px;
  align-items: stretch;
}

.eaas-left,
.eaas-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ========== COLONNE GAUCHE ========== */
.eaas-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--eaas-primary);
  margin: 0 0 16px 0;
  display: inline-block;
  position: relative;
}

.eaas-label::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 35px;
  height: 2px;
  background: var(--eaas-primary);
  border-radius: 2px;
}

.eaas-quote {
  font-size: 1.5rem;
  font-weight: 700;

  line-height: 1.25;
  color: var(--eaas-text);
  max-width: 100%;
}

.eaas-quote em {
  margin-top: 54px ;
  font-style: normal;
  background: linear-gradient(135deg, var(--eaas-primary), #0AAA66);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* WATERMARK EAAS - Très discret */
.eaas-module {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background: var(--eaas-bg);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0 auto;
  padding: 28px 5vw;
}


/* ========== CARTES (icône + titre HORIZONTAL) ========== */
.eaas-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 32px;  
}

.eaas-card {
  background: var(--eaas-surface);
  border: 1px solid var(--eaas-border);
  border-radius: var(--eaas-radius-md);
  padding: 14px 16px;
  transition: var(--eaas-transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Ligne icône + titre (alignés horizontalement) */
.eaas-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.eaas-card-icon {
  width: 26px;
  height: 26px;
  background: var(--eaas-primary-glow);
  border-radius: var(--eaas-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--eaas-transition);
}

.eaas-card-icon svg {
  width: 13px;
  height: 13px;
  stroke: var(--eaas-primary);
  stroke-width: 2.2;
  transition: var(--eaas-transition);
}

.eaas-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--eaas-text);
  margin: 0;
  line-height: 1.3;
}

/* Description (visible uniquement au hover) */
.eaas-card-desc {
  font-size: 11px;
  color: var(--eaas-text-muted);
  line-height: 1.45;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.2s ease;
}

/* Effets au hover */
.eaas-card:hover {
  background: var(--eaas-primary-glow);
  border-color: var(--eaas-primary);
  transform: translateY(-2px);
}

.eaas-card:hover .eaas-card-desc {
  max-height: 55px;
  opacity: 1;
  margin-top: 12px;
}

.eaas-card:hover .eaas-card-icon {
  background: var(--eaas-primary);
}

.eaas-card:hover .eaas-card-icon svg {
  stroke: white;
}

/* Animation lumière au hover */
.eaas-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.5s ease;
  z-index: -1;
}

.eaas-card:hover::before {
  left: 100%;
}

/* ========== COLONNE DROITE ========== */
.eaas-right-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* PILL — SUR UNE SEULE LIGNE QUOI QU'IL ARRIVE */
.eaas-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--eaas-primary-glow);
  border: 1px solid var(--eaas-primary);
  color: var(--eaas-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--eaas-radius-xl);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 38px;
  backdrop-filter: blur(4px);
  transition: var(--eaas-transition);
  white-space: nowrap; /* 🔥 INTERDICTION DE PASSER À LA LIGNE */
}

/* Gestion du débordement : le conteneur parent s'élargit si besoin */
.eaas-right-content {
  min-width: 0; /* permet au flex de gérer le overflow */
  text-align: justify;
}

.eaas-pill:hover {
  transform: translateX(5px);
  background: var(--eaas-primary);
  color: white;
}

.eaas-pill svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: var(--eaas-transition);
}

.eaas-pill:hover svg {
  transform: translateX(3px);
}

.eaas-description {
  font-size: 1rem;
  color: var(--eaas-text-secondary);
  line-height: 1.6;
  margin: 0 0 22px 0;
  text-align: justify;
}

.eaas-description:last-of-type {
  margin-bottom: 0;
}

.eaas-description strong {
  color: var(--eaas-primary);
  font-weight: 600;
}


/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.eaas-left {
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.1s;
}

.eaas-right {
  animation: slideInRight 0.6s ease forwards;
  animation-delay: 0.2s;
}

/* ========== GESTION DES ZOOMS EXCESSIFS (protect) ========== */
@media (max-width: 1100px) {
  .eaas-container {
    width: 100%;
  }
  
  .eaas-pill {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 14px;
  }
}

/* ========== RESPONSIVE LIMITÉ (SEUIL BASPC) ========== */
@media (max-width: 1024px) {
  .eaas-grid {
    gap: 60px;
  }
  
  .eaas-quote {
    font-size: 1.4rem;
  }
  
  .eaas-features {
    gap: 14px;
  }
  
  .eaas-card {
    padding: 12px;
  }
  
  .eaas-card-title {
    font-size: 0.82rem;
  }
}

@media (max-width: 900px) {
  /* On garde la structure desktop le plus longtemps possible */
  .eaas-grid {
    flex-direction: column;
    gap: 40px;
  }
  
  .eaas-left,
  .eaas-right {
    flex: auto;
  }
  
  .eaas-quote {
    max-width: 100%;
    text-align: left;
  }
  
  .eaas-label {
    display: block;
    text-align: center;
  }
  
  .eaas-label::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .eaas-pill {
    margin-left: auto;
    margin-right: auto;
  }
  
  .eaas-description {
    text-align: center;
  }
  
  .eaas-note {
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* À ce stade, c'est limite mais on garde la cohérence desktop */
  .eaas-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eaas-card,
  .eaas-pill,
  .eaas-card::before,
  .eaas-left,
  .eaas-right,
  .eaas-module::after {
    animation: none;
    transition: none;
  }
}


/* 4) partenaire */
.noe-partners-wrap {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 28px 5vw;
  background: #f3f8f5;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow: hidden;
}

.noe-partners-head{
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.noe-partners-head h2 {
  color: #031634;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 20px 0;
  line-height: 1.05;
}

.noe-partners-head h2 span{
  color:#0AAA66
}

.noe-marquee-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.noe-marquee-outer::before,
.noe-marquee-outer::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.noe-marquee-outer::before {
  left: 0;
  background: linear-gradient(to right, #f3f8f5, transparent);
}

.noe-marquee-outer::after {
  right: 0;
  background: linear-gradient(to left, #f3f8f5, transparent);
}

.noe-marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: noeScrollPremium 55s linear infinite;
}

.noe-marquee-track:hover {
  animation-play-state: paused;
}

.noe-logo-item {
  flex: 0 0 auto;
  width: 320px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 32px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(3,22,52,0.08);
  box-shadow:
    0 16px 40px rgba(3,22,52,0.08),
    0 6px 18px rgba(3,22,52,0.05);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.noe-logo-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #0AAA66;
}

.noe-logo-item::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(10,184,106,0.10);
  pointer-events: none;
}

.noe-logo-item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 50px rgba(3,22,52,0.12),
    0 8px 20px rgba(3,22,52,0.08);
  border-color: rgba(10,184,106,0.18);
}

.noe-logo-item img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  opacity: 0.95;
}

.noe-logo-item:hover img {
  transform: scale(1.05);
  filter: saturate(1.03);
}

@keyframes noeScrollPremium {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

@media (max-width: 768px) {
  .noe-logo-item {
    width: 220px;
    height: 120px;
    border-radius: 22px;
    padding: 18px 20px;
  }

  .noe-logo-item img {
    max-height: 70px;
  }

  .noe-marquee-outer::before,
  .noe-marquee-outer::after {
    width: 60px;
  }
}
.call_to_action h2{
  color: white;
}