:root {
  --cacao: #3b2314;
  --cacao-2: #5a3620;
  --praline: #8a5a3b;
  --cream: #f7f1e8;
  --paper: #fffdf9;
  --gold: #c9a24b;
  --ink: #2a1b11;
  --muted: #7d6b5d;
  --line: #e6dccf;
  --danger: #a3332b;
  --ok: #2f6b3a;
  --blanc: #fff;
  --sable: #f3e8d8;
  --creme-clair: #fbf6ee;
  --danger-fond: #f7e3e1;
  --ok-fond: #e7f2e8;
  --surligne: #fbeec2;
  --or-fond: #fdf8ec;
  --fond-arbre: #f3ebde;
  --mer: #d9e6ea;
  --repere: #b2463d;
  --ecran: #120a05;
  --cacao-nuit: #24140b;
  --sable-fonce: #d8c6ae;
  --ombre-boite: 0 1px 2px rgba(59,35,20,.06), 0 10px 30px rgba(59,35,20,.10);
  --radius: 12px;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
img, video { max-width: 100%; height: auto; }
body { margin: 0; background: var(--cream); color: var(--ink); line-height: 1.5; }
a { color: var(--cacao-2); }
h1, h2 { font-weight: normal; line-height: 1.2; }
h2 { font-size: 1.2rem; margin-top: 2rem; }
code { font-family: ui-monospace, Menlo, monospace; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.25rem; background: var(--cacao); color: var(--cream); }
.topbar a { color: var(--cream); text-decoration: none; }
.brand { font-size: 1.25rem; letter-spacing: .04em; }
.brand strong { color: var(--gold); }
.topbar nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-family: system-ui, sans-serif; font-size: .95rem; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; color: var(--cream); cursor: pointer; font: inherit; padding: 0; }

/* Menu « Mon compte » : Rédaction, Steverlynck, administration et Déconnexion regroupés */
.account-menu { position: relative; }
.account-menu summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 1px solid rgba(247,241,232,.35); border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary::after { content: "▾"; font-size: .75em; transition: transform .15s; }
.account-menu[open] summary { border-color: var(--gold); }
.account-menu[open] summary::after { transform: rotate(180deg); }
.account-menu summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.account-menu-panel { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 20; min-width: 200px;
  display: flex; flex-direction: column; padding: .4rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(42,27,17,.18); }
.topbar .account-menu-panel a, .account-menu-panel button.link { color: var(--ink); text-align: left; width: 100%;
  padding: .6rem .75rem; border-radius: 8px; }
.topbar .account-menu-panel a:hover, .account-menu-panel button.link:hover,
.topbar .account-menu-panel a:focus-visible, .account-menu-panel button.link:focus-visible { background: var(--cream); outline: none; }
.account-menu-logout { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--line); }
.account-menu-panel button.link { color: var(--danger); }
@media (max-width: 600px) {
  .account-menu[open] { flex-basis: 100%; }
  .account-menu-panel { position: static; margin-top: .5rem; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .account-menu summary::after { transition: none; } }

.container { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 2rem 1rem; }
.muted { color: var(--muted); font-size: .92rem; }

.btn { display: inline-block; background: var(--cacao); color: var(--cream); border: 1px solid var(--cacao); border-radius: 999px;
  padding: .6rem 1.3rem; font: 600 .95rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--cacao-2); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--cacao); font-size: 1.05rem; padding: .8rem 2rem; }
