/* ==========================================================================
   Pulse — design system
   Chargé APRÈS bootstrap.css / style.css / highlight_pulse.css sur toutes les
   pages : il définit les tokens et harmonise les composants du template.

   Contrastes vérifiés (WCAG AA, texte normal >= 4.5:1) :
     --p-primary-text  #9A5200 sur blanc ........ 5.86
     --p-on-primary    #1F2328 sur #F49123 ...... 6.71   (texte des boutons orange)
     --p-muted         #5F6670 sur #F0F2F5 ...... 5.17
     blanc sur --p-danger #C0392B 5.44 · --p-success #2E7D32 5.13 · --p-info #1565C0 5.75
     thème sombre : --p-primary-text #FFB561 sur #14171C 10.29 · --p-muted #A8ADB5 7.96
   ========================================================================== */

:root {
  /* couleurs */
  --p-primary: #F49123;          /* orange de marque (fonds, barres, accents) */
  --p-primary-strong: #D97A0E;
  --p-primary-text: #9A5200;     /* orange utilisable en TEXTE sur fond clair */
  --p-primary-tint: #FFF4E6;
  --p-on-primary: #1F2328;       /* texte sur fond orange */
  --p-ink: #1F2328;
  --p-muted: #5F6670;
  --p-bg: #F0F2F5;
  --p-surface: #FFFFFF;
  --p-surface-2: #F7F8FA;
  --p-border: #D5D9E0;
  --p-success: #2E7D32;
  --p-warning: #B26A00;
  --p-danger: #C0392B;
  --p-info: #1565C0;
  --p-focus: #1565C0;
  --p-skel: #E9E9EC;
  --p-skel-hi: #F6F6F8;

  /* typographie : 12 / 14 / 16 / 20 / 24 / 30 */
  --p-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-title: "Source Sans Pro", "Roboto", system-ui, sans-serif;
  --p-text-xs: 12px;
  --p-text-sm: 14px;
  --p-text-md: 16px;
  --p-text-lg: 20px;
  --p-text-xl: 24px;
  --p-text-2xl: 30px;

  /* espacements, rayons, ombres */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 24px;
  --p-space-6: 32px;
  --p-radius-sm: 8px;
  --p-radius: 12px;
  --p-radius-lg: 16px;
  --p-radius-xl: 20px;
  --p-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --p-shadow: 0 6px 20px rgba(16, 24, 40, .08);
  --p-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);
  --p-touch: 44px;               /* taille minimale d'une cible tactile */
  --p-nav-h: 64px;
}

.theme-dark {
  --p-primary-text: #FFB561;
  --p-primary-tint: #3A2A16;
  --p-ink: #E9ECF1;
  --p-muted: #A8ADB5;
  --p-bg: #14171C;
  --p-surface: #1F2228;
  --p-surface-2: #262A31;
  --p-border: #3A3F48;
  --p-focus: #7FB3FF;
  --p-skel: #2A2E35;
  --p-skel-hi: #353A42;
  --p-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --p-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--p-font) !important;
  font-size: var(--p-text-sm) !important;
  line-height: 1.5 !important;
}
.theme-light body, body.theme-light { color: var(--p-muted) !important; background-color: var(--p-bg); }
h1, h2, h3, h4, h5, h6 { font-family: var(--p-font-title) !important; color: var(--p-ink); letter-spacing: -.2px; line-height: 1.2; }
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: var(--p-ink); }
p { line-height: 1.5; }

