:root {
    --color-bg: #faf7f2;
    --color-surface: #ffffff;
    --color-border: #e4dccf;
    --color-text: #2c2620;
    --color-text-muted: #6b6255;
    --color-primary: #7a3b2e;
    --color-primary-dark: #5c2b21;
    --color-accent: #a9762f;
    --color-danger: #b3261e;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(44, 38, 32, 0.08);

    --sidebar-width: 264px;
    --sidebar-bg: #16213e;
    --sidebar-bg-hover: #223055;
    --sidebar-bg-active: #2c3e63;
    --sidebar-text: #e7e2d6;
    --sidebar-text-muted: #8b93ad;
    --sidebar-accent: #d1a94e;

    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Georgia", "Iowan Old Style", "Palatino Linotype", serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.55;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Ancien bandeau horizontal, encore utilisé par l'espace admin ---- */

header.site-header {
    background: var(--color-primary);
    color: #fff;
    padding: 1rem 1.5rem;
}

header.site-header .header-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

header.site-header a { color: #fff; }
header.site-header .brand { font-size: 1.4rem; font-weight: bold; letter-spacing: .02em; }
header.site-header nav a { margin-left: 1rem; opacity: .9; }
header.site-header nav a:hover { opacity: 1; }

/* ---- Coquille : sidebar persistante + zone de contenu (site public) ---- */

.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.sidebar-toggle-checkbox { display: none; }

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE historique */
}
.sidebar::-webkit-scrollbar { display: none; /* Chrome/Safari/Edge */ }

.sidebar-brand { padding: 1.75rem 1.5rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-brand a { color: #fff; }
.sidebar-brand a:hover { text-decoration: none; }
.sidebar-brand .brand-name { font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.2; }
.sidebar-brand .brand-name strong { display: block; font-size: 1.55rem; letter-spacing: .03em; color: var(--sidebar-accent); }
.sidebar-brand .brand-sub { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--sidebar-text-muted); margin-top: .35rem; }

.sidebar-nav { padding: .75rem; }
.sidebar-section-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-text-muted); padding: 1.1rem .75rem .3rem; }

.nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: var(--radius);
    color: var(--sidebar-text);
    font-size: .93rem;
    margin-bottom: .1rem;
}
.nav-item:hover { background: var(--sidebar-bg-hover); text-decoration: none; }
.nav-item.active { background: var(--sidebar-bg-active); color: #fff; font-weight: bold; }
.nav-item .icon { width: 1.3em; text-align: center; flex-shrink: 0; }
.nav-item.soon { color: var(--sidebar-text-muted); }
.nav-item .soon-badge {
    margin-left: auto; font-size: .62rem; background: rgba(255, 255, 255, .08); color: var(--sidebar-text-muted);
    padding: .1rem .4rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}

.sidebar-footer { margin-top: auto; padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; }
.sidebar-footer a { color: var(--sidebar-text); }
.sidebar-footer .admin-name { color: var(--sidebar-text-muted); display: block; margin-bottom: .3rem; }

.sidebar-overlay { display: none; }

.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: .65rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 15;
}
.hamburger-btn { display: none; font-size: 1.4rem; line-height: 1; color: var(--sidebar-text); cursor: pointer; }
.topbar .brand-mini { font-family: Georgia, serif; font-weight: bold; color: var(--sidebar-accent); }

.topbar-search { flex: 1; display: flex; max-width: 460px; }
.topbar-search input[type=text] {
    width: 100%;
    padding: .55rem .9rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--sidebar-text);
    font-size: .9rem;
}
.topbar-search input[type=text]::placeholder { color: var(--sidebar-text-muted); }
.topbar-search input[type=text]:focus { outline: 2px solid var(--sidebar-accent); outline-offset: 1px; }

.topbar-icons { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.icon-btn {
    width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.1rem; color: var(--sidebar-text-muted);
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.icon-badge {
    position: absolute; top: -.15rem; right: -.15rem; background: var(--color-danger); color: #fff;
    font-size: .6rem; font-weight: bold; min-width: 1.1rem; height: 1.1rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 .2rem; line-height: 1;
}

.account-menu { display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem .3rem .3rem; border-radius: 999px; color: var(--sidebar-text); }
.account-menu:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.account-avatar {
    width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--sidebar-accent);
    color: var(--sidebar-bg); display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: bold;
    flex-shrink: 0;
}
.account-menu .account-name { font-size: .88rem; }

@media (max-width: 860px) {
    .hamburger-btn { display: block; }
    .topbar-search { display: none; }
}

main {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
}

footer.site-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: .85rem;
    padding: 2rem 1rem;
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 30;
    }
    .sidebar-toggle-checkbox:checked ~ .sidebar { transform: translateX(0); }
    .topbar { display: flex; }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 15, 20, .45);
        z-index: 25;
    }
    .sidebar-toggle-checkbox:checked ~ .sidebar-overlay { display: block; }
}

