@charset "UTF-8";

/* Studios 2026: directory and profile surfaces only. */
/* Portee des tokens. Elle ne couvrait que trois conteneurs : les onglets, les
   panneaux, le rail "meilleur de" et le bloc tiers vivent dans .content-section
   et n'heritaient de rien — var(--studio-gold-strong) sortait invalide, donc le
   compteur de l'onglet actif s'affichait en noir sur noir. */
.studios-directory-page,
.studio-hero-wrap,
.studio-catalog,
.studio-tabs,
.studio-panel,
.studio-best,
.studio-strip,
.studio-offer,
.studio-aside {
  --studio-gold: #d4a853;
  --studio-gold-strong: #efc567;
  --studio-surface: #141414;
  --studio-surface-soft: #1b1b1b;
  --studio-border: rgba(255, 255, 255, .09);
  --studio-muted: #a2a2a2;
  --studio-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

html.light .studios-directory-page,
html.light .studio-hero-wrap,
html.light .studio-catalog,
html.light .studio-tabs,
html.light .studio-panel,
html.light .studio-best,
html.light .studio-strip,
html.light .studio-offer,
html.light .studio-aside {
  --studio-gold: #b8860b;
  --studio-gold-strong: #9b7007;
  --studio-surface: #fff;
  --studio-surface-soft: #f8f6f1;
  --studio-border: rgba(17, 17, 17, .1);
  --studio-muted: #696969;
  --studio-shadow: 0 20px 55px rgba(52, 41, 18, .12);
}

/* Directory introduction and search */
/* Bandeau d'une ligne, a l'echelle des titres de /albums/ et /categories/.
   L'ancien pave de 307px etait aux deux tiers vide : un h1 en 6vw, un champ
   de recherche, et rien d'autre. */
/* background:none n'est pas cosmetique : gold.min.css porte
   `footer, header { background: var(--header-background) }` sur le NOM
   d'element, donc ce <header> d'intro heritait du fond de l'en-tete du site et
   se detachait comme un bloc etranger. Pas de bordure non plus : le titre se
   suffit, la grille commence juste apres. */
.studios-directory-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: end;
  margin: 0 0 20px;
  padding: 0;
  background: none;
}

.studios-directory-intro__copy {
  max-width: 760px;
}

.studios-directory-intro__facts {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  margin: 0;
  padding: 0;
}

.studios-directory-intro__facts div {
  text-align: right;
}

.studios-directory-intro__facts dd {
  margin: 0;
  color: var(--general-color);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.studios-directory-intro__facts dt {
  color: var(--studio-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.studios-directory-intro__eyebrow,
.studio-group__eyebrow,
.studio-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--studio-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.studios-directory-intro h1 {
  margin: 6px 0 6px;
  color: var(--general-color);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.studios-directory-intro p {
  max-width: 640px;
  color: #bbb;
  font-size: 14px;
  line-height: 1.5;
}

html.light .studios-directory-intro p {
  color: #565656;
}

/* Toolbar : composants de /categories/ (.cat-toolbar / .cat-search /
   .sort-chip) deja presents dans gold.min.css. On ne redefinit ici que
   l'espacement propre a cette page. */
.studios-toolbar {
  margin: 0 0 22px;
}

/* Directory groups and cards */
.studios-directory {
  margin-bottom: 36px;
}

.studio-card[hidden],
.studios-directory-empty[hidden] {
  display: none !important;
}

/* Grille unique. `dense` + `align-self:start` sont indispensables : sans eux
   une ligne compacte posee a cote d'une carte pleine est etiree a la hauteur
   de sa voisine, et le gain de compacite n'a pas lieu. */
.studios-grid {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
}

/* Une carte pleine occupe deux colonnes : deux grandes cartes par ligne sur
   desktop. Une ligne compacte n'en occupe qu'une, quatre par ligne. */
.studio-card {
  --studio-crest-size: clamp(70px, 7.4vw, 96px);
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  grid-column: span 2;
  border: 1px solid var(--studio-border);
  border-radius: 22px;
  flex-direction: column;
  align-self: start;
  background: var(--studio-surface);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.studio-card:hover {
  border-color: rgba(212, 168, 83, .35);
  box-shadow: 0 17px 38px rgba(0, 0, 0, .24);
  transform: translateY(-3px);
}

html.light .studio-card:hover {
  border-color: rgba(184, 134, 11, .32);
  box-shadow: 0 17px 38px rgba(49, 37, 12, .13);
}

.studio-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 41 / 8;
  background: #090909;
}

/* Voile plein sur toute la surface, plus un renforcement vers le bas : sans
   lui le logo se perd dans quatre vignettes contrastees. */
.studio-card__media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 130% at 50% 100%, rgba(0, 0, 0, .78), transparent 72%),
    linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .08) 80%),
    rgba(0, 0, 0, .26);
  content: "";
  pointer-events: none;
}

.studio-card__media > img,
.studio-card__media .studio-monogram,
.studio-card__mosaic {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .35s ease;
}

.studio-card__media > img {
  object-fit: cover;
}

/* Le zoom porte sur la mosaique entiere, jamais sur chaque tuile : quatre
   transforms independants dechirent les gouttieres au survol. */
.studio-card:hover .studio-card__media > img,
.studio-card:hover .studio-card__mosaic {
  transform: scale(1.025);
}

