:root {
    color-scheme: light;
    --bg: #f6f8fb;
    --surface: #ffffff;
    --ink: #17202a;
    --muted: #667085;
    --line: #d9e1ea;
    --green: #167f68;
    --green-dark: #0e5f4d;
    --blue: #315f9f;
    --amber: #a65f00;
    --red: #b42318;
    --shadow: 0 16px 36px rgba(28, 37, 65, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
}

a {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
    padding: 14px clamp(16px, 4vw, 48px);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-weight: 800;
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    color: var(--muted);
    font-size: 0.78rem;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.main-nav a,
.button {
    min-height: 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: var(--muted);
}

.main-nav a.active,
.main-nav a:hover {
    background: #eaf3f0;
    color: var(--green-dark);
}

.session {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.95rem;
}

.page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 56px;
}

.section-heading {
    margin-bottom: 20px;
}

.section-heading h1 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.08;
}

.section-heading p:not(.eyebrow) {
    max-width: 620px;
    margin: 10px 0 0;
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--green-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.content-panel,
.auth-panel,
.group-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.content-panel {
    padding: clamp(18px, 3vw, 28px);
}

.content-panel.narrow,
.auth-panel {
    width: min(620px, 100%);
    margin: 0 auto;
}

.auth-panel {
    margin-top: 8vh;
    padding: clamp(24px, 4vw, 36px);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    padding: 0 16px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}

.button.primary {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.button.primary:hover {
    background: var(--green-dark);
}

.button.ghost {
    background: transparent;
}

.button.disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.button.small {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.9rem;
}

.form-stack,
.form-grid {
    display: grid;
    gap: 16px;
}

.form-grid > div,
.form-stack {
    min-width: 0;
}

label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #c8d3df;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green);
    outline: 3px solid rgba(22, 127, 104, 0.18);
}

input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    margin-right: 8px;
}

.form-two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.checks.single {
    grid-template-columns: 1fr;
    align-self: end;
}

.checks > div {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.checks label {
    margin: 0;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.flash {
    margin: 0 0 18px;
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid #b8ddd3;
    background: #eaf7f3;
    color: var(--green-dark);
    font-weight: 700;
}

.flash.danger {
    border-color: #f1b9b5;
    background: #fff0ee;
    color: var(--red);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

tbody tr:last-child td {
    border-bottom: 0;
}

.actions-cell {
    text-align: right;
}

.pill,
.mini-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 0.82rem;
    font-weight: 800;
}

.pill.info {
    background: #edf4ff;
    color: var(--blue);
}

.pill.success,
.mini-status.yes {
    background: #e7f5ef;
    color: var(--green-dark);
}

.pill.warning {
    background: #fff3dc;
    color: var(--amber);
}

.mini-status.no {
    background: #f2f4f7;
    color: var(--muted);
}

.mini-status + .mini-status {
    margin-left: 4px;
}

.group-list {
    display: grid;
    gap: 16px;
}

.group-panel {
    overflow: hidden;
}

.group-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 20px;
    cursor: pointer;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
}

.group-panel summary::marker {
    color: var(--green);
}

.group-panel summary strong {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #edf4ff;
    color: var(--blue);
    font-size: 0.95rem;
}

.kid-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 20px 20px;
    list-style: none;
}

.kid-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.kid-list span {
    font-weight: 800;
}

.kid-list small,
.empty-state {
    color: var(--muted);
}

.empty-state {
    margin: 0;
    padding: 20px;
}

.empty-state.compact {
    padding: 8px 0 0;
}

.planning-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef7f1 100%);
    box-shadow: var(--shadow);
}

.planning-hero h1 {
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    line-height: 0.95;
}

.planning-hero p:not(.eyebrow) {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.planning-hero .week-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 16px;
    border-radius: 999px;
    padding: 0 13px;
    background: #edf4ff;
    color: var(--blue);
    font-weight: 900;
}

.date-jump {
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr) auto;
    align-items: end;
    gap: 10px;
    min-width: min(100%, 440px);
}

.date-jump label {
    margin: 0 0 10px;
}

.day-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.validation-panel,
.planning-actions {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 5px solid #7aa7ff;
    border-radius: 8px;
    background: #fbfdff;
    box-shadow: var(--shadow);
}

.validation-panel strong {
    display: block;
    margin-bottom: 6px;
}

.validation-panel p {
    margin: 0;
    color: var(--muted);
}

.planning-form {
    display: grid;
    gap: 20px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.mission-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 430px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.mission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 30px;
}

.mission-tag,
.assigned-chip,
.empty-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 11px;
    font-size: 0.84rem;
    font-weight: 900;
}

.mission-tag.green {
    background: #ddf3e7;
    color: #087044;
}

.mission-tag.amber {
    background: #fff1d5;
    color: #9a5700;
}

.mission-tag.red {
    background: #ffe4e2;
    color: var(--red);
}

.mission-tag.neutral {
    background: #f2f4f7;
    color: #475467;
}

