/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — Canonical scale for charles-avocats.fr
   Single source of truth. Loaded LAST in <head> so it wins
   over any inline <style> drift.

   Edit ONLY here for any change in font-size / family /
   weight / line-height / letter-spacing. Color, margin,
   animation stay in page-local inline styles.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Body ─── */
body {
  font-family: 'Inter', sans-serif;
  font-size: 17.5px;
  -webkit-font-smoothing: antialiased;
}

/* ─── Headings ─── */
h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.03em;
}

h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.025em;
}

h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
}

h4 {
  font-family: 'Syne', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Legal pages → H2 acts as numbered-article subtitle (smaller scale).
   Add class="legal" to <body> on mentions-legales / politique-confidentialite. */
body.legal h2 {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.015em;
}

/* ─── Body text ─── */
p,
.p {
  font-size: 16px;
  line-height: 1.85;
}

/* ─── FAQ question (unified across all pages) ─── */
.fq-q,
.faq-q-text {
  font-family: 'Fraunces', serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -.01em;
}

/* ─── Eyebrows (explicit line-height to eliminate cross-page lh drift) ─── */
.h-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.s-eyebrow,
.header-tag,
.section-eyebrow,
.profil-tag,
.svc-block-eyebrow,
.levier-eyebrow,
.approche-eyebrow,
.contact-tag,
.m-eyebrow,
.tarif-label,
.aside-label,
.exp-aside-label,
.litiges-cta-box-label,
.pv-label,
.repere-term,
.breadcrumb a,
.breadcrumb span {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ─── Hero lead (light) — single-line above-fold descriptions ─── */
.hero-lead,
.hero-sub,
.lead,
.page-hero p {
  font-size: 16px;
  line-height: 1.85;
}

/* ─── Hero lead (dense) — competence pages, longer body copy ─── */
.h-body {
  font-size: 17.5px;
  line-height: 1.85;
}

/* ─── Hero subtitle (italic Fraunces under H1) ─── */
.h1-sub,
.h-accroche {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.45;
  letter-spacing: -.005em;
}

/* ─── Section lead (under H2) ─── */
.s-lead {
  font-size: 16px;
  line-height: 1.85;
}

/* ═══════════════════════════════════════════════════════════════
   READING CONTENT — 16px minimum policy
   Every paragraph / reading-text class across the 7 competence
   pages + cabinet + actualites is funnelled here to enforce
   the 16px / 1.85 reading floor. typography.css loads LAST so
   these win over inline page-local declarations of equal or
   lesser specificity.

   NOT included (intentionally smaller for labels/meta/utility):
   eyebrows, footer, form labels, breadcrumb, list bullets (::before),
   card-meta (.c-text, .dom-desc), .erreur-result, .blog-desc,
   .exp-sublist-p (sub-list 13px, design-intent hierarchy).
   ═══════════════════════════════════════════════════════════════ */

/* Competence-page reading paragraphs */
.sit-text,
.sit-a,
.sit-intro-lead,
.approche-p,
.svc-content-text,
.profil-card-text,
.profil-body,
.profil-body .p,
.profil-body p,
.cas-desc,
.cas-slide p,
.phase-text,
.callout,
.m-lead,
.ph-text,
.levier-p,
.pv-p,
.exp-piege-text,
.exp-tech-text,
.err-text,
.repere-text,
.situ-text,
.svc-card p,
.step p,
.erreur-content p,
.erreur-desc,
.diff-lead,
.diff-card-intro,
.litiges-col-l .p,
.litiges-cta-box p,
.strat-list li,
.p-callout,
.val-case-text,
.val-levers li,
.h4-text,
.exp-elist li,
.svc-list li {
  font-size: 16px;
  line-height: 1.85;
}

/* Card titles inside competence pages (Fraunces) → 17px for hierarchy above body */
.err-title,
.situ-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}

/* Cabinet page reading paragraphs */
.hero-quote,
.pres-callout,
.vision-callout,
.vision-sub,
.parcours-left .sub,
.tl-text,
.val-text,
.part-intro,
.part-right-text,
.part-desc,
.zones-text,
.hero-photo-quote,
.sub {
  font-size: 16px;
  line-height: 1.85;
}

/* Additional reading-content classes discovered via discovery audit */
.contact-lead,
.public-lead,
.passpi-note,
.lstep-desc,
.pub-desc,
.mstep-desc,
.litige-desc,
.litige-tag-text,
.review-comment,
.sb-contact-text,
.rgpd-note,
.cb-label,
.upload-txt-main {
  font-size: 16px;
  line-height: 1.7;
}

/* Card-style titles (small uppercase Syne titles in cards / sub-blocks) */
.lstep-title,
.mstep-title,
.exp-tech-title,
.litige-title,
.part-name,
.cas-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ─── Contact card title (across competence pages) ─── */
.c-title {
  font-family: 'Syne', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: none;
}

/* ─── Contact card link (sub-text under c-title) ─── */
.c-lnk {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Domain card pieces (homepage + cabinet domains list) ─── */
.dom-num {
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dom-name {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.dom-link {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─── CTA buttons (unify across services + homepage + contact) ─── */
.contact-cta-btn,
.form-submit,
.btn-submit {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── Section markers (numeric: phase, situation, case, error) ─── */
.sit-n,
.cas-num,
.phase-n,
.ph-n,
.err-n {
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ─── Phase / step title (small Fraunces title) ─── */
.phase-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* ─── Case result indicator (after a case study) ─── */
.cas-result {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Review carousel: comment + avatar initials ─── */
.review-comment {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
}

.review-avatar.review-avatar-initials {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── Service H3 (matches h3.svc-h3 inline specificity) ─── */
h3.svc-h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
}

/* ─── Generic .eyebrow (legacy 404 / misc usage — align to .h-eyebrow) ─── */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ─── Profile-section card label (tiny eyebrow inside profile cards) ─── */
.profil-card-label,
.profil-card.not-doing .profil-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Article card description (actualites listing) */
.card-desc {
  font-size: 16px;
  line-height: 1.7;
}

/* Form inputs — 16px minimum prevents iOS zoom-on-focus */
.form-field input,
.form-field textarea,
.form-field select {
  font-size: 16px;
}

/* Diff-list (compact comparison lists) — bump from 12px to 16px floor */
.diff-list li {
  font-size: 16px;
  line-height: 1.7;
}

/* ─── Body paragraph variants (page-specific class names, same role) ─── */
.offre-desc,
.intro-statement {
  font-size: 16px;
  line-height: 1.85;
}

/* ─── Italic notes — small Fraunces italic for conventions/triggers/asides ─── */
.offre-trigger,
.convention,
.intro-note,
.intro-callout p,
.sit-title,
.approche-callout p,
.svc-renvoi p,
.levier-callout p,
.levier-callout2 p,
.diff-rappel p,
.sit-cta p,
.avis-placeholder p,
.profil-note p,
.avis-text,
.strip-item span {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -.005em;
}

/* ─── RGPD checkbox consent label ─── */
.check-label {
  font-size: 13px;
  line-height: 1.55;
}

/* ─── Card descriptions (explicit line-height to eliminate cross-page drift) ─── */
.c-text,
.dom-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Sub-list paragraph (e.g. expertise sub-points, blog card descriptions) ─── */
.exp-sublist-p,
.blog-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate);
}

/* ─── FAQ answer text (covers all 4 class variants used across pages) ─── */
.fq-ans p,
.fq-ans h4,
.fq-body p,
.fq-body h4,
.fq-body-inner h4,
.fq-ans-inner,
.fq-ans-inner p,
.fq-ans-inner h4,
.fq-ans-inner ul li,
.faq-a-inner,
.faq-a-inner p,
.faq-a-inner h4,
.defense-list li {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  text-transform: none;
  letter-spacing: normal;
}

/* ─── Form labels (explicit line-height) ─── */
.field label,
label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ─── Form inputs ─── */
.field input,
.field textarea,
.field select {
  font-size: 15.5px;
  font-weight: 300;
}

/* ─── Footer (explicit on every prop to eliminate cross-page drift) ─── */
.ft-name {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ft-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.ft-links a {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Nav (explicit on every prop) ─── */
.logo-name {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.logo-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.nav-links a {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
}
.nav-links a.active {
  font-weight: 500;
}

.nav-rdv {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

/* Page-local overrides on .profil-card variants must NOT shrink the canonical
   reading text. Bump them explicitly here (higher specificity from typography.css
   loaded last + matching the page selector). */
.profil-card .profil-card-text,
.profil-card.not-doing .profil-card-text {
  font-size: 16px;
  line-height: 1.65;
}

/* ─── Primary CTA button (unify weight + tracking across pages) ─── */
.btn-primary {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.btn-secondary,
.btn-ghost {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.btn-cta {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.btn-tel {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-tablette
   Clamp() already scales h1/h2/h3 down. These are explicit
   shrinks for elements with fixed sizes that need to be smaller
   on small screens for readability/density.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 16px reading floor — body & reading content stay at 16px on tablet+phone */
  body { font-size: 16px; }
  .h-body { font-size: 16px; line-height: 1.75; }
  .fq-q,
  .faq-q-text { font-size: 16px; }
  /* Eyebrows + labels can shrink on small screens (not reading content) */
  .h-eyebrow { font-size: 10.5px; }
  .s-eyebrow,
  .header-tag,
  .section-eyebrow,
  .profil-tag,
  .svc-block-eyebrow,
  .levier-eyebrow,
  .approche-eyebrow,
  .contact-tag,
  .m-eyebrow,
  .tarif-label,
  .aside-label,
  .exp-aside-label,
  .pv-label,
  .repere-term { font-size: 9.5px; letter-spacing: .14em; }
}
