/* ==============================================
   SIDONIE CRÉA — Page d'accueil
   ============================================== */

/* ── Hero ────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 560px;
  overflow: hidden;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-3xl);
  background-color: var(--color-cream);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ochre);
}

.hero__eyebrow-line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background-color: var(--color-ochre);
  flex-shrink: 0;
}

.hero__title {
  font-size: 3.75rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-brown);
  margin-bottom: var(--space-lg);
}

.hero__title em {
  display: block;
  font-weight: 400;
  font-style: italic;
  color: var(--color-brown);
}

.hero__subtitle {
  font-size: var(--text-md);
  color: var(--color-gray-soft);
  line-height: 1.75;
  margin-bottom: var(--space-xl);
  max-width: 420px;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ── Badge de localisation (SEO local) ──────── */

.hero__location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-gray-soft);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background: rgba(234, 217, 184, 0.28);
  width: fit-content;
}

.hero__location svg {
  color: var(--color-ochre);
  flex-shrink: 0;
}

.hero__location strong {
  color: var(--color-brown);
  font-weight: 700;
}

/* ── Hero — côté visuel (droite) ─────────────── */

.hero__visual {
  position: relative;
  background-color: var(--color-sand);
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 3px, rgba(123,79,46,0.065) 3px, rgba(123,79,46,0.065) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(123,79,46,0.065) 3px, rgba(123,79,46,0.065) 4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-2xl) var(--space-2xl);
}

.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom left, rgba(245,239,224,0.18) 0%, transparent 55%);
  pointer-events: none;
}

.hero__visual-card {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  max-width: 300px;
  box-shadow: 0 2px 12px rgba(123, 79, 46, 0.07);
}

.hero__visual-card-quote {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-brown);
  line-height: 1.65;
  margin-bottom: var(--space-sm);
}

.hero__visual-card-author {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ochre);
}

/* ── Catégories ──────────────────────────────── */

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

.category-card {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: box-shadow var(--transition);
}

.category-card:hover {
  box-shadow: 0 6px 28px rgba(123, 79, 46, 0.15);
}

/* Trame lin (sacs) */
.category-card--weave {
  background-color: var(--color-sand);
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 4px, rgba(123,79,46,0.09) 4px, rgba(123,79,46,0.09) 5px),
    repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(123,79,46,0.09) 4px, rgba(123,79,46,0.09) 5px);
}

/* Chevron (vêtements) */
.category-card--herring {
  background-color: var(--color-linen);
  background-image:
    repeating-linear-gradient( 60deg, rgba(123,79,46,0.09) 0px, rgba(123,79,46,0.09) 1px, transparent 1px, transparent 11px),
    repeating-linear-gradient(-60deg, rgba(123,79,46,0.09) 0px, rgba(123,79,46,0.09) 1px, transparent 1px, transparent 11px);
}

/* Points (accessoires) */
.category-card--dot {
  background-color: #EEE4CE;
  background-image: radial-gradient(circle, rgba(123,79,46,0.13) 1.5px, transparent 1.5px);
  background-size: 15px 15px;
}

/* Plaid (décoration) */
.category-card--plaid {
  background-color: var(--color-sand);
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 13px, rgba(123,79,46,0.1) 13px, rgba(123,79,46,0.1) 14px),
    repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(123,79,46,0.1) 13px, rgba(123,79,46,0.1) 14px);
}

.category-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  background: linear-gradient(to top, rgba(78, 46, 20, 0.76) 0%, transparent 100%);
}

.category-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-white);
  font-weight: 400;
  margin-bottom: var(--space-xs);
}

.category-card__count {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ochre-light);
}

/* ── Carrousel Nos Univers ───────────────────── */

.univers-carousel {
  position: relative;
  height: 82vh;
  min-height: 520px;
  overflow: hidden;
  user-select: none;
  outline: none;
}

.univers-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 750ms cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

/* ── Slides ──────────────────────────────────── */

.univers-slide {
  flex: 0 0 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Trame lin (sacs) */
.univers-slide--weave {
  background-color: #B8936A;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 5px, rgba(255,255,255,0.055) 5px, rgba(255,255,255,0.055) 6px),
    repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(255,255,255,0.055) 5px, rgba(255,255,255,0.055) 6px);
}

