/* ==========================================================================
   Accueil (/) et connexion admin (/admin/login)
   Deux pages statiques, sans JS pour l'accueil. Elles sont vues aussi bien sur
   un laptop que sur un téléphone : quelqu'un qui scanne le QR peut atterrir
   ici. Tout est donc en flux, sans hauteur fixe, et défile nativement.
   Chargé après base.css, dont on réutilise tokens, keyframes et composants.
   ========================================================================== */

:root {
    /* Marge latérale commune : 20 px sur mobile, 64 px sur grand écran. */
    --home-pad: clamp(20px, 5vw, 64px);
    /* Ces deux pages sont d'abord conçues pour le grand écran : maille large. */
    --bt-grid-size: 72px;
    /* Teinte propre à la carte « Jouer » : un cyan désaturé, lisible sur le
       dégradé cyan/violet là où le gris secondaire disparaîtrait. */
    --home-card-desc: #9fd9e8;
}

@media (max-width: 600px) {
    :root {
        --bt-grid-size: 36px;
    }
}

/* Halos : la variable doit être posée sur <html>, seul porteur du
   pseudo-élément qui la consomme (base.css). D'où le :has() sur :root. */
:root:has(.home-page) {
    --bt-halo: radial-gradient(circle at 28% 26%, rgba(0, 229, 255, 0.24), transparent 58%),
        radial-gradient(circle at 76% 20%, rgba(255, 45, 149, 0.18), transparent 56%);
    --bt-halo-blur: 14px;
    --bt-halo-height: 85%;
}

:root:has(.login-page) {
    --bt-halo: radial-gradient(circle at 50% 26%, rgba(124, 77, 255, 0.26), transparent 60%);
    --bt-halo-blur: 16px;
    --bt-halo-height: 75%;
    /* Le login n'affiche pas la grille : la maquette ne garde que le halo et
       les scanlines. On neutralise la couleur plutôt que la couche entière. */
    --bt-grid-opacity: transparent;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    /* Aucun mot ne doit pouvoir pousser une largeur au-delà de l'écran. */
    overflow-wrap: break-word;
}

/* Enveloppe commune : colonne pleine hauteur, marges respectant les encoches
   et la barre gestuelle iOS, largeur de confort au centre. */
.home-page,
.login-page {
    position: relative;
    /* Au-dessus des halos de base.css ; grille et scanlines restent par-dessus. */
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top)) calc(var(--home-pad) + env(safe-area-inset-right))
        calc(28px + env(safe-area-inset-bottom)) calc(var(--home-pad) + env(safe-area-inset-left));
}

/* --------------------------------------------------------------------------
   Accueil
   -------------------------------------------------------------------------- */

.home-page {
    max-width: 1180px;
    gap: 30px;
}

.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.home-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(150deg, var(--bt-cyan), var(--bt-violet));
    font-size: 21px;
    line-height: 1;
}

.home-brand-name {
    font-family: var(--bt-font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bt-text);
}

.home-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border-radius: var(--bt-r-sm);
    background: rgba(57, 255, 136, 0.08);
    border: 1px solid rgba(57, 255, 136, 0.28);
}

.home-status-text {
    font-family: var(--bt-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bt-success-pale);
}

.home-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(28px, 5vw, 44px);
    padding: 24px 0;
    max-width: 1000px;
}

.home-hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: btIn 0.6s var(--bt-ease-in) both;
}

.home-eyebrow {
    margin: 0;
    font-size: clamp(12px, 2.6vw, 15px);
    letter-spacing: 0.3em;
}

/* Trois lignes forcées : la taille doit descendre assez bas pour que la plus
   longue tienne sur un écran de 320 px. */
.home-title {
    margin: 0;
    font-family: var(--bt-font-display);
    font-size: clamp(32px, 8vw, 82px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--bt-text);
}

.home-sub {
    margin: 0;
    max-width: 560px;
    font-size: clamp(16px, 2.4vw, 20px);
    color: var(--bt-text-3-alt);
    text-wrap: pretty;
}

.home-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    animation: btIn 0.6s var(--bt-ease-in) 0.15s both;
}

.home-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 320px;
    max-width: 360px;
    padding: 30px;
    border-radius: var(--bt-r-xl);
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: var(--bt-glass);
    color: var(--bt-text);
    transition: transform 0.18s var(--bt-ease-tap), background 0.18s ease, border-color 0.18s ease;
}

/* Survol réservé aux pointeurs qui survolent : sur un téléphone, l'état
   restait collé après un tap. Le tactile a son propre retour, au contact. */
@media (hover: hover) {
    .home-card:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.07);
        /* base.css colore les liens survolés en cyan : ici la carte entière
           est un lien, son texte doit garder ses couleurs. */
        color: var(--bt-text);
    }
}

.home-card:active {
    transform: scale(0.99);
    color: var(--bt-text);
}

