/* ================================================================
   post-sections.css — enbi
   Composants de sections pour les ARTICLES (kg HTML cards).
   But : sortir le style des <style> inline du post et le brancher
   sur les tokens du design system, pour une propagation centrale.

   Portée : tout est préfixé par .gh-content (le wrapper du corps
   d'article dans post.hbs). Aucune fuite vers les pages .hbs qui
   réutilisent .hero / .band / .cta au niveau racine.

   Toutes les couleurs = var(--token). Zéro hex en dur.
   Grammaire visuelle alignée sur page-ap.css :
   cadres (pas d'ombres), filets, mesure 64ch, corail = rare.
================================================================ */

/* ────────────────────────────────────────────────────────────
   PRIMITIVES partagées dans le corps d'article
──────────────────────────────────────────────────────────── */
.gh-content :where(.hero, .stakes, .band, .grid-cards, .process,
  .deliverables, .comparison, .specs, .quote-block, .cta) {
  box-sizing: border-box;
}

/* Conteneur large par défaut pour les sections pleine largeur */
.gh-content .stakes,
.gh-content .grid-cards,
.gh-content .process,
.gh-content .deliverables,
.gh-content .comparison,
.gh-content .specs {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(var(--s-5), 4vw, var(--s-7));
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
}

/* Eyebrow unifié — Inter, capitales, méthode. Remplace les
   variantes .hero__eyebrow / .band__eyebrow pour le corps d'article. */
.gh-content .eyebrow {
  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: 0 0 var(--s-3);
}

/* Titres de section dans le corps d'article */
.gh-content 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: 0 0 var(--s-5);
  text-wrap: balance;
}
.gh-content section h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--cadre);
  margin: 0 0 var(--s-3);
}

/* ────────────────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────────────────── */
.gh-content .hero {
  padding-block: clamp(var(--s-8), 10vw, 7rem);
  padding-inline: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--paper);
  border-bottom: var(--frame-light);
}
.gh-content .hero__content {
  max-width: 760px;
  margin-inline: auto;
}
.gh-content .hero h1 {
  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: 0 0 var(--s-5);
  text-wrap: balance;
}
.gh-content .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: 0 0 var(--s-6);
  text-wrap: pretty;
}
.gh-content .hero__actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
}

/* ────────────────────────────────────────────────────────────
   STAKES — 4 capacités. PAS une séquence : numéros discrets
   (label méthode), pas de gros marqueurs display.
──────────────────────────────────────────────────────────── */
.gh-content .stakes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
}
.gh-content .stake {
  padding-top: var(--s-4);
  border-top: var(--frame-method);
}
.gh-content .stake__number {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--methode);
  margin-bottom: var(--s-2);
}
.gh-content .stake p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────────
   BAND — bandeau pleine largeur. light = paper-alt, dark = cadre.
──────────────────────────────────────────────────────────── */
.gh-content .band {
  padding-block: clamp(var(--s-8), 9vw, var(--s-9));
  padding-inline: clamp(var(--s-5), 4vw, var(--s-7));
  border-top: 1px solid var(--line);
  /* casse la pleine largeur du conteneur d'article Ghost */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.gh-content .band--light { background: var(--paper-alt); }
.gh-content .band--dark  { background: var(--cadre); }
.gh-content .band__inner {
  max-width: 760px;
  margin-inline: auto;
}
.gh-content .band p {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0;
  text-wrap: pretty;
}
/* Inverse sur fond cadre */
.gh-content .band--dark .eyebrow { color: var(--methode-400); }
.gh-content .band--dark h2 { color: var(--on-dark); }
.gh-content .band--dark p,
.gh-content .band--dark li { color: var(--on-dark-2); }

/* feature-list — filets, pas de bordure latérale */
.gh-content .feature-list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border-inverse);
  max-width: var(--measure);
}
.gh-content .feature-list li {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--color-border-inverse);
}

/* ────────────────────────────────────────────────────────────
   CARTES — grid-cards & deliverables. Cadre léger, pas d'ombre.
──────────────────────────────────────────────────────────── */
.gh-content .grid-cards,
.gh-content .deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
}
.gh-content .card {
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  background: var(--surface);
  border: var(--frame-light);
  border-radius: var(--radius);
}
.gh-content .card .eyebrow { color: var(--ink-3); }
.gh-content .card p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────────
   PROCESS — déroulé. VRAIE séquence : les numéros portent l'ordre.
