/* ============================================================
   « Repères biographiques » — CSS de production
   boutchichiya.fr · pages des figures de la Voie
   ------------------------------------------------------------
   Ilmarë · 2026-07-17 · charte Royaume·Boutchichiya (fait foi)
   ------------------------------------------------------------
   POSE : Rúmil ajoute la classe `reperes-bio` au wp:group Gutenberg
   (Réglages > Avancé > Classe(s) CSS additionnelle(s) : reperes-bio)
   puis UNE des trois variantes : reperes-bio--a | --b | --c.

   Structure HTML habillée (INCHANGÉE — contrainte GEO) :
     <div class="wp-block-group reperes-bio reperes-bio--a">
       <h3>Repères biographiques</h3>
       <ul>
         <li><strong>Naissance</strong> 1922, Madagh…</li>
         …
       </ul>
     </div>

   Le CSS n'ajoute aucun contenu porteur de sens, ne masque aucun
   texte, ne remplace pas la liste par une image. Il HABILLE. La
   liste reste crawlable et extractible (h3 + ul/li réels).

   Recommandation : variante A (filet latéral) — la plus discrète.
   Les couleurs se réfèrent aux tokens de la charte si présents,
   avec repli hex codé en dur pour fonctionner isolément.
   ============================================================ */

.reperes-bio{
  --rb-green:  var(--green, #107040);
  --rb-gold:   var(--gold, #C6A14E);
  --rb-fg:     var(--fg, #2A2114);
  --rb-fg-2:   var(--fg-2, #5A4D38);
  --rb-fg-3:   var(--fg-3, #8A7C62);
  --rb-marble: var(--marble-100, #FBF9F4);
  --rb-vein:   var(--marble-vein, #CFC6B4);
  --rb-serif:  var(--font-display, 'Libre Baskerville', Georgia, serif);
  --rb-sans:   var(--font-body, 'Roboto', system-ui, -apple-system, Arial, sans-serif);

  margin:1.5rem 0 2rem;
  text-align:left;
}

/* — titre commun : petit, vert, en petites capitales espacées —
   Sélecteur DESCENDANT (pas enfant direct) : Gutenberg génère
   <ul class="wp-block-list"> et peut intercaler un wrapper — confirmé
   sur le HTML réel (Rúmil 18/07). Tolérant à la structure WP. */
.reperes-bio h3{
  font-family:var(--rb-sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rb-green);
  margin:0 0 1rem;
}

/* — liste commune : on retire les puces natives, le style vient des variantes — */
.reperes-bio ul{
  list-style:none;
  margin:0;
  padding:0;
}
.reperes-bio li{
  font-size:14px;
  color:var(--rb-fg);
  line-height:1.55;
}
.reperes-bio li > strong{
  font-weight:600;
  color:var(--rb-fg-2);
}

/* ============================================================
   VARIANTE A — filet latéral (VALIDÉE ROI 18/07 — « la plus discrète »)
   Sélecteurs descendants (tolérants Gutenberg wp-block-list).
   PAS de séparateur en content:CSS — arbitrage Rúmil 18/07 (GEO) :
   un séparateur généré par CSS n'est lu ni des crawlers, ni du RSS,
   ni du mode lecture, ni des IA. Les deux-points VIVENT dans le texte
   des <li> (« Naissance : … ») = version autosuffisante ; le filet or
   latéral porte la noblesse à lui seul. « Le design habille, il ne
   remplace pas » (brief Roi). Sobriété max = mot du Roi.
   ============================================================ */
.reperes-bio--a{
  background:var(--rb-marble);
  border-left:2px solid var(--rb-gold);
  padding:1rem 1.5rem;
  border-radius:0 4px 4px 0;
}
.reperes-bio--a li{
  padding:4px 0;
  border-bottom:1px solid rgba(207,198,180,.45);
}
.reperes-bio--a li:last-child{border-bottom:0;}
.reperes-bio--a li > strong{
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  color:var(--rb-fg-3);
}
/* NB : les deux-points séparateurs restent dans le texte des <li> (GEO). */

/* ============================================================
   VARIANTE B — fiche à filet or (la noble classique)
   ============================================================ */
.reperes-bio--b{
  background:var(--rb-marble);
  border:1px solid var(--rb-gold);
  border-radius:6px;
  padding:1.5rem 2rem;
  box-shadow:0 1px 2px rgba(42,33,20,.05);
}
.reperes-bio--b > h3{
  display:flex;align-items:center;gap:10px;
}
.reperes-bio--b > h3::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--rb-gold),transparent);
}
.reperes-bio--b > ul > li{
  padding:8px 0;
  border-bottom:1px dotted var(--rb-vein);
  font-family:var(--rb-serif);
  font-size:15px;
}
.reperes-bio--b > ul > li:last-child{border-bottom:0;}
.reperes-bio--b > ul > li > strong{
  display:block;
  font-family:var(--rb-sans);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:11.5px;
  color:var(--rb-fg-3);
  margin-bottom:1px;
}

/* ============================================================
   VARIANTE C — losange or (la moins « infobox », la plus recueillie)
   ============================================================ */
.reperes-bio--c{
  padding:.75rem 0;
  border-top:1px solid var(--rb-vein);
  border-bottom:1px solid var(--rb-vein);
}
.reperes-bio--c > ul > li{
  position:relative;
  padding:8px 0 8px 1.5rem;
}
.reperes-bio--c > ul > li::before{
  content:"◆";
  position:absolute;left:0;top:9px;
  color:var(--rb-gold);
  font-size:9px;
}
.reperes-bio--c > ul > li > strong{
  font-family:var(--rb-serif);
  font-style:italic;
  font-weight:400;
  color:var(--rb-fg-2);
}
.reperes-bio--c > ul > li > strong::after{content:" — ";color:var(--rb-fg-3);font-style:normal;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:520px){
  .reperes-bio--b{padding:1rem;}
}