:root {

  /* Primary colors */
  --Dark-blue:#3D596E;
  --Dark-pink:#FF9ACB;
  --Dark-green:#323929;
  --Dark-yellow:#F3D53B;

  /* Secondary colors */
  --Light-blue:#DBF1FE;
  --Light-pink: #FFEEF6;
  --Light-green:#B7C084;
  --Light-yellow:#FFF6CB;

  /* Neutrals */
  --white: #FCFFFF;
  --dark-red: #52313F;
  --black: #2D2B2B;


  /* Spacing */
  --Tiny-spacing: 5px;
  --small-spacing: 15px;
  --regular-spacing: 30px;
  --medium-spacing: 60px;
  --Big-spacing: 90px;
  --Extra-spacing: 120px;
  --side-body-marging: 150px;
  --tops-body-margin: 90px;
  --BTN-side-padding: 10px;
  --BTN-tops-padding: 20px;

  /* Text size */
  --H1: 6rem;
  --H2: 2.063rem;
  --H3: 1.563rem;
  --Type-1: 1rem;
  --Details: 0.75rem;
  --BTN-label-regular: 1.125rem;
  --BTN-label-small: 1rem;
  --Nav: 1.063;

  /* Border & border raduis */
  --border-radius-btn: 24px;


  /* Fonts */
  --main-font: 'Raleway', sans-serif;
  --text-font: "Lexend", sans-serif;
  --H3-font : 'Hertine', cursive;

}

a{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Typography */

.title-H1 {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: var(--H1);
  line-height: auto;
}

.title-H2 {
  font-family: var(--main-font);
  font-weight: 400;
  font-size: var(--H2);
  line-height: auto;
}

.title-H3 {
  font-family: var(--H3-font);
  font-weight: 400;
  font-size: var(--H3);
  line-height: auto;
}

.text-type-1 {
  font-family: var(--main-font);
  font-weight: 400;
  font-size: var(--Type-1);
  line-height: auto;
}

.text-details {
  font-family: var(--text-font);
  font-weight: 500;
  font-size: var(--Details);
  line-height: auto;
}

.BTN-Label-regular {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: var(--BTN-label-regular);
  line-height: auto;
}

.BTN-Label-small {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: var(--BTN-label-small);
  line-height: auto;
}

.BTN-nav {
  font-family: var(--main-font);
  font-weight: 600;
  font-size: var(--Nav);
  line-height: auto;
}


/**************** Mise en page ****************/
*{box-sizing: border-box;}

html{
  margin-right: 0px;
  margin-left: 0px;
  background-color: var(--white);
}

/*body {
  overflow-x: hidden;
}*/

[class*="col-"] {
  /*min-height: 80px;*/
  box-sizing: border-box;
  /*border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.12);*/
}

/********************* Largeur des colonnes *********************/

.col-1 { flex-basis: 8.33%; width: 8.33%; }
.col-2 { flex-basis: 16.66%; width: 16.66%; }
.col-3 { flex-basis: 25%; width: 25%; }
.col-4 { flex-basis: 33.33%; width: 33.33%; }
.col-5 { flex-basis: 41.66%; width: 41.66%; }
.col-6 { flex-basis: 50%; width: 50%; }
.col-7 { flex-basis: 58.33%; width: 58.33%; }
.col-8 { flex-basis: 66.66%; width: 66.66%; }
.col-9 { flex-basis: 75%; width: 75%; }
.col-10 { flex-basis: 83.33%; width: 83.33%; }
.col-11 { flex-basis: 91.66%; width: 91.66%; }
.col-12 { flex-basis: 100%; width: 100%; }



.row {
  display: flex;
  flex-wrap: wrap;
}

.row-reverse {
  display: flex;
  flex-wrap: wrap;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /*border: 1px solid rgb(153, 255, 0);
  background-color: rgba(4, 255, 0, 0.12);*/
}

.container-full{
  padding: var(--tops-body-margin) 0;

  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /*border: 1px solid rgb(153, 255, 0);
  background-color: rgba(4, 255, 0, 0.12);*/
}

.container-paddings{
  padding: var(--tops-body-margin) var(--side-body-marging);

  /*width: 100%;*/
  max-width: 1280px;
  margin: 0 auto;
  /*border: 1px solid rgb(153, 255, 0);
  background-color: rgba(4, 255, 0, 0.12);*/
}


/********************* Boutons *********************/

/******* Buttons *******/

.BTN{
  display: inline-flex;
  
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-btn);

  cursor: pointer;
}

