/* --- Boutons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-body); font-weight: var(--w-semibold); font-size: var(--t-sm);
  padding: 0.75rem 1.4rem; border-radius: var(--r-pill);
  text-decoration: none; border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--t-xs); }

.btn--accent { background: var(--c-laiton); color: var(--c-email); }
.btn--accent:hover { background: color-mix(in srgb, var(--c-laiton) 88%, black); }

.btn--whatsapp { background: var(--c-whatsapp); color: #fff; border-color: var(--c-whatsapp); }
.btn--whatsapp:hover { background: var(--c-whatsapp-dark); border-color: var(--c-whatsapp-dark); }
.btn__icon { width: 1rem; height: 1rem; flex-shrink: 0; }

.btn--dark { background: var(--c-email); color: var(--c-craie); }
.btn--dark:hover { background: color-mix(in srgb, var(--c-email) 85%, white); }

.btn--outline { border-color: var(--c-line-strong); color: var(--c-ink); }
.btn--outline:hover { border-color: var(--c-ink); }

.btn--outline-inverse { border-color: color-mix(in srgb, var(--c-craie) 45%, transparent); color: var(--c-craie); }
.btn--outline-inverse:hover { border-color: var(--c-craie); }

.btn--quiet { color: var(--c-bronze); padding-inline: 0; }
.btn--quiet:hover { color: var(--c-email); transform: none; }

.btn--block { width: 100%; }

/* --- Badges de statut (réutilisent la sémantique de l'app) --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-body); font-weight: var(--w-semibold); font-size: var(--t-xs);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--present { background: color-mix(in srgb, var(--c-vert) 14%, white); color: var(--c-vert); }
.badge--retard   { background: color-mix(in srgb, var(--c-laiton) 20%, white); color: var(--c-bronze); }
.badge--absent   { background: color-mix(in srgb, var(--c-brique) 14%, white); color: var(--c-brique); }
.badge--conge    { background: color-mix(in srgb, var(--c-ardoise) 16%, white); color: var(--c-ardoise); }

/* --- Cartes --- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__icon {
  width: 42px; height: 42px; border-radius: var(--r-sm); margin-bottom: var(--s-4);
  display: grid; place-items: center; background: var(--c-surface-sunken); color: var(--c-bronze);
  font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-lg);
}
.card__label {
  font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--c-bronze); margin-bottom: var(--s-2);
}
.card__title { margin-bottom: var(--s-2); }
.card__text { color: var(--c-ink-muted); font-size: var(--t-sm); }

/* --- Aperçu kiosque (illustration de la home) --- */
.kiosk {
  background: var(--c-email); color: var(--c-craie);
  border-radius: 22px; padding: var(--s-6);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.kiosk::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c-laiton) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.kiosk__clock {
  font-family: var(--f-display); font-weight: var(--w-black);
  font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kiosk__date {
  color: color-mix(in srgb, var(--c-craie) 65%, transparent);
  font-size: var(--t-sm); margin-top: var(--s-1);
}
.kiosk__confirm {
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--c-craie) 18%, transparent);
  display: flex; align-items: center; gap: var(--s-4);
}
.kiosk__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-laiton); color: var(--c-email);
  display: grid; place-items: center; font-family: var(--f-display); font-weight: var(--w-black);
  flex-shrink: 0;
}
.kiosk__msg { font-weight: var(--w-semibold); }
.kiosk__msg small {
  display: block; font-weight: var(--w-regular);
  color: color-mix(in srgb, var(--c-craie) 65%, transparent); margin-top: 2px;
}
.kiosk__actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); position: relative; z-index: 1; }
.kiosk__btn {
  flex: 1; text-align: center; padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md); font-family: var(--f-display); font-weight: var(--w-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; font-size: var(--t-sm);
}
.kiosk__btn--arrivee { background: var(--c-bronze); color: var(--c-craie); }
.kiosk__btn--depart { background: color-mix(in srgb, var(--c-craie) 12%, transparent); color: var(--c-craie); border: 1px solid color-mix(in srgb, var(--c-craie) 30%, transparent); }

/* --- Étapes numérotées --- */
.steps { counter-reset: step; }
.step__number {
  font-family: var(--f-display); font-weight: var(--w-black);
  font-size: var(--t-2xl); color: var(--c-line-strong); margin-bottom: var(--s-2);
}
.step__title { margin-bottom: var(--s-2); }
.step__text { color: var(--c-ink-muted); font-size: var(--t-sm); }

/* --- Chiffres clés --- */
.stats { text-align: center; }
.stat__value {
  font-family: var(--f-display); font-weight: var(--w-black);
  font-size: var(--t-3xl); color: var(--c-bronze); font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--c-ink-muted); font-size: var(--t-sm); margin-top: var(--s-2); }

/* --- Bandeau CTA --- */
.cta-banner {
  background: var(--c-email); color: var(--c-craie);
  border-radius: var(--r-lg); padding: var(--s-7) var(--s-6);
  text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 15% 0%, color-mix(in srgb, var(--c-laiton) 20%, transparent), transparent 65%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--c-craie); }
.cta-banner p { margin-inline: auto; margin-top: var(--s-3); color: color-mix(in srgb, var(--c-craie) 78%, transparent); }
.cta-banner__actions { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }

/* --- Rôles (tableau) --- */
.roles { display: grid; gap: var(--s-3); }
.role {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
@media (min-width: 720px) { .role { grid-template-columns: 10rem 1fr; align-items: baseline; gap: var(--s-5); } }
.role__name { font-family: var(--f-display); font-weight: var(--w-bold); }
.role__where { display: block; font-size: var(--t-xs); color: var(--c-bronze); font-weight: var(--w-semibold); margin-top: 2px; }
.role__does { color: var(--c-ink-muted); font-size: var(--t-sm); }

/* --- Champs de formulaire --- */
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--t-sm); font-weight: var(--w-semibold); }
.field input, .field textarea {
  font: inherit; padding: 0.7rem 0.9rem; border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong); background: var(--c-surface);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-bronze); }
.field textarea { resize: vertical; min-height: 7rem; }

/* --- Ligne de contact --- */
.contact-line {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line);
}
.contact-line__label { font-size: var(--t-xs); color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: var(--ls-label); width: 6rem; flex-shrink: 0; }

/* --- Bandeau modèle deux applications --- */
.apps { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .apps { grid-template-columns: 1fr 1fr; } }
.app-card {
  border-radius: var(--r-lg); padding: var(--s-6); border: 1px solid var(--c-line);
}
.app-card--dark { background: var(--c-email); color: var(--c-craie); border-color: transparent; }
.app-card--dark h3 { color: var(--c-craie); }
.app-card__tag {
  display: inline-block; font-size: var(--t-xs); font-weight: var(--w-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--c-surface-sunken); color: var(--c-bronze); margin-bottom: var(--s-3);
}
.app-card--dark .app-card__tag { background: color-mix(in srgb, var(--c-craie) 14%, transparent); color: var(--c-laiton); }
.app-card p { color: var(--c-ink-muted); font-size: var(--t-sm); margin-top: var(--s-2); }
.app-card--dark p { color: color-mix(in srgb, var(--c-craie) 75%, transparent); }