h1, h2, h3 { color: var(--color-primary-dark); font-family: "Georgia", serif; }
h1 { font-size: 1.9rem; margin-top: 0; }
h2 { font-size: 1.3rem; border-bottom: 1px solid var(--color-border); padding-bottom: .35rem; margin-top: 2rem; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.search-form { display: flex; gap: .5rem; max-width: 480px; }
.search-form input[type=text] {
    flex: 1;
    padding: .6rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
}
button, .btn, input[type=submit] {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: .6rem 1.1rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .95rem;
    display: inline-block;
}
button:hover, .btn:hover, input[type=submit]:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-secondary { background: var(--color-text-muted); }
.btn-secondary:hover { background: var(--color-text); }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #7d1a14; }

.stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.5rem; text-align: center; box-shadow: var(--shadow); }
.stat .value { font-size: 1.7rem; font-weight: bold; color: var(--color-primary); }
.stat .label { color: var(--color-text-muted); font-size: .85rem; }

.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem 0 2rem;
    box-shadow: var(--shadow);
}
.stats-bar .stat { background: var(--color-surface); border: none; border-radius: 0; box-shadow: none; padding: 1rem .75rem; }

/* ---- Accueil : bandeau + grille de fonctionnalités ---- */

.hero {
    background: linear-gradient(135deg, #3a2a20, #7a3b2e 55%, #a9762f 130%);
    color: #fff;
    border-radius: var(--radius);
    padding: 3rem 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.hero h1 { color: #fff; font-size: 2rem; margin: 0; }
.hero .subtitle { font-style: italic; opacity: .92; margin-top: .4rem; }
.hero .search-form { margin: 1.5rem auto 0; max-width: 520px; }
.hero .search-form input[type=text] { border: none; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
}
.feature-card {
    position: relative;
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--color-text);
}
.feature-card:hover { border-color: var(--color-accent); text-decoration: none; }
.feature-card .icon { font-size: 1.9rem; margin-bottom: .5rem; }
.feature-card .icon.icon-photo {
    width: calc(100% + 2rem); height: 140px; margin: -1.4rem -1rem .75rem;
    border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
    border: none; border-bottom: 1px solid var(--color-border);
}
.feature-card .icon.icon-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card h3 { margin: .2rem 0 .3rem; font-size: .98rem; color: var(--color-primary-dark); }
.feature-card p { margin: 0; font-size: .78rem; color: var(--color-text-muted); }
.feature-card.disabled { opacity: .65; }
.feature-card .soon-badge {
    position: absolute; top: .6rem; right: .6rem; font-size: .6rem; background: var(--color-bg);
    color: var(--color-text-muted); padding: .1rem .4rem; border-radius: 999px; text-transform: uppercase;
    letter-spacing: .03em; border: 1px solid var(--color-border);
}

/* ---- Accueil : trois colonnes (arbre / chronologie / dernières personnes) ---- */

.mini-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    gap: 1.25rem;
    margin: 0 0 2rem;
}
@media (max-width: 860px) {
    .mini-grid { grid-template-columns: 1fr; }
}
.mini-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
}
.mini-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.mini-card-header h2 { margin: 0; font-size: 1.05rem; border: none; padding: 0; }
.mini-card-header a { font-size: .8rem; white-space: nowrap; }
.mini-card-link { text-align: center; margin-top: 1rem; }
.mini-empty { color: var(--color-text-muted); font-size: .85rem; margin: 0; }

.mini-tree { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
.mini-tree-row { display: flex; gap: .5rem; justify-content: center; align-items: center; flex-wrap: nowrap; }
.mini-tree-box {
    display: block; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px;
    padding: .4rem .55rem; text-align: center; font-size: .78rem; color: var(--color-text);
    overflow-wrap: anywhere;
}
.mini-tree-row > .mini-tree-box { flex: 1 1 auto; min-width: 0; }
.mini-tree > .mini-tree-box { align-self: center; max-width: 80%; }
.mini-tree-box:hover { border-color: var(--color-accent); text-decoration: none; }
.mini-tree-avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto .3rem; }
.mini-tree-box .name { font-weight: bold; color: var(--color-primary-dark); display: block; }
.mini-tree-box .years { color: var(--color-text-muted); font-size: .72rem; }
.mini-tree-connector { width: 2px; height: 1rem; background: var(--color-accent); align-self: center; }
.mini-tree-couple { align-items: center; }
.mini-tree-stem-h { width: 1.5rem; height: 2px; background: var(--color-accent); flex-shrink: 0; }
.mini-tree-box.mini-tree-root { border-color: var(--color-accent); border-width: 2px; box-shadow: var(--shadow); font-weight: bold; }

.mini-timeline { list-style: none; margin: 0; padding: 0; }
.mini-timeline li { display: flex; gap: .75rem; padding: .5rem 0; border-bottom: 1px dotted var(--color-border); }
.mini-timeline li:last-child { border-bottom: none; }
.mini-timeline .year { font-weight: bold; color: var(--color-primary); flex-shrink: 0; width: 3.2rem; }
.mini-timeline .desc { font-size: .85rem; }
.mini-timeline .desc .label { color: var(--color-text-muted); }

