/* Mbouli — vitrine publique (D-107A). Même charte que l'application, « la liane » v3.1 : quatre couleurs exactes
   (D-024), aucune transparence ; Poppins, embarquée (D-108, la police de Sankofa ; Regular 400, Medium 500, SemiBold 600 — le gras s'y résout) ; abricot = lumière et accent, jamais porteur de texte sur ivoire ;
   sur abricot, seul le prune écrit. Une colonne, texte à gauche, lignes courtes. Aucun script. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("polices/Poppins-SemiBold.ttf") format("truetype"); }
:root {
  --prune: #35213E; --abricot: #E6A06A; --ivoire: #FCF8F1; --olive: #596334;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --colonne: 720px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivoire); color: var(--prune); font-family: "Poppins", system-ui, sans-serif;
  font-size: 18px; line-height: 1.55; }
:focus-visible { outline: 3px solid var(--abricot); outline-offset: 3px; }
a { color: var(--prune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--olive); }
img { max-width: 100%; height: auto; }
/* Les photos (D-107A, 27/09) : une par idée, jamais en fond de texte ; coins de 16 px comme l'encart ; la légende dit
   ce qu'on regarde. Deux largeurs (800 / 1400) et WebP avec repli JPEG : 70 à 250 Ko, jamais plus. */
.photo { margin: var(--e5) 0; }
.photo.hero { margin: 0 0 var(--e6); }
.photo img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--olive); }
.photo figcaption { color: var(--olive); font-size: 15px; line-height: 1.4; margin: var(--e2) var(--e1) 0; }

/* le socle prune, comme dans l'application */
.bandeau { background: var(--prune); color: var(--ivoire); border-bottom: 4px solid var(--abricot); }
.entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap;
  max-width: var(--colonne); margin: 0 auto; padding: var(--e3) var(--e4); }
.logo { display: inline-block; background: var(--ivoire); border-radius: 14px; padding: var(--e1) var(--e3); line-height: 0; }
.logo img { height: 44px; width: auto; }
nav.menu { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); font-size: 16px; }
nav.menu a { color: var(--ivoire); text-decoration: none; padding: var(--e1) 0; border-bottom: 2px solid transparent; }
nav.menu a[aria-current="page"], nav.menu a:hover { border-bottom-color: var(--abricot); color: var(--ivoire); }

main { max-width: var(--colonne); margin: 0 auto; padding: var(--e6) var(--e4) var(--e8); }
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 var(--e4); }
h2 { font-size: 24px; line-height: 1.25; margin: var(--e7) 0 var(--e3); }
h3 { font-size: 19px; margin: var(--e5) 0 var(--e2); }
p, li { max-width: 62ch; }
p { margin: 0 0 var(--e4); }
.forte { font-size: 22px; line-height: 1.4; }
.phrase { color: var(--olive); font-size: 20px; margin: var(--e5) 0; }
.encart { border: 2px solid var(--olive); border-radius: 16px; padding: var(--e4) var(--e5); margin: var(--e5) 0; }
.encart p:last-child { margin-bottom: 0; }
.bouton { display: inline-block; background: var(--prune); color: var(--ivoire); text-decoration: none; font-weight: 700;
  padding: var(--e3) var(--e5); border-radius: 999px; margin-top: var(--e2); }
.bouton:hover { background: var(--olive); color: var(--ivoire); }
.secondaire { background: var(--ivoire); color: var(--prune); border: 2px solid var(--prune); }
.secondaire:hover { background: var(--ivoire); color: var(--olive); border-color: var(--olive); }

/* le parcours en quatre étapes, sur la liane : le motif de l'application, pas un schéma générique */
.liane { list-style: none; margin: var(--e5) 0; padding: 0 0 0 var(--e6); position: relative; }
.liane::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; background: var(--olive); }
.liane li { position: relative; padding: 0 0 var(--e5); }
.liane li:last-child { padding-bottom: 0; }
.liane li::before { content: ""; position: absolute; left: calc(-1 * var(--e6) + 3px); top: 7px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--abricot); border: 2px solid var(--prune); }
.liane li:nth-child(2)::before { background: var(--ivoire); }
.liane li:nth-child(3)::before { background: var(--olive); border-color: var(--olive); }
.liane li:nth-child(4)::before { background: var(--ivoire); border-color: var(--olive); }
.liane strong { display: block; font-size: 19px; }
.liane span { color: var(--olive); }

footer { border-top: 2px solid var(--olive); color: var(--olive); font-size: 15px; }
footer div { max-width: var(--colonne); margin: 0 auto; padding: var(--e4); display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }
footer a { color: var(--olive); }
footer .slogan { width: 100%; color: var(--prune); }  /* le slogan D-026, discret, sous la présentation */
footer .note { width: 100%; font-size: 14px; }  /* « Images d'illustration. » ; jamais sous 14 px (jetons) */
@media (max-width: 480px) { h1 { font-size: 28px; } .forte { font-size: 20px; } body { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }