/* Main prend tout l'espace dispo dans le flex (body) */
main {
  flex: 1;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;

}


/* ==== Styles globaux ==== */

/* === Reset et structure globale === */
html {
  height: 100%;          /* l'html prend toute la hauteur de la fenêtre */
  box-sizing: border-box;/* inclut padding/border dans les tailles (width/height) calculées */
  -webkit-text-size-adjust: 100%;  /* iOS / Android : empêche le zoom automatique */
  text-size-adjust: 100%;          /* version standard quand dispo */
}
 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding-top: 70px;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: linear-gradient(90deg, rgba(189, 67, 255, 0.9) 0%, rgba(42, 83, 110, 0.9) 100%);
      backdrop-filter: blur(4px);
      padding: 0.5rem 1rem;
    }

    .header-container {
      max-width: 2400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo-img {
      height: 40px;
      margin-right: 10px;
      transform: rotate(20deg);
      display: block;
      transition: transform 0.3s ease;
    }

    .logo-img:hover {
      transform: rotate(90deg);
    }

    .brand {
      font-family: 'Lobster', cursive;
      font-size: 1.8em;
      color: white;
      white-space: nowrap;
    }
/* ==== NAVIGATION ===== */

/* Burger (mobile) */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  margin-left: auto;
}

/* Nav principale desktop */
.nav-main {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* aligner VOUS ÊTES + QUI SOMMES-NOUS */
.nav-main > a,
.nav-main > .nav-item {
  display: flex;
  align-items: center;
}

/* Liens de premier niveau */
.nav-main-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  padding: 0rem 0;
  line-height: 1;
  transition: font-family 0.15s ease, font-size 0.15s ease;
  cursor: pointer;
  background: none;
  border: none;
}

.nav-main-link:hover {
  font-family: 'Knewave', cursive;
  font-size: 1.05rem;
}

/* Item avec dropdown */
.nav-item {
  position: relative;
}


/* Dropdown principal (sous VOUS ÊTES) */
.nav-dropdown {
  position: absolute;
  top: 120%;
  left: 0;
  margin-top: 0.35rem;
  width: max-content;
  background: linear-gradient(90deg, rgba(116, 75, 183, 0.95) 0%, rgba(42, 83, 110, 0.95) 100%);
  border-radius: 0 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  padding: 0.4rem 0.3rem;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

/* Ouverture du dropdown (avec la classe is-open ajoutée via JS) */
.nav-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Sous-menu d'ENTREPRISE */
.nav-submenu {
  margin-top: 0.2rem;
  margin-left: 0.6rem;
  padding-left: 0.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

/* Afficher le sous-menu quand is-open est appliqué */
.nav-submenu.is-open {
  max-height: 200px;
  opacity: 1;
}

/* Liens du sous-menu */
.nav-submenu-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #e0e0e0;
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.nav-submenu-link + .nav-submenu-link {
  margin-top: 0.15rem;
}

.nav-submenu-link:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(2px);
}


/* Lignes du dropdown (ENTREPRISE / INSTIT / etc.) */
.nav-dropdown-link {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #f5f5f5;
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  background: none;
  border: none;
}

.nav-dropdown-item + .nav-dropdown-item {
  margin-top: 0.15rem;
}

/* ENTREPRISE légèrement plus “présent”, mais même style que les autres */
.nav-dropdown-button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  margin: 0;
  box-sizing: border-box;
}

/* Hover pour toutes les lignes du dropdown */
.nav-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

/* Sous-menu d'ENTREPRISE (en dessous, qui “allonge” la liste) */
.nav-submenu {
  margin-top: 0.2rem;
  margin-left: 0.6rem;     /* léger retrait, mais pas exagéré */
  padding-left: 0.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}


/* Desktop : au survol de la ligne ENTREPRISE */
.nav-has-submenu:hover .nav-submenu {
  max-height: 200px;
  opacity: 1;
}


