/*
 * Le site public d'Elsewatch.
 *
 * ⚠️ La direction artistique n'est pas tranchée (docs/BRANDING.md) : ces
 * couleurs sont la « palette de départ à valider » du document, et ce sont les
 * mêmes que celles du client (client/src/theme/couleurs.ts). Les deux bougeront
 * ensemble en S5, quand trois directions seront comparées sur un vrai écran de
 * carte.
 *
 * Aucune police distante : une page qui attend un fichier chez un tiers montre
 * du texte sans style pendant une seconde, et fait appeler ce tiers par chacun
 * de ses visiteurs.
 */

:root {
    --fond: #0e1420;
    --fond-eleve: #161e2d;
    --texte: #e8ebf2;
    --texte-attenue: #96a0b5;
    --accent: #e8a33d;
    --succes: #6fbf8b;
    --alerte: #e4707a;
    --bordure: #233047;
    --rayon: 12px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 50% -10%, #1b2740 0%, transparent 70%),
        var(--fond);
    color: var(--texte);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

main {
    width: 100%;
    max-width: 34rem;
}

h1 {
    margin: 0 0 8px;
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.baseline {
    margin: 0 0 32px;
    color: var(--texte-attenue);
    font-size: 1.125rem;
}

.carte {
    background: var(--fond-eleve);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 24px;
}

.carte h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
}

.carte p {
    margin: 0 0 16px;
    color: var(--texte-attenue);
}

.carte p:last-child {
    margin-bottom: 0;
}

/* L'accent chaud est réservé à ce qui compte : ici, le nom du jeu. */
.marque {
    color: var(--accent);
}

.bouton {
    display: inline-block;
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 12px 24px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.bouton:hover,
.bouton:focus-visible {
    background: color-mix(in oklab, var(--accent) 15%, transparent);
}

/* ⚠️ Un contour de focus visible n'est pas décoratif : sans lui, une navigation
   au clavier ne sait plus où elle est. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.etat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* La pastille ne porte jamais l'information seule : le texte à côté dit la
   même chose (plein soleil, lecteur d'écran, daltonisme). */
.pastille {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.pastille--bon {
    background: var(--succes);
}

.pastille--mauvais {
    background: var(--alerte);
}

footer {
    margin-top: 32px;
    color: var(--texte-attenue);
    font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

footer a {
    color: var(--texte-attenue);
    /* Souligné plutôt que coloré : le pied de page ne doit pas tirer l'œil au
       même titre que ce qui se lit au-dessus, et un lien qui ne se distingue
       que par sa couleur n'en est pas un pour tout le monde. */
    text-decoration: underline;
    text-underline-offset: 2px;
}

footer a:hover,
footer a:focus-visible {
    color: var(--texte);
}