/* ---------- Typographie ----------

   Charis SIL, dérivée de la Bitstream Charter de Matthew Carter, dessinée pour
   rester lisible là où le rendu est mauvais, et étendue par SIL pour les
   orthographes africaines. Licence SIL Open Font License 1.1, reproduite dans
   /assets/polices/OFL.txt.

   Trois coupes seulement — romain, italique, gras —, découpées aux 258 signes
   dont le site a besoin : 53 Ko en tout, contre 2,6 Mo pour les trois fontes
   complètes. Voir outils/polices.py.

   font-display: swap — le texte s'affiche immédiatement dans la fonte système,
   puis bascule. Sur une connexion lente, personne n'attend devant une page
   blanche. C'est tout le propos de ce site.                               */

@font-face {
  font-family: "Charis SIL";
  src: url("/assets/polices/charis-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("/assets/polices/charis-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("/assets/polices/charis-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@charset "utf-8";
/* SANKARA, L'ÉTERNEL VEILLEUR — Hamed Ouattara, 2026
   Feuille de style unique.

   Parti pris : un site institutionnel lisible, chaleureux et familier, qui se
   tient aussi bien sur un écran d'ordinateur que sur un téléphone d'entrée de
   gamme. Fond clair, titres en serif, un rappel discret des couleurs nationales
   du Burkina Faso. Aucune police distante : la pile système suffit, et rien
   n'est téléchargé en plus du texte. Conception mobile d'abord, mais les mises
   en page d'écran large sont traitées à part entière. */

:root {
  /* Fonds et texte */
  --papier: #faf7f1;
  --papier-2: #f1ebe0;
  --blanc: #ffffff;
  --encre: #1c1a17;
  --encre-douce: #5c564d;

  /* Couleurs nationales, employées avec retenue */
  --rouge: #9c1c21;
  --rouge-clair: #c33a35;
  --vert: #0a6136;
  --or: #d99b1c;

  /* Le drapeau italien — ses couleurs, pas des variantes accordées au site */
  --it-vert: #008c45;
  --it-blanc: #f4f5f0;
  --it-rouge: #cd212a;

  /* Le matériau de l'œuvre */
  --corten: #8a4f2b;

  /* Filets et bordures */
  --filet: #ddd5c7;        /* séparations décoratives */
  --bord-actif: #8c8375;   /* 3,5:1 : bordures de commandes */
  --pied-fond: #1f1c18;
  --pied-texte: #b8b2a7;

  --mesure: 38rem;
  --large: 75rem;
  --gouttiere: 1.25rem;

  --pas: 1.5rem;
  --pas-section: clamp(3rem, 7vw, 5.5rem);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --serif: "Charis SIL", Georgia, "Times New Roman", "Noto Serif", serif;

  --ombre: 0 1px 2px rgba(28, 26, 23, 0.06), 0 4px 14px rgba(28, 26, 23, 0.06);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Prime sur toute règle d'affichage portée par une classe. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

img, svg, video, picture { max-width: 100%; height: auto; display: block; }

/* ---------- Liens ---------- */

a { color: var(--rouge); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rouge-clair); }

:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; border-radius: 2px; }

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 0.8rem 1.2rem;
  background: var(--rouge); color: var(--blanc);
  font-weight: 700; text-decoration: none;
}
.saut:focus { left: 0; }

/* ---------- Titres et texte ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 var(--pas);
  color: var(--encre);
}

h1 { font-size: clamp(1.9rem, 5.5vw, 3.1rem); line-height: 1.12; }
h2 { font-size: clamp(1.45rem, 3.6vw, 2.1rem); margin-top: var(--pas-section); }
h3 { font-size: clamp(1.12rem, 2.4vw, 1.3rem); margin-top: calc(var(--pas) * 1.6); }
h2:first-child, h3:first-child { margin-top: 0; }

/* Filet court sous les titres de section : repère visuel familier. */
.section > .enveloppe > h2::after,
.section > .enveloppe > h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 0.9rem;
  background: var(--rouge);
}

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--pas); }

.prose { max-width: var(--mesure); }
.prose > :last-child { margin-bottom: 0; }

.surtitre {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 0.7rem;
  font-weight: 700;
}

.chapeau {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--encre);
  max-width: 44rem;
}

.doux { color: var(--encre-douce); }
.petit { font-size: 0.925rem; line-height: 1.65; }

ul, ol { padding-left: 1.3rem; }
li + li { margin-top: 0.45rem; }
.liste-nue { list-style: none; padding-left: 0; }

blockquote {
  margin-inline: 0;
  padding: 0.3rem 0 0.3rem 1.2rem;
  border-left: 3px solid var(--or);
  font-family: var(--serif);
  font-size: 1.1rem;
}
blockquote footer { font-family: var(--sans); color: var(--encre-douce); font-size: 0.9rem; }

/* La phrase que tout le monde connaît. Elle n'a ni discours ni date — elle
   est transmise — et c'est elle que le titre de l'œuvre reprend. On la
   distingue des quatre citations sourcées : plus grande, détachée, sur le
   rouge plutôt que sur l'or. */
blockquote.citation--maitresse {
  border-left-color: var(--rouge);
  border-left-width: 4px;
  margin-top: 2rem;
  padding: 0.9rem 0 0.9rem 1.5rem;
  font-size: 1.3rem;
  line-height: 1.45;
}
@media (min-width: 46em) {
  blockquote.citation--maitresse { font-size: 1.45rem; }
}

abbr[title] { text-decoration: underline dotted; cursor: help; }
strong { font-weight: 700; }

/* ---------- Mise en page ---------- */

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
@media (min-width: 60em) { :root { --gouttiere: 2.5rem; } }

.section { padding-block: var(--pas-section); }
.section--creuse { padding-block: calc(var(--pas-section) * 0.55); }
.section--teinte { background: var(--papier-2); }

/* ---------- En-tête ---------- */

/* Rappel du drapeau national, discret : cinq pixels en tête de page. */
/* Le bandeau des deux pays. Le Burkina Faso tient la moitié gauche en deux
   bandes superposées, l'Italie la moitié droite en trois bandes verticales :
   à six pixels, c'est la différence de structure qui les distingue, jamais la
   finesse du dessin. L'étoile n'y figure pas, elle serait une poussière ; elle
   est au pied de page, où le drapeau a la taille d'un drapeau. */
.drapeau {
  height: 6px;
  display: flex;
}
.drapeau > span { flex: 1; display: flex; }
.drapeau > span i { flex: 1; }
.drapeau__bf { flex-direction: column; }
.drapeau__bf i:first-child { background: var(--rouge); }
.drapeau__bf i:last-child  { background: var(--vert); }
.drapeau__it i:nth-child(1) { background: var(--it-vert); }
.drapeau__it i:nth-child(2) { background: var(--it-blanc); }
.drapeau__it i:nth-child(3) { background: var(--it-rouge); }

.entete { background: var(--blanc); border-bottom: 1px solid var(--filet); }

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--large);
  margin-inline: auto;
  padding: 1rem var(--gouttiere);
}

/* La marque porte le portrait découpé du monument — le pochoir du plan de
   fabrication, vectorisé. Le site s'ouvrait jusqu'ici sur du texte nu : un
   monument qui porte un visage doit se présenter avec. Voir
   outils/portrait-vectoriel.py. */
.marque {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.2;
  color: var(--encre);
}
.marque__portrait {
  width: auto;
  height: 2.6rem;
  flex: none;
  color: var(--rouge);
}
.marque__mots { display: block; }
@media (min-width: 46em) {
  .marque__portrait { height: 3rem; }
}
.marque:hover { color: var(--encre); }
.marque__titre {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
}
.marque__soustitre {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 0.2rem;
}

.bascule {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: var(--papier);
  border: 1px solid var(--bord-actif);
  color: var(--encre);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-radius: 3px;
}
.js .bascule { display: inline-flex; }
.bascule__traits { display: grid; gap: 3px; width: 17px; }
.bascule__traits i { display: block; height: 2px; background: currentColor; }

.nav { display: block; background: var(--papier-2); border-top: 1px solid var(--filet); }
.nav[data-ouvert="false"] { display: none; }

.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav__item { margin: 0; border-bottom: 1px solid var(--filet); }
.nav__lien {
  display: block;
  padding: 0.85rem var(--gouttiere);
  text-decoration: none;
  color: var(--encre);
  font-weight: 600;
  font-size: 0.975rem;
}
.nav__lien:hover { background: var(--blanc); color: var(--rouge); }
.nav__lien--courant {
  color: var(--rouge);
  box-shadow: inset 4px 0 0 var(--rouge);
  background: var(--blanc);
}