/* ====== MOBILE ====== */
@media (max-width: 768px) {
  /*body {
    padding-top: 60px;
  }*/
.nav-dropdown,
.nav-submenu {
  width: 100%;
  box-sizing: border-box;
}
  .menu-toggle {
    display: block;
  }
  .nav-main {
    display: none;
    position: fixed;
    top: 60px;           /* juste sous le header */
    right: 0;            /* collé au bord droit */
    left: auto;          /* on annule le left:0 */
    width: min(90vw, 340px);        /* largeur fixe du panneau */
    width: max-content;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(0, 0, 0, 0.95);
    padding: 0.8rem 0.5rem 1rem;
    border-radius: 0 0 0 12px; /* coin arrondi en bas à gauche du panneau */
    z-index: 999;
  }
  .nav-main.nav-open {
    display: flex;
  }

  .nav-main > a,
  .nav-main > .nav-item {
    display: block;
    width: 100%;
  }

  .nav-main-link {
    width: 100%;
    text-align: left;
    padding: 0.3rem 0.4rem;
  }
  /*.nav-dropdown-button {
    width: 100%;
    text-align: left;
    padding-left: 1.5rem; /* même padding que les autres items 
  }*/
  /* Dropdown mobile = accordéon */
  .nav-dropdown {
    position: static;
    margin-top: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
    padding: 0;
    opacity: 1;           /* géré par display via .is-open */
    transform: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-dropdown.is-open {
    max-height: 500px;
  }

  .nav-dropdown-link {
    padding: 0.3rem 0.4rem;
    border-radius: 0;
  }

  /* Sous-menu mobile */
  .nav-submenu {
    margin: 0;
    padding-left: 0;
    border-left: none;
    max-height: 0;
    width: 100%
    /*opacity: 1;          /* géré par max-height */
    /*transition: max-height 0.3s ease;*/
  }

  .nav-submenu.is-open {
    max-height: 300px;
  }

  .nav-submenu-link {
    padding: 0.5rem 1.8rem;
    text-transform: none !important;
  }

}


/* === Bloc hero - vidéo plein écran === */

.hero-video-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;           /* prend toute la hauteur de la fenêtre */
  overflow: hidden;        /* cache les débords de la vidéo */
}

/* Vidéo en arrière-plan */
.hero-video {
  position: fixed;         /* fixé à la fenêtre, pas au scroll */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;       /* remplit sans bandes, recadre si nécessaire */
  z-index: -1;             /* derrière tout */
}

/* Voile sombre par-dessus la vidéo (optionnel mais conseillé pour la lisibilité) */
.hero-overlay {
  /*position: absolute;
  inset: 0;*/
  position: fixed;         /* fixé à la fenêtre, pas au scroll */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.35); /* à ajuster (0.35 = 35% de noir) */
  z-index: 0;
}

/* Contenu texte par-dessus */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 6rem 1.5rem 3rem;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Titre principal */
.hero-content h1 {
  font-family: 'Knewave', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

/* Sous-titre */
.hero-content p {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* === Section Décarboration ==== */

/* Bandeau noir pleine largeur */
.decarb-strip {
  width: 100%;
  background: #000000;
  color: #fff;
  z-index: 2;
}

/* Conteneur centré */
.decarb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  
}

/* Titre Knewave blanc */
.decarb-inner h2 {
  font-family: 'Knewave', cursive;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0 0 2rem 0;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}

/* Conteneur 3 colonnes */
.decarb-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

/* Texte Inter blanc */
.decarb-columns p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
  color: #fff;
  text-align: justify;
  margin: 0;
}
/* État initial : bandeau caché + légèrement vers le bas */
.decarb-strip {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Quand on ajoute cette classe en JS, la section apparaît */
.decarb-strip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation des colonnes : légère montée + décalage dans le temps */
.decarb-columns p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Quand la section est visible, on anime les colonnes avec un léger stagger */
.decarb-strip.is-visible .decarb-columns p {
  opacity: 1;
  transform: translateY(0);
}

/* Décalage dans le temps pour chacune des 3 colonnes */
.decarb-strip.is-visible .decarb-columns p:nth-child(1) {
  transition-delay: 0.1s;
}

.decarb-strip.is-visible .decarb-columns p:nth-child(2) {
  transition-delay: 0.25s;
}

.decarb-strip.is-visible .decarb-columns p:nth-child(3) {
  transition-delay: 0.4s;
}



/* ==== Sections avantages, vision, pro ==== */

.avantages, .pro {
  max-width: 900px;           /* largeur max du bloc */
  margin: 0 auto;             /* centré horizontalement */
  padding: 0.8rem 1rem;            /* padding horizontal */
  text-align: center;         /* texte centré */
  color: #333;                /* texte gris foncé */
  background: transparent;    /* fond transparent, c’est le ::before qui gère le fond */
  position: relative;         /* nécessaire pour positionner ::before */
  z-index: 1;                 /* place la section au-dessus du pseudo-élément */
}

.avantages::before, .pro::before {
  content: "";                         /* pseudo-élément vide pour le fond */
  position: absolute;                  /* se positionne par rapport au parent */
  inset: 0 calc(50% - 50vw);           /* élargit le fond jusqu’aux bords de l’écran */
  background: #fff;                    /* fond blanc derrière la section */
  z-index: -1;                         /* placé derrière le contenu réel */
}

.avantages h2, .pro h2 {
  font-family: 'Knewave', sans-serif; /* titre avec une autre police */
  font-weight: bold;                   /* titre en gras */
  font-size: 2rem;                    /* taille des titres */
  color: #906fc5;/*f5a623;                     /* orange */
  margin-bottom: 1rem;                /* espace sous le titre */
}

/* Mise en forme des cartes uniquement dans .pro */
.pro ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  list-style: none;
  margin-top: 0;
}

