/* Popeck's Club — feuille de style unique.
   Conçue pour un téléphone tenu à une main, dans une pièce peu éclairée. */

:root {
    --fond:        #14171c;
    --fond-doux:   #191d24;
    --carte:       #1d2229;
    --carte-haut:  #232935;
    --bord:        #2b323d;
    --texte:       #e9ecf1;
    --doux:        #98a1b0;
    --faible:      #6d7785;
    --or:          #d9a441;
    --or-fond:     #3a2f16;
    --slip:        #c2708a;
    --slip-fond:   #3a2028;
    --vert:        #3f9b74;
    --vert-fond:   #163027;
    --chelem:      #a98bd6;
    --chelem-fond: #2a2340;
    --danger:      #d1626b;
    --rayon:       14px;
    --barre-h:     64px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom));
    overflow-wrap: break-word;
}

body.nu { padding-bottom: 0; display: grid; place-items: center; min-height: 100vh; }

a { color: inherit; text-decoration: none; }

/* ---------- En-tête ---------- */

.entete {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-top));
    background: rgba(20, 23, 28, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bord);
}

.marque { font-weight: 700; letter-spacing: .2px; }

.avatar {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--carte-haut); border: 1px solid var(--bord);
    font-size: 13px; font-weight: 700; color: var(--doux);
}

/* ---------- Page ---------- */

.page { max-width: 720px; margin: 0 auto; padding: 16px 16px 24px; }

h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 16px; margin: 26px 0 10px; color: var(--doux); font-weight: 600;
     text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: 15px; margin: 0 0 8px; }
/* Le titre d'une famille de trophées : « Sur les opens », « Partie par partie ». */
h3.section { margin: 20px 0 10px; font-size: 16px; }
h3.section .faible { display: block; font-size: 13px; font-weight: 400; margin-top: 2px; }

p { margin: 0 0 12px; }

.sous { color: var(--doux); font-size: 14px; }
.faible { color: var(--faible); }
.centre { text-align: center; }
.vide { color: var(--faible); padding: 22px 4px; text-align: center; }

/* ---------- Cartes et listes ---------- */

.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 16px;
    margin-bottom: 12px;
}

.liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.ligne {
    display: flex; align-items: center; gap: 12px;
    background: var(--carte); border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 12px 14px;
    min-height: 56px;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ligne .nom { font-weight: 600; }
.ligne .droite { margin-left: auto; text-align: right; white-space: nowrap; }

.rang {
    width: 30px; flex: none; text-align: center;
    font-variant-numeric: tabular-nums; font-weight: 700; color: var(--doux);
}
.rang.or   { color: var(--or); }
.rang.slip { color: var(--slip); }

.pastille {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.pastille.or   { background: var(--or-fond);   color: var(--or); }
.pastille.slip { background: var(--slip-fond); color: var(--slip); }
.pastille.vert { background: var(--vert-fond); color: var(--vert); }
.pastille.gris { background: var(--carte-haut); color: var(--doux); }
/* Le grand chelem : ni or ni slip, une couleur à lui pour qu'on le repère
   d'un coup d'œil dans une liste d'opens. */
.pastille.chelem { background: var(--chelem-fond); color: var(--chelem); }

/* Le numéro d'un open, en tête de ligne comme un dossard. Chiffres tabulaires
   et largeur plancher : la colonne reste droite de 1 à 999. */
.numero-open {
    flex: none; min-width: 2.2ch; text-align: right;
    font-variant-numeric: tabular-nums; font-weight: 700;
    font-size: 13px; color: var(--faible);
}

.pts { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Le détail qui se déplie au tap */
details.ligne-pliable { border: 1px solid var(--bord); border-radius: var(--rayon);
                        background: var(--carte); margin-bottom: 8px; }
details.ligne-pliable > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; min-height: 56px; cursor: pointer; list-style: none;
}
details.ligne-pliable > summary::-webkit-details-marker { display: none; }
details.ligne-pliable[open] > summary { border-bottom: 1px solid var(--bord); }
.detail { padding: 12px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.detail div { font-size: 13px; color: var(--doux); }
.detail strong { display: block; font-size: 17px; color: var(--texte); font-variant-numeric: tabular-nums; }

/* ---------- Podium ---------- */

.podium { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.podium .bloc { border-radius: var(--rayon); padding: 14px; border: 1px solid var(--bord); }
.podium .bloc.bracelet { background: linear-gradient(160deg, #2a2415, var(--carte)); border-color: #4a3c1c; }
.podium .bloc.slip     { background: linear-gradient(160deg, #2a1a20, var(--carte)); border-color: #4a2a34; }
.podium .quoi { font-size: 12.5px; color: var(--doux); margin-bottom: 6px; }
.podium .qui  { font-size: 19px; font-weight: 700; }

/* ---------- Boutons et formulaires ---------- */

.bouton, button, input[type=submit] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 18px;
    border-radius: 12px; border: 1px solid var(--bord);
    background: var(--carte-haut); color: var(--texte);
    font: inherit; font-weight: 600; cursor: pointer;
}
.bouton.plein, button.plein { background: var(--vert); border-color: var(--vert); color: #06110c; }
.bouton.large, button.large { width: 100%; }
.bouton.discret { background: none; min-height: 40px; padding: 0 12px; color: var(--doux); font-weight: 500; }
.bouton.danger, button.danger, .danger { color: var(--danger); }
button:disabled { opacity: .45; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

label { display: block; font-size: 13px; color: var(--doux); margin: 14px 0 6px; }

input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
    width: 100%; min-height: 48px; padding: 10px 12px;
    background: var(--fond-doux); color: var(--texte);
    border: 1px solid var(--bord); border-radius: 12px;
    font: inherit;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vert); outline-offset: 1px; }

.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.case {
    display: flex; align-items: center; gap: 10px;
    padding: 12px; border: 1px solid var(--bord); border-radius: 12px;
    background: var(--carte); cursor: pointer;
}
.case input { width: 20px; height: 20px; min-height: 0; accent-color: var(--vert); }
.case:has(input:checked) { border-color: var(--vert); background: var(--vert-fond); }

.message { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 14.5px; }
.message.info   { background: var(--carte-haut); border: 1px solid var(--bord); }
.message.succes { background: var(--vert-fond); border: 1px solid #24513e; color: #a5e3c6; }
.message.erreur { background: #3a1f22; border: 1px solid #5c2c31; color: #f0b6ba; }

/* ---------- Barre de navigation basse ---------- */

.barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(20, 23, 28, .95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--bord);
    padding-bottom: env(safe-area-inset-bottom);
}
.barre a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: var(--barre-h); color: var(--faible); font-size: 11px;
}
.barre a.actif { color: var(--texte); }
.barre a.actif .icone { transform: translateY(-1px); filter: none; }
.barre .icone { font-size: 21px; line-height: 1; filter: grayscale(.5) opacity(.75); }
.barre a.actif .icone { filter: none; }

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

.connexion { width: min(400px, calc(100vw - 32px)); padding: 28px 24px; text-align: center; }
.connexion .logo { font-size: 44px; }
.connexion h1 { margin: 8px 0 4px; }
.connexion form { text-align: left; margin-top: 18px; }

/* ---------- Saisie d'un tournoi ---------- */

.encore { display: flex; flex-direction: column; gap: 10px; }

.joueur-tap {
    display: flex; align-items: center; gap: 12px;
    min-height: 62px; padding: 14px 16px;
    background: var(--carte-haut); border: 1px solid var(--bord);
    border-radius: var(--rayon); color: var(--texte);
    font: inherit; font-size: 17px; font-weight: 600; text-align: left; width: 100%;
    cursor: pointer;
}
.joueur-tap:active { transform: scale(.985); background: var(--vert-fond); border-color: var(--vert); }
.joueur-tap .tap { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--faible);
                   text-transform: uppercase; letter-spacing: .08em; }

.elimine { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
           border-bottom: 1px solid var(--bord); font-size: 15px; }
.elimine:last-child { border-bottom: 0; }
.elimine .place { width: 34px; color: var(--doux); font-variant-numeric: tabular-nums; }

.barre-bas {
    position: sticky; bottom: calc(var(--barre-h) + 8px); z-index: 10;
    padding-top: 10px;
}

/* ---------- Divers ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--bord); }
th { color: var(--doux); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

.onglets { display: flex; gap: 6px; background: var(--carte); padding: 4px;
           border: 1px solid var(--bord); border-radius: 12px; margin-bottom: 14px; }
.onglets a { flex: 1; text-align: center; padding: 10px 6px; border-radius: 9px;
             color: var(--doux); font-weight: 600; font-size: 14px; }
.onglets a.actif { background: var(--carte-haut); color: var(--texte); }

/* ---------- Trophées et chiffres du club ---------- */

.trophee { margin-bottom: 0; }
.trophee .tete { display: flex; align-items: center; gap: 12px; }
.trophee .emoji { font-size: 28px; line-height: 1; }
.trophee .quoi { font-size: 12.5px; color: var(--doux); text-transform: uppercase;
                 letter-spacing: .06em; }
.trophee .qui  { font-size: 19px; font-weight: 700; display: block; }
/* À égalité, tout le monde est nommé : on resserre pour que ça tienne. */
.trophee .qui.plusieurs { font-size: 16px; line-height: 1.25; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chiffre {
    background: var(--carte); border: 1px solid var(--bord);
    border-radius: var(--rayon); padding: 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.chiffre .emoji { font-size: 20px; line-height: 1; margin-bottom: 4px; }
.chiffre strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.chiffre .quoi { font-size: 13px; color: var(--doux); }
.chiffre .faible { font-size: 12px; }

.note { font-size: 13px; color: var(--doux); background: var(--fond-doux);
        border-left: 3px solid var(--or); padding: 8px 12px; border-radius: 0 8px 8px 0; margin: 8px 0; }

hr { border: 0; border-top: 1px solid var(--bord); margin: 20px 0; }

/* Écran large : la barre passe en haut, le reste ne change pas. */
@media (min-width: 760px) {
    body { padding-bottom: 24px; }
    .barre {
        position: sticky; top: 0; bottom: auto;
        max-width: 720px; margin: 12px auto 0;
        border: 1px solid var(--bord); border-radius: var(--rayon);
    }
    .barre a { flex-direction: row; gap: 8px; height: 54px; font-size: 14px; }
    .detail { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Le saviez-vous ? ---------- */

.anecdote {
    background: linear-gradient(160deg, #232a1c, var(--carte));
    border-color: #3c4a2c;
}
.anecdote .quoi { font-size: 12.5px; color: var(--doux); text-transform: uppercase;
                  letter-spacing: .06em; margin-bottom: 8px; }
.anecdote p { font-size: 16px; line-height: 1.5; }

/* ---------- Le joueur qui a quitté la table ---------- */

.ligne.parti .nom { opacity: .55; text-decoration: line-through; }

/* ---------- Chrono des blinds ---------- */

.chrono {
    background: linear-gradient(160deg, #1b2531, var(--carte));
    border-color: #2f3f52;
    margin-bottom: 14px;
}
.chrono-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.chrono-tete .quoi { font-size: 12.5px; color: var(--doux); text-transform: uppercase;
                     letter-spacing: .06em; }
.chrono-etat { font-size: 12.5px; margin-left: auto; }
.chrono-temps {
    font-size: 54px; font-weight: 700; line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; margin: 2px 0 10px;
}
.chrono-commandes { display: flex; align-items: center; gap: 8px; }
.chrono-commandes input[type=number] { width: 74px; margin: 0; text-align: center; }
.chrono-commandes label { font-size: 12.5px; }
.chrono-commandes .bouton { margin-left: auto; }

.chrono.court .chrono-temps { color: var(--or); }
.chrono.fini {
    border-color: var(--danger);
    background: linear-gradient(160deg, #3a1d22, var(--carte));
    animation: sonnerie 1s ease-in-out 6;
}
.chrono.fini .chrono-temps { color: var(--danger); }
.chrono.fini .chrono-etat { color: var(--danger); font-weight: 600; }

@keyframes sonnerie {
    0%, 100% { border-color: var(--danger); }
    50%      { border-color: var(--or); }
}

@media (prefers-reduced-motion: reduce) {
    .chrono.fini { animation: none; }
}

.chrono-son { margin-top: 10px; border-color: var(--or); color: var(--or); }
.chrono .faible { line-height: 1.35; }

/* ---------- Le jeton du matricule, dans l'annuaire ---------- */

.jeton {
    display: inline-grid; place-items: center;
    /* Dans l'annuaire, la liste pose --jeton = longueur du plus long matricule :
       toutes les pastilles prennent alors la même largeur, celle de la plus
       grande. Ailleurs la variable n'existe pas, le jeton s'ajuste à son texte
       et garde son plancher de 38 px. */
    min-width: max(38px, var(--jeton, 0) * 1ch + 24px);
    height: 34px; padding: 0 11px;
    border-radius: 17px;
    background: var(--carte-haut); border: 1px solid var(--bord);
    font-size: 13px; font-weight: 700; color: var(--doux);
    white-space: nowrap; flex: 0 0 auto;
}

/* ---------- Le cadre d'identité de la fiche joueur ---------- */

.identite .tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.identite h1 { margin: 0; font-size: 24px; }
.identite .sous { margin: 6px 0 0; }

/* ---------- Human Design ---------- */

.hd-corps { display: flex; gap: 16px; align-items: flex-start; }
.bodygraph { width: 132px; flex: 0 0 132px; height: auto; }
.hd-resume { flex: 1; display: grid; gap: 8px; min-width: 0; }
.hd-resume > div { display: flex; flex-direction: column; gap: 1px; }
.hd-resume .quoi { font-size: 11.5px; color: var(--faible);
                   text-transform: uppercase; letter-spacing: .05em; }
.hd-resume strong { font-size: 15px; line-height: 1.25; }

.hd-portes { display: flex; gap: 14px; margin-top: 10px; }
.hd-portes .colonne { flex: 1; min-width: 0; }
.hd-portes .titre { font-size: 11.5px; color: var(--faible); text-transform: uppercase;
                    letter-spacing: .05em; margin-bottom: 4px; }
.hd-portes .colonne > div { display: flex; justify-content: space-between;
                            gap: 6px; font-size: 13px; padding: 2px 0;
                            border-bottom: 1px solid var(--bord); }
.hd-portes .colonne > div span { color: var(--doux); white-space: nowrap;
                                 overflow: hidden; text-overflow: ellipsis; }
.hd-portes .colonne > div b { font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
    .hd-corps { flex-direction: column; align-items: center; }
    .bodygraph { width: 160px; flex-basis: auto; }
    .hd-resume { width: 100%; grid-template-columns: 1fr 1fr; }
}