/* style-mobile.css - Design mobile pour NutrisGo */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --navy: #1e3a5f;
  --yellow: #f4d03f;
  --light-blue: #d6e4f5;
  --cream: #f5f3ed;
  --text-dark: #2c3e50;
  --text-muted: #7f8c8d;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--cream);
  color: var(--text-dark);
  padding-bottom: 80px; /* Espace pour le menu sticky */
}

/* === HEADER === */
.mobile-header {
  background-color: white;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-header .logo {
  height: 40px;
  /* Recommandation : logo 200x60px */
}

/* === BANNIÈRE PROMOTIONNELLE === */
.promo-banner {
  width: 90%;
  max-width: 600px;
  margin: 16px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.promo-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (min-width: 768px) {
  .promo-banner {
    max-width: 700px;
    margin: 20px auto;
  }
}

/* === ZONE === */
.zone-mobile {
  width: 90%;
  max-width: 600px;
  margin: 16px auto;
  border-radius: 12px;
}

/* Responsive */
@media (min-width: 768px) {
  .zone-mobile {
    max-width: 700px;
    margin: 20px auto;
  }
}

/* === SECTION JOURNÉE === */
.day-section {
  background-color: var(--light-blue);
  padding: 20px 16px;
  margin-top: 16px;
}

.day-section h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  color: var(--text-dark);
}

.meal-card {
  background-color: var(--navy);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  color: white;
  transition: transform 0.2s;
}

.meal-card:hover {
  transform: translateY(-2px);
}

.meal-card-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.meal-icon {
  width: 50px;
  height: 50px;
  /* Recommandation : icônes repas 100x100px (format PNG transparent) */
}

.meal-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: white;
}

.go-button {
  background-color: var(--yellow);
  color: var(--navy);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  border: none;
  flex-shrink: 0;
}

/* === SECTION AIDE === */
.help-section {
  padding: 20px 16px;
}

.help-section h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  color: var(--text-dark);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.help-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.2s;
}

.help-card:hover {
  transform: translateY(-2px);
}

.help-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  /* Recommandation : icônes aide 120x120px (format PNG transparent) */
}

.help-card p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}

/* === SECTION COACH === */
.coach-section {
  background-color: var(--light-blue);
  padding: 20px 16px;
  margin-top: 16px;
}

.coach-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.coach-text h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--text-dark);
}

.coach-text p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px 0;
  color: var(--text-dark);
}

.coach-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  /* Recommandation : photo coach 160x160px (format JPG/PNG) */
}

.discover-btn {
  background-color: var(--navy);
  color: white;
  padding: 14px 32px;
  border-radius: 25px;
  border: none;               /* OK même si inutile sur <a> */
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s;

  display: inline-block;      /* important pour que padding/border-radius rendent bien */
  text-decoration: none!important;      /* enlève le soulignement */
}

.discover-btn:hover {
  background-color: #142a47;
  color: white;               /* évite qu’un navigateur change la couleur au hover */
}

/* optionnel mais recommandé : style clavier */
.discover-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

/* === MENU NAVIGATION STICKY === */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 500;
  transition: color 0.2s;
  flex: 1;
}

.nav-item.active {
  color: var(--navy);
  font-weight: 600;
}

.nav-item:hover {
  color: var(--navy);
}

.nav-icon {
  width: 28px;
  height: 28px;
  /* Recommandation : icônes menu 56x56px (format PNG transparent) */
}

/* === PAGE PROGRAMME === */
.program-header {
  background-color: white;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.program-header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}

.back-btn {
  position: absolute;
  left: 0;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.back-icon {
  width: 24px;
  height: 24px;
  /* Recommandation : icône retour 48x48px */
}

.program-header h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.date-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.date-nav-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.date-nav-icon {
  width: 20px;
  height: 20px;
  /* Recommandation : flèches 40x40px */
}

.current-date {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  min-width: 160px;
  text-align: center;
}

.calendar-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.calendar-icon {
  width: 28px;
  height: 28px;
  /* Recommandation : icône calendrier 56x56px */
}

/* === CALENDRIER OVERLAY === */
.calendar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
}

.calendar-overlay.active {
  display: block;
}

