#Title_accueil {
  display: flex;            /* active Flexbox */
  justify-content: center;  /* centre horizontalement */
  align-items: center;      /* centre verticalement */
  color: white;
  text-align: center;       /* ici facultatif avec Flexbox */
  font-family: "Brittany";
  
  font-size: 6.5vw;
  
}

.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;          /* prendre toute la hauteur de la fenêtre */
  overflow: hidden;       /* masquer les débordements */
  z-index: -10;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;        /* forcer au moins 100% de largeur */
  height: 100%;       /* forcer au moins 100% de hauteur */
  transform: translate(-50%, -50%); /* centrer parfaitement */
  object-fit: cover;      /* crop en gardant le ratio */
  object-position: 50% 30%; /* ancre au centre */
}



#Title_accueil_container{
      height :85vh;
      width : 50vw;
      display : flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
          overflow: hidden;
}

#container_accueil {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
}

.bloc_fleche{
    
    grid-column: span 2;
    height : 25vh;
    
    margin-bottom : 10vh;
    width : 100%;
    margin-top : -3vw;
}

.bloc_fleche img{

    height :60%;
    width : auto;

}



/*------------------- LIGNE 2  --------------------*/

#ligne_vestiaire_new{
    
        
    display: grid;
    grid-template-columns: 70% 30%;
    width: 100%;
    height : 100vh;
    /*background-color: var(--main_background);*/
    

         
         
    grid-column: span 2; /* pour que ça prenne toute la largeur */
    
    background: linear-gradient(to left, var(--background_2), var(--main_background),var(--background_2));
    

}
#gauche_vestiaire {
  --b: 1.5vw;
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateX(-8%); /* enfoncée légèrement vers la gauche */
  transition: transform 0.6s ease;
}

/* La bordure qui suit exactement la coupe en biais */
#gauche_vestiaire::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--back_header);;     /* couleur de bordure */
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  z-index:0;
}

/* Images */
#gauche_vestiaire::after {
  content: "";
  position: absolute;
  inset: var(--b);
  background-image: url('../img/galerie/accueil/vestiaire1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* le voile sombre vient de background-color, mélangé à l'image */
  background-color: rgba(0,0,0,0);     /* transparent au repos */
  background-blend-mode: multiply;      /* mélange le voile et l’image */

  clip-path: polygon(0 0, 100% 0, calc(85% - var(--b)) 100%, 0% 100%);
  z-index: 1;
  transform: scale(1);
  transition: background-color .35s ease, transform .35s ease;
    background-size: cover;
  background-position: top center; /* ou: center top / 50% 0% */
  
  
}
/* Le texte au-dessus */
#gauche_vestiaire .content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  font-weight:700;
  z-index:2;              /* au-dessus des pseudo-éléments */
}




#droite_vestiaire{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap : 15%;
    
    align-items: center;
    

    padding-right : 15%;
    margin-left : -10%;
    
    width : 100%;
    
    
}


#droite_vestiaire img{
    width : 50%;
    height: auto;
    
    
}


#droite_vestiaire p {

    font-size: 1.5vw;
    
}






/*----------------------------------------------------------- LIGNE 3 ------------------------------------------------------*/
#ligne_livre_new, #ligne_conseils{
    display: grid;
    grid-template-columns: 0% 100%; /* inversé */
    width: 100%;
    height : 100vh;
    grid-column: span 2;
    background: linear-gradient(to left, var(--background_2), var(--main_background), var(--background_2));
}



/* Colonne texte à gauche */
#gauche_livre, #gauche_conseils{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap : 15%;
    align-items: center;
    padding-left : 15%;
    margin-right : -10%;
    width : 100%;
}

#gauche_livre img, #gauche_conseils img{
    width : 50%;
    height: auto;
}

#gauche_livre p, #gauche_conseils p {
    font-size: 1.5vw;
}

/* Bloc images à droite avec coupe inversée */
#droite_livre, #droite_conseils{
  --b: 1.5vw;             /* épaisseur de la bordure */
  position: relative;
  width: 100%;
  height: 100%;
}

/* Bordure */
#droite_livre::before, #droite_conseils::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bordeau); /* couleur de bordure */
  /* Plus avancé en haut, reculé en bas */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  z-index:0;
}