/* Focus clavier / lecteur d'écran visible (le template le supprimait) */
:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--p-focus) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------- couleurs utilitaires
   Les « yellow » du template (#FFCE54 / #F6BB42, texte blanc dessus) sont
   ramenés sur la palette orange de la marque, avec des contrastes conformes. */
.bg-highlight,
.bg-yellow-light,
.bg-yellow-dark {
  background-color: var(--p-primary) !important;
  color: var(--p-on-primary) !important;
}
.bg-highlight i, .bg-yellow-light i, .bg-yellow-dark i { color: inherit; }
.bg-red-dark { background-color: var(--p-danger) !important; color: #fff !important; }
.bg-green-dark { background-color: var(--p-success) !important; color: #fff !important; }
.bg-blue-dark { background-color: var(--p-info) !important; color: #fff !important; }

/* Orange en texte : version foncée sur fond clair, claire sur fond sombre */
.color-highlight,
.color-yellow-light,
.color-yellow-dark { color: var(--p-primary-text) !important; }
/* Exception : texte posé sur une photo assombrie (cartes « héros ») */
.card:has(> .card-overlay.bg-black) .color-highlight,
.card:has(> .card-overlay.bg-black) .color-yellow-light,
.card:has(> .card-overlay.bg-black) .color-yellow-dark { color: #FFB561 !important; }
.text-warning { color: var(--p-primary-text) !important; }
.color-gray-dark { color: var(--p-muted) !important; }
.pwa-dismiss { opacity: 1 !important; }
.border-yellow-dark, .border-yellow-light, .border-highlight { border-color: var(--p-primary-strong) !important; }

/* Textes « estompés » du template trop pâles pour être lus */
.opacity-30, .opacity-40 { opacity: .75 !important; }
.opacity-50 { opacity: .8 !important; }
.color-theme.opacity-30, .color-theme.opacity-40, .color-theme.opacity-50, .color-theme.opacity-60 { opacity: 1 !important; color: var(--p-muted) !important; }

/* ------------------------------------------------------------------ boutons */
.btn {
  min-height: var(--p-touch);
  border-radius: var(--p-radius) !important;
  font-family: var(--p-font) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-2);
  box-shadow: var(--p-shadow-sm) !important;
}
.btn.btn-full, .btn.btn-center-l, .btn.btn-center-xl, .btn.btn-center-m { display: flex; }
.btn.btn-m, .btn.btn-l { min-height: 48px; font-size: var(--p-text-md) !important; }
/* Majuscules forcées du template : moins lisibles, remplacées par la casse normale */
.btn.text-uppercase { text-transform: none !important; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55 !important; cursor: not-allowed; }
.btn-3d { border-bottom-width: 0 !important; }

/* ------------------------------------------------------------------- champs */
.input-style input,
.input-style select,
.input-style textarea,
.input-style1 input,
.form-control,
.form-select,
input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="date"], input[type="time"], input[type="password"], select, textarea {
  font-size: var(--p-text-md) !important;   /* 16 px : lisible, et iOS ne zoome plus au focus */
  color: var(--p-ink) !important;
}
.input-style.has-borders input,
.input-style.has-borders select,
.input-style.has-borders textarea {
  min-height: 48px;
  border-color: var(--p-border) !important;
  border-radius: var(--p-radius-sm) !important;
  background-color: var(--p-surface) !important;
}
.input-style.has-borders input:focus,
.input-style.has-borders select:focus,
.input-style.has-borders textarea:focus { border-color: var(--p-primary-strong) !important; }
.input-style.no-borders input,
.input-style.no-borders select { border-bottom-color: var(--p-border) !important; }
.input-style input::placeholder,
.input-style textarea::placeholder,
input::placeholder { color: var(--p-muted) !important; opacity: .85; font-size: var(--p-text-md) !important; }
/* La mention « (requis) » est posée à droite du champ : on réserve sa place
   pour que le texte saisi (désormais en 16 px) ne passe pas dessous. */
.input-style:has(> em) input,
.input-style:has(> em) select { padding-right: 76px !important; text-overflow: ellipsis; }
/* Libellés : lisibles (12 px, casse normale, contraste suffisant) */
.input-style label {
  font-size: var(--p-text-xs) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  color: var(--p-muted) !important;
  letter-spacing: 0 !important;
  background-color: var(--p-surface) !important;
}
.input-style em { font-size: 11px; color: #4A5059 !important; opacity: 1 !important; }
.theme-dark .input-style em { color: var(--p-muted) !important; }
/* « Effacer les données » (connexion) : action destructrice, donc secondaire */
#clearCacheButton.btn { background: transparent !important; color: var(--p-danger) !important; border: 2px solid var(--p-danger) !important; box-shadow: none !important; }
.theme-dark #clearCacheButton.btn { color: #FF8A80 !important; border-color: #FF8A80 !important; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--p-primary-strong); vertical-align: middle; }

/* ------------------------------------------------------------ cartes, modales */
.card-style { border-radius: var(--p-radius-lg) !important; box-shadow: var(--p-shadow) !important; }
.card-style .card-overlay { border-radius: var(--p-radius-lg) !important; }
.theme-light .card-style:not(:has(> .card-overlay)) { background-color: var(--p-surface); }
.menu-box-detached, .menu-box-modal { border-radius: var(--p-radius-xl) !important; }
.menu-box-modal .boxed-text-xl { color: var(--p-muted); font-size: var(--p-text-sm); line-height: 1.5; }
.divider { background-color: var(--p-border) !important; }

/* Barres de progression (objectifs, statistiques) : plus visibles, jamais > 100 % */
.progress { height: 8px !important; border-radius: 999px !important; background-color: var(--p-surface-2) !important; overflow: hidden; }
.progress .progress-bar { max-width: 100%; border-radius: 999px; background-image: none !important; background-color: var(--p-primary) !important; }

/* ------------------------------------------------------------------ en-tête */
.header .header-icon { min-width: var(--p-touch); min-height: var(--p-touch); display: inline-flex; align-items: center; justify-content: center; }

/* ======================================================= composants Pulse */

/* Statistiques des rapports envoyés (accueil BS / AMC / Hôtesse) */
.p-stats__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--p-space-3); padding: var(--p-space-4); margin-bottom: var(--p-space-3); border-radius: var(--p-radius-lg); background: var(--p-primary-tint); }
.p-stats__total { display: flex; flex-direction: column; line-height: 1.1; }
.p-stats__total strong { font-family: var(--p-font-title); font-size: 40px; font-weight: 700; color: var(--p-ink); }
.p-stats__total span { font-size: var(--p-text-sm); font-weight: 600; color: var(--p-primary-text) !important; }
.p-stats__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.p-stats__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--p-surface); color: var(--p-ink); font-size: var(--p-text-xs); font-weight: 600; line-height: 1.2; box-shadow: var(--p-shadow-sm); }
.p-stats__chip i, .p-stat__icon i { color: var(--p-primary-text) !important; }
.p-stat.is-done .p-stat__icon { background: rgba(46, 125, 50, .12); }
.p-stat.is-done .p-stat__icon i { color: var(--p-success) !important; }
.p-stats__list { list-style: none; margin: 0; padding: 0; }
.p-stat { display: flex; gap: var(--p-space-3); align-items: center; padding: var(--p-space-3) 0; border-bottom: 1px solid var(--p-border); }
.p-stat:last-child { border-bottom: 0; }
.p-stat__icon { flex: 0 0 40px; height: 40px; border-radius: var(--p-radius); display: inline-flex; align-items: center; justify-content: center; background: var(--p-surface-2); color: var(--p-primary-text); font-size: 17px; }
.p-stat__body { flex: 1; min-width: 0; }
.p-stat__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--p-space-2); }
.p-stat__label { font-weight: 600; color: var(--p-ink); font-size: var(--p-text-sm); line-height: 1.3; }
.p-stat__count { font-family: var(--p-font-title); font-weight: 700; font-size: var(--p-text-lg); color: var(--p-ink); }
.p-stat__bar { margin: 6px 0 4px; height: 6px; border-radius: 999px; background: var(--p-surface-2); overflow: hidden; }
.p-stat__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--p-primary); }
.p-stat.is-done .p-stat__bar > span { background: var(--p-success); }
.p-stat.is-done .p-stat__share { color: var(--p-success); font-weight: 600; }
.theme-dark .p-stat.is-done .p-stat__share { color: #6FD38F; }
.p-stat__share { font-size: var(--p-text-xs); color: var(--p-muted); }
@media (max-width: 340px) { .p-stats__meta { align-items: flex-start; } }

/* Navigation du bas (générée par ux.js selon le rôle) */
#footer-bar.p-nav {
  display: flex !important;
  align-items: stretch;
  height: calc(var(--p-nav-h) + env(safe-area-inset-bottom)) !important;
  min-height: var(--p-nav-h);
  padding: 0 4px env(safe-area-inset-bottom) !important;
  background-color: var(--p-surface) !important;
  border-top: 1px solid var(--p-border);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .06) !important;
}
#footer-bar.p-nav a,
#footer-bar.p-nav button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--p-touch);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px !important;
  background: none;
  border: 0;
  color: var(--p-muted) !important;
  text-decoration: none;
}
#footer-bar.p-nav i { font-size: 20px !important; margin: 0 !important; color: inherit !important; }
#footer-bar.p-nav span {
  margin: 0 !important;
  font-size: var(--p-text-xs) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: inherit !important;
}
#footer-bar.p-nav .active-nav { color: var(--p-primary-text) !important; }
#footer-bar.p-nav .active-nav::before { content: ""; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--p-primary); }
#footer-bar.p-nav a, #footer-bar.p-nav button { position: relative; }
#footer-bar.p-nav .p-nav__logout { color: var(--p-danger) !important; }
.theme-dark #footer-bar.p-nav .p-nav__logout { color: #FF8A80 !important; }

