/* ==========================================================================
   LA TROPA — PAGE
   ========================================================================== */

:root {
    --tropa-bg:#080808;
    --tropa-panel:rgba(15,15,15,.80);
    --tropa-panel-soft:rgba(20,20,20,.60);
    --tropa-border:rgba(255,255,255,.14);

    --tropa-silver:#d8d8d8;
    --tropa-silver-muted:#9f9f9f;

    --tropa-burgundy:#6f1719;
    --tropa-burgundy-light:#9b2629;

    --tropa-gold:#c5a77b;

    /* sécurité sous le menu fixe */
    --tropa-menu-offset:110px;
}


/* ==========================================================================
   FOND GÉNÉRAL DE LA PAGE
   ========================================================================== */

.la-tropa-page {
    position:relative;

    min-height:100vh;

    color:#f5f5f2;
    background:#070707;

    isolation:isolate;
}


/*
   L'image est ici :
   /assets/images/la-tropa/la-tropa-bg.jpg

   Elle sert de fond à TOUTE la page.
*/
.la-tropa-page::before {
    content:"";

    position:fixed;
    inset:0;

    z-index:-3;

    background-image:
        url("../images/la-tropa/la-tropa-bg.jpg");

    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;

    pointer-events:none;
}


/*
   Très léger traitement général.
   Il ne doit surtout pas cacher l'image.
*/
.la-tropa-page::after {
    content:"";

    position:fixed;
    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.18),
            rgba(0,0,0,.32)
        );

    pointer-events:none;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.tropa-hero {
    position:relative;

    min-height:78vh;

    display:flex;
    align-items:center;
    justify-content:center;

    isolation:isolate;
    overflow:hidden;

    padding:
        calc(var(--tropa-menu-offset) + 55px)
        0
        90px;

    text-align:center;

    /*
       IMPORTANT :
       pas de fond opaque ici.
       On laisse apparaître la photo générale.
    */
    background:transparent;
}


/*
   Cet élément existe dans le PHP.
   On le garde uniquement comme traitement visuel.
*/
.tropa-hero__background {
    position:absolute;
    inset:0;

    z-index:-2;

    background:
        radial-gradient(
            ellipse at 50% 40%,
            rgba(110,22,24,.08),
            transparent 48%
        );

    pointer-events:none;
}


/* voile du hero */
.tropa-hero__shade {
    position:absolute;
    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.18) 50%,
            rgba(0,0,0,.48) 100%
        ),
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,.10) 68%,
            rgba(0,0,0,.30) 100%
        );

    pointer-events:none;
}


.tropa-hero__content {
    position:relative;
    z-index:2;

    width:min(920px,100%);

    margin-inline:auto;
}


.tropa-hero .eyebrow {
    margin-bottom:18px;

    color:var(--tropa-burgundy-light);

    font-weight:800;
    letter-spacing:.18em;

    text-shadow:
        0 2px 8px rgba(0,0,0,.85);
}


.tropa-hero h1 {
    margin:0;

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

    font-size:clamp(3rem,7vw,6.4rem);
    font-weight:500;

    line-height:.95;

    color:#fff;

    text-shadow:
        0 4px 20px rgba(0,0,0,.85),
        0 1px 3px #000;
}


.tropa-hero__intro {
    max-width:760px;

    margin:
        30px
        auto
        0;

    color:#e0ded9;

    font-size:1.08rem;
    line-height:1.8;

    text-shadow:
        0 2px 7px rgba(0,0,0,.95);
}


/* ==========================================================================
   NAVIGATION DU HERO
   ========================================================================== */

.tropa-hero__nav {
    display:flex;

    justify-content:center;
    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:40px;
}


.tropa-hero__nav a {
    position:relative;

    min-width:185px;

    padding:
        14px
        22px;

    border:
        1px solid
        rgba(215,215,215,.52);

    background:
        linear-gradient(
            145deg,
            rgba(18,18,18,.70),
            rgba(5,5,5,.52)
        );

    color:#f5f5f2;

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

    font-size:.76rem;
    font-weight:700;

    letter-spacing:.13em;
    text-transform:uppercase;

    text-shadow:
        0 2px 6px #000;

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

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 10px 25px rgba(0,0,0,.25);

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


/* petit trait intérieur */
.tropa-hero__nav a::after {
    content:"";

    position:absolute;

    inset:4px;

    border:
        1px solid
        rgba(255,255,255,.08);

    pointer-events:none;

    transition:
        border-color .25s ease;
}


.tropa-hero__nav a:hover {
    transform:translateY(-3px);

    color:#fff;

    border-color:
        rgba(225,225,225,.78);

    background:
        linear-gradient(
            145deg,
            rgba(111,23,25,.86),
            rgba(40,10,11,.78)
        );

    box-shadow:
        0 14px 30px rgba(0,0,0,.40),
        0 0 16px rgba(125,30,32,.14);
}


.tropa-hero__nav a:hover::after {
    border-color:
        rgba(255,255,255,.18);
}


/* ==========================================================================
   SECTIONS GÉNÉRALES
   ========================================================================== */

.tropa-section {
    position:relative;

    padding:
        120px
        0;

    /*
       Voile uniquement.
       L'image générale reste visible derrière.
    */
    background:
        rgba(5,5,5,.74);

    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
}


/* alternance très légère */
.tropa-section:nth-of-type(even) {
    background:
        rgba(8,8,8,.68);
}


/* séparation argentée fine */
.tropa-section::before,
.tropa-final::before {
    content:"";

    position:absolute;

    left:50%;
    top:0;

    width:min(900px,72%);
    height:1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220,220,220,.20),
            rgba(255,255,255,.60),
            rgba(220,220,220,.20),
            transparent
        );
}