.langues {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0.8rem var(--gouttiere);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--filet);
}
.langues li { margin: 0; }
.langues a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.langues a:hover { color: var(--rouge); text-decoration: underline; }
.langues__courante { font-weight: 700; color: var(--encre); }

@media (min-width: 62em) {
  .bascule, .js .bascule { display: none; }
  .nav, .nav[data-ouvert="false"] { display: block; }
  .nav > * {
    max-width: var(--large);
    margin-inline: auto;
  }
  .nav__liste {
    display: flex;
    flex-wrap: wrap;
    padding-inline: var(--gouttiere);
  }
  .nav__item { border-bottom: 0; }
  /* Douze entrées : à 0,9375rem et 0,78rem d'écart elles débordaient d'une
     cinquantaine de pixels, et « Contact » retombait seul sur une deuxième
     ligne. Elles tiennent sur une ligne à partir de 1200 pixels, et reprennent
     leur aise au-delà de 1280. */
  .nav__lien {
    padding: 0.85rem 0.6rem;
    font-size: 0.9rem;
  }
  .nav__lien--courant { box-shadow: inset 0 -4px 0 var(--rouge); }
  .langues {
    justify-content: flex-end;
    border-bottom: 0;
    border-top: 1px solid var(--filet);
    padding-block: 0.5rem;
  }
}


/* LA COLONNE SUSPENDUE — sur écran large, le texte tenait dans la moitié
   gauche et la moitié droite restait vide. Une page à demi blanche se lit
   comme une page inachevée, quel que soit le soin du texte.

   Le titre de section passe donc dans une colonne à lui, à gauche, et tout le
   reste occupe la colonne de droite. La mise en page gagne sa largeur sans que
   la ligne de texte s'allonge : une ligne trop longue se lit mal, et la mesure
   reste à 38rem.

   :has() cible les seules sections ouvertes par un h2 — les pages de titre,
   qui s'ouvrent sur un h1, gardent leur pleine largeur. Un navigateur qui ne
   connaît pas :has() sert la mise en page d'avant, qui reste correcte. */