/* Boîte de confirmation (ux.js : confirmDialog) */
.p-dialog-backdrop { position: fixed; inset: 0; z-index: 100002; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; padding: var(--p-space-4); }
.p-dialog { width: 100%; max-width: 420px; background: var(--p-surface); color: var(--p-ink); border-radius: var(--p-radius-xl); padding: var(--p-space-5); box-shadow: var(--p-shadow-lg); margin-bottom: env(safe-area-inset-bottom); }
.p-dialog h2 { font-size: var(--p-text-lg) !important; margin: 0 0 var(--p-space-2) !important; }
.p-dialog p { color: var(--p-muted); margin: 0 0 var(--p-space-5); }
.p-dialog__actions { display: flex; gap: var(--p-space-3); }
.p-dialog__actions button { flex: 1; min-height: 48px; border-radius: var(--p-radius); border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-ink); font-weight: 700; font-size: var(--p-text-md); }
.p-dialog__actions .is-danger { background: var(--p-danger); border-color: var(--p-danger); color: #fff; }
@media (min-width: 600px) { .p-dialog-backdrop { align-items: center; } }

/* ============================================ interface phase 2 (ux.js) */

/* Toasts — couleurs fixes : le template recolore les textes en thème sombre */
#pulse-toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--p-nav-h) + 12px + env(safe-area-inset-bottom)); z-index: 100000; display: flex; flex-direction: column; gap: var(--p-space-2); pointer-events: none; }
.pulse-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--p-space-3); background: #1F2328; color: #fff !important; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--p-radius); padding: 12px 14px; font-size: var(--p-text-sm); line-height: 1.35; box-shadow: var(--p-shadow-lg); transform: translateY(12px); opacity: 0; transition: opacity .2s, transform .2s; }
.pulse-toast.show { transform: none; opacity: 1; }
.pulse-toast::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--p-primary); }
.pulse-toast.success::before { background: #47D17C; }
.pulse-toast.error::before { background: #FF6B6B; }
.pulse-toast .msg { flex: 1; color: #fff !important; }
.pulse-toast button { background: none; border: 0; color: #FFB561; font-weight: 700; font-size: var(--p-text-sm); padding: 6px 4px; min-height: 36px; text-transform: uppercase; }

/* Bandeau réseau (remplace les messages 2 s du template, masqués pour éviter les doublons) */
.offline-message, .online-message { display: none !important; }
#pulse-offline { position: fixed; top: 0; left: 0; right: 0; z-index: 100001; background: var(--p-danger); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; transform: translateY(-110%); transition: transform .25s; }
#pulse-offline.show { transform: none; }

/* Erreurs de champ */
.pulse-field-error { display: block; color: var(--p-danger); font-size: var(--p-text-xs); line-height: 1.3; margin-top: var(--p-space-1); }
.theme-dark .pulse-field-error { color: #FF8A80; }
input[aria-invalid="true"] { border-color: var(--p-danger) !important; }

/* Pastille GPS (posée sur la carte héros sombre) */
.pulse-gps { display: inline-flex; align-items: center; gap: 6px; font-size: var(--p-text-xs); font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; vertical-align: middle; }
.pulse-gps::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #BBB; }
.pulse-gps.ok::before { background: #47D17C; }
.pulse-gps.weak::before { background: #FFC247; }
.pulse-gps.err::before { background: #FF6B6B; }
.pulse-gps.searching::before { animation: pulse-blink 1s infinite; }
@keyframes pulse-blink { 50% { opacity: .25; } }

/* État de la journée */
.pulse-day { display: flex; align-items: center; gap: var(--p-space-3); margin: 0 var(--p-space-2) var(--p-space-4); padding: var(--p-space-3) var(--p-space-4); border-radius: var(--p-radius); background: var(--p-surface); color: var(--p-ink); box-shadow: var(--p-shadow-sm); font-size: var(--p-text-sm); line-height: 1.35; }
.pulse-day .dot { flex: 0 0 10px; height: 10px; border-radius: 50%; background: #BBB; }
.pulse-day.running .dot { background: var(--p-success); }
.pulse-day.closed .dot { background: var(--p-muted); }
.pulse-day.idle .dot { background: var(--p-primary); }
.pulse-day strong { display: block; font-size: 15px; color: var(--p-ink); }
.pulse-day span { color: var(--p-muted); font-size: 13px; }

/* Squelettes et états (vide / erreur) */
.pulse-skeleton { border-radius: var(--p-radius); margin: 0 0 var(--p-space-3); height: 72px; background: linear-gradient(90deg, var(--p-skel) 25%, var(--p-skel-hi) 37%, var(--p-skel) 63%); background-size: 400% 100%; animation: pulse-shimmer 1.3s ease infinite; }
@keyframes pulse-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.pulse-state { margin: 0 0 var(--p-space-3); padding: var(--p-space-4); border-radius: var(--p-radius); background: var(--p-surface); color: var(--p-ink); font-size: var(--p-text-sm); line-height: 1.45; text-align: center; }
.pulse-state button { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; min-height: var(--p-touch); padding: 8px 20px; border: 0; border-radius: var(--p-radius-sm); background: var(--p-primary); color: var(--p-on-primary); font-weight: 700; font-size: var(--p-text-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}