/* =========================================================
   ABYSSIA — Page d'accueil
   Héros typographique, cimaise des salles, protocole, devise.
   Reste dans la DA du site : noir profond, laiton, rouge charte.
   ========================================================= */

/* =========================================================
   I. Héros
   ========================================================= */
.heros {
    position: relative;
    min-height: calc(100dvh - var(--entete));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 10vh, 7rem);
}

.heros-fond {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 60% 42% at 50% 100%, rgba(208,19,19,.14), transparent 68%),
        radial-gradient(ellipse 90% 60% at 50% 108%, rgba(168,129,74,.12), transparent 72%),
        linear-gradient(180deg, #040303 0%, #0a0705 55%, #150e08 100%);
}
/* Étoiles discrètes */
.heros-fond::before {
    content: ''; position: absolute; inset: 0 0 40%;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.38), transparent),
        radial-gradient(1px 1px at 34% 9%,  rgba(255,255,255,.3), transparent),
        radial-gradient(1px 1px at 62% 31%, rgba(255,255,255,.28), transparent),
        radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,.22), transparent),
        radial-gradient(1px 1px at 22% 40%, rgba(255,255,255,.2), transparent);
    animation: scintille 7s ease-in-out infinite;
}
@keyframes scintille { 0%,100% { opacity: .8 } 50% { opacity: .35 } }

/* Ligne d'horizon dorée */
.heros-fond::after {
    content: ''; position: absolute; left: 50%; bottom: clamp(3rem, 8vh, 5.5rem);
    width: min(680px, 82vw); height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(211,173,114,.55), transparent);
}

.heros-int { position: relative; display: flex; flex-direction: column; align-items: center; }

/* Sceau en rotation 3D */
.heros-sceau {
    display: block;
    width: clamp(58px, 7vw, 88px);
    color: var(--laiton-c, #d3ad72);
    margin-bottom: clamp(1rem, 2.5vh, 1.8rem);
    filter: drop-shadow(0 0 14px rgba(208,19,19,.35));
    animation: sceauTourne 16s linear infinite;
}
.heros-sceau svg { width: 100%; height: auto; display: block; }
@keyframes sceauTourne {
    from { transform: perspective(420px) rotateY(0deg); }
    to   { transform: perspective(420px) rotateY(360deg); }
}

.heros-titre { margin: .2em 0 .3em; }
.heros-nom {
    display: block;
    font-family: var(--f-titre);
    font-weight: 800;
    font-size: clamp(3rem, 9vw, 6.5rem);
    line-height: 1;
    letter-spacing: clamp(.14em, 2vw, .3em);
    text-indent: clamp(.14em, 2vw, .3em);
    text-transform: uppercase;
    color: var(--os-c);
    text-shadow: 0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.08), 0 0 44px rgba(208,19,19,.22);
}
.heros-sous {
    display: block;
    margin-top: clamp(.7rem, 1.6vh, 1.1rem);
    font-family: var(--f-cartel);
    font-weight: 400;
    font-size: clamp(.82rem, 1.7vw, 1.18rem);
    letter-spacing: .3em; text-indent: .3em;
    text-transform: uppercase;
    color: var(--laiton-c, #d3ad72);
}
.heros-sous em { font-style: normal; color: var(--rouge); }

.heros-lieu {
    font-family: var(--f-cartel);
    font-size: clamp(.66rem, 1.1vw, .8rem);
    letter-spacing: .24em; text-indent: .24em;
    text-transform: uppercase;
    color: var(--os-f);
    margin: 0 0 1.2em;
}

.heros-chapeau { max-width: 560px; margin-left: auto; margin-right: auto; }

.heros-actions { justify-content: center; margin-top: clamp(1rem, 2.5vh, 1.6rem); }

/* Flèche de défilement */
.heros-defile {
    position: absolute; left: 50%; bottom: clamp(.9rem, 2.6vh, 1.7rem);
    transform: translateX(-50%);
    width: 40px; height: 40px;
    display: grid; place-items: center;
    color: var(--os-f);
    border: 1px solid rgba(188,188,188,.2);
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    transition: color .25s, border-color .25s, transform .25s;
    animation: defileSaute 2.6s ease-in-out infinite;
}
.heros-defile svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.heros-defile:hover { color: var(--laiton-c); border-color: rgba(168,129,74,.6); }
@keyframes defileSaute { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 6px) } }

