/* ============================================================
   PADEL COLLECTION — Section "Concept"
   Fond terracotta, texte sand centré, motif de pastilles à droite.
   Marges latérales de 12px pour faire ressortir le sand de la page.
   ============================================================ */

.concept {
  position: relative;
  width: calc(100% - 24px);
  /* 12px de marge sand sur les côtés ET en bas du bloc */
  margin: 0 12px 12px;
  background: var(--color-terracotta);
  color: var(--color-sand);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-card);
}

/* ---- Inner : grille 12 colonnes ---- */
.concept__inner {
  position: relative;
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding: clamp(72px, 10vw, 160px) var(--grid-margin);

  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

/* ---- Motif de pastilles ----
   Position absolue par-dessus le fond, en dessous du texte (z-index 1).
   Aligné sur la moitié droite, légèrement débordant pour donner du rythme. */
.concept__pattern {
  position: absolute;
  top: 50%;
  right: clamp(-40px, -2vw, 0px);
  transform: translateY(-50%);
  /* Taille fluide : pas trop petite sur tablet, généreuse sur desktop */
  width: clamp(200px, 25vw, 320px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  /* Couleur héritée par les paths fill="#BD552F" du SVG : on laisse */
}

/* ---- Bloc texte centré ---- */
.concept__text {
  position: relative;
  z-index: 2;
  /* Le texte vit sur les colonnes 3 à 11, ce qui le centre
     en laissant les colonnes 1-2 et 11-12 respirer.
     Le motif déborde derrière les colonnes 9-12. */
  grid-column: 3 / span 8;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  text-align: center;
}

/* ---- Paragraphes : Texte 1 du DS (24pt) ---- */
.concept__paragraph {
  font-family: var(--font-body);
  font-size: var(--fs-text-1);
  line-height: 1.5;
  color: var(--color-sand);
  max-width: 62ch;
  margin: 0 auto;
}

.concept__paragraph strong {
  /* "PADEL collection" = signature en Transducer Bold,
     pas en italique — pour casser la dominante serif/italique. */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ---- Séparateur trait noir entre les deux paragraphes ---- */
.concept__divider {
  width: clamp(120px, 18vw, 220px);
  height: 4px;
  background: var(--color-noir);
  border: none;
  border-radius: 2px;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet ≤ 1024px : on rétrécit le motif et on déborde davantage */
@media (max-width: 1024px) {
  .concept__inner {
    padding-block: clamp(56px, 8vw, 96px);
  }
  .concept__text {
    grid-column: 2 / span 10;
  }
  .concept__pattern {
    width: clamp(180px, 28vw, 300px);
    right: -60px;
    opacity: 0.85;
  }
}

/* Mobile ≤ 640px : motif derrière le texte, en filigrane */
@media (max-width: 640px) {
  .concept__inner {
    padding-block: 64px;
  }
  .concept__text {
    grid-column: 1 / span 12;
    gap: 32px;
  }
  .concept__paragraph {
    /* fs-text-1 utilise déjà clamp en mobile via tokens.css */
    font-size: var(--fs-text-1);
  }
  .concept__pattern {
    width: 260px;
    right: -90px;
    top: 60%;
    opacity: 0.35;
  }
  .concept__divider {
    width: 80px;
  }
}

/* ============================================================
   ENTRÉE — révélation au scroll (CSS pur via IntersectionObserver
   géré côté HTML par la classe .is-revealed)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .concept__paragraph,
  .concept__divider {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 700ms var(--ease),
      transform 700ms var(--ease);
  }
  .concept.is-revealed .concept__paragraph:nth-of-type(1) { transition-delay: 100ms; opacity: 1; transform: none; }
  .concept.is-revealed .concept__divider                  { transition-delay: 280ms; opacity: 1; transform: none; }
  .concept.is-revealed .concept__paragraph:nth-of-type(2) { transition-delay: 420ms; opacity: 1; transform: none; }

  .concept__pattern {
    opacity: 0;
    transform: translateY(-50%) scale(0.94);
    transition:
      opacity 900ms var(--ease),
      transform 900ms var(--ease);
  }
  .concept.is-revealed .concept__pattern {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  /* En mobile l'opacity max reste plus basse (filigrane) */
  @media (max-width: 640px) {
    .concept.is-revealed .concept__pattern {
      opacity: 0.35;
    }
  }
}