/* =========================================================================
   READY RELEASE — ARTIST x BRAND (v146)

   Feuille SPECIFIQUE a /artist-collabs.html. Elle ne redefinit AUCUN token :
   couleurs, polices, rayons et rythmes viennent de main.v135.css, qui reste
   la source unique. On n'ajoute ici que les composants qui n'existent nulle
   part ailleurs sur le site.

   /!\ LE NOM PORTE LA VERSION. netlify.toml sert /assets/css/* en
   `immutable` pour un an : editer ce fichier sans le renommer laisserait
   les visiteurs deja venus sur l'ancienne copie, sans moyen de le savoir.
   A la prochaine version, renommer en artist-collabs.v147.css ET repercuter
   dans artist-collabs.html.

   Regle de nommage : prefixe `ac-` partout, pour qu'aucun selecteur ne
   puisse entrer en collision avec un composant existant.

   REGISTRE VISUEL
   ---------------
   La page s'adresse a un directeur marketing de marque ET a un musicien.
   Le compromis se joue sur trois reglages, et pas sur un theme different :
     - le trait plutot que la carte. Les blocs sont separes par des filets
       d'1px, pas par des boites arrondies : c'est la grammaire editoriale
       du reste du site, et c'est ce qui evite l'effet « SaaS ».
     - une seule couleur d'accent, celle de la marque (--signal), utilisee
       en ponctuation. Aucun degrade decoratif.
     - la typographie porte la hierarchie. Pas d'icone illustrative, pas de
       pictogramme rond : les six benefices sont numerotes, pas illustres.
   ========================================================================= */

/* --------------------------------------------------------------- ANCRES
   L'en-tete est en position:fixed. Sans ce decalage, un CTA « I'm a brand »
   ferait atterrir le titre du formulaire SOUS le logo. */
#paths, #benefits, #model, #showcase, #for-brands, #for-artists,
#eligibility, #process, #rights, #apply, #brand-apply, #artist-apply {
  scroll-margin-top: 6.5rem;
}
@media (max-width: 760px) {
  #paths, #benefits, #model, #showcase, #for-brands, #for-artists,
  #eligibility, #process, #rights, #apply, #brand-apply, #artist-apply {
    scroll-margin-top: 5rem;
  }
}

/* ==================================================================== HERO
   Pas de .hero plein ecran : le visiteur doit comprendre le modele
   economique AVANT de defiler (brief §2). Le hero fait donc une hauteur de
   contenu, et la ligne des trois roles est visible sans scroll sur un
   portable courant. */
.ac-hero {
  padding-top: clamp(7.5rem, 15vw, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
.ac-hero__in { max-width: none; }
.ac-hero__t {
  margin-top: 1.35rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.038em;
  text-wrap: balance;
  max-width: 16ch;
}
.ac-hero__t .ac-hl { color: var(--signal); }
.ac-hero__t .ac-hl-soft { color: var(--ash); }
.ac-hero__sub {
  margin-top: 1.6rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ash);
  max-width: 56ch;
}
.ac-hero__sub b { color: var(--bone); font-weight: 600; }

/* La ligne des trois roles est la reponse a « qui paie ? » posee tout en
   haut, avant meme que la question se forme. Elle est repetee en detail
   plus bas (§5) : ici c'est un resume, pas la demonstration. */
.ac-hero__roles {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}
.ac-hero__role { display: grid; gap: 0.4rem; }
.ac-hero__role-k {
  font-family: var(--caps);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.ac-hero__role:first-child .ac-hero__role-k { color: var(--signal); }
.ac-hero__role-v {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--bone);
}
.ac-hero__act {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

@media (max-width: 720px) {
  .ac-hero__roles { grid-template-columns: 1fr; gap: 1rem; }
  .ac-hero__act .btn { width: 100%; justify-content: center; }
}

/* ============================================================ DEUX CHEMINS
   Deux colonnes, pas trois : la page n'a que deux publics et toute
   troisieme case diluerait le choix. Sur mobile elles s'empilent, la carte
   « marque » d'abord — c'est elle qui finance, donc c'est elle qui doit
   etre lue meme par quelqu'un qui ne defile pas. */
.ac-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.ac-path {
  background: var(--void);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background 0.35s var(--ease);
}
.ac-path:hover { background: var(--surface); }
.ac-path__k {
  font-family: var(--caps);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.ac-path--brand .ac-path__k { color: var(--signal); }
.ac-path__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--bone);
}
.ac-path__p {
  color: var(--ash);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 40ch;
}
.ac-path__p b { color: var(--bone); font-weight: 600; }
.ac-path__note {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ash-dim);
  max-width: 40ch;
}
.ac-path__go { margin-top: auto; padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }

@media (max-width: 860px) {
  .ac-paths { grid-template-columns: 1fr; }
  .ac-path__go .btn { width: 100%; justify-content: center; }
}

/* ============================================================== EN-TETES
   Un seul composant de titre de section pour toute la page : c'est ce qui
   donne le rythme editorial, et c'est ce qui manque des qu'on melange
   trois styles de titre. */
.ac-sec__t {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: balance;
}
.ac-sec__t .ac-hl { color: var(--signal); }
.ac-sec__lead {
  margin-top: 1.35rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ash);
  max-width: 56ch;
}

/* ============================================================= BENEFICES
   Six entrees numerotees, pas d'icone. Un pictogramme rond par benefice
   ferait basculer la page du cote « landing SaaS » que le brief interdit,
   et n'ajouterait aucune information : le titre dit deja tout.

   Le filet superieur de chaque cellule se trace au scroll, en cascade. */
.ac-ben {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
}
.ac-ben__i { position: relative; padding-top: 1.35rem; }
.ac-ben__i::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease) calc(var(--i, 0) * 90ms);
}
.ac-ben__i.is-in::before { transform: scaleX(1); }
.ac-ben__i:first-child::before { background: var(--signal); }
.ac-ben__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--ash-dim);
}
.ac-ben__i:first-child .ac-ben__n { color: var(--signal); }
.ac-ben__t {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bone);
}
.ac-ben__d {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ash);
  max-width: 40ch;
}
.ac-ben__for {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
}

@media (max-width: 1000px) { .ac-ben { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ac-ben { grid-template-columns: 1fr; } }

/* ============================================================== LE MODELE
   « Qui paie ? » doit avoir une reponse visuelle, pas seulement textuelle.
   Trois colonnes, une fleche entre chacune, et une phrase de resume
   au-dessus. Sur mobile la fleche pivote et la lecture reste verticale. */
.ac-model {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  border-block: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.ac-model__c { display: grid; gap: 0.5rem; align-content: start; }
.ac-model__k {
  font-family: var(--caps);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.ac-model__c--rr .ac-model__k { color: var(--signal); }
.ac-model__v {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--bone);
}
.ac-model__d {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ash);
  max-width: 28ch;
}
.ac-model__arw {
  align-self: center;
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.ac-model__answer {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--bone);
  max-width: 30ch;
}
.ac-model__answer b { color: var(--signal); font-weight: 700; }

@media (max-width: 900px) {
  .ac-model { grid-template-columns: 1fr; gap: 1.5rem; }
  .ac-model__arw { justify-self: start; transform: rotate(90deg); }
  .ac-model__d { max-width: none; }
}

/* ======================================================== VITRINE VIDEO
   /!\ CADRE VIDE, VOLONTAIREMENT. Le brief §6 interdit d'embarquer une
   video, d'en generer une, d'en poser une de banque d'images, ET d'afficher
   un bouton Play qui ne lance rien. Un faux Play est un mensonge
   d'interface : il se clique, il ne fait rien, et c'est le premier moment
   ou le visiteur cesse de croire la page.

   Ce qui est affiche a la place : un cadre 16:9 au bon format, un liseret,
   et une etiquette qui dit ce qui viendra. Rien qui invite au clic.

   POSER LA VIDEO PLUS TARD
   ------------------------
   Dans artist-collabs.html, remplacer le contenu de <div class="ac-show__f">
   par un <video class="ac-show__v" playsinline preload="none"
   poster="/assets/img/..."> plus son bouton, et retirer .ac-show__f--empty.
   artist-collabs.v146.js contient deja le branchement (voir la section
   VITRINE) : il ne fait rien tant qu'aucune <video> n'est presente, et se
   met a fonctionner des qu'elle l'est. Aucune regle ci-dessous ne depend du
   nom du fichier. */
.ac-show { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ac-show__f {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--void-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ac-show__f--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 197, 71, 0.06) 0%, rgba(232, 197, 71, 0) 62%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ac-show__slate {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem;
}
.ac-show__slate-k {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.ac-show__slate-t {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: -0.01em;
  color: var(--ash);
  max-width: 34ch;
}
.ac-show__v { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-show__cap {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.4rem;
  max-width: 62ch;
}
.ac-show__cap-t {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: -0.02em;
  color: var(--bone);
}
.ac-show__cap-p { font-size: 0.9375rem; line-height: 1.6; color: var(--ash); }

/* ======================================================= COLONNES PUBLIC
   Les sections §7 et §8 partagent la meme mise en page : un enonce a
   gauche, une liste de points a droite. Le seul ecart entre les deux est la
   couleur du filet superieur — pas deux composants. */
.ac-side {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.ac-side__stmt {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--bone);
  max-width: 20ch;
}
.ac-side__stmt b { color: var(--signal); font-weight: 700; }
.ac-side__p {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ash);
  max-width: 44ch;
}
.ac-side__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ac-side__i {
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bone);
}
.ac-side__i:last-child { border-bottom: 1px solid var(--line); }
.ac-side__i:first-child { border-top-color: var(--line-strong); }
.ac-side__i span { display: block; margin-top: 0.3rem; font-size: 0.875rem; color: var(--ash-dim); }
.ac-side__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.ac-side__foot {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ash-dim);
  max-width: 52ch;
}

@media (max-width: 900px) {
  .ac-side { grid-template-columns: 1fr; gap: 2rem; }
  .ac-side__stmt, .ac-side__p { max-width: none; }
}

/* ============================================================ ELIGIBILITE
   Le seuil est un CHIFFRE, donc il s'affiche comme un chiffre. Le detail
   qui compte — cumule, pas par plateforme — est colle dessous, parce que
   c'est exactement le point sur lequel un artiste s'auto-exclut a tort. */
.ac-elig {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  border-block: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.ac-elig__n {
  font-family: var(--heavy);
  font-weight: 800;
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--bone);
  font-feature-settings: 'tnum' 1;
}
.ac-elig__n span { color: var(--signal); }
.ac-elig__body { display: grid; gap: 0.7rem; }
.ac-elig__t {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--bone);
}
.ac-elig__p { font-size: 0.9375rem; line-height: 1.6; color: var(--ash); max-width: 52ch; }
.ac-elig__p b { color: var(--bone); font-weight: 600; }
.ac-elig__where {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;
}
.ac-elig__where li {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}
.ac-elig__fine {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ash-dim);
  max-width: 62ch;
}

