/* ============================================================================
 * Media kit AGENCE — direction « Éditorial » (alignée sur les kits créateurs,
 * 2026-10-05). Chargé APRÈS kit-editorial.css : on réutilise ses polices, ses
 * jetons (thèmes), la page 16:9 (.pg), la page marques (.p-brands) et la page
 * contact (.p-contact). Ici, seulement les pages propres au deck agence :
 * couverture-mosaïque, l'agence, une page par créateur, casting, concepts.
 * ========================================================================== */

/* ── Couverture : texte à gauche, mosaïque du roster à droite ─────────────── */
.p-agcover { display: grid; grid-template-columns: 1fr 54%; }
.p-agcover .txt { padding: 4.2cqw 4.6cqw 4cqw; display: flex; flex-direction: column; min-width: 0; }
.p-agcover .name { font-family: var(--serif); font-weight: 400; font-size: 10.4cqw; line-height: .86; letter-spacing: -.02em; margin-top: auto; }
.p-agcover .name i { display: block; padding-left: 4.5cqw; color: var(--accent); }
.p-agcover .meta { margin-top: 2cqw; font-size: 1.15cqw; color: var(--grey); letter-spacing: .02em; }
.p-agcover .line { margin-top: 2.4cqw; font-family: var(--serif); font-size: 1.62cqw; line-height: 1.38; max-width: 30ch; }
.mosaic { display: flex; flex-direction: column; gap: 3px; background: var(--paper); height: 100%; }
.mosaic .r { flex: 1; display: flex; gap: 3px; min-height: 0; }
.mosaic .ph { flex: 1; min-width: 0; background-position: 50% 28%; }

/* ── L'agence : titre et texte à gauche, piliers à droite, chiffres en pied ─ */
.p-intro { display: grid; grid-template-columns: 1fr 38%; }
.p-intro .l { padding: 4.4cqw 3.6cqw 4cqw 4.6cqw; display: flex; flex-direction: column; min-width: 0; }
.p-intro .r { padding: 4.4cqw 4.6cqw 4cqw 3.4cqw; border-left: 1px solid var(--soft); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.p-intro h2 { font-family: var(--serif); font-weight: 400; font-size: 6.2cqw; line-height: .92; letter-spacing: -.015em; margin-top: 2cqw; }
.p-intro h2 i { display: block; padding-left: 3.2cqw; color: var(--accent); }
.p-intro .lead { margin-top: 2.4cqw; font-family: var(--serif); font-size: 1.62cqw; line-height: 1.38; max-width: 40ch; }
.p-intro .figs { margin-top: auto; padding-top: 2.4cqw; display: flex; gap: 3.4cqw; }
.p-intro .figs div { font-size: .95cqw; color: var(--grey); line-height: 1.35; max-width: 15ch; }
.p-intro .figs b { display: block; font-family: var(--serif); font-weight: 400; font-size: 3.4cqw; color: var(--accent); line-height: 1; margin-bottom: .5cqw; white-space: nowrap; }
.pillar { padding: 1.8cqw 0; }
.pillar + .pillar { border-top: 1px solid var(--soft); }
.pillar h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.3cqw; line-height: 1.1; }
.pillar p { margin-top: .7cqw; font-size: 1.12cqw; line-height: 1.55; color: var(--grey); max-width: 38ch; }

/* ── Une page par créateur : portrait à gauche, fiche à droite ────────────── */
.p-talent { display: grid; grid-template-columns: 40% 1fr; }
.p-talent .ph { height: 100%; background-position: 50% 30%; }
.p-talent .txt { padding: 4.2cqw 4.6cqw 4cqw 4.4cqw; display: flex; flex-direction: column; min-width: 0; }
.p-talent .name { font-family: var(--serif); font-weight: 400; font-size: 7.4cqw; line-height: .88; letter-spacing: -.02em; margin-top: 3cqw; }
.p-talent .name i { display: block; padding-left: 3.4cqw; color: var(--accent); }
.p-talent .meta { margin-top: 1.6cqw; font-size: 1.15cqw; color: var(--grey); letter-spacing: .02em; }
.p-talent .meta a { color: inherit; text-decoration: none; }
.p-talent .bio { margin-top: 2cqw; max-width: 44ch; display: grid; gap: .8cqw; }
.p-talent .bio p { font-family: var(--serif); font-size: 1.5cqw; line-height: 1.4; }
.p-talent .figs { margin-top: auto; padding-top: 2.4cqw; display: flex; gap: 3.2cqw; }
.p-talent .figs div { font-size: .95cqw; color: var(--grey); line-height: 1.35; max-width: 14ch; }
.p-talent .figs b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.8cqw; color: var(--ink); line-height: 1; margin-bottom: .45cqw; white-space: nowrap; }
.p-talent .more { margin-top: 2cqw; padding-top: 1.2cqw; border-top: 1px solid var(--soft); font-size: .95cqw; letter-spacing: .02em; }
.p-talent .more a { color: var(--grey); text-decoration: none; }
.p-talent .more a:hover { color: var(--ink); }

/* ── Casting : qui fait quoi (créateurs en colonnes, univers en lignes) ───── */
.p-casting { padding: 4.4cqw 4.6cqw 3.6cqw; display: grid; grid-template-rows: auto 1fr; }
.p-casting header { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin-bottom: 2.4cqw; }
.p-casting header h3 { font-family: var(--serif); font-weight: 400; font-size: 4.6cqw; line-height: 1; }
.p-casting header h3 i { color: var(--grey); }
.p-casting .wrap { min-height: 0; overflow: hidden; }
.ctable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ctable th, .ctable td { padding: .95cqw .6cqw; border-top: 1px solid var(--soft); text-align: center; vertical-align: middle; }
.ctable thead th { border-top: 0; padding-bottom: 1.2cqw; vertical-align: bottom; font-weight: 400; }
.ctable th[scope="row"] { text-align: left; font-weight: 400; font-size: 1.22cqw; color: var(--ink); padding-left: 0; width: 22%; }
.ctable .who { display: flex; flex-direction: column; align-items: center; gap: .7cqw; }
.ctable .who .ph { width: 4.4cqw; aspect-ratio: 3 / 4; }
.ctable .who b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.7cqw; line-height: 1; }
.ctable .yes { display: inline-block; width: 1.5cqw; height: 1.5cqw; color: var(--accent); vertical-align: middle; }
.ctable .txt { font-size: 1cqw; color: var(--grey); line-height: 1.3; }

/* ── Événements et concepts : texte à gauche, photos à droite ─────────────── */
.p-concept { display: grid; grid-template-columns: 1fr 50%; }
.p-concept.no-media { grid-template-columns: 1fr; }
.p-concept.no-media .txt { max-width: 66%; }
.p-concept .txt { padding: 4.4cqw 4cqw 4cqw 4.6cqw; display: flex; flex-direction: column; min-width: 0; }
.p-concept h2 { font-family: var(--serif); font-weight: 400; font-size: 5.4cqw; line-height: .95; letter-spacing: -.015em; margin-top: 2cqw; text-wrap: balance; }
.p-concept .by { margin-top: 1.2cqw; font-size: 1.15cqw; color: var(--grey); text-decoration: none; width: fit-content; }
.p-concept .body { margin-top: 2cqw; display: grid; gap: .9cqw; max-width: 44ch; }
.p-concept .body p { font-family: var(--serif); font-size: 1.5cqw; line-height: 1.4; }
.p-concept ul { list-style: none; margin: 2cqw 0 0; padding: 0; max-width: 46ch; }
.p-concept li { font-size: 1.15cqw; padding: .8cqw 0; border-top: 1px solid var(--soft); }
.p-concept .with { margin-top: auto; padding-top: 2cqw; font-size: 1cqw; color: var(--grey); line-height: 1.5; }
.p-concept .photos { display: grid; gap: 3px; height: 100%; background: var(--paper); }
.p-concept .photos .ph { min-height: 0; background-position: 50% 40%; }
.p-concept .photos.n2 { grid-template-columns: 1fr 1fr; }
.p-concept .photos.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.p-concept .photos.n3 .ph:first-child { grid-row: span 2; }
.p-concept .photos.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* ── Marques : les crédits occupent toute la page, posés en bas comme un générique ─ */
.p-brands.one.ag .l { max-width: none; }
.p-brands.ag .credits { margin-top: auto; font-size: 6.4cqw; line-height: 1.12; letter-spacing: -.01em; }
.p-brands.ag .credits.long { font-size: 4.8cqw; }