/* Variantes tailles*/
.regular{
  padding: var(--BTN-side-padding) var(--regular-spacing);
}

.small{
  padding: var(--Tiny-spacing) var(--BTN-tops-padding);
}

/* Variantes couleurs & hover*/
.color-light-pink{
  background-color: var(--Light-pink);
  color: var(--dark-red);
}

.color-light-pink:hover{
  background-color: var(--Dark-pink);
  color: var(--white);
}



.color-dark-red{
  background-color: var(--dark-red);
  color: var(--white);
}

.color-dark-red:hover{
  background-color: var(--Dark-pink);
  color: var(--white);
}


.color-dark-pink{
  background-color: var(--Dark-pink);
  color: var(--white);
}

.color-dark-pink:hover{
  background-color: var(--dark-red);
  color: var(--white);
}



.color-dark-green{
  background-color: var(--Dark-green);
  color: var(--Light-green);
}

.color-dark-green:hover{
  background-color: var(--Light-yellow);
  color: var(--Dark-green);
}



.color-dark-blue{
  background-color: var(--Dark-blue);
  color: var(--Light-blue);
}

.color-dark-blue:hover{
  background-color: var(--Light-yellow);
  color: var(--Dark-blue);
}


/* Socials links */


.social{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--Dark-blue);
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
.social:hover{
  background-color: var(--dark-red);
}

/* link */
.link-dark-red {
  position: relative;
  display: inline-block;
  color: var(--dark-red);
  text-decoration: none;
  transition: color 0.3s ease;
}
.link-dark-red::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: var(--dark-red);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.link-dark-red:hover {
  color: var(--dark-red);
}
.link-dark-red:hover::after {
  transform: scaleX(1);
}

.link-dark-blue {
  position: relative;
  display: inline-block;
  color: var(--Dark-blue);
  text-decoration: none;
  transition: color 0.3s ease;
}
.link-dark-blue::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 0.063rem;
  background-color: var(--Dark-blue);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.link-dark-blue:hover {
  color: var(--Dark-blue);
}
.link-dark-blue:hover::after {
  transform: scaleX(1);
}

.link-white {
  position: relative;
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;

  cursor: pointer;
}
.link-white::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 0.063rem;
  background-color: var(--white);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.link-white:hover {
  color: var(--white);
}
.link-white:hover::after {
  transform: scaleX(1);
}

.link-light-pink {
  position: relative;
  display: inline-block;
  color: var(--Light-pink);
  text-decoration: none;
  transition: color 0.3s ease;

  cursor: pointer;
}
.link-light-pink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 0.063rem;
  background-color: var(--Light-pink);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.link-light-pink:hover {
  color: var(--Light-pink);
}
.link-light-pink:hover::after {
  transform: scaleX(1);
}

/******************* fin des assets *******************/



/********************* Header *********************/

header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;

  width: 100%;
  z-index: 100;

  transition: all .3s ease;
}

/*#header-light,
#header-dark,
#header-hover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

#header-dark,
#header-hover {
  display: none;
}*/


.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: var(--BTN-side-padding)!important;
  padding-bottom: var(--BTN-side-padding)!important;
}


.Preorder1{
  align-content: center;
  display: block;
}

.Preorder2{
  align-content: center;
  display: none;
}

header .logo{
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
}

header .logo .Mobile{
  display: none;
}


header .logo .Desktop {
  display: block;
  min-width: 150px;
}


header .part1{
  display: flex;
  justify-content: center;
  height: max-content;
  align-items: center;
}

.burger{
  display: none;
}

.header .logo .Desktop{
  display: block;
}

.logo img {
  display: block;
}

.logo-light {
  display: none;
}


.logo img {
  width: 161px;
  height: auto;
  display: block;
}

header nav{
  align-content: center;
}

nav ul {
  display: flex;
  gap: var(--small-spacing);
  list-style: none;
  margin: 0;
  padding: 0;
}


/********************* Footer *********************/

footer h2{
  color: var(--Dark-blue);
}
footer p{
  color: var(--Dark-blue);
}

footer{
  background-color: var(--Light-blue);

}

.footer-section{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  gap: var(--regular-spacing);

  padding-bottom: var(--small-spacing)!important;
}

footer .Main-content{
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 25%;
}

.Navigation{
  display: flex;
  flex-direction: column;
  gap: var(--medium-spacing);
}


.Socials-link h2{
  padding-bottom: var(--Tiny-spacing);
}