/* --- Brume au sol --- */
.brume { position: absolute; left: -20%; right: -20%; bottom: -4%; height: 34%; pointer-events: none; overflow: hidden; z-index: -1; }
.brume span {
    position: absolute; bottom: 0; height: 100%; width: 62%;
    background: radial-gradient(ellipse 46% 44% at 50% 76%, rgba(198,190,178,.09), rgba(198,190,178,.035) 46%, transparent 72%);
    animation: derive 34s linear infinite;
}
.brume span:nth-child(2) { animation-duration: 52s; animation-delay: -14s; opacity: .75; }
.brume span:nth-child(3) { animation-duration: 43s; animation-delay: -28s; opacity: .55; }
@keyframes derive { from { transform: translateX(-30%) } to { transform: translateX(130%) } }

/* --- Braises en suspension --- */
.poussiere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.poussiere i {
    position: absolute; bottom: -6%;
    width: 2px; height: 2px; border-radius: 50%;
    background: rgba(240,180,110,.75);
    box-shadow: 0 0 6px rgba(240,138,36,.6);
    animation: monte linear infinite;
}
@keyframes monte {
    0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
    12%  { opacity: .9; }
    88%  { opacity: .5; }
    100% { transform: translate(var(--dx, 40px), -108vh) scale(1); opacity: 0; }
}

/* =========================================================
   II. Cimaise des salles (les tableaux)
   ========================================================= */
.tableaux {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(.9rem, 2vw, 1.7rem);
    align-items: stretch;
}

