@charset "UTF-8";
/* CSS Document */
/* =============================================================================
FONT
========================================================================== */
@font-face {
  font-family: 'AMUMonumentGrotesk-Regular';
  font-style: normal;
  font-weight: normal;
  src: local('AMUMonumentGrotesk-Regular'), url('../_font/AMUMonumentGrotesk-Regular.woff') format('woff');
}
@font-face {
  font-family: 'AMUMonumentGrotesk-RegularItalic';
  font-style: normal;
  font-weight: normal;
  src: local('AMUMonumentGrotesk-RegularItalic'), url('../_font/AMUMonumentGrotesk-RegularItalic.woff') format('woff');
}
@font-face {
  font-family: 'AMUMonumentGrotesk-Medium';
  font-style: normal;
  font-weight: normal;
  src: local('AMUMonumentGrotesk-Medium'), url('../_font/AMUMonumentGrotesk-Medium.woff') format('woff');
}
@font-face {
  font-family: 'AMUMonumentGrotesk-MediumItalic';
  font-style: normal;
  font-weight: normal;
  src: local('AMUMonumentGrotesk-MediumItalic'), url('../_font/AMUMonumentGrotesk-MediumItalicc.woff') format('woff');
}
@font-face {
  font-family: 'AMUMonumentGrotesk-Bold';
  font-style: normal;
  font-weight: normal;
  src: local('AMUMonumentGrotesk-Bold'), url('../_font/AMUMonumentGrotesk-Bold.woff') format('woff');
}
@font-face {
  font-family: 'AMUMonumentGrotesk-BoldItalic';
  font-style: normal;
  font-weight: normal;
  src: local('AMUMonumentGrotesk-BoldItalic'), url('../_font/AMUMonumentGrotesk-BoldItalic.woff') format('woff');
}
/* =============================================================================
BASE
========================================================================== */
*, *:after, *:before, input, label {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  background: #fff;
  color: #000;
  font-family: 'AMUMonumentGrotesk-Regular';
  font-size: 18px;
  line-height: 22px;
  font-optical-sizing: auto;
  font-style: normal;
  scroll-behavior: smooth;
}

/* =============================================================================
HEADER
========================================================================== */
header {
  z-index: 500;
}
.header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 0px;
  height: 70px; /* Fixe une hauteur  */
}

.header-logo {
	max-height: 150px;
}
.header-logo img {
max-width: 100%; /* Limite la largeur de l'image à celle de son conteneur */
height: 150px; /* Garde les proportions tout en s'adaptant à la largeur */
max-height: 150px; /* Assure une hauteur maximale */
object-fit: contain; /* Évite la déformation de l'image */
padding: 10px;
transition: all 0.3s ease;
	background: #fff;
}


.header-gauche {
  display: flex;
  flex-wrap: nowrap;
}


.onglet-droite {
  display: flex;
  flex-wrap: nowrap;
  padding: 20px;
  position: relative;
 background: none;
}


.onglet-langue {
display: flex;
flex-wrap: nowrap;
height: 100%;
justify-content: center;
align-content: center;
}




.onglet-langue button {
display: flex;
flex-wrap: nowrap;
height: 70px;
padding: 20px;
background: none;
position: relative; /* Nécessaire pour le pseudo-élément */
overflow: hidden; /* Masque les débordements */	
color: black; /* Couleur initiale du texte */
transition: color 0.4s ease; /* Transition pour le texte */	

justify-content: center;
align-items: center;		
	

}

.onglet-langue button::before {
  content: ""; /* Création du pseudo-élément */
  position: absolute;
  top: -100%; /* L'arrière-plan commence au-dessus */
  left: 0;
  width: 100%; /* S'étend sur toute la largeur */
  height: 100%; /* Couvre toute la hauteur */
  background-color: white; /* Couleur de l'arrière-plan */
  z-index: -1; /* Passe derrière le contenu */
  transition: top 0.4s ease-in-out; /* Animation fluide */
}

.onglet-langue button:hover::before {
  top: 0; /* Fait descendre le fond en hover */
}

.onglet-langue button:hover {
  color: black; /* Ajustez si nécessaire */
}



/* Position et style du bouton principal */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
	  font-size: 18px;
}



/* Contenu caché du dropdown */
.dropdown-content {
  display: none; /* Par défaut, le dropdown est caché */
  position: absolute;
  background-color: #FED100;
  z-index: 1000;
}

.dropdown-content a {
  color: black;
  padding: 20px;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #fff;
}

/* Affiche le dropdown au clic */
.dropdown.active .dropdown-content {
  display: block;
}

