/* =========================================================
   NOTRE HISTOIRE — FAMILLE MAHCER
   VERSION PROPRE
   ========================================================= */


/* =========================================================
   01 — VARIABLES
   ========================================================= */

.mahcer-history{

    --mh-green:#263b28;
    --mh-green-soft:#365239;

    --mh-gold:#b89542;
    --mh-gold-dark:#946f25;
    --mh-gold-light:#e7d29a;

    --mh-ivory:#f8f5ef;
    --mh-light:#fffdf8;

    max-width:1150px;

    margin:0 auto;

    padding:
        25px
        24px
        70px;

    color:var(--mh-green);

    overflow:visible !important;
}


/* =========================================================
   02 — MENU STICKY
   ========================================================= */

.mh-nav{

    position:sticky;

    top:32px;

    z-index:9999;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    margin:
        0
        0
        45px
        0;

    padding:
        17px
        22px
        20px;

    background:
        rgba(248,245,239,.97);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    border-bottom:
        1px solid
        rgba(184,149,66,.42);

    box-shadow:
        0 10px 30px
        rgba(70,55,25,.07);
}


/* =========================================================
   03 — MENU STYLE ORIENTAL
   ========================================================= */

.mh-nav a{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:49px;

    padding:
        11px
        25px
        12px;

    text-decoration:none !important;

    font-family:
        "Segoe Script",
        "Lucida Handwriting",
        "Brush Script MT",
        cursive;

    font-size:15px;

    font-weight:500;

    letter-spacing:.15px;

    text-transform:none;

    color:#665426 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,253,247,.98),
            rgba(246,238,216,.86)
        );

    border:
        1px solid
        rgba(184,149,66,.62);

    border-radius:
        22px
        22px
        9px
        9px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 5px 12px rgba(115,85,25,.05);

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Losange sous le bouton */

.mh-nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-7px;

    width:7px;

    height:7px;

    transform:
        translateX(-50%)
        rotate(45deg);

    background:
        var(--mh-ivory);

    border-right:
        1px solid
        rgba(184,149,66,.75);

    border-bottom:
        1px solid
        rgba(184,149,66,.75);
}


/* Petit trait supérieur */

.mh-nav a::before{

    content:"";

    position:absolute;

    left:50%;

    top:5px;

    width:24px;

    height:1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,149,66,.42),
            transparent
        );
}


/* Hover */

.mh-nav a:hover{

    color:
        var(--mh-gold-dark)
        !important;

    background:
        linear-gradient(
            180deg,
            #f7edcf,
            #ead7a6
        );

    border-color:
        var(--mh-gold);

    transform:
        translateY(-3px);
}


/* Bouton actif */

.mh-nav-link.is-active{

    color:#9b7425 !important;

    background:
        linear-gradient(
            180deg,
            #f1e3bc,
            #e4cc90
        ) !important;

    border-color:
        var(--mh-gold)
        !important;

    font-weight:600;

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(115,84,24,.13);
}


.mh-nav-link.is-active::after{

    background:#d2ae54;

    border-color:#d2ae54;
}


/* Menu principal */

.mh-home-link{

    color:#8a6827 !important;

    background:
        linear-gradient(
            180deg,
            #efe0b5,
            #dfc98f
        ) !important;

    border-color:
        var(--mh-gold)
        !important;
}


/* =========================================================
   04 — ANCRES
   ========================================================= */

#mh-origines,
#mh-lignee,
#mh-memoire,
#mh-charte{

    scroll-margin-top:125px;
}


#mh-origines{

    padding-bottom:260px;
}


/* =========================================================
   05 — SECTIONS
   ========================================================= */

.mh-section{

    margin:
        70px
        0;
}


.mh-intro{

    max-width:900px;

    margin:
        60px
        auto
        90px;

    text-align:center;
}


.mh-kicker,
.mh-section-title span{

    display:block;

    color:
        var(--mh-gold);

    font-size:12px;

    letter-spacing:3px;

    margin-bottom:10px;
}


