/* ==========================================================================
   Mobil'Home Famille — feuille de style
   Palette « bord de mer » : teal, sable, corail. Mode clair et mode sombre.
   ========================================================================== */

:root {
    --teal-900: #06333a;
    --teal-700: #0b5f68;
    --teal-600: #0e7c86;
    --teal-500: #17959f;
    --sand-050: #fbf7f1;
    --sand-100: #f4ece1;
    --coral-500: #e0653f;

    --bg: #f2f5f7;
    --bg-soft: #e8eef1;
    --surface: #ffffff;
    --surface-2: #f7fafb;
    --border: #dbe4e8;
    --text: #14252c;
    --text-soft: #5d7178;
    --primary: var(--teal-600);
    --primary-ink: #ffffff;
    --danger: #c0392b;
    --success: #1f8f5f;
    --warn: #c47d10;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(9, 40, 48, .06), 0 8px 24px rgba(9, 40, 48, .07);
    --shadow-sm: 0 1px 2px rgba(9, 40, 48, .08);
    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1a1f;
        --bg-soft: #132329;
        --surface: #16262d;
        --surface-2: #1b2f37;
        --border: #27424c;
        --text: #e7f0f3;
        --text-soft: #9db1b9;
        --primary: #17959f;
        --primary-ink: #04222a;
        --danger: #e4685a;
        --success: #4bbd8b;
        --warn: #e0a83c;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    }
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background:
        radial-gradient(1100px 500px at 10% -10%, rgba(23, 149, 159, .13), transparent 60%),
        radial-gradient(900px 460px at 110% 0%, rgba(224, 101, 63, .10), transparent 55%),
        var(--bg);
    background-attachment: fixed;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
a { color: var(--teal-600); }
@media (prefers-color-scheme: dark) { a { color: #52c3cd; } }
code {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 5px; padding: .05em .35em; font-size: .9em;
}

.muted { color: var(--text-soft); }
.small { font-size: .875rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.empty { color: var(--text-soft); font-style: italic; margin: .2rem 0 .8rem; }
.hidden-forms { display: none; }

/* ---------- Mise en page ------------------------------------------------ */

.page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.6rem 1rem 4rem;
}
.page--setup { max-width: 780px; }

.footer {
    text-align: center;
    color: var(--text-soft);
    font-size: .85rem;
    padding: 0 1rem 2.5rem;
}

/* ---------- Barre supérieure ------------------------------------------- */

.topbar {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.topbar__inner {
    max-width: 1120px; margin: 0 auto;
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem 1rem;
    flex-wrap: wrap;
}
.brand {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 700; color: var(--text); text-decoration: none;
    letter-spacing: -.01em;
}
.brand__icon { font-size: 1.4rem; }

.nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.nav__link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .7rem; border-radius: 999px;
    color: var(--text-soft); text-decoration: none; font-size: .93rem; font-weight: 600;
}
.nav__link:hover { background: var(--surface-2); color: var(--text); }
.nav__link.is-active { background: var(--primary); color: var(--primary-ink); }

.whoami {
    display: flex; align-items: center; gap: .55rem;
    padding: .25rem .3rem .25rem .25rem; border-radius: 999px;
    color: var(--text); text-decoration: none;
}
.whoami:hover { background: var(--surface-2); }
.whoami__name { font-weight: 600; font-size: .93rem; display: flex; flex-direction: column; line-height: 1.15; }
.whoami__role { font-weight: 500; font-size: .7rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.whoami__switch {
    font-size: .8rem; font-weight: 600; color: var(--text-soft);
    border: 1px solid var(--border); border-radius: 999px; padding: .2rem .6rem;
}

/* ---------- Barre d'onglets (mobile) ------------------------------------ */

.tabbar { display: none; }

@media (max-width: 860px) {
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        display: flex; justify-content: space-around; align-items: stretch;
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .tabbar__link {
        position: relative;
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
        padding: .45rem .2rem .5rem;
        color: var(--text-soft); text-decoration: none;
        font-size: .68rem; font-weight: 600;
    }
    .tabbar__icon { font-size: 1.25rem; line-height: 1.1; }
    .tabbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .tabbar__link.is-active { color: var(--primary); }
    .tabbar__link.is-active .tabbar__icon {
        transform: translateY(-1px);
        filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--primary) 45%, transparent));
    }
    .tabbar__badge {
        position: absolute; top: .25rem; left: 55%;
        min-width: 1.05rem; padding: 0 .25rem;
        background: var(--warn); color: #fff;
        border-radius: 999px; font-size: .65rem; font-weight: 700; text-align: center;
    }
}

.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--avatar-bg, var(--primary)); color: var(--avatar-fg, #fff);
    font-weight: 700; font-size: 1rem; flex: none;
}
.avatar--xl { width: 72px; height: 72px; font-size: 2rem; }

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

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.2rem;
}
.card__title {
    font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
    display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem;
}
.card--danger {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}
.card--status.is-busy { border-left: 5px solid var(--coral-500); }
.card--status.is-free { border-left: 5px solid var(--success); }

