/* ==========================================================================
   ABLOGUI — Composants partagés par toutes les pages (repris de la maquette :
   typo mixte, boutons pilule, pastilles, bord peint, pied clair)
   ========================================================================== */

:root {
  --ab-script: "Chewy", "Nunito", var(--ab-police);   /* mot d'accent (police de L'Arche-like) */
  --ab-doux: cubic-bezier(.16, 1, .3, 1);
}

/* --- Typo mixte : sans très grasse + mot manuscrit coloré -------------- */
.ab-t {
  font-size: var(--ab-fs-2xl); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
}
.ab-t--l { font-size: var(--ab-fs-xl); line-height: 1.1; }
.ab-script {
  font-family: var(--ab-script); font-weight: 400; font-size: 1.06em; line-height: .9; letter-spacing: .005em;
  color: var(--ab-rouge-texte);
}
.ab-sur-sombre .ab-script, .ab-sombre .ab-script { color: var(--ab-jaune); }
.ab-script--vert { color: var(--ab-vert-texte); }

/* Bouton pilule à chevron (L'Arche) */
.ab-pilule {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 22px;
  border-radius: 999px; border: 2px solid currentColor; font-weight: 800; font-size: var(--ab-fs-s);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.ab-pilule svg { width: 16px; height: 16px; transition: transform .5s var(--ab-doux); }
.ab-pilule:hover svg { transform: translateX(4px); }
.ab-pilule--plein { background: var(--ab-noir); border-color: var(--ab-noir); color: #fff; }
.ab-pilule--plein:hover { background: var(--ab-vert-texte); border-color: var(--ab-vert-texte); }
.ab-pilule--jaune { background: var(--ab-jaune); border-color: var(--ab-jaune); color: var(--ab-noir); }
.ab-pilule--clair { color: #fff; }
.ab-pilule--clair:hover { background: #fff; color: var(--ab-noir); border-color: #fff; }
.ab-pilule--contour:hover { background: var(--ab-noir); color: #fff; border-color: var(--ab-noir); }

/* En-tête : bouton « Adhérer » en pilule contour (L'Arche « Donate ») */
.ab-entete__adherer.ab-pilule { min-height: 44px; padding: 8px 20px; }

/* Pied de page clair — agencement de la v1 */
.ab-pied--clair { background: #fff; color: var(--ab-texte-doux); border-top: 1px solid var(--ab-ligne); }
.ab-pied--clair h3 { color: var(--ab-noir); }
.ab-pied--clair a:hover { color: var(--ab-vert-texte); }
.ab-pied--clair .ab-pied__bas { border-top-color: var(--ab-ligne); }
.ab-pied--clair .ab-reseaux a { border-color: var(--ab-ligne-forte); color: var(--ab-noir); }
.ab-pied--clair .ab-reseaux a:hover { border-color: var(--ab-vert); color: var(--ab-vert-texte); }

/* ------------------------------------------------------------------ */
.ab-rond-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ab-papier); color: var(--ab-noir); transition: background .4s ease, color .4s ease, transform .5s var(--ab-doux); }
.ab-rond-ico svg { width: 18px; height: 18px; }
.ab-rond-ico--plein { background: var(--ab-noir); color: #fff; }
a:hover > .ab-rond-ico, a.ab-rond-ico:hover { background: var(--ab-vert-texte); color: #fff; }
.ab-infos { display: grid; gap: 6px; font-size: var(--ab-fs-s); color: var(--ab-texte-doux); }
.ab-infos span { display: flex; align-items: center; gap: 8px; }
.ab-infos svg { width: 16px; height: 16px; flex: none; color: var(--_c, var(--ab-vert)); }

.ab-avec-bord { position: relative; }
.ab-bord { position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); width: 100%; height: 56px; pointer-events: none; z-index: 2; }
.ab-bord path { fill: var(--_fond, #fff); }
.ab-bord--inverse { transform: scaleX(-1); }

.lx-pastille { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: var(--_c, var(--ab-noir)); }
.lx-date { font-size: var(--ab-fs-xs); font-weight: 700; color: var(--ab-texte-doux); }
.c-r { --_c: var(--ab-rouge); --_f: #fde3e5; }
.c-v { --_c: var(--ab-vert); --_f: #d9f1e6; }
.c-j { --_c: #b07a00; --_f: #fdf1cc; }
.c-n { --_c: var(--ab-bleu-nuit); --_f: #e3e9ef; }

/* En-tête sur téléphone : logo lisible, « Adhérer » reste dans le menu et le pied de page */
@media (max-width: 640px) { .ab-entete__adherer.ab-pilule { display: none; } }

/* ------------------------------------------------------------------ */
/* Ajouts du thème                                                     */
/* ------------------------------------------------------------------ */
/* Couverture générée (document sans image) : dégradé de la couleur du type */
.c-r { --_g: linear-gradient(160deg, #9e1622, #cd1d2d); }
.c-j { --_g: linear-gradient(160deg, #c99500, #edb710); }
.c-v { --_g: linear-gradient(150deg, #00704b, #008e60 60%, #26a060); }
.c-n { --_g: var(--ab-degrade); }
.c-k { --_g: linear-gradient(160deg, #1d1d1b, #3a3a36); }
.c-j .bi-doc__couv--gen, .c-j .fd-couv--gen { color: var(--ab-noir); }

/* Pied de page : liens légaux (menu « Pied de page — liens légaux ») */
.ab-pied__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.ab-pied .ab-pied__legal { display: flex; }

/* Contenu rédigé dans l'éditeur (pages, texte intégral d'une publication) */
.ab-prose { max-width: 72ch; font-size: var(--ab-fs-m); line-height: 1.7; }
.ab-prose > * + * { margin-top: 1em; }
.ab-prose h2 { margin-top: 1.8em; font-size: var(--ab-fs-xl); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
.ab-prose h3 { margin-top: 1.5em; font-size: var(--ab-fs-l); font-weight: 900; }
.ab-prose a { color: var(--ab-vert-texte); text-decoration: underline; text-underline-offset: 3px; }
.ab-prose ul, .ab-prose ol { padding-left: 1.3em; }
.ab-prose blockquote { padding-left: 20px; border-left: 4px solid var(--ab-vert); font-weight: 700; }
.ab-prose img { border-radius: var(--ab-rayon); }

/* Liste d'articles (gabarit générique : actualités, recherche) */
.ab-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ab-liste li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--ab-ligne); }
.ab-liste li:not(:has(img)) { grid-template-columns: 1fr; }
.ab-liste img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.ab-liste h2 { font-size: 1.25rem; font-weight: 900; line-height: 1.3; }
.ab-liste h2 a:hover { color: var(--ab-vert-texte); }
.ab-liste p { margin-top: 6px; color: var(--ab-texte-doux); font-size: var(--ab-fs-s); }
@media (max-width: 620px) { .ab-liste li { grid-template-columns: 1fr; } }
.ab-pagination { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--ab-ligne-forte); border-radius: 999px; font-weight: 800; }
.ab-pagination .current { background: var(--ab-noir); border-color: var(--ab-noir); color: #fff; }

/* Annotation à la main (Permanent Marker) : « Nouveau ! », « Vite ! »… à placer dans un parent en position relative */
.ab-annotation { position: absolute; z-index: 4; pointer-events: none; font-family: "Permanent Marker", "Chewy", cursive; font-size: 1.15rem; line-height: 1; color: var(--ab-rouge); transform: rotate(-8deg); white-space: nowrap; }
.ab-annotation::after { content: ""; position: absolute; left: 30%; top: 110%; width: 26px; height: 18px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; border-radius: 0 0 0 16px; transform: rotate(-20deg); }