/* ============================================
   PAGES — Nuanciers (liste + détail)
   ============================================ */

/* --- Liste : titre --- */
.nuanciers-head {
  padding-block: var(--space-section) var(--space-6);
}

/* --- Section A : bandes pleine largeur, fond coloré --- */
/* --- Section B : nouveaux nuanciers (grille 2 col) --- */
.nouveaux-nuanciers {
  padding-block: var(--space-section);
}

.nouveaux-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-6);
}


.nouveau-card h4 {
  margin-bottom: var(--space-1);
}

.nouveau-card p {
  color: var(--gray-dark);
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
  max-width: 44ch;
}

@media (max-width: 900px) {
  .nuancier-band:nth-child(even) .band-chips {
    order: 0;
  }

  .band-chips {
    height: 260px;
  }

  .nouveaux-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   DÉTAIL nuancier (fond coloré)
   ============================================ */
/* ============================================
   DÉTAIL nuancier individuel
   Haut blanc → zone accent (chips HEX, mosaïque, bannière)
   ============================================ */

/* --- Mini-nav prev/next : souligné palette animé au hover --- */
.detail-nav {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-3);
  font-size: 0.95rem;
}

.detail-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}

.detail-nav-link .cta-arrow {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.detail-nav-link .cta-arrow svg {
  width: 100%;
  height: 100%;
}

.detail-nav-link .arrow-flip {
  transform: scaleX(-1);
}

.nav-palette {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 160px;
  /* largeur fixe — indépendante de la longueur du nom */
  height: 4px;
  display: flex;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}

.nav-palette>span {
  flex: 1;
}

.detail-nav-link.nav-next .nav-palette {
  left: auto;
  right: 0;
  transform-origin: right;
}

.detail-nav-link:hover .nav-palette {
  transform: scaleX(1);
}

/* --- En-tête blanc --- */
.detail-head {
  height: 450px;
  /* aère l'en-tête — la palette atteint le bas du viewport à l'arrivée */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
}

.detail-head h2 {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: var(--fw-semibold);
}

.detail-head p {
  max-width: 52ch;
  margin-top: var(--space-2);
  color: var(--gray-dark);
}

/* --- Zone accent --- */
.detail-accent {
  padding-bottom: var(--space-9);
}

/* Bande des 5 chips : large mais pas pleine largeur (cf. maquette) */
.palette-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 340px;
  margin-inline: var(--margin-mobile);
  overflow: hidden;
  /* rideau GSAP des chips */
}

.nuancier-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-code {
  font-size: var(--fs-date);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

/* --- Mosaïque 4 images : 2 colonnes, gauche décalée vers le bas --- */
.detail-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-block: var(--space-8) var(--space-6);
  align-items: start;
}

.gallery-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  /* empêche tout débordement hors grille */
}

.gallery-col--left {
  margin-top: 64px;
  /* décalage maquette */
}

.gallery-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* Les maquettes gardent leur ratio natif (calques alignés) */
.maquette.gallery-img {
  aspect-ratio: auto;
}

.detail-gallery .img-placeholder.gallery-img {
  aspect-ratio: 3 / 2;
}

/* --- Bannière finale : texte + CTA, palette strokée dessous --- */
.detail-recap-wrap {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  /* respiration avant le footer */
}

.detail-recap {
  padding: var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.detail-recap p {
  max-width: 48ch;
  font-size: 0.95rem;
}

.detail-recap-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 48px;
  margin-top: 0;
  border: 1px solid var(--black);
  /* différencie du fond accent */
}

.detail-recap-band .swatch+.swatch {
  border-left: 1px solid var(--black);
}

@media (max-width: 860px) {
  .detail-head {
    grid-template-columns: 1fr;
    height: auto;
    padding-block: var(--space-5);
  }

  .palette-strip {
    height: 200px;
  }

  .new-chips {
    height: 150px;
  }

  .new-detail-body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .new-detail-body .new-cover {
    order: -1;
  }

  /* image d'abord sur mobile */
  .chip-code {
    font-size: 0.65rem;
    letter-spacing: 0;
  }

  .detail-gallery {
    grid-template-columns: 1fr;
  }

  .gallery-col--left {
    margin-top: 0;
  }

  .detail-recap {
    padding: var(--space-4);
  }
}

/* ============================================
   DÉTAIL nouveau nuancier (fond blanc)
   ============================================ */
.new-detail-head {
  padding-block: var(--space-8) var(--space-8);
}

.new-detail-head .card-date {
  display: block;
  margin-bottom: var(--space-2);
}

.new-detail-head h2 {
  margin-bottom: var(--space-2);
}

.new-detail-head p {
  max-width: 50ch;
  color: var(--gray-dark);
}

/* Bande de chips contiguës alignées, HEX centré (langage du détail principal) */
.new-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 220px;
  margin-block: var(--space-4) var(--space-7);
}

.new-detail-body {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-8);
  align-items: start;
  padding-bottom: var(--space-8);
  padding-top: var(--space-8);
}

/* Texte d'article : paragraphes avec retrait de première ligne */
.new-article-text {
  max-width: 52ch;
  line-height: 1.7;
}

.new-article-text p {
  margin: 0;
}

.new-article-text p+p {
  text-indent: 1.6em;
}

/* Image cover réelle à droite */
.new-cover {
  margin: 0;
}

.new-cover img {
  display: block;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.plus-nuanciers {
  padding-block: var(--space-8);
}

.plus-nuanciers h2 {
  margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
  .detail-head {
    grid-template-columns: 1fr;
    height: auto;
    padding-block: var(--space-5);
  }

  .detail-gallery,
  .new-detail-body {
    grid-template-columns: 1fr;
  }
}