.pro ul li {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  flex: 1;
  max-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spécifique au titre .pro h2 (sous-titre long vert) */
.pro h2 {
  font-family: 'Caveat', sans-serif; /* titre avec une autre police */
  font-weight: bold;                   /* titre en gras */
  font-size: 2rem;    /* plus petit que les H2 classiques */
  line-height: 1.5;      /* interligne pour texte sur 2 lignes */
  margin-bottom: 1.5rem; /* espace bas (un peu plus important) */
  text-align: center;    /* centré */
  margin-bottom: 1rem;   /* (doublon mais identique) */
  color: #55758b;           /* vert doux #b6cfb6 */
}

/* ==== Boutons ==== */
.cta-button {
  margin-top: 1rem;                /* espace au-dessus du bouton */
  margin-bottom: 1rem;             /* espace en-dessous */
  display: inline-block;           /* permet marge et padding */
  background-color: #906fc5;/*55758b;       /* fond bleu-vert */
  backdrop-filter: blur(4px);
  color: white;                    /* texte blanc */
  padding: 0.8rem 1.5rem;          /* taille du bouton */
  border-radius: 6px;              /* coins arrondis */
  text-decoration: none;           /* pas de soulignement */
  font-weight: bold;               /* texte en gras */
  font-size: 1rem;                 /* taille de police */
  text-align: center;              /* texte centré dans le bouton */
  cursor: pointer;                 /* curseur main */
  transition: background-color 0.3s ease, font-family 0.1s ease; /* animation couleur au survol */
}

.cta-button:hover {
  /*background-color: #7B56B8;/*4e768e; /* couleur plus claire au survol */
  font-family: 'Knewave', cursive;
}


/* === Section vision - Ambition === */

.vision-wrapper {
  position: relative;      /* pour le pseudo-élément */
  width: 100%;               /* prend toute la largeur */
  background: (0, 0, 0, 0.35); /* fond noir transparent */
  /*background-color: #fff;    /* fond blanc */
  padding: 0;                /* pas de padding global */
  margin-top: 0;             /* pas d’espace au-dessus */
  z-index: 10;               /* au-dessus du fond */
}

.vision {
  max-width: 1200px;         /* largeur max du contenu */
  margin: 0 auto;            /* centré */
  padding: 0 1rem;           /* padding horizontal */
  text-align: justify;       /* texte justifié */
  color: #FFF;
  z-index: 10;
}

.vision p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1rem);        /* texte un peu plus grand */
  line-height: 1.7;          /* interligne */
  font-weight: 300;
  margin-bottom: 1.5rem;     /* espace entre les paragraphes */
  text-align: center;        /* texte centré */
  color: #fff;
  max-width: 100%;           /* ne dépasse pas le conteneur */
}

.vision h2 {
  font-family: 'Knewave', sans-serif; /* police du titre */
  font-weight: 700;                   /* gras */
  font-size: 2rem;                    /* taille du titre */
  text-align: center;                 /* centré */
  margin-bottom: 1rem;                /* espace sous le titre */
  color: #fff/*#906fc5/*55758b;                        /* vert doux #b6cfb6*/
}

.vision h3 {
  font-family: 'Knewave', sans-serif; /* police du titre */
  font-weight: 700;                   /* gras */
  font-size: 2rem;                    /* taille du titre */
  text-align: center;                 /* centré */
  margin-bottom: 1rem;                /* espace sous le titre */
  color: #fff;                        /* vert doux #b6cfb6*/
}
.vision h4 {
  font-family: 'Knewave', sans-serif; /* police du titre */
  font-weight: 700;                   /* gras */
  font-size: 2rem;                    /* taille du titre */
  text-align: center;                 /* centré */
  margin-bottom: 1rem;                /* espace sous le titre */
  color: #fff;                        /* vert doux #b6cfb6*/
}
.centered {
  display: flex;             /* container flex */
  justify-content: center;   /* centre horizontalement */
  margin-top: 0.5rem;          /* espace au-dessus */
  margin-bottom: 0.5rem;
}

.centered p strong {
  color: #55758b;            /* texte important en bleu */
  font-size: 2.2rem;          /* un poil plus grand */
  font-family: 'Caveat', sans-serif;
}