.mh-section h1,
.mh-section h2{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:
        var(--mh-green);

    font-size:38px;

    font-weight:400;

    margin:
        7px
        0
        12px;
}


.mh-intro p{

    font-family:
        Georgia,
        serif;

    font-size:18px;

    line-height:1.9;
}


.mh-ornament{

    color:
        var(--mh-gold);

    font-size:18px;

    margin:
        12px
        0
        27px;
}


/* =========================================================
   06 — TITRE LIGNÉE
   ========================================================= */

.mh-section-title{

    text-align:center;

    margin-bottom:45px;
}


/* =========================================================
   07 — TIMELINE
   ========================================================= */

.mh-timeline{

    max-width:950px;

    margin:0 auto;

    position:relative;
}


.mh-timeline::before{

    content:"";

    position:absolute;

    left:43px;

    top:25px;

    bottom:25px;

    width:1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--mh-gold) 7%,
            var(--mh-gold) 93%,
            transparent
        );
}


/* Génération */

.mh-generation{

    position:relative;

    margin:
        0
        0
        18px
        80px;

    border:
        1px solid
        rgba(184,149,66,.38);

    background:
        rgba(255,253,248,.68);

    transition:
        .3s ease;
}


.mh-generation::before{

    content:"";

    position:absolute;

    width:13px;

    height:13px;

    left:-44px;

    top:25px;

    border:
        2px solid
        var(--mh-gold);

    background:
        var(--mh-ivory);

    border-radius:50%;
}


.mh-generation:hover{

    box-shadow:
        0 12px 35px
        rgba(31,47,31,.08);

    transform:
        translateX(3px);
}


/* Summary */

.mh-generation summary{

    display:grid;

    grid-template-columns:
        125px
        1fr
        35px;

    align-items:center;

    gap:15px;

    cursor:pointer;

    list-style:none;

    padding:
        22px
        25px;
}


.mh-generation summary::-webkit-details-marker{

    display:none;
}


.mh-date{

    color:
        var(--mh-gold);

    font-family:
        Georgia,
        serif;

    font-size:18px;
}


.mh-name{

    font-family:
        Georgia,
        serif;

    font-size:21px;

    color:
        var(--mh-green);
}


.mh-plus{

    font-size:24px;

    text-align:center;

    color:
        var(--mh-gold);

    transition:
        .3s ease;
}


.mh-generation[open] .mh-plus{

    transform:
        rotate(45deg);
}


.mh-generation[open]{

    background:
        var(--mh-light);

    box-shadow:
        0 16px 45px
        rgba(31,47,31,.08);
}


.mh-generation-content{

    padding:
        5px
        45px
        32px
        165px;

    line-height:1.8;

    animation:
        mhFade
        .35s
        ease;
}


.mh-generation-content h3{

    font-family:
        Georgia,
        serif;

    color:
        var(--mh-green);

    font-weight:400;

    font-size:22px;
}


.mh-note{

    border-left:
        2px solid
        var(--mh-gold);

    padding:
        10px
        0
        10px
        20px;

    font-style:italic;
}


/* =========================================================
   08 — BIFURCATION 1852 / 1860
   ========================================================= */

.mh-branches{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:18px;

    margin-top:30px;
}


/* Cartes */

.mahcer-history button.mh-branch{

    appearance:none !important;

    -webkit-appearance:none !important;

    width:100% !important;

    margin:0 !important;

    padding:
        24px
        18px
        !important;

    cursor:pointer;

    text-align:center !important;

    color:
        var(--mh-green)
        !important;

    background:
        linear-gradient(
            180deg,
            #fffdf8,
            #f7f0df
        ) !important;

    border:
        1px solid
        rgba(184,149,66,.55)
        !important;

    border-top:
        2px solid
        var(--mh-gold)
        !important;

    border-radius:
        16px
        16px
        6px
        6px
        !important;

    box-shadow:
        0 5px 14px
        rgba(110,85,30,.05)
        !important;

    transition:
        .25s ease
        !important;
}


