/* ============================================================================
 * Media kit créatrice — direction « Éditorial » (choisie par Marc, 2026-10-05).
 * Esprit magazine de mode : page blanche, encre noire, grand serif, la photo
 * posée comme un tirage, chiffres composés comme dans un article.
 *
 * Une section = une PAGE 16:9 (comme la plaquette PDF). Les tailles sont en cqw
 * (1 cqw = 1 % de la largeur de la page) → la page garde ses proportions à
 * toutes les largeurs d'écran ET à l'impression (@page 16:9). Sur téléphone,
 * les pages s'empilent en colonne avec des tailles fixes (lisibles).
 * Le deck agence s'appuie aussi sur ce fichier (+ agence-editorial.css).
 * ========================================================================== */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("instrument-serif-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("instrument-sans-normal.woff2") format("woff2"); }

/* Mise en page : pages 16:9 empilées sur un fond neutre (comme un dossier ouvert). */
:root {
  --paper: #fcfcfb;   /* la page */
  --ink: #121212;     /* texte */
  --grey: #6e6e6b;    /* légendes */
  --soft: #e4e4e0;    /* filets */
  --lead: #b9b9b4;    /* points de conduite */
  --accent: var(--ink); /* nom en italique, grands chiffres (couleur du thème) */
  --canvas: #e9e9e6;  /* fond autour des pages (écran seulement) */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}
/* Thèmes choisis dans l'app (mediakit.theme) : même mise en page, autre encre / papier. */
:root[data-mk-theme="bordeaux"] { --accent: #4a0a0e; }
:root[data-mk-theme="sauge"] { --accent: #2f4a36; --paper: #fbfcf9; --soft: #e1e6dc; }
:root[data-mk-theme="ivoire"] { --paper: #f7f3ec; --soft: #e2dccf; --lead: #b5ac9c; --canvas: #e6e0d4; }
:root[data-mk-theme="minuit"] { --paper: #0d0d0d; --ink: #f1f1ee; --grey: #9a9a95; --soft: #272725; --lead: #4b4b47; --canvas: #000; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.kit { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 28px 24px 110px; }

/* ── La page ──────────────────────────────────────────────────────────────── */
.pg {
  position: relative; width: 100%; max-width: 1480px; aspect-ratio: 16 / 9; overflow: hidden;
  container-type: inline-size; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 50px -24px rgba(0,0,0,.35);
}
.serif { font-family: var(--serif); font-weight: 400; }
.kicker { font-size: .86cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin: 0; }
.ph { background-repeat: no-repeat; background-size: cover; background-position: 50% 32%; background-color: var(--soft); }
.tnum { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, p { margin: 0; }

/* ── 1 · Couverture ───────────────────────────────────────────────────────── */
.p-cover { display: grid; grid-template-columns: 46% 1fr; }
.p-cover .ph { height: 100%; background-position: 50% 35%; }
.p-cover .txt { padding: 4.2cqw 5cqw 4cqw 4.6cqw; display: flex; flex-direction: column; min-width: 0; }
.p-cover .name { font-family: var(--serif); font-weight: 400; font-size: 9.6cqw; line-height: .86; letter-spacing: -.02em; margin-top: auto; text-wrap: balance; }
.p-cover .name i { display: block; padding-left: 4.5cqw; color: var(--accent); }
.p-cover .meta { margin-top: 1.8cqw; font-size: 1.15cqw; color: var(--grey); letter-spacing: .02em; }
.p-cover .meta a { color: inherit; text-decoration: none; }
.p-cover .bio { margin-top: 2.2cqw; max-width: 36ch; display: grid; gap: .9cqw; }
.p-cover .bio p { font-family: var(--serif); font-size: 1.62cqw; line-height: 1.38; }
.p-cover .figs { margin-top: auto; padding-top: 2.4cqw; display: flex; gap: 3.2cqw; }
.p-cover .figs div { font-size: .95cqw; color: var(--grey); line-height: 1.35; max-width: 14ch; }
.p-cover .figs b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.6cqw; color: var(--ink); line-height: 1; margin-bottom: .45cqw; white-space: nowrap; }

/* ── 2 · Plateformes ──────────────────────────────────────────────────────── */
.p-plat { display: grid; grid-template-columns: 1fr 1fr 22%; }
.p-plat.solo { grid-template-columns: 1fr 34%; }
.p-plat .col { padding: 4.4cqw 3.6cqw 4cqw 4.6cqw; display: flex; flex-direction: column; min-width: 0; }
.p-plat .col + .col { padding-left: 3.2cqw; }
.p-plat h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.4cqw; }
.p-plat .big { font-family: var(--serif); font-size: 11.5cqw; line-height: .8; letter-spacing: -.03em; margin-top: auto; color: var(--accent); white-space: nowrap; }
.p-plat .big small { font-size: .32em; letter-spacing: 0; margin-left: .4cqw; }
.p-plat .under { font-size: 1.05cqw; color: var(--grey); margin-top: 1cqw; }
.p-plat dl { margin: 2.4cqw 0 0; display: grid; gap: 1cqw; }
.p-plat dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; font-size: 1.1cqw; border-top: 1px solid var(--soft); padding-top: 1cqw; }
.p-plat dt { color: var(--grey); }
.p-plat dd { margin: 0; font-family: var(--serif); font-size: 1.9cqw; white-space: nowrap; }
.p-plat .ph { background-size: 330%; background-position: 46% 16%; }
.p-plat.solo .ph { background-size: 210%; background-position: 46% 20%; }
.p-plat .intro { font-family: var(--serif); font-size: 1.45cqw; line-height: 1.4; max-width: 40ch; margin-top: 1.4cqw; color: var(--ink); }

/* ── 3 · Audience ─────────────────────────────────────────────────────────── */
.p-aud { padding: 4.4cqw 4.6cqw 4cqw; display: grid; grid-template-rows: auto 1fr; }
.p-aud header { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin-bottom: 3.2cqw; }
.p-aud header h3 { font-family: var(--serif); font-weight: 400; font-size: 4.6cqw; line-height: 1; }
.p-aud header h3 i { color: var(--grey); }
.p-aud .cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 4.4cqw; align-items: start; }
.p-aud h4 { margin: 0 0 1cqw; font-size: .86cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); font-weight: 500; }
.p-aud .gap { margin-top: 3.4cqw; }
.row { display: flex; align-items: baseline; gap: .8cqw; font-size: 1.5cqw; padding: .8cqw 0; }
.row .lead { flex: 1; border-bottom: 1px dotted var(--lead); transform: translateY(-.35cqw); min-width: 1cqw; }
.row b { font-family: var(--serif); font-weight: 400; font-size: 2.4cqw; white-space: nowrap; }
.split { display: flex; flex-direction: column; gap: 2.4cqw; }
.split div { font-size: 1.3cqw; color: var(--grey); }
.split b { display: block; font-family: var(--serif); font-weight: 400; font-size: 8cqw; line-height: .9; color: var(--accent); }

/* ── 4 · Captures ─────────────────────────────────────────────────────────── */
.p-shots { padding: 4.4cqw 4.6cqw 3.6cqw; display: grid; grid-template-rows: auto 1fr; }
.p-shots header { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin-bottom: 2.8cqw; }
.p-shots header h3 { font-family: var(--serif); font-weight: 400; font-size: 4.6cqw; line-height: 1; }
.p-shots header h3 i { color: var(--grey); }
.p-shots .prints { display: flex; justify-content: center; gap: 2.2cqw; min-height: 0; }
.p-shots figure { margin: 0; display: flex; flex-direction: column; gap: 1cqw; min-width: 0; height: 100%; flex: 0 1 auto; }
.p-shots .frame { flex: 1; min-height: 0; aspect-ratio: 9 / 16; display: grid; place-items: start center; overflow: hidden; }
.p-shots .frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; box-shadow: 0 0 0 1px var(--soft); }
.p-shots figcaption { font-size: .9cqw; color: var(--grey); letter-spacing: .02em; }

/* ── 5 · Marques et tarifs ────────────────────────────────────────────────── */
.p-brands { display: grid; grid-template-columns: 1.25fr 1fr; }
.p-brands.one { grid-template-columns: 1fr; }
.p-brands.one .l { max-width: 62%; }
.p-brands .l { padding: 4.4cqw 3.4cqw 4cqw 4.6cqw; display: flex; flex-direction: column; min-width: 0; }
.p-brands .r { padding: 4.4cqw 4.6cqw 4cqw 3.4cqw; display: flex; flex-direction: column; border-left: 1px solid var(--soft); min-width: 0; }
.p-brands h3 { font-family: var(--serif); font-weight: 400; font-size: 3.6cqw; line-height: 1.02; margin-top: 1.2cqw; text-wrap: balance; }
.p-brands .credits { font-family: var(--serif); font-size: 3.3cqw; line-height: 1.32; margin-top: 2.6cqw; }
.p-brands .credits span:nth-child(odd) { font-style: italic; }
.p-brands .credits span { white-space: nowrap; } /* « So Shape » ne se coupe pas en fin de ligne */
.p-brands .credits span:not(:last-child)::after { content: " · "; color: var(--lead); font-style: normal; }
.p-brands .credits.long { font-size: 2.5cqw; }
.p-brands .rates { margin-top: 1.4cqw; }
.rate { display: flex; align-items: baseline; gap: .8cqw; font-size: 1.5cqw; padding: 1.3cqw 0; }
.rate .lead { flex: 1; border-bottom: 1px dotted var(--lead); transform: translateY(-.35cqw); min-width: 1cqw; }
.rate b { font-family: var(--serif); font-weight: 400; font-size: 2.8cqw; white-space: nowrap; }
.rate b small { font-family: var(--sans); font-size: .45em; color: var(--grey); margin-left: .3cqw; }
.rate-detail { font-size: 1cqw; color: var(--grey); margin: -0.6cqw 0 .4cqw; }
.p-brands .note { margin-top: auto; padding-top: 1.6cqw; font-size: 1.05cqw; color: var(--grey); line-height: 1.5; }

/* ── 6 · Contact ──────────────────────────────────────────────────────────── */
.p-contact { display: grid; grid-template-columns: 1fr 46%; }
.p-contact .txt { padding: 4.2cqw 4.6cqw 4cqw; display: flex; flex-direction: column; min-width: 0; }
.p-contact h2 { font-family: var(--serif); font-weight: 400; font-size: 8.4cqw; line-height: .9; letter-spacing: -.02em; margin-top: auto; }
.p-contact h2 i { display: block; padding-left: 4cqw; color: var(--accent); }
.p-contact .ways { margin-top: 3.4cqw; display: grid; gap: 1.6cqw; }
.p-contact .ways div { display: grid; gap: .3cqw; }
.p-contact .ways span { font-size: .86cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); }
.p-contact .ways a { font-family: var(--serif); font-size: 2.3cqw; color: var(--ink); text-decoration: none; width: fit-content; }
.p-contact .ways a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.p-contact .foot { margin-top: auto; padding-top: 2.4cqw; display: flex; justify-content: space-between; gap: 2cqw; font-size: .9cqw; color: var(--grey); }
.p-contact .ph { height: 100%; background-position: 50% 30%; }

