/*
 * Espace client web — portage de la palette de l'application React Native
 * (src/theme/colors.ts) pour que le client retrouve la même identité qu'il
 * arrive par le store ou par le QR code d'une laverie.
 *
 * Contrastes mesurés sur le fond de carte #A0C5DB :
 * texte principal 5,60:1 · secondaire 4,66:1 (le blanc y tomberait à 1,83:1).
 * D'où deux familles de jetons : `--wa-on-card-*` pour le contenu des cartes,
 * `--wa-on-bg-*` pour ce qui est posé directement sur le fond bleu.
 */

:root {
    --wa-bg: #223893;
    --wa-surface: #A0C5DB;
    --wa-surface-alt: #8FB8D1;
    --wa-cream: #EDF0E4;
    --wa-accent: #7B965F;
    --wa-on-accent: #FFFFFF;

    --wa-on-card: #223893;
    --wa-on-card-muted: #2E5069;
    --wa-divider: #6E9BB8;

    --wa-on-bg: #FFFFFF;
    --wa-on-bg-muted: #A0C5DB;

    --wa-success: #5BA55A;
    --wa-error: #EF4444;
    --wa-warning: #F59E0B;
    --wa-disabled: #5E7C93;

    --wa-r-sm: 8px;
    --wa-r-md: 12px;
    --wa-r-lg: 16px;
    --wa-r-xl: 20px;
    --wa-r-pill: 999px;

    --wa-s-xs: 4px;
    --wa-s-sm: 8px;
    --wa-s-md: 12px;
    --wa-s-lg: 16px;
    --wa-s-xl: 24px;
    --wa-s-2xl: 32px;

    /* Hauteur de la barre d'onglets, réservée en bas du contenu */
    --wa-nav-h: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--wa-bg);
    color: var(--wa-on-bg);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ------------------------------------------------------------------ shell */

.wa-shell {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.wa-main {
    flex: 1;
    padding: var(--wa-s-lg) var(--wa-s-lg) var(--wa-s-2xl);
}

/* Réserve la place de la barre d'onglets, encoche iOS comprise */
.wa-shell--tabbed .wa-main {
    padding-bottom: calc(var(--wa-nav-h) + var(--wa-s-2xl) + env(safe-area-inset-bottom, 0px));
}

/* ----------------------------------------------------------------- header */

.wa-header {
    display: flex;
    align-items: center;
    gap: var(--wa-s-md);
    padding: var(--wa-s-lg) var(--wa-s-lg) var(--wa-s-sm);
    padding-top: calc(var(--wa-s-lg) + env(safe-area-inset-top, 0px));
}

.wa-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--wa-r-pill);
    background: rgba(255, 255, 255, 0.12);
    color: var(--wa-on-bg);
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.wa-header__titles { min-width: 0; flex: 1; }

.wa-header__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wa-on-bg);
}

.wa-header__sub {
    font-size: 13px;
    color: var(--wa-on-bg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-header__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--wa-r-pill);
    background: var(--wa-cream);
    color: var(--wa-bg);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ------------------------------------------------------------------ cards */

.wa-card {
    background: var(--wa-surface);
    color: var(--wa-on-card);
    border-radius: var(--wa-r-lg);
    padding: var(--wa-s-lg);
    margin-bottom: var(--wa-s-md);
}

.wa-card:last-child { margin-bottom: 0; }

.wa-card--link {
    display: block;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}

.wa-card--link:active { background: var(--wa-surface-alt); transform: scale(0.995); }

.wa-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wa-on-card);
    margin-bottom: var(--wa-s-sm);
}

.wa-card__meta { font-size: 13px; color: var(--wa-on-card-muted); }

.wa-divider {
    height: 1px;
    background: var(--wa-divider);
    margin: var(--wa-s-lg) 0;
    border: 0;
}

/* Titre de section, posé sur le fond bleu */
.wa-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wa-on-bg-muted);
    margin: var(--wa-s-xl) 0 var(--wa-s-sm);
}

.wa-section:first-child { margin-top: 0; }

/* ------------------------------------------------------------------- rows */

.wa-row {
    display: flex;
    align-items: center;
    gap: var(--wa-s-md);
}

.wa-row__grow { flex: 1; min-width: 0; }

.wa-row__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wa-on-card-muted);
    margin-bottom: 2px;
}

