/* ---------- Base & variables ---------- */
:root {
    --teal: #0e7c7b;
    --teal-dark: #0a5c5b;
    --coral: #ff6b5b;
    --coral-dark: #e6503f;
    --sand: #fdf6ec;
    --sand-dark: #f2e8d5;
    --ink: #2b2620;
    --ink-light: #756a5c;
    --star: #f5b301;
    --radius: 16px;
    --shadow: 0 4px 16px rgba(43, 38, 32, 0.08);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--sand);
    color: var(--ink);
    line-height: 1.45;
}

a { color: inherit; }

h1, h2, h3, h4 { line-height: 1.25; }

button { font-family: inherit; }

/* ---------- Ecran de connexion ---------- */
.login-body {
    background: linear-gradient(160deg, var(--teal) 0%, var(--coral) 100%);
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-screen { width: 100%; padding: 1.5rem; }

.login-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    padding: 2.5rem 1.75rem;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.login-emoji { font-size: 2.5rem; margin-bottom: .25rem; }
.login-card h1 { margin: .2rem 0; font-size: 1.6rem; }
.login-sub { color: var(--ink-light); margin: 0 0 1.5rem; }
.login-question { font-weight: 600; margin-bottom: 1rem; }

.login-choices { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; border: none; padding: 0; margin: 0; }

.person-btn {
    flex: 1;
    min-width: 130px;
    padding: 1.1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.person-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 124, 123, .35); }
.person-btn:nth-child(2) { background: linear-gradient(135deg, var(--coral), var(--coral-dark)); }
.person-btn:nth-child(2):hover { box-shadow: 0 8px 20px rgba(255, 107, 91, .35); }

/* ---------- Barre de navigation ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    color: #fff;
    box-shadow: var(--shadow);
}
.topbar-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    flex-wrap: wrap;
}
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem; }
.brand span { opacity: .8; font-weight: 400; }
.mainnav { display: flex; gap: .3rem; flex: 1; overflow-x: auto; }
.mainnav a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    padding: .4rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
    font-size: .92rem;
}
.mainnav a.active, .mainnav a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.whoami { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.who-badge { background: rgba(255, 255, 255, .15); padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
.who-switch { color: #fff; opacity: .8; text-decoration: underline; white-space: nowrap; }

.page { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* ---------- Dashboard / hero ---------- */
.hero-card {
    background: linear-gradient(135deg, var(--teal), var(--coral));
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}
.hero-emoji { font-size: 2.5rem; }
.hero-card h1 { margin: .3rem 0; font-size: 1.5rem; }
.hero-card p { margin: .3rem 0; opacity: .95; }
.hero-warning { background: rgba(255, 255, 255, .2); border-radius: 10px; padding: .6rem 1rem; display: inline-block; margin-top: .5rem; }
.hero-programme { background: rgba(255, 255, 255, .15); border-radius: 12px; padding: 1rem; margin: 1rem 0; text-align: left; }
.hero-programme h3 { margin: 0 0 .5rem; font-size: 1rem; }
.hero-programme ul { margin: 0; padding-left: 1.2rem; }
.hero-note { font-size: .9rem; opacity: .9; }
.hero-reserve { background: rgba(255, 255, 255, .18); border-radius: 10px; padding: .7rem 1rem; margin-top: .75rem; }

.btn-primary {
    display: inline-block;
    margin-top: 1rem;
    background: #fff;
    color: var(--teal-dark);
    font-weight: 700;
    padding: .75rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }

.timeline h2 { font-size: 1.1rem; margin-bottom: .75rem; }
.timeline-strip { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.timeline-chip {
    flex: 0 0 auto;
    min-width: 140px;
    background: #fff;
    border-radius: 14px;
    padding: .9rem 1rem;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow);
    border: 2px solid transparent;
}
.timeline-chip .tl-emoji { font-size: 1.4rem; display: block; }
.timeline-chip .tl-lieu { font-weight: 700; display: block; margin-top: .2rem; }
.timeline-chip .tl-dates { font-size: .78rem; color: var(--ink-light); display: block; }
.timeline-chip.is-now { border-color: var(--coral); background: var(--sand-dark); }
.timeline-chip.is-past { opacity: .5; }

