/* ============================================
   GÉNÉALOGIE FAMILIALE — Style Livre Premium
   Inspiré de la page biographie
============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --bg:       #1e1610;
    --bg2:      #2a1f14;
    --bg3:      #3a2a1a;
    --card:     #f5edd8;
    --card2:    #f0e6cc;
    --border:   rgba(184,150,90,.2);
    --border2:  rgba(184,150,90,.35);
    --text:     #e8d5a8;
    --text2:    #c4a882;
    --text3:    rgba(232,213,168,.45);
    --accent:   #9a7c4a;
    --gold:     #b8965a;
    --gold2:    #d4aa6a;
    --gold-lt:  rgba(184,150,90,.12);
    --ink:      #2c1a0a;
    --ink2:     #5c3d1e;
    --ink3:     rgba(92,61,30,.5);
    --red:      #8b2020;
    --green:    #1e4d3a;
    --blue:     #1e3a5f;
    --shadow:   0 2px 12px rgba(0,0,0,.3);
    --shadow2:  0 6px 28px rgba(0,0,0,.45);
    --radius:   5px;
    --radius2:  8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    background-image: url("/assets/tree-bg.svg");
    background-repeat: no-repeat;
    background-position: center 60px;
    background-size: 600px 600px;
    background-attachment: fixed;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ─── HEADER ─── */
.site-header {
    background: #0d0905;
    border-bottom: 1px solid rgba(184,150,90,.25);
    position: sticky; top: 0; z-index: 100;
    height: 56px;
    box-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.header-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 0 28px;
    display: flex; align-items: center; gap: 28px;
    height: 100%;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; }
.logo-icon { font-size: 1.1rem; opacity: .7; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--gold); letter-spacing: .03em; }
.logo-sub { font-size: .58rem; color: rgba(184,150,90,.5); letter-spacing: .2em; text-transform: uppercase; }

.main-nav { display: flex; gap: 2px; margin-left: auto; }
.main-nav a {
    color: rgba(232,213,168,.45); text-decoration: none;
    padding: 5px 11px; border-radius: var(--radius);
    font-size: .78rem; font-weight: 500; letter-spacing: .04em;
    transition: all .15s;
}
.main-nav a:hover { color: var(--gold); background: rgba(184,150,90,.08); }
.main-nav a.active { color: var(--gold2); }