/* ── Bouton PDF + barre de lecture (écran seulement) ──────────────────────── */
.pdf-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 50; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); text-decoration: none; padding: .95rem 1.35rem; border-radius: 999px; cursor: pointer;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.55); transition: transform .15s ease;
}
.pdf-btn:hover { transform: translateY(-2px); }
.pdf-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pdf-btn svg { width: 15px; height: 15px; }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--ink); z-index: 60; transition: width .12s linear; }
/* Sélecteur de langue FR / EN (pages /en/ pour les marques étrangères), en miroir du bouton PDF. */
.lang-switch {
  position: fixed; left: 22px; bottom: 22px; z-index: 50; display: inline-flex; gap: 2px; padding: 4px;
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  background: var(--paper); border: 1px solid var(--soft); border-radius: 999px;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.45);
}
.lang-switch a { color: var(--grey); text-decoration: none; padding: .66rem .95rem; border-radius: 999px; line-height: 1; transition: color .15s ease; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.lang-switch a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Téléphone : pages empilées, tailles fixes lisibles ───────────────────── */
@media screen and (max-width: 760px) {
  .kit { gap: 14px; padding: 0 0 96px; }
  .pg { aspect-ratio: auto; max-width: none; box-shadow: none; container-type: normal; }
  .kicker, .p-aud h4, .p-contact .ways span { font-size: 11px; }
  .p-cover, .p-plat, .p-plat.solo, .p-brands, .p-contact { grid-template-columns: 1fr; }
  .p-cover .ph { height: auto; aspect-ratio: 4 / 5; }
  .p-cover .txt { padding: 26px 22px 30px; gap: 0; }
  .p-cover .name { font-size: 64px; margin-top: 18px; }
  .p-cover .name i { padding-left: 30px; }
  .p-cover .meta { font-size: 14px; margin-top: 14px; }
  .p-cover .bio { margin-top: 18px; gap: 10px; }
  .p-cover .bio p { font-size: 19px; }
  .p-cover .figs { margin-top: 26px; padding-top: 0; flex-wrap: wrap; gap: 18px 26px; }
  .p-cover .figs div { font-size: 13px; }
  .p-cover .figs b { font-size: 30px; margin-bottom: 4px; }
  .p-plat .col, .p-plat .col + .col { padding: 28px 22px 26px; }
  .p-plat .col + .col { border-top: 1px solid var(--soft); }
  .p-plat h3 { font-size: 26px; }
  .p-plat .big { font-size: 96px; margin-top: 20px; }
  .p-plat .big small { margin-left: 4px; }
  .p-plat .under { font-size: 14px; margin-top: 8px; }
  .p-plat dl { margin-top: 20px; gap: 12px; }
  .p-plat dl div { font-size: 14px; padding-top: 12px; }
  .p-plat dd { font-size: 22px; }
  .p-plat .intro { font-size: 18px; margin-top: 12px; }
  .p-plat .ph { display: none; }
  .p-aud, .p-shots { padding: 28px 22px; }
  .p-aud header, .p-shots header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .p-aud header h3, .p-shots header h3 { font-size: 40px; }
  .p-aud .cols { grid-auto-flow: row; gap: 26px; }
  .p-aud .gap { margin-top: 22px; }
  .p-aud h4 { margin-bottom: 8px; }
  .row { font-size: 16px; padding: 9px 0; gap: 8px; }
  .row .lead { transform: translateY(-4px); }
  .row b { font-size: 24px; }
  .split { flex-direction: row; gap: 26px; }
  .split div { font-size: 14px; }
  .split b { font-size: 64px; }
  .p-shots .prints { justify-content: flex-start; overflow-x: auto; gap: 12px; padding-bottom: 6px; }
  .p-shots figure { height: auto; flex: 0 0 46%; gap: 8px; }
  .p-shots .frame { flex: none; }
  .p-shots figcaption { font-size: 12px; }
  .p-brands .l, .p-brands .r { padding: 28px 22px; }
  .p-brands.one .l { max-width: none; }
  .p-brands .r { border-left: 0; border-top: 1px solid var(--soft); }
  .p-brands h3 { font-size: 34px; margin-top: 10px; }
  .p-brands .credits, .p-brands .credits.long { font-size: 28px; margin-top: 18px; }
  .rate { font-size: 16px; padding: 12px 0; gap: 8px; }
  .rate .lead { transform: translateY(-4px); }
  .rate b { font-size: 26px; }
  .rate-detail { font-size: 13px; margin: -6px 0 4px; }
  .p-brands .note { font-size: 13px; padding-top: 16px; }
  .p-contact .ph { order: -1; height: auto; aspect-ratio: 4 / 5; }
  .p-contact .txt { padding: 28px 22px 30px; }
  .p-contact h2 { font-size: 60px; margin-top: 0; }
  .p-contact h2 i { padding-left: 26px; }
  .p-contact .ways { margin-top: 24px; gap: 16px; }
  .p-contact .ways a { font-size: 24px; }
  .p-contact .foot { flex-direction: column; font-size: 12px; padding-top: 26px; margin-top: 26px; gap: 4px; }
  .pdf-btn { right: 14px; bottom: 14px; padding: .72rem 1.05rem; font-size: .7rem; letter-spacing: .1em; }
  .lang-switch { left: 14px; bottom: 14px; font-size: .68rem; }
  .lang-switch a { padding: .6rem .8rem; }
}

/* ── PDF : une page = une diapo 16:9 paysage (rendu par Chrome en CI) ─────── */
@media print {
  @page { size: 338.67mm 190.5mm; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: var(--paper); margin: 0; }
  .kit { display: block; padding: 0; }
  .pg { width: 338.67mm; height: 190.5mm; max-width: none; aspect-ratio: auto; box-shadow: none; break-after: page; break-inside: avoid; }
  .pg:last-child { break-after: auto; }
  .pdf-btn, .progress, .lang-switch { display: none !important; }
}

/* ── Aperçu de partage (?og=1) ────────────────────────────────────────────────
 * Carte 1200×630 que WhatsApp, iMessage, LinkedIn… affichent quand on partage le
 * lien. C'est la couverture resserrée : la photo, le nom, trois chiffres. Capturée
 * en JPEG par la CI (_render_pdfs.py), déclarée en og:image par le shell. */
html.og, html.og body { width: 1200px; height: 630px; overflow: hidden; background: var(--paper); }
html.og .kit { display: block; padding: 0; }
html.og .pdf-btn, html.og .progress, html.og .lang-switch { display: none !important; }
.og-card { width: 1200px; height: 630px; display: grid; grid-template-columns: 528px 1fr; background: var(--paper); color: var(--ink); overflow: hidden; }
.og-card .ph { height: 100%; background-position: 50% 30%; }
.og-card .txt { padding: 54px 62px 50px 60px; display: flex; flex-direction: column; min-width: 0; }
.og-card .kicker { font-size: 14px; letter-spacing: .24em; }
.og-card .name { font-family: var(--serif); font-weight: 400; font-size: 132px; line-height: .86; letter-spacing: -.02em; margin-top: auto; white-space: nowrap; }
.og-card .name i { display: block; padding-left: .47em; color: var(--accent); }
.og-card .meta { margin-top: 24px; font-size: 20px; color: var(--grey); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-card .figs { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--soft); display: flex; gap: 40px; }
.og-card .figs div { font-size: 15px; color: var(--grey); line-height: 1.3; max-width: 15ch; }
.og-card .figs b { display: block; font-family: var(--serif); font-weight: 400; font-size: 54px; line-height: 1; color: var(--ink); margin-bottom: 8px; white-space: nowrap; }