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

.hero {
    position:relative;
    height:100svh;
    min-height:660px;

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

    isolation:isolate;
    overflow:hidden;
    text-align:center;

    background:#050505;
}


/* ==========================================================================
   IMAGE DE FOND
   ========================================================================== */

.hero__background {
    position:absolute;
    inset:0;
    z-index:-3;

    width:100%;
    height:100%;

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


/* ==========================================================================
   VOILE CINÉMATOGRAPHIQUE
   ========================================================================== */

.hero__shade {
    position:absolute;
    inset:0;
    z-index:-2;

    background:
        /* assombrit légèrement le haut sous le menu */
        linear-gradient(
            to bottom,
            rgba(0,0,0,.28) 0%,
            rgba(0,0,0,.08) 25%,
            rgba(0,0,0,.06) 52%,
            rgba(0,0,0,.28) 76%,
            rgba(0,0,0,.72) 100%
        ),

        /* léger assombrissement sur les bords */
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0,0,0,.16) 72%,
            rgba(0,0,0,.34) 100%
        );

    pointer-events:none;
}


/* ==========================================================================
   CONTENU GLOBAL DU HERO
   ========================================================================== */

.hero__content {
    --hero-shift-x:6vw;

    position:relative;
    z-index:2;

    width:min(1180px, calc(100% - 40px));
    height:100%;

    display:grid;
    grid-template-rows:1fr auto auto;

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

    /*
       Menu fixe en haut + espace pour Explorer en bas
    */
    padding:92px 0 22px;
}


/* ==========================================================================
   IDENTITÉ / LOGO TEXTE
   ========================================================================== */

.hero__identity {
    position:relative;

    align-self:center;

    width:min(840px, 88vw);

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

    /*
       On dégage Alaric / Esclarmonde à gauche
    */
    transform:
        translateX(var(--hero-shift-x))
        translateY(-2vh);
}


/*
   Halo très doux derrière le logo.
   PAS de rectangle visible.
*/
.hero__identity::before {
    content:"";

    position:absolute;
    z-index:-1;

    left:50%;
    top:50%;

    width:125%;
    height:190%;

    transform:translate(-50%,-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.46) 0%,
            rgba(0,0,0,.28) 36%,
            rgba(0,0,0,.10) 62%,
            transparent 78%
        );

    filter:blur(10px);

    pointer-events:none;
}


/* ==========================================================================
   ZONES D'IMAGES DU HERO
   ========================================================================== */

.hero__media-zone {
    position:relative;

    display:grid;
    place-items:center;

    isolation:isolate;
}


/* Fond SVG derrière une zone */

.hero__zone-background {
    position:absolute;

    left:50%;
    top:50%;

    z-index:-1;

    width:100%;
    height:100%;

    max-width:none;

    object-fit:contain;

    transform:translate(-50%,-50%);

    pointer-events:none;
}


/* ==========================================================================
   ANCIEN EMBLÈME
   Conservé si tu souhaites le réutiliser plus tard
   ========================================================================== */

.hero__media-zone--emblem {
    width:clamp(160px,20vh,235px);
    aspect-ratio:1;
}

.hero__media-zone--emblem .hero__zone-background {
    width:260%;
    height:210%;
}

.hero__emblem-image {
    width:100%;
    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(0 14px 26px rgba(0,0,0,.65));
}


/* ==========================================================================
   IMAGE DU TITRE
   ========================================================================== */

.hero__media-zone--title {
    width:min(700px,82vw);
    aspect-ratio:4 / 1;
}

.hero__media-zone--title .hero__zone-background {
    width:128%;
    height:165%;

    opacity:.72;
}

.hero__title-image {
    width:100%;
    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(0 3px 4px rgba(0,0,0,.85))
        drop-shadow(0 10px 22px rgba(0,0,0,.55));
}


/* ==========================================================================
   BOUTONS DU HERO
   ========================================================================== */

.hero__actions {
    display:flex;

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

    flex-wrap:wrap;

    gap:16px;

    /*
       Même axe que le titre
    */
    transform:translateX(var(--hero-shift-x));

    /*
       On rapproche les boutons du titre
    */
    margin-top:-2vh;
    margin-bottom:8px;
}