/* état normal */
#droite_livre::after, #droite_conseils::after{
  /* ... tes styles existants ... */
  transform: scale(1);                     /* état de base */
  transition: transform 0.6s ease,         /* ← transition */
              filter 0.6s ease;            /* ← transition */
  will-change: transform, filter;          /* petit boost perf */
  backface-visibility: hidden;             /* évite les sauts */
}



/* Images de fond */
#droite_livre::after {
  content: "";
  position: absolute;
  inset: var(--b);
  background-image: url('../img/galerie/accueil/livre.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
  transform: scale(1);
  transition: transform 0.35s ease;
}

#droite_conseils::after {
      content: "";
  position: absolute;
  inset: var(--b);
  background-image: url('../img/galerie/accueil/conseils.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
  transform: scale(1);
  transition: transform 0.35s ease;
    
    
}

/* Contenu texte au-dessus */
#droite_livre .content, #droite_conseils .content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  font-weight:700;
  z-index:2;
}

/* LIVRE — overlay : ajoute la même transition + scale */
#droite_livre .content::after , #droite_conseils .content::after {
  content: "";
  position: absolute;
  inset: var(--b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background: rgba(0,0,0,0.45);
  opacity: 0;
  z-index: -1;                    /* au-dessus de l'image (z=1), sous le texte */
  transition: opacity .35s ease, transform .35s ease;
  transform: scale(1);
  transform-origin: center center;
}




/*-------------------------------------------------------- ligne 4 ------------------------------------------------------------------------------------*/


#ligne_qui_suis_je_new{
    display: grid;
    grid-template-columns: 30% 70%; /* images à gauche */
    width: 100%;
    height : 100vh;
    grid-column: span 2;
    background: linear-gradient(to left, var(--background_2), var(--main_background), var(--background_2));
}

/* Bloc images à gauche */
#gauche_qui_suis_je{
  --b: 1.5vw; /* épaisseur de la bordure */
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease, filter 0.6s ease;
  
}

/* Bordure */
/* Bordure avec haut large et bas resserré */
#gauche_qui_suis_je::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--back_header); /* couleur de la bordure */
  /* Haut gauche plus avancé (0%), bas gauche reculé (15%) */
  clip-path: polygon(0% 0, 100% 0, 100% 100%, 15% 100%);
  z-index: 0;
}

#gauche_qui_suis_je::after {
  content: "";
  position: absolute;
  inset: var(--b);
  background-image: url('../img/galerie/accueil/qui1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(0% 0, 100% 0, 100% 100%, calc(15% + var(--b)) 100%);
  z-index: 1;
  transform: scale(1);
  transition: transform 0.35s ease;
}

/* Images avec le même biais */
#gauche_qui_suis_je .content::after {
  content: "";
  position: absolute;
  inset: var(--b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(15% + var(--b)) 100%);
  background: rgba(0,0,0,0.45);
  opacity: 0;
  z-index: -1;
  transition: opacity .35s ease, transform .35s ease;
  transform: scale(1);
  transform-origin: center center;
}


/* Texte par-dessus les images */
#gauche_qui_suis_je .content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  font-weight:700;
  z-index:2;
}

/* Colonne texte à droite */
#droite_qui_suis_je{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15%;
    align-items: center;
    padding-left: 15%;
    margin-right: -10%;
    width: 100%;
}

#droite_qui_suis_je img{
    width: 50%;
    height: auto;
}

#droite_qui_suis_je p {
    font-size: 1.5vw;
}






/*--------------------------------------------------- ANIMATIONS ----------------------------------------------------------*/

/* Images à gauche : vestiaire et qui_suis_je */
#gauche_vestiaire {
  transform: translateX(-8%); /* enfoncé vers la gauche */
  transition: transform 0.6s ease;
}

/* Images à droite : livre */
#gauche_qui_suis_je {
  transform: translateX(6%);  /* enfoncé vers la droite */
  transition: transform 0.6s ease;
}

/*- ANIMATION -*/
/* ---------- ÉTAT HOVER ---------- */
/* images à gauche → vers la droite */
#ligne_vestiaire_new:hover #gauche_vestiaire
{
  transform: translateX(-2%);
}

/* images à droite → vers la gauche */
#ligne_qui_suis_je_new:hover #gauche_qui_suis_je {
  transform: translateX(2%);
}