/* ---------- Itinéraire / Transferts ---------- */
.page-title { font-size: 1.4rem; margin: 0 0 .25rem; }
.page-sub { color: var(--ink-light); margin: 0 0 1.25rem; }

.etapes-nav { display: flex; gap: .5rem; overflow-x: auto; margin-bottom: 1.5rem; padding-bottom: .3rem; }
.etapes-nav a {
    background: #fff;
    border-radius: 999px;
    padding: .5rem 1rem;
    text-decoration: none;
    color: var(--ink);
    white-space: nowrap;
    box-shadow: var(--shadow);
    font-size: .88rem;
}
.etapes-nav a:hover { background: var(--sand-dark); }

.etape-section { margin-bottom: 2.5rem; scroll-margin-top: 75px; }
.etape-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--sand-dark);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.etape-header h2 { margin: 0; font-size: 1.25rem; }
.etape-dates { color: var(--ink-light); font-size: .88rem; }

.jour-block {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
    scroll-margin-top: 75px;
}
.jour-block.is-today { border: 2px solid var(--coral); }
.jour-header h3 { margin: 0 0 .8rem; font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.today-tag { background: var(--coral); color: #fff; font-size: .68rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 700; }

.props-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; margin-bottom: .9rem; }
.empty-hint { color: var(--ink-light); font-size: .88rem; font-style: italic; grid-column: 1 / -1; margin: 0; }

.prop-card {
    background: var(--sand);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: 1px solid var(--sand-dark);
}
.prop-card.is-reserved { background: #eafaf1; border-color: #8fd9ae; }
.prop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.prop-head h4 { margin: 0; font-size: .98rem; line-height: 1.3; }
.badge-reserve { background: #2ea86b; color: #fff; font-size: .68rem; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; font-weight: 700; }
.prop-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--ink-light); align-items: center; }
.prop-prix { background: var(--sand-dark); padding: .1rem .5rem; border-radius: 8px; }
.prop-desc { margin: 0; font-size: .87rem; color: var(--ink); white-space: pre-line; }
.prop-lien { font-size: .85rem; color: var(--teal-dark); text-decoration: none; font-weight: 600; }
.prop-lien:hover { text-decoration: underline; }

.prop-vote { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.stars { display: flex; gap: .1rem; transition: opacity .15s; }
.stars.is-loading { opacity: .5; }
.star { font-size: 1.3rem; color: #d8d0c0; cursor: pointer; transition: color .1s; }
.star.filled { color: var(--star); }
.star:hover { color: var(--star); }
.stars-avg { font-size: .76rem; color: var(--ink-light); }

.prop-actions { display: flex; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }
.inline-form { margin: 0; }
.btn-small { border: none; border-radius: 10px; padding: .45rem .8rem; font-size: .78rem; cursor: pointer; font-weight: 600; }
.btn-accent { background: var(--teal); color: #fff; }
.btn-accent:hover { background: var(--teal-dark); }
.btn-ghost { background: var(--sand-dark); color: var(--ink); }
.btn-ghost:hover { background: #e4d9c0; }
.btn-danger { background: #fbe4e1; color: #c0392b; }
.btn-danger:hover { background: #f6cfc9; }

.add-box { margin-top: .5rem; }
.add-box summary {
    cursor: pointer;
    color: var(--teal-dark);
    font-weight: 700;
    padding: .5rem 0;
    font-size: .92rem;
}
.add-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    background: var(--sand-dark);
    padding: 1rem;
    border-radius: 12px;
    margin-top: .4rem;
}
.add-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; }
.add-form input, .add-form textarea {
    font: inherit;
    padding: .6rem .7rem;
    border-radius: 8px;
    border: 1px solid #d8cfb8;
    background: #fff;
    width: 100%;
}
.add-form input:focus, .add-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.btn-primary[type="submit"] { color: var(--teal-dark); }
.add-form .btn-primary { align-self: flex-start; background: var(--teal); color: #fff; }
.add-form .btn-primary:hover { background: var(--teal-dark); }

.footer { text-align: center; color: var(--ink-light); font-size: .85rem; padding: 2rem 1rem; }

/* ---------- Petits écrans ---------- */
@media (max-width: 480px) {
    .hero-card h1 { font-size: 1.3rem; }
    .prop-actions { flex-direction: column; }
    .prop-actions form { width: 100%; }
    .prop-actions .btn-small { width: 100%; }
}