/* =====================================================
   style.css — Feuille de style commune du Pokédex
   Look "fiche épurée" : sobre, lisible, responsive.
   ===================================================== */

:root {
    --rouge:   #d43a3a;   /* rouge Pokédex */
    --sombre:  #1c1e26;
    --fond:    #f2efe9;
    --carte:   #ffffff;
    --texte:   #26282f;
    --gris:    #8a8d98;
    --vert:    #2e9e5b;
    --bordure: #d8d4cb;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
}

/* Bandeau supérieur façon capot de Pokédex */
header.pokedex {
    background: var(--rouge);
    color: #fff;
    padding: 1rem 1.25rem;
    border-bottom: 6px solid #a92c2c;
    display: flex;
    align-items: center;
    gap: .75rem;
}
header.pokedex .lentille {           /* la "diode" bleue du Pokédex */
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #bfe9ff, #2f7fd4 70%);
    border: 3px solid #fff;
    flex: none;
}
header.pokedex h1 {
    font-size: 1.15rem;
    margin: 0;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: "Consolas", "Menlo", monospace;
}
header.pokedex a { color: #ffd9d9; font-size: .85rem; margin-left: auto; }

main { max-width: 720px; margin: 0 auto; padding: 1.25rem; }

/* Fiches (cartes) */
.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.carte h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.carte p  { margin: .25rem 0; color: #4a4d57; font-size: .95rem; }

.badge {
    display: inline-block;
    font-size: .75rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-weight: 600;
}
.badge.ouverte { background: #dcf3e4; color: var(--vert); }
.badge.fermee  { background: #eee;    color: var(--gris); }

a.btn, button.btn {
    display: inline-block;
    background: var(--rouge);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .55rem 1.1rem;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    margin-top: .5rem;
}
a.btn:hover, button.btn:hover { background: #b93030; }
button.btn.gris { background: var(--gris); }

input[type=text], input[type=password] {
    width: 100%;
    max-width: 260px;
    padding: .55rem .7rem;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font-size: 1.1rem;
    font-family: "Consolas", "Menlo", monospace;
    letter-spacing: .2em;
}

.msg        { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .95rem; }
.msg.ok     { background: #dcf3e4; color: #1d6b3d; }
.msg.erreur { background: #fde2e2; color: #8f1f1f; }
.msg.info   { background: #e2ecfa; color: #234a7d; }

.code-cadenas {
    font-family: "Consolas", "Menlo", monospace;
    font-size: 2.2rem;
    letter-spacing: .35em;
    background: var(--sombre);
    color: #ffd75e;
    padding: .5rem 1rem .5rem 1.35rem;
    border-radius: 10px;
    display: inline-block;
}

table.historique { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.historique th, table.historique td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--bordure);
    text-align: center;
}
table.historique th { background: #eceae4; }
.pion { font-size: 1.05rem; letter-spacing: .15em; }

footer { text-align: center; color: var(--gris); font-size: .8rem; padding: 1.5rem 0; }

@media (max-width: 480px) {
    main { padding: .9rem; }
    .code-cadenas { font-size: 1.7rem; }
}