/* BouchardNDL App - Base */
:root {
  --primary: #ffffff;
  --primary-dark: #e5e5e5;
  --bg-dark: #ffffff;
  --bg-viewport: #e2dac0;
  --bg-card: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --success: #22c55e;
  /* Zone protégée (encoche / barre d’état) — utilisée par #app-container + headers fixed */
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
}
/* iOS : plancher si Safari / PWA renvoie 0 à tort (status bar ~20px) */
html.app-ios {
  --app-safe-top: max(20px, env(safe-area-inset-top, 0px));
}
/* Android : arrière-plan blanc au démarrage (évite le beige) */
html.app-android {
  --bg-viewport: #ffffff;
}


*::-webkit-scrollbar { display: none; }
html {
  overflow: hidden;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  overscroll-behavior: none;
  background: var(--bg-viewport);
  /* Étendre le fond jusqu’au bas physique (iPhone safe area) pour éviter la bande beige */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  touch-action: manipulation;
  overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: transparent;
  color: var(--text);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  position: relative;
}
/* Calque d'arrière-plan fixe : ne bouge jamais (scroll, bounce iOS, etc.) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background-color: #e4e2de;
  background-image:
    url('../images/app-bg.png'),
    radial-gradient(ellipse 120% 75% at 50% 100%, rgba(196, 177, 85, 0.42) 0%, rgba(196, 177, 85, 0.12) 42%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 78% 92%, rgba(255, 228, 150, 0.35) 0%, transparent 60%),
    linear-gradient(168deg, #efede9 0%, #e0ddd8 38%, #d2cfc9 100%);
  background-size: cover, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center bottom, center bottom, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

#simulator-wrapper.app-mode {
  width: 100%;
  height: 100%;
  height: 100vh;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#phone-frame.app-mode {
  background: transparent;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  border-radius: 0;
  box-shadow: none;
}
#app-container {
  container-type: inline-size;
  container-name: app;
  background: transparent;
  min-height: 100%;
  height: 100%;
  /* Au moins 100vh pour remplir l’écran (grand écran / iPhone 16 Pro Max, viewport dynamique) */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  /* Fond jusqu’au bas physique (safe area) pour supprimer la bande beige */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.phone-scale-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* ----------------------------------------------------------------- *
 * Anti-zoom global :
 *   - touch-action: manipulation déjà sur html/body coupe le double-tap.
 *   - font-size: 16px sur les champs évite le zoom auto iOS au focus
 *     (Safari iOS zoome dès qu'un input a une font < 16 px).
 *   - Le viewport meta + assets/js/no-zoom.js gèrent le pinch / Ctrl-+/-.
 * ----------------------------------------------------------------- */
html,
body {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

input,
select,
textarea {
  font-size: max(16px, 1rem);
}
.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  background: transparent;
}
/*
 * Fond image sur TOUTES les pages (.screen).
 * body::before (z-index:-1) est souvent masqué par html/body #e4e2de !important (head.php).
 */
#app-container .screen {
  background-color: #e4e2de;
  background-image:
    url('../images/app-bg.png'),
    radial-gradient(ellipse 120% 75% at 50% 100%, rgba(196, 177, 85, 0.42) 0%, rgba(196, 177, 85, 0.12) 42%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 78% 92%, rgba(255, 228, 150, 0.35) 0%, transparent 60%),
    linear-gradient(168deg, #efede9 0%, #e0ddd8 38%, #d2cfc9 100%);
  background-size: cover, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center bottom, center bottom, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
/* Fond perso utilisateur : laisser la photo custom, pas app-bg par écran. */
html.app-user-custom-bg #app-container .screen {
  background-color: transparent;
  background-image: none;
}
/* Padding par défaut pour toutes les pages sauf Employé et Dashboard (ils ont leur propre CSS) */
.screen:not(#gestion-compte-screen):not(#dashboard-screen):not(#formations-screen):not(#conformite-screen):not(#projet-screen) {
  padding-bottom: 0;
}
/* Dashboard : pas de padding global, layout propre (logo, 2 icônes sous le logo, grille en dessous) */
#dashboard-screen.dashboard-screen.screen {
  padding: 0 !important;
}
/* Formations : même style que dashboard (header + logo + content), padding géré dans formations.css */
#formations-screen.formations-screen.screen {
  padding: 0 !important;
}
/* Conformité : même style que dashboard (header + logo + content), padding géré dans conformite.css */
#conformite-screen.conformite-screen.screen {
  padding: 0 !important;
}
/* Publication (mur dans l’app) : pleine largeur, pas de gouttière .screen */
#publication-screen.publication-app-screen.screen {
  padding: 0 !important;
}
/* Projet (Déneigement, Projet, Transport) : même style que dashboard, padding géré dans projet.css */
#projet-screen.projet-screen.screen {
  padding: 0 !important;
}
.screen:not(.active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.screen.active {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#app-container {
  position: relative;
}

/* Écran de boot : fond clair + logo (évite le flash noir iOS avant le login).
 * position:fixed + padding 0 : centre stable (pas de saut safe-area / dvh à l’ouverture). */
.app-recharge-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overscroll-behavior: none;
  background: #e4e2de;
  padding: 0;
  /* Ne jamais bloquer les clics dashboard pendant un splash trop long. */
  pointer-events: none !important;
}
.app-recharge-splash__logo {
  display: block;
  width: min(72vw, 280px);
  max-width: 280px;
  height: auto;
  aspect-ratio: 420 / 158;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Sur Android : pas de double bootscreen à l'ouverture (le système en affiche déjà un) */
.app-android .app-recharge-splash {
  display: none !important;
}
.app-android .app-recharge-splash.app-recharge-splash--reload {
  display: flex !important;
}
/* Reconnexion silencieuse : garder le voile de boot, ne pas montrer le login entre-temps */
html.app-auth-restore-pending .screen,
html.app-auth-restore-pending .screen.active {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.app-auth-restore-pending #app-recharge-splash {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.app-auth-restore-pending #app-recharge-splash[hidden] {
  display: flex !important;
}
.app-recharge-splash[hidden] {
  display: none !important;
}
/* Après le 1er paint dashboard/login : logo splash interdit (navigation interne). */
html.app-boot-splash-done #app-recharge-splash,
html.app-boot-splash-done #app-recharge-splash[hidden],
html.app-boot-splash-done #app-recharge-splash.app-recharge-splash--reload {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Reconnexion silencieuse : le splash doit gagner même si boot-splash-done a déjà été posé. */
html.app-auth-restore-pending.app-boot-splash-done #app-recharge-splash,
html.app-auth-restore-pending.app-boot-splash-done #app-recharge-splash[hidden],
html.app-auth-restore-pending.app-boot-splash-done #app-recharge-splash.app-recharge-splash--reload {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: #e4e2de !important;
}