.liens-socials img{
  max-height: 26px;
  max-width: 21px;

  height: auto;
  width: auto;
}

.liens-socials{
  display: flex;
  gap: var(--small-spacing);
  justify-content: center;
  flex-direction: row;
  padding-bottom: var(--Tiny-spacing);
}

.pages-internes{
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
  padding-top: var(--small-spacing);
}

footer .Contact{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--small-spacing);
}

.Legals{
  display: flex;
  flex-direction: row;
}


/********************* Newsletter *********************/

.Newsletter{
  background-color: var(--Light-pink);
}

.Newsletter-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--regular-spacing);
  align-content: center;
  align-items: center;
}

.Newsletter p{
  color: var(--dark-red);
}

.Newsletter h2{
  color: var(--dark-red);
}

.Newsletter h3{
  color: var(--dark-red);
}


.main-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: var(--Tiny-spacing);
}

.newsletter-content{
  display: flex;
  flex-wrap: wrap;
  gap: var(--small-spacing);
  justify-content: center;
  text-align: center;
}

.textfield{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: var(--BTN-side-padding) var(--BTN-tops-padding);
  align-items: center;
  gap: var(--small-spacing, 15px);
  border-radius: 24px;
  border: 1px solid var(--Dark-pink);
  background: var(--Light-pink);
}

.textfield:hover{
  color: var(--dark-red);
  border: 1px solid var(--dark-red);
}

input{/* Reset navigateur */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: none;
  outline: none;
  background: transparent;
}

input::placeholder{
  color: var(--Dark-pink);
}

input::placeholder:hover{
  color: var(--dark-red);
}

.arrow-submit{
  height: 15px;
  width: auto;
}
.arrow-submit:hover{
  fill: var(--dark-red);
}


/******************************************
*********** Intégration de la page ********/
img{max-width: 100%; width: auto; height: auto;}
/******************************************/

.Title{
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}







/************************************************************
*************************** HOME PAGE ***********************/
/************************************************************/


/********************* Hero *********************/

.hero-content h1{
  color: var(--Light-pink);
}

.hero-content p{
  color: var(--Light-pink);
}

.home-page .hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  
  width: 100%;
  height: 100vh;

  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-content {
  display: flex;
  gap: var(--regular-spacing);
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.hero .CTA{
  display: flex;
  gap: var(--small-spacing);

}

/********************* Section maroquinerie *********************/

.Section-maroquinerie h2{
  color: var(--Light-pink);
  padding-bottom: var(--small-spacing);
}

.Section-maroquinerie{
  background-color: var(--Dark-green);
  position: relative;
}

.Section-maroquinerie .polaroid {
  position: absolute;

  width: 25vw;
  min-width: 250px;
  max-width: 450px;

  right: 15%;
  top: 50%;

  transform: translateY(-50%);

  z-index: 2;
}

.main-img {
  width: 80%;
  height: auto;
  display: block;
}

.Maroquinerie-content{
  display: flex;
  flex-wrap: nowrap;
  justify-content: end;
  
}

.right-content{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-wrap: nowrap;
  align-items: flex-end;

}




/********************* Section highlight LUA *********************/

.highlight-lua{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: var(--regular-spacing);
}


.Section-highlight-lua .Visuels{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--small-spacing);
  flex-direction: row;
  width: 100%;
}

.highlight-lua .Visuels img{
  height: auto;
  max-width: max-content;
}



/************** Section ecoresponsable ***************/

.Section-ecoresponsable{background-color: var(--Light-green);}

.Section-ecoresponsable p, h2{
  color: var(--Dark-green);
}

.Section-ecoresponsable video{
  width: 100%;
  height: auto;
}

.Section-ecoresponsable .lifestyle-visuals{
  display: flex;
  flex-direction: column;
}

.Section-ecoresponsable .Description{
  padding: var(--medium-spacing) var(--medium-spacing) var(--medium-spacing) 0px;
  gap: var(--small-spacing);
}

.Description p{
  padding-bottom: var(--small-spacing);
}

.lifestyle-visuals img{
  width: 70%;
  height: auto;
  padding-top: var(--Tiny-spacing);
}

.Main-infos img{
  padding-right: var(--Tiny-spacing);
}

.lifestyle-visuals{
  display: flex;
  justify-content: right;
  align-items: end;
}

.bottom-content img{
  padding-top: var(--Tiny-spacing);
}

/************** Section visuel type 1 ***************/

.Visual-type1{
  background-color: var(--Light-blue);
}