──────────────────────────────────────────────────────────── */
.gh-content .process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-6);
  counter-reset: none;
}
.gh-content .process__step {
  padding-top: var(--s-5);
  border-top: var(--frame-method);
}
.gh-content .process__number {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--methode);
  margin-bottom: var(--s-3);
}
.gh-content .process__step p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────────
   COMPARISON — hors périmètre / périmètre utile.
   Colonne accent = méthode-tint (corail reste réservé à l'action).
──────────────────────────────────────────────────────────── */
.gh-content .comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}
.gh-content .comparison__column {
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  border: var(--frame-light);
  border-radius: var(--radius);
  background: var(--surface);
}
.gh-content .comparison__column--accent {
  background: var(--methode-tint);
  border-color: var(--methode-200);
}
.gh-content .comparison ul {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}
.gh-content .comparison li {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  padding-block: var(--s-3);
  padding-left: var(--s-5);
  position: relative;
  border-bottom: 1px solid var(--line);
}
.gh-content .comparison li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
}
.gh-content .comparison__column--accent li::before { background: var(--methode); }

/* ────────────────────────────────────────────────────────────
   SPECS — modalités pratiques. Paires label / valeur.
──────────────────────────────────────────────────────────── */
.gh-content .specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: var(--frame-method);
}
.gh-content .spec {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-block: var(--s-5);
  padding-right: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.gh-content .spec span {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
}
.gh-content .spec strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--cadre);
}

/* ────────────────────────────────────────────────────────────
   QUOTE-BLOCK — témoignages. Inria serif, repère méthode (pas de
   bordure latérale).
──────────────────────────────────────────────────────────── */
.gh-content .quote-block {
  max-width: 760px;
  margin-inline: auto;
  padding-block: clamp(var(--s-6), 5vw, var(--s-7));
  padding-inline: clamp(var(--s-5), 4vw, var(--s-7));
}
.gh-content .quote-block blockquote {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--cadre);
  margin: 0;
  text-wrap: pretty;
}
.gh-content .quote-block p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--methode);
  margin: var(--s-4) 0 0;
}

/* ────────────────────────────────────────────────────────────
   CTA — clôture. Fond cadre, action corail (le seul moment corail).
──────────────────────────────────────────────────────────── */
.gh-content .cta {
  background: var(--cadre);
  padding-block: clamp(var(--s-8), 9vw, var(--s-9));
  padding-inline: clamp(var(--s-5), 4vw, var(--s-7));
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.gh-content .cta__content { max-width: 720px; margin-inline: auto; }
.gh-content .cta h2 { color: var(--on-dark); }
.gh-content .cta p {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--on-dark-2);
  max-width: 56ch;
  margin: 0 0 var(--s-6);
  text-wrap: pretty;
}
.gh-content .cta .eyebrow { color: var(--methode-400); }
.gh-content .cta__actions,
.gh-content .cta .actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
}