/*
 * Popup hub ?ft_open=entree : fond blanc pendant le boot JS, puis révélation unique
 * de l’écran Entrée une fois le DOM rempli (évite flash formulaire vide → rempli).
 */
html.app-hub-ft-entree-boot,
html.app-hub-ft-entree-boot body {
  background: #e4e2de !important;
}
html.app-hub-ft-entree-boot body::before {
  opacity: 0 !important;
}
/* Boot hub Entrée : splash logo visible ; masqué dès ready. */
html.app-hub-ft-entree-boot #app-recharge-splash {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
html.app-hub-ft-entree-ready #app-recharge-splash {
  display: none !important;
  visibility: hidden !important;
}
html.app-hub-ft-entree-boot .screen:not(#feuille-temps-entree-screen),
html.app-hub-ft-entree-ready .screen:not(#feuille-temps-entree-screen) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.app-hub-ft-entree-boot #feuille-temps-entree-screen {
  display: flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.app-hub-ft-entree-ready #feuille-temps-entree-screen {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/*
 * Loader retour PDF / hub : masqué par défaut (hidden). Sans ça, le bloc en pleine hauteur
 * restait dans le flux et cachait connexion + tableau de bord (texte seul « Chargement de l'horaire… »).
 */
#feuille-temps-return-loader[hidden] {
  display: none !important;
}
#feuille-temps-return-loader:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 9990;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px 20px;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-weight: 600;
  color: #1a1a1a;
  background-color: #e4e2de !important;
  background-image:
    url('../images/app-bg.png'),
    radial-gradient(ellipse 120% 75% at 50% 100%, rgba(196, 177, 85, 0.42) 0%, rgba(196, 177, 85, 0.12) 42%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 78% 92%, rgba(255, 228, 150, 0.35) 0%, transparent 60%),
    linear-gradient(168deg, #efede9 0%, #e0ddd8 38%, #d2cfc9 100%) !important;
  background-size: cover, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center bottom, center bottom, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed !important;
  -webkit-background-attachment: fixed !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
#app-container {
  box-sizing: border-box;
}

/* Paysage : fond de l’app sur tout l’écran derrière le voile de boot */
@media (orientation: landscape) {
  html, body {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background-color: #e4e2de;
    background-image:
      url('../images/app-bg.png'),
      radial-gradient(ellipse 120% 75% at 50% 100%, rgba(196, 177, 85, 0.42) 0%, transparent 68%),
      linear-gradient(168deg, #efede9 0%, #d2cfc9 100%);
    background-size: cover, 100% 100%, 100% 100%;
    background-position: center center, center bottom, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-attachment: fixed !important;
    -webkit-background-attachment: fixed !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
  #simulator-wrapper.app-mode,
  #phone-frame.app-mode,
  #app-container {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
  #app-container {
    background: transparent;
  }
  .app-recharge-splash {
    background: #e4e2de;
    padding: 0;
  }
}

/* Header fixe : top:0 pour MONTER la barre (combler la bande). Padding d’origine inchangé
 * — ne pas faire 10px + safe-area (ça grossit le blanc au lieu de juste monter). */
.formulaire-header,
.formulaire-header-feuille-temps,
.formulaire-fill-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Coach / clavardage : même en-tête fixed que les autres écrans formulaire ; le dégagement du
 * contenu est géré par padding-top sur #chat-screen (chat.css), comme la feuille de temps. */

#dashboard-screen .dashboard-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 10;
  flex-shrink: 0;
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}