.calendar-popup {
  background-color: white;
  margin: 80px 16px 16px;
  border-radius: 16px;
  padding: 20px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.calendar-header {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-input-group {
  flex: 1;
}

.calendar-input-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.calendar-input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

.load-day-btn {
  background-color: var(--yellow);
  color: var(--navy);
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  margin-bottom: 16px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day-header {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 8px 4px;
  color: var(--text-muted);
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  background-color: white;
  border: 1px solid #e0e0e0;
}

.calendar-day.has-meals {
  background-color: var(--navy);
  color: white;
  border-color: var(--navy);
}

.calendar-day.has-meals::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background-color: var(--yellow);
  border-radius: 50%;
}

/* === ONGLETS REPAS === */
.meal-tabs {
  display: flex;
  gap: 8px;
  padding: 16px;
  overflow-x: auto;
}

.meal-tab {
  background-color: var(--yellow);
  color: var(--navy);
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.7;
}

.meal-tab.active {
  opacity: 1;
  background-color: var(--navy);
  color: var(--yellow);
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
}

.meal-tab:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* === SECTION RECHERCHE === */
.search-section {
  background-color: var(--light-blue);
  padding: 16px;
}

.search-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  background-color: white;
  border-radius: 8px;
  padding: 4px;
}

.search-tab {
  flex: 1;
  background-color: transparent;
  color: var(--text-dark);
  padding: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.search-tab.active {
  background-color: var(--navy);
  color: white;
}

.search-bar {
  display: flex;
  gap: 8px;
}

.search-input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
}

.search-btn {
  background-color: var(--yellow);
  color: var(--navy);
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* === SUGGESTIONS === */
.suggestions-section {
  padding: 16px;
}

.suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.suggestions-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.refresh-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.suggestion-card {
  background-color: white;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.suggestion-info {
  flex: 1;
}

.suggestion-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.suggestion-qty {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.suggestion-qty-input {
  width: 60px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  margin-right: 8px;
}

.show-more-btn {
  background: none;
  border: none;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  display: block;
  margin: 12px auto 0;
}

/* === COMPOSITION DU REPAS === */
.composition-section {
  padding: 16px;
  background-color: var(--light-blue);
}

.composition-section h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}

.composition-item {
  background-color: white;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  position: relative;
}

.composition-item-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 4px;
}

.composition-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  padding-right: 8px;
}

.composition-qty {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.composition-qty-input {
  width: 70px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
}

.composition-details {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px 0;
}

.composition-delete-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.composition-delete-btn:hover {
  background-color: #c0392b;
}

/* === BESOINS (JAUGES) === */
.needs-section {
  padding: 16px;
}

.needs-section h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

.need-item {
  margin-bottom: 16px;
}

.need-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.need-label {
  font-size: 13px;
  font-weight: 600;
}

.need-values {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.need-bar {
  height: 12px;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.need-progress {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s;
}

.need-progress.lipides {
  background-color: #f4d03f;
}

.need-progress.proteines {
  background-color: #4caf50;
}

.need-progress.glucides {
  background-color: #2196f3;
}

.need-progress.fibres {
  background-color: #9c27b0;
}

/* === PAGE COURSES === */
.courses-header {
  background-color: white;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.courses-header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}

.courses-header h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.date-range {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.date-input-group {
  flex: 1;
}

.date-input-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.date-input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

.courses-actions {
  display: flex;
  gap: 8px;
}

.generate-btn {
  flex: 1;
  background-color: var(--yellow);
  color: var(--navy);
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}

.print-btn {
  flex: 1;
  background-color: var(--yellow);
  color: var(--navy);
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}

/* === RESPONSIVE === */
@media (max-width: 360px) {
  .meal-card h3 {
    font-size: 14px;
  }
  
  .go-button {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
  
  .meal-icon {
    width: 40px;
    height: 40px;
  }
}

@media print {
  .bottom-nav,
  .program-header,
  .courses-header,
  .search-section,
  .suggestions-section {
    display: none !important;
  }
  
  body {
    padding-bottom: 0;
  }
}

/* Style pour le bouton "Actualiser" des suggestions */
.refresh-btn {
  background: white;
  color: #1e3a5f;
  border: 2px solid #ddd;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: #f8f9fa;
  border-color: #f4d03f;
}

.refresh-btn:active {
  background: #e9ecef;
  transform: scale(0.98);
}

.refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Style spécifique pour le bouton avec icône */
.refresh-btn img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

.nav-item.disabled { opacity:.45; pointer-events:auto; }

/* Wrapper du champ + icône */
.search-input-wrap{
  position: relative;
  flex: 1;
}

/* On laisse de la place à l’icône à droite dans l’input */
.search-input-wrap .search-input{
  width: 100%;
  padding-right: 52px; /* espace pour le bouton icône */
}

/* Bouton icône code-barres dans l’input */
.barcode-btn{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Image icône */
.barcode-icon{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* Option : effet “tap” */
.barcode-btn:active{
  transform: translateY(-50%) scale(0.96);
}


/* Overlay scan : centré, pas plein écran “vidéo géante” */
.scan-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

.scan-modal{
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* ✅ Zone Quagga : hauteur fixée */
#scanViewport{
  width: 100%;
  height: 240px;            /* ajuste : 200/220/260 */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  position: relative;
}

/* Quagga injecte video + canvas : on force le bon sizing */
#scanViewport video,
#scanViewport canvas{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* ===== Modal (popup) ===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.modal{
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  overflow: hidden;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.modal-title{
  font-weight: 800;
  margin: 0;
  font-size: 16px;
}

.modal-close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
}

.modal-body{
  padding: 14px 16px 16px 16px;
}

.modal-body label{
  display:block;
  font-size: 13px;
  opacity: .85;
  margin: 10px 0 6px;
}

.modal-body input,
.modal-body select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.16);
  font-size: 14px;
  outline: none;
}

.modal-row{
  display:flex;
  gap:10px;
}

.modal-row > div{
  flex:1;
}

.modal-actions{
  display:flex;
  gap:10px;
  margin-top: 14px;
}

.modal-actions button{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
}

.btn-secondary{
  background: rgba(0,0,0,.06);
}

.btn-primary{
  background: #1e3a5f;
  color: #fff;
}

.modal-error{
  margin-top: 10px;
  font-size: 13px;
  color: #b00020;
}

.modal-success{
  margin-top: 10px;
  font-size: 13px;
  color: #0a7a2f;
}

/* ====== Bloc jauges du jour : compact + aligné ====== */
#dayMacrosGauges{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;          /* 👈 CHANGÉ : force même hauteur */
  gap: 8px;
  padding-top: 6px;
}

/* Chaque jauge = colonne avec hauteurs fixes */
.macroGauge{
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Container du SVG avec hauteur fixe */
.macroGauge > div:first-child {
  height: clamp(62px, 16.5vw, 88px);  /* 👈 hauteur fixe = celle du SVG */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Taille responsive du cercle */
.macroGauge svg{
  width: clamp(62px, 16.5vw, 88px);
  height: clamp(62px, 16.5vw, 88px);
  display: block;
}

/* Texte % bien centré */
.macroGauge [data-text]{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-size: clamp(12px, 3.3vw, 15px) !important;
}

/* Libellés avec hauteur fixe pour alignement */
.macroGauge .macroName{
  margin-top: 6px !important;
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 800;
  line-height: 1.2;
  height: 1.2em;               /* 👈 hauteur fixe = 1 ligne */
  display: flex;
  align-items: center;
  justify-content: center;
}

.macroGauge .macroSub{
  margin-top: 2px !important;
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 700;
  opacity: .75;
  line-height: 1.2;
  height: 1.2em;               /* 👈 hauteur fixe = 1 ligne */
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-nav{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;

  /* iOS safe area (iPhone avec barre/home indicator) */
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  transform: translateZ(0); /* aide certains cas iOS */
}

/* Assure l’espace sous le contenu pour ne pas être masqué par le nav */
body{
  padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}

/* ===== Toast notification (remplace alert() bloquant sur iOS) ===== */
#toastContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding: calc(16px + env(safe-area-inset-top)) 16px 0;
}

.toast-msg{
  background: #1e3a5f;
  color: #fff;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .3s ease, transform .3s ease;
  max-width: 90vw;
  text-align: center;
  pointer-events: auto;
}

.toast-msg.show{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Fix iOS : overlays invisibles ne bloquent plus les clics ===== */
.scan-overlay[style*="display: none"],
.scan-overlay[style*="display:none"]{
  pointer-events: none !important;
}

.modal-overlay[aria-hidden="true"]{
  pointer-events: none !important;
}

#confirmOverlay[style*="display: none"],
#confirmOverlay[style*="display:none"]{
  pointer-events: none !important;
}
/* ===== Fix iOS : pas de zoom automatique à la saisie =====
   Safari iOS zoome sur tout champ dont la police fait moins de 16px, et la
   page reste décalée une fois le clavier ouvert (le tutoriel devient
   illisible). On impose 16px aux champs, sur écran tactile uniquement :
   l'affichage sur ordinateur ne change pas. Le !important l'emporte aussi
   sur les styles en ligne (font-size:14px dans plusieurs pages). */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="color"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}