/* Pages de contenu FR : fil d'Ariane, introduction, texte courant, listes, captures, cartes, renvois. Jetons de base.css uniquement. */
.fil-ariane { margin-bottom: 20px; font-size: 0.875rem; color: var(--texte-attenue); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.fil-ariane li + li::before { content: "/"; margin-right: 8px; }
.fil-ariane a { color: var(--texte-attenue); }
.fil-ariane a:hover { color: var(--marque-texte); }
.contenu-tete { padding-block: 40px 24px; }
.contenu-tete-grille { display: grid; gap: 36px; align-items: center; }
.contenu-tete h1 { font-size: clamp(2.25rem, 4vw + 0.5rem, 3.5rem); text-wrap: balance; }
.contenu-tete .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.contenu-essai { margin-top: 16px; font-size: 0.9375rem; color: var(--texte-attenue); }
.section-contenu { padding-block: 48px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--trait); }
.section-contenu h2 { max-width: 24ch; margin-bottom: 20px; font-size: clamp(1.625rem, 2.4vw + 0.6rem, 2.375rem); text-wrap: balance; }
.prose { max-width: 70ch; }
.prose p + p, .prose p + figure { margin-top: 16px; }
.prose a { font-weight: 500; }
.bloc-liste { display: grid; gap: 28px; margin-top: 8px; }
.bloc-liste h3 { margin-bottom: 6px; padding-left: 28px; position: relative; }
.bloc-liste h3::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; background: var(--marque-texte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bloc-liste p { max-width: 64ch; padding-left: 28px; color: var(--texte-attenue); }
.bloc-liste a { font-weight: 500; }
.capture { margin: 0; }
.capture img { width: 100%; border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); box-shadow: var(--ombre-douce); }
.capture figcaption { margin-top: 10px; max-width: 70ch; font-size: 0.875rem; color: var(--texte-attenue); }
.section-contenu .capture { max-width: 960px; margin-top: 32px; }
.cartes-contenu { display: grid; gap: 16px; margin-top: 8px; }
.carte-contenu { padding: 24px; border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); box-shadow: var(--ombre-douce); }
.section-alt .carte-contenu { background: var(--fond); }
.carte-contenu h3 { margin-bottom: 8px; }
.carte-contenu p { color: var(--texte-attenue); }
.voir-aussi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.voir-aussi a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); font-weight: 500; text-decoration: none; }
.voir-aussi a:hover { border-color: var(--marque); }
.final .final-sous { margin-top: 20px; color: var(--sur-marque); }
@media (min-width: 720px) { .cartes-contenu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .contenu-tete { padding-block: 64px 40px; }
  .contenu-tete-grille.avec-capture { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .section-contenu { padding-block: 72px; }
}