/*
 * home.css — Calzedonia Maroc · Homepage
 * Sections spécifiques à la page d'accueil.
 * Ordre : section wrapper · multicards · editorial · banner-cta
 *         carousel-section · category-banner · advantages · placeholders.
 */

/* ─────────────────────────────────────────────
   SECTION WRAPPER GÉNÉRIQUE
   ───────────────────────────────────────────── */

.clz-section {
  width: 100%;
}

.clz-section--padded {
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .clz-section--padded {
    padding-block: var(--space-12);
  }
}

/* Titre de section centré */
.clz-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-black);
  text-align: center;
  margin-block-end: var(--space-6);
}

@media (min-width: 1024px) {
  .clz-section__title {
    font-size: var(--text-2xl);
    margin-block-end: var(--space-8);
  }
}

.clz-section__title--start {
  text-align: start;
}

/* ─────────────────────────────────────────────
   MULTICARDS — 6 CATÉGORIES ÉDITORIALES
   Extrait : data-testid="homepage-multicards"
   clz-web-hp-multiplecards-20260610-*
   ───────────────────────────────────────────── */

.clz-multicards {
  padding-block: var(--space-6) var(--space-8);
}

@media (min-width: 1024px) {
  .clz-multicards {
    padding-block: var(--space-8) var(--space-10);
  }
}

/* Grille hérite de grid.css .multicards-grid (2→3→6 colonnes) */

/* Card catégorie individuelle */
.clz-multicard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.clz-multicard:hover .clz-multicard__img {
  transform: scale(1.05);
  transition: transform 500ms cubic-bezier(0.25, 0, 0, 1);
}

/* Image */
.clz-multicard__media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--color-neutral-100);
}

.clz-multicard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 600ms ease-out;
  will-change: transform;
}

/* Label catégorie — uppercase aéré, centré sous la carte */
.clz-multicard__label {
  margin-block-start: 0.875rem;
  padding-inline: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em;            /* compense l'espacement → centrage optique */
  color: var(--color-black);
  text-align: center;
}

/* Card Maroc — mise en valeur */
.clz-multicard--maroc .clz-multicard__label {
  color: var(--color-accent-zellige);  /* #1B6B8A sur blanc : 5.21:1 WCAG AA */
}

.clz-multicard--maroc .clz-multicard__media::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--color-accent-maroc),
    var(--color-accent-zellige)
  );
}

[dir="rtl"] .clz-multicard--maroc .clz-multicard__media::after {
  background: linear-gradient(
    to left,
    var(--color-accent-maroc),
    var(--color-accent-zellige)
  );
}

/* Placeholder couleurs pour les images manquantes */
.clz-multicard__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clz-multicard:nth-child(1) .clz-multicard__placeholder { background: linear-gradient(145deg, var(--color-editorial) 0%, #DDD0C2 100%); }
.clz-multicard:nth-child(2) .clz-multicard__placeholder { background: linear-gradient(145deg, #E8DDD4 0%, #D4C8B8 100%); }
.clz-multicard:nth-child(3) .clz-multicard__placeholder { background: linear-gradient(145deg, #D6EDE3 0%, #EAF5EF 100%); }
.clz-multicard:nth-child(4) .clz-multicard__placeholder { background: linear-gradient(145deg, var(--color-sand) 0%, #EEEAE4 100%); }
.clz-multicard:nth-child(5) .clz-multicard__placeholder { background: linear-gradient(145deg, #E6E5EA 0%, #F0EFF4 100%); }
.clz-multicard:nth-child(6) .clz-multicard__placeholder { background: linear-gradient(145deg, #EDD1D8 0%, #F4E8EC 100%); }

/* Monogramme placeholder */
.clz-multicard__mono {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  color: rgba(0,0,0,0.12);
  letter-spacing: 0.05em;
  user-select: none;
}

/* ─────────────────────────────────────────────
   EDITORIAL TEXT BANNER
   Extrait : data-testid="text-banner-container"
   css-1rn8m6n (titre) · css-6atw8u (corps)
   ───────────────────────────────────────────── */

.clz-editorial {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  background-color: var(--color-white);
}

@media (min-width: 1024px) {
  .clz-editorial {
    padding: var(--space-12) var(--space-10);
  }
}

.clz-editorial__inner {
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

/* Trait décoratif or chérifien */
.clz-editorial__rule {
  width: 3rem;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-accent-maroc),
    var(--color-accent-zellige)
  );
  border: none;
  flex-shrink: 0;
}

[dir="rtl"] .clz-editorial__rule {
  background: linear-gradient(
    to left,
    var(--color-accent-maroc),
    var(--color-accent-zellige)
  );
}

/* Titre
   Extrait : css-1rn8m6n { font-size:1.25rem mobile / 2rem desktop } */
.clz-editorial__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);           /* 1.25rem — extrait */
  font-weight: var(--fw-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-black);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .clz-editorial__title {
    font-size: var(--text-2xl);         /* 2rem — extrait */
    line-height: var(--leading-hero-lg);
  }
}

/* Corps
   Extrait : css-6atw8u { font-size:0.875rem mobile / 1rem desktop; weight:300 } */
.clz-editorial__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  max-width: 35.625rem;               /* max-width source css-6atw8u */
}

@media (min-width: 768px) {
  .clz-editorial__body {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
  }
}

/* ─────────────────────────────────────────────
   BANNER CTA (campagne / collection Maroc)
   Extrait : data-testid="banner-cta"
   Structure : image pleine largeur + content overlay
   ───────────────────────────────────────────── */

.clz-banner-cta {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.clz-banner-cta__bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  background-image: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    #9B1540 50%,
    var(--color-primary-dark) 100%
  );
}

/* Pattern zellige décoratif en overlay */
.clz-banner-cta__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--color-accent-maroc) 0,
      var(--color-accent-maroc) 1px,
      transparent 0,
      transparent 50%
    );
  background-size: 20px 20px;
  pointer-events: none;
}

.clz-banner-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.clz-banner-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 38rem;
}

@media (min-width: 1024px) {
  .clz-banner-cta__content {
    gap: var(--space-5);
  }
}

.clz-banner-cta__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-maroc);
}

.clz-banner-cta__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-hero-sm);
  color: var(--color-white);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .clz-banner-cta__title {
    font-size: var(--text-3xl);
    line-height: var(--leading-hero-lg);
  }
}

