/* Page publique du launcher : charte du panel du bot (porte de connexion).
   Decor photographique voile, brume, grain ; Western : marque et titres ;
   Catalogue : boutons et intitules ; Lino : etiquettes ; Georgia : texte courant. */
@font-face { font-family: Catalogue; src: url('/site/assets/RDRCatalogueBold-Bold.ttf'); font-display: swap; }
@font-face { font-family: Lino; src: url('/site/assets/RDRLino-Regular.ttf'); font-display: swap; }
@font-face { font-family: Western; src: url('/site/assets/Western.woff2'); font-display: swap; }

:root {
    --charbon: #0d0e0e; --papier: #f1e8d8; --sourd: #d4c8b6; --faible: #a99e8e; --ombre: #81776b;
    --laiton: #bd9b69; --laiton-hi: #d9c298; --rouille: #a2493c; --rouille-hi: #cd8a68; --sauge: #a9b48a;
    --filet: #bd9b6926; --filet-mid: #bd9b6955;
    --ease: cubic-bezier(.22, .68, .25, 1);
}
* { box-sizing: border-box; }
html { background: var(--charbon); }
html, body { margin: 0; min-height: 100%; }
body { color: var(--papier); font: 16px/1.6 Georgia, 'Times New Roman', serif; background: transparent; }
a { color: var(--laiton-hi); }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; }

/* ------------------------------------------------------------ decor */
body::before {
    content: ''; position: fixed; inset: -3%; z-index: -3;
    background: linear-gradient(90deg, #0d0e0e 0%, #0d0e0ef0 32%, #0d0e0ec4 58%, #0d0e0ea6 82%, #0d0e0ec4),
        linear-gradient(0deg, #0d0e0e 0%, transparent 45%), url('/site/assets/frontiere.jpg') 70% 45% / cover no-repeat;
    filter: sepia(.25) saturate(.6);
    animation: developper 1.6s var(--ease) both;
}
.brume { position: fixed; inset: 30% -15% -15% 35%; z-index: -2; pointer-events: none;
    background: radial-gradient(ellipse at 50% 75%, #c0b6a014, transparent 55%), radial-gradient(ellipse at 80% 30%, #9d5c341c, transparent 58%);
    filter: blur(25px); animation: brume 24s ease-in-out infinite alternate; }
.grain { position: fixed; inset: 0; z-index: 50; opacity: .035; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
@keyframes developper { from { opacity: .2; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes brume { to { transform: translate(-5%, -3%) scale(1.08); } }
@keyframes lever { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ marque et etiquettes */
.marque { font: 52px/.83 Western, serif; letter-spacing: -.01em; color: #c4c2b4; }
.marque span { display: block; color: #984b3d; font-size: .82em; }
.marque small { display: block; font: 9px Lino, serif; letter-spacing: .45em; margin-top: 14px; color: #a4a497; }
.surtitre { display: flex; align-items: center; gap: 12px; font: 12px Lino, serif; letter-spacing: .16em; color: var(--laiton); text-transform: uppercase; margin: 0 0 12px; }
.trait { width: 27px; height: 2px; background: var(--rouille); flex: 0 0 auto; }

/* ------------------------------------------------------------ boutons */
.bouton {
    display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px; text-decoration: none;
    border: 1px solid #bd9b6966; background: linear-gradient(110deg, #3c2d24eb, #211b17ed); box-shadow: 0 4px 14px #0003;
    color: var(--papier); font: 23px Catalogue, serif; letter-spacing: .01em; transition: background .18s, border-color .18s, color .18s;
}
.bouton::after { content: "↓"; color: var(--laiton); font: 20px Georgia, serif; }
.bouton:hover, .bouton:focus-visible { background: linear-gradient(110deg, #65392ce6, #35231de8); border-color: var(--laiton); color: #fff4df; }

/* ------------------------------------------------------------ porte */
.porte { min-height: 100vh; padding: 6vh 6vw; display: grid; grid-template-rows: auto 1fr auto; gap: 5vh; animation: lever .9s var(--ease) both; }
.scene { align-self: center; display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 400px); justify-content: space-between; align-items: center; gap: 6vw; }
.porte h1 { margin: 0 0 22px; font: clamp(48px, 5vw, 80px)/.95 Western, serif; letter-spacing: -.02em; color: #d8d3c3; text-shadow: 0 3px 22px #0008; }
.porte h1 em { font: inherit; color: #b45e48; }
.devise { font-size: 19px; line-height: 1.55; color: #d5c7b2; margin: 0 0 30px; max-width: 540px; }
.fiche { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; font: 12px Lino, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--faible); }
.fiche span + span::before { content: '◆'; margin-right: 22px; color: var(--ombre); font-size: 8px; vertical-align: 2px; }
.avertissement { margin: 22px 0 0; max-width: 540px; color: var(--faible); font-size: 15px; }
.avertissement b { color: var(--sourd); font-weight: normal; font-family: Catalogue, serif; font-size: 16px; letter-spacing: .02em; }

/* ------------------------------------------------------------ etapes et etat (registre) */
.registre { animation: lever .9s .12s var(--ease) both; }
.etapes small b { font-weight: normal; color: var(--sourd); }
.suite { margin: -14px 0 26px 36px; color: var(--faible); font-size: 15px; font-style: italic; }
.etapes { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 4px; }
.etapes li { position: relative; isolation: isolate; display: flex; gap: 18px; padding: 10px 12px 10px 0; }
.etapes li::before {
    content: ''; position: absolute; inset: -2px -14px -2px -24px; z-index: -1; opacity: 0; transition: opacity .3s;
    background: radial-gradient(ellipse at 25% 50%, #a2493c55, transparent 72%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.etapes li:hover::before { opacity: 1; }
.etapes .numero { font: 11px Lino, serif; color: var(--rouille-hi); letter-spacing: .08em; min-width: 18px; padding-top: 9px; }
.etapes strong { display: block; font: 26px/1.1 Catalogue, serif; font-weight: normal; color: var(--papier); }
.etapes small { display: block; margin-top: 5px; font: 15px/1.45 Georgia, serif; color: #a69b8b; }
kbd { font: 14px Lino, serif; letter-spacing: .06em; padding: 1px 6px; border: 1px solid var(--filet-mid); color: var(--laiton-hi); }

.etat {
    padding: 18px 20px; background: linear-gradient(120deg, #241e19e6, #151413e6); border: 1px solid var(--filet);
    box-shadow: inset 0 0 0 1px #0004, 0 8px 24px #0005;
}
.etat .l { font: 12px Lino, serif; letter-spacing: .14em; color: var(--faible); text-transform: uppercase; }
.etat .v { font: 26px/1.2 Catalogue, serif; margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.etat p { margin: 8px 0 0; color: var(--sourd); font-size: 15px; white-space: pre-line; }
.point { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: var(--faible); flex: 0 0 auto; }
.point.ok { background: var(--sauge); box-shadow: 0 0 8px #a9b48a88; }
.point.ko { background: var(--rouille-hi); }

.pied { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--filet); font: 11px Lino, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ombre); }

/* ------------------------------------------------------------ page de retour Discord */
.seule .scene { grid-template-columns: minmax(0, 640px); }
.seule .etat { max-width: 540px; }

@media (max-width: 900px) {
    .scene { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .marque { font-size: 42px; }
}
@media (max-width: 520px) {
    .porte { padding: 32px 16px; }
    .devise { font-size: 17px; }
    .bouton { font-size: 20px; padding: 12px 20px; }
    .fiche span + span::before { margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before { animation: none !important; transition: none !important; }
}