/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Pages locales (agence-web-<ville>.html)
   ───────────────────────────────────────────────────────────────────────
   Chargée après page.css et contact.css, dont elle reprend le hero
   (.ct-hero), les engagements (.ct-engagement) et les cartes
   (.ct-joindre). Elle n'ajoute que le fil d'Ariane, le texte courant,
   les puces de références et la FAQ. Pages générées par
   outils/generer-pages-villes.py.
   ═══════════════════════════════════════════════════════════════════════ */

.lo-fil {
  margin: 0 0 22px;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.lo-fil a { color: var(--scr-on-night-mute); text-decoration: none; }
.lo-fil a:hover { color: var(--scr-orange); text-decoration: underline; }
.lo-fil span[aria-hidden] { margin-inline: 6px; }

/* Les cartes de pôle : le titre de carte est le nom du pôle, plus lisible
   que l'étiquette en capitales de .ct-joindre.                        */
.lo-poles h3 {
  font-family: var(--scr-font);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.lo-poles a { color: var(--scr-orange); }

.lo-prose { max-width: 70ch; }
.lo-prose p {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
  color: var(--scr-on-night-soft);
}

.lo-sous-titre {
  margin: clamp(36px, 4vw, 52px) 0 16px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  color: var(--scr-on-night);
}
.lo-sous-titre em { font-style: normal; color: var(--scr-orange); }

.lo-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lo-puces li {
  padding: 8px 16px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: var(--scr-verre-1);
  font-size: 15px;
  color: var(--scr-on-night-soft);
}
.lo-puces--liens li { padding: 0; }
.lo-puces--liens a {
  display: inline-block;
  padding: 8px 16px;
  color: var(--scr-on-night-soft);
  text-decoration: none;
}
.lo-puces--liens a:hover { color: var(--scr-orange); }
.lo-renvoi { margin: 18px 0 0; }
.lo-renvoi a { color: var(--scr-orange); }

/* FAQ : <details> natifs, ouverts au clavier comme à la souris.        */
.lo-faq { max-width: 860px; border-top: 1px solid var(--scr-bord); }
.lo-faq__q { border-bottom: 1px solid var(--scr-bord); }
.lo-faq__q summary {
  cursor: pointer;
  padding: 20px 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  color: var(--scr-on-night);
  list-style-position: outside;
}
.lo-faq__q summary:hover { color: var(--scr-orange); }
.lo-faq__q p {
  margin: 0 0 22px;
  max-width: 70ch;
  line-height: 1.7;
  color: var(--scr-on-night-soft);
}

.lo-fin .ct-hero__actions { margin-top: 0; }

@media print {
  .lo-faq__q p { display: block; }
}