/* ==========================================================================
   Brands — partenariats de marque. L'oppose exact du Shop : sobriete
   maximale, beaucoup d'espace, grandes images, typographie fine, accent
   dore. Aucun glow, aucune animation appuyee. Brief section 4.

   Regle de la page : aucun client de prestation dans les logos. Seules
   les marques reellement partenaires y figurent (brief section 5).
   ========================================================================== */

main {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Intitules de section, communs a la page : discrets, tres espaces. */
/* L'espacement des lettres est volontairement plus large qu'ailleurs
   (0.22em contre 0.16em) : c'est la respiration propre a cette page. */
.section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-muted);
  font-weight: 400;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* ---------- Hero ---------- */

.brands-hero {
  padding: clamp(3.5rem, 12vw, 8rem) 0 clamp(4rem, 10vw, 7rem);
  max-width: 48rem;
}

/* Un court filet dore devant l'intitule : la seule ponctuation d'accent
   du haut de page. */
.brands-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

.brands-hero__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* Typo fine et large : le contraire du Shop, qui est en gras serre. */
.brands-hero__title {
  font-size: var(--text-h1);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.brands-hero__lead {
  margin-top: 2rem;
  color: var(--fg-muted);
  font-size: var(--text-lead);
  font-weight: 300;
  max-width: 36rem;
}

/* ---------- Cas de campagnes ----------
   Grandes images, une phrase, beaucoup de blanc. Pas de compteurs de vues :
   le brief les exclut volontairement. */

.cases { padding-bottom: clamp(3rem, 8vw, 5rem); }

.case + .case { margin-top: clamp(3rem, 8vw, 5.5rem); }

/* Le format vertical laisse de la place a cote : le texte s'y installe
   plutot que de s'empiler sous une image haute et etroite. */
@media (min-width: 46rem) {
  .case {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
}

/* Vertical partout sur le site : c'est le format que Quentin tourne.
   L'horizontal n'est admis que dans les videos d'en-tete. */
.case__media {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 20rem;
  border-radius: 2px;
  border: 1px solid var(--border);
  background:
    linear-gradient(150deg, #1a1a1f 0%, #232329 45%, #15151a 100%);
  position: relative;
}

/* Fine ligne doree au bord haut : la seule touche d'accent sur l'image. */
.case__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 60%);
  opacity: 0.7;
}

.case__body { margin-top: 1.5rem; }

@media (min-width: 46rem) {
  .case__body { margin-top: 0; }
}

.case__brand {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.case__line {
  color: var(--fg-muted);
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  max-width: 32rem;
}

/* ---------- Concepts ----------
   La mention doit rester VISIBLE. Elle est donc traitee comme un enonce
   de la page, en grand, et non comme une note de bas de page. */

.concepts { padding-block: clamp(3rem, 8vw, 5rem); }

.concepts__statement {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
  max-width: 42rem;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--accent);
}

.concepts__empty {
  margin-top: 2rem;
  color: var(--fg-muted);
  font-size: 0.95rem;
  font-weight: 300;
}

/* ---------- Concepts en vitrine ----------
   Pas encore utilise : la section est vide au lancement. Ces regles attendent
   les premieres videos speculatives faites sur des produits de marques.
   Chaque vignette devra porter la pastille "Self-initiated" — sans elle, un
   concept passe pour une campagne remuneree (brief section 5). */

.concept-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
}

.concept { display: flex; flex-direction: column; gap: 0.7rem; }

.concept__media {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, #1a1a1f 0%, #232329 45%, #15151a 100%);
  overflow: hidden;
}

.concept__flag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(6, 6, 8, 0.82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}

.concept__title { font-size: 1rem; font-weight: 400; letter-spacing: 0.02em; }

.concept__views {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.concepts__aside {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: 34rem;
  color: var(--fg-muted);
  font-weight: 300;
}

/* ---------- Logos ---------- */

.trusted { padding-block: clamp(3rem, 8vw, 5rem); }

.trusted__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}

/* Les fichiers fournis sont de luminosites tres differentes : certains
   blancs, d'autres noirs, tous sur fond transparent. brightness(0) ecrase
   toute couleur en noir, invert(1) le repasse en blanc — resultat : un mur
   de logos homogene, quelle que soit la couleur d'origine, sans retoucher
   un seul fichier. La transparence est preservee, donc les lettres evidees
   d'un logo comme Warner Bros restent evidees.

   Le rendu monochrome n'est pas qu'esthetique : des logos en couleurs
   pleines casseraient la sobriete de la page. */
/* --logo-scale : meme correction d'equilibre optique que sur Prestations.
   Une hauteur unique fait paraitre minuscule un logo compact a cote d'un
   logo tres allonge. */
.trusted__logo {
  display: block;
  height: calc(clamp(1.4rem, 3vw, 1.9rem) * var(--logo-scale, 1));
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.trusted__row li:hover .trusted__logo { opacity: 1; }

/* ---------- Invitation ---------- */

.pitch {
  padding-block: clamp(3.5rem, 9vw, 6rem);
  border-top: 1px solid var(--border);
  max-width: 40rem;
}

.pitch__title {
  font-size: var(--text-h2);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.pitch__text {
  margin-top: 1.25rem;
  color: var(--fg-muted);
  font-weight: 300;
}

.btn-outline {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.8rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background: var(--accent);
  color: #0b0b0d;
}