/*
   Tes règles de boutons existantes.
   On ne redéfinit PAS le composant complet ici.
*/

.site-button::after {
    right:5px;
    bottom:5px;
}

.site-button:hover {
    transform:translateY(-3px);

    color:#14110d;
    background:#f4f0e7;

    border-color:#fff;

    box-shadow:
        0 14px 34px rgba(0,0,0,.42);
}

.site-button:hover::before,
.site-button:hover::after {
    width:calc(100% - 10px);
    height:calc(100% - 10px);

    border-color:rgba(20,17,13,.42);
}

.site-button--strong {
    border-color:rgba(205,186,151,.88);
    background:rgba(34,25,16,.56);
}

.site-button:focus-visible {
    outline:2px solid #fff;
    outline-offset:4px;
}


/* ==========================================================================
   EXPLORER
   ========================================================================== */

.hero__scroll {
    /*
       Lui reste volontairement centré,
       contrairement au titre et aux boutons.
    */

    align-self:end;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:7px;

    margin-top:8px;

    padding-bottom:3px;

    color:#fff;

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

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

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

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

    opacity:.92;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.hero__scroll:hover {
    opacity:1;
    transform:translateY(3px);
}


/* Flèche */

.hero__scroll i {
    width:17px;
    height:17px;

    border-right:1px solid #fff;
    border-bottom:1px solid #fff;

    transform:rotate(45deg);

    animation:
        hero-arrow 1.8s ease-in-out infinite;
}


@keyframes hero-arrow {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(45deg);

        opacity:.62;
    }

    50% {
        transform:
            translateY(7px)
            rotate(45deg);

        opacity:1;
    }
}


/* ==========================================================================
   HERO — PETITS ÉCRANS
   ========================================================================== */

@media (max-width:900px) {

    .hero__content {
        --hero-shift-x:0px;

        padding-top:82px;
    }

    .hero__identity {
        width:min(760px,92vw);

        transform:translateY(-1vh);
    }

    .hero__identity::before {
        width:115%;
        height:175%;
    }

    .hero__media-zone--title {
        width:min(680px,90vw);
    }

    .hero__actions {
        transform:none;

        margin-top:0;
    }
}


/* ==========================================================================
   HERO — MOBILE
   ========================================================================== */

@media (max-width:640px) {

    .hero {
        min-height:620px;
    }

    .hero__content {
        width:calc(100% - 26px);

        grid-template-rows:1fr auto auto;

        padding:
            76px
            0
            18px;
    }

    .hero__identity {
        width:100%;

        transform:translateY(-1vh);
    }

    .hero__media-zone--title {
        width:94vw;
        max-width:520px;
    }

    .hero__identity::before {
        width:108%;
        height:180%;
    }

    .hero__actions {
        width:100%;

        flex-direction:column;

        gap:10px;

        margin-top:2px;
    }

    .hero__actions .site-button {
        width:min(310px,88vw);
    }

    .hero__scroll {
        margin-top:10px;

        font-size:.66rem;

        letter-spacing:.20em;
    }
}

/* Sections */
.companions-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.action-card {
    position:relative;
    min-height:390px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:32px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(150deg,rgba(24,24,24,.94),rgba(7,7,7,.96));
    overflow:hidden;
    transition:.35s;
}

.action-card:hover {
    transform:translateY(-8px);
    border-color:rgba(255,255,255,.35);
}

.action-card img {
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:25px;
}

.action-card__number {
    position:absolute;
    top:23px;
    right:25px;
    color:#555;
    font:2.7rem Georgia,serif;
}

.action-card h3 {
    margin:0 0 12px;
    font:2rem Georgia,serif;
}

.action-card p { color:#aaa; }

.action-card > span:last-child {
    color:#ddd;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
}

.feature-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:repeat(2,280px);
    gap:22px;
}

.feature-card {
    position:relative;
    overflow:hidden;
    min-height:280px;
}

.feature-card--large { grid-row:1/3; }

