/* =====================================================
   BRAVYXO — Sas (sas.html) et accueil public (index.html)  (V2, lot 6)
   Fond uni, logo seul, un geste. Valeurs : css/tokens.css. Composants : css/style.css.
   Aucune police téléchargée, aucune image lourde, aucune animation infinie.
   ===================================================== */

body { background: var(--bg); overflow-x: hidden; }

.bandeau-hors-reseau {
  position: sticky; top: 0; z-index: var(--z-bandeau);
  align-items: center; justify-content: center; gap: var(--sp-2);
  padding: calc(var(--sp-2) + var(--safe-haut)) var(--sp-4) var(--sp-2);
  background: var(--jaune-bg); color: var(--jaune-500); border-bottom: 1px solid var(--jaune-bord);
  font-size: var(--fs-15); font-weight: var(--fw-semibold); text-align: center;
}

.btn-theme-flottant {
  position: fixed; top: calc(var(--sp-3) + var(--safe-haut)); right: var(--sp-3); z-index: var(--z-eleve);
  width: var(--h-tactile); height: var(--h-tactile); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--bord-fort); color: var(--texte);
  transition: transform var(--d-instant) var(--ease-sortie);
}
.btn-theme-flottant:active { transform: scale(.92); }
:root[data-theme="soleil"] .btn-theme-flottant { border-width: 2px; }

/* ======================= SAS ======================= */
.sas {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--sp-8) + var(--safe-haut)) var(--gouttiere-mobile) calc(var(--sp-6) + var(--safe-bas));
}
.sas .boite { width: 100%; max-width: 380px; text-align: center; animation: sas-arrive var(--d-lent) var(--ease-sortie) both; }
@keyframes sas-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sas .logo-sas { height: 72px; width: auto; margin: 0 auto; display: block; }
.sas h1 { font: var(--fw-bold) var(--fs-24)/1.2 var(--police-titre); letter-spacing: var(--ls-titre); margin-top: var(--sp-6); }
.sas .aide { color: var(--texte-2); font-size: var(--fs-15); line-height: 1.45; margin-top: var(--sp-2); }

/* Points de saisie (comme le déverrouillage iPhone) */
.points { display: flex; justify-content: center; gap: var(--sp-3); min-height: 20px; margin: var(--sp-6) 0 var(--sp-2); flex-wrap: wrap; }
.points i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--texte-2); transition: background-color var(--d-instant), transform var(--d-instant) var(--ease-ressort); }
.points i.plein { background: var(--texte); border-color: var(--texte); transform: scale(1.08); }
.points.secoue { animation: secousse 300ms var(--ease-sortie); }

/* Champ code : caché en mode pavé (le pavé écrit dedans), visible en mode lettres */
#code {
  margin: var(--sp-5) 0 var(--sp-2); text-align: center;
  font: var(--fw-bold) var(--fs-24)/1.2 var(--police-mono); letter-spacing: .18em;
  min-height: var(--h-xl); -webkit-text-security: disc;
}
.mode-pave #code { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; min-height: 0; padding: 0; border: 0; }
.mode-lettres .points, .mode-lettres .pave { display: none; }
#code.secoue { animation: secousse 300ms var(--ease-sortie); }

.erreur {
  min-height: 1.45em; margin: var(--sp-2) 0 var(--sp-3);
  color: var(--rouge-500); font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.4;
}
.erreur:empty { min-height: 1.45em; }
.erreur.info { color: var(--texte-2); }

/* Pavé numérique maison : 12 touches rondes de 72 px */
.pave { display: grid; grid-template-columns: repeat(3, 72px); justify-content: center; gap: var(--sp-4) var(--sp-6); margin: var(--sp-2) 0 var(--sp-5); }
.touche {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord);
  font: var(--fw-medium) var(--fs-30)/1 var(--police-chiffre); font-variant-numeric: tabular-nums;
  transition: background-color var(--d-instant), transform var(--d-instant) var(--ease-sortie);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.touche:active, .touche.presse { background: var(--surface-inverse); color: var(--bg); transform: scale(.94); }
.touche.vide { visibility: hidden; }
.touche.efface { background: transparent; border-color: transparent; color: var(--texte-2); }
.touche.efface .ic { width: 28px; height: 28px; }
:root[data-theme="soleil"] .touche { border: 2px solid var(--bord-fort); }

