/* Compte Xerus : le registre de Xerus, en une feuille.
   Fond noir de la charte, Kanit pour les titres, accent #fe1f58. Mobile
   d'abord ; au-delà de 900 px, un rail à gauche comme dans Congés.
   Aucune capitale forcée, aucune casse mono : la règle d'Otman du 03/09. */

:root {
  --noir: #0A0A0A;
  --surface: #151518;
  --surface-2: #1d1d21;
  --trait: #2a2a2f;
  --texte: #f5f5f7;
  --texte-2: #a0a0a8;
  --accent: #fe1f58;
  --accent-sombre: #c8123f;
  --ok: #2fbf71;
  --alerte: #f0a029;
  --danger: #ff4d5e;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-marque: 'Kanit', var(--police);
  --touche: 44px;
  --r: 12px;
  --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  --largeur-laterale: 220px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--noir); color: var(--texte);
  font: 400 16px/1.5 var(--police);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
h1 { font: 700 28px/34px var(--police-marque); margin: 0 0 var(--e-2); text-wrap: balance; }
h2 { font: 700 18px/24px var(--police-marque); margin: 0 0 var(--e-3); }
p { margin: 0 0 var(--e-3); }
a { color: inherit; }
code { font-family: inherit; }

.marque { font: 700 26px/30px var(--police-marque); margin: 0 0 var(--e-6); }
.marque .point { color: var(--accent); }
.phrase { color: var(--texte-2); margin-bottom: var(--e-5); }

/* ------------------------------------------------------------- la porte */
.porte {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: var(--e-8) var(--e-4) calc(var(--e-10) + env(safe-area-inset-bottom));
}
.porte-colonne { width: 100%; max-width: 420px; }

/* ---------------------------------------------------------------- page */
.page { min-height: 100dvh; display: flex; flex-direction: column; }
.onglets {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: var(--surface); border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}
.onglets .rail { display: none; }
.onglet {
  flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--texte-2); font-size: 14px; padding: 0 var(--e-2); text-align: center;
}
.onglet[aria-current="page"] { color: var(--accent); font-weight: 600; }
.contenu { flex: 1; padding: var(--e-5) var(--e-4) calc(72px + env(safe-area-inset-bottom)); max-width: 720px; width: 100%; margin: 0 auto; }
.entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-5); }
.qui { color: var(--texte-2); }

/* -------------------------------------------------------------- cartes */
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); padding: var(--e-4); margin-bottom: var(--e-4); }
.carte.accent { border-color: var(--accent); }
.carte-titre { color: var(--texte); }
.grille { display: flex; flex-direction: column; }
details.carte > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); min-height: var(--touche); }
details.carte > summary::-webkit-details-marker { display: none; }
details.carte[open] > summary { margin-bottom: var(--e-4); padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
details.carte[data-coupe] { opacity: .72; }

.liste { list-style: none; margin: 0; padding: 0; }
.ligne { display: flex; align-items: center; gap: var(--e-3); min-height: var(--touche); padding: var(--e-2) 0; border-top: 1px solid var(--trait); }
.ligne:first-child { border-top: 0; }
.lien-ligne { display: flex; align-items: center; gap: var(--e-3); width: 100%; text-decoration: none; min-height: var(--touche); }
.ligne-nom { font-weight: 600; overflow-wrap: break-word; }
.ligne-note { color: var(--texte-2); font-size: 14px; }
.chevron { margin-left: auto; color: var(--texte-2); font-size: 22px; }
.compteurs { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4); }
.compteurs dt { color: var(--texte-2); }
.compteurs dd { margin: 0; font-weight: 600; }

.pastille { display: inline-block; font-size: 13px; line-height: 20px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); }
.pastille.refusee { color: var(--danger); }
.pastille.attente { color: var(--alerte); }
.bandeau { background: var(--surface-2); border-left: 3px solid var(--ok); padding: var(--e-3) var(--e-4); border-radius: var(--r); margin-bottom: var(--e-4); }
.erreur { color: var(--danger); margin-bottom: var(--e-4); }

/* -------------------------------------------------------------- formes */
.forme { display: flex; flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-4); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > label, .etiquette { color: var(--texte-2); font-size: 15px; margin: 0; }
.champ input {
  width: 100%; min-height: 48px; padding: 0 var(--e-4);
  background: rgba(255,255,255,.06); color: var(--texte);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); font: inherit;
}
.champ input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cases { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.case { display: flex; align-items: center; gap: var(--e-2); min-height: var(--touche); }
.case input { width: 22px; height: 22px; accent-color: var(--accent); }
.proposition { color: var(--texte-2); }
.mot-de-passe { font-weight: 600; color: var(--texte); }
.mot-de-passe.grand { font: 700 26px/32px var(--police-marque); }
.actions { display: flex; flex-direction: column; gap: var(--e-3); }
.actions form { margin: 0; }
.aide-bas { color: var(--texte-2); font-size: 14px; text-align: center; margin-top: var(--e-4); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touche); padding: 0 var(--e-5); border-radius: 999px; border: 0;
  font: 600 16px/1 var(--police); text-decoration: none; cursor: pointer; width: 100%;
}
.bouton.principal { background: var(--accent); color: #fff; }
.bouton.principal:hover { background: var(--accent-sombre); }
.bouton.secondaire { background: var(--surface-2); color: var(--texte); border: 1px solid var(--trait); }
.bouton.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.bouton.accord { background: transparent; color: var(--ok); border: 1px solid var(--ok); }
.bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------- journal */
.ligne-journal { display: grid; gap: 2px var(--e-3); grid-template-columns: 1fr; padding: var(--e-2) 0; border-top: 1px solid var(--trait); }

/* ------------------------------------------------------------- bureau */
@media (min-width: 900px) {
  .page { display: grid; grid-template-columns: var(--largeur-laterale) minmax(0, 1fr); }
  .onglets {
    position: sticky; top: 0; height: 100dvh; flex-direction: column;
    border-top: 0; border-right: 1px solid var(--trait); padding: var(--e-5) var(--e-3);
  }
  .onglets .rail { display: block; padding: 0 var(--e-3); margin-bottom: var(--e-5); }
  .onglet { flex: 0 0 auto; justify-content: flex-start; padding: 0 var(--e-3); border-radius: var(--r); font-size: 15px; }
  .onglet[aria-current="page"] { background: rgba(254,31,88,.12); }
  .onglet.bas { margin-top: auto; }
  .contenu { padding: var(--e-8) var(--e-8) var(--e-10); max-width: 860px; }
  .contenu:has(.grille) { max-width: 1180px; }
  .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--e-4); align-items: start; }
  .grille .carte { margin: 0; }
  .ligne-journal { grid-template-columns: 170px 180px 1fr 1fr; }
}