@media (max-width: 760px) {
  .ac-elig { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ============================================================== PROCESSUS
   Cinq etapes en ligne sur desktop, empilees sous 900px. Le filet
   superieur se trace en cascade, comme les benefices : c'est le meme
   vocabulaire d'animation sur toute la page, donc il se lit sans
   apprentissage. */
.ac-steps {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2.4vw, 2rem);
}
.ac-step { position: relative; padding-top: 1.2rem; }
.ac-step::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease) calc(var(--i, 0) * 130ms);
}
.ac-step.is-in::before { transform: scaleX(1); }
.ac-step:first-child::before { background: var(--signal); }
.ac-step__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--ash-dim);
}
.ac-step:first-child .ac-step__n { color: var(--signal); }
.ac-step__t {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--bone);
}
.ac-step__d {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ash);
}

@media (max-width: 900px) {
  .ac-steps { grid-template-columns: 1fr; gap: 0; }
  .ac-step { padding-bottom: 1.15rem; }
}

/* ================================================================= DROITS
   Bloc court et net. Il est encadre parce que c'est le seul endroit de la
   page ou une phrase engage juridiquement : elle doit se retrouver du
   premier coup d'oeil quand quelqu'un revient la relire. */
.ac-rights {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-left: 2px solid var(--signal);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  max-width: 68ch;
}
.ac-rights__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--bone);
  max-width: 34ch;
}
.ac-rights__p { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.65; color: var(--ash); }
.ac-rights__p + .ac-rights__p { margin-top: 0.7rem; }

/* ============================================================ FORMULAIRES
   Deux formulaires cote a cote sur desktop, empiles sur mobile. Chacun
   porte son propre seuil d'entree en tete : le rappel des 30 000 abonnes
   doit etre lu AVANT que l'artiste commence a taper, pas apres l'envoi. */
.ac-forms {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.ac-form {
  background: var(--void);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.4rem, 3vw, 2.25rem);
}
.ac-form__k {
  font-family: var(--caps);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.ac-form--brand .ac-form__k { color: var(--signal); }
.ac-form__t {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--bone);
}
.ac-form__sub {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ash);
  max-width: 42ch;
}
.ac-form__gate {
  margin-top: 1.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--signal-dim);
  border-radius: var(--radius-s);
  background: rgba(232, 197, 71, 0.07);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bone);
}
.ac-form__gate b { color: var(--signal); font-weight: 700; }
.ac-form__f { margin-top: clamp(1.35rem, 2.5vw, 1.75rem); display: grid; gap: 0.9rem; }
.ac-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.ac-form__row { display: grid; gap: 0.35rem; min-width: 0; }
.ac-form__lb {
  font-family: var(--caps);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}
