:root {
  --clecle-rose: #C7A2A6;
  --clecle-beige: #FFFDF8;
  --clecle-bordeaux: #441515;
  --clecle-or: #C6A76D;
}

.salle-nav__item:hover{
  color:var(--clecle-beige) !important;
}

.collection-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: #2b2b2b;
  font-family: var(--font-main);
}

/* ---- Hero / intro générique ---- */
.collection-hero { text-align: center; max-width: 100%; margin: 0 auto 50px; }
.collection-hero__title { font-size: 2rem; letter-spacing: 2px; margin-bottom: 24px; }
.collection-hero__intro { font-size: 1.06rem; line-height: 1.7; margin-bottom: 14px; }
.collection-hero__outro { text-align: center; font-size: 1.12rem; margin: 50px auto; font-style: italic; }
.collection-cta-center { text-align: center; margin: 30px 0; }

/* ---- Aperçu des 5 pièces, en une ligne, sous le texte principal ---- */
.collection-pieces-overview {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 100%;
  margin: 0 auto 64px;
  flex-wrap: wrap;
}
.collection-pieces-overview__item {
  flex: 1 1 180px;
  max-width: 200px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.collection-pieces-overview__item img,
.collection-pieces-overview__item .maison-block__placeholder {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  transition: opacity .25s ease;
}
.collection-pieces-overview__item:hover img {
  opacity: .85;
}
.collection-pieces-overview__caption {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  letter-spacing: .3px;
  color: var(--clecle-bordeaux);
}

@media (max-width: 700px) {
  .collection-pieces-overview {
    gap: 16px;
  }
  .collection-pieces-overview__item {
    flex: 1 1 42%;
    max-width: 45%;
  }
  .collection-pieces-overview__item img,
  .collection-pieces-overview__item .maison-block__placeholder {
    height: 180px;
  }
}

/* ---- Placeholders ---- */
.maison-block__placeholder {
  color: #8a7a6d;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  font-size: 1rem; letter-spacing: 1px;
}
.maison-block__placeholder--hero { min-height: 420px; font-size: 1.44rem; letter-spacing: 3px; }

/* ---- Sous-menu La Collection ---- */
.collection-submenu {
  display: flex; justify-content: center; gap: 40px;
  padding: 14px 0; margin-bottom: 40px;
  border-top: 1px solid var(--clecle-rose);
  border-bottom: 1px solid var(--clecle-rose);
}
.collection-submenu__link { color: #2b2b2b; text-decoration: none; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; }
.collection-submenu__link--active, .collection-submenu__link:hover { color: var(--clecle-bordeaux); border-bottom: 1px solid var(--clecle-bordeaux); }

/* ---- Doors grid (hub) ---- */
.doors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 40px 0; }
.doors-grid__item { display: block; text-decoration: none; color: inherit; text-align: center; }
.doors-grid__item img, .doors-grid__item .maison-block__placeholder { width: 100%; height: 550px; object-fit: contain;background-color: var(--clecle-rose);}
.doors-grid__title { font-size: 1.12rem; letter-spacing: 1px; margin: 18px 0 10px; }
.doors-grid__caption { font-size: 1rem; line-height: 1.6; color: #555;display: block;height: 8rem;overflow: hidden;}
.doors-grid__cta { font-size: .94rem; text-transform: uppercase; letter-spacing: 1px; color: var(--clecle-bordeaux); border-bottom: 1px solid var(--clecle-bordeaux); padding-bottom: 2px; }

/* ---- Scroll block (texte / image alterné) ---- */
.scroll-block { display: flex; align-items: center; gap: 60px; margin: 70px 0; }
.scroll-block--reverse { flex-direction: row-reverse; }
.scroll-block--full { display: block; text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; }
.scroll-block__text { flex: 1; }
.scroll-block__image { flex: 1; }
.scroll-block__image img, .scroll-block__image .maison-block__placeholder { width: 100%; height: 420px; object-fit: cover; }
.scroll-block__eyebrow { display: block; font-size: .88rem; letter-spacing: 2px; color: var(--clecle-or); margin-bottom: 10px; text-transform: uppercase; }
.scroll-block__title { font-size: 1.56rem; margin-bottom: 18px; }
.scroll-block__body { font-size: 1rem; line-height: 1.8; }
.scroll-block__cta {
  display: inline-block; margin-top: 22px; padding: 12px 30px;
  border: 1px solid var(--clecle-bordeaux); color: var(--clecle-bordeaux);
  text-decoration: none; font-size: .94rem; letter-spacing: 1px; text-transform: uppercase;
}
.scroll-block__cta:hover { background: var(--clecle-bordeaux); color: var(--clecle-beige) !important; }

/* ---- Piece block (Le Vestiaire) ---- */
/* ---- Vidéo + texte d'intro (Le Vestiaire) ---- */
.collection-hero { margin-bottom: 60px; }
#video-presentation-vestiaire { width: 100%; height: 550px; object-fit: contain; display: block; }
.collection-video { margin: 0 0 60px; }
.collection-intro-text { max-width: 780px; margin: 0 auto 70px; text-align: center; }
.collection-intro-text p { font-size: 1rem; line-height: 1.8; margin-bottom: 16px; }

/* ---- Piece block (Le Vestiaire) : images plus larges que le texte,
   cliquables, sans losanges, titre en bordeaux ---- */
.piece-block { display: flex; align-items: center; gap: 40px; margin: 90px 0; }
.piece-block--reverse { flex-direction: row-reverse; }
.piece-block__images { flex: 1; display: flex; gap: 20px; }
.piece-block__image { display: block; }
.piece-block__image img, .piece-block__image .maison-block__placeholder { width: 100%; height: 480px; object-fit: cover; }
.piece-block__text { flex: 1; text-align: center; }
.piece-block__name { font-size: 1.31rem; letter-spacing: 1px; margin: 10px 0; color: var(--clecle-bordeaux); }
.piece-block__desc { font-size: 1rem; line-height: 1.7; color: #555; min-height: 20px; }

/* ---- Accessoires : titre général + deux groupes (Rubans / Bandeaux),
   chacun avec son titre centré, ses 2 visuels non recadrés et son CTA
   centré en bouton standard du site. ---- */
.collection-accessories { text-align: center; margin: 90px 0 60px; }
.collection-accessories__title { font-size: 1.25rem; letter-spacing: 1px; margin-bottom: 10px; }
.collection-accessories__intro { font-size: 1rem; color: #555; margin-bottom: 40px; }

.accessory-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; align-items: start; }
.accessory-group__title { font-size: 1.12rem; letter-spacing: 1px; text-transform: uppercase; color: var(--clecle-bordeaux); text-align: center; margin-bottom: 24px; }
.accessory-group__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.accessory-group__item { text-align: center; }
.accessory-group__image {
  display: flex; align-items: center; justify-content: center;
  height: 260px; background: var(--clecle-beige); border: 1px solid #EFE2D8;
}
.accessory-group__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.accessory-group__image .maison-block__placeholder { width: 100%; height: 100%; }
.accessory-group__cta { display: inline-block; margin-top: 16px; }

/* ---- Galerie ---- */
/* ---- Galerie : anciennes règles remplacées par .salle-section ci-dessous ---- */
.collection-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0; }
.collection-gallery-grid .maison-block__placeholder { height: 260px; }

/* ---- Salles (page La Galerie) ---- */
html { scroll-behavior: smooth; }

/* Nav des 3 salles : grands visuels pleine hauteur, nom de la salle en
   transparence sur l'image (voile sombre en dégradé pour la lisibilité). */
.salle-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0 70px; }
.salle-nav__item {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  height: 550px; padding: 30px 20px; text-decoration: none; color: var(--clecle-beige);
  background-size: cover; background-position: center; background-color: #EFE2D8;
  overflow: hidden;
}
.salle-nav__item::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(68,21,21,0) 40%, rgba(68,21,21,.75) 100%);
  transition: background .3s ease;
}
.salle-nav__item:hover::before { background: linear-gradient(180deg, rgba(68,21,21,.15) 0%, rgba(68,21,21,.88) 100%); }
.salle-nav__label {
  position: relative; z-index: 1;
  font-size: 1.31rem; letter-spacing: 1px; line-height: 1.6; text-transform: uppercase;
  text-align: center;
}