/* 2) Corriger les hovers (cible le bon calque selon la section) */
@media (hover:hover) and (pointer:fine){
  /* Vestiaire : blend-mode sur l'image */
  #gauche_vestiaire:hover::after {
    background-color: rgba(0,0,0,.45);
    transform: scale(1.02);
  }

  /* Livre : overlay en opacity + micro-zoom de l’image */
  #droite_livre:hover .content::after, #droite_conseils:hover .content::after { opacity: 1; }
  #droite_livre:hover::after, #droite_conseils:hover::after { transform: scale(1.02); }

  /* Qui suis-je : overlay en opacity + micro-zoom de l’image */
  #gauche_qui_suis_je:hover .content::after { opacity: 1; }
  #gauche_qui_suis_je:hover::after { transform: scale(1.02); }
}

/* 3) Nettoyage : pas de transition sur filter sur le parent */
#gauche_qui_suis_je {
  /* avant : transition: transform 0.6s ease, filter 0.6s ease; */
  transition: transform 0.6s ease;
}

/* Au hover : image ET overlay scalent pareil */
#droite_livre:hover::after, #droite_conseils:hover::after         { transform: scale(1.005); }
#droite_livre:hover .content::after,  #droite_conseils:hover .content::after{ opacity: 1; transform: scale(1.005); }
#gauche_qui_suis_je:hover::after         { transform: scale(1.02); }
#gauche_qui_suis_je:hover .content::after{ opacity: 1; transform: scale(1.02); }




/*---------------------------------- SNAP SCROLL ----------------------------------------------*/

body {
  /* Active les paliers sur l’axe vertical */
  scroll-snap-type: y mandatory;

  /* Défilement doux (garde ton JS smooth si tu préfères) */
  scroll-behavior: smooth;

  /* Évite l'effet rebond sur certains navigateurs */
  overscroll-behavior-y: contain;
}

.snap-section {
  scroll-snap-align: start;
  min-height: 100vh; /* tes sections ont déjà souvent 100vh, on sécurise */
}

/* Accessibilité : si l'utilisateur préfère moins d'animations, on désactive le snap */
@media (prefers-reduced-motion: reduce) {
  body { scroll-snap-type: none; scroll-behavior: auto; }
}



/*----------------------------------------- AVIS --------------------------------------------------------------*/

/* ----------------- LIGNE AVIS ----------------- */
#ligne_avis {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  gap: 4vh;
  width: 100%;
  min-height: 60vh;
  grid-column: span 2;
  box-sizing: border-box;
  background: linear-gradient(to left, var(--background_2), var(--main_background), var(--background_2));
  color: #fff;
  
  padding-bottom : 7vw;
  padding-top : 7vw;
}



#avis_header {
  text-align: center;
  max-width: 700px;
}

#avis_header h2 {
  font-size: 2.4vw;
  letter-spacing: 0.12em;
    text-align: center;
  margin-left : -3vw;
  width : 100%;
}



#avis_header p {
  margin-top: 1vh;
  font-size: 1.1vw;
  opacity: 0.9;
}

/* Liste des avis */
#avis_liste {
  display: flex;
  gap: 2vw;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 90%;
  flex-wrap: wrap;        /* ✅ permet de passer sur 2 lignes */
}

/* Carte avis */
.avis_card {
  flex: 1 1 260px;        /* ✅ base raisonnable */
  max-width: 340px;       /* ✅ évite les cartes trop étroites */
  min-width: 230px;
  min-height: 0;
  padding: 1.8vw;
  border-radius: 1.2vw;
  background: radial-gradient(circle at top left, var(--background_2), rgba(0,0,0,0.2));
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4vw;
  transform: translateY(0);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.avis_card:hover {
  transform: translateY(-0.6vw);
  box-shadow: 0 24px 55px rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.25);
}

/* Header de la carte (avatar + nom) */
.avis_header_card {
  display: flex;
  align-items: center;
  gap: 0.9vw;
}

.avis_avatar {
  width: 2.8vw;
  height: 2.8vw;
  border-radius: 50%;
  background: var(--back_header);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1vw;
  text-transform: uppercase;
}

.avis_header_card h3 {
  font-size: 1.1vw;
  margin-bottom: 0.2vw;
}