/* ────────────────────────────────────────────────────────────
   BOUTONS du corps d'article — .btn--primary / .btn--secondary
   (vocabulaire du post). Alignés sur .btn-resolve / .btn-ghost.
──────────────────────────────────────────────────────────── */
.gh-content .btn--primary,
.gh-content .btn--secondary {
  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;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.gh-content .btn--primary {
  background: var(--resolution);
  color: var(--surface);
  border: 1px solid var(--resolution);
}
.gh-content .btn--primary:hover { background: var(--resolution-700); border-color: var(--resolution-700); }
.gh-content .btn--secondary {
  background: transparent;
  color: var(--cadre);
  border: var(--frame-light);
}
.gh-content .btn--secondary:hover { background: var(--paper-alt); }
/* Boutons secondaires posés sur fond cadre (CTA) */
.gh-content .cta .btn--secondary {
  color: var(--on-dark);
  border-color: var(--color-border-inverse);
}
.gh-content .cta .btn--secondary:hover { background: rgba(237,239,241,.08); }
.gh-content .btn--primary:focus-visible,
.gh-content .btn--secondary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.gh-content .btn--primary:active,
.gh-content .btn--secondary:active { transform: translateY(1px); }

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .gh-content .comparison { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gh-content .hero__actions,
  .gh-content .cta__actions,
  .gh-content .cta .actions { flex-direction: column; align-items: stretch; }
  .gh-content .btn--primary,
  .gh-content .btn--secondary { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .btn--primary,
  .gh-content .btn--secondary { transition: none; }
}

/* ================================================================
   OFFRES — composants des articles « offre » (tag:offre)
   Vocabulaire déjà publié dans le corps des articles :
   .stakes__item, .offer-card, .encadre-chiffres, .reassurance-list,
   .cta-inline, .tag-cible / .tag-domaine, .btn--coral.
   Styles centralisés ici → toutes les offres déjà en ligne en
   profitent sans rééditer le corps de chaque article.
   Tout reste dans la mesure de lecture (.art ~720px), tokens only.
================================================================ */

/* ---- Le problème : structure publiée (.stakes > .container > .stakes__items).
   La règle de base .gh-content .stakes est une grille (pour l'ancien
   composant .stake) ; on la neutralise quand la structure publiée est
   présente, sinon le .container est piégé dans une piste de 220px. ---- */
.gh-content .stakes:has(.stakes__items) {
  display: block;
  padding-inline: 0;
  padding-block: clamp(var(--s-7), 6vw, var(--s-8));
}
/* .container hérité du layout de page : neutralisé dans le corps
   d'article (sinon il réimpose padding/max-width et rétrécit la grille). */
.gh-content .container { max-width: none; width: 100%; padding-inline: 0; margin-inline: 0; }
.gh-content .stakes__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: 0 0 var(--s-3);
}
.gh-content .stakes__title { max-width: 32ch; margin-bottom: var(--s-6); }
.gh-content .stakes__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-6) var(--s-5);
  margin: 0;
}
.gh-content .stakes__item { padding-top: var(--s-4); border-top: var(--frame-method); }
.gh-content .stakes__item-num {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--methode);
  margin: 0 0 var(--s-3);
}
.gh-content .stakes__item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--methode); flex: 0 0 auto; }
.gh-content .stakes__item-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--cadre);
  margin: 0 0 var(--s-2);
  text-wrap: pretty;
}
.gh-content .stakes__item-text {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Tags (cible = public visé ; domaine = discipline). Pas de pilule. ---- */
.gh-content .tag-cible,
.gh-content .tag-domaine {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1;
  padding: 0.4em 0.6em;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
}
.gh-content .tag-cible { background: var(--methode-tint); color: var(--methode-700); }
.gh-content .tag-domaine { color: var(--ink-2); border: 1px solid var(--line-strong); }

/* ---- Offer card : la carte d'offre (titre, prix, ce qu'on en retire) ---- */
.gh-content .offer-card {
  margin: var(--s-7) 0;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--surface);
  border: var(--frame-light);
  border-radius: var(--radius-lg);
}
.gh-content .offer-card__head {
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.gh-content .offer-card__filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.gh-content .offer-card__title {
  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: 0 0 var(--s-2);
  text-wrap: balance;
}
.gh-content .offer-card__subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
  max-width: 52ch;
}
.gh-content .offer-card__price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--cadre);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.gh-content .offer-card__text {
  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: 0 0 var(--s-4);
}
.gh-content .offer-card__steps {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.gh-content .offer-card__step {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--s-3);
  align-items: start;
}
.gh-content .offer-card__step-num {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--methode-tint);
  color: var(--methode);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
}
.gh-content .offer-card__step-text {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.gh-content .offer-card__conditions {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* ---- Encadré chiffres : preuve d'expérience (pas de glow SaaS) ---- */
.gh-content .encadre-chiffres {
  margin: var(--s-7) 0;
  padding: clamp(var(--s-5), 4vw, var(--s-6));
  background: var(--paper-alt);
  border-radius: var(--radius-lg);
}
.gh-content .encadre-chiffres__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: 0 0 var(--s-5);
}
.gh-content .chiffres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
}
.gh-content .chiffre-item { padding-top: var(--s-4); border-top: var(--frame-method); }
.gh-content .chiffre-item__value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--cadre);
  margin: 0 0 var(--s-2);
  font-variant-numeric: tabular-nums;
}
.gh-content .chiffre-item__label {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
.gh-content .encadre-chiffres__source {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- Réassurance : engagements (sans conflit, sans dépassement…) ---- */
.gh-content .reassurance-list {
  margin: var(--s-7) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5) var(--s-6);
}
.gh-content .reassurance-item { padding-top: var(--s-4); border-top: var(--frame-method); }
.gh-content .reassurance-item__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--cadre);
  margin: 0 0 var(--s-2);
}
.gh-content .reassurance-item__text {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ---- CTA inline : appel intermédiaire (méthode-tint + action corail) ---- */
.gh-content .cta-inline {
  margin: var(--s-7) 0;
  padding: clamp(var(--s-5), 4vw, var(--s-6));
  background: var(--methode-tint);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.gh-content .cta-inline > div { min-width: 0; }
.gh-content .cta-inline__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: 0 0 var(--s-2);
}
.gh-content .cta-inline__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: 0 0 var(--s-1);
  text-wrap: pretty;
}
.gh-content .cta-inline__sub {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  margin: 0;
}

