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

:root {
  --ab-script: var(--ab-titres);   /* mot d'accent : même police que le titre, en très fin (contraste de graisses) */
  --ab-graisse-accent: 250;
  --ab-graisse-chiffre: 800;
  --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: 800; 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: var(--ab-graisse-accent); font-size: 1em; line-height: inherit; letter-spacing: -.02em;
  color: var(--ab-vert-texte);
}
/* Ancien mot surligné au jaune : le contraste de graisses suffit, plus de surlignage */
.ab-script--surligne { background: none; }
/* Mot d'accent en gras (titre « Ensemble, pour un numérique citoyen en Guinée ») : le mot le plus important */
.ab-script--gras { font-weight: 900; letter-spacing: -.03em; }
.ab-t--fin { font-weight: 300; letter-spacing: -.02em; } /* le reste du titre en fin, seul le mot d'accent en gras */
.ab-sur-sombre .ab-script, .ab-sombre .ab-script { color: #9fe0c4; }
.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-vert-texte); border-color: var(--ab-vert-texte); color: #fff; }
.ab-pilule--plein:hover { background: var(--ab-vert-nuit); border-color: var(--ab-vert-nuit); }
.ab-pilule--blanc { background: #fff; border-color: #fff; color: var(--ab-vert-nuit); }
.ab-pilule--blanc:hover { background: var(--ab-vert-clair); border-color: var(--ab-vert-clair); }
.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 réglable (Personnaliser → ABLOGUI → En-tête) : texte, lien, fond, bordure et couleur du texte.
   Sans fond, il s'inverse au survol ; avec un fond, il fonce légèrement */
.ab-entete__bouton.ab-pilule { min-height: 44px; padding: 8px 20px; background: var(--_bt-fond, transparent); border-color: var(--_bt-bord, var(--ab-noir)); color: var(--_bt-texte, var(--ab-noir)); }
.ab-entete__bouton.ab-pilule:hover { background: var(--_bt-bord, var(--ab-noir)); border-color: var(--_bt-bord, var(--ab-noir)); color: #fff; }
.ab-entete__bouton--plein.ab-pilule:hover { background: var(--_bt-fond); color: var(--_bt-texte, var(--ab-noir)); filter: brightness(.9); }

/* Pied de page clair — agencement de la v1 */
/* Pied de page beige, ouvert par le même bord peint que les en-têtes de page (retour du 27 octobre 2026) */
.ab-pied--clair { background: var(--ab-papier); color: var(--ab-texte-doux); }
.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; }
.c-k { --_c: var(--ab-noir); --_f: #ecebe7; }
/* Teintes d'appoint (types d'événement…) : texte blanc lisible sur la couleur, fond pâle assorti */
.c-b { --_c: #1f63b5; --_f: #e2ecf8; --_g: linear-gradient(160deg, #174a88, #1f63b5); }
.c-p { --_c: #6b46c1; --_f: #ece6f9; --_g: linear-gradient(160deg, #523494, #6b46c1); }
.c-o { --_c: #c4561a; --_f: #fbe7db; --_g: linear-gradient(160deg, #9c4213, #c4561a); }
.c-t { --_c: #0e7c86; --_f: #dcf1f2; --_g: linear-gradient(160deg, #0a5c63, #0e7c86); }
.c-m { --_c: #b8326e; --_f: #f8e1ec; --_g: linear-gradient(160deg, #8f2556, #b8326e); }

/* Le bouton de l'en-tête tient sur une ligne ; en dessous de 1320 px, le menu (8 entrées) prend toute la place */
.ab-entete__bouton.ab-pilule { white-space: nowrap; }
@media (max-width: 1320px) { .ab-entete__bouton.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; }

/* Petite annotation inclinée : « Nouveau ! », « Bientôt ! »… à placer dans un parent en position relative */
.ab-annotation { position: absolute; z-index: 4; pointer-events: none; font-family: var(--ab-police); font-weight: 700; font-size: .95rem; letter-spacing: .01em; line-height: 1; color: var(--ab-vert-texte); 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); }

/* Fenêtre de recherche (loupe de l'en-tête, retour du 24 octobre 2026) : au centre sur ordinateur, plein écran sur téléphone */
html.ab-sans-defilement { overflow: hidden; }
.ab-recherche { width: min(780px, calc(100% - 32px)); max-width: none; max-height: min(660px, calc(100dvh - 48px)); margin: clamp(16px, 10vh, 110px) auto auto; padding: 0; border: 0; border-radius: 28px; background: var(--ab-blanc); color: var(--ab-texte); box-shadow: var(--ab-ombre-forte); overflow: hidden; }
.ab-recherche[open] { display: flex; flex-direction: column; animation: ab-recherche-entree .28s var(--ab-doux); }
.ab-recherche::backdrop { background: rgba(10, 36, 28, .55); backdrop-filter: blur(6px); }
@keyframes ab-recherche-entree { from { opacity: 0; translate: 0 -14px; } }
.ab-recherche__champ { display: flex; flex: none; align-items: center; gap: 10px; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--ab-ligne); }
.ab-recherche__champ > svg { width: 22px; height: 22px; flex: none; color: var(--ab-vert-texte); }
.ab-recherche__champ input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; font: inherit; font-size: var(--ab-fs-l); color: var(--ab-noir); outline: 0; }
.ab-recherche__champ input::placeholder { color: #7d7b74; }
.ab-recherche__champ input::-webkit-search-cancel-button { appearance: none; } /* une seule croix : celle qui ferme */
.ab-recherche__valider.ab-pilule { flex: none; min-height: 44px; }
.ab-recherche__corps { padding: 18px 24px 26px; overflow-y: auto; }
.ab-recherche__etat { font-size: var(--ab-fs-s); font-weight: 700; color: var(--ab-texte-doux); }
.ab-recherche__etat:empty { display: none; }
.ab-recherche__resultats { display: grid; gap: 2px; margin: 8px -10px 0; padding: 0; list-style: none; }
.ab-recherche__resultats:empty { display: none; }
.ab-recherche__resultats a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 14px; transition: background var(--ab-transition); }
.ab-recherche__resultats a:hover, .ab-recherche__resultats a:focus-visible { background: var(--ab-menthe); outline: 0; }
.ab-recherche__resultats b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700; line-height: 1.35; color: var(--ab-noir); }
.ab-recherche__type { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ab-papier); font-size: 12px; font-weight: 800; color: var(--ab-vert-texte); }
.ab-recherche__type:empty { display: none; }
.ab-recherche__tout { margin-top: 14px; }
.ab-recherche__tout[hidden] { display: none; }
.ab-recherche__frequentes > p { font-size: var(--ab-fs-s); font-weight: 800; color: var(--ab-texte-doux); }
.ab-recherche__frequentes ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ab-recherche__frequentes a { display: inline-flex; padding: 8px 16px; border: 1px solid var(--ab-ligne-forte); border-radius: 999px; font-weight: 600; color: var(--ab-noir); transition: border-color var(--ab-transition), color var(--ab-transition); }
.ab-recherche__frequentes a:hover { border-color: var(--ab-vert); color: var(--ab-vert-texte); }
.ab-recherche__frequentes[hidden] { display: none; }
@media (max-width: 640px) {
  .ab-recherche { width: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .ab-recherche__champ { padding: 12px 12px 12px 16px; }
  .ab-recherche__valider.ab-pilule { display: none; } /* la touche « Rechercher » du clavier valide */
  .ab-recherche__corps { padding: 16px 16px 24px; }
  .ab-recherche__resultats a { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .ab-recherche[open] { animation: none; } }