/* Mosaique des 4 vidéos les plus vues du studio (pull_videos). C'est ce qui
   remplace le monogramme sur les studios sans logo. */
.studio-card__mosaic {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: #090909;
}

/* Une seule rangee : le gabarit choisit 3, 2 ou 1 tuile selon ce que le pull a
   ramene. Trois tuiles de 220x130 respectent le 16:9 des vignettes a 5% pres. */
.studio-card__mosaic--3 {
  grid-template-columns: repeat(3, 1fr);
}

.studio-card__mosaic--2 {
  grid-template-columns: repeat(2, 1fr);
}

.studio-card__mosaic--1 {
  grid-template-columns: 1fr;
}

.studio-card__tile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-card__tile[hidden] {
  display: none;
}

/* Le logo reste present quand il existe, mais en medaillon : c'est une marque,
   pas une image de contenu. Un 350x196 rendu en carre etait recadre a mort. */
/* Le logo est l'element d'identite de la carte : gros, centre, a cheval entre
   la bande de vignettes et le bloc de texte. Il garde le rapport de l'image
   envoyee — un aspect-ratio impose le recadrait au centre et le rendait carre
   quelle que soit la source. */
.studio-card__crest {
  display: grid;
  overflow: hidden;
  /* min-width sinon la boite se reduit a un trait tant que l'image n'est pas
     chargee : width:auto sur une image lazy sans dimensions intrinseques donne
     une largeur nulle. */
  width: fit-content;
  min-width: calc(var(--studio-crest-size) * 1.4);
  min-height: var(--studio-crest-size);
  max-width: 74%;
  margin: calc(var(--studio-crest-size) * -0.66) auto 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  place-items: center;
  background: #0d0d0d;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

html.light .studio-card__crest {
  border-color: rgba(17, 17, 17, .12);
  box-shadow: 0 14px 34px rgba(40, 30, 10, .22);
}

.studio-card__crest img {
  display: block;
  width: auto;
  height: var(--studio-crest-size);
  max-width: 100%;
  object-fit: contain;
}

.studio-card__crest .studio-monogram {
  width: calc(var(--studio-crest-size) * 1.7);
  height: var(--studio-crest-size);
  border: 0;
}

.studio-card__crest .studio-monogram span {
  font-size: calc(var(--studio-crest-size) * 0.42);
}

/* Monogramme : aplat et filet, plus de halo dore floute. Deux caracteres,
   poses par studios.js — cadinot et Cocksucker donnaient tous deux un "C". */
.studio-monogram {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--studio-border);
  color: var(--studio-muted);
  background: var(--studio-surface-soft);
}

.studio-monogram span {
  position: relative;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: .01em;
}

.studio-card__badges {
  position: absolute;
  z-index: 2;
  inset-block-start: 10px;
  inset-inline: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.studio-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: #f2f2f2;
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-card__badge svg {
  width: 11px;
  height: 11px;
}

.studio-card__badge--official {
  margin-inline-start: auto;
  border-color: transparent;
  color: #16110a;
  background: var(--studio-gold-strong);
}

/* Le corps est centre : le logo, le nom puis les faits forment une colonne
   d'identite. Le retrait haut est celui du logo a cheval. */
.studio-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  padding: 0 clamp(18px, 2.2vw, 28px) clamp(16px, 2vw, 22px);
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}

.studio-card__name {
  margin: 0;
  color: var(--general-color);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.studio-card__name a:hover {
  color: var(--studio-gold);
}

/* Toujours renseignee, parce qu'elle est derivee du catalogue et non saisie.
   C'est elle qui remplace la zone de description vide sur les studios qui
   n'en ont pas — soit 9 sur 17. */
/* Etoiles : un fond en degrade decoupe sur le texte. Le pourcentage arrive en
   variable inline depuis le gabarit — pas de CSP sur le site principal, seuls
   les bacs a sable /rencontre/ et /manfinder-* en ont une. */
.studio-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -2px;
}

.studio-card__stars {
  background:
    linear-gradient(90deg,
      var(--studio-gold) var(--studio-rating, 0%),
      rgba(255, 255, 255, .16) var(--studio-rating, 0%));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}

html.light .studio-card__stars {
  background:
    linear-gradient(90deg,
      var(--studio-gold) var(--studio-rating, 0%),
      rgba(17, 17, 17, .17) var(--studio-rating, 0%));
  background-clip: text;
  -webkit-background-clip: text;
}

.studio-card__rating em {
  color: var(--studio-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.studio-card__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  color: var(--studio-muted);
  font-size: 13px;
  line-height: 1.35;
}

.studio-card__fact--count {
  color: var(--general-color);
  font-weight: 700;
}

.studio-card__facts span + span::before {
  margin-inline-end: 10px;
  content: "·";
}

.studio-card__fact--fresh {
  color: var(--studio-gold);
  font-weight: 700;
}

/* Ligne compacte sous 8 videos : une seule colonne de grille, quatre par
   ligne. Pas de logo a cheval ni de texte centre — a cette taille la
   composition d'identite ne tient pas, on revient a une ligne dense.
   Ecrite APRES .studio-card, dont elle a la meme specificite. */
.studio-card--row {
  position: relative;
  display: grid;
  grid-column: span 1;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: stretch;
  border-radius: 14px;
}

/* Les actions sont masquees sur ce format : c'est le titre qui rend la ligne
   entiere cliquable, meme destination que la vignette. */
.studio-card--row .studio-card__name a::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
}

