/* Style des fiches (personnes, sources, lieux), commun à la pleine page (serveur.py) et à la popup de l'arbre
   (ascendance.html). N'utilise que les variables définies par les deux pages : --fond --texte --doux --bord
   --lien --accent, et --carte (pages) ou --case (arbre). */

:root {
  --homme: #3d78b3; --femme: #b8507c; --neutre: #9a958a;
  --c-certain: #2e7d4f; --c-tp: #4f8f3a; --c-p: #b07d10; --c-h: #c4601d; --c-peu: #b23a3a; --c-trad: #7b55b0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --homme: #7aaee0; --femme: #e08bb0; --neutre: #8a857b;
    --c-certain: #6cc28f; --c-tp: #9ccf7a; --c-p: #e2b64a; --c-h: #f0975a; --c-peu: #e57a7a; --c-trad: #b79ae6;
  }
}
:root[data-theme="dark"] {
  --homme: #7aaee0; --femme: #e08bb0; --neutre: #8a857b;
  --c-certain: #6cc28f; --c-tp: #9ccf7a; --c-p: #e2b64a; --c-h: #f0975a; --c-peu: #e57a7a; --c-trad: #b79ae6;
}

.fiche { --surface: var(--carte, var(--case, #fff)); overflow-wrap: anywhere; }
.fiche a { color: var(--lien); }

/* --- Carte d'identité ------------------------------------------------------- */
.fiche .identite { --sexe: var(--neutre); margin: 10px 0 14px; background: var(--surface);
  border: 1px solid var(--bord); border-left: 5px solid var(--sexe); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06); overflow: hidden; }
.fiche .sexe-M { --sexe: var(--homme); }
.fiche .sexe-F { --sexe: var(--femme); }
.identite .bandeau { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 12px 16px 10px; }
.identite h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 400; overflow-wrap: normal; }
.identite h1 .patronyme { font-weight: 750; letter-spacing: .4px; }
.identite .alias { margin-top: 2px; color: var(--doux); font-style: italic; }
.identite .alias b { font-style: normal; font-weight: 600; letter-spacing: .3px; }
.identite .ligne-vie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 15px; }
.identite .vie { font-weight: 600; }
.identite .vie .age { font-weight: 400; color: var(--doux); }
.identite .nationalites { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--doux); }
.identite .nationalites .fleche { opacity: .7; }
.identite .nat { display: inline-flex; align-items: center; gap: 5px; }
.fiche svg.drapeau { flex: none; border-radius: 1.5px; box-shadow: 0 0 0 .75px var(--bord); }
.identite .rang { flex: none; text-align: right; }
.identite .sosa-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700;
  font-size: 14px; color: var(--surface); background: var(--sexe); white-space: nowrap; }
.identite .generation { display: block; margin-top: 3px; font-size: 12px; color: var(--doux); white-space: nowrap; }

.identite .evenements { display: grid; grid-template-columns: 22px max-content 1fr; gap: 5px 10px;
  margin: 0; padding: 10px 16px; border-top: 1px solid var(--bord); font-size: 14.5px; }
.identite .evenements > .ev { display: contents; }
.identite .evenements .lib { grid-column: 2; color: var(--doux); }
.identite .evenements .ico { grid-column: 1; text-align: center; color: var(--sexe); font-size: 15px; line-height: 1.45; }
.identite .evenements .val { grid-column: 3; }
.identite .evenements .detail { color: var(--doux); }

.identite .pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 16px;
  border-top: 1px solid var(--bord); background: var(--fond); font-size: 12.5px; }
.identite .pied .pleine { margin-left: auto; }
.etat { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; }
.etat-verifie { color: var(--c-certain); }
.etat-en-cours { color: var(--c-p); }
.etat-a-chercher { color: var(--doux); }
.etat-vivant { color: var(--c-peu); }

.fiche .autres { margin: 0; padding: 6px 16px 8px; border-top: 1px solid var(--bord); font-size: 13px; }
.fiche .autres summary { cursor: pointer; color: var(--doux); }

/* --- Pastilles : sources et degrés de certitude ----------------------------- */
.fiche a.src { display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 4px; font-size: 11.5px;
  font-weight: 600; line-height: 1.55; text-decoration: none; vertical-align: 1px; white-space: nowrap;
  color: var(--lien); border: 1px solid color-mix(in srgb, var(--lien) 35%, transparent);
  background: color-mix(in srgb, var(--lien) 8%, transparent); }
