/*
 * 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);
}

/*
 * La page d'essai du combat (DEV uniquement, App\Controller\Web\EssaiCombatController).
 *
 * ⚠️ Volontairement sobre, et ce n'est pas de la paresse : ce n'est PAS l'écran
 * du jeu. Le confondre avec lui ferait juger une direction artistique qui n'est
 * pas tranchée (point 4 du chantier v3, la galerie d'images). Elle répond à une
 * seule question : est-ce que ça se joue ?
 */

.essai {
    max-width: 46rem;
}

.essai h1 {
    margin: 0;
    font-size: 1.6rem;
}

.essai .discret {
    margin: 0.2rem 0 1.4rem;
    color: var(--texte-attenue);
    font-size: 0.9rem;
}

.essai .jauges {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-bottom: 1.4rem;
}

.essai .jauges > div {
    padding: 0.9rem 1rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-eleve);
}

.essai .etiquette {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.essai .barre {
    height: 10px;
    border-radius: 999px;
    background: #0b1220;
    overflow: hidden;
    margin-top: 0.35rem;
}

.essai .barre i {
    display: block;
    height: 100%;
    background: var(--succes);
    transition: width 0.2s ease;
}

.essai .barre.elan i { background: #6ea8e8; }
.essai .barre.adverse i { background: var(--alerte); }
.essai .barre.posture i { background: var(--accent); }

.essai .chiffre {
    display: block;
    font-size: 0.8rem;
    color: var(--texte-attenue);
    margin-bottom: 0.4rem;
}

.essai .annonce {
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--accent);
    background: var(--fond-eleve);
    border-radius: 0 var(--rayon) var(--rayon) 0;
}

.essai .verdict {
    padding: 1rem;
    border: 1px solid var(--accent);
    border-radius: var(--rayon);
    font-weight: 600;
}

.essai .question {
    margin: 1.2rem 0 0.5rem;
    color: var(--texte-attenue);
    font-size: 0.9rem;
}

.essai .choix {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.essai .bouton {
    display: block;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-eleve);
    color: var(--texte);
    text-decoration: none;
    font-weight: 600;
}

.essai .bouton:hover {
    border-color: var(--accent);
}

.essai .bouton small {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--texte-attenue);
}

/* ⚠️ « Pas prête » se VOIT, mais le lien reste cliquable : c'est le serveur qui
   refuse, et son refus s'affiche dans le journal (D137). */
.essai .bouton.froid {
    opacity: 0.55;
}

.essai .bouton.large {
    text-align: center;
}

.essai .journal {
    margin-top: 2rem;
}

.essai .journal h2 {
    font-size: 1rem;
    color: var(--texte-attenue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.essai .journal article {
    border-top: 1px solid var(--bordure);
    padding: 0.7rem 0;
}

.essai .journal h3 {
    margin: 0 0 0.3rem;
    font-size: 0.92rem;
}

.essai .journal h3 small {
    display: block;
    font-weight: 400;
    color: var(--texte-attenue);
}

/* ⭐ La phrase de l'échange : c'est ELLE qu'on lit, les faits sont le détail. */
.essai .recit {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
}

/* Le décor, dit une fois à l'ouverture et jamais répété. */
.essai .decor {
    margin: -1rem 0 1.4rem;
    color: var(--accent);
    font-size: 0.95rem;
    font-style: italic;
}

.essai .journal ul {
    margin: 0;
    padding-left: 1.1rem;
}

.essai .journal li {
    color: var(--texte-attenue);
    font-size: 0.85rem;
}
.essai .journal li.f-coup { color: var(--texte); }
.essai .journal li.f-assaut { color: #f0b0b6; }
.essai .journal li.f-decousue,
.essai .journal li.f-rupture,
.essai .journal li.f-victoire { color: var(--accent); }

.essai footer {
    margin-top: 2rem;
    border-top: 1px solid var(--bordure);
    padding-top: 1rem;
}

.essai footer form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.9rem;
}

.essai footer select,
.essai footer input,
.essai footer button {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--bordure);
    background: var(--fond-eleve);
    color: var(--texte);
    font: inherit;
}

.essai footer button {
    border-color: var(--accent);
    cursor: pointer;
}