.user-menu { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.user-name { color: rgba(232,213,168,.35); font-size: .75rem; text-decoration: none; transition: color .15s; }
.user-name:hover { color: var(--gold); }
.btn-logout { background: transparent; border: 1px solid rgba(184,150,90,.2); color: rgba(232,213,168,.35); padding: 3px 9px; border-radius: var(--radius); text-decoration: none; font-size: .72rem; transition: all .15s; }
.btn-logout:hover { border-color: rgba(184,150,90,.5); color: var(--gold); }

/* ─── MAIN ─── */
.main-content { max-width: 1280px; margin: 0 auto; padding: 28px 28px; min-height: calc(100vh - 96px); }

/* ─── FLASH ─── */
.flash { padding: 10px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: .82rem; font-weight: 500; border-left: 3px solid; }
.flash-success { background: rgba(30,77,58,.3); color: #7ec8a0; border-color: #2d7a52; }
.flash-error   { background: rgba(139,32,32,.3); color: #f0a0a0; border-color: #c0392b; }
.flash-info    { background: rgba(30,58,95,.3); color: #90b8e8; border-color: #2d5a9a; }

/* ─── TYPOGRAPHIE ─── */
h1 { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 400; color: var(--text); letter-spacing: .01em; }
h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; color: var(--text2); }
h3 { font-size: .68rem; font-weight: 600; color: var(--text3); letter-spacing: .14em; text-transform: uppercase; }

/* ─── CARTES ─── */
.card {
    background: rgba(245,237,216,.06);
    border: 1px solid var(--border);
    border-radius: var(--radius2); padding: 22px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(4px);
}
.card-header { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }

/* ─── GRILLES ─── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .main-nav{display:none;} }

/* ─── FICHE MEMBRE ─── */
.membre-card {
    background: rgba(245,237,216,.05);
    border: 1px solid var(--border);
    border-radius: var(--radius2); padding: 18px; text-align: center;
    box-shadow: var(--shadow); transition: all .2s; position: relative; overflow: hidden;
}
.membre-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .2s; transform-origin:left; }
.membre-card:hover { transform:translateY(-2px); box-shadow:var(--shadow2); border-color:var(--border2); }
.membre-card:hover::after { transform:scaleX(1); }

.membre-photo { width:68px; height:68px; border-radius:50%; object-fit:cover; border:2px solid var(--border2); margin:0 auto 10px; display:block; }
.membre-avatar { width:68px; height:68px; border-radius:50%; background:rgba(184,150,90,.08); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 10px; color:var(--text3); }
.membre-nom { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:600; color:var(--text); margin-bottom:3px; }
.membre-dates { font-size:.72rem; color:var(--text3); margin:3px 0; }
.membre-tags { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin-top:7px; }
.tag { font-size:.65rem; padding:2px 7px; border-radius:3px; font-weight:500; background:rgba(184,150,90,.1); color:var(--text2); border:1px solid var(--border); }
.membre-actions { display:flex; gap:5px; justify-content:center; margin-top:11px; }

/* ─── BOUTONS ─── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--radius); font-size:.78rem; font-weight:500; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:all .15s; font-family:'Inter',sans-serif; letter-spacing:.02em; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--gold); }
.btn-gold { background:rgba(184,150,90,.2); color:var(--gold2); border-color:var(--border2); }
.btn-gold:hover { background:rgba(184,150,90,.3); }
.btn-sm { padding:4px 9px; font-size:.72rem; }
.btn-outline { background:transparent; border-color:var(--border2); color:var(--text2); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-danger { background:rgba(139,32,32,.4); color:#f0a0a0; border-color:rgba(139,32,32,.5); }
.btn-danger:hover { background:rgba(139,32,32,.6); }
.btn-green { background:rgba(30,77,58,.4); color:#7ec8a0; border-color:rgba(30,77,58,.5); }
.btn-green:hover { background:rgba(30,77,58,.6); }

/* ─── FORMULAIRES ─── */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group.full { grid-column:1/-1; }
label { font-size:.68rem; font-weight:600; color:var(--text3); letter-spacing:.1em; text-transform:uppercase; }
input, select, textarea {
    padding:8px 11px; border:1px solid var(--border);
    border-radius:var(--radius); font-family:'Inter',sans-serif;
    font-size:.83rem; background:rgba(245,237,216,.07); color:var(--text);
    transition:border-color .15s, box-shadow .15s; width:100%;
}
input::placeholder, textarea::placeholder { color:var(--text3); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,150,90,.12); }
select option { background:#2a1f14; color:var(--text); }
textarea { resize:vertical; min-height:88px; }
.form-actions { display:flex; gap:9px; margin-top:6px; }

/* ─── PROFIL ─── */
.profil-header {
    display:flex; gap:24px; align-items:flex-start;
    background:rgba(245,237,216,.05); border:1px solid var(--border);
    border-radius:var(--radius2); padding:26px;
    box-shadow:var(--shadow); margin-bottom:18px; position:relative;
}
.profil-header::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:var(--radius2) var(--radius2) 0 0; }
.profil-photo-lg { width:110px; height:110px; border-radius:50%; object-fit:cover; border:3px solid var(--border2); flex-shrink:0; }
.profil-avatar-lg { width:110px; height:110px; border-radius:50%; flex-shrink:0; background:rgba(184,150,90,.08); display:flex; align-items:center; justify-content:center; font-size:2.8rem; border:3px solid var(--border); color:var(--text3); }
.profil-info { flex:1; }
.profil-nom { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:400; margin-bottom:5px; }
.profil-meta { display:flex; flex-wrap:wrap; gap:9px; margin:9px 0; }
.meta-item { display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--text2); }
.meta-item span { font-weight:600; }

/* ─── FAMILLE ─── */
.famille-section { margin-bottom:20px; }
.famille-titre { font-size:.65rem; font-weight:600; color:var(--text3); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:6px; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.famille-grid { display:flex; flex-wrap:wrap; gap:7px; }
.famille-card { background:rgba(245,237,216,.04); border:1px solid var(--border); border-radius:var(--radius); padding:7px 11px; display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--text); transition:all .15s; min-width:130px; }
.famille-card:hover { background:rgba(184,150,90,.1); border-color:var(--border2); }
.famille-card-photo { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.famille-card-avatar { width:30px; height:30px; border-radius:50%; background:rgba(184,150,90,.1); display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--text3); }
.famille-card-info { flex:1; }
.famille-card-nom { font-weight:600; font-size:.8rem; }
.famille-card-role { font-size:.68rem; color:var(--text3); }