/************** Section fondatrices ***************/

.home-page .Section-fondatrices{
  background: var(--Light-pink);

  display: flex;
  align-items: center;
  position: relative;
  
  
}

.home-page .Section-fondatrices h2{
  color: var(--Dark-pink);
}

.home-page .Section-fondatrices p{
  color: var(--dark-red);;
}

.home-page .Section-fondatrices .Title{
  padding-bottom: var(--regular-spacing);
}

.home-page .Section-fondatrices .Main-content{
  padding-right: var(--medium-spacing);
  align-content: center;
  
}


.home-page .Section-fondatrices .Polaroid {
  position: absolute;

  right: 10%;
  top: 50%;


  width: 35vw;
  min-width: 450px;
  max-width: 700px;

  transform: translateY(-50%);
}

/************** Section visuel type 1 ***************/

.Visual-type2{
  background-color: var(--black);
  align-content: center;
}

.Visual-type2 img{
  width: 100%;
  height: 50%;

  
  overflow: hidden;
}



/************************************************************
*************************** PAGE LUA ***********************/
/************************************************************/

/************** Section présentation ***************/

.Section-présentation{
  background-color: var(--Light-pink);
}

.Section-présentation .container{
  display: flex;
  justify-content: flex-start;
}

.Section-présentation .CTA{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--small-spacing);
}

.Section-présentation .Title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--small-spacing);
  text-align: center;
  padding-bottom: var(--regular-spacing);
}

.Section-présentation .Description-intro {
  position: sticky;
  top: 0; /* ← la div se colle en haut lors du scroll */
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding: 0 var(--side-body-marging) var(--tops-body-margin) var(--tops-body-margin);
  height: 100vh;
}

.Section-présentation h1{
  color: var(--dark-red);
}

.Section-présentation p{
  color: var(--dark-red);
}

.Visuels-sac{
  display: flex;
  flex-direction: column;
  gap: var(--Tiny-spacing);
}

.Visuels-sac .cadre-video{
  overflow: hidden;
  width: max-content;
}

.cadre-vidéo video{
  width: 100%;
}

.Visuels-sac img{
  overflow: hidden;
  box-sizing: border-box;
}




/************** Section description ***************/

.Section-description{
  background-color: var(--dark-red);
}

.Section-description h2{
  color: var(--Light-yellow);
  text-align: center;
}

.Section-description p{
  color: var(--Light-yellow);
}


.Section-description .Title{
  padding: var(--tops-body-margin) var(--tops-body-margin) var(--tops-body-margin) var(--side-body-marging);
  justify-content: center;
}


/************** Section caractéristiques ***************/

.Section-caractéristiques{
  text-align: center;
  justify-content: center;
}

.Choix .link-dark-red.active {
  color: var(--pink);
}

.Choix .link-dark-red.active::after {
  transform: scaleX(1);
  background-color: var(--pink);
}

.Section-caractéristiques .Choix{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: var(--small-spacing);
}

.Visuel .IMG {
  display: none;
}

.Visuel .IMG.active {
  display: block;
}

.Caractéristiques-sac{
  align-items: center;
}

.Caractéristiques-sac .Visuel img{
  max-height: 610px;
  max-width: 700px;

  height: auto;
  width: auto;
}

.Caractéristiques-sac .Visuel{
  width: 100%;

}

/************** Section design intemporel ***************/

.Section-design-intemporel{
  color: var(--Dark-green);
  background-color: var(--Light-green);
}

.Section-design-intemporel h2{
  padding-bottom: var(--regular-spacing);
  padding-left: var(--side-body-marging);
}

.Section-design-intemporel .container{
  padding-top: var(--tops-body-margin);
}


/************** Section highlight valeurs ***************/

.Section-highlight-valeurs .européenne{
  background-color: var(--Light-yellow);
  color: var(--dark-red);
}

.Section-highlight-valeurs .Title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--small-spacing);
  align-content: center;
}

.Section-highlight-valeurs h3{
  padding-bottom: var(--Tiny-spacing);

}

.Section-highlight-valeurs .européenne .Title{
  padding: var(--Big-spacing) var(--tops-body-margin) var(--Big-spacing) var(--side-body-marging);
}

.Section-highlight-valeurs .synderme .Title{
  padding: var(--medium-spacing) var(--side-body-marging) var(--medium-spacing) var(--tops-body-margin);
  
}

.Section-highlight-valeurs .synderme{
  background-color: var(--Light-blue);
}

