/* ============================================================
   AU FIL DE NATH — Section Créations du moment (carrousel)
   Référence : Pages figma/créations du moment desktop.png +
               Créations du moment mobile.png
   ============================================================ */


/* ----------------------------------------------------------
   STRUCTURE GÉNÉRALE
---------------------------------------------------------- */

.creations {
  padding: 48px 0 88px;
  position: relative;
  z-index: 2;
}

.creations__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  /* Padding-left fluid : 28px (375px) → 120px (768px) → 280px (≥1425px) */
  padding: 0 var(--page-padding-x) 0 clamp(28px, calc(24vw - 62px), 280px);
}


/* ----------------------------------------------------------
   EYEBROW — "Créations du moment"
---------------------------------------------------------- */

.creations__eyebrow {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--color-marine);
  margin: 0 0 36px;
  letter-spacing: -0.2px;
}


/* ----------------------------------------------------------
   VIEWPORT + TRACK DU CARROUSEL
   - Wrapper avec fondu écru aux bords (masque les cards qui sortent)
   - Scroll-snap natif pour la fluidité tactile
   - Scrollbar masquée
---------------------------------------------------------- */

/* Wrapper qui porte le fondu écru aux extrémités (effet "fade out") */
.creations__carousel {
  position: relative;
  margin-bottom: 12px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  /* Mask CSS pour le fondu transparent vers les bords */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 48px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 48px),
    transparent 100%
  );
}

.creations__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE */
  /* Padding latéral pour que les cards ne touchent pas les bords du viewport */
  padding: 8px 32px 12px;
  scroll-padding: 0 32px;
}

.creations__viewport::-webkit-scrollbar {
  display: none;                /* Chrome/Safari */
}

.creations__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

/* Spacer après la dernière card : laisse la place pour qu'elle s'affiche
   entièrement malgré le fondu écru (mask-image) sur le bord droit. */
.creations__track::after {
  content: '';
  flex: 0 0 48px;
}


/* ----------------------------------------------------------
   CARD PRODUIT
---------------------------------------------------------- */

.card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Tablette + Desktop : formule en V, minimum à 1024px (339px ≈ 2.2 cartes)
   Branche descendante : 544px − 20vw  → 390px à 769px, 339px à 1024px
   Branche montante   : 26vw + 73px    → 339px à 1025px, remonte vers 400px cap
   Les deux branches sont égales exactement à 1024px → zéro saut de taille
   → 1.4 cartes à 769px · 2.17 à 1024px · 2.08 à 1025px · 2.54 à 1440px · 2.6 à ≥1920px */
.creations__track .card {
  flex: 0 0 clamp(335px, max(calc(544px - 20vw), calc(26vw + 73px)), 400px);
  width: clamp(335px, max(calc(544px - 20vw), calc(26vw + 73px)), 400px);
}

/* La photo remplit la largeur disponible dans une card plus large */
.creations__track .card__photo {
  max-width: none;
}

/* Carousel 2 — project-card remplit la card 400px (annule le max-width: 276px de sections.css) */
.creations__track .project-card__photo {
  max-width: none;
  max-height: none;
  width: 100%;
}

.creations__track .project-card__for,
.creations__track .project-card__name,
.creations__track .project-card__desc {
  max-width: 100%;
}

.card__link {
  display: block;
  text-decoration: none;
  color: var(--color-marine);
  padding: 32px;
  border-radius: 18px;
  border: 0.5px solid var(--color-marine);
  background-color: var(--color-ecru);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.card__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-marine-soft);
}

/* Variante "static" — pas de hover (utilisé pour les cards projet de la galerie) */
.card__link--static {
  cursor: default;
}
.card__link--static:hover {
  transform: none;
  box-shadow: none;
}
.card__link--static:hover .project-card__photo img {
  transform: none;
}

.card__photo {
  margin: 0 auto 16px;                       /* auto horizontal → centré */
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  /* Responsive : de 276px desktop jusqu'à 125px mobile (card ≈ 165px) */
  max-width: clamp(125px, 33vw, 276px);
  background-color: var(--color-violet);   /* fallback */
}