@media (min-width: 72em) {
  .section > .enveloppe:has(> h2) {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }
  .section > .enveloppe:has(> h2) > h2 {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  .section > .enveloppe:has(> h2) > :not(h2) {
    grid-column: 2;
  }
}

/* ---------- Bannière d'accueil ---------- */

/* La photographie du monument est verticale : plutôt que de la recadrer en
   bandeau, on la pose à côté du texte sur écran large, et au-dessus sur
   téléphone. L'œuvre reste entière. */
.banniere { background: var(--pied-fond); color: var(--papier); }
.banniere__grille {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  max-width: var(--large);
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) var(--gouttiere);
}
@media (min-width: 58em) {
  .banniere__grille { grid-template-columns: 1.15fr 0.85fr; }
}
.banniere__figure { margin: 0; }
.banniere__image {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 3px;
}
.banniere__credit {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: #a39c90;
}
.banniere h1 { color: var(--papier); margin-bottom: 1.1rem; }
.banniere h1::after { display: none; }
.banniere .surtitre { color: var(--or); }
.banniere .chapeau { color: #ece6db; max-width: 40rem; }


/* ---------- État du projet ---------- */

.etat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin: 0 0 var(--pas);
  padding: 0.85rem 1.15rem;
  background: rgba(217, 155, 28, 0.14);
  border-left: 4px solid var(--or);
  border-radius: 0 3px 3px 0;
  max-width: 44rem;
  font-size: 0.975rem;
  line-height: 1.6;
}
.etat__date {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--or);
  white-space: nowrap;
}
.banniere .etat { background: rgba(217, 155, 28, 0.2); color: #f3eee4; }

/* ---------- Boutons ---------- */

.appel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  background: var(--rouge);
  border: 2px solid var(--rouge);
  color: var(--blanc);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.975rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.appel:hover { background: var(--rouge-clair); border-color: var(--rouge-clair); color: var(--blanc); }

.appel--sobre {
  background: transparent;
  border-color: var(--bord-actif);
  color: var(--encre);
  font-weight: 600;
}
.appel--sobre:hover { background: var(--blanc); border-color: var(--encre); color: var(--encre); }

.banniere .appel--sobre { color: var(--papier); border-color: #8c8375; }
.banniere .appel--sobre:hover { background: rgba(250, 247, 241, 0.12); color: var(--blanc); border-color: var(--papier); }

.appels { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: var(--pas); }

.suite {
  margin-top: var(--pas);
  font-size: 0.975rem;
  font-weight: 600;
}
.suite a::after { content: " →"; }

/* ---------- Figures et crédits ---------- */

figure { margin-inline: 0; }

.figure__cadre {
  background: var(--papier-2);
  border: 1px solid var(--filet);
  border-radius: 3px;
  overflow: hidden;
}

figcaption {
  margin-top: 0.65rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
figcaption .credit { display: block; font-style: italic; margin-top: 0.15rem; color: #6f685d; }

/* ---------- Tableaux ---------- */

.fiche {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
  text-align: left;
  max-width: 48rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 3px;
}
.fiche th, .fiche td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--filet); vertical-align: top; }
.fiche tr:last-child th, .fiche tr:last-child td { border-bottom: 0; }
.fiche th { font-weight: 700; color: var(--encre); white-space: nowrap; width: 13rem; background: var(--papier); }
.fiche thead th { background: var(--papier-2); white-space: normal; width: auto; }

@media (max-width: 34em) {
  .fiche th, .fiche td { display: block; width: auto; border-bottom: 0; }
  .fiche th { background: var(--papier-2); }
  .fiche td { padding-top: 0.5rem; border-bottom: 1px solid var(--filet); }
}

/* ---------- Grilles et cartes ---------- */

.grille { display: grid; gap: 1.5rem; }
@media (min-width: 42em) { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 42em) and (max-width: 55.99em) { .grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

.carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-top: 4px solid var(--rouge);
  border-radius: 3px;
  padding: 1.5rem;
  box-shadow: var(--ombre);
}
.carte h3 { margin-top: 0; font-size: 1.1rem; }
.carte > :last-child { margin-bottom: 0; }

.carte__nombre {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 7vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rouge);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Galerie ---------- */

.galerie { display: grid; gap: 1.75rem; }
@media (min-width: 40em) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie figure { margin: 0; }
.galerie img { width: 100%; }

/* ---------- Journal du projet ---------- */

.journal { list-style: none; padding: 0; margin: 0; max-width: 48rem; }
.journal > li {
  margin: 0;
  padding: 0 0 var(--pas) 1.75rem;
  border-left: 2px solid var(--filet);
  position: relative;
}
.journal > li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.6rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--filet);
}
.journal > li:first-child::before { background: var(--rouge); border-color: var(--rouge); }
.journal > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.journal__date {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--vert);
  margin-bottom: 0.3rem;
}
.journal__titre { font-size: 1.2rem; margin: 0 0 0.5rem; }
.journal__titre::after { display: none; }
.journal p { margin-bottom: 0.65rem; }

/* ---------- Schéma des faces ---------- */

.schema {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 1.5rem;
  box-shadow: var(--ombre);
}
/* Les schémas portent du texte de 8 à 11 px. Réduits à la largeur d'un
   téléphone, ils deviendraient illisibles : on leur garde une largeur minimale
   et c'est le cadre qui défile. Le texte reste à sa taille, et la page, elle,
   ne déborde pas. Le <desc> de chaque schéma porte l'équivalent lu à voix
   haute, pour qui ne le verra pas du tout. */
