/* ======================================================
   INTRO — bloc éditorial juste après le hero (vidéo).
   Contient l'accroche, le texte d'introduction, la ligne
   brevet et les 3 repères (Brevet / Collections / Origine).
   Texte sombre sur fond clair.
   ====================================================== */
.intro {
  padding: var(--section-pad) 0;
}
.intro .container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.intro__title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6cqw, 3.2rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ivory);
  margin-bottom: 1.6rem;
}
/* « Une signature cellulaire » en or (accent, comme le hero) */
.intro__title-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-bright);
}

.intro__eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.intro__eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}

.intro__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2cqw, 1.8rem);
  color: var(--ivory);
  max-width: 760px;
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

.intro__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4cqw, 1.35rem);
  color: var(--gold-deep);
  max-width: 720px;
  line-height: 1.5;
  margin-bottom: 3.5rem;
}

.intro__meta {
  display: flex;
  gap: clamp(2rem, 5cqw, 4.5rem);
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 780px;
}
.intro__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.intro__meta-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.intro__meta-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ivory);
}

@media (max-width: 768px) {
  .intro__title { font-size: 1.7rem; margin-bottom: 1.2rem; }
  .intro__eyebrow { font-size: 0.6rem; letter-spacing: 0.4em; margin-bottom: 1.6rem; }
  .intro__text { font-size: 1.15rem; margin-bottom: 1.3rem; }
  .intro__tagline { font-size: 1rem; margin-bottom: 2.5rem; }
  .intro__meta { gap: 1.4rem 2.5rem; }
  .intro__meta-value { font-size: 1.05rem; }
}