/* Hover */

.mahcer-history button.mh-branch:hover,
.mahcer-history button.mh-branch:focus{

    color:
        var(--mh-green)
        !important;

    background:
        linear-gradient(
            180deg,
            #f6e9c6,
            #ead5a2
        ) !important;

    border-color:
        var(--mh-gold)
        !important;

    outline:none !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(120,90,30,.12)
        !important;
}


/* Sélection */

.mahcer-history button.mh-branch.is-active{

    background:
        linear-gradient(
            180deg,
            #ecd89f,
            #dfc47d
        ) !important;

    border-color:
        #a77d28
        !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 26px
        rgba(120,90,30,.16)
        !important;
}


/* Date */

.mh-branch span{

    display:block;

    margin-bottom:5px;

    color:
        var(--mh-gold)
        !important;

    font-family:
        Georgia,
        serif;

    font-size:23px;
}


/* Nom */

.mh-branch strong{

    display:block;

    color:
        var(--mh-green)
        !important;

    font-family:
        Georgia,
        serif;

    font-size:20px;
}


/* Sous-titre */

.mh-branch small{

    display:block;

    margin-top:8px;

    color:#74684c !important;

    font-size:12px;

    font-style:italic;
}


/* =========================================================
   09 — PANNEAUX DES BRANCHES
   ========================================================= */

.mh-branch-details{

    margin-top:24px;
}


.mh-branch-panel{

    display:none !important;

    position:relative;

    padding:
        30px
        34px;

    background:
        var(--mh-light);

    border-left:
        3px solid
        var(--mh-gold);

    box-shadow:
        0 8px 24px
        rgba(60,45,20,.06);
}


.mh-branch-panel.is-visible{

    display:block !important;

    animation:
        mhBranchReveal
        .35s
        ease;
}


.mh-branch-panel-date{

    display:block;

    color:
        var(--mh-gold);

    font-family:
        Georgia,
        serif;

    font-size:17px;

    margin-bottom:4px;
}


.mh-branch-panel h4{

    margin:
        0
        0
        15px;

    color:
        var(--mh-green);

    font-family:
        Georgia,
        serif;

    font-size:26px;

    font-weight:400;
}


.mh-branch-panel p{

    margin:0;

    line-height:1.8;
}


/* =========================================================
   10 — MÉMOIRE FAMILIALE
   ========================================================= */

.mh-memory{

    max-width:900px;

    margin:
        100px
        auto;

    text-align:center;
}


.mh-memory p{

    font-family:
        Georgia,
        serif;

    font-size:18px;

    line-height:1.8;
}


.mh-memory blockquote{

    margin:
        40px
        auto
        0;

    max-width:700px;

    padding:
        35px
        45px;

    border-top:
        1px solid
        var(--mh-gold);

    border-bottom:
        1px solid
        var(--mh-gold);

    font-family:
        Georgia,
        serif;

    font-size:23px;

    font-style:italic;

    line-height:1.6;
}


/* =========================================================
   11 — CHARTE
   ========================================================= */

.mh-charter{

    display:grid;

    grid-template-columns:
        90px
        1fr;

    gap:30px;

    align-items:center;

    background:
        var(--mh-green);

    color:#fff;

    padding:
        45px
        55px;

    border:
        1px solid
        var(--mh-gold);
}


.mh-charter h2{

    color:#fff;
}


.mh-charter .mh-kicker{

    color:#d5b865;
}


.mh-charter p{

    line-height:1.8;
}


.mh-charter-icon{

    font-size:55px;

    color:
        var(--mh-gold);

    text-align:center;
}


/* =========================================================
   12 — ANIMATIONS
   ========================================================= */

@keyframes mhFade{

    from{

        opacity:0;

        transform:
            translateY(-8px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }

}


@keyframes mhBranchReveal{

    from{

        opacity:0;

        transform:
            translateY(-8px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   13 — TABLETTE
   ========================================================= */

@media(max-width:900px){

    .mh-nav{

        gap:9px;

        padding:
            12px
            10px
            16px;
    }


    .mh-nav a{

        padding:
            10px
            16px;

        font-size:13px;
    }

}


/* =========================================================
   14 — MOBILE
   ========================================================= */

@media(max-width:700px){

    .mahcer-history{

        padding:
            15px
            15px
            50px;
    }


    .mh-section h2{

        font-size:29px;
    }


    .mh-nav{

        gap:8px;

        margin-bottom:35px;

        padding:
            10px
            7px
            14px;
    }


    .mh-nav a{

        flex:
            1
            1
            44%;

        min-height:42px;

        padding:
            8px
            9px;

        font-size:11px;
    }


    #mh-origines{

        padding-bottom:130px;
    }


    .mh-timeline::before{

        left:12px;
    }


    .mh-generation{

        margin-left:30px;
    }


    .mh-generation::before{

        left:-25px;
    }


    .mh-generation summary{

        grid-template-columns:
            1fr
            32px;
    }


    .mh-date{

        grid-column:1;

        font-size:15px;
    }


    .mh-name{

        grid-column:1;

        font-size:18px;
    }


    .mh-plus{

        grid-column:2;

        grid-row:
            1 / 3;
    }


    .mh-generation-content{

        padding:
            5px
            22px
            25px;
    }


    .mh-branches{

        grid-template-columns:
            1fr;
    }


    .mh-charter{

        grid-template-columns:
            1fr;

        padding:
            35px
            25px;

        text-align:center;
    }

}
/* =========================================================
   MINI ARBRE GÉNÉALOGIQUE
   ========================================================= */

.mh-tree-transition{
    margin:35px 0 25px;
    text-align:center;
}

.mh-tree-transition span{
    display:block;
    color:var(--mh-gold);
    font-size:11px;
    letter-spacing:2.5px;
    margin-bottom:6px;
}

.mh-tree-transition strong{
    font-family:Georgia,serif;
    font-size:24px;
    font-weight:400;
    color:var(--mh-green);
}

.mh-family-level{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    padding-top:28px;
}

.mh-family-level::before{
    content:"";
    position:absolute;
    top:10px;
    left:8%;
    right:8%;
    height:1px;
    background:var(--mh-gold);
}

.mh-family-level-six{
    grid-template-columns:repeat(3,1fr);
}

.mh-person-card{
    position:relative;
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    padding:18px 12px;
    background:#fffdf8 !important;
    border:1px solid rgba(184,149,66,.45) !important;
    border-radius:12px !important;
    color:var(--mh-green) !important;
    cursor:pointer;
    text-align:center;
    transition:.25s ease;
}

.mh-person-card::before{
    content:"";
    position:absolute;
    width:1px;
    height:18px;
    background:var(--mh-gold);
    top:-18px;
    left:50%;
}

.mh-person-card:hover{
    background:#f3e5bd !important;
    border-color:var(--mh-gold) !important;
    transform:translateY(-2px);
}

.mh-person-card.is-active{
    background:#ead39a !important;
    border-color:var(--mh-gold-dark) !important;
}

.mh-person-card span{
    display:block;
    color:var(--mh-gold);
    font-family:Georgia,serif;
    font-size:16px;
    margin-bottom:4px;
}

.mh-person-card strong{
    display:block;
    font-family:Georgia,serif;
    font-size:17px;
    color:var(--mh-green);
}

.mh-person-card small{
    display:block;
    margin-top:6px;
    font-size:11px;
    font-style:italic;
    color:#74684c;
}

.mh-descendant-zone{
    margin-top:25px;
}

.mh-descendant-panel{
    display:none;
    margin-top:25px;
    padding:28px;
    border-left:2px solid var(--mh-gold);
    background:#fffdf8;
    animation:mhBranchReveal .35s ease;
}

.mh-descendant-panel.is-visible{
    display:block;
}

@media(max-width:900px){
    .mh-family-level,
    .mh-family-level-six{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .mh-family-level,
    .mh-family-level-six{
        grid-template-columns:1fr;
    }

    .mh-family-level::before{
        display:none;
    }

    .mh-person-card::before{
        display:none;
    }
}
/* =========================================================
   15 — FINITIONS PREMIUM V3.1
   ========================================================= */
.mahcer-history{
    position:relative;
    isolation:isolate;
}
.mahcer-history::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
      radial-gradient(circle at 18% 12%, rgba(231,210,154,.16), transparent 28%),
      radial-gradient(circle at 82% 42%, rgba(184,149,66,.09), transparent 30%);
}
.mh-generation,
.mahcer-history button.mh-branch,
.mh-person-card,
.mh-charter{
    overflow:hidden;
}
.mh-generation::after,
.mahcer-history button.mh-branch::after,
.mh-person-card::after,
.mh-charter::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(190px circle at var(--mh-x,50%) var(--mh-y,50%), rgba(255,239,190,.28), transparent 62%);
    transition:opacity .28s ease;
}
.mh-generation:hover::after,
.mahcer-history button.mh-branch:hover::after,
.mh-person-card:hover::after,
.mh-charter:hover::after{ opacity:1; }

.mh-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.mh-reveal.is-seen{ opacity:1; transform:none; }

.mh-nav{
    border-radius:0 0 18px 18px;
}
.mh-nav a:focus-visible,
.mh-generation summary:focus-visible,
.mahcer-history button:focus-visible{
    outline:2px solid var(--mh-gold);
    outline-offset:3px;
}
.mh-generation[open]{
    border-color:rgba(184,149,66,.62);
}
.mh-charter{
    position:relative;
    background:
      radial-gradient(circle at var(--mh-x,25%) var(--mh-y,40%), rgba(213,184,101,.18), transparent 28%),
      linear-gradient(135deg,#213724,#29462e 64%,#1f3322);
    box-shadow:0 24px 55px rgba(31,47,31,.14);
}
.mh-charter-icon{
    filter:drop-shadow(0 0 14px rgba(213,184,101,.35));
}

@media (prefers-reduced-motion: reduce){
    .mahcer-history *, .mahcer-history *::before, .mahcer-history *::after{
        scroll-behavior:auto !important;
        animation:none !important;
        transition:none !important;
    }
    .mh-reveal{opacity:1;transform:none;}
}

/* =========================================================
   15 — V3.1 BETA 2 — HISTOIRE IMMERSIVE / LUMIÈRE
   ========================================================= */

.mahcer-history{
    position:relative;
    isolation:isolate;
    --mh-px:50%;
    --mh-py:12%;
    background:
      radial-gradient(circle at var(--mh-px) var(--mh-py), rgba(232,204,133,.12), transparent 24%),
      linear-gradient(180deg, rgba(255,253,248,.25), rgba(248,245,239,.18));
}

.mahcer-history::before{
    content:"";
    position:absolute;
    inset:70px -8% auto;
    height:520px;
    z-index:-1;
    pointer-events:none;
    background:
      radial-gradient(ellipse at center, rgba(224,192,112,.13), transparent 58%);
    filter:blur(18px);
    opacity:.72;
}

/* Menu interne : verre ivoire + lumière dorée */
.mh-nav{
    top:38px;
    border:1px solid rgba(184,149,66,.28);
    border-top-color:rgba(255,255,255,.85);
    border-radius:0 0 20px 20px;
    background:linear-gradient(180deg, rgba(255,253,248,.96), rgba(248,243,230,.93));
    box-shadow:0 12px 36px rgba(74,54,20,.09), inset 0 1px 0 rgba(255,255,255,.9);
}

.mh-nav a{
    overflow:hidden;
}

.mh-nav a span{ position:relative; z-index:2; }

.mh-nav a:hover,
.mh-nav-link.is-active,
.mh-home-link:hover{
    box-shadow:
      0 12px 28px rgba(142,105,31,.15),
      0 0 28px rgba(214,176,83,.14),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Réduction du grand vide entre Origines et Lignée */
#mh-origines{
    padding-bottom:115px;
}

.mh-section{
    position:relative;
}

.mh-intro{
    margin-top:54px;
    margin-bottom:58px;
    padding:38px 34px 26px;
}

.mh-intro::before,
.mh-section-title::before,
.mh-memory::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:min(860px, 92vw);
    height:260px;
    transform:translate(-50%,-50%);
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(226,194,113,.13), rgba(226,194,113,.035) 42%, transparent 68%);
    filter:blur(14px);
}

.mh-kicker,
.mh-section-title span{
    text-shadow:0 0 18px rgba(184,149,66,.16);
}

.mh-section h1,
.mh-section h2{
    text-shadow:0 10px 30px rgba(64,51,23,.055);
}

.mh-ornament{
    position:relative;
    display:inline-block;
    animation:mhOrnamentPulse 3.8s ease-in-out infinite;
    text-shadow:0 0 6px rgba(184,149,66,.15), 0 0 20px rgba(184,149,66,.22);
}

/* Timeline : fil doré vivant */
.mh-timeline::before{
    width:2px;
    left:42px;
    background:linear-gradient(to bottom,
      transparent,
      rgba(184,149,66,.35) 5%,
      #d8b55f 20%,
      #9d762a 50%,
      #d8b55f 80%,
      rgba(184,149,66,.35) 95%,
      transparent);
    background-size:100% 190%;
    animation:mhTimelineGlow 7s linear infinite;
    box-shadow:0 0 10px rgba(184,149,66,.18);
}

.mh-generation{
    overflow:hidden;
    border-color:rgba(184,149,66,.42);
    background:
      radial-gradient(circle at var(--mh-x,50%) var(--mh-y,50%), rgba(230,200,125,.12), transparent 34%),
      rgba(255,253,248,.74);
    box-shadow:0 8px 25px rgba(50,42,23,.035);
    transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease;
}

.mh-generation::after{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(115deg, transparent 26%, rgba(255,245,204,.58) 48%, transparent 67%);
    transform:translateX(-115%);
    transition:opacity .25s ease;
}

.mh-generation:hover::after,
.mh-generation[open]::after{
    opacity:.55;
    animation:mhCardSheen 1.05s ease forwards;
}

.mh-generation:hover,
.mh-generation[open]{
    border-color:rgba(184,149,66,.68);
    box-shadow:
      0 18px 42px rgba(56,45,22,.085),
      0 0 34px rgba(211,171,72,.08);
}

.mh-generation::before{
    box-shadow:0 0 0 5px rgba(184,149,66,.075), 0 0 18px rgba(184,149,66,.18);
    transition:transform .3s ease, box-shadow .3s ease;
}

.mh-generation[open]::before{
    transform:scale(1.12);
    background:#fff9e8;
    box-shadow:0 0 0 7px rgba(184,149,66,.10), 0 0 22px rgba(184,149,66,.27);
}

.mh-generation-content{
    animation:mhImmersiveReveal .48s cubic-bezier(.22,.8,.27,1);
}

/* Branches et mini-arbre : relief + halo au survol */
.mahcer-history button.mh-branch,
.mh-person-card{
    background:
      radial-gradient(circle at var(--mh-x,50%) var(--mh-y,50%), rgba(239,215,155,.22), transparent 42%),
      linear-gradient(180deg,#fffdf8,#f7f0df) !important;
    box-shadow:0 7px 20px rgba(86,64,24,.055) !important;
}

.mahcer-history button.mh-branch:hover,
.mh-person-card:hover{
    box-shadow:0 16px 34px rgba(112,83,27,.14), 0 0 28px rgba(216,176,77,.11) !important;
}

.mh-branch-panel,
.mh-descendant-panel{
    background:
      radial-gradient(circle at 12% 0%, rgba(232,201,126,.12), transparent 30%),
      var(--mh-light);
    box-shadow:0 14px 36px rgba(60,45,20,.07);
}

/* Mémoire : chapitre plus émotionnel */
.mh-memory{
    margin-top:78px;
    margin-bottom:88px;
    padding:50px 28px 42px;
}

.mh-memory blockquote{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(255,253,248,.66),rgba(248,242,226,.38));
    box-shadow:0 15px 38px rgba(70,53,20,.045);
}

.mh-memory blockquote::before{
    content:"✦";
    position:absolute;
    left:22px;
    top:14px;
    color:rgba(184,149,66,.35);
    font-size:22px;
    text-shadow:0 0 18px rgba(184,149,66,.28);
}

/* Charte : panneau signature avec bordure lumineuse */
.mh-charter{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(circle at var(--mh-x,18%) var(--mh-y,50%), rgba(213,184,101,.12), transparent 25%),
      linear-gradient(115deg,#203c27,#294b30 58%,#1f3825);
    box-shadow:0 24px 55px rgba(29,50,31,.16), 0 0 32px rgba(184,149,66,.08);
}

.mh-charter::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 20%,rgba(240,212,140,.10) 45%,transparent 65%);
    transform:translateX(-120%);
    animation:mhCharterLight 8s ease-in-out infinite;
}

.mh-charter::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border:1px solid rgba(215,181,93,.72);
    box-shadow:inset 0 0 28px rgba(215,181,93,.06);
}

.mh-charter-icon{
    animation:mhStarGlow 3.2s ease-in-out infinite;
    text-shadow:0 0 22px rgba(211,173,73,.35);
}

/* Petites poussières lumineuses décoratives */
.mh-light-particle{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    opacity:.28;
    background:#d9b75f;
    box-shadow:0 0 10px rgba(217,183,95,.42),0 0 20px rgba(217,183,95,.16);
    animation:mhFloatLight var(--mh-duration,7s) ease-in-out infinite var(--mh-delay,0s);
}

/* Reveal plus premium */
.mh-reveal{
    opacity:0;
    transform:translateY(22px) scale(.992);
    filter:blur(2px);
    transition:opacity .75s cubic-bezier(.22,.8,.27,1), transform .75s cubic-bezier(.22,.8,.27,1), filter .75s ease;
}

.mh-reveal.is-seen{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
}

@keyframes mhOrnamentPulse{
    0%,100%{transform:scale(1);opacity:.75}
    50%{transform:scale(1.16);opacity:1}
}

@keyframes mhTimelineGlow{
    from{background-position:0 0}
    to{background-position:0 190%}
}

@keyframes mhCardSheen{
    from{transform:translateX(-115%)}
    to{transform:translateX(115%)}
}

@keyframes mhImmersiveReveal{
    from{opacity:0;transform:translateY(-12px) scale(.992);filter:blur(2px)}
    to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes mhCharterLight{
    0%,12%{transform:translateX(-120%)}
    44%,58%{transform:translateX(120%)}
    100%{transform:translateX(120%)}
}

@keyframes mhStarGlow{
    0%,100%{transform:scale(1);opacity:.82}
    50%{transform:scale(1.09);opacity:1}
}

@keyframes mhFloatLight{
    0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:.12}
    35%{transform:translate3d(7px,-15px,0) scale(1.2);opacity:.42}
    70%{transform:translate3d(-6px,-7px,0) scale(.95);opacity:.24}
}

@media(max-width:900px){
    #mh-origines{padding-bottom:85px;}
    .mh-intro{padding-left:15px;padding-right:15px;}
    .mh-nav{top:32px;}
}

@media(max-width:700px){
    #mh-origines{padding-bottom:65px;}
    .mh-intro{margin-bottom:38px;padding-top:24px;}
    .mh-memory{padding-left:8px;padding-right:8px;}
}

@media(prefers-reduced-motion:reduce){
    .mahcer-history *,
    .mahcer-history *::before,
    .mahcer-history *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
    .mh-reveal{opacity:1 !important;transform:none !important;filter:none !important;}
}