/* ==========================================================================
   SIMULATEUR : SIAR RH dans un téléphone (accueil + démo)
   Coque sombre (--c-email), écran craie, couleurs 100 % tokens.
   ========================================================================== */

.sim { display: grid; justify-items: center; gap: var(--s-5); }

/* --- Coque ----------------------------------------------------------------- */

.phone {
  inline-size: min(100%, 21rem);
  padding: 0.625rem;
  border-radius: 2.75rem;
  background-color: var(--c-email);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--c-email) 70%, black);
}

.phone__screen {
  display: flex;
  flex-direction: column;
  block-size: 37rem;
  border-radius: 2.15rem;
  background-color: var(--c-surface);
  overflow: hidden;
}

.phone__screen--kiosque { background-color: var(--c-email); }

.phone__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
}
.phone__body::-webkit-scrollbar { display: none; }

/* --- Barre du bas ---------------------------------------------------------- */

.sim-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--s-2) var(--s-1) var(--s-3);
  border-block-start: 1px solid var(--c-line);
  background-color: var(--c-surface);
}

.phone__screen--kiosque .sim-nav {
  border-block-start-color: color-mix(in srgb, var(--c-craie) 14%, transparent);
  background-color: var(--c-email);
}

.sim-nav__btn {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-block-size: 2.75rem;
  padding: var(--s-1) 0;
  border: 0;
  background: none;
  color: var(--c-ink-soft);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  cursor: pointer;
}
.sim-nav__btn.is-active { color: var(--c-bronze); }
.phone__screen--kiosque .sim-nav__btn { color: color-mix(in srgb, var(--c-craie) 55%, transparent); }
.phone__screen--kiosque .sim-nav__btn.is-active { color: var(--c-laiton); }
.sim-nav__emoji { font-size: 1.15rem; line-height: 1.2; filter: grayscale(0.85); opacity: 0.8; }
.sim-nav__btn.is-active .sim-nav__emoji { filter: none; opacity: 1; }

/* --- Blocs communs --------------------------------------------------------- */

.sim-head { padding: var(--s-5) var(--s-4) var(--s-3); }
.sim-head h3 { font-size: var(--t-xl); }
.sim-sub { color: var(--c-ink-muted); font-size: var(--t-sm); }
.sim-block { display: grid; gap: var(--s-3); padding: var(--s-2) var(--s-4) var(--s-4); }

.sim-tip { padding: var(--s-2) var(--s-4) var(--s-4); color: var(--c-ink-muted); font-size: var(--t-sm); text-align: center; }
.sim-block .sim-tip { padding: 0; }

.sim-toast {
  margin: 0 var(--s-4) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background-color: var(--c-surface-sunken);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
}

.sim-ok {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-vert) 14%, white);
  color: var(--c-vert);
  font-size: var(--t-sm);
}
.sim-ok__title { font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-base); }

.wa-bubble {
  max-inline-size: 90%;
  padding: var(--s-3);
  border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-md);
  background: color-mix(in srgb, var(--c-whatsapp) 18%, white);
  font-size: var(--t-sm);
}

.phone .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* --- Kiosque --------------------------------------------------------------- */

.kp {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-5) var(--s-4) var(--s-3);
  color: var(--c-craie);
  background-image: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c-laiton) 20%, transparent), transparent 60%);
}

.kp__clock {
  font-family: var(--f-display);
  font-weight: var(--w-black);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kp__date { color: color-mix(in srgb, var(--c-craie) 65%, transparent); font-size: var(--t-sm); margin-block-start: var(--s-1); }

.kp__prompt { margin-block-start: var(--s-5); font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-lg); }

.kp__dots { display: flex; gap: var(--s-3); margin-block: var(--s-3) var(--s-4); }
.kp__dot {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c-craie) 55%, transparent);
}
.kp__dot.is-on { background: var(--c-laiton); border-color: var(--c-laiton); }

.kp__pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  inline-size: min(100%, 15rem);
}

.kp__key {
  min-block-size: 2.9rem;
  border: 1px solid color-mix(in srgb, var(--c-craie) 22%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-craie) 9%, transparent);
  color: var(--c-craie);
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kp__key:hover { background: color-mix(in srgb, var(--c-craie) 16%, transparent); }
.kp__key:active { transform: scale(0.95); }
.kp__key--ghost { border-color: transparent; background: none; }

.kp__hint { margin-block-start: var(--s-4); color: color-mix(in srgb, var(--c-craie) 70%, transparent); font-size: var(--t-xs); text-align: center; }

.kp__try {
  margin: 2px;
  padding: 3px 10px;
  border: 1px solid var(--c-laiton);
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-laiton);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  cursor: pointer;
}
.kp__try:hover { background: color-mix(in srgb, var(--c-laiton) 18%, transparent); }

.kp__result {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  margin-block: auto;
  text-align: center;
}

.kp__avatar {
  display: grid;
  place-items: center;
  inline-size: 5rem;
  block-size: 5rem;
  border-radius: 50%;
  background: var(--c-laiton);
  color: var(--c-email);
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: var(--w-black);
}
.kp__avatar--err { background: var(--c-brique); color: var(--c-craie); }
.kp__result--info .kp__avatar { background: var(--c-ardoise); color: var(--c-craie); }