.schema { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schema svg { width: 100%; height: auto; min-width: 26rem; }
.schema__legende { font-size: 0.875rem; color: var(--encre-douce); margin: 1.2rem 0 0; }

/* ---------- Encarts et téléchargements ---------- */

.encart {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-left: 4px solid var(--vert);
  border-radius: 0 3px 3px 0;
  padding: 1.35rem 1.5rem;
  font-size: 0.975rem;
  box-shadow: var(--ombre);
}
.encart > :last-child { margin-bottom: 0; }
.encart h3 { margin-top: 0; font-size: 1.05rem; }
.encart h3::after { display: none; }

.telechargement {
  display: grid;
  gap: 0.4rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 1.35rem 1.5rem;
  box-shadow: var(--ombre);
}
.telechargement a { font-weight: 700; }
.telechargement .petit { color: var(--encre-douce); margin: 0; }

/* ---------- Visite virtuelle (phase 2) ---------- */

.visite { display: grid; gap: 1.75rem; }
@media (min-width: 60em) { .visite { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }

.visionneuse {
  position: relative;
  background: var(--papier-2);
  border: 1px solid var(--filet);
  border-radius: 3px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.visionneuse__scene { position: relative; aspect-ratio: 3 / 4; max-height: 72vh; margin-inline: auto; }
.visionneuse__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.visionneuse[data-pret="true"] { cursor: grab; }
.visionneuse[data-saisi="true"] { cursor: grabbing; }
.visionneuse__etat {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--encre-douce);
  background: linear-gradient(to top, rgba(241, 235, 224, 0.95), transparent);
  text-align: center; pointer-events: none;
}

.commandes { display: none; }
.js .commandes {
  display: grid;
  gap: 0.9rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 1.25rem;
  box-shadow: var(--ombre);
}
.commandes__ligne { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.commandes label { font-size: 0.875rem; color: var(--encre-douce); font-weight: 600; }
.commandes input[type="range"] { flex: 1 1 10rem; min-width: 8rem; accent-color: var(--rouge); height: 1.75rem; }

.bouton-rond {
  width: 2.9rem; height: 2.9rem;
  display: inline-grid; place-items: center;
  border: 1px solid var(--bord-actif);
  background: var(--papier);
  color: var(--encre);
  font: inherit; font-size: 1.2rem;
  cursor: pointer; border-radius: 50%;
}
.bouton-rond:hover { background: var(--blanc); border-color: var(--encre); }

.repli {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 1.35rem 1.5rem;
  font-size: 0.975rem;
  box-shadow: var(--ombre);
}
.repli > :last-child { margin-bottom: 0; }
.repli h2 { margin-top: 0; }
.repli h2::after { display: none; }

/* ---------- Pied de page ---------- */

.pied {
  background: var(--pied-fond);
  color: var(--pied-texte);
  padding-block: var(--pas-section) 2rem;
  margin-top: var(--pas-section);
  font-size: 0.925rem;
  border-top: 5px solid var(--rouge);
}
.pied__grille {
  display: grid;
  gap: 2.25rem;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
@media (min-width: 48em) { .pied__grille { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }

.pied__bloc p { margin-bottom: 0.5rem; }
.pied__titre {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 800;
  margin-bottom: 0.8rem;
}
.pied__oeuvre { color: var(--papier); line-height: 1.65; font-family: var(--serif); }
.pied__oeuvre em { font-style: italic; }
.pied__liens { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin: 0 0 0.45rem; }
.pied a { color: var(--pied-texte); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied__mention {
  max-width: var(--large);
  margin: 2.5rem auto 0;
  padding: 1.35rem var(--gouttiere) 0;
  border-top: 1px solid #39342d;
  font-size: 0.82rem;
  line-height: 1.65;
  color: #948d81;
}
.pied__mention em { font-style: italic; }

/* ---------- Divers ---------- */

.aconfirmer {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--corten);
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  font-weight: 800;
  vertical-align: 0.08em;
}

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  body { background: #fff; }
  .entete, .nav, .drapeau, .saut, .commandes, .bascule, .pied__liens { display: none; }
  a { color: #000; }
  .carte, .encart, .fiche, .schema { box-shadow: none; }
}


/* LE TRAJET — une œuvre burkinabè portée en Italie, dite au pied de chaque
   page. Les drapeaux sont ici à une taille où ils se reconnaissent, étoile
   comprise. La flèche est dessinée en CSS plutôt qu'écrite : un caractère
   flèche se lit à voix haute par les lecteurs d'écran, et « Burkina Faso
   flèche vers la droite Italie » n'apprend rien à personne. */
.trajet {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.1rem 0 0;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pied-texte);
}
.trajet__pays {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.trajet__drapeau {
  width: 1.45rem;
  height: auto;
  display: block;
  border-radius: 1px;
  /* Le blanc du drapeau italien disparaîtrait sur le fond sombre du pied. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.trajet__fleche {
  flex: 0 0 1.6rem;
  height: 1px;
  position: relative;
  background: currentColor;
  opacity: .55;
}
.trajet__fleche::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: .32rem;
  height: .32rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}