.Section-highlight-valeurs .synderme .bloc-couleur{
  background-color: var(--Dark-blue);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--small-spacing);
}

.Section-highlight-valeurs .bloc-couleur img{
  height: 70%;
}



/************** Section small galerie ***************/

.Section-small-galerie h2{
  color: var(--dark-red);
  padding-bottom: var(--medium-spacing);
}

.Section-small-galerie .Visuels .img1, .img2{
  box-sizing: border-box;
  width: 100%;
  max-height: 420px;
  overflow: hidden;

}

.Section-small-galerie .Visuels .img1{
  padding-right: var(--Tiny-spacing);
}

.Section-small-galerie .Visuels .img3{
  box-sizing: border-box;
  width: 60%;
  max-height: 290px;
  padding-top: var(--Tiny-spacing);
}

.Section-small-galerie .Visuels .left-visual{
  display: flex;
  align-items: flex-end;
}

.Section-small-galerie .Visuels .right-visual{
  display: flex;
  flex-direction: column;
  align-items: flex-end;

}

/************** Section highlight contact ***************/

.Section-highlight-contact{

  color: var(--dark-red);
  background-color: var(--Light-yellow);

}

.Section-highlight-contact .container-paddings{
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
  justify-content: center;
  text-align: center;
}





/************************************************************
*************************** HOME PAGE ***********************/
/************************************************************/


/********************* Hero *********************/

.notre-histoire .Hero{
  height: 40vh;
  overflow: hidden; 
  display: flex; 
  align-items: center;
}


.notre-histoire .hero-content{
  display: flex;
  flex-direction: column;
  color: var(--Light-pink);
}

.notre-histoire .bg-img{
  position: absolute;
  z-index: -1;
}


/********************* Section fondatrices *********************/

.notre-histoire .Section-fondatrices{
  min-height: 100vh;
  background-color: var(--black);

}

.notre-histoire .Section-fondatrices .container-paddings{
  display: flex;
  flex-direction: column;
  gap: var(--medium-spacing);
  justify-content: center;
  align-items: center;
}

.notre-histoire .Section-fondatrices h2{
  color: var(--Dark-pink);
}

.notre-histoire .Section-fondatrices h3{
  color: var(--Dark-yellow);
}

.notre-histoire .Section-fondatrices .les-fondatrices{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--tops-body-margin);
  text-align: center;
  
}



.notre-histoire .Section-fondatrices .Card-perso .logo{
  width: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notre-histoire .Section-fondatrices .Card-perso .Roll-over{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--regular-spacing);
  padding: var(--small-spacing);

  color: var(--dark-red);
}

.notre-histoire .Amanda .Roll-over {
  background-color: var(--Light-green);
}
.notre-histoire .Léa .Roll-over{
  background-color: var(--Light-blue);
}.notre-histoire .Lara .Roll-over {
  background-color: var(--Light-pink);
}

.notre-histoire .Card-perso .Roll-over .Nom{
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}


.notre-histoire .Section-fondatrices .Card-perso .Entete{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: var(--small-spacing);
}



.notre-histoire .Card-perso{
  max-width: 280px;
  height: auto;
  overflow: hidden;
  position: relative;
}

.notre-histoire .Section-fondatrices .les-fondatrices video{
 height: auto;
 width: 100%;
}

.notre-histoire .Section-fondatrices h3{
  padding-bottom: var(--small-spacing);
}

/*** Animation de la card ***/

