/* NiveauZero — styles de la COQUE, posés PAR-DESSUS app/styles/tokens.css (identité validée, chargée avant ce fichier).
   Ce fichier ne redéfinit AUCUNE couleur des tokens : il n'ajoute que des alias pour les anciens noms du socle,
   la mise en page (gouttière 16 px, zones sûres iPhone et Telegram), la barre d'onglets des maquettes et quelques
   composants partagés (.ecran .entete .carte-titre .ligne .pile .etapes .champ .code .note .vide .toast .badge-demo). */

:root {
  color-scheme: dark;
  /* alias des anciens noms du socle → tokens validés */
  --trait: var(--bord);
  --texte-3: var(--muet-2);
  --pro: var(--ok);
  --noc: var(--ko);
  --gri: var(--or);
  --rival: var(--bleu);
  --police-chiffres: var(--chiffres);
  --rayon-petit: var(--rayon-s);
  --barre-onglets: var(--haut-nav);
  --fond-nav: #171312;          /* fond de la barre d'onglets des maquettes (Main.dc.html) : absent des tokens */

  /* zones sûres de l'iPhone (encoche, barre d'accueil) ; Telegram les remplace (app/telegram.js) */
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
  --gauche: env(safe-area-inset-left, 0px);
  --droite: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font-size: 15px; line-height: 1.45;
  overflow-x: hidden;              /* jamais de défilement horizontal */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
img, svg { max-width: 100%; }
a { color: var(--feu-3); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }

/* ------------------------------------------------------------ coque */
#vue {
  padding: calc(var(--haut) + 12px) calc(var(--droite) + var(--gouttiere))
           calc(var(--bas) + var(--haut-nav) + 20px) calc(var(--gauche) + var(--gouttiere));
  max-width: 640px;
  margin: 0 auto;
}
#vue:focus { outline: none; }

/* barre d'onglets : copie de la maquette Main.dc.html (78 px, 5 onglets, icônes 24 px, libellés 11 px) */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; min-height: var(--haut-nav);
  padding: 8px calc(var(--droite) + 8px) calc(var(--bas) + 4px) calc(var(--gauche) + 8px);
  background: var(--fond-nav);
  border-top: 1px solid var(--piste);
}
.onglets a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 52px; color: var(--muet); text-decoration: none; font-size: 11px; font-weight: 500;
}
.onglets a svg { width: 24px; height: 24px; }
.onglets a[aria-current="page"] { color: var(--feu); font-weight: 600; }

/* ------------------------------------------------------------ composants partagés */
.ecran { display: flex; flex-direction: column; gap: 14px; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titre { font-family: var(--chiffres); font-weight: 700; font-size: 38px; line-height: 1; margin: 0; }
h2 { font-family: var(--chiffres); font-weight: 700; font-size: 22px; margin: 6px 0 0; }
h3 { font-size: 15px; margin: 0; font-weight: 700; }
.carte { min-width: 0; }
.carte.accent { border-color: var(--feu); }
.carte.succes { border-color: var(--ok-bord); background: var(--ok-fond); }
.carte.alerte { border-color: var(--ko-bord); background: var(--ko-fond); }
.carte.rival  { border-color: var(--bleu); }
.carte-titre { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--muet); text-transform: uppercase; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grille-2 > * { min-width: 0; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ligne > * { min-width: 0; }
.pile { display: flex; flex-direction: column; gap: 8px; }
.texte-2 { color: var(--texte-2); }
.texte-3 { color: var(--muet-2); font-size: 13px; }
.pro { color: var(--ok); } .noc { color: var(--ko); } .gri { color: var(--or); } .feu { color: var(--feu); } .rival-c { color: var(--bleu); }
.pastille { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: normal; }
.badge-demo { color: var(--bleu); border-color: var(--bleu); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; max-width: 100%; }
.bouton.secondaire { background: transparent; color: var(--texte); border: 1px solid #4a403b; font-weight: 600; } /* = .bouton.discret des tokens */
.bouton.petit { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.bouton.large { width: 100%; }
.bouton:disabled { opacity: 0.45; }
.bouton:active { transform: scale(0.98); }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 13px; color: var(--muet); font-weight: 600; }
.champ input, .champ textarea, .champ select {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--carte-2); font-size: 16px; /* 16 px : pas de zoom iOS */
}
.champ textarea { min-height: 90px; resize: vertical; }
.code {
  display: block; width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  font: 13px/1.4 ui-monospace, Menlo, monospace; background: var(--fond); border: 1px solid var(--bord);
  border-radius: 10px; padding: 10px 12px; color: var(--feu-3);
}
.note { font-size: 13px; color: var(--muet); margin: 0; }
.vide { border: 1px dashed var(--bord); border-radius: var(--rayon); padding: 22px 16px; text-align: center; color: var(--muet-2); }

/* étapes cochables (onboarding, installation) */
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.etape { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.etape .rond {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--carte-2); border: 1px solid var(--bord); font-weight: 700; color: var(--muet); font-size: 14px;
  font-family: var(--chiffres);
}
.etape.faite .rond { background: var(--ok); color: var(--sur-feu); border-color: transparent; }
.etape .corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
details.carte > summary { cursor: pointer; list-style: none; min-height: 44px; }
details.carte > summary::-webkit-details-marker { display: none; }

/* lignes de menu (écran Plus, Réglages) */
.menu { display: flex; flex-direction: column; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.menu a, .menu .entree {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px;
  color: var(--texte); text-decoration: none; border-top: 1px solid var(--bord-2);
}
.menu > :first-child { border-top: 0; }
.menu .icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--carte-2); color: var(--feu); flex: none; }
.menu .icone svg { width: 20px; height: 20px; }
.menu .texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu .texte small { color: var(--muet); font-size: 12px; }
.menu .chevron { color: var(--muet-2); }
.menu a.indispo { opacity: 0.5; }
.interrupteur { display: inline-flex; border: 1px solid var(--bord); border-radius: 999px; overflow: hidden; flex: none; }
.interrupteur button { border: 0; background: transparent; color: var(--muet); padding: 8px 12px; min-height: 40px; font-size: 13px; font-weight: 600; }
.interrupteur button[aria-pressed="true"] { background: var(--feu); color: var(--sur-feu); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bas) + var(--haut-nav) + 14px); z-index: 20;
  transform: translateX(-50%); max-width: calc(100% - 32px);
  background: var(--carte-2); border: 1px solid var(--bord); border-radius: 14px;
  padding: 10px 16px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  animation: toast-in 0.2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* face-à-face provisoire */
.joueur { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 24px; background: var(--carte-2); border: 3px solid var(--feu); font-family: var(--chiffres); }
.avatar.rival { border-color: var(--bleu); }

/* illustrations de l'installation (dessins iOS simplifiés) */
.illus { display: block; width: 100%; max-width: 320px; margin: 0 auto; height: auto; }

/* Telegram Mini App : Telegram fournit sa barre et son bouton retour */
.tg #vue { padding-top: calc(var(--haut) + 8px); }
.tg .seulement-hors-telegram { display: none !important; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (min-width: 700px) { .onglets { left: 50%; right: auto; width: 640px; transform: translateX(-50%); } }
/* rond cochable de l'onboarding : zone tactile 44 px */
.etape { grid-template-columns: 44px 1fr; }
button.rond { width: 44px !important; height: 44px !important; padding: 0; font-size: 15px !important; }