/* Firefit Longueuil — couleurs du logo : noir, rouge pompier, bandes jaunes réfléchissantes */
:root {
  --fond: #0b0b0d; --carte: #16161a; --carte2: #1e1e24; --ligne: #2a2a32; --texte: #f2f2f4; --pale: #9a9aa6;
  --rouge: #e3242b; --rouge-fonce: #a8151b; --jaune: #d8f03a; --vert: #3ddc84; --gris: #5a5a66;
  --haut: env(safe-area-inset-top); --bas: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.4 Inter, system-ui, sans-serif; }
body { min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.chargement { text-align: center; color: var(--pale); padding-top: 40vh; }
h1, .marque { font-family: "Barlow Condensed", sans-serif; font-weight: 700; margin: 0; }
h1 { font-size: 1.9rem; text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pale); margin: 22px 4px 8px; font-weight: 600; }
.aide { color: var(--pale); font-size: .84rem; margin: 10px 4px; }
.vide { color: var(--pale); text-align: center; padding: 28px 16px; }
.msg { color: #ff6b70; margin: 10px 0 0; font-size: .9rem; }
.bien { color: var(--vert); }

/* connexion */
.login { max-width: 400px; margin: 0 auto; padding: calc(36px + var(--haut)) 16px 40px; text-align: center; }
.login img { width: 190px; height: 190px; filter: drop-shadow(0 8px 30px #e3242b55); }
.login .sous { color: var(--pale); margin: 8px 0 22px; }
.login .carte { text-align: left; padding: 16px; }
.login .lien { display: block; margin: 16px auto 0; }

/* structure */
.haut { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--haut)) 16px 8px; background: #0b0b0dee; backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); }
.haut img { width: 38px; height: 38px; }
.haut .marque { font-size: 1.35rem; flex: 1; font-style: italic; font-weight: 800; letter-spacing: .02em; }
.haut .marque b { color: var(--rouge); }
.page { max-width: 600px; margin: 0 auto; padding: 14px 16px calc(96px + var(--bas)); }
.onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; background: #111114e6; backdrop-filter: blur(14px); border-top: 1px solid var(--ligne); padding-bottom: var(--bas); }
.onglets button { flex: 1; background: none; border: 0; padding: 8px 0 7px; font-size: .7rem; color: var(--pale); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.onglets .ico { font-size: 1.25rem; line-height: 1.3; }
.onglets .actif { color: var(--texte); }
.onglets .actif .ico { filter: drop-shadow(0 0 6px #e3242b); }
.titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 6px; }
.plus { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--rouge); color: #fff; font-size: 1.5rem; line-height: 1; flex: none; }
.retour { background: none; border: 0; color: var(--pale); padding: 6px 0; font-size: .95rem; }

/* éléments communs */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 14px; }
.carte + .carte { margin-top: 10px; }
label { display: block; font-size: .8rem; color: var(--pale); margin: 12px 0 5px; }
input, select, textarea { width: 100%; background: #0f0f12; border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; font-size: 16px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--rouge); }
textarea { resize: vertical; min-height: 80px; }
.primaire, .secondaire, .danger { display: block; width: 100%; border: 0; border-radius: 12px; padding: 13px; font-weight: 600; text-align: center; text-decoration: none; margin-top: 14px; }
.primaire { background: var(--rouge); color: #fff; }
.primaire:disabled { opacity: .5; }
.secondaire { background: var(--carte2); color: var(--texte); border: 1px solid var(--ligne); }
.danger { background: none; color: #ff6b70; border: 1px solid #5a2024; }
.lien { background: none; border: 0; color: var(--jaune); padding: 4px 0; font-size: .9rem; }
.rang { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deux label { margin-top: 12px; }
.case { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: .95rem; color: var(--texte); }
.case input { width: 22px; height: 22px; accent-color: var(--rouge); flex: none; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { border: 1px solid var(--ligne); background: var(--carte2); border-radius: 999px; padding: 8px 14px; font-size: .9rem; color: var(--texte); }
.puce.on { background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* événements */
.ev { display: block; width: 100%; text-align: left; color: inherit; cursor: pointer; }
.type { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; background: #2a2a32; color: #cfcfd8; }
.type.competition { background: var(--rouge); color: #fff; }
.ev .nom { font-family: "Barlow Condensed", sans-serif; font-size: 1.35rem; font-weight: 700; margin: 6px 0 2px; }
.ev .quand { font-size: .92rem; }
.ev .ou { color: var(--pale); font-size: .85rem; }
.ev .bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ev .compte { color: var(--pale); font-size: .82rem; }
.ev.passe .nom { color: var(--pale); } /* passé : titre pâle, mais tout reste lisible au soleil */
.inout { display: flex; gap: 6px; }
.inout button { min-width: 72px; min-height: 48px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--carte2); font-weight: 700; font-size: .9rem; color: var(--pale); }
.inout .in.on { background: var(--vert); border-color: var(--vert); color: #06210f; }
.inout .out.on { background: #3a3a44; border-color: #55555f; color: #fff; }
.inout.grand button { flex: 1; padding: 15px; font-size: 1.05rem; }
.statut { font-size: .82rem; color: var(--pale); }
.statut.in { color: var(--vert); }
.bande { height: 4px; border-radius: 4px; margin: -14px -14px 12px; background: repeating-linear-gradient(90deg, var(--jaune) 0 22px, #9aa0a6 22px 30px); opacity: .8; }
.detail { overflow: hidden; }
.detail .nom { font-family: "Barlow Condensed", sans-serif; font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin: 6px 0 8px; }
.info { display: flex; gap: 10px; margin: 8px 0; font-size: .95rem; }
.info .i { width: 22px; flex: none; text-align: center; }
.info a { color: var(--jaune); }
.notes { white-space: pre-wrap; color: #d6d6de; font-size: .95rem; margin-top: 10px; border-top: 1px solid var(--ligne); padding-top: 10px; }
.liste-noms { display: flex; flex-wrap: wrap; gap: 6px; }
.nomp { background: var(--carte2); border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 10px; font-size: .88rem; }
.nomp.in { border-color: #1f6b41; }
.gestion .ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.gestion .ligne:last-child { border-bottom: 0; }
.gestion .inout button { min-width: 48px; padding: 6px 8px; font-size: .8rem; }

/* temps */
.cat h3 { margin: 0 0 6px; font-size: .9rem; color: var(--jaune); text-transform: uppercase; letter-spacing: .06em; }
.cat + .cat { margin-top: 14px; }
.tps { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.tps:last-child { border-bottom: 0; }
.tps .pos { width: 26px; height: 26px; border-radius: 50%; background: var(--carte2); display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none; }
.tps .pos.p1 { background: var(--jaune); color: #111; }
.tps .qui { flex: 1; font-size: .92rem; }
.tps .qui small { display: block; color: var(--pale); font-size: .78rem; }
.tps .chrono { font-family: "Barlow Condensed", sans-serif; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tps .x { background: none; border: 0; color: var(--pale); font-size: 1.1rem; padding: 0; min-width: 44px; min-height: 44px; margin: -6px -8px -6px 0; display: grid; place-items: center; flex: none; } /* zone de 44 px pour le doigt */
.chrono-saisie { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 8px; align-items: center; }
.chrono-saisie input { font-family: "Barlow Condensed", sans-serif; font-size: 1.8rem; text-align: center; padding: 8px; }
.chrono-saisie span { font-size: 1.8rem; font-weight: 700; color: var(--pale); }
.record { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.record .carte { margin: 0; padding: 12px; }
.record .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pale); }
.record .val { font-family: "Barlow Condensed", sans-serif; font-size: 1.7rem; font-weight: 700; }
.record .nb { font-size: .76rem; color: var(--pale); }

/* équipe */
.membre { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; color: inherit; }
.membre:last-child { border-bottom: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--rouge-fonce); display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; }
.membre .n { flex: 1; }
.membre small { display: block; color: var(--pale); font-size: .78rem; }
.badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; background: var(--jaune); color: #111; }
.badge.gris { background: #33333b; color: #cfcfd8; }
.membre.retire { opacity: .5; }
.lien-copie { word-break: break-all; font-size: .8rem; background: #0f0f12; border: 1px dashed var(--ligne); border-radius: 10px; padding: 10px; color: var(--pale); }

#toast { position: fixed; left: 50%; bottom: calc(90px + var(--bas)); transform: translateX(-50%); background: #f2f2f4; color: #111; padding: 10px 16px; border-radius: 12px; font-size: .92rem; z-index: 20; max-width: 90vw; text-align: center; box-shadow: 0 8px 30px #0008; }