/* ═══════════════════════════════════════════════════════════
   SYSTÈME TYPOGRAPHIQUE — Réalisateur Web
   Sofia Pro (≈ 90-95 %) : titres, textes, navigation, boutons,
   cartes, tags, formulaires, avis, footer.
   DM Mono (≈ 5-10 %) : fil d'Ariane, surtitres, métadonnées,
   labels techniques, numéros. Jamais de paragraphe, titre,
   bouton, menu ou avis en DM Mono.
   Chargée APRÈS styles.css, site.css et page.css : ce fichier
   ne touche qu'à la typographie (ni couleurs, ni composition).
   ═══════════════════════════════════════════════════════════ */

/* Sofia Pro — webfonts licenciées EMDASH/Motyfo, auto-hébergées.
   Licence : Light, Regular, Semi-bold ; webfont self-hosted jusqu'à
   10 000 pages vues/mois. Seuls Regular 400 et SemiBold 600 sont utilisés.
   Les règles en 500 (titres, navigation) s'affichent en Regular : le Medium
   n'est pas licencié. NE PAS ajouter d'autre graisse sans licence web.
   Si le Medium est acheté : déposer SofiaPro-Medium.woff2 dans
   fonts/sofia-pro/ et ajouter un bloc @font-face 500 sur le modèle ci-dessous.
   Les overrides fixent les métriques verticales (rendu identique Windows/macOS). */
@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/sofia-pro/SofiaPro-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 89%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/sofia-pro/SofiaPro-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  ascent-override: 89%; descent-override: 26%; line-gap-override: 0%;
}

:root {
  --font-primary: 'Sofia Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: var(--font-primary);
  --geo: var(--font-primary);
  --mono: var(--font-mono);

  /* échelle — fluide, recalée par gabarit plus bas */
  --t-h1: clamp(42px, 4.5vw, 72px);
  --t-h2: clamp(30px, 2.7vw, 44px);
  --t-h3: clamp(22px, 1.8vw, 30px);
  --t-rail: clamp(20px, 1.7vw, 27px);
  --t-lead: clamp(17px, 1.3vw, 20px);
  --t-body: 17px;
  --t-edito: clamp(34px, 4vw, 60px);
  --t-heading: var(--t-h2);          /* titres de section du template */
}

html { font-synthesis-weight: none; }          /* jamais de faux gras */
body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--t-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }

/* ─── DM Mono : repères techniques ─── */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crumbs { font-size: 10.5px; letter-spacing: 0.06em; }
.p-eyebrow, .hero-kicker, .motto-kicker, .footer-kicker { letter-spacing: 0.1em; }
.pcard-meta .mono, .rail-count, .lib-count, .bcard-read,
.fiche-meta, .review-prod, .p-card-num, .xp-num, .pstep-meta, .app-type { font-size: 10.5px; letter-spacing: 0.06em; }
.f-label, dt.mono, .fiche-dl dt, .app-story dt, .studio-facts dt, .contact-infos dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.review-date, .review-src { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; }

/* ─── Sofia Pro là où DM Mono était utilisée à tort ─── */
/* navigation */
.dock-link, .dock-drop-btn {
  font-family: var(--font-primary); font-weight: 500;
  font-size: 12.5px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
}
/* CTA, boutons, liens d'action */
.btn, .dock-cta, .skip-link, .link-arrow, .pcard-cta, .prod-cta, .xp-cta, .p-bridge-card > .mono {
  font-family: var(--font-primary); font-weight: 600;
  font-size: 13px; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase;
}
/* tags, pastilles, filtres : éditoriaux, pas techniques */
.xp-tags li, .p-chips li, .p-zone li, .f-pill {
  font-family: var(--font-primary); font-weight: 400;
  font-size: 13.5px; line-height: 1.1; letter-spacing: 0; text-transform: none;
}
/* bas de footer (mentions, réseaux) */
.footer-bottom .mono { font-family: var(--font-primary); font-size: 13px; letter-spacing: 0.01em; text-transform: none; }