/* ─── STATS ─── */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:22px; }
.stat-card { background:rgba(245,237,216,.05); border:1px solid var(--border); border-radius:var(--radius2); padding:16px 18px; box-shadow:var(--shadow); }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:var(--gold2); line-height:1; }
.stat-label { font-size:.65rem; color:var(--text3); margin-top:4px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

/* ─── LOGIN ─── */
.login-wrapper { max-width:380px; margin:70px auto; background:rgba(245,237,216,.05); border:1px solid var(--border); border-radius:var(--radius2); padding:36px; box-shadow:var(--shadow2); }
.login-logo { text-align:center; margin-bottom:26px; }
.login-logo .tree { font-size:1.8rem; margin-bottom:7px; }
.login-logo h1 { font-size:1.5rem; margin:5px 0 3px; color:var(--gold); }
.login-logo p { color:var(--text3); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }

/* ─── TABLE ─── */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { background:rgba(184,150,90,.08); border-bottom:1px solid var(--border2); padding:7px 11px; text-align:left; font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text3); }
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:hover { background:rgba(184,150,90,.06); }
tbody td { padding:8px 11px; font-size:.82rem; color:var(--text2); }

/* ─── BREADCRUMB ─── */
.breadcrumb { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:.72rem; color:var(--text3); }
.breadcrumb a { color:var(--accent); text-decoration:none; font-weight:500; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span { color:var(--border); }

/* ─── SEARCH ─── */
.search-bar { display:flex; gap:7px; margin-bottom:18px; }
.search-bar input { flex:1; }

/* ─── BADGE ─── */
.badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:.65rem; font-weight:600; letter-spacing:.04em; }
.badge-blue   { background:rgba(30,58,95,.4);   color:#90b8e8; }
.badge-red    { background:rgba(139,32,32,.4);   color:#f0a0a0; }
.badge-green  { background:rgba(30,77,58,.4);    color:#7ec8a0; }
.badge-gold   { background:rgba(184,150,90,.15); color:var(--gold2); }

/* ─── MODAL ─── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:999; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { background:#2a1f14; border:1px solid var(--border2); border-radius:var(--radius2); padding:26px; max-width:500px; width:90%; max-height:90vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,.5); position:relative; }
.modal-close { position:absolute; top:11px; right:13px; background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text3); line-height:1; }
.modal h2 { margin-bottom:15px; }

/* ─── FOOTER ─── */
.site-footer { background:#0d0905; border-top:1px solid rgba(184,150,90,.15); color:rgba(232,213,168,.25); text-align:center; padding:13px 18px; font-size:.7rem; letter-spacing:.05em; }
.site-footer a { color:rgba(232,213,168,.3); text-decoration:none; }
.site-footer a:hover { color:var(--gold); }

/* ─── TABS ─── */
.profil-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:18px; }
.profil-tab { padding:8px 16px; border:none; background:none; cursor:pointer; font-family:'Inter',sans-serif; font-size:.78rem; font-weight:500; color:var(--text3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; letter-spacing:.03em; }
.profil-tab.active { color:var(--gold2); border-bottom-color:var(--gold); }
.profil-tab:hover { color:var(--text2); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ─── GALERIE ─── */
.galerie-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.galerie-item { border-radius:var(--radius); overflow:hidden; background:rgba(184,150,90,.08); border:1px solid var(--border); box-shadow:var(--shadow); }
.galerie-item img { width:100%; height:150px; object-fit:cover; display:block; cursor:zoom-in; transition:transform .3s; filter:sepia(10%); }
.galerie-item:hover img { transform:scale(1.04); filter:sepia(0); }
.galerie-legende { padding:6px 9px; font-size:.72rem; color:var(--text3); }
.galerie-actions { display:flex; gap:5px; padding:0 9px 7px; }
.btn-upload-zone { border:1px dashed var(--border2); border-radius:var(--radius); padding:22px; text-align:center; cursor:pointer; transition:all .15s; color:var(--text3); }
.btn-upload-zone:hover { border-color:var(--gold); background:var(--gold-lt); color:var(--text2); }

/* ─── HISTOIRE ─── */
.histoire-editor { width:100%; min-height:260px; padding:13px; border:1px solid var(--border); border-radius:var(--radius); font-family:'Cormorant Garamond',serif; font-size:.95rem; line-height:1.85; resize:vertical; background:rgba(245,237,216,.05); color:var(--text); }
.histoire-editor:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,150,90,.12); }
.histoire-affichage { line-height:1.85; font-size:.9rem; color:var(--text2); font-family:'Cormorant Garamond',serif; }
.histoire-affichage p { margin-bottom:10px; }

/* ─── LIGHTBOX ─── */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:9999; align-items:center; justify-content:center; flex-direction:column; }
.lightbox.active { display:flex; }
.lightbox img { max-width:88vw; max-height:78vh; object-fit:contain; border-radius:var(--radius); }
.lightbox-legende { color:rgba(232,213,168,.4); margin-top:11px; font-size:.82rem; font-style:italic; font-family:'Cormorant Garamond',serif; }
.lightbox-close { position:absolute; top:16px; right:22px; color:rgba(232,213,168,.35); font-size:1.5rem; cursor:pointer; background:none; border:none; }
.lightbox-close:hover { color:var(--gold); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); color:rgba(232,213,168,.35); font-size:2rem; cursor:pointer; background:rgba(255,255,255,.06); border:none; border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.lightbox-nav:hover { background:rgba(255,255,255,.12); color:var(--gold); }
.lightbox-prev { left:14px; } .lightbox-next { right:14px; }

/* ─── UTILITAIRES ─── */
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mb-16{margin-bottom:16px;}
.text-center{text-align:center;} .text-muted{color:var(--text3);font-size:.8rem;}
.flex{display:flex;} .flex-between{display:flex;justify-content:space-between;align-items:center;}
.gap-8{gap:8px;} .gap-12{gap:12px;}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0;}

/* ============================================
   RESPONSIVE — Mobile & Tablette
============================================ */

/* Cacher par défaut sur desktop */
.nav-mobile { display: none; }
.nav-mobile-btn { display: none; }

/* ─── TABLETTE (max 1024px) ─── */
@media (max-width: 1024px) {
    .main-content { padding: 20px 16px; }
    .header-inner { padding: 0 16px; gap: 16px; }
    .stats-grid { grid-template-columns: repeat(3,1fr); gap: 10px; }
    .grid-4 { grid-template-columns: repeat(3,1fr); }
}

/* ─── MOBILE LARGE (max 768px) ─── */
@media (max-width: 768px) {
    /* Header */
    .main-nav { display: none; }
    .user-menu { margin-left: auto; }
    .logo-title { font-size: 1.1rem; }

    /* Menu burger */
    .nav-mobile-btn {
        display: flex; flex-direction: column; gap: 4px;
        cursor: pointer; padding: 6px; margin-left: auto;
    }
    .nav-mobile-btn span {
        display: block; width: 20px; height: 2px;
        background: var(--gold); border-radius: 2px; transition: all .2s;
    }
    .nav-mobile {
        position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
        background: #0d0905; z-index: 99;
        flex-direction: column; padding: 20px;
        border-top: 1px solid var(--border);
        overflow-y: auto;
    }
    .nav-mobile a {
        color: var(--text2); text-decoration: none;
        padding: 14px 0; font-size: 1rem;
        font-family: 'Cormorant Garamond', serif;
        border-bottom: 1px solid var(--border);
        letter-spacing: .05em;
    }
    .nav-mobile a:hover { color: var(--gold); }

    /* Contenu */
    .main-content { padding: 16px 12px; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
    .stat-num { font-size: 1.6rem; }

    /* Grilles */
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: repeat(2,1fr); }
    .grid-4 { grid-template-columns: repeat(2,1fr); }

    /* Formulaires */
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: 1; }

    /* Profil header */
    .profil-header { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
    .profil-header > div:last-child { align-self: center; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .profil-nom { font-size: 1.5rem; }
    .profil-meta { justify-content: center; }

    /* Membre card */
    .membre-card { padding: 14px 10px; }

    /* Famille grid */
    .famille-grid { gap: 5px; }
    .famille-card { min-width: 120px; padding: 6px 8px; }

    /* Breadcrumb */
    .breadcrumb { flex-wrap: wrap; gap: 4px; }

    /* Flex between */
    .flex-between { flex-wrap: wrap; gap: 10px; }

    /* Arbre */
    #arbre-container { min-height: 300px; }

    /* Search */
    .search-bar { flex-wrap: wrap; }
    .search-bar input { min-width: 0; }

    /* Card padding */
    .card { padding: 14px 12px; }
}

/* ─── MOBILE PETIT (max 480px) ─── */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .membre-actions { flex-wrap: wrap; justify-content: center; }
    .btn { font-size: .72rem; padding: 6px 10px; }
    .btn-sm { padding: 4px 7px; font-size: .68rem; }
    h1 { font-size: 1.3rem; }
    .profil-photo-lg, .profil-avatar-lg { width: 90px; height: 90px; }
    .logo-sub { display: none; }

    /* Tabs */
    .profil-tab { padding: 7px 10px; font-size: .72rem; }

    /* Galerie */
    .galerie-grid { grid-template-columns: repeat(2,1fr); }

    /* Modal */
    .modal { padding: 18px 14px; }

    /* Table scroll */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ─── BIOGRAPHIE RESPONSIVE ─── */
@media (max-width: 750px) {
    .livre { grid-template-columns: 1fr; }
    .livre::before { display: none; }
    .couv { flex-direction: column; text-align: center; padding: 20px 16px; }
    .couv-actions { position: static; margin-top: 12px; justify-content: center; }
    .couv-av, .couv-photo { width: 90px; height: 90px; }
    .couv-nom { font-size: 1.8rem; }
    .page { padding: 20px 16px; }
    .gal-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 380px) {
    .couv-nom { font-size: 1.5rem; }
    .gal-grid { grid-template-columns: repeat(2,1fr); }
    .nav-bas { flex-direction: column; gap: 8px; text-align: center; }
}

/* ─── ARBRE RESPONSIVE ─── */
@media (max-width: 768px) {
    .arbre-zone, #arbre-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
    }
    .arbre-zone:active, #arbre-container:active { cursor: grabbing; }
}

/* ============================================
   RESPONSIVE COMPLET — Règles globales
   S'applique automatiquement à toutes les pages
============================================ */

/* ── Règles de base universelles ── */
img { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
table { width: 100%; }
pre, code { overflow-x: auto; }

/* ── Utilitaires responsive ── */
.hide-mobile { display: block; }
.show-mobile { display: none; }
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

/* ── TABLETTE (max 1024px) — complément ── */
@media (max-width: 1024px) {
    /* Admin */
    .admin-grid { grid-template-columns: 1fr; }

    /* Événements */
    .stats-grid { grid-template-columns: repeat(3, 1fr); }

    /* Arbre contrôles */
    .arbre-ctrl { flex-wrap: wrap; }
}

/* ── MOBILE (max 768px) — complément ── */
@media (max-width: 768px) {

    /* ── Header ── */
    .header-inner { padding: 0 12px; gap: 10px; }
    .user-menu .btn-logout { display: none; } /* Masquer déconnexion — dans le menu burger */

    /* ── Contenu général ── */
    .main-content { padding: 14px 10px; }
    .card { padding: 14px 12px; border-radius: 8px; }

    /* ── Toutes les grilles ── */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 10px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .form-grid { grid-template-columns: 1fr; gap: 10px; }
    .form-group.full { grid-column: 1; }

    /* ── Flex-between ── */
    .flex-between { flex-direction: column; gap: 10px; align-items: flex-start; }
    .flex-between .btn { align-self: flex-start; }

    /* ── Boutons ── */
    .btn { font-size: .78rem; padding: 7px 12px; }
    .btn-sm { font-size: .72rem; padding: 4px 8px; }
    .form-actions { flex-wrap: wrap; }

    /* ── Titres ── */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }

    /* ── Breadcrumb ── */
    .breadcrumb { font-size: .68rem; flex-wrap: wrap; }

    /* ── Membres ── */
    .membre-card { padding: 14px 12px; }
    .membre-actions { flex-wrap: wrap; justify-content: center; gap: 5px; }
    .membre-photo, .membre-avatar { width: 60px; height: 60px; }

    /* ── Profil ── */
    .profil-header { flex-direction: column; text-align: center; padding: 18px 14px; gap: 16px; }
    .profil-header > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
    .profil-nom { font-size: 1.5rem; }
    .profil-meta { justify-content: center; }
    .profil-photo-lg, .profil-avatar-lg { width: 90px; height: 90px; font-size: 2.2rem; }

    /* ── Famille ── */
    .famille-grid { gap: 6px; }
    .famille-card { min-width: 0; flex: 1 1 140px; padding: 6px 8px; }

    /* ── Arbre ── */
    #arbre-container { overflow-x: auto; -webkit-overflow-scrolling: touch; cursor: grab; min-height: 250px; }
    #arbre-container svg { min-width: 500px; }
    .arbre-ctrl { flex-direction: column; gap: 10px; }
    .arbre-ctrl .form-group { min-width: 0 !important; width: 100%; }
    .arbre-ctrl .btn { width: 100%; justify-content: center; }

    /* ── Événements ── */
    .evenement-card { flex-direction: column; }

    /* ── Table / Admin ── */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
    thead th { white-space: nowrap; font-size: .62rem; padding: 6px 8px; }
    tbody td { font-size: .78rem; padding: 7px 8px; }

    /* ── Modal ── */
    .modal { width: 95%; padding: 20px 14px; max-height: 85vh; }

    /* ── Search ── */
    .search-bar { flex-direction: column; }
    .search-bar input { width: 100%; }
    .search-bar button { width: 100%; justify-content: center; }

    /* ── Tabs ── */
    .profil-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .profil-tab { padding: 8px 12px; font-size: .74rem; white-space: nowrap; }

    /* ── Galerie ── */
    .galerie-grid { grid-template-columns: repeat(2, 1fr); }

    /* ── Formulaires ajouter/modifier ── */
    .form-grid select,
    .form-grid input,
    .form-grid textarea { font-size: .85rem; }

    /* ── Stats événements ── */
    .stats-grid .stat-card { padding: 12px 10px; }
    .stat-num { font-size: 1.6rem; }
    .stat-label { font-size: .6rem; }

    /* ── Login ── */
    .login-wrapper { margin: 30px auto; padding: 26px 18px; }
}

/* ── PETIT MOBILE (max 480px) ── */
@media (max-width: 480px) {

    body { font-size: 13px; }

    /* Header */
    .logo-sub { display: none; }
    .logo-title { font-size: 1rem; }

    /* Grilles */
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
    .galerie-grid { grid-template-columns: 1fr 1fr; }

    /* Membres */
    .membre-photo, .membre-avatar { width: 52px; height: 52px; }
    .membre-nom { font-size: .92rem; }
    .membre-actions { gap: 4px; }
    .membre-actions .btn { padding: 4px 7px; font-size: .68rem; }

    /* Boutons filtres */
    .filtres { gap: 4px; }
    .filtres .btn { font-size: .68rem; padding: 4px 7px; }

    /* Modal */
    .modal { width: 98%; border-radius: 8px; }

    /* Card */
    .card { padding: 12px 10px; }

    /* Stat */
    .stat-num { font-size: 1.4rem; }

    /* Admin tabs */
    .tab-content table { font-size: .72rem; }
}

/* ── TRÈS PETIT (max 360px) ── */
@media (max-width: 360px) {
    .main-content { padding: 10px 8px; }
    h1 { font-size: 1.2rem; }
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .btn { padding: 6px 8px; font-size: .7rem; }
}

/* ── PAYSAGE MOBILE ── */
@media (max-width: 768px) and (orientation: landscape) {
    .login-wrapper { margin: 10px auto; padding: 16px; }
    .site-header { height: 48px; }
    .nav-mobile { top: 48px; }
}

/* ── IMPRESSION ── */
@media print {
    .site-header, .site-footer, .nav-mobile, .membre-actions,
    .btn, .breadcrumb, .search-bar, .filtres { display: none !important; }
    body { background: white; color: black; font-size: 12pt; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    .main-content { padding: 0; max-width: 100%; }
}