/* ── Contact sans photo d'agence : une seule colonne ──────────────────────── */
.p-contact.one { grid-template-columns: 1fr; }
.p-contact.one .txt { max-width: 62%; }

/* ── Téléphone : pages empilées, tailles fixes lisibles ───────────────────── */
@media screen and (max-width: 760px) {
  .p-agcover, .p-intro, .p-talent, .p-concept { grid-template-columns: 1fr; }
  .p-agcover .txt { padding: 28px 22px 30px; }
  .p-agcover .name { font-size: 68px; margin-top: 22px; }
  .p-agcover .name i { padding-left: 30px; }
  .p-agcover .meta { font-size: 14px; margin-top: 14px; }
  .p-agcover .line { font-size: 19px; margin-top: 16px; }
  .p-agcover .mosaic { order: -1; height: auto; aspect-ratio: 4 / 5; }
  .p-intro .l, .p-intro .r { padding: 28px 22px; }
  .p-intro .r { border-left: 0; border-top: 1px solid var(--soft); }
  .p-intro h2 { font-size: 46px; margin-top: 12px; }
  .p-intro h2 i { padding-left: 22px; }
  .p-intro .lead { font-size: 19px; margin-top: 16px; }
  .p-intro .figs { margin-top: 26px; padding-top: 0; flex-wrap: wrap; gap: 18px 26px; }
  .p-intro .figs div { font-size: 13px; }
  .p-intro .figs b { font-size: 34px; margin-bottom: 4px; }
  .pillar { padding: 16px 0; }
  .pillar h3 { font-size: 24px; }
  .pillar p { font-size: 14px; margin-top: 6px; }
  .p-talent .ph { height: auto; aspect-ratio: 4 / 5; }
  .p-talent .txt { padding: 26px 22px 30px; }
  .p-talent .name { font-size: 54px; margin-top: 14px; }
  .p-talent .name i { padding-left: 24px; }
  .p-talent .meta { font-size: 14px; margin-top: 12px; }
  .p-talent .bio { margin-top: 16px; gap: 10px; }
  .p-talent .bio p { font-size: 18px; }
  .p-talent .figs { margin-top: 24px; padding-top: 0; flex-wrap: wrap; gap: 18px 26px; }
  .p-talent .figs div { font-size: 13px; }
  .p-talent .figs b { font-size: 30px; margin-bottom: 4px; }
  .p-talent .more { font-size: 13px; margin-top: 22px; padding-top: 12px; }
  .p-casting { padding: 28px 0 22px; }
  .p-casting header { flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 22px 18px; }
  .p-casting header h3 { font-size: 40px; }
  .p-casting .wrap { overflow-x: auto; padding: 0 22px; }
  .ctable { min-width: 520px; }
  .ctable th, .ctable td { padding: 9px 6px; }
  .ctable th[scope="row"] { font-size: 14px; width: 130px; }
  .ctable .who .ph { width: 44px; }
  .ctable .who b { font-size: 18px; }
  .ctable .yes { width: 16px; height: 16px; }
  .ctable .txt { font-size: 12px; }
  .p-concept .txt { padding: 28px 22px 30px; }
  .p-concept.no-media .txt { max-width: none; }
  .p-concept h2 { font-size: 42px; margin-top: 12px; }
  .p-concept .by { font-size: 14px; margin-top: 10px; }
  .p-concept .body { margin-top: 16px; gap: 10px; }
  .p-concept .body p { font-size: 18px; }
  .p-concept ul { margin-top: 18px; }
  .p-concept li { font-size: 15px; padding: 10px 0; }
  .p-concept .with { font-size: 13px; padding-top: 18px; }
  .p-concept .photos { height: auto; aspect-ratio: 4 / 3; }
  .p-contact.one .txt { max-width: none; }
  .p-brands.ag .credits, .p-brands.ag .credits.long { font-size: 34px; margin-top: 22px; }
}

/* ── Aperçu de partage (?og=1) : couverture du deck en carte 1200×630 ─────────
 * Base commune dans kit-editorial.css (.og-card) ; ici, le texte à gauche et la
 * mosaïque des portraits à droite, comme sur la couverture. */
.og-card.og-agence { grid-template-columns: 1fr 640px; }
.og-agence .mosaic { height: 630px; }