/* ─── Titres ─── */
/* H1 de page */
.p-h1, .contact-title {
  font-size: var(--t-h1); font-weight: 500;
  line-height: 1.02; letter-spacing: -0.035em;
}
.art-title { font-size: clamp(38px, 4vw, 60px); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; }
/* fiche réalisation : H1 plus compact */
.fiche-title { font-size: clamp(40px, 4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
/* accueil : titre du hero (scène animée) */
.hero-title { font-size: clamp(38px, 4.2vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }

/* H2 de section */
.sec-title, .p-title, .coll-title, .footer-mail, .prose h2 {
  font-size: var(--t-h2); font-weight: 500;
  line-height: 1.06; letter-spacing: -0.025em;
}
.prose h2 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -0.02em; }

/* H3 de bloc */
.p-card h3, .p-app h3, .app-name, .xp-name, .p-bridge-card h3, .bcard--une .bcard-title, .prose h3 {
  font-size: var(--t-h3); font-weight: 500;
  line-height: 1.14; letter-spacing: -0.015em;
}
.p-step h3, .p-chain h3 { font-size: clamp(20px, 1.5vw, 23px); font-weight: 500; line-height: 1.18; letter-spacing: -0.012em; }
.faq summary h3 { font-size: clamp(18px, 1.4vw, 21px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.prose h4 { font-size: 18px; font-weight: 600; }
.pstep h3 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; }

/* rangées de productions (catalogue) */
.rail-title { font-size: var(--t-rail); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }

/* titres des cartes */
.pcard-title, .bcard-title { font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.bcard-title { font-size: 19px; }

/* ─── Grandes phrases éditoriales ─── */
.p-cta h2, .p-manifest p {
  font-size: var(--t-edito); font-weight: 400;
  line-height: 1.04; letter-spacing: -0.035em;
}
.fill-text, .steps-cta { font-weight: 400; letter-spacing: -0.03em; }
.mw { font-weight: 400; letter-spacing: -0.035em; }

/* ─── Textes ─── */
.p-intro, .hero-intro, .fiche-syn, .art-chapeau, .p-cta p, .contact-sub, .sec-sub, .coll-sub {
  font-size: var(--t-lead); font-weight: 400; line-height: 1.5; letter-spacing: -0.005em;
}
.fiche-main .fiche-lead, .studio-text, .xp-pitch {
  font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; line-height: 1.35; letter-spacing: -0.015em;
}
.xp-pitch { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; letter-spacing: -0.005em; }
.p-card p, .p-step p, .p-bridge-card p, .faq p, .p-split-r p, .fiche-main p, .p-app p, .pstep p, .app-story dd {
  font-size: var(--t-body); line-height: 1.58; letter-spacing: 0;
}
.p-chain p { font-size: 16px; line-height: 1.55; }
.prose { font-size: 18px; line-height: 1.65; letter-spacing: 0; }
.prose p, .fiche-main p, .p-split-r p { max-width: 65ch; }
.fiche-dl dd, .studio-facts dd, .contact-infos dd { font-size: 16px; line-height: 1.4; }

/* avis clients */
.review-text { font-size: clamp(17px, 1.35vw, 20px); font-weight: 400; line-height: 1.5; letter-spacing: -0.005em; }
.review-name, .q-name { font-weight: 500; font-size: 15px; }
.fiche-quote blockquote { font-size: clamp(22px, 2.1vw, 32px); font-weight: 400; line-height: 1.32; letter-spacing: -0.015em; }

/* formulaires */
.f-field input, .f-field textarea, .f-field select { font-family: var(--font-primary); font-size: 16px; font-weight: 400; }

/* ─── Numéros d'étapes : repères graphiques en DM Mono ─── */
.p-step-num {
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(36px, 3.5vw, 58px); letter-spacing: -0.04em;
  color: rgba(var(--ink-rgb), 0.14);
}
.app-num { font-family: var(--font-mono); font-weight: 400; letter-spacing: -0.04em; }
/* chiffres clés (note Google, compteurs) : Sofia Regular, jamais Light */
.g-note, .q-fig, .bignum, .bignum-roll { font-weight: 400; }

/* ─── Signature XXL « Réalisateur Web » ─── */
.footer-name {
  font-family: var(--font-primary); font-weight: 400;
  font-size: clamp(64px, 7.5vw, 136px);
  line-height: 0.95; letter-spacing: -0.045em;
}

/* ═══════════ TABLETTE ═══════════ */
@media (max-width: 1100px) {
  :root { --t-h1: clamp(40px, 5.6vw, 58px); --t-h2: clamp(30px, 4vw, 40px); --t-h3: clamp(22px, 2.8vw, 28px); }
}

/* ═══════════ MOBILE ═══════════ */
@media (max-width: 700px) {
  :root {
    --t-h1: clamp(36px, 10.5vw, 46px);
    --t-h2: clamp(28px, 8vw, 34px);
    --t-h3: clamp(21px, 6vw, 26px);
    --t-edito: clamp(30px, 9vw, 42px);
    --t-body: 16px;
    --t-lead: 17px;
  }
  .fiche-title { font-size: clamp(36px, 10vw, 46px); }
  .hero-title { font-size: clamp(30px, 8.4vw, 42px); }
  .p-card p, .p-step p, .p-bridge-card p, .faq p, .p-split-r p, .fiche-main p, .p-app p, .pstep p, .app-story dd, .p-chain p { font-size: 16px; }
  .prose { font-size: 17px; }
  .pcard-title { font-size: 15.5px; }
  .fiche-main .fiche-lead, .studio-text { font-size: 19px; }
  /* le mot-signature tient sur une ligne : jamais plus large que la zone utile */
  .footer-name { font-size: min(clamp(48px, 14vw, 72px), calc((100vw - 2 * var(--gutter)) / 7.1)); line-height: 0.92; }
  .dock-cta { font-size: 11.5px; letter-spacing: 0.02em; }
  .btn { font-size: 12.5px; }
}