.clz-banner-cta__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.85);
  line-height: var(--leading-snug);
}

/* ── Banner-CTA : layout 2 colonnes (texte | deck coverflow) ── */
.clz-banner-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-6);
  max-width: var(--container-max);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .clz-banner-cta__inner {
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    padding: var(--space-16) var(--space-10);
    gap: var(--space-10);
  }
}

/* Deck container */
.clz-deck {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr; /* isole les transforms 3D des coordonnées physiques du mode RTL */
}

/* Très petit mobile — cartes réduites pour éviter le clipping */
@media (max-width: 479px) {
  .clz-deck { height: 260px; }
  .clz-deck__card { width: 140px; height: 210px; }
  .clz-deck__card[data-deck-pos="-1"] {
    transform: translate(calc(-50% - 95px), -50%) rotateY(12deg) translateZ(-20px) scale(0.80);
  }
  .clz-deck__card[data-deck-pos="1"] {
    transform: translate(calc(-50% + 95px), -50%) rotateY(-12deg) translateZ(-20px) scale(0.80);
  }
}

@media (min-width: 768px) {
  .clz-deck { height: 420px; }
}

.clz-deck__track {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.clz-deck__card {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 160px;
  height: 240px;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  transition: transform 400ms cubic-bezier(0.25, 0, 0, 1), opacity 400ms ease;
}

@media (min-width: 768px) {
  .clz-deck__card { width: 200px; height: 320px; }
}

/* Carte centrale */
.clz-deck__card[data-deck-pos="0"] {
  transform: translate(-50%, -50%) translateZ(0) scale(1);
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
}

/* Cartes latérales (mobile : décalage réduit) */
.clz-deck__card[data-deck-pos="-1"] {
  transform: translate(calc(-50% - 120px), -50%) rotateY(15deg) translateZ(-30px) scale(0.82);
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
}

.clz-deck__card[data-deck-pos="1"] {
  transform: translate(calc(-50% + 120px), -50%) rotateY(-15deg) translateZ(-30px) scale(0.82);
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
}

@media (min-width: 768px) {
  .clz-deck__card[data-deck-pos="-1"] {
    transform: translate(calc(-50% - 160px), -50%) rotateY(15deg) translateZ(-40px) scale(0.85);
  }
  .clz-deck__card[data-deck-pos="1"] {
    transform: translate(calc(-50% + 160px), -50%) rotateY(-15deg) translateZ(-40px) scale(0.85);
  }
}

/* Cartes hors vue */
.clz-deck__card[data-deck-pos="-2"],
.clz-deck__card[data-deck-pos="2"] {
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.clz-deck__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay gradient bas */
.clz-deck__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.clz-deck__caption {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline: 0;
  z-index: 1;
  padding-inline: var(--space-3);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--fw-regular);
  color: var(--color-white);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Dots */
.clz-deck__dots {
  position: absolute;
  inset-block-end: -1.75rem;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 0;  /* boutons 44px assurent l'espacement */
}

/* Cible de touche 44×44px — visuel via ::after */
.clz-deck__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clz-deck__dot::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.4);
  transition: background 200ms ease, transform 200ms ease;
}

.clz-deck__dot.is-active::after {
  background: var(--color-white);
  transform: scale(1.3);
}

/* Arrows */
.clz-deck__arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 180ms ease;
  z-index: 10;
}

.clz-deck__arrow:hover { background: rgba(255, 255, 255, 0.35); }
.clz-deck__arrow--prev { inset-inline-start: 0; }
.clz-deck__arrow--next { inset-inline-end: 0; }

