/* ================================================================
   page-ap.css — Administrations publiques
   Reference implementation of the enbi DS on a Ghost page.
   All variables reference tokens-ds.css.
   Scope: .ap-* classes only. No global side-effects.
================================================================ */

/* ────────────────────────────────────────────────────────────────
   LAYOUT PRIMITIVES
──────────────────────────────────────────────────────────────── */
.ap-page {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ap-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(var(--s-5), 4vw, var(--s-8));
}
.ap-container--narrow {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(var(--s-5), 4vw, var(--s-8));
}

.ap-section {
  padding-block: clamp(var(--s-8), 9vw, var(--s-9));
}
.ap-section--compact {
  padding-block: clamp(var(--s-7), 6vw, var(--s-8));
}
.ap-section--alt {
  background: var(--paper-alt);
}
.ap-section--navy {
  background: var(--cadre);
}
.ap-section--methode-tint {
  background: var(--methode-tint);
}

/* Two-column editorial layout */
.ap-two-col {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: start;
}
@media (max-width: 820px) {
  .ap-two-col { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ────────────────────────────────────────────────────────────────
   SECTION HEADERS
──────────────────────────────────────────────────────────────── */
.ap-section__header {
  /* sticky left column in two-col; standalone header otherwise */
}
.ap-section__header--inverse .ap-section__header {
  /* handled inline */
}
.ap-section__intro {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: var(--leading-body);
  max-width: var(--measure);
  margin-top: var(--s-4);
}

/* ────────────────────────────────────────────────────────────────
   TYPOGRAPHY
──────────────────────────────────────────────────────────────── */

/* Label / eyebrow — Inter, uppercase, méthode blue */
.ap-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--methode);
  margin-bottom: var(--s-3);
}
/* On navy — methode-400 for readability */
.ap-label--methode {
  color: var(--methode-400);
}

/* Headings — Inter, cadre colour */
.ap-section h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--cadre);
  margin-bottom: var(--s-5);
}
.ap-section h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--cadre);
}

/* Inverse (on navy) */
.ap-title--inverse {
  color: var(--on-dark) !important;
}

/* ────────────────────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────────────────────── */
.ap-hero {
  padding-block: clamp(var(--s-8), 10vw, 7rem);
  background: var(--paper);
  border-bottom: var(--frame-light);
}
.ap-hero__inner {
  max-width: 760px;
}
.ap-hero__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--cadre);
  margin-bottom: var(--s-5);
}
.ap-hero__lead {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  max-width: var(--measure);
  margin-bottom: var(--s-5);
}
.ap-hero__context {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-2);
  max-width: var(--measure);
  margin-bottom: var(--s-4);
}

/* ────────────────────────────────────────────────────────────────
   PROSE (situation vécue, etc.)
──────────────────────────────────────────────────────────────── */
.ap-prose p {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink);
  max-width: var(--measure);
  text-wrap: pretty;
}
.ap-prose p + p {
  margin-top: var(--s-4);
}

/* ────────────────────────────────────────────────────────────────
   DIFFERENTIATORS — navy section, sorting lines
──────────────────────────────────────────────────────────────── */
.ap-differentiators {
  margin-top: var(--s-6);
  border-top: 1px solid var(--color-border-inverse);
}
.ap-differentiator {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: var(--s-5) var(--s-7);
  align-items: baseline;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--color-border-inverse);
}
.ap-differentiator__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--on-dark);
  letter-spacing: -0.01em;
}
.ap-differentiator__body {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--on-dark-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
@media (max-width: 680px) {
  .ap-differentiator {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
}

/* ────────────────────────────────────────────────────────────────
   CAPABILITIES LIST — 9 items, méthode-tint background
──────────────────────────────────────────────────────────────── */
.ap-capabilities__list {
  list-style: none;
  border-top: var(--frame-method);
  margin-bottom: var(--s-6);
}
.ap-capability {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--ink);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  padding-left: var(--s-4);
  position: relative;
}
/* Coral node — point de résolution */
.ap-capability::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--methode-400);
}
.ap-capabilities__note {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
  padding-top: var(--s-3);
  border-top: var(--frame-light);
}

/* ────────────────────────────────────────────────────────────────
   SNIPPET — sourçage block (cadre léger)
──────────────────────────────────────────────────────────────── */
.ap-snippet {
  border: var(--frame-light);
  border-radius: var(--radius);
  padding: clamp(var(--s-6), 4vw, var(--s-7));
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ap-snippet__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--cadre);
  margin-bottom: var(--s-5);
}
.ap-snippet p {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
.ap-snippet p + p {
  margin-top: var(--s-4);
}
.ap-snippet .ap-actions {
  margin-top: var(--s-6);
}

/* ────────────────────────────────────────────────────────────────
   RELATED CONTENT
──────────────────────────────────────────────────────────────── */
.ap-related-group {
  margin-top: var(--s-7);
}
.ap-related-group:first-of-type {
  margin-top: 0;
}
.ap-related-group__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--methode);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--frame-method);
}

/* ────────────────────────────────────────────────────────────────
   FINAL CTA
──────────────────────────────────────────────────────────────── */
.ap-final-cta {
  text-align: left;
}
.ap-final-cta .ap-label {
  margin-bottom: var(--s-3);
}
.ap-final-cta__body {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--on-dark-2);
  max-width: 52ch;
  margin-bottom: var(--s-6);
  text-wrap: pretty;
}
.ap-final-cta h2 {
  color: var(--on-dark) !important;
  margin-bottom: var(--s-4);
}

/* ────────────────────────────────────────────────────────────────
   BUTTONS
   Near-square corners. No pill shapes.
──────────────────────────────────────────────────────────────── */
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.75rem 1.375rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease);
  border: none;
  white-space: nowrap;
}
.ap-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.ap-btn:active {
  transform: translateY(1px);
}
/* Résolution — coral : action principale, débloquage */
.ap-btn--coral {
  background: var(--resolution);
  color: #fff;
}
.ap-btn--coral:hover {
  background: var(--resolution-700);
}
/* Outline — cadre : action secondaire, sur fond clair */
.ap-btn--outline {
  background: transparent;
  color: var(--cadre);
  box-shadow: inset 0 0 0 var(--frame-light);
  border: var(--frame-light);
}
.ap-btn--outline:hover {
  background: var(--paper-alt);
}
/* Inv-outline — sur fond navy */
.ap-btn--inv-outline {
  background: transparent;
  color: var(--on-dark);
  border: 1px solid var(--color-border-inverse);
}
.ap-btn--inv-outline:hover {
  background: rgba(237,239,241,.08);
}

/* ────────────────────────────────────────────────────────────────
   ACTIONS GROUP
──────────────────────────────────────────────────────────────── */
.ap-actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-6);
}
.ap-actions--navy {
  margin-top: var(--s-7);
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .ap-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .ap-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-btn { transition: none; }
}