.grid { display: grid; gap: 1.2rem; }
.grid--dashboard { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }

.page-head, .hero, .cal-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.hero__sub { margin: 0; color: var(--text-soft); }
.hero__actions, .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row--center { justify-content: center; }
.row--end { justify-content: flex-end; }

/* ---------- Boutons ----------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem .95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit; font-weight: 600; font-size: .93rem;
    text-decoration: none; cursor: pointer;
    transition: transform .06s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.btn--ghost { background: transparent; }
.btn--sm { padding: .35rem .7rem; font-size: .85rem; }
.btn--icon { width: 2.2rem; height: 2.2rem; padding: 0; font-size: 1.2rem; }
.btn--danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn--danger-text { color: var(--danger); border-color: transparent; }

/* ---------- Messages ---------------------------------------------------- */

.alert {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.alert--error { border-left-color: var(--danger); }
.alert--success { border-left-color: var(--success); }
.alert--info { border-left-color: var(--teal-500); }

/* ---------- Écran « Qui suis-je ? » ------------------------------------- */

.welcome { max-width: 720px; margin: 4vh auto 0; text-align: center; }
.welcome__head { margin-bottom: 2rem; }
.welcome__icon { font-size: 3rem; display: block; }
.welcome__sub { color: var(--text-soft); font-size: 1.15rem; margin: 0; }

.who-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.who-grid form { display: contents; }
.who {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    width: 100%; padding: 1.6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text); text-decoration: none;
    font: inherit; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.who:hover {
    transform: translateY(-3px);
    border-color: var(--who-color);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--who-color) 28%, transparent);
}
.who__avatar {
    width: 62px; height: 62px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--who-color); color: var(--who-fg);
    font-size: 1.7rem; font-weight: 700;
}
.who__name { font-weight: 700; font-size: 1.05rem; }
.who__role { font-size: .78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }

.card--pin { max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.input--pin { text-align: center; letter-spacing: .5em; font-size: 1.3rem; }

/* ---------- Formulaires ------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: .9rem; }
.form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.form__row { display: flex; gap: .9rem; flex-wrap: wrap; }
.form__row > .field { flex: 1 1 190px; }
.form__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 200px; }
/* Dans un formulaire en colonne, « 200px » vaudrait hauteur : on laisse le contenu décider. */
.form:not(.form--inline) > .field { flex: 0 0 auto; }
.field--sm { flex: 0 1 150px; }
.field__label { font-size: .84rem; font-weight: 600; color: var(--text-soft); }

.input {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit; font-size: .95rem;
}
.input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 1px;
    background: var(--surface);
}
textarea.input { resize: vertical; }
.input--tiny { width: 5.2rem; }
.input--small { width: 8rem; }
.input--icon { width: 3.4rem; text-align: center; }
.input--title { flex: 1; min-width: 10rem; }
.input--color { width: 3.4rem; height: 2.3rem; padding: .15rem; }
.input--note { flex: 1; min-width: 8rem; }

.check-inline { display: flex; align-items: flex-start; gap: .55rem; }
.check-inline input { margin-top: .35rem; }