.home-card-icon {
    font-size: 30px;
    line-height: 1;
}

.home-card-title {
    font-family: var(--bt-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--bt-text);
}

.home-card-desc {
    font-size: 16px;
    line-height: 1.45;
    color: var(--bt-text-3-alt);
}

.home-card-link {
    margin-top: 4px;
    font-family: var(--bt-font-mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bt-text-3);
}

/* Carte mise en avant : dégradé cyan/violet, bordure cyan, balayage. */
.home-card-play {
    border: 1.5px solid rgba(0, 229, 255, 0.45);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(124, 77, 255, 0.12));
    box-shadow: 0 20px 50px rgba(0, 229, 255, 0.14);
}

@media (hover: hover) {
    .home-card-play:hover {
        background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(124, 77, 255, 0.12));
        border-color: rgba(0, 229, 255, 0.8);
    }
}

.home-card-play .home-card-title {
    color: var(--bt-text-strong);
}

.home-card-play .home-card-desc {
    color: var(--home-card-desc);
}

.home-card-play .home-card-link {
    color: var(--bt-cyan);
}

.home-card .bt-shine {
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.16), transparent);
    animation-duration: 4s;
}

.home-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-footer span {
    font-family: var(--bt-font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* --bt-text-muted plafonnait à 3,5:1 en 12 px, sous le seuil AA. */
    color: var(--bt-text-3);
}

/* --------------------------------------------------------------------------
   Connexion admin
   -------------------------------------------------------------------------- */

.login-page {
    max-width: 560px;
    justify-content: center;
    gap: 32px;
}

.login-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: btIn 0.55s var(--bt-ease-in) both;
}

.login-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: linear-gradient(150deg, var(--bt-cyan), var(--bt-violet));
    font-size: 24px;
    line-height: 1;
}

.login-title {
    margin: 0;
    font-family: var(--bt-font-display);
    font-size: clamp(30px, 8vw, 38px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bt-text);
}

.login-sub {
    margin: 0;
    font-size: 16px;
    color: var(--bt-text-3-alt);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    animation: btIn 0.55s var(--bt-ease-in) 0.12s both;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.login-field .bt-label {
    font-size: 10px;
    letter-spacing: 0.24em;
}

/* 19 px : au-dessus des 16 px sous lesquels iOS zoome à la prise de focus. */
.login-input {
    width: 100%;
    padding: 18px 20px;
    border-radius: 11px;
    border: 1.5px solid rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.06);
    color: var(--bt-text);
    font-family: var(--bt-font-mono);
    font-size: 19px;
    letter-spacing: 0.2em;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.login-submit {
    padding: 19px;
    border-radius: 11px;
    font-size: 17px;
    letter-spacing: 0.05em;
}

/* Bandeau d'erreur sous le bouton. Le pictogramme est décoratif et posé en
   CSS : le script n'écrit que du texte dans #errorMsg. */
.login-error {
    display: none;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--bt-r-md);
    background: rgba(255, 77, 94, 0.08);
    border: 1px solid rgba(255, 77, 94, 0.3);
    color: var(--bt-error-text-2);
    font-size: 14px;
    animation: btRise 0.3s ease-out both;
}

.login-error.visible {
    display: flex;
}

.login-error::before {
    content: "⚠️";
    flex: none;
    font-size: 15px;
    line-height: 1;
}

/* min-height : cible tactile confortable pour un lien de 12 px. */
.login-back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    margin-top: 8px;
    font-family: var(--bt-font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bt-text-3);
}

.login-back:hover {
    color: var(--bt-cyan);
}

/* --------------------------------------------------------------------------
   Adaptations d'écran
   -------------------------------------------------------------------------- */

/* Grand écran : on retrouve les marges verticales généreuses de la maquette. */
@media (min-width: 900px) {
    .home-page,
    .login-page {
        padding-top: calc(48px + env(safe-area-inset-top));
        padding-bottom: calc(48px + env(safe-area-inset-bottom));
    }
}

/* Sous ce seuil, deux cartes de 360 px ne cohabitent plus lisiblement. */
@media (max-width: 760px) {
    .home-card {
        flex-basis: 100%;
        max-width: none;
    }

    .home-main {
        padding: 12px 0;
    }
}

@media (max-width: 380px) {
    .home-card {
        padding: 24px 20px;
    }

    .home-card-title {
        font-size: 26px;
    }
}

/* Paysage court : le contenu doit rester atteignable sans dépendre du centrage. */
@media (orientation: landscape) and (max-height: 500px) {
    .home-page,
    .login-page {
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .login-page {
        justify-content: flex-start;
        gap: 22px;
    }

    .home-main {
        padding: 8px 0;
        gap: 24px;
    }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : base.css neutralise déjà les boucles, on retire en plus
   le reflet balayant qui n'a plus de sens figé.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .home-card .bt-shine {
        display: none;
    }
}