.ac-form__opt { color: var(--ash-dim); font-weight: 400; letter-spacing: 0.1em; }
.ac-form__in {
  width: 100%;
  background: var(--surface);
  color: var(--bone);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.ac-form__in::placeholder { color: var(--ash-dim); }
.ac-form__in:hover { border-color: var(--ash-dim); }
.ac-form__in:focus { outline: none; border-color: var(--signal); background: var(--surface-2); }
.ac-form__in:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ac-form__ta { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.ac-form__socials { display: grid; gap: 0.5rem; }

/* Le piege a robots est cache aux humains ET aux lecteurs d'ecran : un
   champ etiquete que personne ne doit remplir sera rempli par quelqu'un
   qui ne le voit pas. */
.ac-form__hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ac-form__go { margin-top: 0.35rem; justify-content: center; }
.ac-form__go[disabled] { opacity: 0.55; cursor: progress; }
.ac-form__msg {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--signal);
}
.ac-form__msg.is-err { color: #E8837D; }
.ac-form__fine { margin-top: 0.35rem; font-size: 0.75rem; line-height: 1.5; color: var(--ash-dim); }
.ac-form__fine a { color: var(--ash); border-bottom: 1px solid var(--line-strong); }
.ac-form__fine a:hover { color: var(--signal); border-bottom-color: var(--signal); }

@media (max-width: 900px) {
  .ac-forms { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ac-form__grid { grid-template-columns: 1fr; }
}

/* ============================================================== CTA FINAL */
.ac-end {
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  text-align: center;
}
.ac-end__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--bone);
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.ac-end__t .ac-hl { color: var(--signal); }
.ac-end__p {
  margin: 1.35rem auto 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ash);
}
.ac-end__a {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
@media (max-width: 520px) {
  .ac-end__a { flex-direction: column; }
  .ac-end__a .btn { width: 100%; justify-content: center; }
}

/* ================================================= RYTHME VERTICAL, MOBILE
   Le brief §18 demande explicitement de ne pas laisser de grands vides
   noirs sur mobile. --section-y vaut jusqu'a 11rem sur .section : sur un
   ecran de 700px de haut, ca fait deux ecrans de noir entre deux idees.
   La surcharge vit sur :root mais cette feuille n'est chargee que par
   artist-collabs.html, donc aucune autre page n'est touchee. */
@media (max-width: 760px) {
  :root { --section-y: clamp(2.75rem, 9vw, 4rem); }
}

/* ============================================================== MOUVEMENT
   Toutes les animations de la page sont des transitions sur transform et
   opacity, declenchees par une classe posee au scroll. Rien ne bouge tout
   seul en boucle, et tout s'arrete ici pour qui l'a demande. */
@media (prefers-reduced-motion: reduce) {
  .ac-ben__i::before,
  .ac-step::before { transform: scaleX(1); transition: none; }
  .ac-path { transition: none; }
}

/* =========================================================================
   V147 — PASSE DE CORRECTION VISUELLE
   ========================================================================= */
/* Cette feuille est la v146 a l'identique, plus le bloc ci-dessous. Le nom
   change parce que netlify.toml sert /assets/css/* en `immutable` pendant un
   an : editer la v146 en place laisserait les visiteurs deja venus sur
   l'ancienne copie. Quatre corrections, rien d'autre.
   ========================================================================= */

/* --------------------------------------------------- 1. RYTHME VERTICAL
   --section-y valait jusqu'a 11rem : deux ecrans de noir entre deux idees
   sur un portable, et de grands vides sur desktop. On descend a 6rem max.
   La surcharge vit sur :root mais cette feuille n'est chargee que par
   artist-collabs.html, donc aucune autre page n'est touchee. */
:root { --section-y: clamp(3.25rem, 7vw, 6rem); }
@media (max-width: 760px) {
  :root { --section-y: clamp(2.25rem, 7vw, 3.25rem); }
}
.ac-hero { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ac-end  { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.ac-ben  { margin-top: clamp(2rem, 4vw, 3rem); }
.ac-side { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.ac-model { padding-block: clamp(1.5rem, 3vw, 2.25rem); }

/* ------------------------------------------- 2. HERO : COPIE + CADRE UGC
   Le hero passe en deux colonnes : le texte a gauche, un cadre vertical
   9:16 a droite, dans l'espace qui etait vide. Le cadre ne doit PAS
   ecraser le titre : d'ou la colonne droite plus etroite (0.72fr) et le
   plafond a 19rem. */
.ac-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ac-hero__copy { min-width: 0; }

.ac-ugc {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 19rem;
  min-width: 0;
}
.ac-ugc__f {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, var(--surface) 0%, var(--void-2) 100%);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 70px -24px rgba(0, 0, 0, 0.85);
}
/* Le futur fichier : object-fit cover, plein cadre, sans deformation. */
.ac-ugc__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* /!\ PAS DE FAUX BOUTON PLAY. Le brief l'interdit, et un Play qui ne lance
   rien est le premier moment ou le visiteur cesse de croire la page. Une
   ligne grise, dans la meme grammaire que la vitrine video plus bas. */
.ac-ugc__slate {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 0.35rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.ac-ugc__k {
  font-family: var(--caps);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.ac-ugc__t {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ash-dim);
}

@media (max-width: 900px) {
  .ac-hero__in { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .ac-ugc { justify-self: start; max-width: 15rem; }
}
@media (max-width: 520px) {
  .ac-ugc { justify-self: center; max-width: 13.5rem; }
}

/* ------------------------------- 3. LA PREUVE : PRODUIT MARQUE / CLIP
   Deux images de MEME cadre, MEME rapport, MEME poids visuel. C'est le
   seul endroit de la page ou la proposition cesse d'etre une explication
   et devient une demonstration : produit reel a gauche, meme produit dans
   le clip officiel a droite. Les deux fichiers sont deja recadres en 16:9,
   donc `cover` ne rogne rien et ne deforme rien. */
.ac-proof {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.ac-proof__i { margin: 0; min-width: 0; }
.ac-proof__f {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ac-proof__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-proof__cap {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ash);
  max-width: 46ch;
}

@media (max-width: 760px) {
  .ac-proof { grid-template-columns: 1fr; gap: 1.5rem; }
  .ac-proof__cap { max-width: none; }
}

/* ------------------------------------- 4. CTA « APPLY TO THE PROGRAMME »
   Le bouton passe DANS la colonne de gauche (voir le HTML). Il n'attend
   plus la fin de la liste de droite pour s'afficher, donc il remonte et se
   rapproche du centre optique. Style, texte et destination inchanges. */
.ac-side > div > .ac-side__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ------------------------------------------------- 5. BANDE 901–1150 px
   La zone que le hero en deux colonnes rend la plus fragile : la colonne
   de texte y perd ~35 % de sa largeur alors que le titre est encore a sa
   taille desktop. On desserre le titre et on retrecit le cadre UGC plutot
   que de laisser « Brands fund the video. » se casser n'importe ou. */
@media (min-width: 901px) and (max-width: 1150px) {
  .ac-hero__in { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .ac-hero__t { font-size: clamp(2rem, 4.4vw, 3rem); }
  .ac-ugc { max-width: 15.5rem; }
  .ac-hero__roles { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
}

/* =========================================================================
   V148 — DEUX CORRECTIONS, RIEN D'AUTRE
   La v147 a l'identique, plus ce bloc. Nouveau nom parce que netlify.toml
   sert /assets/css/* en `immutable` un an.
   ========================================================================= */

/* ------------------- 1. LA PREUVE PASSE AVANT « WHO PAYS FOR WHAT. »
   Le bloc est desormais le premier enfant du conteneur : sa marge haute
   ferait doublon avec le padding de section. Et l'oeil a besoin d'un vrai
   palier entre la demonstration et le titre qui l'explique — sinon les
   deux se lisent comme un seul bloc. */
.ac-proof { margin-top: 0; }
.ac-proof + .eyebrow { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* --------------------------------- 2. CADRE UGC 9:16 VISIBLE ET VIDE
   Un emplacement, pas un media. Le cadre existe, tient son rapport, et ne
   contient rien : pas de vignette, pas de poster, pas de texte, pas de
   Play. Il ne doit pas ressembler a une video cassee, donc il se lit comme
   une surface voulue — meme grammaire que les autres blocs de la page :
   un filet d'1px, une profondeur, aucune decoration.

   /!\ .ac-ugc__slate n'existe plus dans le HTML. Ses regles restent plus
   haut dans le fichier (heritage v147) et ne s'appliquent a rien : elles
   sont neutralisees ici plutot que supprimees, la v147 etant immuable. */
.ac-ugc__slate { display: none; }

.ac-ugc__f {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(232, 197, 71, 0.055), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--void-2) 100%);
}
/* Le <video> est present et sans source : il ne peint rien, mais il occupe
   deja la totalite du cadre, donc l'arrivee du fichier ne redispose rien. */
.ac-ugc__v { background: transparent; }