.kp__msg { font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-lg); }
.kp__msg small {
  display: block;
  margin-block-start: var(--s-1);
  font-family: var(--f-body);
  font-weight: var(--w-regular);
  font-size: var(--t-sm);
  color: color-mix(in srgb, var(--c-craie) 70%, transparent);
}

/* --- Aujourd'hui ----------------------------------------------------------- */

.sc { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); }
.sc__box {
  display: grid;
  justify-items: center;
  padding: var(--s-2) 0;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-vert) 12%, white);
  color: var(--c-vert);
}
.sc__box b { font-family: var(--f-display); font-size: var(--t-xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sc__box span { font-size: 0.68rem; font-weight: var(--w-semibold); }
.sc__box--retard { background: color-mix(in srgb, var(--c-laiton) 22%, white); color: var(--c-bronze); }
.sc__box--absent { background: color-mix(in srgb, var(--c-brique) 13%, white); color: var(--c-brique); }
.sc__box--conge  { background: color-mix(in srgb, var(--c-ardoise) 16%, white); color: var(--c-ardoise); }

.sr-list { list-style: none; padding: 0; }
.sr {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-block-start: 1px solid var(--c-line);
}
.sr__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--c-surface-sunken);
  color: var(--c-bronze);
  font-family: var(--f-display);
  font-weight: var(--w-bold);
}
.sr__text { flex: 1; min-inline-size: 0; }
.sr__name { font-weight: var(--w-semibold); line-height: 1.2; }
.sr__info { color: var(--c-ink-muted); font-size: var(--t-xs); }
.sr__call {
  padding: 5px 12px;
  border: 1px solid var(--c-brique);
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-brique);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  cursor: pointer;
}
.sr__call:hover { background: color-mix(in srgb, var(--c-brique) 10%, white); }

/* --- Paie ------------------------------------------------------------------ */

.an__count { color: var(--c-brique); font-size: var(--t-sm); font-weight: var(--w-bold); }
.an {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--c-brique) 35%, white);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-brique) 6%, white);
}
.an__title { font-weight: var(--w-bold); font-size: var(--t-sm); }
.an__text { color: var(--c-ink-muted); font-size: var(--t-sm); }
.an__btn {
  justify-self: start;
  margin-block-start: var(--s-2);
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-email);
  color: var(--c-craie);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  cursor: pointer;
}
.an__btn:hover { background: color-mix(in srgb, var(--c-email) 80%, white); }

.pr-list { list-style: none; padding: 0; }
.pr {
  display: flex; justify-content: space-between; align-items: center; inline-size: 100%;
  padding: var(--s-2) 0; border: 0; border-block-end: 1px solid var(--c-line);
  background: none; font: inherit; font-size: var(--t-sm); text-align: start; color: inherit; cursor: pointer;
}
.pr:hover { background: var(--c-surface-alt); }
.pr small { margin-inline-start: var(--s-2); color: var(--c-ink-soft); font-size: var(--t-xs); }
.pr b { font-variant-numeric: tabular-nums; }
.pr-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: var(--w-semibold); }
.pr-total b { font-family: var(--f-display); font-size: var(--t-xl); font-variant-numeric: tabular-nums; color: var(--c-bronze); }

/* --- Équipe, fiche, bulletin ---------------------------------------------- */

.sim-back { padding: 0; margin-block-end: var(--s-2); border: 0; background: none; color: var(--c-bronze); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.sim-tip--left { text-align: start; padding-block-start: var(--s-2); }

.sr--btn { inline-size: 100%; border: 0; border-block-start: 1px solid var(--c-line); background: none; font: inherit; text-align: start; color: inherit; cursor: pointer; }
.sr--btn:hover { background: var(--c-surface-alt); }
.sr--btn .sr__name, .sr--btn .sr__info { display: block; }
.sr__chev { color: var(--c-ink-soft); font-size: var(--t-xl); }

.fi-list { list-style: none; padding: 0 var(--s-4); }
.fi { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-block-end: 1px solid var(--c-line); font-size: var(--t-sm); }
.fi span { color: var(--c-ink-muted); }
.fi b { text-align: end; font-variant-numeric: tabular-nums; }
.fi.neg b { color: var(--c-brique); }

.bl-net { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-3) var(--s-4) 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-email); color: var(--c-craie); font-weight: var(--w-semibold); }
.bl-net b { font-family: var(--f-display); font-size: var(--t-2xl); font-variant-numeric: tabular-nums; color: var(--c-laiton); }

.fld { display: grid; gap: var(--s-1); font-size: var(--t-sm); font-weight: var(--w-semibold); }
.fld input { padding: 0.6rem 0.75rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); font: inherit; font-weight: var(--w-regular); }
.fld input:focus { outline: none; border-color: var(--c-bronze); }

@media (prefers-reduced-motion: reduce) {
  .kp__key, .btn { transition: none; }
}