/* Roll-over : état masqué, collé en bas, descendu hors cadre */
.notre-histoire .Section-fondatrices .Card-perso .Roll-over{
  position: absolute;
  inset: auto 0 0 0;            /* bottom:0 / left:0 / right:0 */
  transform: translateY(100%);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Roll-over : révélé au survol (et au focus clavier) */
.notre-histoire .Card-perso:hover .Roll-over,
.notre-histoire .Card-perso:focus-within .Roll-over{
  transform: translateY(0);
}







/********************* Section histoire *********************/

.notre-histoire .Section-histoire{
  background-color: var(--Light-pink);
  overflow: hidden;
  max-height: 409px;
}

.notre-histoire .Section-histoire .Title{
 padding: var(--Big-spacing) var(--tops-body-margin) var(--Big-spacing) var(--side-body-marging);

}

.notre-histoire .Section-histoire .Title h2{
  color: var(--Dark-pink);
}

.notre-histoire .Section-histoire .Title p{
  color: var(--dark-red);
}

.notre-histoire .Section-histoire img{
  max-height: 515px;
  height: auto;
}


/********************* Section histoire *********************/
.notre-histoire .Section-creation-marque{
  background-color: var(--Light-blue);
}

.notre-histoire .Section-creation-marque .container-paddings{
  display: flex;
  flex-direction: column;
  gap: var(--medium-spacing);
}

.notre-histoire .Section-creation-marque .row{
  font-display: flex;
  align-items: center;

}

.notre-histoire .Section-creation-marque .text{
  padding-right: var(--small-spacing);
}

.notre-histoire .Section-creation-marque .row2{
  padding-left: var(--small-spacing);
}

.notre-histoire .Section-creation-marque .bloc-couleur{
  background-color: var(--Dark-blue);
  display: flex;
  align-items: center;
  align-content: center;
  max-height: 280px;
}

.notre-histoire .Section-creation-marque .bloc-couleur img{
  width: auto;
  max-height: 380px;
}


/********************* Section histoire *********************/

.notre-histoire .section-pourquoi-maison-lua{
  background-color: var(--Light-yellow);
  color: var(--dark-red)!important;
}

.notre-histoire .section-pourquoi-maison-lua h2{
  color: var(--Dark-pink);
}


.notre-histoire .section-pourquoi-maison-lua .bloc-couleur{
  background-color: var(--Dark-pink);
  display: flex;
  align-items: center;justify-content: center;
}

.notre-histoire .section-pourquoi-maison-lua .container-paddings{
  display: flex;
  flex-direction: column;
  gap: var(--regular-spacing);
}

.notre-histoire .section-pourquoi-maison-lua .infos-supplémentaires .ligne1{
  padding-right: var(--small-spacing);
}

.notre-histoire .section-pourquoi-maison-lua .infos-supplémentaires .ligne2{
  padding-left: var(--small-spacing);
}

.notre-histoire .section-pourquoi-maison-lua .Main-content{
  display: flex;
  justify-content: center;
  align-items: center;
}



/************************************************************
************************* PAGE CONTACT *********************/
/************************************************************/


/********************* Hero *********************/

/* Reset button */
button {
  /* Apparence native (iOS/Safari surtout) */
  -webkit-appearance: none;
  appearance: none;

  /* Fond, bordure, contour */
  background: none;
  border: none;
  outline: none;
  box-shadow: none;

  /* Texte hérité du parent au lieu des valeurs navigateur */
  font: inherit;
  color: inherit;
  text-align: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  /* Espacements internes */
  margin: 0;
  padding: 0;

  /* Curseur */
  cursor: pointer;
}



.page-contact .Hero .bg-img{
  overflow: hidden; 
  display: flex; 
  height: 40vh;
  align-items: center;
  color: var(--Dark-green);
  width: 100%;
}

.page-contact .Hero .container-paddings{
  padding-top: 200px;
}

.page-contact .Hero img{
  width: 100%;
  height: max-content;
}


.page-contact .hero-content{
  display: flex;
  flex-direction: column;
  
}

.page-contact .bg-img{
  position: absolute;
  z-index: -1;
}

.page-contact input{
  width: 100%;
}

.page-contact .formulaire-content .row{
  display: flex;
  justify-content: space-between;
}

.page-contact .section-infos-contact .container-paddings{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: var(--regular-spacing);
}

.page-contact .formulaire-content{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--small-spacing);
}

.page-contact h2{
  color: var(--Dark-pink);
  padding-bottom: var(--small-spacing);
}

.page-contact h1{
  color: var(--Dark-green);
}



/************************************************************
************************* PAGE HISTOIRE *********************/
/************************************************************/


/********************* Hero *********************/

.page-valeurs .hero{
  background-color: var(--Light-pink);
  color: var(--dark-red);
}

.page-valeurs .hero .container-paddings{
  padding-top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/********************* intro au syndereme *********************/

.page-valeurs .section-introduction-synderme{
  background-color: var(--Light-blue);
}

.page-valeurs .section-introduction-synderme{
  color: var(--Dark-blue);
}

.page-valeurs.section-introduction h3{
  color: var(--Dark-blue);
}

.page-valeurs .section-introduction-synderme .title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--small-spacing);

  padding-top: var(--tops-body-margin);
  padding-bottom: var(--tops-body-margin);
  padding-right: var(--side-body-marging);
  padding-left: var(--side-body-marging);
}


.page-valeurs .section-introduction-synderme .polaroid{
position: absolute;
  top: 56%;
  right: 14%;
  left: 56%;
  bottom: 7%;
}

.page-valeurs .section-introduction-synderme .bloc-image{
  max-height: 30vh;
  width: auto;
}

.page-valeurs .explications-synderme .cadre-video{
  overflow: hidden;
  width: 100%;
  max-height: 500px;
  display: flex;
  align-items: center;
}

.page-valeurs .explications-synderme .cadre-video video{
  width: 100%;
  height: max-content;
}

.page-valeurs .explications-synderme .explications{
  padding: var(--tops-body-margin) var(--side-body-marging) var(--tops-body-margin) var(--tops-body-margin);

  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}

.page-valeurs .explications-synderme{
  display: flex;
  align-items: center;

}

/***************** intro au syndereme *****************/


.page-valeurs .section-transformation-synderme .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.page-valeurs .section-transformation-synderme .etape{
  max-width: 200px;
}

.page-valeurs .section-transformation-synderme .etape img{
  width: auto;
  height: auto;
  max-height: 240px;
}

.page-valeurs .section-transformation-synderme .hidden{
  display: none;
}


/************** transformation synderme **************/

.page-valeurs .section-circuit-creation{
  background-color: var(--Light-pink);
}

.page-valeurs .section-circuit-creation h2{
  color: var(--Dark-pink);
}

.page-valeurs .section-circuit-creation p{
  color: var(--dark-red);
}

.page-valeurs .section-circuit-creation .title{
  padding-right: var(--Big-spacing);
}


.page-valeurs .section-circuit-creation .illustration{
  position: absolute;
  inset: 0;                 /* couvre tout le container */
  z-index: 0;               /* derrière le contenu */
  pointer-events: none;     /* ne bloque pas les clics */
}
.page-valeurs .section-circuit-creation .illustration img{
  position: sticky;
  overflow: hidden;
 
  top: 5%;                  
  display: block;
  max-width: 750px;
  margin-left: auto;        
  margin-right: -44px;      
}
.page-valeurs .section-circuit-creation .main-infos,
.page-valeurs .section-circuit-creation .etapes{
  position: relative;
  z-index: 1;
}
.page-valeurs .section-circuit-creation .container{
  padding: var(--regular-spacing) 0 var(--regular-spacing) var(--side-body-marging);
  position: relative;
}
.page-valeurs .section-circuit-creation video{
  width: auto;
}
.page-valeurs .section-circuit-creation .main-infos{
  display: flex;
  align-items: center;
}

.page-valeurs .section-circuit-creation .cadre-vidéo{
  width: 100%;
  max-height: 410px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/******** étapes polaroid ********/

/*.page-valeurs .section-circuit-creation .etapes img{
  width: auto;
  height: 100%;
}*/

.page-valeurs .section-circuit-creation .etapes .text-type-1{
  color: var(--Dark-pink);
  padding: var(--small-spacing) 0 var(--Tiny-spacing) 0;
}

.page-valeurs .section-circuit-creation .etapes .text-details{
  color: var(--Dark-yellow);
}

.page-valeurs .section-circuit-creation .etapes .visuels{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--small-spacing);
}

.page-valeurs .section-circuit-creation .etapes .polaroid{
  padding: var(--regular-spacing);
  background-color: var(--white);
  text-align: center;
}

.section-circuit-creation .etapes .size-1{
  max-width: 550px;
}

.section-circuit-creation .etapes .size-2{
max-width: 385px;
}

.page-valeurs .section-circuit-creation .etapes .col-3{
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.page-valeurs .section-circuit-creation .etapes .polaroid p{
  width: 100%;
  

}

.pola-size-1{
  overflow: hidden;

  display: flex;
  justify-content: center;

  max-width: 480px;
  max-height: 300px;

}


.pola-size-2{
  overflow: hidden;

  display: flex;
  justify-content: center;

  max-width: 260px;
}


/******** section transparence ********/

.page-valeurs .section-transparence{
  background-color: var(--Light-yellow);
  color: var(--dark-red);
}

.page-valeurs .section-transparence .title{
  padding: var(--medium-spacing) var(--side-body-marging) var(--medium-spacing) var(--side-body-marging);
}

.page-valeurs .cadre-transparence{
  overflow: hidden;
  max-height: 400px;
  display: flex;
  align-items: center;
}

.page-valeurs .cadre-transparence video{
  width: auto;
}



/******************************************
***************** RESPONSIVE **************/
/******************************************/

@media (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex-basis: 100%; width: 100%; }
}