.avis_header_card span {
  font-size: 1.1vw;
  opacity: 0.8;
}

/* Texte d'avis */
.avis_texte {
  font-size: 0.95vw;
  line-height: 1.6;
  font-style: italic;
}

/* Note */
.avis_note {
  font-size: 1.1vw;
  letter-spacing: 0.18em;
  opacity: 0.9;
}

#ils_nous_ont_fait_confiance {
    white-space: nowrap;
    /*margin-left : -30vw;*/
}

/*---------------------------------------------------------------- RESPONSIVE ------------------------------------------------------------------------*/

/* ---------- Breakpoint tablette & mobile (≤ 768px) ---------- */
@media (max-width: 768px) {

  /* H1 d’accueil */
  #Title_accueil {
    height: auto;
    margin-top : 120%;
    font-size: clamp(32px, 13vw, 64px);
    line-height: 1.05;
  }
  #Title_accueil_container { 
      
    height: 50vh;
  display : flex;
  flex-direction: row;
  align-items: bottom;
  width : 100%;
  padding-bottom: 35vw;
  
  z-index: 40;
  overflow: visible;
      
  }

  /* Grille principale → 1 colonne */
  #container_accueil {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    justify-items: center;
    align-items: start;
  }

  .bloc_fleche {
    grid-column: 1 / -1;
    height: 35vh;
    margin: 24px 0 16px;
    margin-bottom : 20vw;
    display: flex; flex-direction: column; align-items: center; justify-content: end;
  }
  .bloc_fleche img { height: 12vh; }

  /* -------- LIGNE "comment bien" (ligne_qui_suis_je dans le HTML) -------- */
  
  
  
  /* ---------- Lignes avec images + texte ---------- */
  #ligne_vestiaire_new,
  #ligne_livre_new,
  #ligne_conseils,
  #ligne_qui_suis_je_new {
    grid-template-columns: 1fr;
    height: auto;
  }

/* Bloc images → plein écran en largeur */
  /* On force les blocs d’images à une hauteur visible */
  #gauche_vestiaire,
  #droite_livre,
  #gauche_qui_suis_je,
  #droite_conseils {   /* <-- ajoute ça */
    transform: none;
    height: 50vh;
  }

/* Texte → plus compact et centré */
  /* On cache seulement les colonnes de texte inutiles */
  #droite_vestiaire,
  #gauche_livre,
  #droite_qui_suis_je {
    display: none;
  }

/* Images des colonnes texte → plus petites */
#droite_vestiaire img,
#gauche_livre img,
#droite_qui_suis_je img {
  width: 35%;
}

/* Paragraphe plus lisible sur mobile */
#droite_vestiaire p,
#gauche_livre p,
#droite_qui_suis_je p {
  font-size: 4vw;
  line-height: 1.4;
}

.content h2 {
    font-size: 7vw;
}





#ligne_avis {
    
    padding-top : 3vh;
    padding-bottom : 3vh;


justify-content: start;

  gap: 6vh;
  width: 100%;
  height: auto;

}


#avis_header h2 {
  font-size: 4.5vw;
  margin : 0;
}



#avis_liste {
  display: flex;
  gap: 2vw;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 90%;
  flex-wrap: wrap;        /* ✅ permet de passer sur 2 lignes */
}

/* Carte avis */
.avis_card {
  flex: 1 1 260px;        /* ✅ base raisonnable */
  max-width: 340px;       /* ✅ évite les cartes trop étroites */
  min-width: 230px;
  min-height: 0;
  padding: 1.8vw;
  border-radius: 1.2vw;
  background: radial-gradient(circle at top left, var(--background_2), rgba(0,0,0,0.2));
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5w;
  transform: translateY(0);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}



.avis_avatar {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: var(--back_header);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 3vw;
  text-transform: uppercase;
}

.avis_header_card h3 {
  font-size: 3vw;
  margin-bottom: 0.2vw;
}

.avis_header_card span {
  font-size: 1.1vw;
  opacity: 0.8;
}

/* Texte d'avis */
.avis_texte {
  font-size: 2.6vw;
  line-height: 1.6;
  font-style: italic;
}

/* Note */
.avis_note {
  font-size: 2.6vw;
  letter-spacing: 0.18em;
  opacity: 0.9;
}






}