.mission-card h2 {
    margin: 0;
    font-size: clamp(1.28rem, 2vw, 1.7rem);
    line-height: 1.14;
}

.mission-card p {
    margin: 0;
    color: #475467;
    line-height: 1.45;
}

.assigned-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.assigned-chip {
    border: 1px solid #cdd8e6;
    background: #fff;
}

.assigned-chip small {
    margin-left: 5px;
    color: var(--muted);
}

.empty-chip {
    background: #f8fafc;
    color: var(--muted);
}

.assignment-box {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.assignment-box legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.assignment-box label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.assignment-box label:hover,
.assignment-box label.suggested {
    background: #eef6ff;
}

.assignment-box input {
    flex: 0 0 auto;
    margin: 0;
}

.assignment-box span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.assignment-box small {
    color: var(--muted);
    font-weight: 700;
}

.planning-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 0;
    border-left-color: var(--line);
}

form ul {
    margin: 7px 0 0;
    padding-left: 18px;
    color: var(--red);
}

/* ── Pointage / Attendance ── */

.attendance-block {
    margin-bottom: 36px;
}

.attendance-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.attendance-block-header h2 {
    margin: 4px 0 0;
    font-size: 1.25rem;
}

.attendance-block-legend {
    display: flex;
    gap: 12px;
    align-items: center;
}

.legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.legend-item small {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.75;
}

