/* Accueil compact : conçu pour les mini-tablettes et téléphones (portrait/paysage). */
.compact-home-body .page {
    width: min(940px, calc(100% - 20px));
    padding: 14px 0 30px;
}
.compact-home-body .topbar,
.closing-body .topbar {
    min-height: 48px;
    padding: 8px 14px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #383838;
}
.compact-home-body .topnav,
.closing-body .topnav {
    width: auto;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}
.compact-home-body .topnav > a,
.compact-home-body .topnav .login-badge,
.closing-body .topnav > a,
.closing-body .topnav .login-badge { display: none; }
.compact-home-body .brand,
.closing-body .brand { font-size: 1rem; color: #fff; }
.compact-home-body .logout-form,
.closing-body .logout-form { margin: 0; }
.compact-home-body .logout-form button,
.closing-body .logout-form button {
    min-height: 34px;
    padding: 5px 10px;
    font-size: .78rem;
}

.compact-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}
.compact-home-overline {
    display: block;
    color: #aaa;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 4px;
}
.compact-home-head h1 {
    margin: 0;
    font-size: clamp(1.25rem, 3.4vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}
.compact-home-date {
    color: #dedede;
    font-weight: 800;
    font-size: .82rem;
    white-space: nowrap;
}
.compact-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.compact-tile {
    min-width: 0;
    aspect-ratio: 1.18 / 1;
    min-height: 112px;
    padding: 13px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.13);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    background: #484848;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    transition: background .12s ease, transform .12s ease;
}
.compact-tile:hover { background: #555; transform: translateY(-1px); }
.compact-tile.is-pending {
    background: #a42830;
    border: 2px solid #ff7777;
    box-shadow: 0 4px 15px rgba(142,15,26,.35);
}
.compact-tile.is-pending:hover { background: #b82f37; }
.compact-tile.is-done {
    background: #1c724b;
    border: 2px solid #71dea1;
    box-shadow: 0 4px 15px rgba(17,92,61,.3);
}
.compact-tile.is-done:hover { background: #238557; }
.compact-tile-status {
    display: inline-block;
    color: #fff;
    background: rgba(0,0,0,.17);
    border-radius: 6px;
    padding: 3px 7px;
    line-height: 1.2;
}
.compact-tile:focus-visible,
.closing-tap:focus-visible,
.closing-icon-button:focus-visible { outline: 3px solid #ffab85; outline-offset: 2px; }
.compact-tile.is-featured { background: #d95829; border-color: #f27b4b; }
.compact-tile.is-featured:hover { background: #e96839; }
.compact-tile-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 10px;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1;
}
.compact-tile strong {
    display: block;
    font-size: clamp(.97rem, 2.4vw, 1.13rem);
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.compact-tile small { font-size: .72rem; font-weight: 750; }
.compact-tile-alert { color: #ffbba0; }
.compact-tiles-title {
    margin: 18px 0 9px;
    font-size: .94rem;
    color: #ddd;
    font-weight: 850;
}
.compact-post-active { color: #70e0a4; }

.compact-clock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 91px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #454545;
    border: 1px solid rgba(236,100,50,.42);
    border-radius: 15px;
}
.compact-clock.is-in { background: #34463e; border-color: #438864; }
.compact-clock-label { display: block; color: #ffae89; font-size: .65rem; letter-spacing: .08em; font-weight: 900; }
.compact-clock.is-in .compact-clock-label { color: #83e5a7; }
.compact-clock-info strong {
    display: block;
    margin: 3px 0 1px;
    font-size: clamp(1.3rem, 4vw, 1.65rem);
    line-height: 1.05;
    font-weight: 900;
}
.compact-clock-info small { color: #ccc; font-size: .72rem; }
.compact-clock-form { margin: 0; }
.compact-clock-form button {
    min-width: 124px;
    min-height: 54px;
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    background: #ec6432;
    color: #fff;
    font: inherit;
    font-size: .91rem;
    font-weight: 900;
    cursor: pointer;
}
.compact-clock.is-in .compact-clock-form button { background: #18835a; }

.compact-live {
    padding: 11px 13px;
    margin-bottom: 12px;
    background: #454545;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
}
.compact-live-top,
.compact-live-top > div { display: flex; align-items: center; gap: 8px; }
.compact-live-top { justify-content: space-between; font-size: .88rem; }
.compact-live-top > a { color: #ffad89; font-weight: 800; font-size: .78rem; white-space: nowrap; }
.compact-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #66d996; }
.compact-live-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.compact-live-pill { padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: .77rem; }
.compact-live-pill b { color: #85e6ac; margin-left: 5px; }

@media (min-width: 610px) {
    .compact-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .compact-tile { aspect-ratio: 1.55 / 1; }
}
@media (min-width: 900px) {
    .compact-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .compact-tile { aspect-ratio: 1.45 / 1; }
}
@media (max-width: 355px) {
    .compact-tile { padding: 10px; min-height: 100px; }
    .compact-tile strong { font-size: .9rem; }
    .compact-tile-icon { width: 30px; height: 30px; font-size: 1.25rem; }
    .compact-clock { padding: 10px; }
    .compact-clock-form button { min-width: 112px; font-size: .83rem; }
}

/* Checklist de fermeture : une ligne entière est une cible tactile. */
.closing-body .page { width: min(760px, calc(100% - 20px)); padding: 16px 0 36px; }
.closing-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.closing-back { display: inline-block; margin-bottom: 7px; font-size: .81rem; color: #f6a181; font-weight: 800; }
.closing-heading h1 { font-size: clamp(1.35rem, 4.5vw, 2rem); line-height: 1.12; }
.closing-date { display: block; margin-top: 5px; font-size: .78rem; color: #c9c9c9; }
.closing-config-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #4f4f4f;
    font-size: .82rem;
    font-weight: 850;
    white-space: nowrap;
}
.closing-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 5px;
    padding: 12px 13px;
    margin-bottom: 10px;
    border-radius: 13px;
    background: #444;
}
.closing-progress > strong { color: #fff; font-size: 1.3rem; }
.closing-progress > span { color: #ddd; font-size: .83rem; font-weight: 750; }
.closing-progress-track { width: 100%; height: 7px; margin-top: 9px; border-radius: 8px; overflow: hidden; background: #696969; }
.closing-progress-track span { display: block; height: 100%; background: #65d495; transition: width .17s ease; }
.closing-list { display: grid; gap: 8px; }
.closing-tap-form { margin: 0; }
.closing-tap {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 68px;
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    background: #494949;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .12s ease, border-color .12s ease;
}
.closing-tap:disabled { opacity: .75; cursor: wait; }
.closing-tap-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    height: 35px;
    border: 2px solid #aaa;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 900;
    color: transparent;
}
.closing-tap-label { min-width: 0; font-weight: 780; line-height: 1.3; font-size: 1.02rem; }
.closing-tap-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.closing-tap-by { color: #b9edce; font-size: .71rem; line-height: 1.25; }
.closing-tap-by:empty { display: none; }
.closing-tap-form.is-done .closing-tap { background: #31503e; border-color: #65ae81; }
.closing-tap-form.is-done .closing-tap-check { background: #5cc98e; border-color: #5cc98e; color: #153b29; }
.closing-info { margin: 13px 2px 0; color: #c5c5c5; font-size: .78rem; line-height: 1.4; }
.closing-empty { padding: 20px; border: 1px dashed #888; border-radius: 14px; color: #ddd; }
.closing-empty a { display: block; color: #ffab85; margin-top: 8px; font-weight: 800; }

.closing-add-form { padding: 14px; margin: 0 0 15px; background: #454545; border-radius: 14px; }
.closing-add-form label { font-size: .84rem; margin-bottom: 7px; }
.closing-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }
.closing-add-form input,
.closing-edit-form input { min-width: 0; color: #222; border-radius: 10px; padding: 10px; font-size: 1rem; }
.closing-action-primary,
.closing-small-button,
.closing-icon-button { border: 0; border-radius: 10px; font: inherit; font-weight: 850; cursor: pointer; }
.closing-action-primary { min-height: 46px; padding: 10px 13px; background: #ec6432; color: #fff; }
.closing-edit-list { display: grid; gap: 8px; }
.closing-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; background: #474747; border-radius: 12px; }
.closing-edit-form { display: flex; gap: 7px; align-items: center; min-width: 0; margin: 0; }
.closing-edit-form input { flex: 1 1 auto; }
.closing-small-button { flex: 0 0 auto; height: 42px; padding: 0 12px; background: #ec6432; color: #fff; }
.closing-edit-actions { display: flex; gap: 5px; }
.closing-edit-actions form { margin: 0; }
.closing-icon-button { width: 40px; height: 42px; background: #666; color: #fff; font-size: 1.2rem; }
.closing-icon-button.is-danger { color: #ffd2c5; }
.closing-icon-button:disabled { opacity: .3; cursor: default; }

@media (max-width: 540px) {
    .closing-heading { align-items: flex-start; }
    .closing-config-link { font-size: .75rem; padding: 7px 9px; }
    .closing-tap { min-height: 63px; padding: 10px 12px; gap: 11px; }
    .closing-edit-row { grid-template-columns: minmax(0, 1fr); }
    .closing-edit-actions { justify-content: flex-end; }
    .closing-add-row { grid-template-columns: minmax(0, 1fr); }
    .closing-action-primary { width: 100%; }
}

/* Monitoring admin : vue quotidienne compacte, utilisable au pouce. */
.compact-monitor-link {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(236,100,50,.56);
    background: #48403d;
    color: #fff;
}
.compact-monitor-link:hover { background: #59463d; }
.compact-monitor-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #ec6432;
    font-size: 1.4rem;
}
.compact-monitor-link > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
.compact-monitor-link strong { font-size: .97rem; font-weight: 850; }
.compact-monitor-link small { font-size: .75rem; color: #ddd; }
.compact-monitor-arrow { font-size: 1.35rem; color: #ffad8f; }

.monitor-body .page { width: min(760px, calc(100% - 20px)); padding: 12px 0 34px; }
.monitor-body .topbar { min-height: 48px; padding: 8px 14px; flex-direction: row; align-items: center; gap: 8px; background: #383838; }
.monitor-body .topnav { width: auto; gap: 12px; justify-content: flex-end; }
.monitor-body .topnav > a,
.monitor-body .topnav .login-badge { display: none; }
.monitor-body .brand { font-size: 1rem; color: #fff; }
.monitor-body .logout-form { margin: 0; }
.monitor-body .logout-form button { min-height: 34px; padding: 5px 10px; font-size: .78rem; }
.monitor-page { font-variant-numeric: tabular-nums; }
.monitor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.monitor-back { display: inline-block; color: #f7a587; font-weight: 800; font-size: .78rem; margin-bottom: 4px; }
.monitor-head h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.08; }
.monitor-head p { margin: 5px 0 0; color: #cfcfcf; font-size: .75rem; }
.monitor-refresh { flex: 0 0 41px; height: 41px; display: grid; place-items: center; border: 1px solid #777; border-radius: 10px; color: #fff; font-size: 1.45rem; background: #454545; }
.monitor-day-navigation { display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px; }
.monitor-arrow { flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; background: #484848; color: #fff; font-size: 1.65rem; }
.monitor-days { display: flex; flex: 1; gap: 5px; overflow-x: auto; min-width: 0; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.monitor-day { flex: 1 0 42px; min-width: 42px; min-height: 66px; padding: 7px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #444; border: 1px solid #595959; border-radius: 10px; color: #e8e8e8; scroll-snap-align: center; }
.monitor-day small { font-size: .66rem; text-transform: uppercase; font-weight: 700; }
.monitor-day strong { font-size: 1rem; font-weight: 850; line-height: 1; }
.monitor-day i { width: 4px; height: 4px; border-radius: 50%; background: #ff9870; }
.monitor-day.is-selected { background: #ec6432; color: #fff; border-color: #f6a17f; }
.monitor-day.is-selected i { background: #fff; }
.monitor-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.monitor-today { padding: 8px 10px; border-radius: 9px; background: #464646; border: 1px solid #696969; color: #fff; font-size: .77rem; font-weight: 800; white-space: nowrap; }
.monitor-today.is-current { background: #73503f; border-color: #e17d52; }
.monitor-jump { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; margin: 0; }
.monitor-jump label { font-size: .69rem; color: #c3c3c3; white-space: nowrap; }
.monitor-jump input { width: 128px; max-width: 100%; min-width: 0; min-height: 38px; padding: 5px; border-radius: 8px; background: #fff; color: #252525; font: inherit; font-size: .78rem; }
.monitor-jump button { min-width: 36px; min-height: 38px; padding: 4px; border: 0; border-radius: 8px; background: #ec6432; color: #fff; font-size: 1.15rem; }
.monitor-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.monitor-stat { background: #444; border: 1px solid rgba(255,255,255,.14); padding: 11px 9px; border-radius: 12px; min-width: 0; }
.monitor-stat small { display: block; color: #cbcbcb; font-size: .66rem; font-weight: 750; margin-bottom: 5px; }
.monitor-stat strong { display: block; font-size: clamp(1.02rem, 3.4vw, 1.45rem); font-weight: 900; white-space: nowrap; letter-spacing: -.03em; }
.monitor-stat em { font-style: normal; font-size: .73em; color: #cfcfcf; }
.monitor-stat.is-accent { background: #604433; border-color: #bd7047; }
.monitor-total-progress { height: 5px; background: #555; border-radius: 0 0 6px 6px; margin: -1px 6px 17px; overflow: hidden; }
.monitor-total-progress > span { display: block; height: 100%; background: #6bd3a0; }
.monitor-section-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 0 0 10px; }
.monitor-section-head h2 { font-size: 1.02rem; font-weight: 850; margin: 0; }
.monitor-section-head h2 span { font-size: .72rem; color: #aaa; margin-left: 4px; }
.monitor-section-head a { color: #f1ab88; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.monitor-cards { display: grid; gap: 9px; }
.monitor-card { min-width: 0; background: #414141; border: 1px solid #656565; border-radius: 13px; overflow: hidden; }
.monitor-card.is-complete { border-left: 4px solid #64cd98; }
.monitor-card.is-incomplete { border-left: 4px solid #eea16e; }
.monitor-card.is-idle { border-left: 4px solid #777; }
.monitor-card > summary { position: relative; display: flex; align-items: center; gap: 9px; padding: 12px 10px 17px; cursor: pointer; list-style: none; min-height: 72px; }
.monitor-card > summary::-webkit-details-marker { display: none; }
.monitor-avatar { flex: 0 0 37px; width: 37px; height: 37px; border-radius: 10px; display: grid; place-items: center; background: #565656; color: #fff; font-size: 1.05rem; font-weight: 900; }
.monitor-card-name { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.monitor-card-name strong { font-size: .9rem; font-weight: 850; overflow-wrap: anywhere; }
.monitor-card-name small { font-size: .71rem; color: #d2d2d2; }
.monitor-card-time { flex: 0 0 auto; text-align: right; }
.monitor-card-time strong { display: block; color: #fff; font-size: 1rem; font-weight: 900; }
.monitor-card-time small { font-size: .66rem; color: #bcbcbc; }
.monitor-chevron { font-size: 1.25rem; color: #d1d1d1; transition: transform .15s; }
.monitor-card[open] .monitor-chevron { transform: rotate(180deg); }
.monitor-card-progress { position: absolute; left: 56px; right: 11px; bottom: 6px; height: 4px; border-radius: 5px; background: #606060; overflow: hidden; }
.monitor-card-progress > span { display: block; height: 100%; background: #68d29d; }
.monitor-card-body { padding: 11px 11px 13px; }
.monitor-card-substats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.monitor-card-substats span { font-size: .71rem; padding: 5px 8px; border-radius: 7px; background: #535353; color: #d4d4d4; }
.monitor-card-substats b { color: #fff; }
.monitor-task-heading { display: flex; justify-content: space-between; font-size: .67rem; color: #77dca6; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 6px; }
.monitor-task-heading.is-pending { color: #f7b58d; }
.monitor-task { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 8px; border-radius: 8px; background: #4c4c4c; margin-bottom: 5px; }
.monitor-task-icon { display: grid; flex: 0 0 23px; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #2c7852; color: #fff; font-size: .8rem; font-weight: 900; }
.monitor-task.is-pending .monitor-task-icon { background: #805338; }
.monitor-task-content { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.monitor-task-content strong { font-size: .79rem; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.monitor-task-content small { color: #bfbfbf; font-size: .67rem; }
.monitor-task-duration { flex: 0 0 auto; font-size: .78rem; font-weight: 850; color: #fff; }
.monitor-empty-card { font-size: .76rem; color: #c6c6c6; margin: 0; padding: 7px; }
.monitor-empty-all { background: #444; border-radius: 11px; padding: 15px; }
.monitor-note { font-size: .71rem; line-height: 1.45; color: #b5b5b5; margin: 14px 2px 0; }
.monitor-card > summary:focus-visible,
.monitor-day:focus-visible,
.monitor-arrow:focus-visible,
.monitor-jump button:focus-visible,
.compact-monitor-link:focus-visible { outline: 3px solid #ffb18a; outline-offset: 2px; }
@media (max-width: 390px) {
    .monitor-day { flex-basis: 41px; min-width: 41px; }
    .monitor-arrow { flex-basis: 28px; }
    .monitor-stat { padding: 9px 7px; }
    .monitor-jump label { display: none; }
    .monitor-jump input { width: 125px; }
}