.vision a.cta-button {
  padding: 0.6rem 1.5rem;    /* taille du bouton dans la vision */
  background-color: #55758b; /* fond bleu-vert */
  color: white;              /* texte blanc */
  text-decoration: none;     /* pas de soulignement */
  border-radius: 4px;        /* coins arrondis */
  font-weight: bold;         /* texte en gras */
  transition: background-color 0.3s ease; /* animation couleur */
}

.vision a.cta-button:hover {
  background-color: #4e768ecc; /* fond plus clair au survol */
}

.vision p strong {
  color: #fff;            /* mots en gras dans la vision en bleu */
  font-family: 'inter', sans-serif;
  font-size: clamp(1.1rem, 1.1vw, 1rem);        /* texte un peu plus grand */
  line-height: 1.7;          /* interligne */
  font-weight: bold;
}

/* ==== SLIDER ANNONCEURS ==== */

/* Reset global du box-sizing pour tous les éléments */
* {
  box-sizing: border-box; /* inclut padding/bordures dans les tailles */
}

.slider-container {
  overflow: hidden;                /* masque ce qui dépasse horizontalement du slider */
  position: relative;              /* permet positionnement absolu des flèches */
  width: 100%;                     /* slider prend toute la largeur */
  flex: 1;                         /* peut s’étirer si dans un flex */
  display: flex;                   /* permet la disposition interne verticale */
  flex-direction: column;          /* empile slider + contrôles verticalement */
  min-height: 0;                   /* permet au container de se réduire correctement */
  margin: 20px 0;                  /* marge verticale autour du slider */
  border: none;/*1px solid #ddd;          /* bord gris clair autour */
  background: white;               /* fond blanc pour le slider */
  margin-top: 0;                   /* supprime marge haute (écrase les 20px de plus haut) */
  margin-bottom: 0;                /* supprime marge basse */
}

.slider {
  display: flex;                    /* les slides sont côte à côte */
  transition: transform 0.8s ease;  /* animation fluide lors du changement de slide */
  will-change: transform;           /* optimisation pour les animations */
}

.slide {
  display: flex;          /* texte + image alignés horizontalement par défaut */
  width: 100vw !important;/* chaque slide prend toute la largeur de la fenêtre */
  min-width: 0;           /* pour éviter les débordements dans flex */
  flex-shrink: 0;         /* empêche la slide de se réduire */
  position: relative;     /* pour un contenu positionné à l’intérieur éventuellement */
  align-items: center;    /* centre verticalement texte et image */
  padding: 20px;          /* marge intérieure autour du contenu */
  gap: 20px;              /* espace entre le bloc texte et l’image */
}

/* Texte à gauche dans cadre */
.slide .text-container {
  border: 2px solid #fff;           /* cadre blanc autour du texte */
  padding: 15px;                        /* marge interne */
  flex-basis: 60%;                      /* occupe ~60% de la largeur */
  display: flex;                        /* pour centrage interne */
  justify-content: center;              /* centre horizontalement le contenu */
  align-items: center;                  /* centre verticalement le contenu */
  height: auto;                         /* hauteur automatique */
  text-align: center;                   /* texte centré */
  border-radius: 1rem;                  /* coins arrondis */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* légère ombre */
  background-color: #fff;               /* fond blanc */
}

.text-content {
  display: flex;                /* container pour les textes h1/h2/p */
  flex-direction: column;       /* empile les textes verticalement */
  justify-content: center;      /* centre verticalement */
  align-items: center;          /* centre horizontalement */
}

.slide .text-container p {
  font-family: 'Inter', sans-serif; /* police du paragraphe */
  font-size: 1.1rem;                    /* taille de texte */
  color: #333;                          /* couleur du texte */
  line-height: 1.5;                     /* interligne */
  /*margin: 0;*/
  margin-top: 2rem;                            /* pas de marge autour */
}

.slide .text-container h1 {
  font-family: 'Knewave', sans-serif; /* police du titre principal */
  font-size: 2.2rem;                  /* taille du titre */
  color: #906FC5;/*55758b;/*f5a623;                     /* orange */
  margin: 0 0 1rem;                  /* marge en bas du titre */
}

.slide .text-container h2 {
  font-family: 'Caveat', sans-serif; /* police du sous-titre */
  font-weight: bold;                   /* gras */
  font-size: 2rem;                  /* taille */
  color: #55758b;/*55758b;                     /* vert doux */
  margin-bottom: 1rem;                /* espace en dessous */
}
.slide .text-container h3 {
  font-family: 'Knewave', sans-serif; /* police du titre principal */
  font-size: 2.2rem;                  /* taille du titre */
  color: #906FC5;/*55758b;/*f5a623;                     /* orange */
  margin: 0 0 1rem;                  /* marge en bas du titre */
}