/* Chevron tweed (vêtements) */
.univers-slide--herring {
  background-color: #7A5A3C;
  background-image:
    repeating-linear-gradient( 60deg, rgba(255,255,255,0.065) 0px, rgba(255,255,255,0.065) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,0.065) 0px, rgba(255,255,255,0.065) 1px, transparent 1px, transparent 18px);
}

/* Pois (accessoires) */
.univers-slide--dot {
  background-color: #A87840;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 2px, transparent 2px);
  background-size: 26px 26px;
}

/* Plaid (décoration) */
.univers-slide--plaid {
  background-color: #6B4428;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 20px, rgba(255,255,255,0.07) 20px, rgba(255,255,255,0.07) 21px),
    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,255,255,0.07) 20px, rgba(255,255,255,0.07) 21px);
}

/* ── Overlay & contenu ───────────────────────── */

.univers-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(20, 8, 2, 0.25) 0%,
    rgba(20, 8, 2, 0.62) 100%
  );
}

.univers-slide__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  animation: slideIn 0.6s ease both;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.univers-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-ochre-light);
}

.univers-slide__eyebrow::before,
.univers-slide__eyebrow::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--color-ochre-light);
  opacity: 0.65;
}

.univers-slide__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.0;
  text-shadow: 0 3px 32px rgba(0, 0, 0, 0.45);
  margin: 0;
}

.univers-slide__sub {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, 0.62);
  margin: 0;
}

.univers-slide__btn {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 14px 40px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  border: 1.5px solid rgba(255, 253, 248, 0.65);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
  background: rgba(255, 253, 248, 0.08);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.univers-slide__btn:hover,
.univers-slide__btn:focus-visible {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-brown);
  outline: none;
}

/* ── Flèches ─────────────────────────────────── */

.univers-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 253, 248, 0.40);
  background: rgba(255, 253, 248, 0.10);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 200ms ease, border-color 200ms ease;
}

.univers-carousel__arrow:hover {
  background: rgba(255, 253, 248, 0.26);
  border-color: rgba(255, 253, 248, 0.75);
}

.univers-carousel__arrow--prev { left: var(--space-xl); }
.univers-carousel__arrow--next { right: var(--space-xl); }

/* ── Barre de progression ────────────────────── */

.univers-carousel__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 253, 248, 0.15);
  z-index: 10;
}

.univers-carousel__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-ochre-light);
}

/* ── Pastilles ───────────────────────────────── */

.univers-carousel__dots {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}

.univers-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 248, 0.38);
  cursor: pointer;
  padding: 0;
  transition: width 250ms ease, background 200ms ease, border-radius 250ms ease;
}

.univers-carousel__dot[aria-selected="true"] {
  width: 26px;
  border-radius: 4px;
  background: var(--color-white);
}

/* ── Responsive carrousel ────────────────────── */

@media (max-width: 768px) {
  .univers-carousel {
    height: 72vh;
    min-height: 400px;
  }
  .univers-carousel__arrow {
    width: 40px;
    height: 40px;
  }
  .univers-carousel__arrow--prev { left: var(--space-md); }
  .univers-carousel__arrow--next { right: var(--space-md); }
  .univers-slide__content {
    padding: var(--space-xl) var(--space-lg);
  }
}

@media (max-width: 480px) {
  .univers-carousel__arrow { display: none; }
}

/* ── Engagements ─────────────────────────────── */

.engagements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
}

.engagement-item {
  text-align: center;
}

.engagement-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  margin: 0 auto var(--space-lg);
  color: var(--color-ochre);
  background-color: var(--color-white);
}

.engagement-item__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-brown);
  margin-bottom: var(--space-sm);
}

.engagement-item__text {
  font-size: var(--text-sm);
  color: var(--color-gray-soft);
  line-height: 1.75;
}

/* ── Responsive (accueil) ────────────────────── */

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero__visual {
    min-height: 300px;
  }
  .hero__content {
    padding: var(--space-2xl) var(--container-pad);
  }
  .hero__title {
    font-size: var(--text-2xl);
  }
  .hero__subtitle {
    max-width: 100%;
  }
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero__title {
    font-size: var(--text-xl);
  }
  .engagements-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}