*, *::before, *::after {
  box-sizing: border-box;
}

.fixed_blocks_sticky .sidebar {
  display: none;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

.page-template-espace-partage {
  background-color: #F7F6F4;
}

/* SECTION HEADER & EQUIPE */
#espacePartage .sectionHeader {
  background-color: #F7F6F4;
}

#espacePartage .sectionHeader .mobile {
  color: black;
  display: none;
}

#espacePartage .sectionHeader .mobile .surtitre {
  padding-bottom: 12.88px;
}

#espacePartage .sectionHeader .equipe {
  position: relative;
  height: 200vh;
  text-align: center;
}

#espacePartage .sectionHeader .equipe .equipeBackground {
  height: 100%;
}

#espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer {
  background-color: transparent;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 10;
}

#espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer .text {
  position: absolute;
  top: 40%;
  width: 100%;
}

#espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer .text .logoespace {
  display: flex;
  gap: 25px;
  justify-content: center;
}

#espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer h1 {
  font-size: 58px;
  font-style: normal;
  font-weight: 300;
  line-height: 60px;
  letter-spacing: -1.44px;
  color: #808083;
  font-family: museo-sans, sans-serif;
  margin-top: 0;
  position: relative;
}

#espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer .text .surtitre {
  padding-bottom: 12.88px;
}

#espacePartage .sectionHeader .equipe .equipePhotos {
  height: 100%;
  position: absolute;
  top: 27%;
  left: 0;
  width: 100%;
  pointer-events: none;
}

#espacePartage .sectionHeader .equipe .equipePhotos.back {
  z-index: 5;
}

#espacePartage .sectionHeader .equipe .equipePhotos.front {
  z-index: 15;
}

#espacePartage .sectionHeader .equipe .equipePhotos img {
  position: absolute;
  will-change: transform;
}

#espacePartage .sectionHeader .equipe .equipePhotos .anneSophie { right: 34%; top: 15%; }
#espacePartage .sectionHeader .equipe .equipePhotos .reynald    { left: 20%;  top: 25%; }
#espacePartage .sectionHeader .equipe .equipePhotos .azra       { right: 2%;  top: 28%; }
#espacePartage .sectionHeader .equipe .equipePhotos .gabriel    { right: 28%; top: 38%; }
#espacePartage .sectionHeader .equipe .equipePhotos .stephanie  { left: 10%;  top: 42%; }
#espacePartage .sectionHeader .equipe .equipePhotos .virginie   { right: 2%;  top: 48%; }
#espacePartage .sectionHeader .equipe .equipePhotos .shirley    { left: 38%;  top: 60%; }

#espacePartage .sectionHeader .equipe .desktop {
  display: block;
} 
#espacePartage .sectionHeader .equipe .mobile {
  display: none;
} 

/* BLOC 2 */
.bloc2 .section2 {
  margin: 0 10px;
  border-radius: 8px 8px 0 0;
  background-image: url('../../../uploads/2026/09/bgSection2SalonSaintTherese-scaled.jpg');
  background-size: cover;
  height: 100vh;
}

.bloc2 .section2 .contenu {
  margin-left: 28px;
  padding-top: 45px;
}

.bloc2 .section2 .contenu .surtitre {
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.17px;
  text-transform: uppercase;
  color: #808083;
  font-family: museo-sans, sans-serif;
}

.bloc2 .section2 .contenu h2 {
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -2.8px;
  color: #808083;
  font-family: museo-sans, sans-serif;
  margin-top: 14px;
}

.bloc2 .sectionTexteCentrer .container {
  padding: 72px 0;
  display: flex;
  flex-flow: column;
  gap: 23px;
  align-items: center;
  text-align: center;
}

.bloc2 .sectionTexteCentrer .container p {
  color: #808083;
  text-align: center;
  font-family: museo-sans, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -0.22px;
  width: 80%;
}

