/* Importation des typographies Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Merriweather:ital,wght@0,700;1,400&display=swap');

/* === COULEURS DU SUD-OUEST === 
   Fond: Sable clair (#F5F1E7)
   Texte courant: Anthracite doux (#2A2421)
   Menu & Lignes: Terracotta / Brique (#B34A41)
   Bords boîtes: Marron chaud (#8C5A46)
   Bords conjoints: Ocre rouge (#D17A5A)
   Photo par défaut: Ocre moutarde (#DCA54A)
*/

html { 
    scroll-behavior: smooth; /* Défilement fluide pour le bouton retour */
}

body { 
    font-family: 'Inter', sans-serif; /* Nouvelle police moderne pour le texte */
    color: #2A2421; /* Gris profond pour la lisibilité */
    background-color: #F5F1E7; 
    text-align: center; 
    margin: 0; 
    padding: 0; 
    padding-top: 50px; 
}

/* Titres avec empattements pour l'aspect historique */
h1, h2, h3, .nav-logo { 
    font-family: 'Merriweather', serif; 
}

/* =========================================
   MENU FIXE - ORDINATEUR
   ========================================= */
.navbar { 
    background-color: #B34A41; 
    display: flex; 
    justify-content: space-between;
    align-items: center;
    width: 100%; 
    position: fixed; 
    top: 0; left: 0; 
    z-index: 9999; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    box-sizing: border-box;
}

.nav-logo {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 15px 20px;
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links > a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 15px 15px; 
    text-decoration: none; 
    font-size: 15px; 
    font-weight: 600; 
    transition: background 0.3s; 
}

.nav-links > a:hover, .dropdown:hover .dropbtn { background-color: #8C3A33; }

.dropdown { position: relative; }
.dropdown .dropbtn { cursor: pointer; font-size: 15px; font-weight: 600; border: none; outline: none; color: white; padding: 15px 15px; background-color: inherit; font-family: inherit; margin: 0; transition: background 0.3s; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1000; text-align: left; border-radius: 0 0 8px 8px; overflow: hidden; }
.dropdown-content a { color: #333; padding: 12px 16px; text-decoration: none; display: block; font-weight: normal; transition: background 0.2s;}
.dropdown-content a:hover { background-color: #E2C792; color: black; }
.dropdown:hover .dropdown-content { display: block; }

.burger-icon {
    display: none; 
    color: white;
    font-size: 24px;
    padding: 10px 20px;
    text-decoration: none;
}

/* =========================================
   MENU BURGER - SMARTPHONE & TABLETTE
   ========================================= */
@media screen and (max-width: 850px) { 
    .navbar { flex-direction: row; flex-wrap: wrap; }
    .burger-icon { display: block; position: absolute; right: 10px; top: 5px; }
    .nav-links { display: none; flex-direction: column; width: 100%; background-color: #B34A41; align-items: stretch; }
    .nav-links.active { display: flex; }
    .nav-links > a { padding: 15px 20px; text-align: left; border-top: 1px solid #8C3A33; }
    .dropdown { display: flex; flex-direction: column; }
    .dropdown .dropbtn { padding: 15px 20px; text-align: left; width: 100%; border-top: 1px solid #8C3A33; }
    .dropdown-content { position: static; display: none; box-shadow: none; background-color: #8C3A33; border-radius: 0; }
    .dropdown-content a { color: white; padding-left: 40px; border-top: 1px solid rgba(255,255,255,0.1); }
    .dropdown-content a:hover { background-color: #B34A41; color: white;}
}

/* TITRE */
h1 { color: #8C5A46; margin-top: 30px; }

/* ARBRE & LIGNES */
.arbre-container { width: 100%; overflow-x: auto; padding-bottom: 40px; scrollbar-width: auto; -webkit-overflow-scrolling: touch; }
.arbre ul { padding-top: 15px; position: relative; display: flex; justify-content: center; padding-left: 0; min-width: max-content; }
.arbre li { float: left; text-align: center; list-style-type: none; position: relative; padding: 15px 1px 0 1px; }
.arbre ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #B34A41; width: 0; height: 15px; }
.arbre li::before, .arbre li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #B34A41; width: 50%; height: 15px; }
.arbre li::after { right: auto; left: 50%; border-left: 2px solid #B34A41; }
.arbre li:only-child::after, .arbre li:only-child::before { display: none; }
.arbre li:only-child { padding-top: 0;}
.arbre li:first-child::before, .arbre li:last-child::after { border: 0 none; }
.arbre li:last-child::before { border-right: 2px solid #B34A41; border-radius: 0 5px 0 0; }
.arbre li:first-child::after { border-radius: 5px 0 0 0; }
.arbre > ul > li::before, .arbre > ul > li::after { border: 0 none; }
.arbre > ul::before { display: none; }

.couple { display: inline-flex; align-items: flex-start; gap: 4px; position: relative; margin: 0 1px; }
.couple-line { position: absolute; top: 21px; left: 20px; right: 20px; height: 2px; background-color: #D17A5A; z-index: 0; }

/* BOÎTES - DESIGN SOFT UI */
.personne { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 4px; 
    border: 1px solid #eaeaea; /* Bordure très légère */
    border-bottom: 4px solid #8C5A46; /* Ligne de force en bas */
    padding: 8px 6px; 
    text-decoration: none; 
    color: #333; 
    text-align: center; 
    border-radius: 10px; 
    background-color: #fff; 
    cursor: pointer; 
    z-index: 1; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.06); /* Ombre douce */
    transition: all 0.2s; 
    width: 95px; 
    box-sizing: border-box; 
    position: relative; 
}
.conjoint { 
    border-bottom: 4px solid #D17A5A; /* Différenciation du conjoint par la couleur de base */
}
.personne:hover { 
    transform: translateY(-5px) scale(1.05); 
    box-shadow: 0 8px 25px rgba(179, 74, 65, 0.2); 
    border-bottom-color: #B34A41;
}

/* BADGE LIEN EXTERNE */
.badge-lien-externe { position: absolute; top: -10px; right: -15px; background-color: #E2C792; color: #5c3a21; font-size: 10px; font-weight: bold; padding: 3px 6px; border-radius: 12px; border: 1px solid #D4B483; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); text-decoration: none; z-index: 10; transition: all 0.2s; }
.badge-lien-externe:hover { background-color: #DCA54A; transform: scale(1.1); }

/* PHOTOS ROND */
.photo { width: 34px; height: 34px; border-radius: 50%; background-color: #DCA54A; color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 13px; flex-shrink: 0; background-size: cover; background-position: center; margin: 0 auto; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.conjoint .photo { background-color: #D17A5A; }

.info strong { display: block; font-size: 12px; color: #3a251c; line-height: 1.2; word-wrap: break-word; font-weight: 600;}
.info span { color: #888; font-size: 11px; display: block; margin-top: 2px;}
.badge-enfant { background-color: #F5F1E7; color: #B34A41; font-size: 9px; padding: 3px 5px; border-radius: 4px; margin-top: 5px; display: inline-block; border: 1px solid #D17A5A; font-weight: 600; }

/* MODALE */
.modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(60, 40, 30, 0.7); backdrop-filter: blur(3px); }
.modal-contenu { margin: 5% auto; width: 65%; min-width: 300px; position: relative; }
.modal-body {
    background-color: #fff; 
    padding: 35px; /* Plus d'espace pour respirer */
    border-radius: 12px; 
    max-height: 80vh; 
    overflow-y: auto; 
    border-top: 8px solid #B34A41; 
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header { display: flex; gap: 25px; margin-bottom: 20px; align-items: center;}
#modalPhoto { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; box-shadow: 2px 4px 10px rgba(0,0,0,0.15); display: none; border: 4px solid #E2C792; }

#modalLienBtn { display: inline-block; background-color: #B34A41; color: white; padding: 10px 18px; text-decoration: none; border-radius: 6px; font-weight: 600; margin-top: 10px; transition: all 0.2s; }
#modalLienBtn:hover { background-color: #8C3A33; transform: translateY(-2px); box-shadow: 0 5px 12px rgba(179, 74, 65, 0.3); }

/* ESPACEMENT DES FICHES DÉTAILLÉES */
#description { line-height: 1.7; color: #444; font-size: 15px; }
#description hr { margin: 25px 0 !important; border: 0; border-top: 1px solid #eaeaea; }
#description h3 { margin-top: 25px !important; margin-bottom: 15px !important; font-family: 'Merriweather', serif; color: #B34A41;}
#description h3:first-child { margin-top: 0 !important; }
#description p { margin-top: 0 !important; margin-bottom: 20px !important; }
#description ul { margin-top: 0 !important; margin-bottom: 25px !important; padding-left: 25px !important; }
#description li { margin-top: 0 !important; margin-bottom: 10px !important; line-height: 1.4 !important; }

/* PAGES DE TEXTE */
.apropos-container p { margin-bottom: 5px; }
.apropos-container ul { list-style-type: square; color: #5c3a21; margin-top: 0px; margin-bottom: 0px; padding-left: 20px; }
.apropos-container li { margin-bottom: 3px; }

/* BREADCRUMB FAMILIAL */
.breadcrumb-famille { background-color: #F5F1E7; border: 1px solid #D17A5A; border-radius: 8px; padding: 15px; font-size: 13px; text-align: left; min-width: 180px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.breadcrumb-famille .titre-lien { color: #8C5A46; font-weight: bold; margin-bottom: 5px; border-bottom: 1px dotted #D17A5A; padding-bottom: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.breadcrumb-famille ul { list-style-type: none !important; padding: 0 !important; margin: 0 0 10px 0 !important; }
.breadcrumb-famille li { margin-bottom: 6px !important; }
.breadcrumb-famille a { color: #B34A41; text-decoration: none; cursor: pointer; transition: color 0.2s; display: inline-block; font-weight: 600;}
.breadcrumb-famille a:hover { color: #8C3A33; text-decoration: underline; }

/* BOUTON RETOUR EN HAUT (UX) */
.btn-retour-haut {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #B34A41;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all 0.3s ease;
}
.btn-retour-haut:hover {
    background-color: #8C3A33;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* EFFET LIGHTBOX */
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
.zoomable:hover { transform: scale(1.02); box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; }

/* =========================================
   MOBILE
   ========================================= */
@media screen and (max-width: 768px) { 
    body { padding-top: 50px; }
    .navbar a, .dropdown .dropbtn { padding: 12px 10px; font-size: 14px;}
    .arbre-container { overflow-x: auto; padding-bottom: 20px; }
    .arbre ul { display: block; padding: 0; margin: 0; min-width: auto; }
    .arbre li { display: block; float: none; text-align: left; padding: 10px 0 0 0; position: relative; margin: 0; }
    .arbre ul::before, .arbre li::before, .arbre li::after, .arbre > ul > li::before, .arbre > ul > li::after, .couple-line { display: none !important; }
    
    /* =========================================
       UX : LIGNES POINTILLÉES MOBILES (MÉTHODE ROBUSTE)
       ========================================= */

    /* 1. On retire le padding gauche du conteneur parent */
    .arbre ul ul { 
        margin-left: 15px; 
        padding-left: 0 !important; 
        border-left: none !important; 
    }

    /* 2. C'est l'enfant (LI) qui porte la bordure gauche ! 
          Ainsi, elle descend naturellement et accompagne toute la descendance */
    .arbre ul ul > li { 
        padding-left: 25px !important; 
        border-left: 2px dashed #D17A5A !important; 
        position: relative; 
    }

    /* 3. Le trait horizontal qui relie la ligne verticale à la carte */
    .arbre ul ul > li::before { 
        content: ""; 
        position: absolute; 
        top: 35px; /* S'aligne avec le milieu de la carte */
        left: 0; 
        width: 25px; 
        border-top: 2px dashed #D17A5A; 
        display: block !important; 
    }

    /* 4. LE SECRET : Le tout dernier enfant n'a pas de bordure gauche, 
          sinon elle continuerait vers le bas dans le vide ! */
    .arbre ul ul > li:last-child { 
        border-left: none !important; 
    }

    /* 5. On recrée juste le haut de la ligne verticale pour ce dernier enfant */
    .arbre ul ul > li:last-child::after { 
        content: ""; 
        position: absolute; 
        top: 0; 
        left: 0; 
        height: 35px; /* Rejoint exactement le trait horizontal (top: 35px) */
        border-left: 2px dashed #D17A5A; 
        display: block !important; 
    }
    
    .personne { flex-direction: row; text-align: left; width: max-content; min-width: 200px; max-width: 85vw; padding: 10px 15px 10px 10px; }
    .photo { margin: 0 12px 0 0; } 
    .info strong { font-size: 14px; }
    .info span { font-size: 12px; margin-top: 3px; }
    
    .couple { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; position: relative; }
    .personne.conjoint { margin-left: 30px; position: relative; width: max-content; }
    .personne.conjoint::after { content: ""; position: absolute; top: -20px; left: 20px; height: 20px; border-left: 2px dashed #D17A5A; display: block !important; background: transparent; width: 0; }
    
    .modal-contenu { width: 92% !important; margin: 5% auto !important; } 
    .modal-body { padding: 25px 20px !important; max-height: 85vh !important; overflow-y: auto !important; }
    .modal-header { flex-direction: column; align-items: center; text-align: center; }
    #description { text-align: left; }

    .fermer { top: -10px !important; right: -10px !important; width: 32px !important; height: 32px !important; font-size: 22px !important; }
    .modal-contenu > div[style*="display: flex"] { flex-direction: column !important; align-items: center !important; }
    .modal-contenu > div[style*="display: flex"] > div { width: 100% !important; min-width: auto !important; text-align: center !important; }
    #modalBreadcrumb { width: 100% !important; box-sizing: border-box !important; margin-top: 15px;}
    
    .btn-retour-haut { bottom: 15px; right: 15px; width: 45px; height: 45px; font-size: 20px; }
}/* ========================================================
   ARBRE — BARRE D'OUTILS ZOOM (desktop uniquement)
   À ajouter À LA FIN de style.css
   ======================================================== */

.arbre-zoom-toolbar {
    position: fixed;
    bottom: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 2px solid #E2C792;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    z-index: 1000;
}

.arbre-zoom-toolbar .btn-zoom {
    width: 38px;
    height: 38px;
    border: 1px solid #D17A5A;
    background: #F5F1E7;
    color: #8C5A46;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arbre-zoom-toolbar .btn-zoom:hover {
    background: #B34A41;
    color: #fff;
    border-color: #B34A41;
    transform: scale(1.05);
}

.arbre-zoom-toolbar .btn-zoom:active {
    transform: scale(0.95);
}

/* Masquer la barre d'outils zoom sur mobile (scroll natif suffit) */
@media screen and (max-width: 768px) {
    .arbre-zoom-toolbar { display: none; }
}

/* Petit message d'aide pour mobile */
.arbre-aide-mobile {
    text-align: center;
    font-size: 13px;
    color: #8C5A46;
    background: #F5F1E7;
    border: 1px dashed #D17A5A;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 10px 15px;
    display: none;
}

@media screen and (max-width: 768px) {
    .arbre-aide-mobile { display: block; }
}

/* Quand panzoom est prêt sur desktop, on masque l'ancien bouton "retour en haut" :
   le bouton 1:1 de la barre de zoom fait la même chose (reset + scroll top).
   Sur mobile, panzoom n'est pas actif → le bouton reste utile. */
@media screen and (min-width: 769px) {
    body.arbre-active.pz-ready .btn-retour-haut {
        display: none;
    }
}