:root {
    --black:#070707;
    --black-soft:#101010;
    --panel:#151515;
    --silver:#d5d5d5;
    --silver-muted:#9c9c9c;
    --white:#f7f7f4;
    --red:#7d1717;
    --red-bright:#a82929;
    --line:rgba(255,255,255,.13);
    --container:1240px;
    --radius:3px;
    --shadow:0 28px 70px rgba(0,0,0,.38);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body {
    margin:0;
    color:var(--white);
    background:var(--black);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height:1.65;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
button { color:inherit; }
.container { width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }
.section { position:relative; padding:112px 0; overflow:hidden; }
.section:nth-of-type(even) { background:var(--black-soft); }
.eyebrow {
    margin:0 0 14px;
    color:#c58a8a;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.22em;
    text-transform:uppercase;
}
.section-title {
    margin:0;
    max-width:850px;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(2.3rem,5vw,4.8rem);
    font-weight:500;
    line-height:1.02;
}
.section-lead {
    max-width:730px;
    margin:24px 0 0;
    color:var(--silver);
    font-size:1.05rem;
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:48px;
    margin-bottom:54px;
}
.section-heading.centered {
    display:block;
    max-width:900px;
    margin:0 auto 58px;
    text-align:center;
}
.section-heading.centered .section-lead { margin-inline:auto; }
.button-row { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:34px; }
.centered-row { justify-content:center; }
.button {
    display:inline-flex;
    min-height:52px;
    align-items:center;
    justify-content:center;
    padding:14px 24px;
    border:1px solid var(--red-bright);
    background:var(--red);
    color:white;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:.3s ease;
}
.button:hover { background:var(--red-bright); transform:translateY(-2px); }
.button--outline { border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.18); }
.button--outline:hover { background:white; color:black; }
.text-link { color:var(--silver); border-bottom:1px solid rgba(255,255,255,.35); }
.text-link:hover { color:white; }
.skip-link {
    position:fixed; left:16px; top:16px; z-index:2000;
    padding:10px 14px; background:white; color:black;
    transform:translateY(-150%);
}
.skip-link:focus { transform:none; }
.sr-only {
    position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
    margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important;
}
.split-layout, .story-grid, .partners-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:center;
}
.album-cover, .story-image, .partners-image {
    width:100%;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.streaming { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.streaming span {
    padding:8px 12px; border:1px solid var(--line); color:var(--silver-muted);
    font-size:.76rem; text-transform:uppercase;
}
.site-footer { border-top:1px solid var(--line); background:#050505; }
.footer-grid {
    display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:48px; padding:72px 0;
}
.footer-grid h2, .footer-grid h3 { margin-top:0; }
.footer-grid p, .footer-grid a { color:var(--silver-muted); }
.footer-grid a { display:block; margin:8px 0; }
.footer-grid a:hover { color:white; }
.footer-emblem { margin-bottom:18px; }
.footer-bottom { border-top:1px solid var(--line); }
.footer-bottom .container { display:flex; justify-content:space-between; gap:24px; padding:18px 0; color:#777; font-size:.8rem; }
.back-to-top {
    position:fixed; right:20px; bottom:20px; z-index:900;
    width:46px; height:46px; border:1px solid var(--line); background:#111; color:white;
    opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s;
}
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:none; }


body {
    background:
        linear-gradient(rgba(4,4,4,.84),rgba(4,4,4,.92)),
        url("../images/backgrounds/fond-noir-nuages.jpg") center top / cover fixed;
}
.section { background-color:transparent!important; }
.section::before {
    content:"";position:absolute;inset:0;z-index:-1;
    background:rgba(7,7,7,.76);backdrop-filter:blur(1px);
}
.section:nth-of-type(even)::before { background:rgba(12,12,12,.82); }


/* ==========================================================
   COMPOSANT D'ACTION OFFICIEL — ne changer que les variables
   ========================================================== */
:root {
    --action-red:#751719;
    --action-red-hover:#a12a2d;
    --action-silver:#d8dbe0;
    --action-silver-dark:#8e949d;
}
.site-button {
    position:relative;
    min-width:230px;
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border:1px solid rgba(216,219,224,.82);
    background:linear-gradient(180deg,rgba(139,31,34,.98),rgba(93,16,18,.98));
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
    text-shadow:0 2px 5px rgba(0,0,0,.8);
    box-shadow:0 12px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
    overflow:hidden;
    isolation:isolate;
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.site-button::before {
    content:"";
    position:absolute;
    inset:-2px auto -2px -46%;
    width:38%;
    z-index:-1;
    transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
    transition:left .55s ease;
}
.site-button::after {
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid rgba(255,255,255,.18);
    pointer-events:none;
}
.site-button:hover {
    transform:translateY(-3px);
    border-color:#fff;
    background:linear-gradient(180deg,var(--action-red-hover),#7d171a);
    box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 20px rgba(216,219,224,.15),inset 0 1px 0 rgba(255,255,255,.2);
}
.site-button:hover::before { left:118%; }
.site-button:active { transform:translateY(-1px); }
.site-button:focus-visible { outline:2px solid #fff;outline-offset:4px; }
.site-button--strong { background:linear-gradient(180deg,#9b2326,#661113); }
.site-button--tavern { width:100%; }

/* ==========================================================================
   FOOTER — RÉSEAUX SOCIAUX
   ========================================================================== */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 22px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(216, 216, 216, 0.30);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.025);

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

.footer-socials a img {
    display: block;

    width: 19px;
    height: 19px;

    object-fit: contain;

    opacity: 0.78;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.footer-socials a:hover {
    transform: translateY(-3px);

    border-color: rgba(216, 216, 216, 0.75);
    background: rgba(255, 255, 255, 0.07);
}

.footer-socials a:hover img {
    opacity: 1;
    transform: scale(1.08);
}

.footer-socials a:focus-visible {
    outline: 2px solid #d8d8d8;
    outline-offset: 3px;
}