.feature-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.feature-card:hover img { transform:scale(1.05); }

.feature-card__shade {
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        transparent 34%,
        rgba(0,0,0,.10) 55%,
        rgba(0,0,0,.58) 100%
    );
}

.feature-card__content {
    position:absolute;
    inset:auto 0 0;
    display:flex;
    flex-direction:column;
    padding:28px;
}

.feature-card__content small {
    color:#d89c81;
    text-transform:uppercase;
    letter-spacing:.14em;
}

.feature-card__content strong { font:2rem Georgia,serif; }
.feature-card__content em { color:#bbb; }

.chronicle-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.chronicle-card {
    border:1px solid rgba(255,255,255,.13);
    background:rgba(10,10,10,.92);
    overflow:hidden;
}

.chronicle-card img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}

.chronicle-card__content { padding:26px; }
.chronicle-card__meta { color:#c88; font-size:.7rem; text-transform:uppercase; }
.chronicle-card h3 { font:1.7rem Georgia,serif; }


/* ==========================================================
   FONDS MODULAIRES DE LA PAGE D'ACCUEIL
   Chaque section reçoit --section-bg depuis index.php.
   ========================================================== */
.section--themed {
    position:relative;
    isolation:isolate;
    background:#090909 var(--section-bg) center / cover no-repeat!important;
    border-top:1px solid rgba(216,219,224,.30);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.section--themed::before {
    z-index:-2;
    background:linear-gradient(90deg,rgba(6,6,7,.91),rgba(9,9,10,.68) 52%,rgba(5,5,6,.88))!important;
    backdrop-filter:none;
}
.section--album::before,.section--partners::before { background:linear-gradient(90deg,rgba(6,6,7,.9),rgba(8,8,9,.56),rgba(5,5,6,.92))!important; }
.section--lands::before {
    background:linear-gradient(
        to bottom,
        rgba(5,7,8,.16),
        rgba(4,5,6,.36)
    )!important;
}



/* ==========================================================================
   SECTION COMPAGNONS
   Fond spécifique : plus visible, plus chaleureux, sans barre de transition
   ========================================================================== */

#les-compagnons.section--themed {
    background-position:center center !important;
    background-size:cover !important;
}


/* Voile sombre beaucoup plus léger.
   Le centre reste lisible mais l'image reste visible. */

#les-compagnons.section--themed::before {
    background:
        linear-gradient(
            to bottom,
            rgba(4,4,5,.08) 0%,
            rgba(4,4,5,.14) 28%,
            rgba(4,4,5,.22) 62%,
            rgba(4,4,5,.34) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.14) 0%,
            rgba(0,0,0,.06) 48%,
            transparent 80%
        ) !important;

    backdrop-filter:none !important;
}


/* Les cartes deviennent légèrement transparentes
   pour laisser vivre le fond derrière elles. */

#les-compagnons .action-card {
    background:
        linear-gradient(
            150deg,
            rgba(20,20,20,.82),
            rgba(6,6,6,.88)
        );

    border-color:rgba(255,255,255,.18);

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

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


/* La carte centrale reste un peu plus présente */

#les-compagnons .action-card--featured {
    background:
        linear-gradient(
            150deg,
            rgba(31,25,22,.86),
            rgba(8,7,7,.90)
        );

    border-color:rgba(205,186,151,.30);
}


/* Survol */

#les-compagnons .action-card:hover {
    background:
        linear-gradient(
            150deg,
            rgba(28,25,23,.90),
            rgba(8,8,8,.94)
        );

    border-color:rgba(255,255,255,.36);
}

/* ==========================================================================
   TERRES CATHARES — CARTES PLUS LUMINEUSES
   ========================================================================== */

#terres-cathares .feature-card {
    border:1px solid rgba(216,219,224,.22);
    background:#0b0b0b;
    box-shadow:0 18px 42px rgba(0,0,0,.26);
}

#terres-cathares .feature-card img {
    filter:brightness(1.12) saturate(1.04);
}

#terres-cathares .feature-card:hover img {
    filter:brightness(1.20) saturate(1.08);
}