/* ---------- Étiquettes -------------------------------------------------- */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .55rem; border-radius: 999px;
    background: var(--badge-bg, var(--primary)); color: var(--badge-fg, #fff);
    font-size: .82rem; font-weight: 700;
}
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .6rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: .8rem; font-weight: 600; color: var(--text-soft); text-decoration: none;
}
.chip:hover { color: var(--text); }
.chip--ok { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); color: var(--success); }
.chip--now { border-color: color-mix(in srgb, var(--coral-500) 50%, var(--border)); color: var(--coral-500); }
.pill {
    display: inline-block; min-width: 1.35rem; padding: 0 .38rem;
    border-radius: 999px; background: var(--bg-soft); color: var(--text-soft);
    font-size: .75rem; font-weight: 700; text-align: center;
}
.pill--warn { background: var(--warn); color: #fff; }
.qty { font-weight: 700; color: var(--coral-500); font-size: .88rem; white-space: nowrap; }

.dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; flex: none; }
.dot--free { background: var(--success); }

/* ---------- Onglets ----------------------------------------------------- */

.tabs { display: flex; gap: .3rem; margin-bottom: 1.1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.tab {
    padding: .5rem .9rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-soft); text-decoration: none; font-weight: 600; font-size: .93rem;
    border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.is-active {
    background: var(--surface); border-color: var(--border); color: var(--text);
}
.tab--right { margin-left: auto; }

/* ---------- Listes de séjours ------------------------------------------ */

.stay-list, .issue-list, .template-list, .check-list, .req-list, .steps {
    list-style: none; margin: 0; padding: 0;
}
.stay {
    display: flex; align-items: center; justify-content: space-between; gap: .7rem;
    padding: .6rem 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap;
}
.stay:last-child { border-bottom: none; }
.stay__main { display: flex; flex-direction: column; gap: .15rem; }
.stay__checks { display: flex; gap: .35rem; }
.status-line { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }

/* ---------- Calendrier -------------------------------------------------- */

.cal-head__nav { display: flex; align-items: center; gap: .5rem; }
.cal-head__title { margin: 0; text-transform: capitalize; }

.legend {
    display: flex; gap: .9rem; flex-wrap: wrap; align-items: center;
    margin-bottom: .8rem; font-size: .85rem; color: var(--text-soft);
}
.legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.legend__hint { margin-left: auto; font-style: italic; }
/* Aperçu miniature d'un jour de relais : deux demi-blocs qui se rejoignent. */
.legend__switch { display: inline-flex; gap: 2px; width: 2.4rem; }
.legend__switch span { flex: 1; height: .7rem; background: var(--text-soft); opacity: .5; }
.legend__switch span:first-child { border-radius: 0 999px 999px 0; }
.legend__switch span:last-child { border-radius: 999px 0 0 999px; }
.legend__maybe {
    display: inline-block; width: 2.4rem; height: .8rem; border-radius: 999px;
    border: 2px dashed var(--text-soft); opacity: .7;
}

.calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.4rem;
}
.calendar__weekdays {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.calendar__weekdays span {
    padding: .5rem .4rem; text-align: center;
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-soft);
}
.calendar__grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px; background: var(--border);
}
.day {
    position: relative;
    background: var(--surface);
    min-height: 92px; min-width: 0;
    padding: .3rem .35rem .45rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.day--out { background: var(--surface-2); opacity: .55; }
.day--today { box-shadow: inset 0 0 0 2px var(--primary); }
.day__head { display: flex; align-items: center; justify-content: space-between; }
.day__num { font-size: .82rem; font-weight: 700; color: var(--text-soft); }
.day--today .day__num { color: var(--primary); }
.day__add {
    opacity: 0; text-decoration: none; color: var(--text-soft);
    font-size: 1rem; line-height: 1; padding: 0 .2rem; border-radius: 6px;
    transition: opacity .12s ease;
}
.day:hover .day__add { opacity: 1; }
.day__add:hover { background: var(--primary); color: var(--primary-ink); }
.day__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.band {
    display: block; min-width: 0;
    background: var(--band-bg); color: var(--band-fg);
    font-size: .74rem; font-weight: 700;
    padding: .15rem .35rem;
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-height: 1.25rem;
}
.band__short { display: none; }

/* Jour de relais : le partant garde la matinée (à gauche), l'arrivant prend
   l'après-midi (à droite). Les deux demi-blocs se rejoignent au milieu. */
.day__switch { display: flex; gap: 2px; min-width: 0; }
.day__switch > * { flex: 1 1 0; min-width: 0; }
.band--am { border-radius: 0 999px 999px 0; }
.band--pm { border-radius: 999px 0 0 999px; padding-left: .5rem; }
.band-gap { min-height: 1.25rem; }

/* Prolongation envisagée : contour pointillé, rien n'est réservé. */
.band--maybe {
    background: transparent;
    color: var(--band-bg);
    border: 2px dashed var(--band-bg);
    font-weight: 600;
}
.band--maybe:hover { background: color-mix(in srgb, var(--band-bg) 12%, transparent); filter: none; }
.band:hover { filter: brightness(1.08); }

/* ---------- Tableaux ---------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th {
    text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-soft); padding: .4rem .5rem; border-bottom: 1px solid var(--border);
}
.table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table--admin td { padding: .3rem .35rem; }
.table--admin .col-qty, .table--admin .col-pos { width: 5.2rem; }
.table--admin .col-unit { width: 7rem; }
.table--admin .col-label { width: 24%; }
.table--admin .col-active { width: 4.2rem; text-align: center; }
.table--admin .col-note { width: 15%; }
.table--admin .col-role { width: 11rem; }
.table--admin .col-emoji { width: 6.5rem; }
.table--admin small.muted { display: block; font-size: .72rem; line-height: 1.3; }
.table--admin tr.is-inactive { opacity: .5; }
.row-add { background: var(--surface-2); }

.admin-cat__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    padding-bottom: .7rem; margin-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}
.admin-cat__rename { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1 1 auto; }
.admin-cat__head .input--title { font-weight: 700; }
.admin-cat__delete { text-align: right; margin-top: .5rem; }

/* Flèches de déplacement (un clic = permutation avec la voisine) */
.move { display: flex; gap: .2rem; }
.btn--move {
    width: 2rem; min-width: 2rem; padding: .25rem 0;
    font-size: 1rem; line-height: 1; justify-content: center;
}
.btn--move:disabled { opacity: .25; }
.table--admin .col-move { width: 4.8rem; }
.table--admin .col-cat { width: 11.5rem; }

/* ---------- Checklists -------------------------------------------------- */

.progress { margin-bottom: 1.2rem; }
.progress__bar {
    height: 10px; border-radius: 999px; background: var(--bg-soft);
    overflow: hidden; border: 1px solid var(--border);
}
.progress__fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--teal-500), var(--teal-600));
    transition: width .25s ease;
}
.progress__text { margin: .4rem 0 0; font-size: .9rem; color: var(--text-soft); display: flex; align-items: center; gap: .5rem; }
.progress__percent { font-variant-numeric: tabular-nums; }

.check-group { padding-bottom: .6rem; }
.check {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
    padding: .5rem 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap;
}
.check:last-child { border-bottom: none; }
.check__main { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; flex: 1 1 260px; }
.check__main input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
    width: 22px; height: 22px; flex: none; margin-top: .1rem;
    border: 2px solid var(--border); border-radius: 7px;
    background: var(--surface-2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s ease, border-color .12s ease;
}
.check__box::after {
    content: "✓"; color: #fff; font-size: .9rem; font-weight: 700; opacity: 0; transform: scale(.6);
    transition: opacity .12s ease, transform .12s ease;
}
.check__main input:checked + .check__box { background: var(--success); border-color: var(--success); }
.check__main input:checked + .check__box::after { opacity: 1; transform: scale(1); }
.check__main input:focus-visible + .check__box { outline: 2px solid var(--primary); outline-offset: 2px; }
.check__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.check__label { font-weight: 600; }
.check__note, .check__by { flex-basis: 100%; font-size: .8rem; color: var(--text-soft); }
.check__by { color: var(--success); }
.check.is-done .check__label { text-decoration: line-through; color: var(--text-soft); font-weight: 500; }
.check__extra { display: flex; gap: .4rem; align-items: center; flex: 1 1 220px; max-width: 380px; }
.check__extra[hidden] { display: none; }
.check__more {
    align-self: flex-start;
    background: none; border: none; padding: .1rem .2rem;
    color: var(--text-soft); font: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer; border-radius: 6px;
}
.check__more:hover { color: var(--primary); }

.sticky-actions {
    position: sticky; bottom: .8rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .9rem; flex-wrap: wrap;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: 999px;
    box-shadow: var(--shadow);
}
.sticky-actions__hint { font-size: .85rem; color: var(--text-soft); }
.sticky-actions__hint.is-saving { color: var(--warn); }
.sticky-actions__hint.is-saved { color: var(--success); }