.mini-people { list-style: none; margin: 0; padding: 0; }
.mini-people li { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; border-bottom: 1px dotted var(--color-border); }
.mini-people li:last-child { border-bottom: none; }
.mini-people .avatar {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: .9rem;
}
.mini-people .info { font-size: .85rem; }
.mini-people .info .name { display: block; font-weight: bold; }
.mini-people .info .meta { color: var(--color-text-muted); font-size: .78rem; }

.soon-hero { text-align: center; padding: 3rem 1rem; }
.soon-hero .icon { font-size: 3rem; }

table { width: 100%; border-collapse: collapse; }
table th, table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--color-border); }
table th { color: var(--color-text-muted); font-weight: normal; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .3rem 0; border-bottom: 1px dotted var(--color-border); }
ul.plain li:last-child { border-bottom: none; }

.person-header { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.person-photo { width: 140px; height: 140px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); background: #eee; }
.person-photo-placeholder {
    position: relative; display: block; width: 140px; height: 140px; border-radius: var(--radius);
    border: 1px solid var(--color-border); overflow: hidden; flex-shrink: 0;
}
.person-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.person-photo-placeholder:hover { border-color: var(--color-accent); text-decoration: none; }
a.person-photo-placeholder .add-label {
    position: absolute; left: 0; right: 0; bottom: 0; background: rgba(44, 38, 32, .78); color: #fff;
    font-size: .65rem; line-height: 1.2; text-align: center; padding: .3rem .2rem;
}
a.person-photo-placeholder:hover .add-label { background: var(--color-accent); }
.person-meta dt { color: var(--color-text-muted); font-size: .85rem; margin-top: .6rem; }
.person-meta dd { margin: 0; }

.badge { display: inline-block; background: var(--color-accent); color: #fff; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; margin-left: .4rem; }
.badge.sex-M { background: #3b6ea5; }
.badge.sex-F { background: #a53b6e; }

.notice { background: #fff8e1; border: 1px solid #e8d48b; border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1.25rem; }
.notice.error { background: #fdecea; border-color: #eab2ac; color: #7d1a14; }
.notice.success { background: #eaf6ec; border-color: #a9d6b0; color: #256b32; }

form.stacked label { display: block; margin-top: .9rem; font-size: .9rem; color: var(--color-text-muted); }
form.stacked input[type=text], form.stacked input[type=date], form.stacked input[type=email],
form.stacked input[type=password], form.stacked select, form.stacked textarea {
    width: 100%; padding: .55rem .65rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    font-family: inherit; font-size: 1rem; margin-top: .2rem;
}
form.stacked textarea { min-height: 110px; }
.actions { margin-top: 1.5rem; display: flex; gap: .6rem; align-items: center; }

.tree { overflow-x: auto; padding: 1rem 0; }
.tree-level { display: flex; gap: 1rem; margin-bottom: 1rem; }
.tree-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .6rem .85rem; min-width: 190px; box-shadow: var(--shadow); }
.tree-box .rel-label { font-size: .7rem; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: .03em; }

.pagination { display: flex; gap: .5rem; margin-top: 1.5rem; align-items: center; }

.person-picker { position: relative; }
.picker-results {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 220px;
    overflow-y: auto;
    margin-top: .2rem;
}
.picker-result { padding: .5rem .7rem; cursor: pointer; font-family: system-ui, sans-serif; font-size: .9rem; }
.picker-result:hover { background: var(--color-bg); }
.picker-current { font-size: .85rem; color: var(--color-text-muted); margin-top: .3rem; }

.save-btn {
    background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--color-accent);
    padding: 0 .3rem; line-height: 1; vertical-align: middle;
}
.save-btn:hover { transform: scale(1.15); }

/* ---- Vues d'impression / export (fiche seule ou livret de branche) ---- */

.print-toolbar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.print-toolbar a { color: var(--sidebar-text); }
.print-toolbar .actions { margin: 0; }

.print-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    color: var(--color-text);
    background: var(--color-bg);
}

.print-person {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}
.print-person:last-child { border-bottom: none; }
.print-person h2 { border: none; padding: 0; margin: 0 0 .3rem; }
.print-person .generation-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.print-person .print-photo { width: 110px; height: 110px; object-fit: cover; border-radius: var(--radius); float: right; margin-left: 1rem; }
.print-person dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: .5rem 0; }
.print-person dt { color: var(--color-text-muted); font-size: .85rem; }
.print-person dd { margin: 0; }

.page-break { page-break-before: always; }

@media print {
    .print-toolbar { display: none; }
    .print-page { max-width: none; padding: 0; }
    .print-person { page-break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}

@media (max-width: 600px) {
    .person-header { flex-direction: column; }
}

img.lightbox { cursor: zoom-in; }

.lightbox-overlay {
    position: fixed; inset: 0; background: rgba(15, 15, 20, .85); z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox-close {
    position: absolute; top: 1rem; right: 1.25rem; background: rgba(255, 255, 255, .12); color: #fff; border: none;
    width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .25); }