/* Image à droite */
.slide img {
  -webkit-transform: translateZ(0);       /* hack pour améliorer le rendu sur certains navigateurs */
  backface-visibility: hidden;           /* améliore les transformations 3D */
  width: 100%;                           /* image occupe toute la largeur de sa colonne */
  max-width: 800px;                      /* largeur max */
  height: auto !important;               /* hauteur automatique (ratio respecté) */
  display: block;                        /* évite les espaces blancs sous l’image */
  object-fit: contain;                   /* image entière visible (sans recadrage agressif) */
  border-radius: 1rem;                   /* coins arrondis */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* ombre douce */
}

.slider-controls {
  position: relative;   /* pour positionner les flèches */
  text-align: center;   /* centre les points de navigation */
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.5rem 0;    /* espace vertical autour des contrôles */
  background: transparent; /* pas de fond spécifique */
}

#dots {
  display: inline-block; /* les points prennent juste la largeur nécessaire */
  margin: 0 auto;
  padding: 0.5rem 0;
}

.dot {
  display: inline-block;       /* petits cercles sur une ligne */
  width: 12px;
  height: 12px;
  margin: 5px;
  background-color: #ccc;      /* couleur par défaut */
  border-radius: 50%;          /* forme ronde */
  cursor: pointer;             /* main au survol */
}

.dot.active {
  background-color: #55758b;   /* point actif en bleu-vert */
}

#prevSlide, #nextSlide {
  position: absolute;              /* les flèches sont positionnées par rapport au slider */
  top: 50%;                        /* verticalement au milieu */
  transform: translateY(-50%);     /* centre exact vertical */
  background: transparent !important; /* pas de fond (sur desktop) */
  color: #55758b !important;       /* couleur des flèches */
  border: none;                    /* sans bordure */
  font-size: 2rem;                 /* taille des flèches */
  cursor: pointer;                 /* main au survol */
  z-index: 10;                     /* au-dessus des slides */
  opacity: 0.7;                    /* légèrement transparent */
  transition: opacity 0.3s;        /* animation d’opacité au survol */
  margin: 0;
  padding: 1rem;                   /* zone cliquable autour de la flèche */
}

#prevSlide {
  left: 10px;   /* position à gauche */
}

#nextSlide {
  right: 10px;  /* position à droite */
}

#prevSlide:hover, #nextSlide:hover {
  opacity: 1;                                 /* flèche pleinement visible au survol */
  background: rgba(255,255,255,0.2) !important; /* léger fond blanc transparent au survol */
}

/* ==== Footer ==== */
footer {
  /*background-color: #2a536e;              /* fond bleu-vert */
   background: linear-gradient(
    90deg,
    rgba(189, 67, 255, 0.9) 0%,   /* violet 90% opaque */
    rgba(42, 83, 110, 0.9) 100%   /* bleu/vert 90% opaque */
  );
  backdrop-filter: blur(4px);
  padding: 0.5rem 1rem;                   /* marge interne */
  color: white;                           /* texte blanc */
  text-align: center;                     /* texte centré */
  font-family: 'Inter', sans-serif;   /* police du footer */
}

.footer-container {
  max-width: 900px;  /* largeur max du contenu du footer */
  margin: 0 auto;    /* centré horizontalement */
  padding: 0 1rem;   /* padding horizontal */
}

.footer-nav {
  margin-bottom: 0.25rem; /* espace sous la navigation du footer */
}

.footer-nav a {
  color: white;            /* liens blancs dans le footer */
  margin: 0 1rem;          /* espace horizontal entre les liens */
  text-decoration: none;   /* pas de soulignement */
  font-weight: 600;        /* texte un peu plus gras */
}

.footer-nav a:hover {
  text-decoration: underline; /* soulignement au survol */
}
footer p {
  margin: 0.2rem 0;              /* évite le gros bloc de marge par défaut */
  font-size: 0.8rem;             /* texte un peu plus petit */
  line-height: 1.2;              /* moins d’interligne */
}

/* ==== Formulaire commun (contact + inscription) ==== */
.formulaire {
  max-width: 600px;                             /* largeur max du bloc formulaire */
  margin: 3rem auto;                            /* centré avec marge verticale */
  padding: 2rem;                                /* padding interne */
  background-color: #fdfdfd;                    /* fond très légèrement grisé */
  border: 2px solid #55758b;                    /* cadre bleu-vert */
  border-radius: 10px;                          /* coins arrondis */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);      /* ombre douce */
  box-sizing: border-box;                       /* inclut bordure et padding dans la largeur */
}
.formulaire h1 {
  color: #4e768e;       /* titre du formulaire en bleu */
  text-align: center;   /* centré */
  margin-bottom: 0.5rem;/* petit espace sous le titre */
}
.formulaire h2 {
  color: #4e768e;       /* titre du formulaire en bleu */
  text-align: center;   /* centré */
  margin-bottom: 0.5rem;/* petit espace sous le titre */
}