/* =============================================================================
ALERTES FIXES EN HAUT SANS BOOTSTRAP
========================================================================== */
.alert{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;max-width:1000px;width:calc(100% - 32px);box-shadow:0 12px 30px rgba(0,0,0,.15);border-radius:10px;padding:14px 44px 14px 16px;font-weight:600;line-height:1.4;display:flex;align-items:flex-start;gap:10px}
.alert-success{background:#e8f6ee;border:1px solid #b7e2c6;color:#135a2b}
.alert-error{background:#fdecea;border:1px solid #f5c2c0;color:#7b1c16}
.alert-warning{background:#fff8e5;border:1px solid #ffe2a7;color:#7a5200}
.alert-info{background:#eef6ff;border:1px solid #cfe3ff;color:#0b4a9e}
.alert-close{position:absolute;top:10px;right:12px;background:transparent;border:0;cursor:pointer;font-size:18px;line-height:1;opacity:.7}
.alert-close:hover{opacity:1}
@media(max-width:640px){.alert{font-size:14px}}
/* =============================================================================
HEADER SCROLL
========================================================================== */
/* Position par défaut */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Taille de l'image réduite lors du scroll */
.header.header-secondaire,
.header.header-secondaire .header-logo,
.header.header-secondaire .header-logo img,
.header.hidden .header-logo,
.header.hidden .header-logo img {
  height: 70px;
  max-height: 70px;
}
/* Header masqué lors du scroll vers le bas */
.header.hidden {
  transform: translateY(-100%);
  opacity: 0;
}
/* Header visible lors du scroll vers le haut */
.header.scrolled-up {
  transform: translateY(0);
  opacity: 1;
}

/* =============================================================================
MENU BOUTON
========================================================================== */
.menu-btn {
  z-index: 10000000000000000;
  cursor: pointer;
  border: 0 none;
  display: block;
  height: 30px;
  width: 30px;
  background: none;
}
.menu-btn::before {
  content: "";
  position: absolute;
  top: -100%; /* Cache le fond en haut au départ */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Couleur du fond animé */
  z-index: -1; /* Derrière le bouton */
  transition: top 0.4s ease-in-out; /* Transition fluide */
}
.menu-btn:hover::before, .menu-btn.clicked::before {
  top: 0; /* Fond visible lors du survol ou du clic */
}
.menu-btn.active::before {
  top: 0; /* Assurez-vous que le fond reste visible */
  background-color: white; /* Gardez le fond blanc */
}
.croix {
  fill: #fff;
  stroke: #000;
  stroke-miterlimit: 10;
}
.croix03 {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes opacity {
  0% {
    opacity: 1;
    ;
  }
  100% {
    opacity: 0;
    ;
  }
}
.croix01, .croix02 {
  transform-box: fill-box;
  transform-origin: center;
}
/* Classe activée lors du clic */
.active .croix01 {
  animation: rotate01 0.5s forwards;
}
.active .croix03 {
  animation: opacity 0s forwards;
}
.active .croix02 {
  animation: rotate02 0.5s forwards;
}
.inactive .croix01 {
  animation: rotate01Reverse 0.5s forwards;
}
.inactive .croix02 {
  animation: rotate02Reverse 0.5s forwards;
}
.inactive .croix03 {
  animation: opacityReverse 0.5s forwards;
}
@keyframes rotate01 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(45deg) translate(3.5px, 3.5px);
  }
}
@keyframes rotate02 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-45deg) translate(3.5px, -3.5px);
  }
}
@keyframes rotate01Reverse {
  0% {
    transform: rotate(45deg) translate(3.5px, 3.5px);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes rotate02Reverse {
  0% {
    transform: rotate(-45deg) translate(3.5px, -3.5px);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes opacityReverse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* =============================================================================
MENU
========================================================================== */
.overlay {
  display: none;
  position: absolute;
  z-index: 50000000;
  background-color: #fff;
  font-family: 'AMUMonumentGrotesk-Bold';
  font-size: 20px;
  line-height: 25px;
  top: 70px;
  right: 0;
  padding: 25px;
}
.overlay.active {
  display: block;
}
.menu-list {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: end;
  margin-right: 100px;
}
.menu-list li {}
.menu-list-inside li {
  display: flex;
  align-items: center;
  padding: 2px;
  transition: transform 0.3s ease; /* Transition pour le mouvement */
  cursor: pointer;
}
.menu-list-inside li:hover {
  transform: translateX(10px); /* Déplace l'élément légèrement vers la droite */
}
.menu-list-inside a {
  color: #000;
  text-align: right;
  text-decoration: none;
  transition: all 0.2s ease;
}
.menu-list, .menu-list li {
  list-style: none;
}
.menu-list-inside a:hover .menu-titre {
  color: #000;
  text-decoration: none;
}
/* =============================================================================
SECTION
========================================================================== */
.section {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 50px;
	gap: 20px;
}
.section-picto {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
	gap: 10px;
}
.section-picto img {
  height: 15px;
  margin-bottom: 3px;
}

.section-texte {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: clamp(18px, 2vw, 22px);
}

.section-titre {
    font-size: clamp(25px, 4vw, 60px);
    line-height: clamp(25px, 4.5vw, 65px);
    text-wrap: balance;
    text-align: right;

}
/* =============================================================================
CONTAINER
========================================================================== */
.content-img {
  background: center / cover no-repeat url("../_images/mockup-container-ok1.jpg"), #9966ff;
  min-height: 1000px;
  position: relative; /* Positionnement relatif pour gérer le dépassement */
  will-change: transform; /* Optimise l'animation */
}
.haut {
  display: flex;
  justify-content: end; /* Centre horizontalement */
  align-items: start; /* Centre verticalement */
}
.bas {
  display: flex;
  justify-content: end; /* Centre horizontalement */
  align-items: end; /* Centre verticalement */
}
.container {
  display: flex; /* Active le mode flexbox */
  flex-direction: column; /* Positionne les enfants horizontalement */
  max-height: 100%;
  padding: 50px;
  position: relative; /* Nécessaire pour les ajustements de position */
}
.container-1000 {
  width: 100%;
  max-width: 1000px;
}
.container-1500 {
  width: 100%;
  max-width: 1500px;
}
.flex-end {
  justify-content: flex-end; /* Aligne les enfants à gauche */
  align-items: flex-end; /* Aligne les enfants en haut */
}
.flex-start {
  justify-content: flex-start; /* Aligne les enfants à gauche */
  align-items: flex-start; /* Aligne les enfants en haut */
}
.container img {
  max-width: 100%; /* L'image s'adapte au conteneur */
  max-height: 100%;
}
.image-container {
  width: 100%;
  height: 100%; /* Taille fixe du conteneur */
  position: relative; /* Nécessaire pour contenir l'image */
}
.image-container-inside {
  width: 100%;
  height: 700px; /* Taille fixe du conteneur */
  overflow: hidden; /* Masque ce qui dépasse */
  position: relative; /* Nécessaire pour contenir l'image */
  margin-bottom: 50px;
}
.scroll-image {
  width: 100%; /* S'étend sur tout le conteneur */
  height: 120%; /* L'image est légèrement plus grande pour permettre le mouvement fluide */
  position: absolute; /* Permet le mouvement libre */
  top: 0;
  left: 0;
  transform: translateY(0); /* Position initiale sans mouvement */
  will-change: transform; /* Optimisation pour le rendu */
}
.image-container-01 {
  background: center / cover no-repeat url("../_images/mockup-container-ok.jpg");
  z-index: 2;
}
.image-container-02 {
  background: center / cover no-repeat url("../_images/mockup-container-ok2.jpg");
  z-index: 2;
}
.image-container-03 {
  background: center / cover no-repeat url("../_images/mockup-container-ok4.jpg");
  z-index: 2;
}
.image-container-04 {
  background: center / cover no-repeat url("../_images/mockup-container-ok8.jpg");
  z-index: 2;
}
.image-container-06 {
  background: center / cover no-repeat url("../_images/mockup-container-ok5.jpg");
  z-index: 2;
}
.container p {
  margin-bottom: 15px;
  color: #000;
}
.container li {
  color: #000;
}
.text-container-header {
  max-width: 800px;
  padding: 50px;
  position: relative; /* Nécessaire pour les ajustements de position */
  margin-top: 150px;
}
.text-container {
  justify-content: flex-end;
  max-width: 800px;
  max-height: 100%;
  width: 100%;
  padding: 50px;
  margin-top: 50px;
  position: relative; /* Nécessaire pour les ajustements de position */
}
.calendrier  {
position: relative;
width: 100%;	
}
.calendrier img {
max-width: 500px;	
}
/* =============================================================================
COULEUR
========================================================================== */
.fond-couleur, .swiper-fond-couleur {
  position: absolute;
  width: 20%; /* Largeur initiale */
  height: 100%; /* Hauteur initiale */
  z-index: 0;
  bottom: -400px; /* Ajustez selon vos besoins */
  left: -60px; /* Ajustez selon vos besoins */
  transition: width 0.2s ease-out, height 0.2s ease-out; /* Transition fluide */
}
/* BACKGROUND */
.violet {
  background: #9966ff;
}
.vert {
  background: #53DE94;
}
.orange {
  background: #FF7900;
}
.corail {
  background: #FF8B7C;
}
.bleuclair {
  background: #CDEAFC;
}
.lavande {
  background: #DDCCFF;
}
.bleumarine {
  background: #00008E;
}
.jaune {
  background: #FED100;
}
.bleuciel {
  background: #33CCFF;
}
.blanc {
  background: #fff;
}
.noir {
  background: #000;
}
/* FONT */
.color-white {
  color: white; /* Couleur blanche pour l'icône */
}
.color-black {
  color: black; /* Couleur blanche pour l'icône */
}


/* =============================================================================
CTA
============================================================================= */
.cta{
  text-align:left;
  font-size:14px;
}

/* STYLE COMMUN POUR <a> ET <button> */
.cta a,
.cta button{
  display:inline-block; /* ALIGNER COMME UN BOUTON */
  position:relative; /* NÉCESSAIRE POUR LA FLÈCHE ABSOLUE */
  text-decoration:none;
  color:#000;
  font-family:'AMUMonumentGrotesk-Bold';
  font-style:normal;
  font-weight:normal;
  padding:10px 20px; /* ON FORCE ICI LE PADDING */
  border:0.5px solid black; /* ON FORCE ICI LE CONTOUR */
  transition:all 0.3s ease;
  overflow:hidden;
  width:auto;
  height:auto;
  cursor:pointer;
  background:none; /* IMPORTANT : PAS DE FOND PAR DÉFAUT SUR LES <button> */
}

/* RÉINITIALISATION SPÉCIFIQUE AUX <button> */
.cta button{
  border:0.5px solid black; /* ON GARDE LA BORDURE */
  padding:10px 20px; /* ON GARDE LE PADDING */
  appearance:none; /* SUPPRIME LE STYLE NATIVE DU NAVIGATEUR */
  -webkit-appearance:none;
  -moz-appearance:none;
}
.cta button:focus{outline:none;}

/* STYLE FOCUS ACCESSIBLE */
.cta a:focus-visible,
.cta button:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
}

/* STYLES POUR LA FLÈCHE */
.cta a .fleche,
.cta button .fleche{
  position:absolute;
  top:0;
  right:0;
  margin-left:10px;
  transform:translateX(20px);
  opacity:0;
  transition:transform 0.3s ease,opacity 0.3s ease;
  width:28px;
  height:28px;
  border-left:0.5px solid black;
  border-bottom:0.5px solid black;
}

/* HOVER COMMUN */
.cta a:hover,
.cta button:hover{
  padding-right:50px;
}
.cta a:hover .fleche,
.cta button:hover .fleche{
  transform:translateX(0);
  opacity:1;
}
/* =============================================================================
SEPARATEUR
========================================================================== */
.separateur {
  position: relative; /* Nécessaire pour le pseudo-élément */
  overflow: hidden; /* Pour cacher les débordements */
  border-bottom: 0.5px solid transparent; /* La bordure réelle est remplacée */
}
/* Pseudo-élément pour animer la bordure */
.separateur::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.5px;
  background-color: #000;
  width: calc(var(--separator-progress, 0) * 200%); /* La largeur dépend de la variable */
  transition: width 0.1s linear; /* Lisse l'animation si nécessaire */
}
.separateur-header {
  position: relative; /* Nécessaire pour le pseudo-élément */
  overflow: hidden; /* Pour cacher les débordements */
  padding-bottom: 25px;
  margin: 0 0 30px 0;
  border-bottom: 0.5px solid #000; /* La bordure réelle est remplacée */
}
.separateur-grand {
  padding-bottom: 100px;
  margin: 0 50px 30px 50px;
}
.separateur-petit {
  padding-bottom: 25px;
  margin: 0 0 30px 0;
}
/* SEPARATION */
.separation {
  padding: 10px;
  margin: auto;
  max-width: 1440px;
  height: 60px;
}
/* =============================================================================
LIEN
========================================================================== */
a {
  text-decoration: none;
  border: 0;
  transition: transform 0.2s ease; /* Transition pour le mouvement */
  cursor: pointer;
  color: #000;
}
a img {
  border: 0;
}
a:active, a:visited, a:link, a:hover {
  outline-style: none;
}
a:hover {
  color: #000;
  transition: transform 0.2s ease; /* Transition pour le mouvement */
}
/* DONWLOAD */

/* CONTENEUR CLIQUABLE */
.mod06 a,
.mod06 label{
  display:flex; /* MET TOUT SUR UNE LIGNE */
  flex-direction:row;
  flex-wrap:nowrap; /* FORCE UNE SEULE LIGNE */
  justify-content:space-between;
  align-items:center; /* VERTICALEMENT CENTRÉ */
  border:0.5px solid #000;
  cursor:pointer; /* MAIN AU SURVOL */
  text-decoration:none;
  color:#000;
  width:100%;
  box-sizing:border-box;
    margin-bottom:9px;
}

/* ÉVITER QUE LE RESET GLOBAL N'ANNULLE LE STYLE DU LABEL */
.mod06 label{background:none;}

/* ÉLÉMENTS INTERNES DANS LE CONTENEUR CLIQUABLE */
.mod06 a .mod06-picto,
.mod06 label .mod06-picto{
  flex-grow:1;
  text-align:center;
  margin:0;
  padding-right:9px;
  padding-top:9px;
}

.mod06 a .mod06-texte,
.mod06 label .mod06-texte{
  flex-grow:10;
  color:#000;
  text-align:left;
  margin:0;
}

.mod06 a .mod06-format,
.mod06 label .mod06-format{
  flex-grow:1;
  color:#000;
  text-align:right;
  margin:0;
  padding-right:15px;
}

/* RESPONSIVE: CASSER LA LIGNE ET CACHER LE FORMAT COMME AVANT */
@media only screen and (max-width:600px){
  .mod06 a,
  .mod06 label{flex-wrap:wrap;} /* AUTORISE LE RETOUR À LA LIGNE */
  .mod06-format{display:none;}
}

/* CHAMP CACHÉ */
.hidden{display:none;}

/* MESSAGE D’ERREUR CACHÉ PAR DÉFAUT */
.error-message{
  display:none;
  color:#d00;
  font-size:.9em;
  margin-top:4px;
}

/* ÉTAT D’ERREUR SUR LE LABEL */
.mod06 label.error{
  border:1px solid #d00;
  background:#ffe6e6;
}

/* REND INVISIBLE MAIS ACCESSIBLE ET FOCALISABLE */
/* REND INVISIBLE MAIS ACCESSIBLE */
.hidden1{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}

/* MESSAGE D’ERREUR CACHÉ PAR DÉFAUT */
.error-message{
  display:none;
  color:#d00;
  font-size:.9em;
  margin-top:4px;
  transition:opacity .3s ease;
  opacity:0;
}

/* ÉTAT D’ERREUR SUR LE LABEL */
.mod06 label.error{
  border:1px solid #d00;
  background:#ffe6e6;
}

/* AFFICHAGE ANIMÉ DU MESSAGE */
.error-message.visible{
  display:block;
  opacity:1;
}
.alert-message{
  margin-top:15px;
  padding:10px 15px;
  border-radius:4px;
  font-size:.95em;
  background:#ffe6e6;
  border:1px solid #d00;
  color:#900;
}
.alert-message:empty{display:none;}
/* =========================================================================/* 
FORMULAIRE
========================================================================== */
/* Conteneur général */
.formulaire {
  width: 100%; /* Formulaire prend toute la largeur */
  display: flex;
  flex-direction: column; /* Les lignes sont organisées verticalement */
  box-sizing: border-box;
}
/* Ligne de formulaire */
.form-row {
  display: flex; /* Active Flexbox pour aligner les champs horizontalement */
  flex-wrap: wrap; /* Permet le passage des champs les uns sous les autres */
  gap: 10px; /* Espacement entre les champs */
  margin-bottom: 10px;
}
/* Champs de formulaire */
.form-row input {
  flex: 1 1 calc(50% - 10px); /* Champs côte à côte, chacun occupe 50% moins l'espacement */
  min-width: 300px; /* Largeur minimale pour éviter un écrasement */
  max-width: 100%; /* Empêche de dépasser */
  height: 30px;
  border: solid 0.5px;
  padding: 2px 10px;
  transition: background-color 0.3s ease-in-out;
  font-family: 'AMUMonumentGrotesk-Regular';
  color: #000;
  box-sizing: border-box; /* Inclut les paddings dans la largeur totale */
}
form input[type="text"]:hover, form input[type="email"]:hover, form input[type="tel"]:hover, form input[type="url"]:hover, form textarea:hover {
  transition: background-color 0.3s ease-in-out;
  background: #33CCFF;
  color: #000;
}
form input:focus, form textarea:focus {
  outline: 0;
  background: #FED100;
  color: #000;
  transition: background-color 0.3s ease-in-out;
}
::-webkit-input-placeholder {
  color: #000;
}

textarea {
  border: solid 0.5px;
  padding: 10px;
  width: 100%;
  min-height: 100px;
}


/* =============================================================================
BOUTON UPLOAD
========================================================================== */
/* Masquer l'input natif */
input[type="file"] {
  display: none;
}
/* =============================================================================
TEXTE
========================================================================== */
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.left {
  text-align: left;
}
h1 {
  font-family: 'AMUMonumentGrotesk-Regular';
  font-style: normal;
  font-weight: normal;
  font-size: 40px;
  line-height: 35px;
  text-wrap: balance;
  color: #000;
}
.padding-300 {
  padding-left: 300px;
}
/* Conteneur masquant */
.title-container {
  position: relative;
  overflow: hidden; /* Masque tout débordement */
  height: auto; /* Ajustez à la hauteur exacte du titre */
  padding: 5px;
}
/* Titre lui-même */
.slide-title {
  position: relative;
  transform: translateY(100%); /* Initialement hors écran en bas */
  transition: transform 0.8s ease-out; /* Animation fluide */
}
/* Une fois l'animation déclenchée */
.slide-title.animated {
  transform: translateY(0); /* Position finale */
}
.slide-title0 {
  position: relative;
  transform: translateY(100%); /* Initialement déplacé de toute sa hauteur vers le bas */
  transition: transform 0.5s ease-out; /* Transition fluide pour un effet naturel */
  will-change: transform; /* Optimisation pour les animations */
}
/* État animé, déclenché par la variable CSS */
.slide-title0 {
  transform: translateY(var(--title-translate, 100%)); /* Position animée */
}
strong {
  font-family: 'AMUMonumentGrotesk-Bold';
  font-style: normal;
  font-weight: normal;
  color: #000;
}
.highlight {
  font-family: 'AMUMonumentGrotesk-Bold';
  font-style: normal;
  font-weight: normal;
  color: #000;
}
h2 {
  font-family: 'AMUMonumentGrotesk-Regular';
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 35px;
  text-wrap: balance;
}
h3 {
  font-family: 'AMUMonumentGrotesk-Regular';
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 20px;
  text-wrap: balance;
}
p {
  font-family: 'AMUMonumentGrotesk-Regular';
  font-style: normal;
  font-weight: normal;
  text-wrap: balance;
}
.chapo {
  font-family: 'AMUMonumentGrotesk-Regular';
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 25px;
  text-wrap: balance;
}
i {
  font-family: 'AMUMonumentGrotesk-RegularItalic';
  font-style: normal;
  font-weight: normal;
}
b {
  font-family: 'AMUMonumentGrotesk-Bold';
  font-style: normal;
  font-weight: normal;
}
li {
  font-style: normal;
  font-weight: normal;
  padding-left: 0px;
  margin: 5px 0 0px 15px;
  text-wrap: balance;
}

/* =============================================================================
CALENDRIER
========================================================================== */
.calendrier {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 50px auto;
  max-width: 1000px;
}

/* chaque ligne = flèche | date | cercle | texte */
.calendrier-ligne {
  display: grid;
  grid-template-columns: 50px 150px 40px auto;
  align-items: center;
  gap: 20px;
  position: relative;
  width: 100%;
}

/* flèche */
.calendrier-arrow {
  width: 40px;
  height: 40px;
  background: url("../_images/fleche-noire-anim.svg") no-repeat center;
  background-size: contain;
  opacity: 0; /* cachée par défaut */
  transition: opacity 0.3s ease;
}

/* flèche visible seulement pour la ligne active */
.calendrier-ligne.active .calendrier-arrow {
  opacity: 1;
}

/* cercles */
.calendrier-circle {
  width: 35px;
  height: 35px;
  background: #9966ff;
  border: 4px solid white;
  border-radius: 50%;
  margin: auto;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease; /* transition douce */
	
}
/* cercle actif centré */
.calendrier-ligne.active .calendrier-circle {
  width: 50px;
  height: 50px;
margin-left: -4px;
}


/* supprimer les lignes par cercle */
.calendrier-circle::after {
  display: none !important;
}

/* ligne unique verticale */
.calendrier::before {
  content: "";
  position: absolute;
  top: 20px;              /* démarre au centre du premier cercle */
  bottom: 20px;           /* s’arrête au centre du dernier cercle */
  left: calc(50px + 170px + 20px + 20px); 
  /* explication : 
     50px (col flèche) + 150px (col date) + 20px (gap) + moitié de 40px (col cercle) */
  width: 1px;
  background: black;
  transform: translateX(0);
  z-index: 0;
}

/* date */
.calendrier-date {
  text-align: right;
  font-weight: bold;
}

/* texte */
.calendrier-texte {
  text-align: left;
  line-height: 1.4;
	text-wrap: balance;
}



.rond {
	animation: scale;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	transform-box: fill-box;
	transform-origin: center;
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
.rond01 {
	animation-delay: 0s;
}
.rond02 {
	animation-delay: 0.2s;
}
.rond03 {
	animation-delay: 0.4s;
}
.rond04 {
	animation-delay: 0.6s;
}
.rond05 {
	animation-delay: 0.8s;
}
.rond06 {
	animation-delay: 1s;
}


/* =============================================================================
CALENDRIER RESPONSIVE
========================================================================== */

@media only screen and (max-width: 800px) {
/* chaque ligne = flèche | date | cercle | texte */
.calendrier-ligne {
  display: grid;
  grid-template-columns: 0px 100px 40px auto;
  align-items: center;
  gap: 20px;
  position: relative;
  width: 100%;
}



/* ligne unique verticale */
.calendrier::before {
  content: "";
  position: absolute;
  top: 20px;              /* démarre au centre du premier cercle */
  bottom: 20px;           /* s’arrête au centre du dernier cercle */
  left: calc(0px + 100px + 40px + 20px); 
  /* explication : 
     50px (col flèche) + 150px (col date) + 20px (gap) + moitié de 40px (col cercle) */
  width: 1px;
  background: black;
  transform: translateX(0);
  z-index: 0;
}

}



/* =============================================================================
FOOTER
========================================================================== */
/* Styles généraux pour le footer */
footer {
  position: relative;
  font-size: 12px; /* Taille de police plus petite */
  color: white; /* Texte blanc */
  display: flex;
  flex-direction: column; /* Organisation verticale des sections */
  margin-top: 200px;
  background: #9966ff;
}
/* Conteneur principal du footer */
.footer-haut {
  display: flex;
  flex-direction: column; /* Sections organisées verticalement */
  gap: 20px; /* Espacement entre les sections */
  padding: 20px; /* Espacement interne */
  min-height: 500px;
}
/* Section "Nous suivre" et flèche de retour */
.rs {
  display: flex; /* Active Flexbox */
  align-items: center; /* Aligne les éléments verticalement */
  justify-content: space-between; /* Sépare les réseaux sociaux et la flèche */
  margin-top: 50px;
  transition: filter 0.3s ease;
}
/* Aligner les icônes des réseaux sociaux */
.rs div {
  display: flex; /* Aligne horizontalement le texte et les icônes */
  align-items: center; /* Centre verticalement */
}
/* Aligner les icônes des réseaux sociaux */
.rs div div {
  margin-right: 20px;
  text-align: left;
}
.rs a img {
  transition: filter 0.3s ease;
  align-content: center;
}
.rs a:hover img {
  filter: brightness(0) invert(0); /* Rend l'image blanche */
  transition: filter 0.3s ease;
  border: 1px solid black; /* Bordure initiale */
}
.rs a img {
  height: 20px; /* Taille des icônes */
  width: 20px;
  margin: 0 2px; /* Espacement horizontal entre les icônes */
  border: 1px solid white; /* Bordure initiale */
}
/* Séparateur */
.footer-separateur {
  border-bottom: 0.5px solid white; /* Ligne blanche */
  width: 100%; /* Occupe toute la largeur */
}
/* Footer menu */
.footer-menu {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
  justify-content: flex-start; /* Alignement à gauche */
  gap: 10px; /* Espacement entre les éléments */
  text-align: left; /* Texte aligné à gauche */
}
.footer-menu div {
  align-content: center;
}
.footer-menu div a {
  color: white;
  text-decoration: underline;
  transition: color 0.5s ease;
}
.footer-menu div a:hover {
  color: black;
  transition: color 0.5s ease;
}
/* Conteneur principal du footer */
.footer-bas {
  display: flex;
  gap: 20px; /* Espacement entre les sections */
}
.copyright {
  flex: 1; /* Laisse le texte prendre l'espace disponible */
  white-space: nowrap; /* Empêche le texte d’être coupé */
  display: flex; /* Active Flexbox pour le logo */
  align-items: flex-end; /* Positionne le logo en bas */
  height: auto;
  padding-left: 20px;
  padding-bottom: 20px;
}
/* Logo du footer */
.footer-logo {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: opacity .3s ease;
}
.footer-logo.active {
  opacity: 1;
}
.footer-logo img, .footer-logo svg {
  width: 500px;
  height: auto;
  max-width: 100%;
}
.footer-logo-01 {
  fill: #000
}
.footer-logo-02 {
  fill: #fff
}
.footer-logo.active #blocA, .footer-logo.active #lettre_a {
  animation: footer-logo-translate 1s 0s 1 both;
}
.footer-logo.active #blocM, .footer-logo.active #lettre_m {
  animation: footer-logo-translate 1s .3s 1 both;
}
.footer-logo.active #blocU, .footer-logo.active #lettre_U {
  animation: footer-logo-translate 1s .6s 1 both;
}
@keyframes footer-logo-translate {
  0% {
    transform: translateY(200%)
  }
  100% {
    transform: translateY(0)
  }
}


