/* doc-project | commande/v1/assets/css/base.css | Définit les variables globales et les styles de base de l’interface. | Expose: aucun | Dépend de: commande/v1/assets/img/bg.jpg | Impacte: apparence globale, layout, accessibilité visuelle | Tables: aucune */
:root{
  --bg: #0f0f10;
  --surface: rgba(255,255,255,.92);
  --surface2: rgba(255,255,255,.84);
  --text: #111;
  --muted: #666;
  --brand: #111111;
  --brand2: #b22222;
  --ok: #1b7f2a;
  --warn: #ff8800;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --tap: 52px;
  /* Layout reserves (global):
     - topbar base = 64px min-height + 10px top padding + 10px bottom padding
     - safe-area is added dynamically (iOS standalone can expose a non-zero inset) */
  --topbar-base: 84px;
}

/* Respecte l'attribut [hidden] même si un display est défini ailleurs (ex: .toast{display:flex}) */
[hidden]{
  display: none !important;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #000 url("../img/bg.jpg") center/cover no-repeat fixed;
}

/* Si ton image n'existe pas, fallback visuel propre */
body:before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 800px at 50% 10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.80));
  pointer-events:none;
}

.page{
  position:relative;
  min-height:100%;
  /* Ensure content never sits under the fixed topbar on iOS (safe-area inset varies,
     especially in "Ajouter à l’écran d’accueil" / standalone mode). */
  padding: calc(var(--topbar-base) + env(safe-area-inset-top, 0px)) 14px 92px; /* topbar + bottomNav */
}

.container{
  max-width: 740px;
  margin: 0 auto;
}

h1, h2, h3{
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

p{ margin: 0 0 10px; }
a{ color: inherit; text-decoration: none; }
button, input{
  font: inherit;
}

img{
  max-width:100%;
  display:block;
}

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}