.formulaire p {
  text-align: center;   /* texte descriptif centré */
  color: #444;          /* gris foncé */
  margin-bottom: 2rem;  /* espace avant les champs */
}

form {
  display: flex;             /* layout des champs en flex */
  flex-direction: column;    /* empile les champs verticalement */
  gap: 1rem;                 /* espace entre les champs */
  max-width: 600px;          /* largeur max du formulaire */
  margin: 0 auto;            /* centré horizontalement */
}

.form-group {
  display: flex;             /* container pour label + champ */
  flex-direction: column;    /* label au-dessus du champ */
  margin-bottom: 1.2rem;     /* espace sous chaque groupe */
}

.form-group label {
  margin-bottom: 0.4rem;     /* espace entre label et champ */
  font-weight: 500;          /* label un peu gras */
  color: #333;               /* label en gris foncé */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
  width: 100%;               /* champs prennent toute la largeur disponible */
  padding: 0.6rem;           /* padding interne */
  font-size: 1rem;           /* taille texte dans les champs */
  border-radius: 5px;        /* coins arrondis */
  border: 1px solid #ccc;    /* bordure gris clair */
  box-sizing: border-box;    /* inclut padding dans la largeur */
  resize: vertical;          /* textarea redimensionnable verticalement */
}

.form-group.checkbox {
  flex-direction: row;       /* label et checkbox sur une ligne */
  align-items: center;       /* alignement vertical au centre */
  justify-content: center;   /* centré horizontalement */
}

.form-group.checkbox label {
  width: auto;         /* label pas forcé à 100% */
  text-align: left;    /* texte aligné à gauche */
  margin: 0;           /* pas de marge supplémentaire */
}

form button {
  background-color: #906fc5;  /* bouton bleu-vert */
  backdrop-filter: blur(4px);
  color: white;               /* texte blanc */
  padding: 0.8rem 1.5rem;     /* taille du bouton */
  border: none;               /* pas de bordure */
  font-weight: bold;          /* texte en gras */
  font-size: 1rem;            /* taille du texte */
  border-radius: 5px;         /* coins arrondis */
  cursor: pointer;            /* main au survol */
  transition: background-color 0.3s ease, font-family 0.1s ease; /* animation de couleur */
  align-self: center;         /* centre le bouton dans le formulaire */
  margin-top: 1rem;           /* espace au-dessus du bouton */
}

form button:hover {
  background-color: #7B56B8cc;  /* couleur plus claire au survol */
  font-family: 'Knewave', cursive;
}

/* Centrage bloc RGPD */
.form-group.rgpd {
  max-width: 1200px;   /* largeur max du bloc RGPD */
  margin: 2rem auto;   /* centré avec marge verticale */
  padding: 0 1rem;     /* padding horizontal */
  text-align: center;  /* texte centré */
}

/* Texte RGPD */
.form-group.rgpd p {
  font-size: 0.9rem;         /* texte un peu plus petit */
  color: #444;               /* gris foncé */
  text-align: center;        /* centré */
  margin: 0 auto 1rem;       /* pas de marge en haut, 1rem en bas */
  line-height: 1.4;          /* interligne */
  word-wrap: break-word;     /* coupe les longues lignes si besoin */
  box-sizing: border-box;
}

/* ==== Mentions légales ==== */
.mentions-container h1 {
  color: #4e768e;
  text-align: center;
  margin-bottom: 0.5rem;
}