.retour-top {
  transition: filter 0.3s ease;
}
.retour-top a {
  transition: filter 0.3s ease;
}

/* =============================================================================
VIDEO 
========================================================================== */

.video-container {
  width: 100%;
  height: 100%; /* Taille fixe du conteneur */
  position: relative; /* Nécessaire pour contenir l'image */
}
.video-container-inside {
  width: 100%;
  overflow: hidden; /* Masque ce qui dépasse */
  position: relative; /* Nécessaire pour contenir l'image */
}


video, #video-bg {
	position: relative;
	z-index: 10000;
}


/* =============================================================================
SWIPER 
========================================================================== */
.swiper {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%; /* Taille fixe du conteneur */
  position: relative; /* Nécessaire pour contenir l'image */
}
.swiper-container-inside {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9; /* Garde les proportions de l’image */
}


.image-wrapper {
  overflow: hidden; /* Empêche un débordement visible des barres de défilement */
  width: 100%;
  height: 100%;
}
/* Images */
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}
.cover {
  object-fit: cover;
  object-position: center;
}
/* Applique l'effet de scale sur l'image lorsque le titre est survolé */
.image-wrapper img:hover {
  transform: scale(1.2); /* agrandissement de 20% */
}
/* Légende */
.legend {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 150px;
  background-color: #fff;
  padding: 10px 20px;
  color: black;
  text-align: left;
  transition: background-color 0.5s ease-in-out;
  font-family: 'AMUMonumentGrotesk-Regular', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Changement de couleur de la légende au survol */
.image-wrapper:hover .legend {
  background-color: rgba(248, 219, 186, 1); /* Remplace par la couleur de ton choix */
  transition: background-color 0.3s ease-in-out; /* Animation fluide pour le changement */
}
/* Changement de couleur de la légende au survol */
.image-wrapper:hover .legend.recherche {
  background: #CDEAFC;
  transition: background-color 0.3s ease-in-out; /* Animation fluide pour le changement */
}
/* Changement de couleur de la légende au survol */
.image-wrapper:hover .legend.innovation {
  background: #DDCCFF;
  transition: background-color 0.3s ease-in-out; /* Animation fluide pour le changement */
}
.fleche-wrapper {
  overflow: hidden; /* Empêche un débordement visible des barres de défilement */
  width: 100%;
  height: 100%;
  padding: 50px;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.fleche-wrapper-titre {
  width: 80%;
  transition: transform 0.3s ease; /* Animation fluide */
}
.fleche-wrapper-bas {
  width: 80%;
  display: flex;
  justify-content: space-between;
}
/* Animation lors du hover */
.fleche-wrapper:hover .fleche-wrapper-titre {
  transform: translateX(10px); /* Décalage vers la droite de 10px */
}
.fleche-wrapper img {
  height: 30px;
  display: flex;
  justify-content: end;
  align-items: start;
}

.swiper-header {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  height: auto; /* Supprime la hauteur fixe */
  aspect-ratio: 16/9; /* Maintient le ratio d’écran large */
}
.legend-header {
  position: absolute;
  bottom: 0;
  right: 0;
  color: black;
  transition: background-color 0.5s ease-in-out;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.legend-header-inside {
  padding: 20px;
  text-align: left;
  width: 250px;
  background-color: #fff;
}
.legend-header-inside .soustitre {
  margin-top: 10px;
  margin-bottom: 20px;
}
.swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  background: #000;
}
.swiper-pagination-bullet-active {
  background: #000;
  cursor: pointer;
}
/* Styles généraux pour les flèches */
.swiper-bouton {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  right: 0;
  padding: 0 10px;
  width: 250px; /* Largeur de la flèche */
  height: 30px; /* Hauteur de la flèche */
  z-index: 10; /* Assurez-vous qu'elles sont au-dessus des slides */
  background: #fff;
}
.swiper-bouton-prev img, .swiper-bouton-next img {
  width: 30px; /* Largeur de la flèche */
  height: 30px; /* Hauteur de la flèche */
  cursor: pointer;
}
/* Flèche gauche */
.swiper-bouton-prev {
  transition: transform 0.2s ease; /* Transition pour le mouvement */
}
/* Flèche droite */
.swiper-bouton-next {
  transition: transform 0.2s ease; /* Transition pour le mouvement */
}
.swiper-bouton-prev:hover {
  transform: translateX(-5px); /* Déplace l'élément légèrement vers la droite */
}
.swiper-bouton-next:hover {
  transform: translateX(5px); /* Déplace l'élément légèrement vers la droite */
}

/* =============================================================================
RESPONSIVE SWIPER
========================================================================== */
@media only screen and (max-width: 800px) {
	
	.swiper-container-inside {
    width: 100%;
    position: relative;
    /* aspect-ratio: 16/9; */

}

.swiper-header {
    width: 100%;
    position: relative;
    overflow-x: hidden;
    height: auto;
    /* aspect-ratio: 16/9; */

}
.legend-header {

  width: 100%;

}
	

.legend-header-inside {
  padding: 20px;
  text-align: left;
  width: 100%;
  background-color: #fff;
}
	
.swiper-bouton {

  width: 100%;

}

.swiper-header {
    height: 500px;
}

  .image-container-inside {
        width: 100%;
        height: 400px;
        overflow: hidden;
        position: relative;
        margin-bottom: 50px;
    
    }

	
	
	
}
/* =============================================================================
RESPONSIVE
========================================================================== */
@media only screen and (max-width: 800px) {


	.menu {
display: block;
	}

}

/* =============================================================================
RESPONSIVE FOOTER
========================================================================== */
@media only screen and (max-width: 700px) {
  /* Footer Menu */
  .footer-menu {
    flex-direction: column; /* Reste en colonne */
    align-items: flex-start; /* Aligné sur la gauche */
    gap: 10px; /* Espacement entre les éléments */
  }
}
/* =============================================================================
RESPONSIVE FOOTER
========================================================================== */
@media only screen and (max-width: 600px) {
	
		.container {
		padding: 20px;
	}
	
	
  /* Conteneur principal du footer */
  .footer-bas {
    flex-direction: column;
    gap: 0px;
  }
  /* Logo image */
  .footer-logo img {
    width: 100%; /* Responsive : ne dépasse pas le conteneur */
  }
}
/* =============================================================================
RESPONSIVE
========================================================================== */

@media only screen and (max-width: 900px) {


	  .swiper-fond-couleur {
    bottom: -200px; /* Ajustez selon vos besoins */
    left: -50px; /* Ajustez selon vos besoins */
  }
	
}
@media only screen and (max-width: 600px) {


	.menu {
    width: 100%; /* Largeur dynamique */
}
	
	
  .image-container-inside {
    width: 100%;
    height: 400px; /* Taille fixe du conteneur */
    overflow: hidden; /* Masque ce qui dépasse */
    position: relative; /* Nécessaire pour contenir l'image */
    margin-bottom: 50px;
  }
  .fond-couleur {
    bottom: -20px; /* Ajustez selon vos besoins */
    left: -50px; /* Ajustez selon vos besoins */
  }
	

  .text-container-header, .text-container {
    padding: 0px;
  }
  .separateur-grand {
    padding-bottom: 100px;
    margin: 0 20px 80px 20px;
  }
  .section {
    padding: 20px;
  }

	
.article-haut {
margin-top: 50px;
}
	
	
.article {
column-count: 1;
margin-bottom: 5px;
}

	
	
}