@media (prefers-reduced-motion: reduce) {
  .clz-deck__card { transition: opacity 200ms ease; }
}

/* ─────────────────────────────────────────────
   CAROUSEL PRODUITS — section wrapper
   Extrait : data-testid="card-carousel"
             "product-carousel summertrend-beachwear"
   ───────────────────────────────────────────── */

.clz-carousel-section {
  padding-block: var(--space-8);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .clz-carousel-section {
    padding-block: var(--space-12);
  }
}

.clz-carousel-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-4);
  margin-block-end: var(--space-6);
}

@media (min-width: 1024px) {
  .clz-carousel-section__head {
    padding-inline: var(--space-10);
  }
}

.clz-carousel-section__see-all {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.clz-carousel-section__see-all:hover {
  color: var(--color-black);
}

/* Track scrollable — hérite de grid.css .scroll-track */
.clz-carousel-section__track {
  padding-inline: var(--space-4);
}

@media (min-width: 1024px) {
  .clz-carousel-section__track {
    padding-inline: var(--space-10);
  }
}

/* Marge verticale dans le scroll-track : laisse respirer le hover lift
   (translateY -6px) sans rognage par l'overflow. */
.clz-carousel-section__track .scroll-track {
  padding-block: 0.75rem;
}

/* ─────────────────────────────────────────────
   CATEGORY BANNER
   Extrait : data-testid="category-banner-container"
   css-bljzij { background:#ECE6DD; padding:2rem 1rem 1rem; justify-content:center }
   ───────────────────────────────────────────── */

.clz-cat-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-editorial); /* fallback si l'image ne charge pas */
  padding: var(--space-10) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

/* Couche image floutée (frosted) — débordement pour masquer les bords flous */
.clz-cat-banner::before {
  content: '';
  position: absolute;
  inset: -16px;
  background-image: url('../../images/fond-jaune-dessin_1409-9903.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(4px) saturate(1.05);
  transform: scale(1.04);
  z-index: 0;
  pointer-events: none;
}

/* Voile translucide élégant (verre dépoli) au-dessus du flou */
.clz-cat-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.32) 0%,
              rgba(255, 248, 224, 0.22) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Contenu au-dessus du flou + voile */
.clz-cat-banner > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .clz-cat-banner {
    padding: var(--space-10) var(--space-12) var(--space-8);
    gap: var(--space-8);
  }
}

.clz-cat-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-black);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

@media (min-width: 1024px) {
  .clz-cat-banner__title {
    font-size: var(--text-4xl);
  }
}

.clz-cat-banner__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: rgba(0, 0, 0, 0.8);
  max-width: 40rem;
  line-height: var(--leading-relaxed);
}

@media (min-width: 1024px) {
  .clz-cat-banner__desc {
    font-size: var(--text-md);
  }
}

/* CTAs FEMME / HOMME / ENFANTS
   Extrait : data-testid="category-banner-ctas-wrapper" */
.clz-cat-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.clz-cat-banner__cta {
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-black);
  background-color: rgba(255, 255, 255, 0.82);   /* lisible sur fond chaud */
  border: var(--border-thin) solid var(--color-black);
  border-radius: var(--radius-xs);
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.clz-cat-banner__cta:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* CTA Collections Maroc — or sur fond clair translucide */
.clz-cat-banner__cta[href*="maroc"] {
  background-color: rgba(255, 255, 255, 0.72);
}

.clz-cat-banner__cta[href*="maroc"]:hover {
  background-color: var(--color-accent-maroc);
  color: var(--color-white);
}

/* ─────────────────────────────────────────────
   AVANTAGES CALZEDONIA MAROC (ajout MVP)
   4 piliers : livraison · retours · qualité · paiement
   ───────────────────────────────────────────── */

.clz-advantages {
  background-color: var(--color-white);
  border-block-start: var(--border-1) solid var(--color-neutral-200);
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .clz-advantages {
    padding-block: var(--space-10);
  }
}

.clz-advantages__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  padding-inline: var(--space-4);
}

@media (min-width: 1024px) {
  .clz-advantages__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-inline: var(--space-10);
  }
}

.clz-advantage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border-inline-end: var(--border-1) solid var(--color-neutral-100);
}

.clz-advantage:last-child {
  border-inline-end: none;
}

@media (max-width: 1023px) {
  .clz-advantage:nth-child(even) {
    border-inline-end: none;
  }
  .clz-advantage:nth-child(1),
  .clz-advantage:nth-child(2) {
    border-block-end: var(--border-1) solid var(--color-neutral-100);
  }
}

.clz-advantage__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-black);
  flex-shrink: 0;
}

.clz-advantage__title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  line-height: var(--leading-snug);
}

@media (min-width: 1024px) {
  .clz-advantage__title {
    font-size: var(--text-base);
  }
}

.clz-advantage__body {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

@media (min-width: 1024px) {
  .clz-advantage__body {
    font-size: var(--text-sm);
  }
}