:root {
    --brand: #0f766e;
    --brand-dark: #115e59;
    --accent: #b45309;
    --bg: #f8fafc;
    --panel: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --danger: #b91c1c;
    --ok: #15803d;
    --radius: 10px;
    --maxw: 960px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
}

/* Arabic gets a slightly larger, more legible rendering */
:root[dir="rtl"] body, [dir="rtl"] { font-size: 1.03rem; }

a { color: var(--brand-dark); }
h1, h2, h3 { color: var(--brand-dark); line-height: 1.25; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.site-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.75rem 1.25rem; background: var(--panel);
    border-bottom: 3px solid var(--brand);
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text); }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff;
    font-weight: 700;
}
.brand-text { display: flex; flex-direction: column; }
.brand-text small { color: var(--muted); }

.site-main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem; }
.site-footer {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; color: var(--muted); border-top: 1px solid var(--border);
}

/* language selector */
.lang-selector { display: flex; gap: 0.5rem; }
.lang-link { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; }
.lang-link.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* hero / home */
.hero { text-align: center; padding: 1rem; }
.lead { font-size: 1.2rem; color: var(--muted); }
.lang-choice { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.lang-choice-btn {
    display: block; min-width: 140px; padding: 1rem; border: 2px solid var(--brand);
    border-radius: var(--radius); text-decoration: none; font-size: 1.2rem; color: var(--brand-dark);
}
.lang-choice-btn:hover { background: var(--brand); color: #fff; }
.form-choice { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.offer-choice, .formula-choice { margin: 0.75rem 0; }

/* buttons */
.btn {
    display: inline-block; padding: 0.6rem 1.1rem; border-radius: var(--radius);
    border: 1px solid transparent; font: inherit; cursor: pointer; text-decoration: none; text-align: center;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: #fff; color: var(--brand-dark); border-color: var(--brand); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link { background: none; border: none; color: var(--brand-dark); cursor: pointer; text-decoration: underline; padding: 0; }

/* cards / panels */
.card, .panel {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.1rem 1.25rem; margin: 1rem 0;
}

/* wizard */
.progress-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1rem 0; }
.progress-steps li { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border-radius: 999px; background: #eef2f7; color: var(--muted); font-size: 0.9rem; }
.progress-steps li.current { background: var(--brand); color: #fff; }
.progress-steps li.done { background: #d1fae5; color: var(--ok); }
.step-num { font-weight: 700; }
.wizard-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; }
label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
input, select, textarea {
    width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; background: #fff;
}
textarea { min-height: 70px; }
.check, .radio { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; margin: 0.4rem 0; }
.check input, .radio input { width: auto; margin-top: 0.25rem; }
.radio-list { display: flex; flex-direction: column; gap: 0.3rem; }
.question { font-weight: 600; }
.hint, .note { color: var(--muted); font-size: 0.92rem; }

.participant-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 0.75rem 0; }
.participant-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.doc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.ok { color: var(--ok); font-weight: 600; }
.err { color: var(--danger); font-weight: 600; }

.error-summary { border: 1px solid var(--danger); background: #fef2f2; color: var(--danger); border-radius: var(--radius); padding: 0.75rem 1rem; }
.error-summary ul { margin: 0; padding-inline-start: 1.2rem; }

.total { margin-top: 1rem; font-size: 1.1rem; }
.info dt { font-weight: 700; margin-top: 0.5rem; }
.info dd { margin: 0 0 0.3rem 0; }

/* confirmation */
.confirmation { text-align: center; max-width: 600px; margin: 0 auto; }
.badge-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.confirmation .info { text-align: start; display: inline-block; }

/* tables */
table.data, .summary table, .contract table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
table.data th, table.data td, .summary td, .summary th, .contract th, .contract td { border: 1px solid var(--border); padding: 0.5rem 0.6rem; text-align: start; }
table.data th { background: #f1f5f9; }
/* Tables larger than their container scroll instead of spilling out of the card. */
.table-wrap { overflow-x: auto; margin: 0.5rem 0; }
.table-wrap > table.data { margin: 0; }

/* admin */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-nav { background: #0f172a; color: #e2e8f0; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.admin-nav a { color: #cbd5e1; text-decoration: none; display: block; padding: 0.5rem 0.6rem; border-radius: 8px; }
.admin-nav a:hover, .admin-nav a.active { background: #1e293b; color: #fff; }
.admin-brand { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: #fff; }
.admin-content { padding: 1.5rem; overflow-x: auto; }
.logout-form { margin-top: auto; }
.admin-login { max-width: 420px; margin: 2rem auto; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; }
.stat-num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--brand-dark); }
.stat-label { color: var(--muted); font-size: 0.9rem; }
.dist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dist li { background: #eef2f7; padding: 0.35rem 0.7rem; border-radius: 999px; }
.badge { display: inline-block; background: var(--brand); color: #fff; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem; margin-inline-end: 0.4rem; }
.badge.badge-converted { background: var(--ok); }
.badge.badge-relaunch { background: #b45309; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0; }
.filters input, .filters select { width: auto; }
.list-head, .detail-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
/* Admin — registration detail.
   A plain vertical stack: every section spans the full content width, in reading order.
   It used to be an auto-fit grid, which cut a 1920px screen into five ~300px columns —
   tables scrolled sideways while the screen sat empty, and every panel of a row was
   stretched to the tallest one. */
.detail-grid { display: flex; flex-direction: column; gap: 1rem; }
/* The gap alone spaces the sections: panels must not add their own vertical margin. */
.detail-grid > .panel, .detail-band > .panel { margin: 0; }

/* Short, table-free panels sit side by side. align-items: start is the important bit:
   without it each panel is stretched to the height of its tallest neighbour, which is
   what produced the large blank areas. */
.detail-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* Without this, a wide child (table) forces the item past its track and overflows the panel. */
.detail-grid > *, .detail-band > * { min-width: 0; }

/* A bare button inside a .grid is a control, not a column: now that the panels are wide,
   it would otherwise be blown up to the full width and height of its track. Scoped to
   this page so the public wizard keeps its own buttons untouched. */
.detail-grid .grid > .btn { align-self: end; justify-self: start; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.prose { max-width: 720px; }

/* contract */
.contract { background: #fff; max-width: 820px; margin: 1rem auto; padding: 2rem; }
/* Print-frame: thead/tfoot spacers repeat on every printed page. Hidden on screen. */
.print-frame { width: 100%; border-collapse: collapse; }
.print-frame > thead > tr > td, .print-frame > tfoot > tr > td, .print-frame > tbody > tr > td { padding: 0; border: 0; }
.print-frame thead, .print-frame tfoot { display: none; }
.contract .sub { font-weight: 600; }
.contract .ref { color: var(--muted); }
.contract h2 { font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: 0.2rem; margin-top: 1.3rem; }
.contract table.ctbl { width: 100%; border-collapse: collapse; margin: 0.4rem 0; }
.contract table.ctbl th, .contract table.ctbl td { border: 1px solid #999; padding: 0.35rem 0.5rem; text-align: start; vertical-align: top; font-size: 0.9rem; }
.contract table.ctbl th { width: 30%; background: #f5f5f5; font-weight: 600; }
.contract table.ctbl.grid3 th { width: auto; }
.contract ul.plain { list-style: none; padding-inline-start: 0; }
.contract .total-line { font-size: 1.05rem; margin-top: 0.5rem; }
.contract .signatures { display: flex; gap: 1.25rem; margin-top: 1.25rem; }
.contract .sign-box { flex: 1; border: 1px solid #999; border-radius: 6px; padding: 0.75rem 0.9rem; }
.contract .sign-box p { margin: 0.25rem 0; font-size: 0.9rem; }
.contract .sign-title { font-weight: 700; }
.contract .sign-box .mention { color: var(--muted); font-style: italic; }
.contract .sign-label { margin-top: 0.75rem; padding-top: 0.4rem; border-top: 1px dashed #ccc; min-height: 2.2cm; }
.toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

/* responsive */
@media (max-width: 760px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .logout-form { margin-inline-start: auto; }
}

/* print — contract only */
@media print {
    .no-print, .site-header, .site-footer, .admin-nav, .toolbar, .wizard-nav { display: none !important; }
    .admin-shell { display: block; }
    .admin-content { padding: 0; }
    body { background: #fff; }

    /* Compact typography to fit ~2 A4 pages. Side margins come from .contract padding;
       TOP/BOTTOM margins come from the print-frame thead/tfoot spacers, which repeat
       on EVERY page — so page 2+ get the same margins as page 1, whatever the user's
       Chrome "Margins" print setting is (Default / None / Custom). */
    .contract { margin: 0; padding: 0 1.5cm; max-width: 100%; font-size: 8.6pt; line-height: 1.3; color: #111; }
    .print-frame thead { display: table-header-group; }
    .print-frame tfoot { display: table-footer-group; }
    .frame-top { height: 1.1cm; }
    .frame-bottom { height: 1.1cm; }
    .contract .sub { font-size: 8.6pt; }
    .contract .ref { font-size: 8pt; }
    .contract h1 { font-size: 13pt; margin: 0 0 0.1rem; }
    .contract h2 { font-size: 9.6pt; margin: 0.4rem 0 0.12rem; padding-bottom: 0.1rem; break-after: avoid; page-break-after: avoid; }
    .contract h3 { font-size: 9pt; margin: 0.3rem 0 0.1rem; break-after: avoid; page-break-after: avoid; }
    .contract p { margin: 0.18rem 0; }
    .contract ul { margin: 0.15rem 0; padding-inline-start: 1.1rem; }

    /* Keep each block whole across page breaks. */
    .contract table.ctbl, .contract .signatures, .contract .sign-box, .contract tr {
        break-inside: avoid; page-break-inside: avoid;
    }
    .contract table.ctbl { margin: 0.22rem 0; }
    .contract table.ctbl th, .contract table.ctbl td { font-size: 8pt; padding: 0.1rem 0.35rem; }
    .contract .total-line { font-size: 9.5pt; margin: 0.28rem 0; }
    .contract .signatures { margin-top: 0.55rem; gap: 0.9rem; }
    .contract .sign-box { padding: 0.45rem 0.6rem; }
    .contract .sign-box p { font-size: 8pt; margin: 0.14rem 0; }
    .contract .sign-label { min-height: 1.3cm; padding-top: 0.3rem; }

    /* margin 0 → the browser's "Margins" dropdown can't change anything; the
       whitespace comes entirely from .contract's padding (consistent everywhere). */
    @page { size: A4; margin: 0; }
}

/* Family portal — payment summary rows: label left, amount right with a clear gap. */
.pay-summary { margin: .75rem 0; }
.pay-row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .35rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.pay-row:last-child { border-bottom: 0; }

/* Family portal — document upload zone + status banners. */
.doc-upload {
    margin: .75rem 0;
    padding: .85rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}
.doc-upload input[type="file"] { display: block; margin: .5rem 0; }
.alert {
    margin: .75rem 0;
    padding: .7rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
}
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Admin — registration edit form. */
.sub-panel { border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem; margin-bottom: 0.85rem; }
.sub-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.panel.confirm { border-color: var(--brand); }
.warn { color: #b45309; font-weight: 600; }

/* Admin — payment panel: the three zones (encaissement / en ligne / forçage).
   Full width now, so the three read side by side and fall back to a single column
   on a narrow screen. align-items: start again, for the same reason as .detail-band. */
.pay-balance { margin: 0 0 0.75rem; }
.pay-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}
.pay-zones > .pay-zone { margin-bottom: 0; }
.pay-zone {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
}
.pay-zone > h3, .pay-zone > h4 { margin: 0 0 0.25rem; font-size: 1rem; }
.pay-zone > h4 { margin-top: 0.85rem; }
.link-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.link-box input { flex: 1 1 18rem; font-size: 0.9rem; background: #f8fafc; }

/* Admin — HelloAsso synchronisation banner. Red when the pass is overdue: a silent
   synchroniser is collected money nobody sees. */
.sync-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .95rem;
}
.sync-banner.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.sync-banner.bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Admin — tabbed screens (global payments). */
.tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
.tabs .tab {
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
}
.tabs .tab.active { background: #fff; border-color: var(--border); color: var(--brand); }
.tabs button.tab { background: none; border: 1px solid transparent; border-bottom: none; cursor: pointer; font: inherit; }
.campaign-body { white-space: pre-wrap; font-family: inherit; background: #f8fafc; padding: 0.85rem; border-radius: 8px; }
.mass-report { margin: 0.5rem 0; padding-inline-start: 1.2rem; font-size: 0.92rem; }
table.data thead a { text-decoration: none; color: inherit; }

/* Admin — payments table: a refunded entry reads as struck out, but its actions stay usable. */
.badge-manual { background: #6b7280; }
.badge-helloasso { background: #0f766e; }
table.data tr.refunded td { color: var(--muted); text-decoration: line-through; }
table.data tr.refunded td.row-actions { text-decoration: none; }
/* The action buttons wrap onto a second line inside their cell rather than widening the
   table until it needs a horizontal scrollbar. */
table.data td.row-actions { white-space: normal; }
table.data td.row-actions .btn {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    margin-inline-end: 0.25rem;
    margin-block: 0.1rem;
}
table.data tr.row-form > td { background: #f8fafc; }

/* Admin — Outbox health alert card + failures list. */
.outbox-alert {
    display: block;
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 600;
}
.outbox-alert.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.outbox-alert.bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.err-cell { max-width: 28rem; font-size: .85rem; color: #6b7280; word-break: break-word; }

/* Admin — 2FA setup. */
.qr { width: 200px; height: 200px; margin: .5rem 0; }
.qr svg { width: 100%; height: 100%; }
.recovery-codes { columns: 2; list-style: none; padding: 0; margin: .5rem 0; font-size: 1.05rem; }
.recovery-codes li { padding: .15rem 0; }
.btn-danger { background: #b91c1c; color: #fff; }

/* Admin — Budget. Logical properties throughout so the Arabic RTL layout mirrors. */
.stat-num.negative { color: var(--danger); }

/* Holiday dates, as removable chips: the whole list is readable at a glance. */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.5rem 0; }
.chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding-block: 0.25rem; padding-inline: 0.6rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
    font-size: 0.92rem;
}
.chip-remove {
    border: 0; background: transparent; cursor: pointer; line-height: 1;
    font-size: 1.1rem; color: var(--danger); padding: 0;
}

/* Collapsible list of the retained sessions — checking the holidays at a glance. */
.sessions { margin-block: 0.75rem; }
.sessions > summary { cursor: pointer; font-weight: 600; color: var(--brand-dark); }
.session-list {
    columns: 3; column-gap: 1.5rem;
    margin-block-start: 0.5rem; padding-inline-start: 1.5rem;
    font-size: 0.92rem;
}
@media (max-width: 900px) { .session-list { columns: 2; } }
@media (max-width: 600px) { .session-list { columns: 1; } }

/* A teacher taken out of the budget keeps their line, visibly set aside. */
tr.row-muted > td { color: var(--muted); }


/* ==========================================================================
   Espace enseignant (/prof) et pratique en ligne — lot 13 / 16 v0
   Le jeu lui-même a sa propre feuille (css/practice.css), chargée uniquement
   par les pages qui jouent : rien de tout cela ne pèse sur le formulaire public.
   ========================================================================== */

/* --- Coque de l'espace enseignant ------------------------------------- */
/* Même structure que le back-office, accent différent : personne ne doit
   croire qu'il est dans l'administration. */
.prof-shell .admin-nav { background: #14352e; }
.prof-shell .admin-nav a:hover, .prof-shell .admin-nav a.active { background: #1f4d43; }
.prof-who { margin: 0 0 .5rem; font-size: .85rem; color: #9fc4b8; }
.prof-back { margin-top: .75rem; font-size: .85rem; }
.badge.badge-admin { background: #6d28d9; }

/* --- Étiquettes d'état ------------------------------------------------- */
.pill {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
}
.pill-published { background: #dcfce7; color: #14532d; }
.pill-draft { background: #fef3c7; color: #78350f; }
.pill-archived { background: #e5e7eb; color: #4b5563; }

/* --- Relecture d'un exercice ------------------------------------------ */
.issue-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; }
.issue {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: .45rem .7rem;
    border-radius: 8px;
    border-inline-start: 4px solid transparent;
    background: #f8fafc;
    font-size: .92rem;
}
.issue code { font-size: .8rem; color: #64748b; white-space: nowrap; }
.issue-error { border-inline-start-color: #b91c1c; background: #fef2f2; }
.issue-warning { border-inline-start-color: #b45309; background: #fffbeb; }

/* --- Le JSON d'un exercice -------------------------------------------- */
.json-label { display: block; margin-top: .75rem; }
.json-area, .json-view {
    width: 100%;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
    /* Le JSON contient de l'arabe : il se lit de gauche à droite comme du code,
       sinon les accolades migrent en fin de ligne. */
    direction: ltr;
    text-align: left;
}
.json-view {
    margin: 0;
    max-height: 26rem;
    overflow: auto;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    align-items: end;
}

/* --- Suivi : la barre « du premier coup » ------------------------------ */
.bar-cell { width: 120px; }
.bar {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand) var(--bar, 0%), #e5e7eb var(--bar, 0%));
}
.muted-row { color: var(--muted); }

/* --- Banque de sons ---------------------------------------------------- */
.clip-key { font-size: 1.4rem; font-family: "Noto Naskh Arabic", "Traditional Arabic", serif; }
.clip-key-input { font-size: 1.3rem; font-family: "Noto Naskh Arabic", "Traditional Arabic", serif; }
.chip.chip-missing { background: #fef3c7; color: #78350f; font-size: 1.1rem; }

.rec { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rec-preview { max-width: 200px; height: 34px; }
.rec-note { font-size: .82rem; color: var(--muted); }
.rec-note[data-tone="ok"] { color: var(--ok); }
.rec-note[data-tone="err"] { color: #b91c1c; }
.rec-note[data-tone="rec"] { color: #b45309; font-weight: 600; }
.rec-btn.is-recording { background: #b91c1c; color: #fff; }
.rec-standalone {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem;
    padding: .75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
}
.rec-key-label { display: grid; gap: .25rem; }

/* --- Portail famille : la pratique en ligne ---------------------------- */
.practice-page { max-width: 780px; margin: 0 auto; padding: 0 .25rem; }
.practice-crumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    font-size: .9rem;
    color: var(--muted);
}
.practice-teaser { border-inline-start: 4px solid var(--brand); }
.practice-child { margin-bottom: 1rem; }

.practice-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.practice-card {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}
.practice-card-body { flex: 1 1 240px; min-width: 0; }
.practice-card h3 { margin: 0 0 .2rem; }
.practice-best { margin: .35rem 0 0; font-weight: 600; color: var(--brand-dark); }
.practice-new { color: var(--muted); font-weight: 500; }
.practice-plays { font-weight: 400; color: var(--muted); margin-inline-start: .5rem; }
/* Une cible confortable : ce bouton est souvent touché par un enfant. */
.practice-play { min-height: 48px; display: inline-flex; align-items: center; }

@media (max-width: 720px) {
    .practice-card { flex-direction: column; align-items: stretch; }
    .practice-play { justify-content: center; }
}


/* ==========================================================================
   Éditeur d'exercices (/prof/pratique/{id}) — lot 19a
   ========================================================================== */

/* --- Onglets ----------------------------------------------------------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 2px solid var(--border);
    margin: 1rem 0 0;
}
.tab {
    font: inherit;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: .6rem .9rem;
    margin-bottom: -2px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.tab:hover { color: var(--brand-dark); }
.tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tab-badge {
    min-width: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: .78rem;
    text-align: center;
}
.tab-badge.is-error { background: #fee2e2; color: #991b1b; }
.tab-badge.is-warning { background: #fef3c7; color: #78350f; }
.tab-panel { padding-top: 1rem; }

/* --- Deux colonnes : la liste des questions, puis celle qu'on écrit ----- */
.editor {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 980px) {
    .editor { grid-template-columns: 1fr; }
}

.editor-list {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.editor-list-head { display: flex; align-items: center; justify-content: space-between; }
.editor-list-head h3 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.editor-restart { align-self: stretch; }

.question-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.question-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.question-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(15,118,110,.15); }

.question-open {
    width: 100%;
    display: flex;
    gap: .6rem;
    align-items: center;
    text-align: start;
    font: inherit;
    background: none;
    border: none;
    padding: .6rem .7rem;
    cursor: pointer;
}
.question-rank {
    flex: 0 0 auto;
    width: 1.7rem; height: 1.7rem;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}
.question-body { flex: 1 1 auto; min-width: 0; display: grid; }
.question-type { font-size: .75rem; color: var(--muted); font-weight: 600; }
.question-headline {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.question-sound { flex: 0 0 auto; font-size: 1rem; }
.question-sound.has-sound { color: var(--ok); }
.question-sound.no-sound { color: #b45309; }

.question-actions {
    display: flex;
    gap: .25rem;
    padding: 0 .5rem .5rem;
    flex-wrap: wrap;
}
/* Dupliquer est l'action la plus utilisée : elle est visible, pas dans un menu. */
.question-actions .btn-dup { flex: 1 1 auto; }
.question-actions .btn { padding: .3rem .6rem; font-size: .85rem; }

.editor-add {
    display: flex;
    gap: .5rem;
    align-items: end;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: .6rem;
}
.editor-add label { flex: 1 1 160px; display: grid; gap: .25rem; }

/* --- Le formulaire, et l'aperçu à côté ---------------------------------- */
.editor-form {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
.editor-form-head h3 { margin: 0 0 .75rem; }
.editor-panes {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 380px);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1240px) {
    .editor-panes { grid-template-columns: 1fr; }
}
.editor-fields { display: grid; gap: .6rem; }
.editor-fields label { display: grid; gap: .25rem; }
.field { display: grid; gap: .35rem; }
.field-label { font-weight: 600; }
.editor-preview h4 { margin: 0 0 .5rem; }

/* Les champs arabes : police scolaire, sens d'écriture correct. */
.ar-field {
    font-family: "Noto Naskh Arabic", "Traditional Arabic", serif;
    font-size: 1.15rem;
    direction: rtl;
    text-align: right;
}
.ar-word { font-size: 1.5rem; }

/* --- La barre de harakat ------------------------------------------------ */
.haraka-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding: .35rem .5rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.haraka-label { font-size: .78rem; color: var(--muted); margin-inline-end: .25rem; }
.haraka {
    font-family: "Noto Naskh Arabic", "Traditional Arabic", serif;
    font-size: 1.35rem;
    line-height: 1;
    min-width: 2.4rem;
    min-height: 2.4rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.haraka:hover { border-color: var(--brand); }
.haraka:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.haraka-glyph { pointer-events: none; }

/* --- Les propositions --------------------------------------------------- */
.choice-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.choice-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .3rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
}
.choice-row.is-answer { border-color: var(--ok); background: #f0fdf4; }
.choice-row input[type="text"], .choice-row input:not([type]) { flex: 1 1 auto; }
.choice-correct { display: inline-flex; align-items: center; }
.fixed-answers { display: flex; flex-wrap: wrap; gap: .4rem; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Le choix du son ---------------------------------------------------- */
.sound-picker { display: grid; gap: .4rem; }
.sound-current { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.btn-play { padding: .2rem .55rem; font-size: .9rem; }
.sound-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem;
    display: grid;
    gap: .6rem;
    background: #f8fafc;
}
.sound-search { display: grid; gap: .25rem; }
.sound-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 17rem; overflow: auto; }
.sound-row { display: flex; align-items: center; gap: .4rem; }
.sound-row.is-current { background: #ecfdf5; border-radius: 8px; }
.sound-pick {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    text-align: start;
    font: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .3rem .5rem;
    cursor: pointer;
}
.sound-pick:hover { border-color: var(--brand); }
.sound-record { border-top: 1px dashed var(--border); padding-top: .6rem; }
.sound-record h4 { margin: 0 0 .4rem; font-size: .95rem; }

/* --- La progression ------------------------------------------------------ */
.progression { display: grid; gap: .6rem; }
.letter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .4rem;
}
.letter-cell {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .3rem;
    text-align: center;
    background: #fff;
}
.letter-cell.is-known { background: #ecfdf5; border-color: #6ee7b7; }
.letter-cell.is-new { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(15,118,110,.15); }
.letter-toggle {
    font-family: "Noto Naskh Arabic", "Traditional Arabic", serif;
    font-size: 1.6rem;
    line-height: 1.2;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
}
.letter-cell.is-known .letter-toggle { color: var(--brand-dark); font-weight: 700; }
.letter-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.letter-toggle.is-extra {
    display: inline-block;
    width: auto;
    padding: 0 .35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1.2rem;
}
.letter-new { display: flex; align-items: center; justify-content: center; gap: .2rem; font-size: .7rem; color: var(--muted); }

/* --- L'aperçu dans l'éditeur --------------------------------------------- */
/* Plus compact que le vrai jeu : c'est un panneau, pas un écran de téléphone. */
.pr-preview { padding: 12px 10px 16px; gap: 10px; }
.pr-preview .pr-tile { min-height: 72px; }
.pr-preview .pr-stage { padding: 14px 12px 16px; }
.pr-speak-inert {
    opacity: .75;
    cursor: default;
    font-family: "Noto Naskh Arabic", "Traditional Arabic", serif;
}
.preview-hint { margin-top: .4rem; }

.published-questions { display: grid; gap: 1rem; }
.published-question { max-width: 520px; }

/* ==========================================================================
   « À qui ? » — audience d'un exercice (lot 20)
   ========================================================================== */

.audience { display: grid; gap: .75rem; }

/* Le total vivant : c'est lui qu'on regarde en cochant. */
.audience-total {
    margin: 0;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    font-size: 1rem;
}
.audience-chip {
    display: inline-block;
    margin-inline-start: .4rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}
.audience-chip.audience-excluded { background: #fef3c7; color: #78350f; }
.audience-chip.audience-optout { background: #e5e7eb; color: #374151; }

.audience-classes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.audience-class {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem .6rem;
    background: #fff;
}
.audience-class.is-chosen { border-color: var(--brand); background: #f8fffd; }
.audience-class-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.audience-pick { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; cursor: pointer; }
.audience-class-name { font-weight: 600; }

.audience-pupils {
    list-style: none;
    margin: .5rem 0 0;
    padding: .5rem 0 0;
    border-top: 1px dashed var(--border);
    display: grid;
    gap: .25rem;
}
.audience-pupil {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .25rem .35rem;
    border-radius: 8px;
}
.audience-pupil-name { flex: 1 1 auto; }
.audience-pupil.audience-excluded { background: #fffbeb; }

/* Un élève retiré globalement : grisé et non modifiable ici. */
.audience-pupil.audience-optedout { background: #f8fafc; color: var(--muted); }

.audience-switch { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.audience-tag {
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.audience-tag.audience-excluded { background: #fef3c7; color: #78350f; }
.audience-tag.audience-optout { background: #e5e7eb; color: #374151; }

/* Le choix des classes à la création */
.class-picker { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.class-picker label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }