/*
 * Design system de travel-plan.
 *
 * Contraintes qui expliquent la plupart des choix :
 *  — l'application se consulte debout, sur un quai, parfois en plein soleil,
 *    souvent d'une seule main : cibles larges, contrastes francs,
 *    hiérarchie très marquée ;
 *  — la feuille part dans le cache hors-ligne : pas de framework, pas de
 *    variantes utilitaires inutilisées ;
 *  — le thème suit le réglage du téléphone, sans bascule manuelle.
 */

/* ------------------------------------------------------------- tokens */
:root {
    color-scheme: light dark;

    --bg: #f6f5f2;
    --surface: #ffffff;
    --surface-sunken: #efeee9;
    --text: #161c22;
    --text-muted: #5d6873;
    --border: #dedbd3;

    /* Bleu de nuit : lisible, sobre, il ne se confond avec aucun état. */
    --accent: #1f4f6b;
    --accent-soft: #e3eef4;
    --accent-text: #ffffff;

    --danger: #a3311f;
    --danger-soft: #fbe6e2;
    --warning: #8a5a00;
    --warning-soft: #fdf0d5;
    --success: #1f6b45;
    --success-soft: #e0f0e7;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    --shadow: 0 1px 2px rgb(22 28 34 / 6%), 0 4px 12px rgb(22 28 34 / 6%);
    --shadow-lg: 0 2px 4px rgb(22 28 34 / 8%), 0 12px 32px rgb(22 28 34 / 12%);

    --header-height: 56px;
    --nav-height: 60px;
    --content-max: 720px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #12161a;
        --surface: #1a2026;
        --surface-sunken: #0d1114;
        --text: #eef1f4;
        --text-muted: #9aa7b3;
        --border: #2b333b;

        --accent: #7fc0e3;
        --accent-soft: #1c2c36;
        --accent-text: #0d1114;

        --danger: #f0938a;
        --danger-soft: #33201d;
        --warning: #e8bf72;
        --warning-soft: #302719;
        --success: #86ccaa;
        --success-soft: #1a2b23;

        --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 12px rgb(0 0 0 / 25%);
        --shadow-lg: 0 2px 4px rgb(0 0 0 / 35%), 0 12px 32px rgb(0 0 0 / 35%);
    }
}

/* -------------------------------------------------------------- reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    /* Encoches et barre de gestes des téléphones récents. */
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.25;
    font-weight: 650;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.175rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

img, svg { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- layout */
.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-height);
    padding: 0 var(--space-4);
    padding-top: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.app-header__title {
    flex: 1;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: calc(var(--space-2) * -1);
    color: var(--text);
    border-radius: 50%;
}

.app-main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) calc(var(--nav-height) + var(--space-6));
}

@media (min-width: 768px) {
    .app-main {
        padding-bottom: var(--space-7);
    }
}

/* Barre de navigation basse : atteignable au pouce, la main tenant le
   téléphone et l'autre la valise. */
.app-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
}

.app-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
}

.app-nav__item[aria-current="page"] {
    color: var(--accent);
}

.app-nav__item svg {
    width: 22px;
    height: 22px;
}

.app-nav__badge {
    position: absolute;
    transform: translate(14px, -12px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: var(--accent-text);
    background: var(--danger);
    border-radius: 8px;
}

/* --------------------------------------------------------- typographie */
.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-3);
}

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

