/**
 * APERMIS v3 — Base : polices auto-hébergées, reset, typographie, utilitaires.
 * Dépend de tokens.css (variables --ap-*). Classes préfixées .ap- (zéro collision
 * avec WP, les plugins et le bundle compat v2).
 */

/* ── Polices auto-hébergées (RGPD : aucun appel Google Fonts) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-700.woff2') format('woff2');
}

/* ── Reset sobre ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ap-sans);
  font-size: var(--ap-fs-body);
  line-height: var(--ap-lh-body);
  color: var(--ap-ink);
  background: var(--ap-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }

/* ── Hiérarchie typographique ── */
h1, .ap-h1 {
  font-family: var(--ap-serif);
  font-weight: 700;
  font-size: var(--ap-fs-h1);
  line-height: var(--ap-lh-h1);
  color: var(--ap-marine);
  margin: 0 0 var(--ap-s-4);
}
h2, .ap-h2 {
  font-family: var(--ap-serif);
  font-weight: 700;
  font-size: var(--ap-fs-h2);
  line-height: var(--ap-lh-h2);
  color: var(--ap-marine);
  margin: 0 0 var(--ap-s-3);
}
h3, .ap-h3 {
  font-family: var(--ap-sans);
  font-weight: 600;
  font-size: var(--ap-fs-h3);
  line-height: var(--ap-lh-h3);
  color: var(--ap-marine);
  margin: 0 0 var(--ap-s-2);
}
p { margin: 0 0 var(--ap-s-4); }
a { color: var(--ap-marine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ap-corail-d); }
small, .ap-small { font-size: var(--ap-fs-small); }

/* Titre bicolore (pattern signature) : partie encre + partie accent */
.ap-title-duo { color: var(--ap-ink); }
.ap-title-duo em, .ap-title-duo .ap-duo-accent {
  font-style: normal;
  color: var(--ap-corail-text); /* corail « texte » #B84624 (4,7:1) — jamais --ap-corail en petit */
}
.ap-title-duo .ap-duo-marine { color: var(--ap-marine); }

/* Eyebrow (surtitre) */
.ap-eyebrow {
  font-family: var(--ap-sans);
  font-weight: 600;
  font-size: var(--ap-fs-eyebrow);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ap-corail-text);
  margin: 0 0 var(--ap-s-2);
}
.ap-eyebrow-badge {
  display: inline-block;
  background: #EAF0F6;
  color: var(--ap-marine);
  border-radius: var(--ap-r-btn);
  padding: 6px 14px;
  margin-bottom: var(--ap-s-3);
}
/* Eyebrow sur fonds sombres UNIQUEMENT (texte : 7,4:1 sur marine, 9,3:1 sur marine-d ;
   scopé pour interdire tout usage sur fond clair où le ratio tombe à 1,5:1). */
.ap-hero .ap-eyebrow-light, .ap-compare .ap-eyebrow-light,
.ap-final .ap-eyebrow-light, .ap-turn .ap-eyebrow-light { color: var(--ap-corail-tint); }

/* ── Layout ── */
.ap-container {
  max-width: var(--ap-container);
  margin: 0 auto;
  padding-left: var(--ap-gutter);
  padding-right: var(--ap-gutter);
}
.ap-section { padding: var(--ap-section-y) 0; }
.ap-section-white { background: var(--ap-white); }
.ap-section-flush { padding-top: 0; }

.ap-sec-title { max-width: 760px; }
.ap-sec-title-sm { font-size: clamp(1.5rem, 1.36rem + 0.6vw, 1.75rem); } /* 24 → 28px */
.ap-sec-intro {
  color: var(--ap-muted);
  font-size: var(--ap-fs-lead);
  max-width: 680px;
  margin-bottom: var(--ap-s-8);
}
.ap-quote {
  font-family: var(--ap-serif);
  font-weight: 600;
  font-size: var(--ap-fs-quote);
  line-height: var(--ap-lh-quote);
  color: var(--ap-marine);
  max-width: 860px;
  margin: 0 0 var(--ap-s-8);
}
.ap-link-accent { color: var(--ap-corail-text); font-weight: 600; }

/* ── Accessibilité ── */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute !important; word-wrap: normal !important;
}
.ap-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ap-marine); color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-weight: 600;
}
.ap-skip-link:focus { left: 0; color: #fff; }

:focus-visible {
  outline: 2px solid var(--ap-focus);
  outline-offset: 2px;
}
/* Fonds sombres : focus blanc */
.ap-hero :focus-visible, .ap-compare :focus-visible,
.ap-final :focus-visible, .ap-footer :focus-visible, .ap-turn :focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}