/* BLOC 3 */
.bloc3 {
  padding: 0;
  background-color: #F7F6F4;
  width: 100%;
  overflow: hidden;
}

.bloc3 .container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.bloc3 .gridCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  align-items: stretch;
}

.bloc3 .cardItem {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-width: 0;
}

.bloc3 .cardMedia {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
}

.bloc3 .cardMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bloc3 .cardOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 131, 0.90);
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 2;
}

.bloc3 .cardItem.active .cardOverlay {
  opacity: 1;
  visibility: visible;
}

.bloc3 .cardOverlay .overlayTitle {
  font-family: museo-sans, sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 50px;
  letter-spacing: -1.44px;
  color: #FFFFFF;
  margin-top: 48px;
}

.bloc3 .cardOverlay .overlayText {
  font-family: museo-sans, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.17px;
  color: #FFFFFF;
  margin: 0;
  max-width: 437px;
}

.bloc3 .cardFooter {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 20px 16px 20px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.bloc3 .cardFooter h3 {
  font-family: museo-sans, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.28px;
  color: #fff;
  margin: 0;
  max-width: 80%;
}

.bloc3 .btnPlus {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}

.bloc3 .btnPlus svg {
  width: 24px;
  height: 24px;
  display: block;
}

.bloc3 .cardGroupSmall {
  display: flex;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.bloc3 .cardGroupSmall .smallCard {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* @media screen and (min-width: 769px) {
  .bloc3 .gridCards {
    align-items: stretch;
  }

  .bloc3 .gridCards > .cardItem {
    height: 100%;
  }

  .bloc3 .cardGroupSmall .smallCard .cardMedia {
    aspect-ratio: unset !important;
    height: 100%;
  }
} */

/* --- BLOC 4 : STYLES CORRIGÉS --- */

.bloc4 {
  padding: 120px 0;
  background-color: #ffffff;
  border-radius: 8px 8px 0 0;
  margin: 10px;
  width: calc(100% - 20px);
}

.bloc4 .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: row; /* Force l'affichage côte à côte */
  justify-content: space-between;
  align-items: center;
  gap: 150px;
}

/* Colonne Gauche (Slider) */
.bloc4 .left {
  flex: 0 0 40%; /* Largeur fixe de 45% */
  width: 40%;
  display: block;
}

/* Colonne Droite (Texte) */
.bloc4 .right {
  flex: 0 0 50%; /* Largeur fixe de 50% */
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bloc4 .right h2 {
  font-size: 44px;
  font-style: normal;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: normal; /* Annule tout letter-spacing négatif problématique */
  font-family: museo-sans, sans-serif;
  color: #808083;
  margin: 0;
  white-space: normal; /* Empêche le texte de se casser à la verticale */
  word-break: normal;
}

.bloc4 .right p {
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: normal;
  font-family: museo-sans, sans-serif;
  color: #808083;
  margin: 0;
  width: 90%;
  white-space: normal;
}

.bloc4 .right p strong {
  font-weight: 700;
}

/* Structure Slider */
.bloc4 .sliderContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Maintient un ratio carré parfait */
  overflow: hidden;
  border-radius: 12px;
}

.bloc4 .sliderTrack {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.bloc4 .slide {
  min-width: 100%;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.bloc4 .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dots */
.bloc4 .sliderDots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.bloc4 .dot {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.bloc4 .dot.active {
  background-color: #FFFFFF;
  transform: scale(1.2);
}
.bloc5{
  position:relative;
}
.bloc5 img{
  width:100%;
  position:relative;
  height:auto;
  object-fit:cover;
}
.bloc5 .blocTitle{
  position:absolute;
  bottom:100px;
  left:40px;
}
.bloc5 .blocTitle h2{
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 52px; /* 92.857% */
  letter-spacing: -2.8px;
  font-family: museo-sans, sans-serif;
  color: #fff;
}
.bloc6{
  position:relative;
  padding:45px 0 40px 0;
}
.bloc6 .container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-between;
  gap: 39px 20px;
}
.bloc6 .container .title{
  width:100%;
  text-align: center;
}
.bloc6 .container .title .surtitre{
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  text-transform: uppercase;
  font-family: museo-sans, sans-serif;
  color: #808083;
  display: block;
  margin-bottom: 9px;
}
.bloc6 .container .title h2{
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 50px; /* 104.167% */
  letter-spacing: -1.44px;
  font-family: museo-sans, sans-serif;
  color: #808083;
  margin-top:0;
}
.bloc6 .container .left, .bloc6 .container .right{
  width:49%;
}
.bloc6 .container .left h4{
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  text-transform: uppercase;
  font-family: museo-sans, sans-serif;
  color: #808083;
  margin-top: 0;
  margin-bottom:9px;
}
.bloc6 .container .left p{
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  font-family: museo-sans, sans-serif;
  color: #808083;
}
.bloc6 .container .right ul{
  margin-bottom:0;
}
.bloc6 .container .right ul li{
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.17px;
  font-family: museo-sans, sans-serif;
  color: #808083;
  padding-bottom:5px;
}
.bloc6 .container .right ul li strong{
  font-weight: 700;
}
.bloc7{
  position:relative;
}
.bloc7 .mobile {
  display: none; /* Masqué par défaut en version Desktop */
}
.bloc7 .desktop .sectionImages.container{
  margin: 0 auto;
  display: flex;
  padding:0;
  gap:0 10px;
  position:relative;
} 
.bloc7 .desktop .sectionImages.container .left, .bloc7 .desktop .sectionImages.container .right{
  width:50%;
  position:relative;
  padding:0;
}
.bloc7 .desktop .sectionImages.container .left img, .bloc7 .desktop .sectionImages.container .right img{
  width:100%;
  height:auto;
  position:relative;
}
.bloc7 .desktop .sectionImages.container .left .blocTitle, .bloc7 .desktop .sectionImages.container .right .blocTitle{
  position:absolute;
  left:27px;
  bottom:29px;
}
.bloc7 .desktop .left .blocTitle .surtitre, .bloc7 .desktop .right .blocTitle .surtitre{
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  text-transform: uppercase;
  font-family: museo-sans, sans-serif;
  color: #fff;
  display: block;
}
.bloc7 .desktop .left .blocTitle h2, .bloc7 .desktop .right .blocTitle h2{
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 50px; /* 104.167% */
  letter-spacing: -1.44px;
  font-family: museo-sans, sans-serif;
  color: #fff;
  margin-top:2px;
  margin-bottom:0;
}
.bloc7 .desktop .container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap:wrap;
}
.bloc7 .desktop .container .left, .bloc7 .desktop .container .right{
  flex: 0 0 49.5%;
  width: 49.5%;
  display: block;
  padding-left:27px;
}
.bloc7 .desktop .container .left h4, .bloc7 .desktop .container .right h4{
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  text-transform: uppercase;
  font-family: museo-sans, sans-serif;
  color: #808083;
  margin-bottom:20px;
  margin-top:0
}
.bloc7 .desktop .container .left p, .bloc7 .desktop .container .right p{
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  font-family: museo-sans, sans-serif;
  color: #808083;
  width:80%;
}
.bloc7 .desktop .blocButton{
  width:100%;
  text-align: center;
  padding-bottom:80px;
}
.bloc7 .sc_button.sc_button_default.sc_button_size_normal.sc_button_icon_left.color_style_link2{
  font-family: museo-sans, sans-serif;
  color: #fff;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
}
.bloc8{
  margin: 0 10px;
  border-radius: 8px 8px 0 0;
  background-image: url('../../../uploads/2026/09/bg-tarifSurMesure.png');
  background-size: cover;
  height: 60vh;
  background-position: bottom;
  margin-bottom: 54px;
}
.bloc8 .container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  padding-top:85px;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: flex-end;
  gap: 0 260px;
  
}
.bloc8 .container .left{
  width:30%;
}
.bloc8 .container .left h2{
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 50px; /* 104.167% */
  letter-spacing: -1.44px;
  font-family: museo-sans, sans-serif;
  color: #808083;
  margin:0;
}

.bloc8 .container .right{
  width:43.75%;
}
.bloc8 .container .right p{
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  font-family: museo-sans, sans-serif;
  color: #808083;
}
/* ==========================================
   SECTION BLOC 9 - ACCORDÉON / FAQ
========================================== */
.bloc9 {
  padding: 55px 0 80px 0;
  background-color: #F7F6F4;
}

.bloc9 h2 {
  text-align: center;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.17px;
  text-transform: uppercase;
  margin: 0 0 40px 0;
  font-family: museo-sans, sans-serif;
  color: #808083;
}

/* Accordéon Conteneur */
.bloc9 .accordion {
  width: 100%;
  max-width: 1420px; /* Largeur max sur grand écran */
  margin: 0 auto;
}

/* Ligne séparatrice (1420px x 1px couleur #808083) */
.bloc9 .accordion-item {
  border-top: 1px solid #808083;
}

.bloc9 .accordion-item:last-child {
  border-bottom: 1px solid #808083;
}

/* En-tête / Question */
.bloc9 .accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  padding: 30px 0;
  cursor: pointer;
  text-align: left;
}

/* Texte de la question */
.bloc9 .accordion-title {
  font-family: museo-sans, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 300;
  line-height: 28px; /* 100% */
  letter-spacing: -0.28px;
  color: #808083;
  padding-right: 20px;
}

/* Icône + / - (width: 30px, height: 3px, color: #A6182E) */
.bloc9 .accordion-icon {
  position: relative;
  width: 30px;
  height: 3px;
  background-color: #A6182E;
  flex-shrink: 0;
  display: inline-block;
}

/* Barre verticale du + */
.bloc9 .accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 30px;
  background-color: #A6182E;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

/* Transformation du + en - */
.bloc9 .accordion-item.active .accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Conteneur fluide réductible (Transition basée sur height réelle) */
.bloc9 .accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  padding-right:50px;
}

