/* Bakulu — « les ancêtres » en kikongo.
   Palette du velours kuba (Congo) : raffia, ocre, terre rouge, brun de l'écorce.
   Typo : Gloock (titres, gravé comme un sceau) + Atkinson Hyperlegible (lisible pour les anciens). */
:root{
  --raffia:#f3e9d6; --raffia-2:#e8dbc0; --raffia-3:#d8c6a3;
  --ecorce:#1c110b; --ecorce-2:#2e1d13; --brun:#4a3020;
  --ocre:#d9a12b; --ocre-fonce:#a8730f; --ocre-texte:#7d5206; --terre:#c4532d; --terre-fonce:#9a3a1c;
  --indigo:#23314f; --ok:#2f6b3a; --ko:#9b2c2c;
  --texte:#2a1a10; --doux:#6d5643;
  --titre:"Gloock", Georgia, serif;
  --corps:"Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --rayon:3px;
  /* Bande kuba : losanges ocre emboîtés, cœur terre rouge, sur fond d'écorce. */
  --kuba:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Crect width='32' height='16' fill='%231c110b'/%3E%3Cpath d='M16 1 31 8 16 15 1 8z' fill='%23d9a12b'/%3E%3Cpath d='M16 5 24 8 16 11 8 8z' fill='%23c4532d'/%3E%3Cpath d='M0 0h2L0 1zM32 0h-2l2 1zM0 16h2l-2-1zM32 16h-2l2-1z' fill='%23f3e9d6'/%3E%3C/svg%3E");
  /* Bande bogolan : chevrons clairs sur terre rouge. */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Crect width='20' height='10' fill='%239a3a1c'/%3E%3Cpath d='M0 8 5 3 10 8 15 3 20 8' fill='none' stroke='%23f3e9d6' stroke-width='1.6'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font:18px/1.6 var(--corps); color:var(--texte);
  /* Trame de raffia tissé : deux fils croisés très légers. */
  background:
    repeating-linear-gradient(0deg, rgba(120,85,40,.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(120,85,40,.04) 0 1px, transparent 1px 5px),
    var(--raffia);
}
a{color:var(--terre-fonce); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--terre); text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--indigo); outline-offset:2px}
.entete :focus-visible,.pied :focus-visible,.parole :focus-visible,.tableau th :focus-visible{outline-color:var(--ocre)}
#arbre-svg a:focus-visible,#arbre-svg .bascule:focus-visible{outline:3px solid var(--indigo); outline-offset:3px}
.saut{position:absolute; left:.6rem; top:-5rem; z-index:100; background:var(--ecorce); color:var(--raffia); padding:.7rem 1rem; border-radius:var(--rayon); text-decoration:underline}
.saut:focus{top:.6rem; color:#fff; outline-color:var(--ocre)}
h1,h2,h3{font-family:var(--titre); font-weight:400; line-height:1.15; color:var(--ecorce)}
h1{font-size:clamp(2rem, 5vw, 2.9rem); margin:.2em 0 .35em}
h2{font-size:1.45rem; margin:1.8em 0 .5em; display:flex; align-items:center; gap:.6rem}
h2::before{content:""; width:14px; height:14px; flex:none; background:var(--terre); transform:rotate(45deg); box-shadow:0 0 0 3px var(--raffia), 0 0 0 4.5px var(--ocre)}

/* ---------- En-tête ---------- */
.entete{background:var(--ecorce); color:var(--raffia); position:relative}
.entete::after{content:""; display:block; height:16px; background:var(--kuba) repeat-x; border-top:2px solid var(--ocre)}
.entete-inner{max-width:72rem; margin:0 auto; padding:.7rem 1rem; display:flex; align-items:center; gap:1rem 1.5rem; flex-wrap:wrap}
.marque{display:flex; align-items:center; gap:.65rem; color:var(--raffia); text-decoration:none}
.marque:hover{color:var(--raffia); text-decoration:none}
.marque img{width:46px; height:46px; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.marque:hover img{transform:rotate(90deg)}
.marque-nom{font-family:var(--titre); font-size:1.75rem; letter-spacing:.04em; line-height:1}
.marque-nom small{display:block; font-family:var(--corps); font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ocre); margin-top:.2rem}
.nav{display:flex; align-items:center; gap:.2rem; margin-left:auto; flex-wrap:wrap}
.nav a,.nav button{
  color:var(--raffia); text-decoration:none; font:inherit; font-size:.95rem;
  padding:.45rem .7rem; border-radius:var(--rayon); background:none; border:0; cursor:pointer; min-height:44px;
  display:inline-flex; align-items:center; position:relative;
}
.nav a::after{content:""; position:absolute; left:.7rem; right:.7rem; bottom:.35rem; height:2px; background:var(--ocre); transform:scaleX(0); transform-origin:left; transition:transform .25s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover{color:#fff}
.nav form{margin:0}
.nav .sortie{border:1px solid rgba(243,233,214,.35); margin-left:.4rem}
.nav .sortie:hover{border-color:var(--ocre); color:var(--ocre)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.langues{margin:0; display:flex; align-items:center; gap:.4rem}
.langues button{min-height:40px; padding:.3rem .7rem; font-size:.85rem; background:transparent; color:var(--raffia); box-shadow:none; border:1px solid rgba(243,233,214,.55)}
.langues button:hover{background:transparent; color:var(--ocre); border-color:var(--ocre)}
.langues select{width:auto; min-height:40px; padding:.3rem 1.8rem .3rem .6rem; font-size:.88rem; color:var(--raffia);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d9a12b'/%3E%3C/svg%3E") no-repeat right .6rem center;
  border:1px solid rgba(243,233,214,.35); -webkit-appearance:none; appearance:none; cursor:pointer}
.langues select:hover,.langues select:focus{border-color:var(--ocre)}
.langues option{color:var(--texte); background:#fffaf0}
@media (max-width:720px){
  .entete-inner{padding:.6rem 1rem}
  .marque{flex:1}
  .langues{order:2}
  .nav{order:3}
  .nav{margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:-.2rem}
  .nav::-webkit-scrollbar{display:none}
  .nav a,.nav button{white-space:nowrap; padding:.4rem .6rem}
}

/* ---------- Corps ---------- */
main{flex:1; width:100%; max-width:50rem; margin:0 auto; padding:1.5rem 1rem 3rem; animation:monte .6s ease-out both}
main.large{max-width:72rem}
@keyframes monte{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important}}

.chapeau{color:var(--doux); font-size:1.08rem; max-width:38rem}
.etiquette{font-size:.82rem; color:var(--doux); letter-spacing:.01em}

/* Cartes : liseré tissé sur le bord gauche. */
.carte{
  background:#fffaf0; border:1px solid var(--raffia-3); border-radius:var(--rayon);
  padding:.9rem 1.1rem .9rem 1.35rem; margin:.7rem 0; position:relative;
  box-shadow:0 1px 0 var(--raffia-3), 0 6px 18px -12px rgba(60,35,15,.35);
}
.carte::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--chevron); background-size:10px 5px; border-radius:var(--rayon) 0 0 var(--rayon)}
a.carte,.carte-lien{display:block; color:inherit; text-decoration:none; transition:transform .2s, box-shadow .2s}
a.carte:hover,.carte-lien:hover{transform:translateX(4px); box-shadow:0 1px 0 var(--raffia-3), 0 10px 24px -12px rgba(60,35,15,.5); color:inherit}
.carte strong{color:var(--ecorce)}

/* ---------- Boutons et formulaires ---------- */
button,.bouton{
  font:inherit; font-size:1rem; font-weight:700; letter-spacing:.02em;
  background:var(--terre-fonce); color:#fff8ec; border:0; border-radius:var(--rayon);
  padding:.65rem 1.2rem; min-height:44px; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); transition:background .2s, transform .1s;
}
button:hover,.bouton:hover{background:var(--terre); color:#fff; text-decoration:none}
button:active,.bouton:active{transform:translateY(1px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}
.bouton.ocre{background:var(--ocre); color:var(--ecorce)}
.bouton.ocre:hover{background:#e8b440; color:var(--ecorce)}
.bouton.clair,button.clair{background:transparent; color:var(--terre-fonce); box-shadow:inset 0 0 0 1.5px var(--terre-fonce)}
.bouton.clair:hover,button.clair:hover{background:var(--terre-fonce); color:#fff}

form p{margin:0 0 1rem}
label{display:block; font-weight:700; font-size:.92rem; margin-bottom:.3rem; color:var(--brun)}
input,select,textarea{
  font:inherit; font-size:1rem; width:100%; max-width:100%; padding:.65rem .8rem; color:var(--texte);
  background:#fffdf7; border:1.5px solid #85714f; border-radius:var(--rayon);
  transition:border-color .2s, box-shadow .2s;
}
input[type="checkbox"],input[type="radio"]{width:auto; accent-color:var(--terre-fonce)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ocre-fonce); box-shadow:0 0 0 3px rgba(217,161,43,.3)}
.helptext,form .helptext{display:block; font-size:.82rem; color:var(--doux); margin-top:.25rem}
.errorlist{list-style:none; padding:0; margin:.3rem 0; color:var(--ko); font-size:.9rem}
.recherche{display:flex; gap:.5rem; margin:1rem 0 1.5rem}
.recherche input{flex:1}
.actions{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0}
.actions form{margin:0}

/* Seuil : panneau de connexion et formulaires courts. */
.seuil{max-width:27rem; margin:1.5rem auto; background:#fffaf0; border:1px solid var(--raffia-3); border-radius:var(--rayon); overflow:hidden; box-shadow:0 20px 40px -24px rgba(60,35,15,.5)}
.seuil::before{content:""; display:block; height:12px; background:var(--kuba); background-size:24px 12px}
.seuil-corps{padding:1.6rem 1.6rem 1.8rem}
.seuil h1{font-size:2rem; margin-top:0}
.seuil button{width:100%; justify-content:center}

/* ---------- Messages ---------- */
.messages{padding:0; margin:0 0 1rem}
.messages li{list-style:none; padding:.7rem 1rem; margin:.4rem 0; border-radius:var(--rayon); background:var(--raffia-2); border-left:5px solid var(--ocre)}
.messages .error{background:#f6dcd4; border-color:var(--ko); color:var(--ko)}
.messages .success{background:#e1eedd; border-color:var(--ok); color:var(--ok)}
.messages .warning{background:#fbecc8; border-color:var(--ocre-fonce); color:#6b4a08; overflow-wrap:anywhere}

/* ---------- Accueil ---------- */
.heros{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:2rem; align-items:center; padding:1rem 0 2rem}
.heros h1{font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1; margin:0 0 .3em}
.heros h1 em{font-style:normal; color:var(--terre-fonce); display:block}
.sur-titre{text-transform:uppercase; letter-spacing:.3em; font-size:.75rem; font-weight:700; color:var(--ocre-texte); margin:0 0 .8rem}
.sceau{position:relative; aspect-ratio:1; max-width:340px; width:100%; justify-self:center; border-radius:50%;
  background:radial-gradient(circle, var(--ecorce-2) 0 58%, var(--ecorce) 59%); box-shadow:0 0 0 10px var(--raffia), 0 0 0 12px var(--ocre), 0 30px 60px -20px rgba(28,17,11,.7);
  display:grid; place-items:center}
.sceau::before{content:""; position:absolute; inset:-34px; border-radius:50%; border:2px dashed rgba(168,115,15,.45); animation:tourne 90s linear infinite}
.sceau img{width:78%; animation:apparait 1.2s cubic-bezier(.2,.8,.2,1) both .2s}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes apparait{from{opacity:0; transform:rotate(-90deg) scale(.8)}to{opacity:1; transform:none}}
.parole{margin:2.5rem 0; padding:1.6rem 1.8rem; background:var(--ecorce); color:var(--raffia); border-radius:var(--rayon); position:relative; overflow:hidden}
.parole::after{content:""; position:absolute; right:0; top:0; bottom:0; width:16px; background:var(--kuba); background-size:16px 8px}
.parole blockquote{margin:0; font-family:var(--titre); font-size:clamp(1.3rem, 3vw, 1.75rem); line-height:1.3; padding-right:1.5rem}
.parole cite{display:block; margin-top:.7rem; font-style:normal; color:var(--ocre); font-size:.9rem; letter-spacing:.08em}
.piliers{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin:1rem 0}
.pilier{background:#fffaf0; border:1px solid var(--raffia-3); border-top:5px solid var(--terre-fonce); padding:1.2rem; border-radius:var(--rayon); animation:monte .6s ease-out both}
.pilier:nth-child(2){border-top-color:var(--ocre); animation-delay:.1s}
.pilier:nth-child(3){border-top-color:var(--ecorce); animation-delay:.2s}
.pilier h2{font-size:1.3rem; margin:.2rem 0 .4rem}
.pilier p{margin:0; color:var(--doux); font-size:.95rem}
.pilier svg{width:34px; height:34px}
@media (max-width:720px){
  .heros{grid-template-columns:1fr; text-align:left}
  .sceau{max-width:220px; order:-1}
  .piliers{grid-template-columns:1fr}
}

/* ---------- Fiche personne ---------- */
.fiche-tete{display:flex; gap:1.2rem; align-items:center; margin-bottom:.5rem}
.medaillon{flex:none; width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--titre); font-size:2rem; color:var(--raffia); background:var(--ecorce);
  box-shadow:0 0 0 4px var(--raffia), 0 0 0 6px var(--ocre)}
.medaillon.decede{background:var(--brun)}
.fiche-tete h1{margin:0}
.liens{display:flex; flex-wrap:wrap; gap:.5rem}
.liens a{background:#fffaf0; border:1px solid var(--raffia-3); border-radius:999px; padding:.35rem .9rem; text-decoration:none; color:var(--ecorce)}
.liens a:hover{border-color:var(--ocre-fonce); background:var(--raffia-2)}
.pastille{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.12rem .5rem; border-radius:2px; background:var(--raffia-2); color:var(--brun); vertical-align:middle}
.pastille.decede{background:var(--ecorce); color:var(--raffia)}
.pastille.suppose{background:#f6e3c1; color:var(--ocre-texte)}

.site{margin:.6rem 0 .2rem; padding:.6rem .8rem; background:var(--raffia); border-left:3px solid var(--ecorce); border-radius:var(--rayon); font-size:.95rem}

/* ---------- Arbre (descendance) ---------- */
.arbre{margin:1.5rem 0; padding:1rem 0 1rem .2rem}
.arbre .noeud{position:relative; padding-left:1.6rem}
.arbre .noeud::before{content:""; position:absolute; left:.5rem; top:0; bottom:0; border-left:2px solid var(--raffia-3)}
.arbre .noeud:last-child::before{bottom:auto; height:1.45rem}
.arbre .noeud::after{content:""; position:absolute; left:.5rem; top:1.45rem; width:.9rem; border-top:2px solid var(--raffia-3)}
.arbre > .noeud{padding-left:0}
.arbre > .noeud::before,.arbre > .noeud::after{display:none}
.arbre summary{list-style:none; cursor:pointer}
.arbre summary::-webkit-details-marker{display:none}
.personne{display:inline-flex; align-items:center; gap:.5rem; margin:.35rem 0; padding:.35rem .9rem .35rem .4rem;
  background:#fffaf0; border:1.5px solid var(--raffia-3); border-radius:999px; transition:border-color .2s, transform .2s}
.personne:hover{border-color:var(--ocre-fonce)}
.personne a{color:var(--ecorce); text-decoration:none; font-weight:700}
.personne a:hover{color:var(--terre-fonce)}
.personne .point{width:22px; height:22px; border-radius:50%; background:var(--ocre); flex:none; display:grid; place-items:center; color:var(--ecorce); font-size:.75rem; font-weight:700; transition:transform .25s}
details[open] > summary .point{transform:rotate(90deg)}
.personne .point.feuille{background:var(--raffia-2)}
.personne.decede{background:var(--raffia-2)}

/* ---------- Arbre interactif ---------- */
.arbre-zone{position:relative; height:min(72vh, 680px); min-height:380px; margin:1rem 0 1.5rem;
  border:1px solid var(--raffia-3); border-radius:var(--rayon); overflow:hidden;
  background:radial-gradient(circle at 50% 0, #fffaf0, var(--raffia) 70%); box-shadow:inset 0 0 0 6px rgba(243,233,214,.6)}
.arbre-zone::before{content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--kuba); background-size:16px 8px; z-index:1}
#arbre-svg{width:100%; height:100%; display:block; touch-action:none; cursor:grab; user-select:none}
#arbre-svg:active{cursor:grabbing}
#arbre-svg .lien{fill:none; stroke:var(--ocre-fonce); stroke-width:2; opacity:.55}
#arbre-svg .carte-personne rect{fill:#fffaf0; stroke:var(--raffia-3); stroke-width:1.5; filter:drop-shadow(0 3px 4px rgba(60,35,15,.18))}
#arbre-svg .carte-personne:hover rect{stroke:var(--ocre-fonce)}
#arbre-svg .carte-personne.decede rect{fill:var(--raffia-2)}
#arbre-svg .carte-personne.doute rect{stroke-dasharray:5 4; stroke:var(--ocre-fonce)}
#arbre-svg .nom-personne text{font:700 14px var(--corps); fill:var(--ecorce)}
#arbre-svg .nom-personne:hover text,#arbre-svg .nom-personne:focus text{fill:var(--terre-fonce); text-decoration:underline}
#arbre-svg .nom-personne .sous-titre{font:400 11px var(--corps); fill:var(--doux)}
#arbre-svg .bascule{cursor:pointer}
#arbre-svg .bascule circle{fill:var(--ocre); stroke:var(--ecorce); stroke-width:1.5}
#arbre-svg .bascule text{font:700 13px var(--corps); fill:var(--ecorce); text-anchor:middle}
#arbre-svg .bascule:hover circle,#arbre-svg .bascule:focus circle{fill:#e8b440}
#arbre-svg .bascule:focus{outline:none}
#arbre-svg .bascule:focus circle{stroke:var(--indigo); stroke-width:3}
.arbre-outils{position:absolute; right:.7rem; bottom:.7rem; display:flex; flex-direction:column; gap:.4rem; z-index:2}
.arbre-outils button{width:44px; height:44px; min-height:44px; padding:0; justify-content:center; font-size:1.3rem; background:var(--ecorce); color:var(--raffia)}
.arbre-outils button:hover{background:var(--brun); color:#fff}
.vue-liste summary{cursor:pointer; font-weight:700; color:var(--brun); padding:.4rem 0}

/* ---------- Double authentification ---------- */
.qr{background:#fff; padding:.8rem; border-radius:var(--rayon); width:min(240px, 100%); margin:1rem auto; border:1px solid var(--raffia-3)}
.qr svg{display:block; width:100%; height:auto}
.cle{font-family:ui-monospace, Consolas, monospace; font-size:1.05rem; letter-spacing:.08em; background:var(--raffia-2); padding:.6rem .8rem; border-radius:var(--rayon); word-break:break-word; text-align:center; user-select:all}
.etapes{padding-left:1.3rem; color:var(--brun)}
.etapes li{margin:.3rem 0}
input[autocomplete="one-time-code"]{font-family:ui-monospace, Consolas, monospace; font-size:1.6rem; letter-spacing:.5em; text-align:center}

/* ---------- Journal, propositions ---------- */
pre{white-space:pre-wrap; font-size:.85rem; background:var(--raffia); padding:.6rem; border-radius:var(--rayon); overflow-x:auto}
.ligne-temps{border-left:2px solid var(--raffia-3); margin-left:.5rem; padding-left:1.2rem}
.ligne-temps .carte::after{content:""; position:absolute; left:-1.72rem; top:1.1rem; width:10px; height:10px; background:var(--ocre); transform:rotate(45deg)}

/* ---------- Manima (backoffice) : même charte, liseré indigo pour reconnaître l'administration ---------- */
.lien-manima{color:var(--ocre)!important}
body.manima .entete{background:linear-gradient(90deg, var(--ecorce) 0 70%, var(--indigo))}
body.manima .entete::after{border-top-color:#6d83b8}
body.manima .marque-nom small{color:#9fb3e0}
.tuiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:.8rem; margin:1.2rem 0 1.5rem}
.tuile{display:flex; flex-direction:column; gap:.15rem; padding:1rem 1.1rem; background:#fffaf0; border:1px solid var(--raffia-3);
  border-top:5px solid var(--ocre); border-radius:var(--rayon); color:var(--brun); text-decoration:none; font-size:.92rem;
  box-shadow:0 6px 18px -14px rgba(60,35,15,.5); transition:transform .2s, box-shadow .2s}
a.tuile:hover{transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(60,35,15,.6); color:var(--brun)}
.tuile-chiffre{font-family:var(--titre); font-size:2.2rem; line-height:1.05; color:var(--ecorce)}
.tuile small{color:var(--ok); font-weight:700}
.tuile.alerte{border-top-color:var(--terre); background:#fdf1e9}
.tuile.alerte .tuile-chiffre{color:var(--terre-fonce)}
.colonnes{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2rem}
@media (max-width:820px){.colonnes{grid-template-columns:1fr}}
.tableau-cadre{overflow-x:auto; margin:1rem 0; border:1px solid var(--raffia-3); border-radius:var(--rayon); background:#fffaf0}
.tableau{width:100%; border-collapse:collapse; font-size:.93rem}
.tableau th{text-align:left; font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--raffia);
  background:var(--ecorce); padding:.65rem .8rem; white-space:nowrap}
.tableau td{padding:.65rem .8rem; border-top:1px solid var(--raffia-2); vertical-align:top}
.tableau tbody tr:nth-child(even){background:rgba(232,219,192,.25)}
.tableau tbody tr:hover{background:rgba(217,161,43,.12)}
.tableau code{font-size:.82rem; background:var(--raffia-2); padding:.1rem .35rem; border-radius:2px}
.actions-ligne{display:flex; flex-wrap:wrap; gap:.4rem}
.actions-ligne form{margin:0}
button.petit,.bouton.petit{min-height:36px; padding:.35rem .7rem; font-size:.85rem}
/* Récits et photos rattachés à une union, un événement ou un lieu */
.annexe{margin:.6rem 0 .2rem; padding:.55rem .8rem; background:var(--raffia); border-left:3px solid var(--ocre-fonce); border-radius:var(--rayon); font-size:.95rem}
.annexe-etiquette{display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ocre-texte)}
.annexe-liens{margin:.5rem 0 0}
.annexe-actions{margin:.6rem 0 0}
.lien-ajout{font-size:.8rem; font-weight:400; white-space:nowrap}

/* ---------- HTMX : actions qui remplacent un bloc sur place ---------- */
.htmx-request{cursor:progress}
.htmx-request button{opacity:.6; pointer-events:none}
input.htmx-request{background-image:linear-gradient(90deg, transparent, rgba(217,161,43,.35), transparent); background-size:200% 100%; animation:attente 1s linear infinite}
@keyframes attente{from{background-position:200% 0}to{background-position:-200% 0}}
[data-focus]:focus{outline:none}
[data-focus]:focus-visible{outline:3px solid var(--indigo); outline-offset:3px}

/* ---------- Pied de page ---------- */
.pied{background:var(--ecorce); color:var(--raffia-3); font-size:.88rem}
.pied::before{content:""; display:block; height:10px; background:var(--chevron); background-size:20px 10px}
.pied-inner{max-width:72rem; margin:0 auto; padding:1.2rem 1rem; display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between; align-items:center}
.pied a{color:var(--raffia); text-decoration-color:rgba(243,233,214,.4)}
.pied a:hover{color:var(--ocre)}
main ul{padding-left:1.3rem}
main li{margin:.3rem 0}
.pied strong{font-family:var(--titre); font-weight:400; color:var(--raffia); font-size:1.1rem; letter-spacing:.04em}

/* Carte des lieux (F4.4) */
.carte-zone{position:relative; height:min(70vh, 620px); min-height:360px; margin:1rem 0 1.5rem; border:1px solid var(--raffia-3); border-radius:var(--rayon); overflow:hidden; background:var(--raffia-2)}
.carte-zone::before{content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--kuba); background-size:16px 8px; z-index:1000}
.carte-zone .leaflet-popup-content{font-family:inherit; margin:.7rem .9rem}
.carte-zone .leaflet-popup-content ul{margin:.3rem 0 0; padding-left:1.1rem}
.carte-liste summary{cursor:pointer; font-weight:700}
.carte-liste h3{margin:1rem 0 .2rem; font-size:1rem}
.carte-liste ul{margin:.2rem 0 0; padding-left:1.2rem}

/* Curseur d'années des migrations */
.curseur-annees{margin:1rem 0 .5rem; max-width:34rem}
.curseur-annees label{display:block; font-weight:700; margin-bottom:.3rem}
.curseur-annees input[type=range]{width:100%; accent-color:var(--ocre-fonce)}

/* Migrations : parenté et légende de la carte */
.parente{color:var(--brun); font-size:.92em}
.carte-legende{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:-.8rem 0 1rem; font-size:.85rem; color:var(--brun)}
.carte-legende i{display:inline-block; vertical-align:middle; font-style:normal}
.pastille-depart{width:10px; height:10px; border-radius:50%; background:#e8c17a; border:1px solid #4a2410}
.pastille-arrivee{width:14px; height:14px; border-radius:50%; background:#c8791a; border:2px solid #4a2410}
.fleche-legende{color:#7d5206}
.trait-pointille{width:22px; border-top:3px dashed #7d5206}
.fleche-migration{background:none; border:0}