.btn-gold:hover { background: #d8b45e; }
.btn-ghost { background: transparent; color: var(--cacao); }
.btn-ghost:hover { background: var(--line); }
.btn-small { padding: .35rem .8rem; font-size: .85rem; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.topbar .btn-small { background: var(--gold); color: var(--cacao); border-color: var(--gold); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(59,35,20,.06); }
.narrow { max-width: 460px; margin: 2rem auto; }

.flash { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-family: system-ui, sans-serif; font-size: .95rem; }
.flash-success { background: var(--ok-fond); color: var(--ok); }
.flash-error { background: var(--danger-fond); color: var(--danger); }
.flash-info { background: #f3ead9; color: var(--cacao-2); }

/* Formulaires */
.form { display: flex; flex-direction: column; gap: .9rem; }
.form label { display: flex; flex-direction: column; gap: .25rem; font: .9rem system-ui, sans-serif; color: var(--muted); }
.form input, .form select, .form textarea { font: 1rem system-ui, sans-serif; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--blanc); color: var(--ink); width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.form.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.form fieldset > label { grid-column: span 2; }
.form legend { padding: 0 .4rem; color: var(--cacao); }
.col-2 { grid-column: span 2; } .col-4 { grid-column: 1 / -1; }
.form fieldset > .span-1 { grid-column: span 1; } .form fieldset > .span-3 { grid-column: span 3; } .form fieldset > .span-4 { grid-column: 1 / -1; }
.upper { text-transform: uppercase; }
.code-input { font-size: 1.6rem !important; letter-spacing: .3em; text-align: center; }
.secret { background: var(--cream); padding: .15rem .4rem; border-radius: 4px; word-break: break-all; }
.qr { display: flex; justify-content: center; padding: 1rem; background: var(--blanc); border-radius: 8px; margin: 1rem 0; }
.codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* Accueil */
.home .container { max-width: 1200px; }
.hero { text-align: center; padding: 4rem 1rem 3rem; background:
  radial-gradient(circle at 20% 20%, rgba(201,162,75,.25), transparent 50%),
  linear-gradient(160deg, var(--cacao) 0%, var(--cacao-nuit) 100%);
  color: var(--cream); border-radius: 18px; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 5rem); margin: .3rem 0; letter-spacing: .06em; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: .2em; font: .8rem system-ui, sans-serif; color: var(--gold); }
.hero .lead { max-width: 560px; margin: 0 auto 2rem; opacity: .85; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cacao-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile { display: flex; align-items: flex-end; padding: 1rem; color: var(--cream); }
.tile figcaption { font-size: 1.1rem; }
.tile-0 { background: linear-gradient(135deg, #4a2a17, var(--praline)); }
.tile-1 { background: linear-gradient(135deg, #2b170c, #6b4027); }
.tile-2 { background: linear-gradient(135deg, #6b4027, var(--gold)); }
.tile-3 { background: linear-gradient(135deg, var(--cacao), #a07148); }
.tile-4 { background: linear-gradient(135deg, #1f120a, var(--cacao-2)); }
.tile-5 { background: linear-gradient(135deg, var(--praline), #e3c78a); }

/* Annuaire */
.toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.toolbar h1 { flex: 1 1 100%; margin: 0; }
.search-box { position: relative; flex: 1 1 280px; min-width: 0; }
.search-box input { width: 100%; padding-right: 2.6rem !important; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.search-clear:hover { background: #e6d6c2; }
.search-clear[hidden] { display: none; }
.toolbar input { flex: 1 1 280px; font: 1rem system-ui, sans-serif; padding: .6rem .9rem; border-radius: 999px; border: 1px solid var(--line); }
.toolbar-actions { display: flex; gap: .5rem; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul.children { margin-left: 1.1rem; padding-left: 1rem; border-left: 2px solid var(--line); }
/* Ligne d'une personne : flèche pour déplier (bouton, pas de <details> : Safari laissait des blancs entre frères et sœurs) */
.node-row { display: grid; grid-template-columns: 1.1rem auto minmax(0, 1fr); column-gap: .5rem; align-items: baseline; padding: .3rem .2rem; border-radius: 6px; }
.node-row .who { min-width: 0; }
.node-row .who .years { white-space: nowrap; margin-left: .3rem; }
.node-row:hover { background: #f1e7d8; }
.tog { width: 1.1rem; align-self: start; margin-top: .35rem; border: 0; background: none; padding: 0; cursor: pointer; color: var(--praline); font-size: .75rem; line-height: 1; }
.tog::before { content: "▶"; display: inline-block; transition: transform .15s; }
.tog[aria-expanded="true"]::before { transform: rotate(90deg); }
.node-row:has(> button.tog) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tog-leaf { cursor: default; }
.tog-leaf::before { content: ""; }
.node-body[hidden] { display: none; }
/* Fiche ouverte en fenêtre depuis l'annuaire */
.fiche-popup { width: min(900px, calc(100vw - 2rem)); height: min(88vh, 1000px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.fiche-popup[open] { display: flex; flex-direction: column; }
.fiche-popup::backdrop { background: rgba(40, 28, 18, .55); }
.fiche-popup-bar { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid #e6d9c6; background: var(--creme-clair); }
.fiche-popup iframe { flex: 1; width: 100%; border: 0; background: var(--blanc); }
@media (max-width: 640px) { .fiche-popup { width: 100vw; height: 100dvh; border-radius: 0; } }
body.in-popup .topbar, body.in-popup .footer, body.in-popup .crumb { display: none; }
body.in-popup .container { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .tog::before { transition: none; } }
/* Mariage sous le membre de la famille, puis le conjoint à la ligne */
.union { padding: .05rem 0 .4rem 1.8rem; color: var(--muted); display: grid; gap: .05rem; justify-items: start; }
.union .wed { font-style: italic; color: var(--praline); text-decoration: none; }
.union .wed:hover { text-decoration: underline; }
.union .with { display: flex; gap: .45rem; flex-wrap: wrap; align-items: baseline; }
.person { text-decoration: none; color: var(--ink); }
.deces { margin-left: .3em; color: var(--muted); }
.deces svg { width: .6em; height: .85em; vertical-align: -.05em; }
.person:hover { text-decoration: underline; }
.code { font: 600 .78rem ui-monospace, Menlo, monospace; color: var(--praline); background: var(--sable); padding: .1rem .4rem; border-radius: 4px; white-space: nowrap; }
.code.big { font-size: .95rem; }
.years { color: var(--muted); font-size: .88rem; }
.node.hidden { display: none; }
.node.match > .node-row .person { background: var(--surligne); }

/* Fiche */
.crumb { margin: 0 0 .5rem; font: .9rem system-ui, sans-serif; }
.person-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.person-head h1 { margin: .4rem 0 0; }
.facts { display: grid; grid-template-columns: 140px 1fr; gap: .5rem 1rem; margin: 1.5rem 0; }
.facts dt { color: var(--muted); font: .9rem system-ui, sans-serif; }
.facts dd { margin: 0; }
.pre { white-space: pre-line; }
.kids { list-style: none; padding: 0; }
.couple { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
.partner h2 { margin-bottom: 0; }
.partner .facts { margin-top: .75rem; }
.inline-form { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.kids li { padding: .25rem 0; }
.kid-edit { margin-left: .5rem; font: .8rem system-ui, sans-serif; color: var(--muted); }
.danger-zone { margin-top: 2rem; border-top: 1px dashed var(--line); padding-top: 1rem; }

/* Tableaux */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font: .9rem system-ui, sans-serif; }
.table th, .table td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table select, .table input[name=branch_code] { font: .85rem system-ui, sans-serif; padding: .3rem; max-width: 180px; }
.row-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.row-actions form { margin: 0; }

@media (max-width: 640px) {
  .form.grid, .form fieldset { grid-template-columns: 1fr; }
  .form.grid > *, .form fieldset > label, .form fieldset > .span-1, .form fieldset > .span-3 { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; }
  .couple { grid-template-columns: 1fr; }
  .facts dt { margin-top: .5rem; }
  .hero { padding: 3rem 1rem 2rem; }
}

/* Espace Rédaction et articles */
.badge { display: inline-block; font: 600 .7rem system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--praline); background: var(--sable); padding: .15rem .5rem; border-radius: 999px; }
.badge-draft { color: var(--danger); background: var(--danger-fond); }
.check { flex-direction: row !important; align-items: center; gap: .5rem !important; color: var(--ink) !important; }
.form .check input { width: auto; }
.r-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.r-head { margin-bottom: .6rem; }
.r-head h1 { margin: 0; }
.r-h2 { margin: 1rem 0 .2rem; font-size: 1.5rem; }
.r-tabs { margin-bottom: .4rem; }
.r-rights { margin: 0 0 1rem; }
.r-list { list-style: none; margin: .5rem 0 .8rem; padding: 0; }
.r-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 0; border-bottom: 1px solid var(--line); }
.r-item-main { flex: 1 1 260px; min-width: 0; }
.r-title { font-size: 1.1rem; }
.r-badges { display: inline-flex; gap: .3rem; margin-left: .4rem; vertical-align: middle; }
.r-meta { margin: .2rem 0 0; font: .8rem system-ui, sans-serif; color: var(--muted); }
.r-excerpt { margin: .2rem 0 0; font-size: .92rem; }
.r-editor { font: .95rem/1.6 ui-monospace, Menlo, monospace !important; }
.r-help { font: .88rem system-ui, sans-serif; color: var(--muted); }
.r-help summary { cursor: pointer; color: var(--cacao); }
.r-choices { display: flex !important; flex-direction: column; gap: .5rem !important; }
.r-pick { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: .6rem !important; max-height: 420px; overflow-y: auto; }
.r-pick-item { display: grid !important; gap: .25rem !important; font-size: .75rem !important; cursor: pointer; }
.r-pick-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--line); }
.r-pick-item input { width: auto !important; justify-self: start; }
.h-sign { margin: .3rem 0 0; font: .75rem system-ui, sans-serif; color: var(--muted); }

.a-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; }
.a-card { display: grid; align-content: start; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); text-decoration: none; color: var(--ink); }
.a-card:hover, .a-card:focus-visible { border-color: var(--gold); outline: none; }
.a-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--line); }
.a-card-body { display: grid; gap: .35rem; padding: .9rem 1rem 1rem; }
.a-card-body strong { font-size: 1.15rem; font-weight: normal; line-height: 1.25; }
.a-card-body span:not(.badge) { font-size: .92rem; color: var(--muted); }
.a-card-body .badge { justify-self: start; }
.a-card-body small { font: .78rem system-ui, sans-serif; color: var(--muted); }
.home-articles { margin-top: 2.5rem; }
.a-article { max-width: 760px; margin: 0 auto; }
.a-head h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .4rem 0 .6rem; text-wrap: balance; }
.a-chapo { color: var(--cacao-2); opacity: 1; }
.a-cover { margin: 1.5rem 0; }
.a-body { font-size: 1.08rem; line-height: 1.7; }
.a-body h2 { font-size: 1.45rem; margin-top: 2rem; }
.a-body .a-fig { margin: 1.5rem 0; display: grid; gap: .4rem; }
.a-body .a-fig img, .a-cover img { width: 100%; height: auto; border-radius: 10px; display: block; }
.a-body .a-fig figcaption { font: .85rem/1.4 system-ui, sans-serif; color: var(--muted); }
@media (max-width: 640px) { .a-body { font-size: 1rem; } .r-item .row-actions { width: 100%; } }
.a-comments { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.a-comment { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.a-comment p.pre { margin: .3rem 0 0; }
.a-comment form { margin: .3rem 0 0; }
.link-danger { background: none; border: 0; padding: 0; color: var(--danger); font: .8rem system-ui, sans-serif; cursor: pointer; text-decoration: underline; }
.a-comment-form { margin-top: 1.2rem; }
.r-note { margin: -.5rem 0 0; }
.birthdays { margin-bottom: 1.5rem; padding: .8rem 1rem; }
.bday-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.birthdays h2 { margin: 0; font-size: 1.15rem; }
.birthdays h2 small { font: .78rem system-ui, sans-serif; color: var(--muted); margin-left: .35rem; cursor: help; }
.bday-fleches { display: flex; gap: .3rem; }
.bday-fleches button { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--cacao); font: 1.2rem/1 system-ui, sans-serif; cursor: pointer; }
.bday-fleches button:hover:not(:disabled) { border-color: var(--gold); }
.bday-fleches button:disabled { opacity: .35; cursor: default; }
.bday-liste { list-style: none; margin: 0; padding: 0 0 .3rem; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: thin; overscroll-behavior-x: contain; }
.bday-liste:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bday-liste li { flex: 0 0 auto; min-width: 10.5rem; max-width: 16rem; scroll-snap-align: start; display: flex; flex-direction: column; gap: .15rem;
  padding: .45rem .75rem; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; }
.bday-liste .when { font: 600 .75rem system-ui, sans-serif; color: var(--praline); text-transform: capitalize; }
.bday-qui { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.bday-qui .person { overflow: hidden; text-overflow: ellipsis; }
.bday-qui .avatar { width: 24px; height: 24px; }
.bday-qui .years { font-size: .78rem; }
.bday-liste li.today { background: var(--surligne); border-color: var(--gold); }
.bday-liste li.today .when { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .bday-liste { scroll-behavior: auto; } }
/* Carrousel automatique : pas d'aimantation (elle bloquerait le défilement continu) ni de barre de défilement */
.bday-liste.bday-auto { scroll-snap-type: none; scroll-behavior: auto; scrollbar-width: none; padding-bottom: 0; }
.bday-liste.bday-auto::-webkit-scrollbar { display: none; }
.bday-pause { margin-left: auto; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  color: var(--cacao); font: .8rem system-ui, sans-serif; cursor: pointer; }
.bday-pause:hover { border-color: var(--gold); }
.bday-pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.recap-preview { white-space: pre-wrap; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; font: .85rem/1.5 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.table .email-input { font: .85rem system-ui, sans-serif; padding: .3rem; min-width: 190px; border: 1px solid var(--line); border-radius: 6px; }
/* Tableau des comptes : une carte par compte sur téléphone */
@media (max-width: 640px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem; background: var(--blanc); }
  .table-cards td { border: 0; padding: .3rem 0; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
  .table-cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .8rem; flex: 0 0 6.5rem; }
  .table-cards td select, .table-cards td input[name], .table-cards .email-input { flex: 1; min-width: 0; max-width: none; }
  .table-cards td input[type=checkbox] { flex: 0 0 auto; }
  .table-cards .row-actions { justify-content: flex-start; padding-top: .6rem; border-top: 1px dashed var(--line); margin-top: .3rem; }
}
/* Photos des personnes au fil des années (rond, type identité) */
.portrait { width: 112px; height: 112px; object-fit: cover; border-radius: 50%; border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--line); display: block; background: var(--line); }
.portrait-small { width: 76px; height: 76px; }
.person-head { align-items: center; }
.person-title { flex: 1 1 200px; }
.portrait-main { display: grid; justify-items: center; gap: .2rem; text-decoration: none; color: var(--muted); font: .78rem system-ui, sans-serif; }
.portraits { margin-top: 1.5rem; }
.portrait-strip { list-style: none; margin: .8rem 0; padding: .2rem 0 .6rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; }
.portrait-strip li { display: grid; justify-items: center; gap: .25rem; flex: 0 0 auto; scroll-snap-align: start; font: .85rem system-ui, sans-serif; }
.portrait-strip li + li { position: relative; }
.portrait-strip li + li::before { content: "→"; position: absolute; left: -.85rem; top: 28px; color: var(--line); font-size: .9rem; }
.portrait-strip form { margin: 0; }
.portrait-add { display: flex; flex-flow: row wrap; align-items: flex-end; gap: .8rem; margin-top: .5rem; padding: .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.portrait-add label { flex: 1 1 200px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-left: .4rem; border: 1px solid var(--line); background: var(--line); }

.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--cacao); text-decoration: underline; cursor: pointer; }
/* 2FA : zone de saisie large et facile à toucher */
.code-input { min-height: 3.2rem; touch-action: manipulation; }

/* Recadrage de la photo dans la bulle avant l'envoi */
.crop { flex: 1 1 100%; display: grid; justify-items: center; gap: .6rem; padding: .9rem .6rem .7rem; border-radius: 10px; background: var(--sable); }
.crop[hidden] { display: none; }
.crop-frame { position: relative; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: var(--cacao); cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold); }
.crop-frame.drag { cursor: grabbing; }
.crop-frame:focus-visible { outline: 2px solid var(--cacao-2); outline-offset: 7px; }
.crop-frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-zoom { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: .5rem; align-items: center; width: min(100%, 300px); }
.crop-zoom button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--gold); background: var(--paper); color: var(--cacao-2); font: 500 1.3rem/1 system-ui, sans-serif; cursor: pointer; padding: 0; }
.crop-zoom input { width: 100%; accent-color: var(--praline); }
.crop-hint { margin: 0; font: .82rem system-ui, sans-serif; color: var(--muted); text-align: center; max-width: 36ch; }
.crop-reset { font: .82rem system-ui, sans-serif; color: var(--cacao-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* Photos d'un article : formulaire (jusqu'à 4) et galerie sous le texte */
.form fieldset.r-photos { display: flex; flex-direction: column; gap: .8rem; }
.r-photo-list, .r-photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.r-photo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.r-photo img, .r-photo-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--line); display: block; }
.r-photo-preview figure { margin: 0; display: grid; gap: .25rem; font: .75rem system-ui, sans-serif; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.r-photo-msg { margin: 0; }
.r-photo-msg.is-error { color: var(--danger); }
.a-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.8rem 0 0; }
.a-gallery .a-fig { margin: 0; display: grid; gap: .4rem; }
.a-gallery .a-fig:only-child { grid-column: 1 / -1; }
.a-gallery .a-fig img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 10px; display: block; }
.a-gallery .a-fig figcaption { font: .85rem/1.4 system-ui, sans-serif; color: var(--muted); }
@media (max-width: 480px) { .a-gallery { grid-template-columns: 1fr; } }

/* Fiche couple : « Divorcés » Oui / Non, sur sa propre ligne sous la ville du mariage */
.form fieldset.radio-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; flex-basis: 100%; padding: .6rem 1rem; }
.form fieldset.radio-row legend { font: .9rem system-ui, sans-serif; color: var(--muted); padding: 0 .3rem; }
.inline-form > .btn { flex-basis: auto; }
@media (max-width: 480px) { .tree ul.children { margin-left: .5rem; padding-left: .6rem; } }

/* Recherche dans l'annuaire : une ligne par personne trouvée */
.search-count { margin: 0 0 .4rem; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: baseline; padding: .45rem .2rem; border-bottom: 1px solid var(--line); }
.search-results .years { white-space: nowrap; margin-left: .3rem; }
.tree[hidden], .search-results[hidden] { display: none; }
.code-conjoint { color: var(--muted); background: #efe7dc; font-weight: 500; }
.search-results .conjoint-de { display: block; margin-left: 0; white-space: normal; font-style: italic; }
.toolbar-actions[hidden] { display: none; }

/* Consentement annuaire Steverlynck */
.consent-list { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
.consent-state { font: .88rem system-ui, sans-serif; }
.consent-oui { color: var(--ok); }
.consent-non { color: var(--danger); }
.consent-aucune { color: var(--muted); }
.consent-counts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1rem 0; }
.consent-counts strong { font-size: 1.4rem; margin-right: .2rem; font-variant-numeric: tabular-nums; }
.consent-export { margin: .5rem 0 .3rem; }
.consent-help { flex-basis: 100%; margin: 0; }


/* Accès à l'annuaire : filtres, liste des personnes, pastilles d'état, encadré de la fiche, « Qui peut quoi » */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0; font-family: system-ui, sans-serif; }
.chips a { text-decoration: none; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line); color: var(--cacao); font-size: .88rem; }
.chips a span { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: .15rem; }
.chips a[aria-current="page"] { background: var(--cacao); border-color: var(--cacao); color: var(--cream); }
.chips a[aria-current="page"] span { color: var(--gold); }
.people-list { list-style: none; padding: 0; margin: 0; }
.people-list li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.people-list .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; min-width: 0; }
.people-list .who small { flex-basis: 100%; color: var(--muted); font: .85rem system-ui, sans-serif; overflow-wrap: anywhere; }
.people-list .tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.pill { display: inline-block; font: .78rem system-ui, sans-serif; padding: .15rem .55rem; border-radius: 999px; background: #efe6da; color: var(--muted); }
.pill-ok { background: var(--ok-fond); color: var(--ok); }
.pill-wait { background: #f6ecd2; color: #7a5a14; }
.pill-off { background: var(--danger-fond); color: var(--danger); }
.acces { margin: 1.5rem 0; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.acces h2 { margin-top: 0; }
.acces p { margin: .4rem 0; }
.acces .inline-form { margin-top: .6rem; }
.matrix td.no { color: var(--muted); }
.matrix .mine { background: #f8f1e4; }
.matrix th:first-child, .matrix td:first-child { width: 40%; }
@media (max-width: 640px) {
  .people-list li { grid-template-columns: 1fr; }
  .matrix thead { display: none; }
  .matrix tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .matrix td { display: flex; gap: .5rem; border: 0; padding: .15rem 0; width: auto !important; }
  .matrix td[data-label]::before { content: attr(data-label) " :"; color: var(--muted); min-width: 7.5rem; }
  .matrix td:first-child { font-weight: 600; }
}

/* Éditeur visuel du texte des articles (public/assets/js/editeur.js) */
.r-text { display: flex; flex-direction: column; gap: .25rem; font: .9rem system-ui, sans-serif; color: var(--muted); }
.ved { border: 1px solid var(--line); border-radius: 8px; background: var(--blanc); }
.ved:focus-within { outline: 2px solid var(--gold); border-color: var(--gold); }
.ved-bar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem; border-bottom: 1px solid var(--line); background: var(--cream);
  border-radius: 8px 8px 0 0; position: sticky; top: 0; z-index: 2; }
.ved-bar button { min-width: 2.4rem; height: 2.2rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  color: var(--ink); font: 1rem system-ui, sans-serif; cursor: pointer; }
.ved-bar button:hover { border-color: var(--gold); }
.ved-bar button.on { background: var(--sable); border-color: var(--praline); color: var(--cacao); }
.ved-bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ved-bar .ved-b { font-weight: 700; } .ved-bar .ved-i { font-style: italic; font-family: Georgia, serif; }
.ved-bar .ved-u { text-decoration: underline; text-underline-offset: 3px; }
.ved-bar .ved-h, .ved-bar .ved-a { font-size: .85rem; }
.ved-area { min-height: 18rem; max-height: 70vh; overflow-y: auto; padding: .8rem 1rem; color: var(--ink); font: 1.05rem/1.65 Georgia, serif;
  outline: none; overflow-wrap: anywhere; cursor: text; }
.ved-area p { margin: 0 0 .9em; }
.ved-area h2 { font-size: 1.3rem; margin: 1.2em 0 .5em; }
.ved-area a { color: var(--cacao-2); }
.ved-area u, .a-body u { text-underline-offset: 3px; }
.ved-area:empty::before { content: attr(data-placeholder); color: var(--muted); }
.ved-photo { font: .85rem system-ui, sans-serif; color: var(--praline); background: var(--sable); border-radius: 6px; padding: .4rem .7rem;
  display: inline-block; user-select: all; }

/* Carte de la famille (/carte, app/views/carte.php, public/assets/js/carte.js) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.carte-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1rem; }
.carte-tete h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.4rem); flex: 1 1 auto; }
.carte-surtitre { flex-basis: 100%; margin: 0; font: 600 .75rem system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--praline); }
.carte-chiffres { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; font: .85rem system-ui, sans-serif; color: var(--muted); }
.carte-chiffres li { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; }
.carte-chiffres strong { color: var(--cacao); font-size: 1.05rem; }
.carte-outils { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin-bottom: .8rem; font: .88rem system-ui, sans-serif; }
.carte-calques { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.carte-pilule { position: relative; cursor: pointer; }
.carte-pilule input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.carte-pilule span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); transition: background .15s, color .15s; }
.carte-pilule span::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid currentColor; }
.carte-pilule input:checked + span { background: var(--cacao); border-color: var(--cacao); color: var(--cream); }
.carte-pilule input:checked + span::before { background: var(--gold); border-color: var(--gold); }
.carte-pilule input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.js .carte-ok { display: none; }
.carte-vues { display: inline-flex; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.carte-vues a { padding: .3rem .75rem; border-radius: 999px; color: var(--cacao-2); text-decoration: none; white-space: nowrap; }
.carte-vues a:hover { background: var(--cream); }
.carte-vues a[aria-current] { background: var(--gold); color: var(--cacao); font-weight: 600; }

.carte-boite { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--mer);
  box-shadow: var(--ombre-boite); }
.carte-svg { display: block; width: 100%; height: clamp(300px, 58vw, 68vh); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.carte-svg:active { cursor: grabbing; }
.carte-svg.monde { height: auto; aspect-ratio: 1.9 / 1; max-height: 70vh; }
.carte-fond { fill: var(--mer); }
.carte-svg.monde .carte-fond { fill: var(--cream); }
.mer-1 { stop-color: #e6f0f2; } .mer-2 { stop-color: #c9dbe0; }
.carte-globe { fill: url(#carte-mer-degrade); stroke: #b9cdd3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte-svg:not(.monde) .carte-globe { fill: var(--mer); stroke: none; }
.carte-grille { fill: none; stroke: var(--blanc); stroke-opacity: .55; stroke-width: .7; vector-effect: non-scaling-stroke; }
.carte-pays path { fill: #f7f0e4; stroke: #c9b49a; stroke-width: .6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.carte-pays path.famille { fill: #f1dcb3; stroke: #b98f54; }
.carte-pays path:hover { fill: #fbf5ea; }
.carte-pays path.famille:hover { fill: #ecd09c; }
.carte-liens path { fill: none; stroke: var(--praline); stroke-width: 1.4; stroke-opacity: .55; stroke-dasharray: 5 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) { .carte-liens path { animation: carte-fourmis 1.6s linear infinite; } }
@keyframes carte-fourmis { to { stroke-dashoffset: -10; } }
.pin { cursor: pointer; }
.pin:focus { outline: none; }
.pin-halo { fill: var(--blanc); opacity: .9; }
.pin-f .pin-fond { fill: var(--praline); }
.pin-h .pin-fond { fill: var(--cacao); stroke: var(--gold); stroke-width: 3; }
.pin-m .pin-fond { fill: var(--blanc); stroke: var(--repere); stroke-width: 2; }
.pin-m .pin-n { fill: var(--repere); }
.pin-n { fill: var(--blanc); font-family: system-ui, sans-serif; font-weight: 700; pointer-events: none; }
.pin-l { display: none; fill: var(--ink); font-family: system-ui, sans-serif; font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: 3.5; stroke-linejoin: round; pointer-events: none; }
.carte-svg.proche .pin-l { display: inline; }
.pin:hover .pin-halo, .pin:focus-visible .pin-halo { fill: var(--gold); opacity: 1; }
.pin:hover .pin-l, .pin:focus-visible .pin-l { display: inline; }
.carte-zoom { display: none; position: absolute; right: .7rem; top: .7rem; flex-direction: column; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(59,35,20,.18); }
.js .carte-zoom { display: flex; }
.carte-zoom button { width: 2.4rem; height: 2.4rem; border: 0; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--cacao); font: 600 1.25rem/1 system-ui, sans-serif; cursor: pointer; }
.carte-zoom button:last-child { border-bottom: 0; font-size: 1rem; }
.carte-zoom button:hover { background: var(--cream); }
.carte-aide { display: none; margin: 0; padding: .45rem .9rem; background: rgba(255,253,249,.92); border-top: 1px solid var(--line); font: .8rem system-ui, sans-serif; color: var(--muted); }
.js .carte-aide { display: block; }
.carte-h2 { margin: 2rem 0 .8rem; }
.carte-pays-liste { columns: 2 300px; column-gap: 1rem; }
.carte-pays-carte { break-inside: avoid; margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.carte-pays-carte h3 { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: normal; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.carte-pays-carte h3 small { margin-left: auto; font: .8rem system-ui, sans-serif; color: var(--muted); }
.drapeau { font-size: 1.3em; line-height: 1; }
.carte-ville { padding: .45rem .5rem; margin: 0 -.5rem; border-radius: 8px; scroll-margin-top: 30vh; transition: background .3s; }
.carte-ville h4 { margin: .2rem 0 .3rem; font: 600 .95rem system-ui, sans-serif; color: var(--cacao-2); }
.carte-ville h4 small { font-weight: normal; color: var(--muted); font-size: .78rem; }
.carte-ville:target, .carte-ville.vise { background: #f6e6c4; }
.carte-gens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.carte-gens li { background: var(--cream); border-radius: 999px; padding: .15rem .65rem; }
.carte-gens .avatar { width: 22px; height: 22px; margin-left: .3rem; }
.carte-autres { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; margin-top: .5rem; }
.carte-autres .carte-ville { margin: 0; padding: .8rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.carte-autres p { margin: 0; font-size: .92rem; }
.carte-credit { margin-top: 1.5rem; font: .75rem system-ui, sans-serif; color: var(--muted); }
@media (max-width: 640px) {
  .carte-svg { height: clamp(300px, 105vw, 62vh); }
  .carte-svg.monde { height: auto; aspect-ratio: 1.75 / 1; }
  .carte-outils { flex-direction: column; align-items: stretch; }
  .carte-vues { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
}

/* Lien de parenté et corrections (fiche) */
.kin { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--creme-clair); }
.kin h2 { margin-top: 0; }
.kin-res { font-size: 1.2rem; margin: .4rem 0 .2rem; }
.kin-res em { font-style: normal; color: var(--praline); font-weight: bold; }
.kin-deg { margin: 0; font: .8rem ui-monospace, Menlo, monospace; color: var(--praline); }
.kin-path { margin: .3rem 0 0; overflow-wrap: anywhere; }
.corr { margin-top: 1.5rem; }
.corr-item { padding: .8rem 1rem; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--or-fond); margin-bottom: .8rem; }
.corr-item ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.corr-item del { color: var(--muted); }
.corr-item p { margin: 0 0 .4rem; }
.corr-msg { font-style: italic; }
.corr-propose { border: 1px dashed var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.corr-propose summary { cursor: pointer; color: var(--cacao-2); font: 600 .95rem system-ui, sans-serif; }
.corr-propose[open] summary { margin-bottom: .6rem; }
.corr-bar { margin-bottom: 1rem; border-color: var(--gold); background: var(--or-fond); }
.corr-bar h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.corr-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* Arbre visuel (/arbre, app/views/arbre.php, public/assets/js/arbre.js) */
.arbre-tete h1 { margin: .2rem 0 .3rem; font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: normal; }
.arbre-tete .muted { margin: 0 0 .8rem; font-size: .9rem; }
.arbre-outils { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.arbre-cherche { display: flex; gap: .4rem; flex: 1 1 260px; min-width: 0; }
.arbre-cherche input { flex: 1; min-width: 0; font: 1rem system-ui, sans-serif; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--blanc); }
.arbre-cherche input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.arbre-branches { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: .6rem; scrollbar-width: thin; }
.arbre-branche { flex: 0 0 auto; padding: .25rem .75rem; border-radius: 999px; border: 2px solid; background: var(--paper); text-decoration: none; color: var(--ink);
  font: 500 .85rem system-ui, sans-serif; }
.arbre-message { margin: 0 0 .5rem; font: .85rem system-ui, sans-serif; color: var(--praline); }
.arbre-boite { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--fond-arbre);
  box-shadow: var(--ombre-boite); }
.arbre-svg { display: block; width: 100%; height: clamp(360px, 70vh, 780px); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.arbre-svg:active { cursor: grabbing; }
.arbre-fond { fill: var(--fond-arbre); }
.arbre-traits path { fill: none; stroke: #b39a7c; stroke-width: 1.6; stroke-linejoin: round; }
.arbre-traits path.couple { stroke: var(--gold); stroke-width: 2.4; }
.arbre-traits path.couple.divorce { stroke-dasharray: 4 4; }
.noeud { cursor: pointer; }
.noeud:focus { outline: none; }
.noeud-fond { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.noeud.sang .noeud-fond { stroke-width: 2.5; }
.noeud.conjoint .noeud-fond { fill: var(--creme-clair); stroke-dasharray: 5 3; }
.noeud-rond { fill: #ead9c2; }
.noeud-initiales { fill: var(--cacao); font-family: Georgia, serif; font-weight: 600; letter-spacing: .03em; }
.noeud-prenom { fill: var(--ink); font-family: Georgia, serif; }
.noeud-nom { fill: var(--cacao); font-family: Georgia, serif; font-weight: 700; letter-spacing: .02em; }
.noeud-ans { fill: var(--muted); font-family: system-ui, sans-serif; }
.noeud-croix { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.noeud.decede .noeud-fond { fill: #f7f2ea; }
.noeud.decede image { filter: grayscale(.6); }
.noeud-mariage { fill: var(--praline); font-family: system-ui, sans-serif; font-weight: 600; paint-order: stroke; stroke: var(--fond-arbre); stroke-width: 3; }
.noeud:hover .noeud-fond, .noeud:focus-visible .noeud-fond { fill: #fff6e3; stroke: var(--gold); }
.noeud.chemin .noeud-fond { fill: #fff3d6; }
.noeud.moi .noeud-fond { stroke: var(--gold); stroke-width: 4; }
.noeud-vous { fill: var(--gold); }
.noeud-vous-t { fill: var(--cacao); font-family: system-ui, sans-serif; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .noeud.eclair .noeud-fond { animation: arbre-eclair .8s ease-in-out 3; }
}
.noeud.eclair .noeud-fond { stroke: var(--gold); stroke-width: 5; }
@keyframes arbre-eclair { 50% { stroke-width: 9; stroke-opacity: .5; } }
.arbre-svg.loin text, .arbre-svg.loin image, .arbre-svg.loin .noeud-rond, .arbre-svg.loin .noeud-croix { display: none; }
.arbre-zoom { top: .7rem; right: .7rem; }
/* Couleurs des branches (enfants de l'aïeul) */
.b0 { --b: #b5523b; } .b1 { --b: #3f7f6e; } .b2 { --b: #c08a1e; } .b3 { --b: #5a6fa8; }
.b4 { --b: #8f5a9e; } .b5 { --b: #4f8a3c; } .b6 { --b: #a34a6b; } .b7 { --b: #2e7f9a; }
.noeud.sang .noeud-fond { stroke: var(--b); }
.arbre-svg.loin .noeud.sang .noeud-fond { fill: var(--b); fill-opacity: .25; }
.arbre-branche { border-color: var(--b); }
.arbre-branche:hover { background: var(--cream); }
.noeud.moi .noeud-fond { stroke: var(--gold); }
@media (max-width: 640px) { .arbre-svg { height: clamp(360px, 68vh, 640px); } }

.annuaire-liens { margin: .2rem 0 .8rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.arbre-liens { margin: .2rem 0 0; font: .85rem system-ui, sans-serif; }

/* Articles audio (app/views/_audio.php) */
.badge-audio { background: #2f2a4a; color: #f3eefc; }
.a-audio { margin: 1.2rem 0 1.5rem; padding: 1rem 1.1rem; border-radius: 16px; background: linear-gradient(135deg, var(--cacao), var(--cacao-2)); color: var(--cream);
  box-shadow: 0 10px 30px rgba(59,35,20,.18); }
.a-audio-tete { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }
.a-audio-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--gold); background: #6b4a33; }
.a-audio-icone { display: grid; place-items: center; font-size: 1.8rem; }
.a-audio-qui { margin: 0; font-size: 1.25rem; font-weight: normal; color: var(--cream); }
.a-audio-qui a { color: var(--gold); text-decoration: none; }
.a-audio-qui a:hover { text-decoration: underline; }
.a-audio-qui strong { color: var(--gold); }
.a-audio-autres { margin: .1rem 0 0; color: #e8d9c4; font-style: italic; }
.a-audio-meta { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font: .82rem system-ui, sans-serif; color: var(--sable-fonce); }
.a-audio-lecteur { display: block; width: 100%; height: 44px; border-radius: 999px; }
.a-audio-actions { margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.a-audio-actions .btn { background: var(--gold); border-color: var(--gold); color: var(--cacao); }
.a-audio-actions .muted { color: var(--sable-fonce); font-size: .8rem; }
.a-card-voix { font: italic .85rem Georgia, serif; color: var(--praline); }
.r-audio { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem 1rem; display: grid; gap: .7rem; }
.r-audio legend { font-weight: 600; padding: 0 .3rem; }
.r-audio .muted { margin: 0; font-size: .85rem; }
.r-audio audio { width: 100%; }
.r-audio-actuel { display: grid; gap: .4rem; padding: .7rem; background: var(--cream); border-radius: 10px; }
.r-audio-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.r-audio-msg.erreur { color: var(--danger, #b3261e); font-weight: 600; }
.voix { margin-top: 1.5rem; }
.voix ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }

/* Publicités (/publicites, app/views/publicites.php ; formulaire : public/assets/js/video-envoi.js) */
.pubs-tete h1 { margin: .2rem 0 .3rem; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.pubs-tete .muted { margin: 0 0 .8rem; }
.pubs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; margin-top: 1rem; }
.pub { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(59,35,20,.05), 0 8px 24px rgba(59,35,20,.08); scroll-margin-top: 5rem; }
.pub:target { outline: 3px solid var(--gold); outline-offset: 2px; }
.pub-ecran { background: var(--ecran); aspect-ratio: 16 / 9; display: flex; }
.pub-ecran.pub-vertical { aspect-ratio: 3 / 4; }
.pub-ecran video { width: 100%; height: 100%; object-fit: contain; background: var(--ecran); }
.pub-texte { padding: .9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.pub-texte h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.pub-badges { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: center; font: .8rem system-ui, sans-serif; color: var(--muted); }
.pub-annee { background: var(--cacao); color: var(--gold); font-weight: 700; border-radius: 6px; padding: .1rem .5rem; letter-spacing: .05em; }
.pub-source { margin: 0; font: .85rem system-ui, sans-serif; color: var(--muted); }
.pub-source a { color: var(--cacao-2); }
.pub-desc { font-size: .95rem; }
.pub-desc p { margin: .3rem 0 0; }
.r-video { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem 1rem; display: grid; gap: .7rem; }
.r-video legend { font-weight: 600; padding: 0 .3rem; }
.r-video .muted { margin: 0; font-size: .85rem; }
.r-video video { width: 100%; max-height: 360px; background: var(--ecran); border-radius: 10px; }
.r-video-envoi { display: grid; gap: .5rem; }
.r-progres { height: 10px; border-radius: 999px; background: var(--cream); overflow: hidden; border: 1px solid var(--line); }
.r-progres span { display: block; height: 100%; width: 0; background: var(--praline); transition: width .3s; }
.r-progres span.fini { background: var(--ok, var(--ok)); width: 100%; }
[data-video-msg].erreur { color: var(--danger); font-weight: 600; }

/* ---------------------------------------------------------------- Médiathèque, bouton Créer, classement */
.m-creer { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.m-creer-type { display: grid; gap: .5rem; align-content: start; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); text-decoration: none; min-height: 44px; }
.m-creer-type:hover, .m-creer-type:focus-visible { border-color: var(--gold); outline: none; box-shadow: var(--ombre-boite); }
.m-creer-type svg { color: var(--praline); }
.m-creer-type strong { font-size: 1.2rem; font-weight: normal; }
.m-creer-type span { color: var(--muted); font-size: .92rem; }

.m-filtres { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-bottom: .6rem; }
.m-filtres > label { flex: 1 1 180px; }
.m-filtres-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.m-vignette { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--sable);
  color: var(--praline); font: 600 .85rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.m-son .m-vignette { background: #ece8f5; color: #2f2a4a; }
.m-video .m-vignette { background: var(--fond-arbre); }
.m-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.m-badge-type { background: var(--cacao); color: var(--cream); }
.a-card-body .m-rubrique { font: 600 .72rem system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--praline); }
.a-card-body .m-tags { font: .8rem system-ui, sans-serif; color: var(--muted); }

.c-classement { display: grid; gap: .8rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem 1rem; }
.c-classement legend { padding: 0 .4rem; font-weight: 600; }
.c-groupe { display: grid; gap: .35rem; }
.c-groupe-nom { font: 600 .72rem system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.c-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.c-tag { position: relative; display: inline-flex !important; cursor: pointer; }
.c-tag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-tag span { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font: .88rem system-ui, sans-serif; color: var(--ink); }
.c-tag input:checked + span { background: var(--cacao); border-color: var(--cacao); color: var(--cream); }
.c-tag input:checked + span::before { content: "✓ "; }
.c-tag input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.c-compact { padding: .6rem .8rem .8rem; }
.c-details summary { cursor: pointer; font: .9rem system-ui, sans-serif; color: var(--praline); margin: .3rem 0; }

.c-inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.c-inline > label { flex: 1 1 160px; }
.c-inline .c-ordre { flex: 0 0 90px; }
.c-ligne { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.c-ligne > form:first-child { flex: 999 1 420px; }
.c-compte { font: .88rem system-ui, sans-serif; white-space: nowrap; padding-bottom: .55rem; }
.c-plus summary { cursor: pointer; font: .88rem system-ui, sans-serif; color: var(--muted); padding-bottom: .55rem; }
.c-plus[open] { flex-basis: 100%; display: grid; gap: .6rem; }
.c-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-top: .6rem; }
.c-ajout { margin: .8rem 0 1.6rem; padding: .8rem 1rem; border: 1px dashed var(--sable-fonce); border-radius: var(--radius); }

.h-medias { margin-top: 3rem; }
.h-medias h2 { font-size: 1.4rem; }