.card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Hover image atténué (1.03 → 1.012) */
.card__link:hover .card__photo img {
  transform: scale(1.012);
}

.card__title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: var(--color-marine);
  margin: 0 0 6px;
  line-height: 1.3;
}

.card__price {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-marine);
  margin: 0;
  opacity: 0.85;
}


/* ----------------------------------------------------------
   FLÈCHES DE NAVIGATION
---------------------------------------------------------- */

.creations__nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 8px 0 32px;
}

.creations__arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-marine);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              opacity var(--transition-base);
}

.creations__arrow:hover {
  background-color: var(--color-violet);
}

.creations__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.creations__arrow:disabled:hover {
  background-color: transparent;
}


/* ----------------------------------------------------------
   CAPTION + CTA + LIEN ALTERNATIF
---------------------------------------------------------- */

.creations__caption {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-marine);
  line-height: 22px;
  margin: 0 0 32px;
  opacity: 0.8;
  max-width: 520px;
}

.creations__cta {
  display: inline-flex;
  margin: 0 auto;
  padding: 14px 36px;
}

/* On centre le CTA */
.creations__inner > .creations__cta {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.creations__alt-link {
  display: block;
  text-align: center;
  margin: 20px auto 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-marine);
  line-height: 22px;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
  opacity: 0.8;
  transition: opacity var(--transition-base);
}

.creations__alt-link:hover {
  opacity: 1;
}


/* ----------------------------------------------------------
   RESPONSIVE — Tablette (≤ 1024px)
---------------------------------------------------------- */

@media (max-width: 1024px) {

  .creations {
    padding: 40px 0 72px;
  }

  .card__link {
    padding: 24px;
  }

  .creations__track {
    gap: 18px;
  }
  /* Pas de règle card ici — la formule base (V-shape) couvre déjà la tablette */

}


/* ----------------------------------------------------------
   RESPONSIVE — Mobile (≤ 768px)
   1 card visible + peek de la suivante
---------------------------------------------------------- */

@media (max-width: 768px) {

  .creations {
    padding: 32px 0 56px;
  }

  .creations__eyebrow {
    font-size: 19px;
    margin-bottom: 24px;
  }

  .creations__viewport {
    padding: 8px 20px 12px;
    scroll-padding: 0 20px;
  }

  /* Mobile : min(400px, 54vw + 2px) — dérivé de inner_pl fluid + page_pr 20 + vp_pad 40
     → 1.4 cartes à 375px, ~1.46 à 768px */
  .creations__track .card {
    flex: 0 0 min(400px, calc(54vw + 2px));
    width: min(400px, calc(54vw + 2px));
  }

  /* Photo remplit la card (idem carrousel 1 et 2) */
  .creations__track .card__photo {
    max-width: 100%;
    width: 100%;
  }

  /* Carrousel 2 — project-card occupe toute la largeur de la card */
  .project-card__photo {
    max-width: 100%;
    width: 100%;
    max-height: none;
  }

  .project-card__for,
  .project-card__name,
  .project-card__desc {
    max-width: 100%;
  }

  .creations__carousel {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }

  .creations__track {
    gap: 14px;
  }

  .card__link {
    padding: 20px;
  }

  /* Image carrée (1/1) sur mobile aussi pour uniformité */
  .card__photo {
    aspect-ratio: 1 / 1;
  }

  .creations__nav {
    margin-bottom: 24px;
    gap: 40px;
  }

  /* Cibles tactiles plus confortables sur mobile (≥ 44px recommandés) */
  .creations__arrow {
    width: 44px;
    height: 44px;
  }

  .creations__caption {
    text-align: left;
    font-size: 14px;
    margin-bottom: 24px;
  }
}


/* ----------------------------------------------------------
   RESPONSIVE — Fin du responsive de la carte (≤ 380px)
   La carte atteint son minimum (165px), ratio 1:1 conservé.
---------------------------------------------------------- */

@media (max-width: 380px) {

  .card__link {
    padding: 16px;
  }
}