/* Jetons de design : couleurs, typos, rythme. Modifier ici pour changer la charte. */
/* ============ Jetons ============ */
/* Les trois couleurs de marque sont relevées directement sur le logo : orchidée de l'ellipse,
   magenta du relief, rose pâle du lettrage. Tout le reste en découle. */
:root{
  box-sizing:border-box;
  /* Aucune réserve d'encoche ici : la page occupe tout l'écran, et ce sont
     l'en-tête et la barre du bas qui étendent leur fond sous le statut et
     sous la barre d'accueil de l'iPhone. C'est ce que font les vraies
     applications — et ça évite la bande noire sous la barre du bas. */

  /* Fonds : noir teinté prune, pour s'accorder au rose sans virer au gris froid */
  --bg:#0c0910;
  --bg-2:#120e18;
  --surface:#181320;
  --surface-2:#211a2c;
  --line:#2e2539;
  --line-2:#3f3450;

  /* Texte */
  --text:#f4eef7;
  --subtle:#bdb2c6;
  --muted:#8b8096;

  /* Marque : l'orchidée et le rose du logo ne servent qu'aux halos et au lettrage.
     Toute l'interface (onglets, jauges, boutons) est en violet, pour ne garder qu'une couleur active. */
  --brand:#df6de8;        /* orchidée du logo */
  --brand-light:#ffd7f0;  /* rose pâle du lettrage */
  --brand-deep:#7b0c84;   /* violet profond de l'ellipse */
  --brand-ink:#1a0a1e;
  --accent:#8936ff;       /* violet : couleur d'action */
  --accent-soft:#a95cf2;
  --accent-deep:#57189e;  /* rebord des boutons pressables */

  /* Raretés */
  --r-r:#39b8ff;
  --r-e:#a05cff;
  --r-l:#ffc73b;

  --display:'Archivo','Arial Black',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:16px;
  --radius-sm:12px;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
/* `dvh` mesure l'écran entier, encoches comprises. `height:100%` ne le fait pas
   toujours quand l'app tourne depuis l'écran d'accueil : la page s'arrêtait avant
   le bas, d'où la bande vide sous la barre. La règle en pourcentage reste en
   premier comme repli pour les navigateurs qui ignorent `dvh`. */
body{position:relative;height:100%;height:100dvh;margin:0;display:flex;flex-direction:column;color:var(--text);font-family:var(--body);font-size:15px;
  -webkit-tap-highlight-color:transparent;background:var(--bg);isolation:isolate}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:6px}
img{max-width:100%;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}