/* ══════════════════════════════════════════════════════════════════════════
   Les pages piliers — lecture longue.

   Ici, PAS de carrousel : une page pilier se lit d'une traite. C'est le format
   qu'un décideur parcourt avant de trancher, et celui que Google indexe le mieux.
   La barre reste en bas : l'agent peut guider le visiteur vers une autre page
   sans qu'il ait à revenir à l'accueil.
   ══════════════════════════════════════════════════════════════════════════ */

body.mode-pilier {
  padding-bottom: calc(var(--h-barre, 132px) + 24px);
}

/* ── Retour vers l'accueil ── */
.retour {
  display: inline-block;
  padding: 16px clamp(16px, 5vw, 40px) 0;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.retour::before {
  content: "←";
  margin-right: 8px;
  color: var(--tq);
}

/* ── Fil d'Ariane ──
   Doublon volontaire avec le balisage BreadcrumbList : l'un pour l'humain,
   l'autre pour la machine. Les deux décrivent le MÊME chemin, toujours. */
.ariane {
  padding: 14px clamp(16px, 5vw, 40px) 0;
}
.ariane ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
}
.ariane li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--tq);
}
.ariane a { color: var(--muted); border-bottom: 1px solid transparent; }
.ariane a:hover { color: var(--tq-2); border-bottom-color: var(--tq); }
.ariane [aria-current] { color: var(--ink); }

/* ── En-tête ── */
.pilier-entete {
  padding: 18px clamp(16px, 5vw, 40px) 6px;
  max-width: 760px;
  margin: 0 auto;
}
.pilier-entete h1 {
  font-size: clamp(27px, 5.4vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-top: 6px;
}

/* ── Le corps ──
   Largeur de ligne : 65 à 75 caractères. Au-delà, l'œil perd la ligne suivante
   en revenant à la marge — c'est mesuré depuis des décennies en typographie. */
.pilier {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px) 60px;
}
.pilier-section { margin-top: 42px; }
.pilier-section h2 {
  font-size: clamp(20px, 3.2vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--tq-2);
  margin-bottom: 16px;
  scroll-margin-top: 20px;
}
.pilier-section p {
  color: var(--muted);
  font-size: clamp(15.5px, 2.1vw, 17px);
  line-height: 1.72;
  margin-bottom: 17px;
}
/* Le premier paragraphe de la page porte le regard : légèrement plus clair. */
.pilier-section:first-child p:first-of-type {
  color: var(--ink);
  font-size: clamp(16.5px, 2.3vw, 18.5px);
}
.pilier-section strong { color: var(--ink); font-weight: 600; }
.pilier-section a {
  color: var(--tq-2);
  border-bottom: 1px solid rgba(60, 240, 228, .35);
  transition: border-color .2s;
}
.pilier-section a:hover { border-bottom-color: var(--tq-2); }
.pilier-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  color: var(--tq-2);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ── La FAQ de la page ── */
.pilier .carte-faq {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--stroke);
}
.pilier .faq-titre { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .pilier-section a { transition: none; }
}