* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #F7F5F2;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #231F20;
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari peut laisser la page défiler horizontalement si un élément
     dépasse brièvement la largeur d'écran (ex. focus clavier sur un champ),
     et conserve ce scroll après un reload — d'où la mise en page qui
     apparaît "décalée à droite" après édition d'un produit. */
  overflow-x: hidden;
}
a { color: #00CCFF; text-decoration: none; }
a:hover { color: #EC1D78; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Containing block des sheets (position:fixed) : ancré ici, un sheet
     couvre tout l'écran (y compris la barre Reset/Liste) sans dépendre du
     scroll interne à .app-main. */
  transform: translateZ(0);
}

.app-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  gap: 8px;
  border-bottom: 1px solid #EC1D78;
}
.app-header img.brand { height: 30px; width: auto; display: block; }
.brand-wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; display: flex; align-items: center; }
.brand-emoji { font-size: 20px; margin-right: 6px; }
.brand-blue { color: #00CCFF; }
.brand-lagoon { color: #EC1D78; }
.app-header .header-actions { display: flex; align-items: center; gap: 8px; }
.header-btn {
  display: flex; align-items: center; gap: 6px;
  border: none; border-radius: 20px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; color: #FFFFFF;
  background: #EC1D78; text-decoration: none;
}
.header-icon-btn {
  width: 29px; height: 29px; border-radius: 50%; background: #EC1D78;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.header-icon-btn-blue { background: #00CCFF; }

.app-main { flex: 1; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }
.app-main.scroll-locked { overflow: hidden; }

.bottom-nav {
  flex: none; display: flex; border-top: 1px solid #EC1D78; padding: 10px 0 14px;
  background: #FFFFFF;
  /* Reste au-dessus du sheet (z-index 6) : un sheet ouvert vient donc se
     glisser pile jusque sous la navbar, jamais par-dessus (report Julien :
     "collé à la navbar du bas comme avant"). */
  position: relative; z-index: 7;
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; color: #B9B4AC; font-size: 10.5px; font-weight: 600;
}
.bottom-nav a.active { color: #EC1D78; font-weight: 700; }

.sheet-overlay {
  position: fixed; inset: 0; background: rgba(35,31,32,0.42); z-index: 5;
}
.sheet {
  /* bottom réservé à la hauteur de la navbar (mesurée en JS, --nav-h) : sans
     ça, le bas du sheet se rend derrière la navbar (z-index supérieur) et
     reste inatteignable même en scrollant à fond dedans (report Julien :
     "on arrive au début des 2 boutons"). */
  position: fixed; left: 0; right: 0; bottom: var(--nav-h, 64px); max-height: 90%; z-index: 6;
  box-shadow: 0 -10px 30px rgba(35,31,32,0.18);
  background: #FFFFFF; border-radius: 20px 20px 0 0;
  overflow-y: auto;
}
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #00000022; margin: 10px auto; }

.btn-primary {
  height: 50px; border-radius: 14px; border: none; background: #EC1D78; color: #FFFFFF;
  font-size: 14.5px; font-weight: 700;
}
.btn-secondary {
  height: 46px; border-radius: 12px; border: 1.5px solid #ECE9E4; background: #FFFFFF;
  color: #77726B; font-size: 14px; font-weight: 700;
}
.btn-outline-cyan {
  height: 46px; border-radius: 12px; border: 1.5px solid #00CCFF; background: #FFFFFF;
  color: #036685; font-size: 14px; font-weight: 700;
}

.login-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 40px; gap: 28px;
}
.login-screen img { width: 150px; height: auto; }
.login-screen form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.login-screen input {
  height: 50px; border-radius: 12px; border: 1.5px solid #ECE9E4; padding: 0 16px;
  font-size: 16px; color: #231F20; width: 100%;
}
.login-error { color: #EC1D78; font-size: 13px; text-align: center; }