/* ==========================================================================
   TITRES DES 3 GRANDES SECTIONS
   ========================================================================== */

.tropa-section > .container > .section-heading {
    max-width:900px;

    margin:
        0
        auto
        62px;

    text-align:center;
}


.tropa-section > .container > .section-heading .eyebrow {
    margin:
        0
        0
        15px;

    color:var(--tropa-burgundy-light);

    text-align:center;

    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}


.tropa-section > .container > .section-heading h2 {
    margin:
        0
        auto
        20px;

    color:#fff;

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

    font-size:
        clamp(2.6rem,5vw,4.8rem);

    font-weight:500;

    line-height:1.05;

    text-shadow:
        0 3px 15px rgba(0,0,0,.70);
}


.tropa-section > .container > .section-heading > p:last-child:not(.eyebrow) {
    max-width:720px;

    margin:
        0
        auto;

    color:#c6c4c0;

    line-height:1.8;
}


/* ==========================================================================
   GRILLE INTERNE
   ========================================================================== */

.tropa-section__grid {
    display:grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap:80px;

    align-items:center;
}


.tropa-section__content p {
    max-width:760px;

    margin:
        0
        0
        20px;

    color:#d0ceca;

    font-size:1rem;

    line-height:1.85;
}


.tropa-section__visual {
    display:flex;

    align-items:center;
    justify-content:center;
}


/* ==========================================================================
   NOTRE HISTOIRE
   ========================================================================== */

.tropa-section--story {
    background:
        linear-gradient(
            90deg,
            rgba(4,4,4,.78),
            rgba(8,8,8,.58),
            rgba(4,4,4,.70)
        );
}


.tropa-story-symbol {
    width:min(420px,100%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:22px;
}


.tropa-story-symbol img {
    width:
        min(340px,82vw);

    filter:
        drop-shadow(
            0 20px 32px
            rgba(0,0,0,.55)
        );

    transition:
        transform .35s ease;
}


.tropa-story-symbol img:hover {
    transform:
        scale(1.03);
}


.tropa-story-symbol__line {
    width:70%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220,220,220,.50),
            transparent
        );
}


/* ==========================================================================
   NOS VALEURS
   ========================================================================== */

.tropa-section--values {
    background:
        linear-gradient(
            rgba(6,6,6,.72),
            rgba(6,6,6,.72)
        );
}


.tropa-values-grid {
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


.tropa-value-card {
    position:relative;

    min-height:270px;

    padding:32px;

    border:
        1px solid
        var(--tropa-border);

    background:
        linear-gradient(
            145deg,
            rgba(22,22,22,.82),
            rgba(7,7,7,.86)
        );

    overflow:hidden;

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.20);

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

    transition:
        transform .30s ease,
        border-color .30s ease,
        background .30s ease;
}


.tropa-value-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(220,220,220,.38);

    background:
        linear-gradient(
            145deg,
            rgba(45,27,28,.87),
            rgba(9,9,9,.92)
        );
}


.tropa-value-card__number {
    position:absolute;

    top:18px;
    right:22px;

    color:
        rgba(255,255,255,.15);

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

    font-size:2.6rem;
}


.tropa-value-card h3 {
    margin:
        70px
        0
        14px;

    color:#fff;

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

    font-size:1.8rem;
    font-weight:500;
}


.tropa-value-card p {
    margin:0;

    color:#bdbab6;

    line-height:1.7;
}


/* ==========================================================================
   PERSONNAGES
   ========================================================================== */

.tropa-section--characters {
    background:
        linear-gradient(
            rgba(5,5,5,.76),
            rgba(5,5,5,.76)
        );
}


.tropa-characters {
    display:flex;

    flex-direction:column;

    gap:70px;

    margin-top:55px;
}


.tropa-character {
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    min-height:500px;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        linear-gradient(
            135deg,
            rgba(18,18,18,.86),
            rgba(6,6,6,.90)
        );

    overflow:hidden;

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.32);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}