/* Corps du contenu */
.bloc9 .accordion-body {
  padding-bottom: 40px;
}

.bloc9 .accordion-body p {
  font-family: museo-sans, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  color: #808083;
  margin: 0 0 16px 0;
}

.bloc9 .accordion-body p strong {
  font-weight: 700;
  font-family: museo-sans, sans-serif;
}

/* Grille 3 colonnes de l'onglet 1 */
.bloc9 .accordion-body .intro-text {
  margin-bottom: 27px;
  width:90%;
}

.bloc9 .columns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 35px;
}

.bloc9 .column-item {
  border-left: 1px solid #808083;
  padding-left: 10px;
}

.bloc9 .column-item h3 {
  font-family: museo-sans, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.17px;
  color: #808083;
  text-transform: uppercase;
  margin: 0;
}

.bloc9 .column-item h3 span {
  display: block;
}

.bloc9 .accordion-body .footer-text {
  margin-top: 40px;
  width:78%;
}
.bloc10{
  margin: 0 0 80px 0;
  
  
}
.bloc10 .container{
  display: flex;
  flex-flow:column;
  align-items: center;
  border-radius: 8px 8px 0 0;
  background-color: #161F3B;
  background-size: cover;
  padding:73px 0 60px 0;
}
.bloc10 .container h2{
  margin:0 0 57px 0;
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 50px; /* 104.167% */
  letter-spacing: -1.44px;
  color:#fff;
  font-family: museo-sans, sans-serif;
  text-align: center;
}
.bloc10 .container p{
  font-size: 22px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px; /* 136.364% */
  letter-spacing: -0.22px;
  color:#fff;
  font-family: museo-sans, sans-serif;
  text-align: center;
  margin-bottom: 25px;
  width:50%
}
.bloc10 .container .blocButton{
  width:100%;
  text-align: center;
}
.bloc10 .sc_button.sc_button_default.sc_button_size_normal.sc_button_icon_left.color_style_link2{
  font-family: museo-sans, sans-serif;
  color: #fff;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 141.176% */
  letter-spacing: -0.17px;
  text-transform: uppercase;
}
/* MEDIA QUERIES GLOBALES MOBILE */
/* @media screen and (max-width: 1024px) {
  #espacePartage .sectionHeader .mobile {
    display: block;
    margin: 100px 0 50px 5%;
  }
  #espacePartage .sectionHeader .equipe {
    height: auto;
    position: static;
  }
  #espacePartage .sectionHeader .equipe .equipeBackground {
    height: 50vh;
  }
  #espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer {
    position: static;
    height: 50vh;
  }
  #espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer .desktop {
    display: none;
  }
  #espacePartage .sectionHeader .equipe .equipePhotos img {
    position: relative;
  }
  #espacePartage .sectionHeader .equipe .equipePhotos .anneSophie { left: 5%; right: auto; }
  #espacePartage .sectionHeader .equipe .equipePhotos .reynald { left: 15%; top: 200px; }
  #espacePartage .sectionHeader .equipe .equipePhotos .azra { top: 600px; right: 53%; left: auto; }
  #espacePartage .sectionHeader .equipe .equipePhotos .gabriel { top: 425px; right: auto; left: 57%; }
  #espacePartage .sectionHeader .equipe .equipePhotos .stephanie { top: 32%; }
  #espacePartage .sectionHeader .equipe .equipePhotos .bruno { top: 42%; }
  #espacePartage .sectionHeader .equipe .desktop { display: none; }
  #espacePartage .sectionHeader .equipe .mobile {
    display: block;
    position: static;
    margin-top: 100px;
    height: auto;
  }

  .bloc4 .container {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }

  .bloc4 .left,
  .bloc4 .right {
    width: 100%;
    flex: 0 0 100%;
  }

  .bloc4 .sliderContainer {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .bloc9 .container,
  .bloc9 .accordion {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .bloc9 .columns-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .bloc9 .accordion-title {
    font-size: 22px;
    line-height: 26px;
  }
}

@media screen and (max-width: 768px) {
  .bloc3 .gridCards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bloc3 .cardGroupSmall {
    flex-direction: column;
    gap: 16px;
    height: auto;
  }

  .bloc3 .cardGroupSmall .smallCard .cardMedia {
    aspect-ratio: 16 / 10;
  }
} */
/* ==========================================================================
   AGENCY RESPONSIVE BREAKPOINTS (Desktop-First)
   Formats validés :
   - Ultra Wide : 2000px+
   - Desktop High / Standard : 1920, 1728, 1512, 1440
   - Laptop / Small Desktop : 1280
   - Tablets : 1024, 834, 744
   - Mobile Phones : 440, 412, 375
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ULTRA WIDE SCREENS (2000px et +)
   -------------------------------------------------------------------------- */
   @media screen and (min-width: 2000px) {
    .container {
      max-width: 1600px;
    }
    
    .bloc2 .section2 .contenu h2,
    #espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer h1,
    .bloc5 .blocTitle h2 {
      font-size: 64px;
      line-height: 68px;
    }
  
    .bloc9 .accordion {
      max-width: 1600px;
    }
  }
  
  /* --------------------------------------------------------------------------
     2. DESKTOP standard (1512px à 1728px)
     -------------------------------------------------------------------------- */
  @media screen and (max-width: 1728px) {
    .bloc8 .container {
      gap: 0 120px;
    }
  }
  
  @media screen and (max-width: 1512px) {
    .bloc4 .container {
      gap: 80px;
    }
  
    .bloc8 .container {
      gap: 0 60px;
    }
  }
  
  /* --------------------------------------------------------------------------
     3. LAPTOP & SMALL DESKTOP (1280px à 1439px)
     -------------------------------------------------------------------------- */
  @media screen and (max-width: 1440px) {
    .container,
    .bloc9 .accordion, .bloc4 .container, .bloc6 .container, .bloc7 .desktop .container, .bloc7 .desktop .container, .bloc8 .container {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
    }
  
    .bloc4 {
      width: calc(100% - 20px);
      padding: 80px 0;
    }
  
    .bloc4 .container {
      gap: 50px;
    }
  
    .bloc8 .container {
      padding-top: 60px;
      justify-content: space-between;
      gap: 0;
    }
  
    .bloc8 .container .left {
      width: 38%;
    }
  
    .bloc8 .container .right {
      width: 55%;
    }
  
    .bloc10 .container p {
      width: 70%;
    }
    .bloc3 .cardOverlay .overlayText{
      max-width:80%;
    }
    .bloc3 .cardGroupSmall .smallCard .cardOverlay .overlayText{
      max-width: 100%;
    }
    .bloc3 .cardOverlay .overlayTitle{
      margin-top: 30px;
    }
  }
  
  /* --------------------------------------------------------------------------
     4. TABLETS - LANDSCAPE & PORTRAIT (1024px à 1279px)
     -------------------------------------------------------------------------- */
  @media screen and (max-width: 1280px) {
    /* Réduction globale de typographie pour tablettes */
    #espacePartage .sectionHeader .equipe .equipeBackground .backgroundContainer h1,
    .bloc2 .section2 .contenu h2,
    .bloc5 .blocTitle h2 {
      font-size: 42px;
      line-height: 46px;
    }
  
    .bloc6 .container .left, 
    .bloc6 .container .right {
      width: 100%;
    }
  
    .bloc9 .accordion-body .intro-text,
    .bloc9 .accordion-body .footer-text {
      width: 100%;
    }
    .bloc3 .cardOverlay .overlayText {
      max-width: 100%;
    }
    .bloc3 .cardOverlay .overlayTitle {
      font-size: 40px;
      line-height: 40px;
      margin-top: 20px;
    }
    .bloc3 .cardGroupSmall {
      flex-direction: column;
      gap: 14px;
    }
    .bloc3 .cardGroupSmall .smallCard .cardMedia {
      aspect-ratio: 16 / 10;
      height: auto;
    }
    .bloc4 .right {
      flex: 0 0 55%;
      width: 55%;
    }
    .bloc4 .right p{
      width:100%;
    }
    .bloc7 .desktop .container .left p, .bloc7 .desktop .container .right p{
      width:95%;
    }
    .bloc8 .container .right {
      width: 52%;
    }
    .bloc8 {
      height: 60vh
    }
  }
  @media screen and (max-width: 1280px) and (max-height: 720px) {
    .bloc8 {
      height: 75vh
    }
  }
  
  /* --------------------------------------------------------------------------
     5. TABLETS PORTRAIT (744px à 1024px) - INCLUT IPAD PRO 1024, IPAD AIR 834, IPAD MINI 744
     -------------------------------------------------------------------------- */
  @media screen and (max-width: 1024px) {
    #espacePartage .sectionHeader .equipe.desktop {
      display: none !important;
    }

    #espacePartage .sectionHeader .mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin: 80px auto;
    }

    #espacePartage .sectionHeader .mobile h1 {
      font-size: 34px;
      line-height: 40px;
      color: #808083;
      font-family: museo-sans, sans-serif;
      font-weight: 300;
      margin: 0 0 50px 0;
      text-align: center;
      max-width: 100%;
    }

    #espacePartage .sectionHeader .mobile .logoespace {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top:15px;
    }

    /* Nouvelle grille harmonieuse pour les visages de l'équipe */
    .equipeGalerieMobile {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 4 photos par ligne au format 1024px */
      gap: 16px;
      width: 100%;
      padding: 0 10px;
    }
    .equipeGalerieMobile.bloctop {
      margin-bottom:50px;
    }
    .equipeGalerieMobile.blocbottom {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      width: 100%;
      padding: 0 10px;
    }

    .equipeGalerieMobile .photoItem {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4; /* Ratio uniforme pour toutes les photos d'équipe */
      background-color: transparent;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .equipeGalerieMobile .photoItem img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center; /* Zoome légèrement et recentre sur le visage */
      display: block;
    }
  
    /* BLOC 2 à 10 : PASSAGE EN COLONNE SEULE */
    .bloc2 .section2 {
      height: 50vh;
    }
  
    .bloc2 .sectionTexteCentrer .container p {
      width: 100%;
      font-size: 18px;
      line-height: 26px;
    }
    .bloc2 .section2 .contenu {
      padding-top: 25px;
    }
    .bloc2 .section2 .contenu h2{
      margin-top: 5px;
    }
    .bloc2 .sectionTexteCentrer .container p{
      margin-bottom:0;
    }
    .bloc3 .gridCards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .bloc3 .cardGroupSmall {
      flex-flow:row;
    }
    .bloc3 .cardGroupSmall .smallCard:nth-child(2) .cardOverlay .overlayTitle br{
      display: none;
    }
    .bloc4 {
      padding: 50px 0;
    }
  
    .bloc4 .container {
      flex-direction: column;
      gap: 30px;
    }
  
    .bloc4 .right {
      width: 100%;
      flex: 0 0 100%;
    }
    .bloc4 .left{
      width: 50%;
      flex: 0 0 50%;
    }
    .bloc4 .right p {
      width: 100%;
    }
  
    .bloc5 .blocTitle {
      bottom: 40px;
      left: 20px;
    }
    .bloc6 .container{
      gap:20px;
    }
  
    .bloc7 .desktop {
      display: none !important;
    }
  
    .bloc7 .mobile {
      display: block;
    }
  
    .bloc7 .mobile .container {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
  
    .bloc7 .mobile .formuleItem {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  
    .bloc7 .mobile .imageWrapper {
      position: relative;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
  
    .bloc7 .mobile .imageWrapper img {
      width: 100%;
      height: auto;
      display: block;
    }
  
    .bloc7 .mobile .imageWrapper .blocTitle {
      position: absolute;
      left: 20px;
      bottom: 20px;
    }
  
    .bloc7 .mobile .imageWrapper .blocTitle .surtitre {
      font-size: 15px;
      font-weight: 700;
      line-height: 20px;
      letter-spacing: -0.15px;
      text-transform: uppercase;
      font-family: museo-sans, sans-serif;
      color: #fff;
      display: block;
    }
  
    .bloc7 .mobile .imageWrapper .blocTitle h2 {
      font-size: 36px;
      font-weight: 300;
      line-height: 40px;
      letter-spacing: -1px;
      font-family: museo-sans, sans-serif;
      color: #fff;
      margin: 2px 0 0 0;
    }
  
    .bloc7 .mobile .textContent {
      padding-top: 20px;
    }
  
    .bloc7 .mobile .textContent h4 {
      font-size: 17px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: -0.17px;
      text-transform: uppercase;
      font-family: museo-sans, sans-serif;
      color: #808083;
      margin: 0 0 15px 0;
    }
  
    .bloc7 .mobile .textContent p {
      font-size: 17px;
      font-weight: 300;
      line-height: 24px;
      letter-spacing: -0.17px;
      font-family: museo-sans, sans-serif;
      color: #808083;
      width: 100%;
      margin: 0;
    }
  
    .bloc7 .mobile .blocButton {
      width: 100%;
      text-align: center;
      padding: 20px 0 40px 0;
    }
  
    .bloc8 {
      height: 55vh;
      padding: 50px 0;
      background-size: cover;
      background-position: 10%;
    }
  
    .bloc8 .container {
      padding-top: 0;
      flex-direction: column;
      gap: 20px;
    }
  
    .bloc8 .container .left,
    .bloc8 .container .right {
      width: 100%;
    }
  
    /* FAQ / Accordéon (Bloc 9) */
    .bloc9 .columns-grid {
      grid-template-columns: 1fr;
      gap: 25px;
    }
  
    .bloc9 .accordion-title {
      font-size: 24px;
      line-height: 24px;
    }
  
    .bloc10 .container p {
      width: 90%;
      font-size: 18px;
      line-height: 26px;
    }
    .bloc9 .accordion{
      max-width:100%;
    }
  }

  @media screen and (max-width: 834px) {
    .bloc3 .cardGroupSmall {
      flex-flow:column;
    }
    .bloc3 .cardOverlay .overlayTitle {
      margin-top: 40px;
    }
  }
  
  /* --------------------------------------------------------------------------
     6. PHONES & MOBILE FORMATS (375px, 412px, 440px)
     -------------------------------------------------------------------------- */
  @media screen and (max-width: 768px) {
    /* Cartes Bloc 3 */
    .bloc3 .gridCards {
      grid-template-columns: 1fr;
      gap: 15px;
    }
  
    .bloc3 .cardGroupSmall {
      flex-direction: column;
      gap: 15px;
    }
  
    .bloc3 .cardOverlay .overlayTitle {
      font-size: 30px;
      line-height: 34px;
      margin-top: 25px;
    }
  
    .bloc3 .cardFooter h3 {
      font-size: 20px;
      line-height: 22px;
    }
  
    /* Bloc 5 Titre */
    .bloc5 .blocTitle h2 {
      font-size: 32px;
      line-height: 36px;
    }
  
    /* Bloc 6 Titres */
    .bloc6 .container .title h2,
    .bloc7 .desktop .left .blocTitle h2,
    .bloc7 .desktop .right .blocTitle h2,
    .bloc8 .container .left h2,
    .bloc10 .container h2,
    .bloc4 .right h2 {
      font-size: 32px;
      line-height: 36px;
    }

    .bloc4 .left {
      width: 70%;
      flex: 0 0 70%;
    }
    .bloc9 .accordion-title {
      font-size: 21px;
      line-height: 24px;
    }
  }
  @media screen and (max-width: 480px) {
    .equipeGalerieMobile, .equipeGalerieMobile.blocbottom {
      grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur très petit écran */
      gap: 10px;
    }
    .bloc2 .section2 {
      background-position: 35%;
    }
    .bloc3 .cardOverlay .overlayTitle{
      font-size: 22px;
      line-height: 24px;
      margin-top: 15px;
    }
    .bloc3 .cardOverlay .overlayTitle br{
      display: none;
    }
    .bloc3 .cardOverlay .overlayText {
      font-size: 15px;
      line-height: 20px;
    }
    .bloc3 .cardMedia{
      aspect-ratio: 18 / 13;
    }
    .bloc4 .left {
      width: 100%;
      flex: 0 0 100%;
    }
    .bloc5 .blocTitle {
      bottom: 10px;
      
    }
    .bloc8 {
      height: 95vh;
      background-position: 12%;
    }
    
  } 
  /* Ajustements fins pour très petits écrans (440px et moins) */
  @media screen and (max-width: 440px) {
    /* Équipe Galerie : 1 colonne sur les téléphones étroits pour plus de lisibilité */
    #espacePartage .sectionHeader .equipe .equipePhotos {
      grid-template-columns: 1fr;
    }
  
    .bloc9 .accordion-header {
      padding: 20px 0;
    }
  
    .bloc9 .accordion-title {
      font-size: 18px;
      line-height: 22px;
    }
  
    .bloc9 .accordion-icon {
      width: 22px;
    }
  
    .bloc9 .accordion-icon::after {
      height: 22px;
    }
  }