.tableau {
    position: relative;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    padding-top: clamp(34px, 6vh, 62px);
}
/* Fil de suspension jusqu'à la cimaise */
.tableau::before {
    content: ''; position: absolute; left: 50%; top: 2px;
    width: 1px; height: clamp(32px, 6vh, 60px);
    background: linear-gradient(180deg, rgba(168,129,74,.8), rgba(168,129,74,.3));
}
/* Cimaise de laiton continue */
.tableau::after {
    content: ''; position: absolute; top: 0;
    left: calc(-.5 * clamp(.9rem, 2vw, 1.7rem) - 1px);
    right: calc(-.5 * clamp(.9rem, 2vw, 1.7rem) - 1px);
    height: 3px;
    background: linear-gradient(180deg, #d3ad72, #8a6534);
    box-shadow: 0 2px 7px rgba(0,0,0,.75);
    opacity: .85;
}
.tableaux > .tableau:first-child::after { left: -4%; }
.tableaux > .tableau:last-child::after { right: -4%; }

.tab-cadre {
    position: relative;
    padding: clamp(8px, 1vw, 14px);
    background: linear-gradient(150deg, #7a5230, #2c1c0e 52%, #6b4526);
    box-shadow: 0 18px 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(168,129,74,.4);
    transition: box-shadow .4s, transform .4s cubic-bezier(.22,1,.36,1);
}
.tab-toile {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid; place-items: center;
    padding: 10%;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(var(--tc, 208,19,19), .16), transparent 68%),
        linear-gradient(170deg, #17110c, #0a0705);
    border: 1px solid rgba(0,0,0,.75);
    overflow: hidden;
}
.tab-toile img { width: 100%; height: 100%; object-fit: contain; }

/* Toile claire pour la carte du bar (logo à fond blanc) */
.tab-toile.toile-carte {
    background: linear-gradient(170deg, #f2ede2, #ddd4c2);
    padding: 6%;
}
.tab-toile.toile-carte img { mix-blend-mode: multiply; }

a.tableau:hover .tab-cadre, a.tableau:focus-visible .tab-cadre {
    transform: translateY(-6px);
    box-shadow: 0 26px 54px rgba(0,0,0,.8), 0 0 34px rgba(var(--tc, 208,19,19), .3), inset 0 0 0 1px rgba(168,129,74,.6);
}
a.tableau:focus-visible { outline: none; }
a.tableau:focus-visible .tab-cadre { outline: 2px solid var(--laiton-c); outline-offset: 5px; }

/* Cartel sous le tableau */
.tab-cartel {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    margin-top: .8rem; text-align: center;
    padding: .7rem .6rem;
    background-image: linear-gradient(180deg, #e9e2d3, #d3c9b3);
    color: #1d1710;
    box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.tab-cartel h3 {
    font-family: var(--f-titre); font-weight: 700;
    font-size: clamp(.9rem, 1.5vw, 1.08rem);
    letter-spacing: .06em; text-transform: uppercase;
    color: #14100b; margin: 0 0 .2rem;
    line-height: 1.2;
}
.tab-cartel .det {
    font-family: var(--f-cartel); font-size: .7rem;
    letter-spacing: .12em; text-transform: uppercase; color: #6b5a42;
    display: block; margin-bottom: .45rem;
}
.tab-cartel .act {
    display: inline-block;
    font-family: var(--f-cartel); font-size: .68rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--rouge-f); border-bottom: 1px solid rgba(125,12,12,.4);
    padding-bottom: 1px;
}
a.tableau:hover .tab-cartel .act { color: var(--rouge); border-color: var(--rouge); }

/* Cadre vide « bientôt » */
.tableau.vide .tab-cadre { background: linear-gradient(150deg, #3d2a19, #1a1008 52%, #33220f); box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(168,129,74,.16); }
.tableau.vide .tab-toile {
    background: repeating-linear-gradient(135deg, #100c09 0 9px, #0b0806 9px 18px);
    color: var(--os-f);
}
.tableau.vide .tab-toile span {
    font-family: var(--f-cartel); font-size: clamp(.7rem, 1.3vw, .95rem);
    letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
    color: var(--os-f);
    border: 1px solid rgba(188,188,188,.22); padding: .35rem .8rem;
    background: rgba(0,0,0,.5);
}
.tableau.vide .tab-cartel { background-image: linear-gradient(180deg, #6a6259, #554e46); color: #cfc9c0; }
.tableau.vide .tab-cartel h3 { color: #e0dbd3; }
.tableau.vide .tab-cartel .det { color: #b3aca2; }

/* =========================================================
   III. Protocole (comment ça se passe)
   ========================================================= */
.etapes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    max-width: 1020px;
    margin: 0 auto;
}
.etape {
    position: relative;
    text-align: center;
    padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 2vw, 1.6rem);
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(168,129,74,.2);
}
.etape::before {
    content: ''; position: absolute; left: 50%; top: 0;
    width: 54px; height: 2px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #d3ad72, transparent);
}
.etape-num {
    display: block;
    font-family: var(--f-cartel);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--laiton-c, #d3ad72);
    line-height: 1;
    margin-bottom: .6rem;
    text-shadow: 0 0 18px rgba(208,19,19,.3);
}
.etape h3 {
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    margin-bottom: .4rem;
}
.etape p { font-size: .98rem; color: var(--os); margin: 0; }

.etapes-note {
    text-align: center;
    margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
    max-width: 560px;
    font-size: .98rem;
    color: var(--os-f);
}

/* =========================================================
   IV. Devise
   ========================================================= */
.devise {
    padding: clamp(2.6rem, 7vh, 4.6rem) 0;
    text-align: center;
    background:
        radial-gradient(ellipse 50% 80% at 50% 50%, rgba(208,19,19,.08), transparent 70%),
        #070504;
    border-top: 1px solid rgba(168,129,74,.14);
    border-bottom: 1px solid rgba(168,129,74,.14);
}
.devise-sceau {
    width: 34px; height: auto;
    color: rgba(211,173,114,.6);
    margin: 0 auto .9rem;
    display: block;
}
.devise-txt {
    font-family: var(--f-titre);
    font-style: italic;
    font-size: clamp(1.15rem, 2.4vw, 1.7rem);
    color: var(--os);
    margin: 0;
    letter-spacing: .04em;
}

/* =========================================================
   V. Responsive
   ========================================================= */
@media (max-width: 880px) {
    .tableaux { grid-template-columns: repeat(2, 1fr); }
    .tableau.vide { display: none; }
    .etapes { grid-template-columns: 1fr; max-width: 480px; }
}

@media (max-width: 480px) {
    .tableaux { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    .tab-toile { aspect-ratio: 16 / 9; }
    .heros-chapeau { font-size: 1rem; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .heros-sceau, .heros-defile, .poussiere i, .brume span, .heros-fond::before { animation: none !important; }
}