.salle-section { scroll-margin-top: 110px; margin: 0 0 100px; padding-top: 30px; border-top: 1px solid #EDDACF; }
.salle-section:first-of-type { border-top: none; }
.salle-section__title { text-align: center; font-size: 1.44rem; letter-spacing: 1px; margin-bottom: 30px; }
.salle-section__text { max-width: 780px; margin: 0 auto 40px; font-size: 1rem; line-height: 1.8; }
.salle-section__text p { margin-bottom: 16px; }

.salle-section__hero-image { margin-bottom: 30px; }
.salle-section__hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Salle II — silhouettes : mosaïque en grille 4 colonnes, motif alterné
   1/1/2 puis 2/1/1 (répété tous les 6 éléments). Fonctionne avec
   n'importe quel nombre d'images, y compris les 10 actuelles. */
.silhouette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 34px;
}
.silhouette-grid__item { display: block;}
.silhouette-grid__item img { width: 100%; height: 550px; object-fit: cover; display: block; transition: opacity .25s ease;border-radius: 1rem;}
.silhouette-grid__item:hover img { opacity: .85; }

/* Ligne "1 / 1 / 2" : positions 1, 2, 3 du cycle de 6 */
.silhouette-grid__item:nth-child(6n+1),
.silhouette-grid__item:nth-child(6n+2) { grid-column: span 1; }
.silhouette-grid__item:nth-child(6n+3) { grid-column: span 2; }