.legend-item.garderie  { background: #fdf4e7; color: var(--amber); }
.legend-item.morning   { background: #eaf3f0; color: var(--green-dark); }
.legend-item.canteen   { background: #eef3fb; color: var(--blue); }
.legend-item.afternoon { background: #f3f0fb; color: #6941c6; }

.attendance-block-notice {
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fff8ec;
    border: 1px solid #f5d48a;
    color: var(--amber);
    font-size: 0.85rem;
    font-weight: 600;
    align-self: center;
}

.attendance-panel {
    margin-bottom: 14px;
}

.attendance-group-label {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.attendance-col-header {
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.morning-cols   { grid-template-columns: 1fr 76px 76px 76px 76px 1fr; }
.afternoon-cols { grid-template-columns: 1fr 120px; }

.attendance-col-header span:first-child { text-align: left; }

.attendance-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attendance-row {
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.attendance-row:last-child {
    border-bottom: none;
}

.attendance-name {
    font-weight: 700;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* On desktop, check-row is invisible to the parent grid:
   its children become direct grid items, perfectly aligned with the col-header. */
.check-row {
    display: contents;
}

/* Text labels inside chips — hidden on desktop, visible on mobile */
.check-label {
    display: none;
}

.check-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.check-slot input[type="checkbox"] {
    width: 20px;
    min-height: 20px;
    margin: 0;
    accent-color: var(--green);
    cursor: pointer;
}

.check-slot--large input[type="checkbox"] {
    width: 24px;
    min-height: 24px;
}

.check-slot--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.check-slot--disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.attendance-note {
    min-height: 36px;
    font-size: 0.9rem;
}

.attendance-summary {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--muted);
}

.attendance-summary strong {
    color: var(--ink);
}

/* ── Attendance History (kid detail page) ── */

.attendance-history-header,
.attendance-history-row {
    display: grid;
    grid-template-columns: 110px repeat(4, 64px) 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.attendance-history-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}

.attendance-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attendance-history-row {
    border-bottom: 1px solid var(--line);
}

.attendance-history-row:last-child {
    border-bottom: none;
}

.attendance-history-row.history-absent {
    opacity: 0.5;
}

.history-date a {
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--blue);
}

.history-date a:hover {
    text-decoration: underline;
}

.history-dot {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
}

.dot-yes { color: var(--green); }
.dot-no  { color: var(--line); }

.history-note {
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Attendance Summary ── */

.summary-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    text-align: center;
}

.summary-stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.summary-stat-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-stat-label small {
    font-weight: 500;
    opacity: 0.7;
    text-transform: none;
}

.garderie-stat  { background: #fdf4e7; border-color: #f5d48a; color: var(--amber); }
.morning-stat   { background: #eaf3f0; border-color: #b3ddd5; color: var(--green-dark); }
.canteen-stat   { background: #eef3fb; border-color: #b8cff0; color: var(--blue); }
.afternoon-stat { background: #f3eefb; border-color: #cdb8f0; color: #6a3db5; }
.absent-stat    { background: #fff0ee; border-color: #f1b9b5; color: var(--red); }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.summary-full-width {
    grid-column: 1 / -1;
}

.summary-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
}

.summary-panel-header h2 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.summary-créneau-time {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.summary-count {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 6px;
}

.garderie-header  { border-color: #f5d48a; }
.garderie-header  .summary-count { background: #fdf4e7; color: var(--amber); }
.morning-header   { border-color: #b3ddd5; }
.morning-header   .summary-count { background: #eaf3f0; color: var(--green-dark); }
.canteen-header   { border-color: #b8cff0; }
.canteen-header   .summary-count { background: #eef3fb; color: var(--blue); }
.afternoon-header { border-color: #cdb8f0; }
.afternoon-header .summary-count { background: #f3eefb; color: #6a3db5; }
.absent-header    { border-color: #f1b9b5; }
.absent-header    .summary-count { background: #fff0ee; color: var(--red); }

.kid-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kid-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: 0.85rem;
    font-weight: 600;
}

.kid-chip--absent {
    background: #fff0ee;
    border-color: #f1b9b5;
    color: var(--red);
    opacity: 0.85;
}

.allergy-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--amber);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    cursor: help;
}

.toolbar-actions {
    display: flex;
    gap: 8px;
}

.empty-state.compact {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Dashboard ── */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
}

.stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--green);
    line-height: 1;
}

.stat-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dashboard-full-width {
    grid-column: 1 / -1;
}

.panel-title {
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* Age bar chart */
.age-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.age-row {
    display: grid;
    grid-template-columns: 48px 1fr 28px;
    align-items: center;
    gap: 10px;
}

.age-label {
    font-size: 0.85rem;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
}

.bar-track {
    height: 20px;
    background: #eaf3f0;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.bar-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
}

/* Week planning grid */
.week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
}

.week-day.is-today {
    border-color: var(--green);
    background: #eaf7f4;
}

.week-day-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--muted);
}

.week-day-date {
    font-size: 1.1rem;
    font-weight: 700;
}

.week-day-status {
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* Presence list */
.presence-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.presence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.presence-name {
    flex: 1;
    font-weight: 700;
}

.presence-hours {
    font-size: 0.85rem;
    color: var(--muted);
}

.pill.neutral {
    background: #f1f3f5;
    color: var(--muted);
    border-color: var(--line);
}

@media (max-width: 1180px) {
    .mission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .main-nav,
    .session,
    .toolbar {
        width: 100%;
        flex-wrap: wrap;
    }

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

    .toolbar {
        align-items: flex-start;
    }

    .form-two-cols,
    .checks {
        grid-template-columns: 1fr;
    }

    /* Date-jump: hide label, keep input + button on one row */
    .date-jump {
        grid-template-columns: 1fr auto;
    }

    .date-jump label {
        display: none;
    }

    .planning-hero {
        grid-template-columns: 1fr;
    }

    .planning-hero,
    .planning-actions {
        align-items: stretch;
        flex-direction: column;
    }

    /* day-nav stays horizontal, just stretches full width */
    .day-nav {
        width: 100%;
    }

    .day-nav .button,
    .day-nav span.button {
        flex: 1;
        text-align: center;
    }

    .mission-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .week-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Attendance: tablette (≤ 860px) ── */
@media (max-width: 860px) {
    .morning-cols {
        grid-template-columns: 1fr 64px 64px 64px 64px minmax(90px, 1fr);
    }

    .afternoon-cols {
        grid-template-columns: 1fr 100px;
    }

    .attendance-col-header {
        font-size: 0.65rem;
        letter-spacing: 0.02em;
    }

    .attendance-block-legend {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .legend-item {
        padding: 5px 8px;
        font-size: 0.72rem;
    }
}

/* ── Attendance: mobile (≤ 640px) — layout carte ── */
@media (max-width: 640px) {
    /* Cache les en-têtes de colonnes (info portée par les chips) */
    .attendance-col-header { display: none; }

    /* Cache la légende (info portée par les chips) */
    .attendance-block-legend { display: none; }

    /* Le header du bloc passe en colonne */
    .attendance-block-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Chaque ligne devient une carte verticale */
    .attendance-row.morning-cols,
    .attendance-row.afternoon-cols {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 0;
    }

    /* Le nom de l'enfant en tête de carte */
    .attendance-name {
        font-size: 1rem;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--line);
    }

    /* Le groupe de checkboxes revient à un flex normal */
    .check-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Chips stylisées : chaque case devient un bouton pill */
    .check-slot {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 24px;
        border: 1.5px solid var(--line);
        background: var(--surface);
        transition: border-color 0.15s, background 0.15s;
    }

    .check-slot:has(input:checked) {
        border-color: var(--green);
        background: #eaf3f0;
    }

    .check-slot--disabled {
        background: var(--bg);
        border-color: transparent;
        opacity: 0.4;
    }

    /* Labels visibles dans les chips */
    .check-label {
        display: inline;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1;
        user-select: none;
    }

    /* Checkbox légèrement plus petite dans les chips */
    .check-slot input[type="checkbox"],
    .check-slot--large input[type="checkbox"] {
        width: 18px;
        min-height: 18px;
        flex-shrink: 0;
    }

    /* Le champ note prend toute la largeur */
    .attendance-note {
        width: 100%;
    }

    /* Résumé chiffré en colonne sur mobile */
    .attendance-summary {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    /* La notice après-midi reste lisible */
    .attendance-block-notice {
        font-size: 0.8rem;
    }
}