#btn-entrer { min-height: var(--h-xl); font-size: var(--fs-17); }
.lien-mode {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h-tactile); margin-top: var(--sp-3); padding: 0 var(--sp-3);
  background: none; border: 0; color: var(--accent-texte); font-size: var(--fs-15); font-weight: var(--fw-semibold); cursor: pointer;
}
.lien-mode .ic { width: 20px; height: 20px; }

/* Premier usage : écran séparé */
.setup { text-align: left; animation: sas-arrive var(--d-lent) var(--ease-sortie) both; }
.setup .pastille { width: 64px; height: 64px; margin: var(--sp-6) auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-texte); }
.setup .pastille .ic { width: 30px; height: 30px; }
.setup h2 { font: var(--fw-bold) var(--fs-24)/1.2 var(--police-titre); text-align: center; margin: var(--sp-4) 0 var(--sp-2); }
.setup p { color: var(--texte-2); font-size: var(--fs-15); line-height: 1.5; text-align: center; margin-bottom: var(--sp-5); }
.setup label.champ { margin-bottom: var(--sp-4); }
.setup input { min-height: var(--h-lg); font-size: var(--fs-17); }
#setup-code { font: var(--fw-bold) var(--fs-24)/1.2 var(--police-mono); letter-spacing: .3em; text-align: center; }
.setup .btn + .btn { margin-top: var(--sp-2); }

.pied-sas { margin-top: auto; padding-top: var(--sp-7); color: var(--texte-3); font-size: var(--fs-13); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }

/* ======================= ACCUEIL PUBLIC ======================= */
.accueil {
  max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--sp-9) + var(--safe-haut)) var(--gouttiere-mobile) calc(var(--sp-7) + var(--safe-bas));
  display: flex; flex-direction: column;
}
.accueil .logo-accueil { height: 76px; width: auto; display: block; }
.accueil .hero { margin-top: var(--sp-7); font: var(--fw-heavy) 2.25rem/1.1 var(--police-titre); letter-spacing: -.025em; color: var(--texte); }
.accueil .hero em { font-style: normal; color: var(--accent-texte); }
.accueil .sous-hero { margin-top: var(--sp-4); color: var(--texte-2); font-size: var(--fs-17); line-height: 1.5; max-width: 36ch; }
.accueil .cta { margin-top: var(--sp-7); }
.accueil .cta .btn { min-height: var(--h-geant); font-size: var(--fs-20); border-radius: var(--r-lg); font-weight: var(--fw-heavy); }
.accueil .cta .btn .ic { width: 26px; height: 26px; }

.benefices { list-style: none; margin-top: var(--sp-7); display: grid; gap: var(--sp-3); }
.benefices li { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; padding: var(--sp-3) var(--sp-4); background: var(--surface-1); border: 1px solid var(--bord); border-radius: var(--r-lg); }
.benefices .ic-rond { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-texte); }
.benefices b { display: block; font-size: var(--fs-17); }
.benefices span.sous { color: var(--texte-2); font-size: var(--fs-15); }
:root[data-theme="soleil"] .benefices li { border: 2px solid var(--bord); }

.installer { margin-top: var(--sp-7); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px dashed var(--bord-fort); }
.installer h2 { display: flex; align-items: center; gap: var(--sp-2); font: var(--fw-semibold) var(--fs-17)/1.3 var(--police-titre); margin-bottom: var(--sp-3); }
.installer ol { padding-left: 0; list-style: none; counter-reset: etape; display: grid; gap: var(--sp-3); }
.installer li { counter-increment: etape; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-15); line-height: 1.4; }
.installer li::before {
  content: counter(etape); flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-inverse); color: var(--bg);
  font: var(--fw-bold) var(--fs-13)/1 var(--police-chiffre);
}
.installer .ic-inline { width: 20px; height: 20px; vertical-align: -4px; color: var(--accent-texte); }
.installer .btn { margin-top: var(--sp-4); }

.pied-accueil { margin-top: auto; padding-top: var(--sp-8); color: var(--texte-3); font-size: var(--fs-13); text-align: center; }

@media (min-width: 640px) {
  .accueil .hero { font-size: 2.75rem; }
}