/* ---------------------------------------------------------------------------
 * refinements.css — lot d'ajustements design (25/07/2026).
 * Servi depuis 'self', versionné ?v=N dans le <link> (cache immuable /assets/*).
 * On n'édite pas index-*.css (nom hashé → cache non rafraîchi). Sélecteurs
 * scopés par page : le fichier est lié partout mais chaque règle ne touche
 * que la page concernée.
 * ------------------------------------------------------------------------- */

/* P3 — Footer : la nav « Explorer » passe en 2 colonnes pour réduire la
   hauteur du pied de page (on utilise la largeur disponible). */
.site-footer nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.6rem;
  row-gap: 0.5rem;
}

/* P1 — Footer : on élargit la colonne « Explorer » et on resserre l'espace,
   ce qui ramène la colonne « Contact » vers la gauche. */
@media (min-width: 821px) {
  .site-footer {
    grid-template-columns: 1.35fr 1fr 1.05fr;
    gap: 3vw;
  }
}

/* P2 — Footer : la mention de bas de page tient sur une seule ligne. */
@media (min-width: 821px) {
  .site-footer__bottom .scope-note {
    max-width: none;
    white-space: nowrap;
  }
}

/* P1 — Accueil : accent terracotta dans « … des outils concrets, un cadre clair. » */
.about-teaser__copy h2 em {
  color: var(--terracotta);
  font-weight: 400;
}

/* P4 — EMDR : titre « Avant le mouvement… » aligné à gauche + accent terracotta.
   La bascule en 2 colonnes est réservée au desktop (sur mobile, le heading
   reste empilé sur une seule colonne comme dans le CSS de base). */
@media (min-width: 821px) {
  .emdr-path__heading {
    grid-template-columns: 1.4fr 0.85fr;
  }
  .emdr-path__heading .eyebrow {
    grid-column: 1;
  }
  .emdr-path__heading h2 {
    grid-column: 1;
    text-align: left;
  }
  .emdr-path__heading > p:last-child {
    grid-column: 2;
  }
}
.emdr-path__heading h2 em {
  color: var(--terracotta);
  font-weight: 400;
}

/* P5 — EMDR : accent terracotta dans « Quelque chose est passé… ». */
.emdr-scope__possible h2 em {
  color: var(--terracotta);
  font-weight: 400;
}

/* Bilans : accent « pas l'inverse » en crème (et non terracotta) sur le
   fond sage de la section. */
.assessment-formats__heading h2 em {
  color: var(--ivory-light);
  font-weight: 400;
}

/* P9 — Bilans : « Une lecture d'ensemble » (centre du schéma) ne doit pas
   passer pour un titre → typo sans-serif (les titres du site sont en serif),
   plus discrète. On garde « d'ensemble » en terracotta. */
.assessment-hero__visual .assessment-hero__synthese {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.assessment-hero__visual .assessment-hero__synthese strong {
  font-weight: 650;
}

/* P10 — Tarifs : l'illustration du hero débordait sur la légende « Un temps
   défini… » (texte illisible). On dégage la légende dessous. En 1 colonne
   (tablette / large mobile), l'illustration est plus grande → marge plus forte. */
@media (min-width: 821px) {
  .tarifs-hero__caption {
    margin-top: 6rem;
  }
}
/* En 1 colonne (< 821px), l'illustration grandit avec la largeur et déborde
   de sa zone ; on dégage la légende avec une marge qui suit la largeur. */
@media (max-width: 820px) {
  .tarifs-hero__caption {
    margin-top: clamp(2rem, 20vw, 10rem);
  }
}

/* Tarifs : titre « IMO et EMDR… » — l'eyebrow et le titre sont empilés à
   gauche (fin de la colonne de droite orpheline), titre plus petit. */
.ocular-frames__heading {
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
.ocular-frames__heading h2 {
  text-align: left;
  font-size: clamp(2.2rem, 3.6vw, 3.7rem);
  max-width: 26ch;
}

/* P12 — Ressources : numéros de fiches alternés vert forêt / terracotta. */
.seo-resource-card:nth-child(odd) .seo-resource-card__number {
  color: var(--forest);
}
.seo-resource-card:nth-child(even) .seo-resource-card__number {
  color: var(--terracotta);
}

/* P11 (2e passe) — Ressources : la catégorie (eyebrow) prend la couleur
   inverse du numéro. Numéro vert → catégorie terracotta, et inversement. */
.seo-resource-card:nth-child(odd) .eyebrow {
  color: var(--terracotta-dark) !important; /* bat le !important de accessibilite.css (.resource-library .eyebrow) */
}
.seo-resource-card:nth-child(even) .eyebrow {
  color: var(--forest) !important;
}

/* P3 (2e passe) — Accompagnements : accent terracotta « sans parcours imposé ». */
.accompaniment-process__heading h2 em {
  color: var(--terracotta);
  font-weight: 400;
}

/* P7 (2e passe) — Ma pratique : accent terracotta « comme exigences ». */
.practice-grounding__background h3 em {
  color: var(--terracotta);
  font-weight: 400;
}

/* Tarifs — cartes IMO/EMDR : la carte IMO (fond sable, chaud) reste en titre
   forêt sobre ; la carte EMDR (fond forêt, froid) reçoit un accent sable
   chaud sur « qui se prépare et se réévalue ». */
.ocular-frame--emdr h3 em {
  color: var(--sand);
  font-weight: 400;
}

/* P4 (2e passe) — EMDR : hero moins haut (le titre masquait les boutons). */
.emdr-hero h1 {
  font-size: clamp(2.8rem, 4.8vw, 5rem);
}

/* P5 (2e passe) — EMDR : titre « Il ne s'agit pas d'effacer… » plus petit. */
.emdr-understand h2 {
  font-size: clamp(2.4rem, 4vw, 4.6rem);
}