.tropa-character__image {
    position:relative;

    min-height:500px;

    overflow:hidden;

    background:#101010;
}


.tropa-character__image::after {
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.30),
            transparent 48%
        );

    pointer-events:none;
}


.tropa-character__image img {
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        transform .70s ease;
}


.tropa-character:hover
.tropa-character__image img {
    transform:
        scale(1.025);
}


.tropa-character__content {
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        60px
        clamp(36px,5vw,75px);
}


.tropa-character__role {
    margin:
        0
        0
        13px;

    color:
        var(--tropa-burgundy-light);

    font-size:.72rem;
    font-weight:800;

    letter-spacing:.18em;
    text-transform:uppercase;
}


.tropa-character__content h3 {
    margin:
        0
        0
        24px;

    color:#fff;

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

    font-size:
        clamp(2.5rem,4vw,4rem);

    font-weight:500;
}


.tropa-character__content
p:not(.tropa-character__role) {
    margin:
        0
        0
        18px;

    color:#c5c2be;

    line-height:1.8;
}


/* Sanglier */
.tropa-character--sanglier {
    background:
        radial-gradient(
            circle at 22% 50%,
            rgba(185,185,185,.07),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            rgba(18,18,18,.86),
            rgba(6,6,6,.91)
        );
}


/* ==========================================================================
   APPEL FINAL
   ========================================================================== */

.tropa-final {
    position:relative;

    padding:
        110px
        0;

    text-align:center;

    background:
        linear-gradient(
            rgba(3,3,3,.80),
            rgba(3,3,3,.88)
        );
}


.tropa-final__content {
    max-width:820px;

    margin-inline:auto;
}


.tropa-final .eyebrow {
    color:
        var(--tropa-burgundy-light);
}


.tropa-final h2 {
    margin:
        0
        0
        20px;

    color:#fff;

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

    font-size:
        clamp(2.7rem,5vw,4.7rem);

    font-weight:500;
}


.tropa-final p:not(.eyebrow) {
    max-width:650px;

    margin:
        0
        auto
        35px;

    color:#c5c2be;

    line-height:1.8;
}


/* bouton secondaire */

.button--secondary {
    border-color:
        rgba(220,220,220,.42);

    background:
        rgba(5,5,5,.38);

    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}


.button--secondary:hover {
    color:#111;

    background:#f2f0eb;
}


/* ==========================================================================
   ANCRES + MENU FIXE
   ========================================================================== */

/*
   Quand on clique sur :
   /la-tropa#notre-histoire
   le titre ne passe pas sous le menu.
*/

#notre-histoire,
#nos-valeurs,
#personnages {
    scroll-margin-top:
        calc(var(--tropa-menu-offset) + 25px);
}


/* ==========================================================================
   RESPONSIVE — TABLETTE
   ========================================================================== */

@media (max-width:1000px) {

    :root {
        --tropa-menu-offset:90px;
    }


    .tropa-section__grid {
        grid-template-columns:1fr;

        gap:55px;
    }


    .tropa-values-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .tropa-character {
        grid-template-columns:1fr;
    }


    .tropa-character--alaric
    .tropa-character__content {
        order:2;
    }


    .tropa-character--alaric
    .tropa-character__image {
        order:1;
    }


    .tropa-character__image {
        min-height:520px;
    }
}


/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width:700px) {

    :root {
        --tropa-menu-offset:78px;
    }


    /*
       Sur mobile on évite background-attachment fixed,
       mais l'image reste derrière toute la page.
    */

    .la-tropa-page::before {
        position:absolute;

        background-position:
            center top;
    }


    .la-tropa-page::after {
        position:absolute;
    }


    .tropa-hero {
        min-height:auto;

        padding:
            calc(
                var(--tropa-menu-offset)
                + 45px
            )
            0
            75px;
    }


    .tropa-hero h1 {
        font-size:
            clamp(2.5rem,12vw,4rem);
    }


    .tropa-hero__intro {
        font-size:.98rem;
    }


    .tropa-hero__nav {
        flex-direction:column;
    }


    .tropa-hero__nav a {
        width:
            min(320px,90vw);
    }


    .tropa-section {
        padding:
            85px
            0;
    }


    .tropa-section >
    .container >
    .section-heading {
        margin-bottom:42px;
    }


    .tropa-values-grid {
        grid-template-columns:1fr;
    }


    .tropa-value-card {
        min-height:230px;
    }


    .tropa-character {
        min-height:0;
    }


    .tropa-character__image {
        min-height:390px;
    }


    .tropa-character__content {
        padding:
            42px
            28px;
    }


    .tropa-final {
        padding:
            85px
            0;
    }
}

/* ==========================================================================
   FOOTER — PAGE LA TROPA
   ========================================================================== */

.page-la-tropa .site-footer,
.page-la-tropa footer {
    position:relative;
    z-index:10;
    display:block;
    width:100%;

    background:#050505;
    color:#fff;
}