/* Ligne "2 / 1 / 1" : positions 4, 5, 6 du cycle de 6 */
.silhouette-grid__item:nth-child(6n+4) { grid-column: span 2; }
.silhouette-grid__item:nth-child(6n+5),
.silhouette-grid__item:nth-child(6n+6) { grid-column: span 1; }

/* Salle III — illustrations : grille 4 colonnes */
/* Salle III : grille centrée (7 cartes -> 4 + 3 centrées sur 2 lignes) */
.illustration-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.illustration-card {
  display: block; text-decoration: none; color: inherit;
  width: calc(25% - 18px); text-align: center;
}
.illustration-card__image img { width: 100%; object-fit: cover; display: block; }
.illustration-card__title { font-size: .94rem; color: #555; margin: 14px 0 8px; }
a.illustration-card:hover .illustration-card__image img { opacity: .85; }
.illustration-card__cta {
  font-size: .88rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--clecle-bordeaux); text-decoration: none; border-bottom: 1px solid var(--clecle-bordeaux);
}
.illustration-card--soon { cursor: default; }
.illustration-card__cta--soon { color: #999; border-bottom-color: #ccc; cursor: default; }

/* ---- Comptoir Cadeau ---- */
.comptoir-layout { display: flex; gap: 50px; align-items: center; margin: 30px 0 50px; }
.comptoir-layout__image, .comptoir-layout__intro { flex: 1; }
.comptoir-layout__image img, .comptoir-layout__image .maison-block__placeholder { width: 100%; height: 420px; object-fit: cover; }
.comptoir-layout__intro p { font-size: 1.2rem; line-height: 1.7; }
.comptoir-layout__intro a { color: var(--clecle-bordeaux); }

.comptoir-errors { border: 1px solid #b23b3b; padding: 16px 20px; margin-bottom: 30px; background: #fdf3f3; }
.comptoir-errors ul { margin: 0; padding-left: 20px; font-size: 1rem; }

.comptoir-form { max-width: 100%; margin: 0 auto 60px; }
.comptoir-form__narrow { max-width: 620px; margin: 0 auto; }
.comptoir-form__row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.comptoir-form__row--split { flex-direction: row; gap: 16px; }
.comptoir-form__row--split input { flex: 1; }
.comptoir-form__row--checkbox { flex-direction: row; align-items: center; gap: 8px; font-size: 1rem; }
.comptoir-form label { font-size: 1rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--clecle-bordeaux); }
.comptoir-form input[type="text"],
.comptoir-form input[type="email"],
.comptoir-form input[type="number"],
.comptoir-form input[type="date"],
.comptoir-form select,
.comptoir-form textarea {
  border: 1px solid #d8cdc4; background: var(--clecle-beige);
  padding: 12px 14px; font-size: 1rem; font-family: inherit; width: 100%;
}
.comptoir-form__subtitle { font-size: 2rem; margin: 30px 0 20px; }
.comptoir-form__subtitle--wide { max-width: 100%; margin-left: auto; margin-right: auto; }
.comptoir-form__legal { font-size: 1rem; color: #888; line-height: 1.6; margin: 20px 0 !important; }
.comptoir-form__legal a { color: var(--clecle-bordeaux); }
.comptoir-form__submit {
  width: 100%; padding: 16px; background: var(--clecle-bordeaux); color: var(--clecle-beige);
  border: none; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}

.imageDescription{height: 550px;object-fit: cover;width: 100%;}

.comptoir-form__submit:hover { opacity: 0.9; }

/* Bloc "Envoyer la e-carte cadeau" : champs à gauche, image à droite,
   pleine largeur (100%) et responsive — empile en mobile. */
.comptoir-send-grid {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
}
.comptoir-send-grid__fields { flex: 1; min-width: 0; max-width: 620px; }
.comptoir-send-grid__image { flex: 1; min-width: 0; }
.comptoir-send-grid__image .maison-block__placeholder { height: 100%; min-height: 480px; }

/* ---- Vérifier votre solde : bloc bien séparé et plus aéré ---- */
.comptoir-solde {
  max-width: 620px;
  margin: 90px auto 90px;
  padding: 50px 40px;
  text-align: center;
  background: #F7EDE9;
  border-top: 1px solid var(--clecle-or);
  border-bottom: 1px solid var(--clecle-or);
  scroll-margin-top: 100px;
}
.comptoir-solde__title { font-size: 2rem; letter-spacing: 1px; margin-bottom: 12px; }
.comptoir-solde__row { display: flex; gap: 10px; margin: 30px 0 20px; }
.comptoir-solde__row input { flex: 1; border: 1px solid #d8cdc4; padding: 12px 14px; font-size: 1rem; }
.comptoir-solde__row button {
  background: var(--clecle-or); color: var(--clecle-bordeaux); border: none;
  padding: 12px 24px; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.comptoir-solde__result { font-size: 1rem; min-height: 20px; }

.comptoir-ecrin { display: flex; gap: 50px; align-items: center; background: #F7EDE9; padding: 50px; margin-top: 60px; }
.comptoir-ecrin__image, .comptoir-ecrin__text { flex: 1; }
.comptoir-ecrin__image img, .comptoir-ecrin__image .maison-block__placeholder { width: 100%; height: 320px; object-fit: cover; }
.comptoir-ecrin__text h2 { font-size: 2rem; margin-bottom: 16px; }
.comptoir-ecrin__text p { font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .doors-grid, .accessory-grid, .collection-gallery-grid { grid-template-columns: repeat(1, 1fr); }
  .collection-page{padding:1rem;}
  .illustration-card { width: 100%; }
  .silhouette-grid { grid-template-columns: 1fr; }
  .silhouette-grid__item,
  .silhouette-grid__item:nth-child(6n+3),
  .silhouette-grid__item:nth-child(6n+4) { grid-column: span 1; }
  .salle-nav { grid-template-columns: 1fr; gap: 14px; }
  .salle-nav__item { height: 260px; }
  .salle-section__hero-image img { height: 320px; }
  .scroll-block, .scroll-block--reverse, .piece-block, .piece-block--reverse,
  .comptoir-layout, .comptoir-ecrin { flex-direction: column; }
  .piece-block__images { flex-direction: row; }
  .accessory-groups { grid-template-columns: 1fr; gap: 40px; }
  #video-presentation-vestiaire { height: 320px; }
  .comptoir-form__row--split { flex-direction: column; }
  .comptoir-send-grid { flex-direction: column; gap: 30px; }
  .comptoir-send-grid__fields { max-width: 100%; }
  .comptoir-send-grid__image .maison-block__placeholder { min-height: 280px; }
  .comptoir-solde { padding: 36px 24px; margin: 60px auto; }
  .comptoir-solde__title { font-size: 1.44rem; }
  /* Hauteurs d'images fixes réduites en mobile — évite des visuels
     disproportionnés sur petit écran. */
  .doors-grid__item img, .doors-grid__item .maison-block__placeholder { height: 380px; }
  .scroll-block__image img, .scroll-block__image .maison-block__placeholder { height: 300px; }
  .piece-block__image img, .piece-block__image .maison-block__placeholder { height: 320px; }
  .illustration-card__image img { height: auto; }
  .comptoir-layout__image img, .comptoir-layout__image .maison-block__placeholder { height: auto; }
  .comptoir-ecrin__image img, .comptoir-ecrin__image .maison-block__placeholder { height: 100%; }
  .accessory-group__image { height: 180px; }
  .imageDescription { height: 100%; }
  .salle-section__text{text-align: center;}
  .collection-hero__title{text-align: center;}
  .comptoir-solde__row{flex-direction: column;}
  .comptoir-ecrin{padding: 1rem;}
  .comptoir-layout__image, .comptoir-layout__intro{text-align: center;}
  .comptoir-form label{text-align: center;}
  .comptoir-form{text-align: center;}
}