@media (max-width: 768px) {
  .row{
    display: flex;
    flex-direction: column;
  }

  .row-reverse{
    display: flex;
    flex-direction: column-reverse;
  }
}


/* Font locale */
@font-face {
  font-family: Hertine;
  src: url("/ASSETS/FONTS/hertine/Hertine.otf");
  src: url("/ASSETS/FONTS/hertine/Hertine.woff");
  src: url("/ASSETS/FONTS/hertine/Hertine.ttf");
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --side-body-marging: 30px;
    --tops-body-margin: 60px;
    --H1: 50px;
    --H2: 26px;
    --H3: 20px;
    --Type-1: 14px;
    --Details: 10px;
  }
}

/* Tactile : pas de survol possible → on affiche le panneau d'emblée */
@media (hover: none){
  .notre-histoire .Card-perso .Roll-over{ transform: translateY(0); }
}


@media (max-width: 768px) {

  header {
    background-color: var(--Light-blue);

    width: 100%;
    z-index: 100;

    transition: all .3s ease;
  }

  header .container-paddings{
    padding: O;
  }

  .burger{
    display: block;
    cursor: pointer;
    font-size: 32px;
  }

  /* Classe active ajoutée par JavaScript */
  .nav-links {
    display: none;
  }
  .nav-links.active {
    display: flex;
    justify-content: center;
    align-content: center;

    padding: var(--small-spacing) 0;
  }

  .nav-links.active li{
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .Preorder1{
    display: none;
  }

  .Preorder2{
    display: block;
  }

  .Preorder2 .color-light-pink{
    background-color: var(--dark-red);
    color: var(--white);
  }

  .header .logo{
    margin-right: 32px;
  }



  header .logo .Mobile{
  display: block;
  }

  header .logo .Desktop{
    display: none;
  }

  header .part1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .header-content{
    display: flex;
    flex-direction: column;
    background-color: var(--Light-pink);
  }

  .header-content .link-light-pink{
    color: var(--dark-red);
  }

  .link-light-pink::after {
  background-color: var(--dark-red);
  }


}

@media (max-width: 768px){
  .bloc-polaroid{
    display: flex;
    height: 20vh;

  }

  .Section-maroquinerie .polaroid {
    top: 70%;
  }

  .Section-maroquinerie .right-content {
    display: block;
  }


  .home-page .Section-fondatrices .Polaroid {
    right: -5%;
    top: 113%;
    width: 55vw;
    min-width: 100px;
  }

}

@media (max-width: 768px){
  .page-valeurs .section-transformation-synderme .hidden{
  display: block;}
}



@media (max-width: 768px){
  .Newsletter{
    text-align: center;
  }

  footer{
    text-align: center;
  }

  footer .Contact{
    padding-top: var(--regular-spacing);
  }
}

@media (max-width: 768px){
  .Section-présentation .Description-intro {
    padding-top: var(--small-spacing);
  }
}


@media (max-width: 768px){
  .notre-histoire .Section-fondatrices{
    min-height: 70vh;
  }

  .notre-histoire .Section-fondatrices .les-fondatrices {
    gap: var(--small-spacing);
  }

  .notre-histoire .Section-creation-marque .row .row2 {
    padding-top: var(--small-spacing);
    padding-left: 0;
  }

  .notre-histoire .section-pourquoi-maison-lua .infos-supplémentaires .ligne1 {
    padding-bottom: var(--small-spacing);
  }

  .notre-histoire .section-pourquoi-maison-lua .infos-supplémentaires .ligne2 {
    padding-left: 0;
  }

  .notre-histoire .section-pourquoi-maison-lua .Main-content p{
    padding-bottom: var(--small-spacing);
  }
}


@media (max-width: 768px){
  .Section-présentation .Description-intro {
    position: relative;
    padding-top: var(--Extra-spacing);
  }

  .Caractéristiques-sac .Visuel img {
    max-height: 50vh;
    max-width: 100%;
  }

  .Section-caractéristiques h2{
    padding-bottom: var(--small-spacing);
  }
}

@media (max-width: 768px){
  .pola-histoire{
    display: none;
  }
}

@media (max-width: 768px){
  .page-valeurs .section-circuit-creation .main-infos {
    display: flex;
    gap: var(--small-spacing);
  }

  .page-valeurs .section-transformation-synderme .row{
    display: flex;
    flex-direction: column;
    gap: var(--medium-spacing);
  }

  .page-valeurs .section-transformation-synderme .arrow{
    rotate: 90deg;
  }

}