/* ══ REPÈRE MAINTENANCE — LES GUIDES ════════════════════════════════════
   Troisième et dernière feuille de la chaîne, chargée après « home-v2.css »
   puis « maintenance-v2.css ». Elle ne dessine que les objets propres à un
   guide : le fil d'Ariane, la tête, le sommaire, les chapitres, la prose,
   l'encadré « à retenir », la carte d'appel et l'index des guides.

   ELLE NE REDÉFINIT AUCUN JETON. C'est « maintenance-v2.css » qui a reteinté
   les trois jetons d'accent : les puces de liste, les encadrés et les liens
   d'ici prennent donc le bronze sans qu'une seule couleur soit écrite. Le
   jaune du surligneur et le marine de la carte d'appel restent ceux de
   l'accueil, comme sur le reste de la famille.

   Les composants viennent des guides Loi 25, dont ils reprennent les
   proportions. Ils ont été repris un par un plutôt que la feuille entière :
   sur les 31 Ko de « guide-v2.css », 23 % seulement servaient ici, et le
   reste décrivait des objets qui n'existent que sur le cluster Loi 25.

   MOUVEMENT. Un guide est plus calme que la page commerciale : la tête entre
   avec le geste de l'accueil, le surligneur du titre tourne, les chapitres
   se révèlent au défilement. Rien d'autre. Pas de carnet vivant.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Le fil d'Ariane ─────────────────────────────────────────────────── */

.fil { padding-top: clamp(20px, 2vw, 26px); }

.fil ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.fil li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.fil li + li::before {
  color: var(--line);
  content: "/";
}

.fil a { color: inherit; text-decoration: none; transition: color 160ms ease; }
.fil a:hover { color: var(--green); }
.fil [aria-current="page"] { color: var(--ink); }

/* ── La tête du guide ────────────────────────────────────────────────── */

.guide-tete { padding: clamp(30px, 3vw, 44px) 0 clamp(72px, 6.6vw, 100px); }

.guide-tete-grille {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  gap: clamp(52px, 6.4vw, 96px);
}

.guide-tete h1 {
  font-size: clamp(2.9rem, 4.4vw, 3.9rem);
  text-wrap: balance;
}

/* Le surligneur de l'accueil, jaune, qui se retrace en boucle. C'est la
   seule chose qui bouge en continu sur un guide. */
.guide-tete h1 mark {
  padding: 0 0.04em;
  background-color: transparent;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-position: 0 0.52em;
  background-repeat: no-repeat;
  background-size: 100% 0.38em;
  color: inherit;
}

.guide-lead {
  max-width: 46ch;
  margin-bottom: 32px;
  color: var(--body);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(30px, 3vw, 40px) 0 0;
  padding-top: clamp(18px, 1.8vw, 24px);
  border-top: 1px solid var(--line);
  gap: 6px 26px;
  color: var(--muted);
  font-family: var(--text);
  font-size: 0.86rem;
}

@media (prefers-reduced-motion: no-preference) {
  .guide-tete-copie > * { animation: hero-copy-enter 560ms var(--ease-out) both; }
  .guide-tete-copie > :nth-child(2) { animation-delay: 60ms; }
  .guide-tete-copie > :nth-child(3) { animation-delay: 120ms; }
  .guide-tete-copie > :nth-child(4) { animation-delay: 180ms; }
  .guide-tete-copie > :nth-child(5) { animation-delay: 240ms; }

  .guide-tete h1 mark {
    animation-name: retracer-marque;
    animation-duration: 9s;
    animation-delay: 620ms;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
    animation-iteration-count: infinite;
  }

  .js-mouvement.onglet-cache .guide-tete h1 mark { animation-play-state: paused; }
}

/* ── Le sommaire ─────────────────────────────────────────────────────── */

.sommaire { max-width: 640px; }

.sommaire > summary {
  padding-bottom: 16px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
  list-style: none;
}

.sommaire > summary::-webkit-details-marker { display: none; }

.sommaire ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  counter-reset: plan;
  list-style: none;
}

.sommaire li {
  border-bottom: 1px solid var(--line);
  counter-increment: plan;
}