.group-title { margin: 1rem 0 .3rem; font-size: .9rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }
.template-list li { padding: .3rem 0; border-bottom: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.template-list li:last-child { border-bottom: none; }
.template-list__label { flex: 1 1 auto; }

/* ---------- Récap de séjour --------------------------------------------- */

.progress--compact { margin-bottom: .8rem; }
.recap-card .group-title { margin-top: .9rem; }
.recap-ok { color: var(--success); font-weight: 600; margin: .3rem 0 0; }
.recap-list li {
    display: flex; gap: .5rem; align-items: flex-start;
    padding: .35rem 0; border-bottom: 1px dashed var(--border);
}
.recap-list li:last-child { border-bottom: none; }
.recap-list__mark { color: var(--text-soft); flex: none; font-weight: 700; }
.recap-list--pending .recap-list__mark { color: var(--danger); }
.recap-short { color: var(--danger); font-style: normal; font-weight: 600; }
.stay--history { align-items: center; }
.stay__flags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.tabs--filter { border-bottom: none; }

/* ---------- Passage de relais entre deux séjours ------------------------ */

.handover {
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
    border-left: 5px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, var(--surface));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 1.2rem;
}
.handover--info {
    border-color: color-mix(in srgb, var(--teal-500) 40%, var(--border));
    border-left-color: var(--teal-500);
    background: color-mix(in srgb, var(--teal-500) 7%, var(--surface));
}
.handover__title { font-size: 1.05rem; margin-bottom: .35rem; }
.handover__lead { margin-bottom: .5rem; font-size: .93rem; }
.handover__alert { font-weight: 600; color: var(--danger); margin-bottom: .5rem; }
.handover__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .3rem 1.6rem; }
.handover__col .group-title { margin-top: .5rem; }
.handover__note {
    margin: .8rem 0 .4rem; padding: .6rem .8rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-style: italic;
}
.handover__actions { margin: .6rem 0 0; }
.handover__link { margin: -.6rem 0 1.2rem; }

/* ---------- Signalements ------------------------------------------------ */

.issue {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .55rem 0; border-bottom: 1px dashed var(--border);
}
.issue:last-child { border-bottom: none; }
.issue__kind { font-size: 1.15rem; flex: none; }
.issue__body { flex: 1; min-width: 0; }
.issue__body p { margin: .15rem 0; font-size: .9rem; }
.issue__title { flex: 1; }
.issue__actions { display: flex; gap: .35rem; flex: none; }
.issue-list.is-muted { opacity: .65; }

/* ---------- Installateur ------------------------------------------------ */

.setup-head { text-align: center; margin-bottom: 1.5rem; }
.steps { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; counter-reset: step; }
.steps li {
    flex: 1 1 150px; padding: .5rem .8rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    font-size: .88rem; font-weight: 600; color: var(--text-soft); text-align: center;
}
.steps li.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.req-list li { padding: .2rem 0; font-size: .92rem; }
.req-list li.is-ok { color: var(--success); }
.req-list li.is-ko { color: var(--danger); }

/* ---------- Petits écrans ----------------------------------------------- */