.eyebrow {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.muted { color: var(--text-muted); }
.small { font-size: 0.8125rem; }
.tabular { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- surface */
.card {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card--flat {
    box-shadow: none;
}

.stack > * + * {
    margin-top: var(--space-3);
}

.stack--tight > * + * {
    margin-top: var(--space-2);
}

.row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.row--between {
    justify-content: space-between;
}

/* ---------------------------------------------------------- prochaine */
/* L'étape à venir : la seule information qui compte quand on ouvre
   l'application en marchant. Elle occupe donc tout le haut de l'écran. */
.next-step {
    padding: var(--space-5);
    color: var(--accent-text);
    background: var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

@media (prefers-color-scheme: dark) {
    .next-step {
        color: var(--text);
        background: linear-gradient(160deg, #1c3b4d, #16262f);
        border: 1px solid var(--border);
    }
}

.next-step__label {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.next-step__title {
    margin: var(--space-2) 0 var(--space-1);
    font-size: 1.5rem;
}

.next-step__time {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.next-step__countdown {
    font-size: 0.9375rem;
    font-weight: 500;
    opacity: 0.85;
}

.next-step__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
    font-size: 0.875rem;
    opacity: 0.9;
}

.next-step__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* --------------------------------------------------------- timeline */
.timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 var(--space-6);
    list-style: none;
}

/* Le filet vertical qui relie les étapes de la journée. */
.timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 9px;
    width: 2px;
    background: var(--border);
}

.timeline__item {
    position: relative;
    padding-bottom: var(--space-4);
}

.timeline__item:last-child {
    padding-bottom: 0;
}

.timeline__dot {
    position: absolute;
    top: 6px;
    left: calc(var(--space-6) * -1 + 3px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--accent);
    background: var(--bg);
    border: 2px solid var(--accent);
    border-radius: 50%;
}

.timeline__item--past .timeline__dot {
    color: var(--text-muted);
    border-color: var(--border);
    background: var(--border);
}

.timeline__item--tentative .timeline__dot {
    border-style: dashed;
}

.timeline__item--past {
    opacity: 0.55;
}

/* -------------------------------------------------------- carte étape */
.step {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.step:active {
    background: var(--surface-sunken);
}

.step__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.step__time {
    flex-shrink: 0;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.step__title {
    flex: 1;
    min-width: 0;
    font-weight: 550;
}

.step__meta {
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.step__route {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: 0.875rem;
}

.step__route-arrow {
    color: var(--text-muted);
}

/* Bandeau de nuit : ni une étape ni un événement, un fond de journée. */
.night-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
}

/* ---------------------------------------------------------- éléments */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-muted);
    white-space: nowrap;
}

.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--success { background: var(--success-soft); color: var(--success); }
/* Pour ce qui n'est pas une donnée du billet : un repère, pas un horaire. */
.badge--muted { background: var(--surface-sunken); color: var(--text-muted); }

.badge svg {
    width: 14px;
    height: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    font: inherit;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.btn--primary {
    color: var(--accent-text);
    background: var(--accent);
    border-color: var(--accent);
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
}

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

.btn--sm {
    min-height: 36px;
    padding: 0 var(--space-3);
    font-size: 0.875rem;
}

.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.notice {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--text);
    font-size: 0.875rem;
}

.notice--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.notice--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.notice--success { border-left-color: var(--success); background: var(--success-soft); }

.empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

/* ------------------------------------------------------------- météo */
.weather {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.875rem;
}

.weather__temps {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.weather__temps .min {
    color: var(--text-muted);
    font-weight: 500;
}

/* Une normale climatique n'est pas une prévision : on le montre. */
.weather--normal {
    font-style: italic;
    color: var(--text-muted);
}

/* ---------------------------------------------------------- calendrier */
.day-card {
    display: block;
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.day-card--today {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.day-card--past {
    opacity: 0.6;
}

.day-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.day-card__number {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.day-card__icons {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--text-muted);
}

.day-card__icons svg {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------- formulaire */
.field {
    display: block;
    margin-bottom: var(--space-4);
}

.field__label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 0.875rem;
    font-weight: 600;
}

.field__control {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.field__control:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__error {
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    color: var(--danger);
}

.field__help {
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* -------------------------------------------------------- utilitaires */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------- file d'attente d'envoi */
/* Un fichier déposé sans réseau attend ici. La ligne doit dire trois choses
   d'un coup d'œil : ce que c'est, où ça en est, et ce qu'on peut y faire. */
.upload-row {
    padding: var(--space-3) var(--space-4);
}

.upload-row .row {
    gap: var(--space-2);
}

.upload-row .badge {
    flex-shrink: 0;
}

/* --- Déroulé d'un trajet -------------------------------------------------
   Une colonne d'heures alignées, du premier jalon au dernier. Les heures
   déduites — « être sur place deux heures avant » — sont estompées : elles
   ne viennent pas du billet, et rien ne doit laisser croire le contraire. */
.milestones {
    list-style: none;
    margin: var(--space-4) 0 var(--space-2);
    padding: 0 0 0 var(--space-3);
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.milestone {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.milestone__time {
    font-weight: 700;
    font-size: 1.05rem;
    min-width: 4.2rem;
}

.milestone__label {
    flex: 1;
}

.milestone--estimated .milestone__time,
.milestone--estimated .milestone__label {
    color: var(--text-muted);
    font-weight: 500;
}