.fiche a.src:hover { background: color-mix(in srgb, var(--lien) 18%, transparent); }
.cert { --c: var(--doux); display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .86em;
  font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.cert-certain { --c: var(--c-certain); } .cert-tp { --c: var(--c-tp); } .cert-p { --c: var(--c-p); }
.cert-h { --c: var(--c-h); } .cert-peu { --c: var(--c-peu); } .cert-trad { --c: var(--c-trad); }

/* --- Famille proche : mini-cases ------------------------------------------- */
.fiche .gratuit { margin: 12px 0; border: 1px solid #2e8b57; border-radius: 8px; padding: 6px 12px 8px; }
.fiche .gratuit > summary { cursor: pointer; font-weight: 600; color: #2e8b57; padding: 2px 0; }
.fiche .gratuit ul { margin: 6px 0 2px; padding-left: 20px; }
.fiche .gratuit code { font-size: .8em; color: var(--doux); }
.fiche .gratuit .deja { margin: 4px 0 0; color: var(--doux); font-size: .9em; }
.fiche .proches { margin: 12px 0; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 12px 10px; }
.fiche .proches > summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.fiche .groupe { margin-top: 8px; }
.fiche .groupe h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--doux);
  text-transform: uppercase; letter-spacing: .5px; }
.fiche .minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.fiche a.mini { --sexe: var(--neutre); display: block; position: relative; padding: 5px 10px 5px 10px;
  background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--sexe);
  border-radius: 6px; text-decoration: none; color: var(--texte); }
.fiche a.mini:hover { border-color: var(--sexe); box-shadow: 0 1px 5px rgba(0, 0, 0, .12); }
.fiche a.mini.sexe-M { --sexe: var(--homme); }
.fiche a.mini.sexe-F { --sexe: var(--femme); }
.mini .mini-nom { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--lien); padding-right: 46px; }
.mini .mini-info { display: block; font-size: 12px; color: var(--doux); }
.mini .mini-sosa { position: absolute; top: 5px; right: 8px; font-size: 11px; font-weight: 700; color: var(--sexe); }

/* --- Documents et vignettes -------------------------------------------------- */
.fiche .documents { margin: 12px 0; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 12px; }
.fiche .documents summary { cursor: pointer; font-weight: 600; }
.fiche .documents figure { margin: 8px 0; }
.fiche .documents figcaption { font-size: 13px; color: var(--doux); }
.fiche .vignettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.fiche .vignettes img { height: 105px; border: 1px solid var(--bord); border-radius: 4px; background: #fff; }
.fiche .pleine-page { float: right; margin: 0 0 6px 12px; font-size: 13px; }

/* --- Corps de la fiche ------------------------------------------------------- */
.fiche h2 { margin: 1.5em 0 .5em; padding-bottom: 3px; font-size: 15px; font-variant: small-caps;
  letter-spacing: .6px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.fiche h3 { font-size: 15px; margin: 1.2em 0 .4em; }
.fiche table { border-collapse: collapse; margin: 8px 0; max-width: 100%; display: block; overflow-x: auto; font-size: 14px; }
.fiche th, .fiche td { border: 0; border-bottom: 1px solid var(--bord); padding: 4px 9px; text-align: left; vertical-align: top; }
.fiche thead th { color: var(--doux); font-weight: 600; font-size: 12.5px; border-bottom: 2px solid var(--bord); }
.fiche tbody tr:nth-child(even) { background: color-mix(in srgb, var(--texte) 4%, transparent); }
.fiche tbody td:first-child { white-space: nowrap; }
.fiche table.meta { font-size: 13px; }
.fiche table.meta th { color: var(--doux); font-weight: 600; white-space: nowrap; }
.fiche .cle { color: var(--doux); }
.fiche blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--bord); color: var(--doux); }
.fiche li { margin: 2px 0; }
.fiche li.todo, .fiche li.fait { list-style: none; position: relative; }
.fiche li.todo::before, .fiche li.fait::before { position: absolute; left: -1.3em; font-weight: 700; }
.fiche li.todo::before { content: "☐"; color: var(--c-p); }
.fiche li.fait::before { content: "☑"; color: var(--c-certain); }
.fiche li.fait { color: var(--doux); }

@media (max-width: 520px) {
  .identite .bandeau { flex-direction: column; }
  .identite .rang { text-align: left; }
  .identite .generation { display: inline; margin-left: 6px; }
  .identite .evenements { grid-template-columns: 20px 1fr; }
  .identite .evenements .val { grid-column: 2; margin-bottom: 4px; }
}