@media (max-width: 860px) {
    /* La navigation descend en bas de l'écran, à portée de pouce. */
    .nav { display: none; }
    .whoami__name, .whoami__switch { display: none; }
    .topbar__inner { padding: .5rem .8rem; justify-content: space-between; }
    .brand__name { font-size: .98rem; }
    .legend__hint { display: none; }

    /* Place réservée à la barre d'onglets. */
    .is-logged .page { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
    .is-logged .footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .sticky-actions { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }

    /* Cibles tactiles confortables. */
    .btn { padding: .6rem 1rem; min-height: 44px; }
    .btn--sm { padding: .45rem .75rem; min-height: 38px; }
    .btn--icon { width: 44px; height: 44px; }
    .chip { padding: .3rem .7rem; min-height: 32px; }
    .input { font-size: 16px; padding: .6rem .7rem; }   /* 16px : évite le zoom automatique d'iOS */
    .check__main { min-height: 44px; align-items: center; }
    .check__box { width: 26px; height: 26px; border-radius: 8px; }
    .check__box::after { font-size: 1rem; }
}

@media (max-width: 720px) {
    h1 { font-size: 1.35rem; }
    .page { padding: 1rem .8rem 3rem; }
    .card { padding: .95rem 1rem; border-radius: 12px; }
    .page-head, .hero, .cal-head { align-items: stretch; gap: .7rem; }
    .hero__actions .btn, .cal-head > .btn { flex: 1 1 auto; }
    .form__row > .field { flex: 1 1 100%; }
    .field--sm { flex: 1 1 45%; }

    /* Calendrier compact : prénoms abrégés, journée entière cliquable. */
    .day { min-height: 74px; }
    .band { font-size: .68rem; padding: .15rem .25rem; text-align: center; }
    .band__full { display: none; }
    .band__short { display: inline; }
    .band--pm { padding-left: .25rem; }

    /* Les tableaux passent en fiches empilées, sur deux colonnes. */
    .table--admin, .table--stack,
    .table--admin tbody, .table--stack tbody { display: block; width: 100%; }
    .table--admin thead, .table--stack thead { display: none; }
    .table--admin tr, .table--stack tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .6rem; align-items: end;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        padding: .6rem; margin-bottom: .7rem; background: var(--surface-2);
    }
    .table--admin td, .table--stack td {
        display: flex; flex-direction: column; gap: .15rem;
        border: none; padding: 0; width: auto; min-width: 0;
    }
    .table--admin td::before, .table--stack td::before {
        content: attr(data-label);
        font-size: .7rem; font-weight: 700; color: var(--text-soft);
        text-transform: uppercase; letter-spacing: .04em;
    }
    /* Champs longs et barre d'actions sur toute la largeur */
    .table--admin td[data-label="Ligne"],
    .table--admin td[data-label="Précision"],
    .table--admin td[data-label="Nouvelle ligne"],
    .table--admin td[data-label="Prénom"],
    .table--admin td[data-label="Code"],
    .table--stack td[data-label="Période"],
    .table--admin td:not([data-label]),
    .table--stack td:not([data-label]) { grid-column: 1 / -1; }
    .table--admin td:not([data-label]),
    .table--stack td:not([data-label]) {
        flex-direction: row; justify-content: flex-end; gap: .4rem;
        margin-top: .2rem; flex-wrap: wrap;
    }
    .table--admin td[colspan], .table--stack td[colspan] { display: none; }
    .table--admin td.center { align-items: flex-start; }
    /* Les pastilles d'avancement restent côte à côte sous leur intitulé. */
    .table--stack td[data-label="Checklists"] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem; }
    .table--stack td[data-label="Checklists"]::before { flex: 0 0 100%; }
    .input--tiny, .input--small { width: 100%; }

    .stay, .issue { align-items: flex-start; }
    .issue__actions { flex-wrap: wrap; }

    /* Le crayon « préciser » se glisse au bout de la ligne, sans ajouter de rang. */
    .check { position: relative; }
    .check__main { padding-right: 2.6rem; }
    .check__more {
        position: absolute; top: .3rem; right: 0;
        width: 2.2rem; min-height: 2.2rem; font-size: 1rem;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
    }
}

@media (max-width: 560px) {
    .calendar__weekdays span { font-size: .66rem; padding: .45rem .2rem; }
    .day { min-height: 66px; padding: .2rem; }
    /* Sur un jour libre, toute la case est cliquable ; le « + » disparaît. */
    .day__add {
        position: absolute; inset: 0; opacity: 0;
        padding: 0; border-radius: 0; font-size: 0;
    }
    .day__add:hover { background: transparent; }
    .check__extra { max-width: none; flex: 1 1 100%; }
    .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .who { padding: 1.1rem .6rem; }
    .who__avatar { width: 54px; height: 54px; font-size: 1.5rem; }
}

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

/* ---------- Impression (récap de séjour) -------------------------------- */

@media print {
    .topbar, .tabbar, .footer, .no-print, .tabs { display: none !important; }
    body { background: #fff; color: #000; }
    .page { max-width: none; padding: 0; }
    .card {
        box-shadow: none; border: 1px solid #ccc; break-inside: avoid;
        margin-bottom: .8rem; padding: .8rem;
    }
    .grid--two { grid-template-columns: 1fr 1fr; gap: .8rem; }
    .badge, .chip { border: 1px solid #999; background: none !important; color: #000 !important; }
    .progress__bar { border: 1px solid #999; }
    .progress__fill { background: #666; }
    a { color: #000; text-decoration: none; }
}