.studio-card--row .studio-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 76px;
}

.studio-card--row .studio-card__media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 70%);
}

.studio-card--row .studio-card__mosaic {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.studio-card--row .studio-card__tile:not(:first-child) {
  display: none;
}

.studio-card--row .studio-card__crest,
.studio-card--row .studio-card__actions,
.studio-card--row .studio-card__description {
  display: none;
}

.studio-card--row .studio-card__body {
  padding: 11px 13px;
  align-items: flex-start;
  gap: 3px;
  text-align: start;
}

.studio-card--row .studio-card__name {
  overflow: hidden;
  max-width: 100%;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-card--row .studio-card__facts {
  justify-content: flex-start;
  font-size: 11px;
}

.studio-card--row .studio-card__fact--count {
  font-weight: 600;
}

.studio-card__description {
  display: -webkit-box;
  overflow: hidden;
  max-width: 46ch;
  color: var(--studio-muted);
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Pas de margin-top:auto : combine au min-height du body, il poussait les
   boutons en bas d'une carte vide et creusait ~100px de trou sur les studios
   sans description (10 sur 11). Les actions suivent le contenu. */
.studio-card__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.studio-card__action {
  min-width: 148px;
}

.studio-card__action {
  display: inline-flex;
  min-height: 41px;
  padding: 0 13px;
  border: 1px solid var(--studio-border);
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  color: var(--general-color);
  background: var(--studio-surface-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.studio-card__action svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.studio-card__action--internal:hover {
  border-color: rgba(212, 168, 83, .35);
  color: var(--studio-gold);
}

/* Bronze et non l'or de la marque : l'or est deja la couleur de la pastille de
   tri active, deux roles differents ne peuvent pas porter la meme couleur.
   Le bronze reste dans la famille chaude, se distingue au premier coup d'oeil,
   et donne 6,6:1 avec du blanc. Fond fixe dans les deux themes : le bouton
   porte son propre fond, il n'a aucune raison de suivre le theme — c'est ce
   qui l'envoyait a 2,9:1 en mode clair quand il suivait var(--studio-gold). */
.studio-card__action--vod,
html.light .studio-card__action--vod {
  border-color: transparent;
  color: #fff;
  background: #7d4f22;
}

.studio-card__action--vod:hover,
html.light .studio-card__action--vod:hover {
  color: #fff;
  background: #96602c;
}

.studios-directory-empty {
  margin: 50px 0;
  padding: 28px;
  border: 1px dashed var(--studio-border);
  border-radius: 18px;
  color: var(--studio-muted);
  background: var(--studio-surface);
  font-size: 15px;
  text-align: center;
}

/* Studio profile: removes the old aside layout. */
.holder-box:has(> .studio-hero-wrap),
.holder-box.studio-holder-box {
  display: block;
  width: 100%;
  margin-top: 0;
}

.holder-box:has(> .studio-hero-wrap) > .content-section,
.holder-box.studio-holder-box > .content-section {
  width: 100%;
  min-width: 0;
}

.studio-hero-wrap {
  width: 100%;
  margin: 0 0 30px;
}

/* ============================================================
   En-tete de la page studio
   Geometrie et classes de la page modele (.mv-banner / .mv-hero) : on ne
   redefinit ici que ce qui est propre au studio — logo 16:9 au lieu d'un
   portrait, champ de recherche, bouton sortant.
   ============================================================ */

/* La page studio n'a pas de fil d'Ariane et colle a l'en-tete du site : on
   annule la gouttiere haute que .container applique. */
.studio-layout {
  margin-top: -15px;
  overflow-x: clip;
}

.studio-layout__inner {
  display: block;
}

/* Plein ecran, sans arrondi. Le 100vw + marge negative est le meme mecanisme
   que .mv-banner ; on n'ecrase que le rayon et la hauteur. */
.studio-banner {
  border-radius: 0;
  height: clamp(150px, 19vw, 260px);
  background: linear-gradient(135deg, #2b241a, #0e0e0e 60%, #1d130c);
}

.studio-banner__montage {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: 100%;
}

.studio-banner__montage--1 { grid-template-columns: 1fr; }
.studio-banner__montage--2 { grid-template-columns: repeat(2, 1fr); }
.studio-banner__montage--3 { grid-template-columns: repeat(3, 1fr); }

.studio-banner__montage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile : le logo remonte dessus, il doit s'en detacher. */
.studio-banner__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7, 7, 7, .92), rgba(7, 7, 7, .1) 72%),
    linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 55%);
}

/* Logo : 16:9, comme la source (350x196), et plus gros que la vignette de
   carte. Il remonte de la moitie de sa hauteur sur la banniere. */
.studio-hero__logo {
  width: clamp(150px, 17vw, 232px);
  height: auto;
  aspect-ratio: 16 / 9;
  border-width: 3px;
  border-radius: 12px;
  align-self: flex-start;
  margin-top: 8px;
}

.studio-hero__logo img,
.studio-hero__logo .studio-monogram {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-hero__logo .studio-monogram {
  border: 0;
  font-size: 34px;
}

/* Le bloc d'infos n'a plus a compenser un portrait de 200px. */
.studio-hero .mv-hero__info,
.studio-hero .mv-hero__actions {
  padding-top: 74px;
}

.studio-hero__fresh {
  color: var(--studio-gold, #d4a853);
  font-weight: 700;
}

/* Champ de recherche du catalogue. Il a quitte la colonne gauche du hero pour
   la barre d'onglets : il y est colle au listing qu'il filtre, et l'entete
   retrouve une seule colonne d'identite. La hauteur est calee sur celle d'un
   onglet (10+12 de padding + 14px de texte) pour que la reglette soit droite. */
.studio-tabs__search {
  display: flex;
  width: min(300px, 40vw);
  margin-bottom: 6px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--studio-border, rgba(255, 255, 255, .12));
  border-radius: 11px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  background: var(--studio-surface-soft, #1b1b1b);
}

.studio-tabs__search:focus-within {
  border-color: rgba(212, 168, 83, .45);
}

.studio-tabs__search .svg-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--studio-muted, #a2a2a2);
}

.studio-tabs__search input {
  min-width: 0;
  padding: 8px 0;
  border: 0;
  flex: 1;
  color: var(--general-color);
  background: none;
  font-family: inherit;
  font-size: 13px;
}

.studio-tabs__search input::placeholder {
  color: var(--studio-muted, #a2a2a2);
}

.studio-tabs__search button {
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  color: #16110a;
  background: #d8ad57;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
}

/* Bronze et non l'or : meme role que "Visit studio" sur l'annuaire, et l'or
   est deja pris par les etats actifs. */
.studio-hero__btn--out,
html.light .studio-hero__btn--out {
  color: #fff;
  background: #7d4f22;
}

.studio-hero__btn--out:hover,
html.light .studio-hero__btn--out:hover {
  color: #fff;
  background: #96602c;
}

.studio-desc {
  border-top: 0;
  margin-top: 18px;
}

/* Appel a l'action colle en bas d'ecran, mobile uniquement. 80% des clics
   sortants sont mobiles : c'est la surface la plus utile de la page. */
.studio-mobile-cta {
  display: none;
}

/* Sortie de filtre, collee aux onglets. Elle vit dans la barre et non dans le
   listing : depuis que le bandeau de titre a disparu, la barre est le seul
   endroit qui dise ce que la grille montre.
   La couleur est ecrite deux fois : gold.min.css porte `html.light a` a une
   specificite (0,1,1) qui bat toute regle de classe simple sur un <a>. */
.studio-tabs__clear,
html.light .studio-tabs__clear {
  display: inline-flex;
  min-height: 32px;
  margin-bottom: 6px;
  padding: 0 12px;
  border: 1px solid var(--studio-border, rgba(255, 255, 255, .09));
  border-radius: 999px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--studio-muted, #a2a2a2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}

.studio-tabs__clear svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.studio-tabs__clear:hover,
html.light .studio-tabs__clear:hover {
  border-color: rgba(212, 168, 83, .4);
  color: var(--studio-gold, #d4a853);
}

/* La pastille pousse le champ de recherche a droite : sans elle, c'est la
   barre entiere qui ecarte les onglets du champ. */
.studio-tabs__clear + .studio-tabs__search {
  margin-inline-start: auto;
}

@media (max-width: 1024px) {
  .studio-hero .mv-hero__info,
  .studio-hero .mv-hero__actions {
    padding-top: 66px;
  }
}

/* Mobile : la page modele empile deja .mv-hero en colonne centree ; on suit,
   et le logo passe pleine largeur pour rester lisible. */
@media (max-width: 767px) {
  .studio-layout {
    margin-top: -10px;
  }

  /* Le logo est la signature du studio : il garde une taille lisible sur
     mobile. .mv-hero remonte de 50px (40 sous 480px), le logo chevauche donc
     le bas de la banniere sur un peu plus d'un tiers de sa hauteur — le meme
     rapport qu'au bureau. */
  .studio-hero__logo {
    width: min(210px, 56vw);
    margin-top: 0;
    align-self: center;
  }

  .studio-hero .mv-hero__info,
  .studio-hero .mv-hero__actions {
    padding-top: 0;
    width: 100%;
  }

  .studio-hero .mv-hero__stats,
  .studio-hero .mv-hero__sub,
  .studio-hero .mv-hero__rating {
    justify-content: center;
  }

  .studio-hero .mv-hero__rate-btn {
    min-height: 40px;
    padding-inline: 16px;
  }

  .studio-hero .mv-hero__actions {
    flex-direction: row;
  }

  .studio-hero .mv-hero__btn {
    min-height: 44px;
    flex: 1;
    justify-content: center;
  }

  /* Barre collee au bas de l'ecran. Elle doit passer AU-DESSUS de la tabbar
     flottante, qui occupe 10px de fond d'ecran plus ~73px de hauteur : a
     72px les deux se chevauchaient et le pouce tombait sur la mauvaise
     cible. 96px laisse une gouttiere franche entre les deux. */
  .studio-mobile-cta,
  html.light .studio-mobile-cta {
    position: fixed;
    z-index: 90;
    inset-inline: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    display: flex;
    min-height: 52px;
    padding: 8px 18px;
    border-radius: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #fff;
    background: #7d4f22;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    font-size: 14px;
    font-weight: 800;
  }

  .studio-mobile-cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  /* Le bouton sortant du hero ferait doublon avec le sticky. */
  .studio-hero__btn--out {
    display: none;
  }
}

.studio-catalog {
  width: 100%;
  min-width: 0;
  margin-top: clamp(30px, 5vw, 56px);
}

.studio-catalog__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: end;
  margin: 0 0 24px;
  padding: clamp(17px, 2vw, 23px);
  border: 1px solid var(--studio-border);
  border-radius: 18px;
  background: var(--studio-surface);
}

.studio-catalog__search-label {
  grid-column: 1 / -1;
  color: var(--general-color);
  font-size: 13px;
  font-weight: 800;
}

.studio-catalog__search-control {
  display: flex;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--studio-border);
  border-radius: 13px;
  background: var(--studio-surface-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.studio-catalog__search-control:focus-within {
  border-color: var(--studio-gold);
  box-shadow: 0 0 0 4px rgba(212, 168, 83, .13);
}

.studio-catalog__search-control input {
  width: 100%;
  min-width: 0;
  padding: 0 15px;
  border: 0;
  color: var(--general-color);
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.studio-catalog__search-control input::placeholder {
  color: var(--studio-muted);
  opacity: 1;
}

.studio-catalog__search-control button {
  min-width: 106px;
  padding: 0 18px;
  border: 0;
  color: #171108;
  background: var(--studio-gold);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.studio-catalog__search-control button:hover {
  background: var(--studio-gold-strong);
}

.studio-catalog__search-clear {
  align-self: center;
  color: var(--studio-muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.studio-catalog__search-clear:hover {
  color: var(--studio-gold);
}

/* Pas de regle de colonnes ici : la specificite (0,6,0) battait
   html[data-video-grid-wide="..."] .main .container .grid-temp[data-video-grid]
   (listing-toolbar.css, 0,5,1) et neutralisait le controle de densite sur les
   pages studio. On laisse la grille generique du site s'appliquer. */

.studio-catalog > .heading .title,
.studio-catalog .heading > .title {
  font-size: clamp(21px, 2.6vw, 29px);
}

/* Directionality */
[dir="rtl"] .studio-card__action svg,
html[lang="he"] .studio-card__action--internal svg,
html[lang="ar"] .studio-card__action--internal svg {
  transform: scaleX(-1);
}

/* Responsive. La grille garde 4 colonnes tant qu'une carte pleine (2 colonnes)
   reste confortable ; en dessous elle passe a 2 colonnes, ou la carte pleine
   occupe toute la largeur et les lignes compactes se mettent par deux. */
@media (max-width: 1180px) {
  .studios-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .studios-directory-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .studios-directory-intro__facts div {
    text-align: start;
  }

  .studio-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .studio-hero__actions {
    grid-column: 1 / -1;
    min-width: 0;
    flex-direction: row;
  }

}

@media (max-width: 640px) {
  .main .container.studios-directory-page {
    padding-inline: 12px;
  }

  .studios-directory-intro {
    gap: 16px;
    margin-bottom: 18px;
  }

  .studios-directory-intro h1 {
    font-size: 30px;
  }

  .studios-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .studio-card,
  .studio-card--row {
    grid-column: span 1;
  }

  .studio-card__media {
    aspect-ratio: 5 / 2;
  }

  .studio-card {
    border-radius: 16px;
  }

  .studio-card__body {
    padding: 16px;
  }

  /* Le hero, le logo et le sticky ne sont plus traites ici : ils l'etaient
     deux fois, et les regles de cette requete — heritees du premier gabarit
     (hero en grille, logo de 70px, CTA dore) — gagnaient par l'ordre source
     et ecrasaient le gabarit actuel. Tout vit desormais dans la requete
     767px. Les regles .studio-catalog__search* ont disparu avec le
     formulaire, et .thumbs.grid-temp ne designait rien : la liste rend un
     <div class="thumbs"> qui CONTIENT un <ul class="grid-temp">, jamais un
     seul element portant les deux classes. */
}

@media (prefers-reduced-motion: reduce) {
  .studio-card,
  .studio-card__media img,
  .studio-card__action,

  .studio-card:hover,
  .studio-card:hover .studio-card__media img {
    transform: none;
  }
}

/* Bloc de conversion, sous la pagination.
   C'est ici qu'atterrissent les creatives d'affiliation retirees du hero
   (custom_file1 / custom_file2) : conteneur a ratio libre, une 728x90
   s'affiche en 728x90 au lieu d'etre etiree dans un slot 1600x520. */
.studio-offer {
  display: grid;
  gap: 14px;
  margin: 26px 0 8px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--studio-border);
  border-radius: 18px;
  background: var(--studio-surface);
}

.studio-offer__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}

.studio-offer__crest {
  display: block;
  overflow: hidden;
  width: 96px;
  border: 1px solid var(--studio-border);
  border-radius: 10px;
  background: #0b0b0b;
}

.studio-offer__crest img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.studio-offer__copy {
  min-width: 0;
}

.studio-offer__title {
  color: var(--general-color);
  font-size: clamp(17px, 2.1vw, 23px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* La promesse, en clair et sur une ligne : ce qu'on trouve, en quelle qualite,
   et ou. C'est elle qui porte l'argument, le titre ne pose que la question. */
.studio-offer__pitch {
  margin-top: 6px;
  color: var(--general-color);
  font-size: 14px;
  line-height: 1.45;
}

/* Divulgation honnete : on nomme l'hote reel de la destination, y compris
   quand c'est une landing d'affiliation. */
.studio-offer__disclosure {
  margin-top: 5px;
  color: var(--studio-muted);
  font-size: 12px;
}

.studio-offer__cta,
html.light .studio-offer__cta {
  display: inline-flex;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 13px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Meme bronze que "Visit studio" sur l'annuaire, dans le hero et dans le
     sticky mobile : c'est le meme geste, il ne peut pas changer de couleur
     d'un bloc a l'autre. L'or reste la couleur des etats actifs, et il
     tombait a 2,9:1 avec du texte sombre en mode clair. */
  color: #fff;
  background: #7d4f22;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: background .2s ease;
}

.studio-offer__cta:hover,
html.light .studio-offer__cta:hover {
  color: #fff;
  background: #96602c;
}

.studio-offer__cta svg {
  width: 15px;
  height: 15px;
}

/* Bornee en largeur : ces creatives font jusqu'a 1600x444, et pleine largeur
   elles ecrasaient le catalogue qu'elles accompagnent. */
.studio-offer__creative {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  border-radius: 12px;
  line-height: 0;
  text-align: center;
}

.studio-offer__creative img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .studio-offer__body {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .studio-offer__cta {
    grid-column: 1 / -1;
  }
}

/* Navigation transverse : casting et specialites du studio. */
.studio-strip {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--studio-border);
}

.studio-strip__title {
  margin: 0 0 14px;
  color: var(--general-color);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.studio-strip__rail {
  display: grid;
  grid-auto-columns: 118px;
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.studio-face {
  display: grid;
  gap: 6px;
  scroll-snap-align: start;
}

.studio-face__photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--studio-border);
  border-radius: 12px;
  background: var(--studio-surface-soft);
}

.studio-face__photo img,
.studio-face__photo .studio-monogram {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.studio-face:hover .studio-face__photo img {
  transform: scale(1.04);
}

.studio-face__photo .studio-monogram span {
  font-size: 22px;
}

.studio-face__name {
  overflow: hidden;
  color: var(--general-color);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-face:hover .studio-face__name {
  color: var(--studio-gold);
}

.studio-face__count {
  color: var(--studio-muted);
  font-size: 11px;
}

.studio-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--studio-border);
  border-radius: 999px;
  color: var(--general-color);
  background: var(--studio-surface-soft);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .2s ease, color .2s ease;
}

.studio-chip:hover {
  border-color: rgba(212, 168, 83, .38);
  color: var(--studio-gold);
}

.studio-chip em {
  color: var(--studio-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

/* ============================================================
   Page studio : chiffres, onglets, panneaux, rail "meilleur de"
   ============================================================ */

/* Gros nombre + libelle en petites capitales : l'idiome de chiffres du site. */

/* Onglets. Le casting du studio arrivait 1400px sous la grille, derriere les
   webcams ; il est maintenant a un clic. */
/* La barre porte deux choses : les onglets a gauche, le champ de recherche a
   droite. Le filet du bas appartient a la barre entiere, pas a la liste : c'est
   lui qui fait tenir les deux ensemble comme une seule reglette. */
.studio-tabs {
  display: flex;
  gap: 16px;
  margin: 22px 0 20px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--studio-border);
  align-items: flex-end;
  justify-content: space-between;
}

/* Le defilement horizontal reste sur la LISTE. Sur .studio-tabs il aurait
   emporte le champ de recherche hors de l'ecran avec les onglets. */
.studio-tabs__list {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  gap: 4px;
  scrollbar-width: none;
}

.studio-tabs__list::-webkit-scrollbar {
  display: none;
}

/* Sans onglets — un studio de plus de 12 videos mais sans modele rattache — la
   barre n'existe que pour le champ : il se pose a droite, seul, et le filet
   n'aurait rien a souligner. */
.studio-tabs--search-only {
  border-bottom: 0;
  justify-content: flex-end;
}

/* La recherche filtre des VIDEOS. Posee au-dessus de la grille des modeles,
   elle promet de chercher des modeles : on la retire tant que l'onglet Modeles
   est actif. Le resultat n'etait pas faux — le formulaire vise l'URL du
   catalogue et une soumission revenait bien sur l'onglet Videos — c'est la
   promesse qui l'etait.
   Au bureau la hauteur de la barre est portee par les onglets : rien ne saute.
   Sans support de :has(), le champ reste simplement visible, soit l'etat
   d'aujourd'hui : aucune regression. */
.studio-tabs:has(.studio-tab[data-studio-tab="cast"].studio-tab--active) .studio-tabs__search,
.studio-tabs:has(.studio-tab[data-studio-tab="comments"].studio-tab--active) .studio-tabs__search {
  display: none;
}

.studio-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--studio-muted);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}

.studio-tab:hover {
  color: var(--general-color);
}

.studio-tab--active {
  border-bottom-color: var(--studio-gold);
  color: var(--general-color);
}

.studio-tab__count {
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--studio-muted);
  background: var(--studio-surface-soft);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.studio-tab--active .studio-tab__count {
  color: #16110a;
  background: var(--studio-gold-strong);
}

.studio-panel[hidden] {
  display: none;
}

/* Catalogue sans bandeau de titre. La gouttiere de 56px separait la barre
   d'onglets d'un titre qui n'existe plus : elle laissait 100px de vide entre
   les onglets et la premiere vignette. La rangee de filtres reste calee a
   droite — c'est un groupe de commandes, pas un intitule ; l'oeil descend des
   onglets a la grille sans passer par elle. */
.studio-catalog--headless {
  margin-top: 10px;
}

.studio-catalog--headless .listing-heading {
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: 0;
  min-height: 0;
}

/* Onglet filtre : le libelle porte un nom propre, il merite d'etre lu comme
   tel plutot que comme un intitule de section. */
.studio-tab--filtered {
  font-weight: 800;
}

/* Panneau des avis. .mv-comments porte sa propre marge haute, calee pour vivre
   sous une grille ; dans un panneau il ouvre le contenu. */
.studio-panel .studio-comments {
  margin-top: 0;
}

/* L'entete interne du bloc ("Commentaires  0") repete l'onglet et son
   compteur, a deux centimetres l'un de l'autre. */
.studio-panel .studio-comments > .comments > div:first-child {
  display: none;
}

/* Panneau vide : sur les 17 studios il n'y a pas un seul commentaire, donc pour
   un invite l'onglet n'ouvre qu'une ligne de 24px. Elle devient une invitation
   posee, avec de quoi la voir. */
.studio-panel .studio-comments .notice {
  display: flex;
  padding: 26px 22px;
  border: 1px dashed var(--studio-border, rgba(255, 255, 255, .09));
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  color: var(--studio-muted, #a2a2a2);
  background: var(--studio-surface-soft, #1b1b1b);
  font-size: 14px;
  text-align: center;
}

.studio-panel .studio-comments .notice a,
html.light .studio-panel .studio-comments .notice a {
  color: var(--studio-gold, #d4a853);
  font-weight: 700;
}

/* Mobile de la reglette. Ces regles vivent ICI et non dans la requete 767px de
   l'entete, 500 lignes plus haut : a specificite egale c'est l'ordre source qui
   tranche, et .studio-tabs y perdait contre sa propre regle de base declaree
   plus bas. */
@media (max-width: 767px) {
  /* La reglette se casse en deux : les onglets gardent leur ligne, le champ
     prend la largeur en dessous. Cote a cote sur 390px il ne resterait ni un
     onglet lisible ni un champ utilisable. */
  .studio-tabs {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .studio-tabs__list {
    justify-content: flex-start;
  }

  /* La pastille garde sa taille de pastille : etiree sur toute la largeur,
     elle se lisait comme un bouton pleine largeur. */
  .studio-tabs__clear {
    margin-bottom: 0;
    align-self: flex-start;
  }

  .studio-tabs__search {
    width: 100%;
    margin-bottom: 0;
  }

  /* Cibles tactiles. 16px sur le champ : en dessous, iOS zoome la page au
     focus et le visiteur se retrouve decadre. */
  .studio-tabs__search input {
    padding: 13px 0;
    font-size: 16px;
  }

  .studio-tabs__search button {
    min-height: 38px;
    padding-inline: 18px;
  }
}

/* Rail "le meilleur de ce studio". La grille est triee par date : sans lui on
   tombe sur la derniere mise en ligne, jamais sur celle qui marche. */
.studio-best {
  margin: 0 0 26px;
}

.studio-best__title {
  margin: 0 0 12px;
  color: var(--general-color);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.studio-best__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.studio-best__item {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-best__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--studio-border);
  border-radius: 11px;
  background: #090909;
}

.studio-best__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.studio-best__item:hover .studio-best__thumb img {
  transform: scale(1.05);
}

.studio-best__duration {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  color: #f2f2f2;
  background: rgba(10, 10, 10, .78);
  font-size: 10px;
  font-weight: 700;
}

.studio-best__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--general-color);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-best__item:hover .studio-best__name {
  color: var(--studio-gold);
}

.studio-best__views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--studio-muted);
  font-size: 11px;
}

.studio-best__views svg {
  width: 12px;
  height: 12px;
}

/* Casting en grille : un panneau a toute la largeur, pas besoin d'un rail. */
.studio-strip__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}

/* Contenu tiers, relegue en fin de page. Les webcams tenaient 1133px entre le
   catalogue et le casting du studio ; ici elles ferment la page et se limitent
   a une rangee. La regle est scopee : la grille reste entiere ailleurs. */
.studio-aside {
  display: block;
  margin-top: 34px;
  padding-top: 6px;
  border-top: 1px solid var(--studio-border);
}

.studio-aside .am-live-chat__list > li:nth-child(n+5) {
  display: none;
}

@media (max-width: 1280px) {
  .studio-best__rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .studio-strip__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .studio-best__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-strip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .studio-best__rail {
    display: flex;
    overflow-x: auto;
    margin: 0 -12px;
    padding: 0 12px 6px;
    scroll-snap-type: x proximity;
  }

  .studio-best__item {
    flex: 0 0 208px;
    scroll-snap-align: start;
  }

  .studio-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Sur mobile la grille des cams est deja un rail horizontal :
     on plafonne le nombre de vignettes, pas les colonnes. */
  .studio-aside .am-live-chat__list > li:nth-child(n+7) {
    display: none;
  }
}

/* Commentaires du studio : on reutilise l'enveloppe .mv-comments de la page
   modele (seule portee ou gold.min.css style .comments), en rendant le
   retrait horizontal a la page studio, qui n'a pas les 32px du gabarit mv. */
.studio-comments {
  padding: 0;
  margin-top: 34px;
  padding-top: 6px;
  border-top: 1px solid var(--studio-border, rgba(255, 255, 255, .09));
}

/* ============================================================
   Createurs et studios FapHouse (liens sortants affilies)
   ============================================================ */
.studio-partners {
  --studio-gold: #d4a853;
  --studio-border: rgba(255, 255, 255, .09);
  --studio-surface: #141414;
  --studio-surface-soft: #1b1b1b;
  --studio-muted: #a2a2a2;
  margin: clamp(34px, 5vw, 56px) 0 0;
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--studio-border);
}

html.light .studio-partners {
  --studio-gold: #b8860b;
  --studio-border: rgba(17, 17, 17, .1);
  --studio-surface: #fff;
  --studio-surface-soft: #f8f6f1;
  --studio-muted: #696969;
}

.studio-partners[hidden] {
  display: none;
}

.studio-partners__head {
  margin: 0 0 18px;
}

.studio-partners__title {
  margin: 0 0 5px;
  color: var(--general-color);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 800;
  letter-spacing: -.025em;
}

/* La mention de sortie fait partie du bloc, pas d'une note de bas de page. */
.studio-partners__intro {
  max-width: 70ch;
  color: var(--studio-muted);
  font-size: 13px;
  line-height: 1.5;
}

.studio-partners__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}

/* Meme composition que les cartes studio de l'annuaire, a plus petite echelle :
   bande de vignettes voilee, avatar a cheval, nom centre, faits, appel a
   l'action. Ce sont des fiches externes, elles restent secondaires. */
.studio-partner {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--studio-border);
  border-radius: 18px;
  flex-direction: column;
  align-self: start;
  background: var(--studio-surface);
  transition: border-color .2s ease, transform .2s ease;
}

.studio-partner:hover {
  border-color: rgba(212, 168, 83, .38);
  transform: translateY(-2px);
}

.studio-partner__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 3;
  background: #090909;
}

/* Voile calibre pour CETTE bande. La recette des cartes studio (fond plat a
   .26 + degrade a .6 + halo a .8) etait reglee pour 130px de haut ; sur 82px
   les trois couches se superposent presque partout et noircissent tout.
   Ici : un fond leger, et un halo etroit uniquement sous l'avatar. */
.studio-partner__media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 22% 90% at 50% 100%, rgba(0, 0, 0, .62), transparent 76%),
    rgba(0, 0, 0, .18);
  content: "";
  pointer-events: none;
}

.studio-partner__mosaic {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  background: #090909;
}

.studio-partner__mosaic--2 {
  grid-template-columns: repeat(2, 1fr);
}

.studio-partner__mosaic--1 {
  grid-template-columns: 1fr;
}

.studio-partner__tile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-partner__tile[hidden] {
  display: none;
}

/* Createur ou studio : le visiteur doit savoir sur quoi il clique avant de
   quitter le site. */
.studio-partner__kind {
  position: absolute;
  z-index: 2;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #f2f2f2;
  background: rgba(10, 10, 10, .74);
  backdrop-filter: blur(4px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-partner__body {
  position: relative;
  z-index: 2;
  display: flex;
  padding: 0 16px 16px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

/* Avatar a cheval, comme le logo des cartes studio. La taille est fixe : les
   avatars FapHouse sont quasi carres, on ne leur impose pas de ratio. */
.studio-partner__crest {
  display: grid;
  overflow: hidden;
  width: 64px;
  height: 64px;
  margin: -42px 0 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  place-items: center;
  background: #0d0d0d;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

html.light .studio-partner__crest {
  border-color: rgba(17, 17, 17, .12);
  box-shadow: 0 10px 26px rgba(40, 30, 10, .2);
}

.studio-partner__crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-partner__name {
  overflow: hidden;
  max-width: 100%;
  color: var(--general-color);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-partner:hover .studio-partner__name {
  color: var(--studio-gold);
}

.studio-partner__facts {
  color: var(--studio-muted);
  font-size: 12px;
}

/* Faux bouton : la carte entiere est le lien, on ne peut pas y imbriquer un
   second element interactif. Meme bronze que "Visit studio" — c'est le meme
   role, une sortie commerciale, et l'or est pris par les pastilles de tri. */
.studio-partner__cta {
  display: inline-flex;
  min-height: 36px;
  margin-top: 6px;
  padding: 0 16px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #7d4f22;
  font-size: 12px;
  font-weight: 800;
  transition: background .2s ease;
}

.studio-partner:hover .studio-partner__cta {
  background: #96602c;
}

/* Doublure manuelle de l'auto-chargement : elle ne sert qu'aux navigateurs
   sans IntersectionObserver et aux lecteurs qui preferent cliquer, mais elle
   est bien visible en fin de grille — sans style elle sortait en bouton natif
   du navigateur, blanc et colle a gauche. */
.studio-partners__more {
  display: flex;
  margin-top: 22px;
  justify-content: center;
}

.studio-partners__more-button {
  display: inline-flex;
  min-height: 44px;
  padding: 0 26px;
  border: 1px solid var(--studio-border);
  border-radius: 13px;
  align-items: center;
  justify-content: center;
  color: var(--general-color);
  background: var(--studio-surface-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  transition: border-color .2s ease, color .2s ease;
}

.studio-partners__more-button:hover {
  border-color: rgba(212, 168, 83, .4);
  color: var(--studio-gold);
}

/* Pendant le chargement d'un lot, le bouton ne doit pas paraitre inerte. */
.studio-partners.is-loading .studio-partners__more-button {
  opacity: .55;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .studio-partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .studio-partners__grid {
    grid-template-columns: 1fr;
  }

  .studio-partner__media {
    aspect-ratio: 5 / 2;
  }
}