.mentions-container h2 {
  color: #4e768e;
  text-align: left;    /* souvent mieux en mentions légales */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.mentions-container p {
  color: #333;
  text-align: left;    /* souvent mieux en mentions légales */
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.7;
  font-weight: 300 ;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.contenu-mediametrie h1 {
  color: #4e768e;
  text-align: center;
  margin-top: 0rem;
  margin-bottom: 0rem;
}
/* ==== Responsive ==== */
@media (max-width: 768px) {

  main {
    padding: 1rem;      /* réduit les marges internes sur mobile */
    max-width: 100%;    /* main prend la largeur totale */
    margin: 0 auto;
  }

  .formulaire {
    width: 100%;        /* formulaire prend toute la largeur */
    max-width: 95vw;    /* limite à 95% de la largeur de la fenêtre */
    margin: 1rem auto;  /* marges plus petites */
    padding: 1rem;      /* padding réduit */
  }

  /* Menu mobile */
  .nav-main {
    display: none;               /* menu caché tant qu’il n’a pas la classe .active */
    flex-direction: column;      /* liens empilés verticalement */
    gap: 8px;                    /* espace entre les liens */
    background: linear-gradient(
    90deg,
    rgba(116, 75, 183, 0.9) 0%,   /* violet 90% opaque */
    rgba(42, 83, 110, 0.9) 100%   /* bleu/vert 90% opaque */
    );
    backdrop-filter: blur(4px);               /* optionnel : cohérent avec le header */
    position: absolute;          /* menu flottant */
    top: 60px;                   /* sous le header */
    right: 10px;                 /* aligné à droite */
    padding: 10px;               /* padding interne */
    border-radius: 0 !important;          /* coins arrondis */
    width: 150px;                /* largeur du menu */
    z-index: 100;                /* au-dessus des autres éléments */
  }

  .nav-main a {
    display: block;              /* chaque lien en bloc (ligne entière) */
    padding: 0.5rem;             /* padding interne */
    text-align: left;            /* texte aligné à gauche */
    text-transform: uppercase;   /* texte en majuscules */
    background-color: transparent; /* ⬅ pas de bloc blanc opaque dans le menu mobile */
    color: #fff;
  }

  .nav-main.active {
    display: flex;               /* menu visible quand .active est ajouté en JS */
  }

 

  /* Formulaire mobile */
  .formulaire {
    padding: 1.5rem 1rem;        /* padding vertical/horizontal différent */
    margin: 2rem 1rem;           /* marges latérales */
  }

  form {
    gap: 0.8rem;                 /* espace réduit entre les champs */
  }

  .form-group {
    flex-direction: column;      /* label au-dessus du champ */
    align-items: stretch;        /* champs prennent toute la largeur */
  }

  .form-group label {
    width: 100%;                 /* label sur toute la largeur */
    text-align: left;
    margin-bottom: 0.3rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    font-size: 1rem;
  }

  form button {
    width: 100%;                 /* bouton pleine largeur */
    font-size: 1rem;
  }
}

/* ⚠ Media query redondante : encore des règles pour max-width:768px */
@media (max-width: 768px) {
  main {
    padding: 1rem;
    margin: 0 auto;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .formulaire {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    margin: 1rem auto;
    box-sizing: border-box;
  }

  form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-group {
    width: 100%;
    box-sizing: border-box;
  }
}

/* MOBILE : slider adapté */
@media (max-width: 768px) {
  .slide {
    flex-direction: column;  /* texte au-dessus ou au-dessous de l’image */
    align-items: stretch;
    width: 100vw;
    gap: 5px;
  }
.vision p {
  font-family: 'inter', sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1rem);        /* texte un peu plus grand */
  line-height: 1.7;          /* interligne */
  font-weight: 300;
  margin-bottom: 1.5rem;     /* espace entre les paragraphes */
  text-align: justify;        /* texte justifié */
  hyphens: auto;
  max-width: 100%;           /* ne dépasse pas le conteneur */
}

  .slide img {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    flex-basis: auto;
  }

  .slide .text-container {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 10px;
    height: auto !important;
    flex-basis: auto;
  }

  .slide .text-container p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.5;
    margin-top: 2rem;
  }

  .slide .text-container h0 {
    font-family: 'Knewave', sans-serif;
    font-size: 2.2rem;
    color: #906fc5;
    margin: 0 0 1rem;
  }

  .slide .text-container h1 {
    font-family: 'Knewave', sans-serif;
    font-size: 2.2rem;
    color: #906FC5;
    margin: 0 0 1rem;
  }

  .slider-controls {
    position: relative;
    text-align: center;
    margin-top: 0;
  }

  #prevSlide, #nextSlide {
    margin: 0 10px;
    padding: 8px 12px;
    font-size: 1.2rem;
    background-color: #55758b; /* sur mobile, fond plein pour les flèches */
    color: white;
    border: none;
    cursor: pointer;
  }

  #dots {
    display: inline-block;
    margin: 10px;
  }

  .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
  }

  .dot.active {
    background-color: #55758b;
  }

  /* Mode paysage mobile : on repasse en côte-à-côte */
  @media (max-width: 768px) and (orientation: landscape) {
    .slide {
      flex-direction: row !important; /* force côte-à-côte */
      align-items: stretch;
      gap: 8px;
    }

    .slide img {
      width: 45% !important;
      height: 100% !important;
      object-fit: cover;
      min-height: 200px;
    }

    .slide .text-container {
      width: 55% !important;
      height: 100% !important;
      padding: 8px !important;
      margin: 0;
      overflow-y: auto;
      align-self: center;
    }

    .slide .text-container h1 {
      font-size: 1.5rem !important;
      line-height: 1.3;
    }

    .slide .text-container p {
      font-size: 0.9rem !important;
      margin-bottom: 0.5rem;
    }

    .slider-controls {
      margin-top: 0.5rem;
    }

    #prevSlide, #nextSlide {
      font-size: 1.5rem;
      padding: 0.5rem;
    }
  }
}