.wa-row__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--wa-on-card);
    overflow-wrap: anywhere;
}

.wa-icon-box {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--wa-r-md);
    background: var(--wa-cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.wa-chevron { color: var(--wa-on-card-muted); font-size: 20px; flex-shrink: 0; }

/* ---------------------------------------------------------------- buttons */

.wa-btn {
    display: block;
    width: 100%;
    padding: 15px var(--wa-s-lg);
    border: none;
    border-radius: var(--wa-r-md);
    background: var(--wa-accent);
    color: var(--wa-on-accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s;
}

.wa-btn:active { filter: brightness(0.92); }
.wa-btn[disabled], .wa-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Sur le fond bleu : bordure claire. Sur une carte : bordure sombre. */
.wa-btn--ghost {
    background: transparent;
    color: var(--wa-on-bg);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.wa-card .wa-btn--ghost {
    color: var(--wa-on-card);
    border-color: var(--wa-divider);
}

.wa-btn--danger { background: var(--wa-error); }

.wa-btn--sm { width: auto; padding: 9px var(--wa-s-lg); font-size: 13px; }

.wa-btn + .wa-btn { margin-top: var(--wa-s-md); }

.wa-btn-row { display: flex; gap: var(--wa-s-md); }
.wa-btn-row .wa-btn { margin-top: 0; }

/* ----------------------------------------------------------------- fields */

.wa-field { margin-bottom: var(--wa-s-lg); }

.wa-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wa-on-bg);
    margin-bottom: 6px;
}

.wa-card .wa-label { color: var(--wa-on-card); }

.wa-input {
    display: block;
    width: 100%;
    padding: 13px var(--wa-s-lg);
    font-family: inherit;
    font-size: 16px; /* < 16px déclenche le zoom automatique sur iOS */
    color: var(--wa-on-card);
    background: #FFFFFF;
    border: 1.5px solid transparent;
    border-radius: var(--wa-r-md);
}

.wa-input:focus {
    outline: none;
    border-color: var(--wa-accent);
}

.wa-input::placeholder { color: #7A93A8; }
.wa-input--error { border-color: var(--wa-error); }

textarea.wa-input { min-height: 120px; resize: vertical; line-height: 1.5; }

.wa-hint { font-size: 12px; color: var(--wa-on-bg-muted); margin-top: 6px; }
.wa-card .wa-hint { color: var(--wa-on-card-muted); }

.wa-error-text { font-size: 12px; color: #FFC9C9; margin-top: 6px; }
.wa-card .wa-error-text { color: #A31414; }

.wa-check {
    display: flex;
    align-items: flex-start;
    gap: var(--wa-s-sm);
    font-size: 13px;
    color: var(--wa-on-bg-muted);
    margin-bottom: var(--wa-s-lg);
}

.wa-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--wa-accent);
}

/* ---------------------------------------------------------------- flashes */

.wa-flash {
    border-radius: var(--wa-r-md);
    padding: var(--wa-s-md) var(--wa-s-lg);
    margin-bottom: var(--wa-s-md);
    font-size: 14px;
    font-weight: 500;
}

.wa-flash--error { background: #FBD5D5; color: #8C1A1A; }
.wa-flash--success { background: #D6EBD5; color: #1E4A1D; }
.wa-flash--info { background: var(--wa-surface); color: var(--wa-on-card); }

/* ----------------------------------------------------------------- badges */

.wa-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--wa-r-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.wa-badge--running { background: var(--wa-success); color: #FFFFFF; }
.wa-badge--pending { background: var(--wa-warning); color: #4A2D00; }
.wa-badge--done { background: var(--wa-surface-alt); color: var(--wa-on-card); }
.wa-badge--error { background: var(--wa-error); color: #FFFFFF; }

/* --------------------------------------------------------------- progress */

.wa-progress {
    height: 8px;
    border-radius: var(--wa-r-pill);
    background: rgba(34, 56, 147, 0.18);
    overflow: hidden;
}

.wa-progress__bar {
    height: 100%;
    border-radius: var(--wa-r-pill);
    background: var(--wa-accent);
    transition: width 0.6s linear;
}

.wa-countdown {
    font-size: 28px;
    font-weight: 700;
    color: var(--wa-on-card);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ empty */

.wa-empty {
    text-align: center;
    padding: var(--wa-s-2xl) var(--wa-s-lg);
    color: var(--wa-on-bg-muted);
}

.wa-empty__icon { font-size: 40px; margin-bottom: var(--wa-s-md); }
.wa-empty__title { font-size: 18px; font-weight: 600; color: var(--wa-on-bg); margin-bottom: var(--wa-s-xs); }
.wa-empty__text { font-size: 14px; }

/* -------------------------------------------------------------------- nav */

.wa-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    background: #1B2D75;
    border-top: 1px solid rgba(160, 197, 219, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.wa-nav__inner {
    display: flex;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.wa-nav__item {
    flex: 1;
    height: var(--wa-nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--wa-on-bg-muted);
    font-size: 10px;
    font-weight: 600;
}

.wa-nav__item[aria-current="page"] { color: var(--wa-on-bg); }
.wa-nav__icon { font-size: 20px; line-height: 1; }

/* ----------------------------------------------------------- bandeau QR */

/*
 * Invitation à se connecter, en bas des pages publiques du tunnel QR.
 * Fixée : elle doit rester visible sur une longue liste de machines.
 */
.wa-signin-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: #1B2D75;
    border-top: 1px solid rgba(160, 197, 219, 0.25);
    padding: var(--wa-s-md) var(--wa-s-lg);
    padding-bottom: calc(var(--wa-s-md) + env(safe-area-inset-bottom, 0px));
}

.wa-signin-bar__inner {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--wa-s-md);
}

.wa-signin-bar__text { flex: 1; min-width: 0; font-size: 13px; color: var(--wa-on-bg-muted); }
.wa-signin-bar__text strong { display: block; font-size: 14px; color: var(--wa-on-bg); }
.wa-signin-bar .wa-btn { width: auto; flex-shrink: 0; padding: 10px var(--wa-s-lg); font-size: 14px; }

/* ----------------------------------------------------------- selecteur langue */

/*
 * Deux pastilles FR / EN dans l'en-tête. Présent aussi sur le tunnel QR :
 * le premier à en avoir besoin est le visiteur étranger devant la machine.
 */
.wa-locale {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: var(--wa-r-pill);
    background: rgba(255, 255, 255, 0.12);
    padding: 2px;
}

.wa-locale__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 5px 8px;
    border-radius: var(--wa-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wa-on-bg-muted);
    text-decoration: none;
}

.wa-locale__item[aria-current="true"] {
    background: var(--wa-cream);
    color: var(--wa-bg);
}

/* ----------------------------------------------------------------- footer */

.wa-footer {
    text-align: center;
    font-size: 11px;
    color: rgba(160, 197, 219, 0.7);
    padding: var(--wa-s-xl) var(--wa-s-lg);
}

.wa-footer a { color: inherit; }

/* ------------------------------------------------------------------ utils */

.wa-stack > * + * { margin-top: var(--wa-s-md); }
.wa-center { text-align: center; }
.wa-muted { color: var(--wa-on-bg-muted); }
.wa-card .wa-muted { color: var(--wa-on-card-muted); }
.wa-strike { text-decoration: line-through; }
.wa-nowrap { white-space: nowrap; }
.wa-price { font-size: 26px; font-weight: 700; color: var(--wa-on-card); }
.wa-accent { color: var(--wa-accent); }
.wa-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Vignette de machine : même rendu que l'app mobile (visuel plein cadre,
   vignette ronde — l'app arrondit à la moitié du côté). */
.wa-icon-box--machine { padding: 0; overflow: hidden; border-radius: 50%; background: var(--wa-cream); }
.wa-machine-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Recherche de laverie (accueil et /laveries), comme le dashboard de l'app. */
.wa-search { margin-bottom: var(--wa-s-lg); }
.wa-search .wa-input { margin-bottom: var(--wa-s-sm); }
.wa-search .wa-btn-row .wa-btn { flex: 1; }
.wa-search [data-wa-geo-msg] { margin-top: var(--wa-s-sm); }
/* Vignette de laverie : visuel de l'app, 48 px, coins arrondis (radius.md). */
.wa-icon-box--laundromat { width: 48px; height: 48px; padding: 0; overflow: hidden; border-radius: var(--wa-r-md); background: var(--wa-cream); }
.wa-card--favorite { border: 2px solid var(--wa-accent); }