.sommaire a {
  display: grid;
  align-items: baseline;
  padding: 12px 0;
  color: var(--ink);
  grid-template-columns: 30px minmax(0, 1fr);
  font-family: var(--display);
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

/* Chiffres tabulaires en Public Sans, jamais en monospace : c'est la
   correction appliquée à toute la famille. */
.sommaire a::before {
  color: var(--muted);
  content: counter(plan, decimal-leading-zero);
  font-family: var(--text);
  font-size: 0.66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sommaire a:hover { color: var(--green); transform: translateX(6px); }

/* ── Les chapitres ───────────────────────────────────────────────────── */

.guide-bloc { padding: clamp(76px, 6.4vw, 100px) 0; }
.guide-bloc-teinte { background: var(--paper-deep); }
.guide-bloc-blanc { background: var(--white); }

/* ── La prose ────────────────────────────────────────────────────────── */

.prose > p {
  max-width: 62ch;
  margin-bottom: 17px;
  color: var(--body);
  font-size: 1.02rem;
  line-height: 1.72;
}

.prose > p:last-child { margin-bottom: 0; }

.prose h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.14rem, 1.45vw, 1.32rem);
  font-weight: 600;
}

.prose strong, .prose b { color: var(--ink); font-weight: 650; }

.prose a { color: var(--green); }

.prose ul {
  display: grid;
  margin: 0 0 18px;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.prose li {
  position: relative;
  max-width: 60ch;
  padding-left: 22px;
  color: var(--body);
  font-size: 0.99rem;
  line-height: 1.62;
}

/* Un filet, pas une puce ronde. Même trait que les séparateurs de l'accueil. */
.prose li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 11px;
  height: 2px;
  background: var(--green);
  content: "";
}

/* ── L'encadré « à retenir » ─────────────────────────────────────────── */

.retenir {
  margin: clamp(26px, 2.6vw, 34px) 0 0;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius-card);
  background: var(--green-light);
}

.retenir-etiquette {
  margin: 0 0 10px;
  color: var(--green-dark);
  font-family: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

.retenir p {
  max-width: 54ch;
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.62;
}

/* ── La carte d'appel ────────────────────────────────────────────────── */

.appel-carte {
  display: grid;
  align-items: end;
  padding: clamp(34px, 3.6vw, 56px);
  border-radius: var(--radius-surface);
  background: var(--navy);
  color: rgba(253, 254, 252, 0.78);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(30px, 4vw, 56px);
}

.appel-carte h2 {
  max-width: 17ch;
  margin-bottom: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.85rem, 2.9vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.appel-carte p {
  max-width: 36ch;
  margin-bottom: 24px;
  font-size: 1.04rem;
  line-height: 1.62;
}

.appel-carte :focus-visible { outline-color: var(--yellow); }

/* ── L'index des guides ──────────────────────────────────────────────── */

/* Reprend « .family-list » de l'accueil : mêmes filets, mêmes flèches. Seules
   les proportions changent, un guide étant plus court qu'un service. */
.guide-index .family-item {
  min-height: 88px;
  padding: 22px 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr) 44px;
  gap: 30px;
}

.guide-index .family-name {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  letter-spacing: -0.04em;
}

.guide-index .family-arrow { font-size: 1.35rem; }

/* ── Les figures explicatives ────────────────────────────────────────── */

/* Trois sur l'ensemble du cluster, jamais décoratives : chacune porte une
   idée que le texte met plus de mots à dire. Même trait de 1,5 px que les
   vignettes de l'accueil. */
.figure-guide {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 62ch;
}

.figure-guide svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--green);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.figure-guide figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.figure-guide .f-fond { opacity: 0.3; }
.figure-guide .f-plein { fill: currentColor; stroke: none; }
.figure-guide .f-texte {
  fill: var(--muted);
  stroke: none;
  font-family: var(--text);
  font-size: 7px;
  font-weight: 600;
}
.figure-guide .f-titre {
  fill: var(--ink);
  stroke: none;
  font-family: var(--display);
  font-size: 8px;
  font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .guide-tete-grille { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .appel-carte { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  .guide-tete h1 { font-size: clamp(2.35rem, 9.6vw, 2.8rem); }
  .guide-lead { margin-bottom: 28px; font-size: 1.04rem; }
  .guide-bloc { padding-block: 72px; }
  .appel-carte { padding: 30px 24px; }
  .appel-carte .button { width: 100%; }

  /* Le sommaire se replie sur téléphone : il vaut mieux le rouvrir que de
     faire défiler douze entrées avant d'atteindre le texte. */
  .sommaire > summary {
    padding: 17px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    list-style: revert;
  }

  .sommaire[open] > summary { border-bottom-color: transparent; }
  .sommaire > summary::-webkit-details-marker { display: revert; }
  .sommaire ol { border-top: 0; }

  .guide-index .family-item {
    min-height: 0;
    padding: 22px 0;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 12px;
  }

  .guide-index .family-name { font-size: clamp(1.35rem, 6.4vw, 1.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .sommaire a, .fil a { transition-duration: 0.01ms; }
  .guide-tete-copie > * { animation: none; }
}