/* Animation supplémentaire sur mobile pour le slider */
@media (max-width: 768px) {
  .slide {
    transition: all 0.3s ease;         /* transition générale */
  }

  .slide img {
    transition: max-height 0.3s ease;  /* effet si tu joues sur la hauteur */
  }
}

/* ===== Cartes AVANTAGES — mobile = carrousel, desktop = grille ===== */

/* Base : comportement MOBILE (carrousel horizontal) */
.avantages-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;               /* toutes les cartes sur une seule ligne */
  gap: 1rem;
  overflow-x: auto;                /* scroll horizontal */
  scroll-snap-type: x mandatory;   /* snap carte par carte */
  -webkit-overflow-scrolling: touch;
}

.avantages-list::-webkit-scrollbar {
  display: none;
}
.avantages-list {
  scrollbar-width: none;           /* Firefox */
}

.avantage {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 1rem;
  box-sizing: border-box;

  flex: 0 0 85%;                   /* ~85% de la largeur de l'écran */
  max-width: 85%;
  scroll-snap-align: center;       /* la carte se centre après le swipe */
}

.avantage .titre {
  font-family: 'Caveat';
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: #55758b;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.avantage .texte {
  font-size: 0.95rem;
  color: #333;
  padding: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  text-align: justify;
  hyphens: auto;

  max-height: none;
  opacity: 1;
  overflow: visible;
}

/* ===== Version DESKTOP (>= 769px) : grille 3 cartes + hover ===== */

@media (min-width: 769px) {

  .avantages-list {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;               /* retour à la ligne */
    gap: 1rem;
    overflow: visible;
    scroll-snap-type: none;
  }

  .avantage {
    flex: 0 0 calc(33.333% - 1rem); /* 3 par ligne */
    max-width: calc(33.333% - 1rem);
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
  }

  .avantage .texte {
    padding: 0;
    margin-top: 0.5rem;
    max-height: 0;                 /* replié par défaut */
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out, opacity 1s ease-in-out;
  }
}

/* Hover uniquement sur desktop avec souris */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .avantage:hover {
    transform: scale(1.03);
  }

  .avantage:hover .texte {
    max-height: 1200px;
    opacity: 1;
  }
}

/* Sécurité : pas de puces sur cette liste */
ul.avantages-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.avantages-list > li {
  list-style: none;
}
@media (max-width: 768px) {
  .avantages {
    max-width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
    overflow-x: visible;      /* la section ne déborde pas visuellement */
  }
}

@media (max-width: 768px) {
  .avantages {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  .avantage {
    margin: 0.25rem 0;   /* mini marge haut/bas pour que l’ombre respire */
  }
}
/* MOBILE : centrage propre de la 1ère et de la dernière carte */
@media (max-width: 768px) {

  .avantages-list {
    justify-content: flex-start; /* on s'assure que le flex commence bien à gauche */
    padding: 0;                  /* pas de padding parasite */
    margin: 0;                   /* centré par la section .avantages */
  }

  /* "Fausses" cartes à gauche et à droite pour centrer la 1ère et la dernière */
  .avantages-list::before,
  .avantages-list::after {
    content: "";
    flex: 0 0 7.5%;             /* la moitié de (100% - 85%) */
  }

  .avantage {
    flex: 0 0 85%;
    max-width: 85%;
    box-sizing: border-box;
    scroll-snap-align: center;
  }
}
/* Page médimétrie : main en pleine largeur */
main.contenu-mediametrie {
  max-width: 100% !important;  /* annule le max-width:900px du main global */
  margin: 0;
  padding: 0;
}

/* Titre avec un peu de marge */
main.contenu-mediametrie h1 {
  padding: 1.5rem 2rem 1rem;
}

/* Iframe pleine largeur + grande hauteur */
main.contenu-mediametrie iframe {
  display: block;
  width: 100%;
  border: none;
  min-height: 80vh;  /* au moins 80% de la hauteur de la fenêtre */
}

/* Sur la page médimétrie : footer normal, à la fin du contenu */
main.contenu-mediametrie + footer {
  position: static;
}


/* Responsif mobile : centrer le texte */
@media (max-width: 768px) {
  .hero-content {
    text-align: center;
    align-items: center;
    padding: 4rem 1.5rem 2rem;
  }

}
/* Responsive : on passe à 1 colonne sur mobile, 2 colonnes sur tablette */
@media (max-width: 992px) {
  .decarb-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .decarb-inner {
    padding: 2.5rem 1.25rem;
  }

  .decarb-inner h2 {
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .decarb-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}