/* ---- Bouton corail du corps d'article (alias de .btn--primary) ---- */
.gh-content .btn--coral {
  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;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius);
  background: var(--resolution);
  color: var(--surface);
  border: 1px solid var(--resolution);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gh-content .btn--coral:hover { background: var(--resolution-700); border-color: var(--resolution-700); }
.gh-content .btn--coral:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.gh-content .btn--coral:active { transform: translateY(1px); }

/* ---- Variante de grille de chiffres (.chiffres-list / __text) ----
   Certaines offres emploient .chiffres-list au lieu de .chiffres-grid
   et .chiffre-item__text au lieu de __label. Mêmes styles. */
.gh-content .chiffres-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
}
.gh-content .chiffre-item__text {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Encadrés BEM (.encadre--legal, .encadre--chiffres) ----
   Second système d'encadré présent dans d'autres offres. Cadre calme,
   jamais alarmiste (voix de marque). Partage __title / __text / legal-ref. */
.gh-content .encadre--legal,
.gh-content .encadre--chiffres {
  margin: var(--s-7) 0;
  padding: clamp(var(--s-5), 4vw, var(--s-6));
  border-radius: var(--radius-lg);
}
.gh-content .encadre--legal {
  background: var(--surface);
  border: var(--frame-light);
}
.gh-content .encadre--chiffres { background: var(--paper-alt); }
.gh-content .legal-ref {
  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: 0 0 var(--s-3);
}
.gh-content .encadre--chiffres .legal-ref { margin-bottom: var(--s-5); }
.gh-content .encadre__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--cadre);
  margin: 0 0 var(--s-3);
  text-wrap: pretty;
}
.gh-content .encadre__text {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-2);
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}
.gh-content .encadre--chiffres .chiffres-list + .encadre__text {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ---- Resource card : lien vers une ressource / analyse ---- */
.gh-content .resource-card {
  display: block;
  margin: var(--s-5) 0;
  padding: clamp(var(--s-4), 3vw, var(--s-5));
  background: var(--surface);
  border: var(--frame-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color var(--dur) var(--ease);
}
.gh-content .resource-card:hover { border-color: var(--line-strong); }
.gh-content .resource-card__source {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--methode);
  margin-bottom: var(--s-2);
}
.gh-content .resource-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--cadre);
  margin: 0 0 var(--s-2);
  padding-right: var(--s-6);
  text-wrap: pretty;
}
.gh-content .resource-card__desc {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
.gh-content .resource-card__arrow {
  position: absolute;
  top: clamp(var(--s-4), 3vw, var(--s-5));
  right: clamp(var(--s-4), 3vw, var(--s-5));
  color: var(--methode);
  font-size: var(--text-md);
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.gh-content .resource-card:hover .resource-card__arrow { transform: translateX(3px); }

/* ---- Responsive offres ---- */
@media (max-width: 600px) {
  .gh-content .cta-inline { flex-direction: column; align-items: flex-start; }
  .gh-content .cta-inline .btn--coral { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-content .btn--coral,
  .gh-content .resource-card,
  .gh-content .resource-card__arrow { transition: none; }
}