/* Commandes visibles uniquement pendant la configuration de la salle. */
.desk-rotate {
    display: none;
    position: absolute;
    z-index: 3;
    top: .12rem;
    right: .25rem;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid #607a91;
    border-radius: 50%;
    background: #fff;
    color: #244d75;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

/* Bibliothèque privée de cours PDF. */
.course-library-page { max-width: 1500px; }
.course-page-title { align-items: center; }
.course-storage {
    min-width: 180px;
    padding: .8rem 1rem;
    border: 1px solid #cad6df;
    border-radius: 13px;
    background: #fff;
    text-align: right;
}
.course-storage strong, .course-storage span { display: block; }
.course-storage strong { color: #245d8e; font-size: 1.15rem; }
.course-storage span { color: #65778a; font-size: .82rem; }
.course-library-layout {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}
.course-level-panel, .course-content-panel { min-width: 0; }
.course-level-panel { position: sticky; top: 1rem; }
.course-section-heading, .course-documents-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.course-section-heading h2, .course-documents-heading h2 { margin: .1rem 0 .65rem; }
.course-chapter-heading-actions { display: flex; align-items: center; gap: .5rem; }
.course-level-list { display: grid; gap: .4rem; margin-bottom: 1rem; }
.course-level-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .72rem .8rem;
    border: 1px solid #d7e0e7;
    border-radius: 10px;
    color: #17324d;
    text-decoration: none;
}
.course-level-link:hover, .course-level-link.active { border-color: #3975a8; background: #e8f2fa; }
.course-level-link small { flex: 0 0 auto; color: #65778a; font-size: .73rem; }
.course-empty-small { margin: .5rem 0; color: #65778a; line-height: 1.45; }
.course-inline-create {
    display: grid;
    gap: .35rem;
    padding-top: .8rem;
    border-top: 1px solid #dce4ea;
}
.course-inline-create label { color: #344e67; font-size: .82rem; font-weight: 800; }
.course-inline-create > div, .course-edit-details form { display: flex; gap: .45rem; }
.course-inline-create input, .course-edit-details input { min-width: 0; flex: 1; }
.course-chapter-create { margin: .85rem 0 1.2rem; }
.course-folder-drop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    margin: .15rem 0 1rem;
    padding: 1rem;
    border: 2px dashed #76a9c9;
    border-radius: 14px;
    background: linear-gradient(135deg, #f1f8fc, #edf7f4);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.course-folder-drop.is-dragging {
    border-color: #16786f;
    background: #dff4ee;
    transform: translateY(-2px);
}
.course-folder-drop.is-uploading { opacity: .75; pointer-events: none; }
.course-folder-drop-icon { font-size: 2.4rem; }
.course-folder-drop-copy { min-width: 0; display: grid; gap: .18rem; }
.course-folder-drop-copy strong { color: #173f5e; font-size: 1.02rem; }
.course-folder-drop-copy span { color: #526d82; font-size: .86rem; line-height: 1.4; }
.course-folder-drop-copy small { color: #65778a; font-weight: 700; }
#course-folder-status[data-state="working"] { color: #245d8e; }
#course-folder-status[data-state="success"] { color: #16786f; }
#course-folder-status[data-state="error"] { color: #a83232; }
.course-chapter-tabs { display: flex; gap: .45rem; overflow-x: auto; padding: .15rem 0 .35rem; }
.course-chapter-tab {
    min-width: 150px;
    display: grid;
    gap: .15rem;
    padding: .65rem .8rem;
    border: 1px solid #d7e0e7;
    border-radius: 10px;
    background: #f7fafc;
    color: #17324d;
    text-decoration: none;
}
.course-chapter-tab:hover, .course-chapter-tab.active { border-color: #287f73; background: #e7f5f2; }
.course-chapter-tab small { color: #65778a; }
.course-edit-details { margin-top: .8rem; }
.course-edit-details summary { color: #45647f; cursor: pointer; font-size: .83rem; font-weight: 800; }
.course-edit-details > form, .course-edit-popover > form { margin-top: .55rem; }
.course-edit-details.compact { position: relative; margin: 0; }
.course-edit-details.compact > summary {
    display: inline-grid;
    min-width: 40px;
    min-height: 40px;
    place-items: center;
    padding: .35rem .65rem;
    border: 1px solid #cad6df;
    border-radius: 9px;
    background: #fff;
    list-style: none;
    font-size: .9rem;
}
.course-edit-details.compact > summary::-webkit-details-marker { display: none; }
.course-edit-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + .35rem);
    right: 0;
    width: min(420px, 82vw);
    padding: .7rem;
    border: 1px solid #cad6df;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(23, 50, 77, .2);
}
.course-edit-popover.document { width: min(470px, 86vw); }
.course-upload-box {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 2px dashed #8fb5d2;
    border-radius: 13px;
    background: #f1f7fb;
}
.course-upload-label {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .65rem;
    align-items: center;
}
.course-upload-label > span { grid-row: 1 / 3; color: #3975a8; font-size: 2rem; font-weight: 300; }
.course-upload-label small { color: #65778a; }
.course-upload-box input[type="file"] { min-width: 0; }
.course-document-list { display: grid; gap: .55rem; }
.course-folder-heading {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .45rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid #ccd9e2;
    color: #315a78;
    font-size: .88rem;
}
.course-folder-heading strong { min-width: 0; overflow-wrap: anywhere; }
.course-folder-heading form { margin: 0 0 0 auto; }
.course-folder-delete {
    min-height: 32px;
    padding: .35rem .6rem;
    border: 1px solid #e5b9b9;
    border-radius: 8px;
    background: #fff;
    color: #a83232;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}
.course-folder-delete:hover { background: #f9e2e2; }
.course-document-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .65rem .75rem;
    border: 1px solid #d7e0e7;
    border-radius: 11px;
    background: #fff;
}
.course-document-icon {
    display: grid;
    width: 48px;
    height: 56px;
    place-items: center;
    border-radius: 7px;
    background: #b43a3a;
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
}
.course-document-info { min-width: 0; }
.course-document-info strong, .course-document-info small { display: block; }
.course-document-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-document-info small { margin-top: .2rem; color: #65778a; }
.course-document-actions { display: flex; align-items: center; gap: .45rem; }
.course-empty-state, .course-empty-documents {
    display: grid;
    place-items: center;
    min-height: 280px;
    color: #65778a;
    text-align: center;
}
.course-empty-state span, .course-empty-documents span { font-size: 3rem; }
.course-empty-state h2, .course-empty-state p, .course-empty-documents p { margin: .25rem 0; }
.course-empty-state.small { min-height: 180px; }

.course-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}

.course-mode-switch {
    display: inline-flex;
    overflow: hidden;
    padding: 3px;
    border: 1px solid #b8cad8;
    border-radius: 11px;
    background: #e5edf3;
}

.course-mode-switch a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .9rem;
    border-radius: 8px;
    color: #49667d;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 800;
}

.course-mode-switch a:hover { color: #173f5e; }
.course-mode-switch a.active {
    background: #fff;
    color: #173f5e;
    box-shadow: 0 2px 7px rgba(29, 54, 78, .12);
}

.course-storage.compact {
    min-width: 125px;
    padding: .55rem .7rem;
}

/* Consultation compacte : l’import et les modifications sont sur courses-manage.php. */
.course-reader-title { margin-bottom: .75rem; }
.course-reader-title p { margin-bottom: 0; }
.course-reader-layout {
    display: grid;
    grid-template-columns: minmax(170px, 205px) minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
}

.course-reader-level-panel,
.course-reader-main {
    min-width: 0;
    padding: .85rem;
}

.course-reader-level-panel {
    position: sticky;
    top: .75rem;
}

.course-reader-level-panel h2 {
    margin: 0 0 .55rem;
    font-size: 1rem;
    font-weight: 650;
}

.course-reader-levels {
    display: grid;
    gap: .2rem;
}

.course-reader-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 36px;
    padding: .42rem .55rem;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #29465f;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 550;
}

.course-reader-level:hover { background: #f1f6fa; }
.course-reader-level.active { border-color: #8eb8d7; background: #e8f2fa; color: #173f5e; }
.course-reader-level small {
    min-width: 24px;
    padding: .1rem .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: #65778a;
    text-align: center;
    font-size: .68rem;
    font-weight: 600;
}

.course-reader-heading,
.course-reader-documents-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.course-reader-heading {
    padding: 0 .15rem .55rem;
    border-bottom: 1px solid #dce4ea;
}

.course-reader-heading h2,
.course-reader-documents-heading h2 {
    margin: .05rem 0;
    font-weight: 620;
}

.course-reader-heading > span,
.course-reader-documents-heading > span {
    color: #65778a;
    font-size: .76rem;
}

.course-reader-chapters {
    display: flex;
    gap: .3rem;
    padding: .55rem 0;
    overflow-x: auto;
}

.course-reader-chapter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    min-height: 34px;
    padding: .38rem .58rem;
    border: 1px solid #d7e0e7;
    border-radius: 7px;
    background: #f8fafc;
    color: #29465f;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 520;
}

.course-reader-chapter:hover,
.course-reader-chapter.active { border-color: #76aa9d; background: #e7f5f2; color: #145b49; }
.course-reader-chapter small { color: #65778a; font-size: .68rem; }

.course-reader-documents-heading {
    padding: .35rem .15rem .45rem;
}

.course-reader-documents-heading h2 { font-size: 1.05rem; }
.course-reader-documents-actions { display: flex; align-items: center; gap: .55rem; }
.course-reader-documents-actions > span { color: #65778a; font-size: .76rem; }
.course-reader-documents-actions form { margin: 0; }
.course-document-rows { border-top: 1px solid #dce4ea; }

.course-reader-folder {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 32px;
    padding: .35rem .5rem;
    border-bottom: 1px solid #dce4ea;
    background: #f4f7f9;
    color: #49667d;
    font-size: .78rem;
    font-weight: 600;
}
.course-reader-folder strong { min-width: 0; overflow-wrap: anywhere; }
.course-reader-folder form { margin: 0 0 0 auto; }

.course-document-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid #e1e7ec;
    background: #fff;
}

.course-document-row:hover { background: #f8fbfd; }

.course-row-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
    padding: .35rem .45rem;
    color: #17324d;
    text-decoration: none;
}

.course-row-icon {
    display: grid;
    width: 28px;
    height: 32px;
    place-items: center;
    border-radius: 4px;
    background: #b43a3a;
    color: #fff;
    font-size: .52rem;
    font-weight: 750;
}

.course-row-text { min-width: 0; }
.course-row-title,
.course-row-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-row-title { font-size: .9rem; font-weight: 560; }
.course-row-text small { margin-top: .08rem; color: #718291; font-size: .68rem; }

.course-row-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .45rem .3rem .2rem;
}

.course-row-actions .button {
    min-height: 34px;
    padding: .38rem .65rem;
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 650;
}

.course-row-actions .course-download-button {
    width: 34px;
    padding: .25rem;
    font-size: 1rem;
}


/* 0.31.3 — repérer immédiatement les cours déjà diffusés dans un entraînement. */
.course-document-row.is-training-linked {
    background: #f2faf6;
    box-shadow: inset 4px 0 0 #4d927a;
}
.course-document-row.is-training-linked:hover { background: #eaf7f1; }
.course-row-training-link {
    display: block;
    margin-top: .14rem;
    color: #2f765f;
    font-size: .69rem;
    font-weight: 650;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.course-row-training-link strong { font-weight: 850; }
.course-row-actions .course-association-button.is-linked {
    border-color: #4d927a;
    background: #4d927a;
    color: #fff;
}
.course-row-actions .course-association-button.is-linked:hover {
    border-color: #39745f;
    background: #39745f;
}

.course-empty-documents.compact { min-height: 125px; }
.course-empty-documents.compact span { font-size: 2rem; }

/* Visionneuse PDF privée. */
.course-viewer-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #263746;
}
.course-viewer-header {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid #bfcbd5;
    background: #fff;
}
.course-viewer-title, .course-viewer-actions { display: flex; align-items: center; gap: .55rem; }
.course-viewer-title > div { min-width: 0; display: grid; }
.course-viewer-title small { color: #65778a; }
.course-viewer-title strong { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-pdf-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.course-viewer-page.header-hidden { grid-template-rows: minmax(0, 1fr); }
.course-viewer-page.header-hidden .course-viewer-header { display: none; }
.course-header-show {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: .3rem .8rem;
    border: 0;
    border-radius: 0 0 9px 9px;
    background: rgba(19, 48, 72, .88);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    opacity: .3;
}
.course-header-show:hover, .course-header-show:focus-visible { opacity: 1; }

@media (max-width: 900px) {
    .course-library-layout { grid-template-columns: 1fr; }
    .course-level-panel { position: static; }
    .course-level-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .course-folder-drop { grid-template-columns: auto minmax(0, 1fr); }
    .course-folder-drop > .button { grid-column: 1 / -1; text-align: center; }
    .course-upload-box { grid-template-columns: 1fr; }
    .course-viewer-header { align-items: stretch; flex-direction: column; }
    .course-viewer-title, .course-viewer-actions { justify-content: space-between; }
    .course-viewer-title strong { max-width: 65vw; }
    .course-page-actions { justify-content: flex-start; flex-wrap: wrap; }
    .course-reader-layout { grid-template-columns: 1fr; }
    .course-reader-level-panel { position: static; }
    .course-reader-levels { display: flex; overflow-x: auto; }
    .course-reader-level { flex: 0 0 auto; min-width: 115px; }
}

@media (max-width: 650px) {
    .course-page-title { align-items: stretch; flex-direction: column; }
    .course-storage { text-align: left; }
    .course-document-card { grid-template-columns: auto minmax(0, 1fr); }
    .course-document-actions { grid-column: 1 / -1; flex-wrap: wrap; }
    .course-document-actions > .button { flex: 1; text-align: center; }
    .course-viewer-actions { overflow-x: auto; }
    .course-viewer-actions > * { flex: 0 0 auto; }
    .course-reader-title { align-items: stretch; }
    .course-document-row { grid-template-columns: minmax(0, 1fr) auto; }
    .course-row-actions .primary { padding-inline: .5rem; }
}

.desk-delete {
    display: none;
    position: absolute;
    z-index: 3;
    top: .12rem;
    right: 2rem;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid #a83232;
    border-radius: 50%;
    background: #fff;
    color: #a83232;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}

.workspace[data-mode="room"] .desk {
    cursor: grab;
}

.workspace[data-mode="room"] .desk-rotate {
    display: inline-flex;
}

.workspace[data-mode="room"] .desk-delete {
    display: inline-flex;
}

/* Informations compactes intégrées à la barre principale. */
.toolbar {
    margin-bottom: .55rem;
}

.period-badge {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: .5rem .8rem;
    border: 1px solid #a9bfd1;
    border-radius: 8px;
    background: #e5edf4;
    color: #244d75;
    font-size: .88rem;
    font-weight: 850;
    white-space: nowrap;
}

.random-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .5rem .85rem;
    border: 1px solid #d8aa27;
    border-radius: 8px;
    background: #fff4c7;
    color: #694b00;
    font-weight: 850;
    white-space: nowrap;
}

.random-trigger:hover {
    background: #ffe99a;
    box-shadow: inset 0 0 0 1px #d8aa27;
}

.live-photo-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .5rem .85rem;
    border: 1px solid #24805a;
    border-radius: 8px;
    background: #e2f4eb;
    color: #19764a;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.live-photo-trigger:hover {
    background: #cdebdc;
    box-shadow: inset 0 0 0 1px #24805a;
}

.random-trigger:disabled {
    cursor: wait;
    opacity: .65;
}

.toolbar-help {
    align-self: center;
    color: #65778a;
    font-size: .82rem;
    white-space: nowrap;
}

.compact-milestone {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    font-size: .78rem;
    white-space: nowrap;
}

/* Tirage au sort projetable : animation volontairement lisible de loin. */
body.random-draw-open {
    overflow: hidden;
}

.random-overlay[hidden] {
    display: none;
}

.random-overlay {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 224, 112, .34), transparent 35%),
        radial-gradient(circle at 82% 78%, rgba(88, 174, 232, .32), transparent 38%),
        rgba(10, 31, 50, .88);
    backdrop-filter: blur(7px);
}

.random-card {
    position: relative;
    isolation: isolate;
    width: min(980px, 94vw);
    min-height: min(560px, 80vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    overflow: visible;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 4px solid rgba(255, 255, 255, .88);
    border-radius: 32px;
    background: linear-gradient(145deg, #ffffff 0%, #eef7ff 55%, #fff7d8 100%);
    box-shadow: 0 30px 100px rgba(0, 0, 0, .45);
    text-align: center;
    animation: randomCardIn .32s ease-out both;
}

.random-die {
    font-size: clamp(3rem, 7vw, 5.4rem);
    line-height: 1;
    filter: drop-shadow(0 8px 12px rgba(23, 50, 77, .22));
}

.random-overlay.is-spinning .random-die {
    animation: randomDieRoll .72s cubic-bezier(.36, .07, .19, .97) infinite;
}

.random-kicker {
    margin: 0;
    color: #35689a;
    font-size: clamp(.85rem, 1.8vw, 1.2rem);
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.random-name {
    width: 100%;
    min-height: 1.25em;
    display: grid;
    place-items: center;
    color: #17324d;
    font-size: clamp(2.6rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1.05;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.random-overlay.is-spinning .random-name {
    animation: randomNameShuffle .22s ease-in-out infinite alternate;
}

.random-overlay.is-revealed .random-name {
    color: #19764a;
    animation: randomWinnerReveal .7s cubic-bezier(.2, .9, .25, 1.25) both;
    text-shadow: 0 5px 20px rgba(25, 118, 74, .18);
}

.random-overlay.is-error .random-name {
    color: #a83232;
    font-size: clamp(2rem, 6vw, 4.5rem);
}

.random-status {
    min-height: 1.5em;
    margin: 0;
    color: #536a80;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 700;
}

.random-close {
    position: relative;
    z-index: 3;
    min-width: 180px;
    margin-top: .5rem;
    font-size: 1.05rem;
}

.random-confetti {
    position: absolute;
    z-index: 2;
    inset: -25vh -18vw;
    overflow: hidden;
    pointer-events: none;
}

.random-confetti-piece {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 22px;
    border-radius: 3px;
    opacity: 0;
    animation: randomConfettiBurst 1.35s var(--confetti-delay) cubic-bezier(.12, .68, .22, 1) forwards;
}

.seat.random-selected {
    position: relative;
    z-index: 5;
    outline: 5px solid #f2bd26;
    outline-offset: 4px;
    animation: randomSeatPulse .82s ease-in-out 7;
}

@keyframes randomCardIn {
    from { opacity: 0; transform: translateY(28px) scale(.94); }
    to { opacity: 1; transform: none; }
}

@keyframes randomDieRoll {
    0% { transform: rotate(0deg) scale(1); }
    30% { transform: rotate(105deg) scale(1.16); }
    65% { transform: rotate(230deg) scale(.92); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes randomNameShuffle {
    from { transform: translateX(-8px) scale(.985); opacity: .72; }
    to { transform: translateX(8px) scale(1.015); opacity: 1; }
}

@keyframes randomWinnerReveal {
    0% { opacity: 0; transform: scale(.55) rotate(-2deg); }
    65% { opacity: 1; transform: scale(1.12) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes randomConfettiBurst {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) scale(1) rotate(var(--confetti-r)); }
}

@keyframes randomSeatPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(242, 189, 38, 0); }
    50% { transform: scale(1.06); box-shadow: 0 0 28px rgba(242, 189, 38, .85); }
}

@media (prefers-reduced-motion: reduce) {
    .random-card,
    .random-overlay.is-spinning .random-die,
    .random-overlay.is-spinning .random-name,
    .random-overlay.is-revealed .random-name,
    .random-stage.is-spinning .random-die,
    .random-stage.is-spinning .random-name,
    .random-stage.is-revealed .random-name,
    .seat.random-selected {
        animation: none;
    }
}

/* Plateau de placement : il reste visible pendant le défilement de la salle. */
.placement-panel:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    align-items: end;
    position: sticky;
    z-index: 40;
    top: .5rem;
    box-shadow: 0 8px 24px rgba(29, 54, 78, .14);
}

.placement-help {
    align-self: center;
    padding: 0;
}

.student-tray {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding-top: .7rem;
    border-top: 1px solid #d8e0e8;
}

.student-tray > strong {
    margin-right: .2rem;
}

.student-chip {
    min-height: 34px;
    padding: .35rem .65rem;
    border: 1px solid #9eb2c3;
    border-radius: 999px;
    background: #edf4fa;
    color: #17324d;
    font-weight: 750;
    cursor: grab;
}

.student-chip:hover,
.student-chip.selected {
    border-color: #35689a;
    background: #dcebf8;
    box-shadow: inset 0 0 0 1px #35689a;
}

.student-chip.dragging-student,
.seat.dragging-student {
    opacity: .45;
}

.workspace[data-mode="placement"] .seat.occupied {
    cursor: grab;
}

.workspace[data-mode="placement"] .seat.drop-target {
    outline: 4px solid #2e9362;
    outline-offset: 2px;
    background: #d9f3e3;
    transform: scale(1.03);
}

.all-placed {
    color: #19764a;
    font-weight: 700;
}

/* Échelle automatique des notes : neutre à 10, verte au-dessus, orange/rouge en dessous. */
.seat.occupied {
    --score-bg: #ffffff;
    --score-ink: #17324d;
    --score-number: #35689a;
    --score-progress: #65778a;
    background: var(--score-bg);
    border-color: rgba(23, 50, 77, .32);
    color: var(--score-ink);
}

.seat.occupied .score {
    color: var(--score-number);
}

.seat.occupied .progress {
    color: var(--score-progress);
}

.seat.occupied[data-score-band="0"] { --score-bg: #741a27; }
.seat.occupied[data-score-band="1"] { --score-bg: #8f2430; }
.seat.occupied[data-score-band="2"] { --score-bg: #a93133; }
.seat.occupied[data-score-band="3"] { --score-bg: #bf4035; }
.seat.occupied[data-score-band="4"] { --score-bg: #e97848; }
.seat.occupied[data-score-band="5"] { --score-bg: #f49455; }
.seat.occupied[data-score-band="6"] { --score-bg: #faae6a; }
.seat.occupied[data-score-band="7"] { --score-bg: #ffc587; }
.seat.occupied[data-score-band="8"] { --score-bg: #ffdab0; }
.seat.occupied[data-score-band="9"] { --score-bg: #fff0d7; }
.seat.occupied[data-score-band="10"] { --score-bg: #ffffff; }
.seat.occupied[data-score-band="11"] { --score-bg: #e7f6ea; }
.seat.occupied[data-score-band="12"] { --score-bg: #d5efdc; }
.seat.occupied[data-score-band="13"] { --score-bg: #bfe7cb; }
.seat.occupied[data-score-band="14"] { --score-bg: #a4dcb6; }
.seat.occupied[data-score-band="15"] { --score-bg: #86cea0; }
.seat.occupied[data-score-band="16"] { --score-bg: #67bf89; }
.seat.occupied[data-score-band="17"] { --score-bg: #48ae72; }
.seat.occupied[data-score-band="18"] { --score-bg: #2a8551; }
.seat.occupied[data-score-band="19"] { --score-bg: #207344; }
.seat.occupied[data-score-band="20"] { --score-bg: #125b36; }

.seat.occupied[data-score-band="0"],
.seat.occupied[data-score-band="1"],
.seat.occupied[data-score-band="2"],
.seat.occupied[data-score-band="3"],
.seat.occupied[data-score-band="18"],
.seat.occupied[data-score-band="19"],
.seat.occupied[data-score-band="20"] {
    --score-ink: #ffffff;
    --score-number: #ffffff;
    --score-progress: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .72);
}

.danger-zone {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #edc4c4;
}

.danger-zone h3,
.danger-zone p {
    color: #8e2c2c;
}

.workspace:fullscreen {
    width: 100%;
    max-width: none;
    height: 100%;
    overflow: auto;
    padding: 1rem 1.4rem 2rem;
    background: #eef3f7;
}

/* Le fond de la salle rappelle clairement le mode de notation actif. */
.room-canvas {
    transition: background-color .18s ease, background-image .18s ease, box-shadow .18s ease;
}

.workspace[data-mode="positive"] .room-canvas {
    background-color: #edf8f1;
    background-image:
        linear-gradient(#b9dcc6 1px, transparent 1px),
        linear-gradient(90deg, #b9dcc6 1px, transparent 1px);
    box-shadow: inset 0 0 0 3px rgba(46, 147, 98, .22);
}

.workspace[data-mode="negative"] .room-canvas {
    background-color: #fff3df;
    background-image:
        linear-gradient(#e6c28f 1px, transparent 1px),
        linear-gradient(90deg, #e6c28f 1px, transparent 1px);
    box-shadow: inset 0 0 0 3px rgba(211, 125, 34, .24);
}

/* Projection neutre : seuls la salle, les tables et les identités abrégées restent visibles. */
.workspace.projection-neutral #undo-button,
.workspace.projection-neutral #offline-prepare,
.workspace.projection-neutral .toolbar a,
.workspace.projection-neutral .placement-panel,
.workspace.projection-neutral .desk-rotate,
.workspace.projection-neutral .desk-delete,
.workspace.projection-neutral .seat .score,
.workspace.projection-neutral .seat .progress {
    display: none !important;
}

.workspace.projection-neutral .mode-group > * {
    display: none !important;
}

.workspace.projection-neutral .toolbar {
    justify-content: flex-end;
}

.workspace.projection-neutral #projection-toggle {
    border-color: #35689a;
    background: #e4effa;
}

.workspace.projection-neutral .room-canvas {
    background-color: #f7fafc;
    background-image:
        linear-gradient(#dce6ee 1px, transparent 1px),
        linear-gradient(90deg, #dce6ee 1px, transparent 1px);
    box-shadow: none;
}

.workspace.projection-neutral .seat.occupied {
    --score-bg: #ffffff;
    --score-ink: #17324d;
    --score-number: #35689a;
    --score-progress: #65778a;
    border-color: rgba(23, 50, 77, .32);
    cursor: default;
}

/* Cinq rangées de tables peuvent être organisées sans réduire leur lisibilité. */
.room-canvas {
    height: 900px;
    min-height: 900px;
}

/* La table devient étroite et ses deux places sont empilées. Les noms restent lisibles. */
.desk.is-vertical {
    width: max(9%, 125px) !important;
}

.desk.is-vertical .desk-seats {
    flex-direction: column;
}

.desk.is-vertical .seat {
    min-height: 67px;
}

/* Une table simple occupe exactement la moitié de la largeur d'une table double. */
.desk.is-single:not(.is-vertical) {
    width: var(--desk-display-width) !important;
    min-width: 105px;
}

@media (max-width: 760px) {
    .toolbar-help {
        flex-basis: 100%;
        white-space: normal;
    }

    .placement-panel:not([hidden]) {
        grid-template-columns: 1fr;
        position: relative;
        top: auto;
    }

    .room-canvas {
        height: 900px;
        min-height: 900px;
    }

    .desk.is-vertical {
        width: 30% !important;
    }

    .desk.is-single:not(.is-vertical) {
        width: 15% !important;
        min-width: 105px;
    }
}

/* Version 0.12 : quadrillage séparé, instruments et page de liens. */
.live-paper-surface.paper-white {
    background: #fff;
}

.geometry-drawing-layer,
.geometry-instrument-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    touch-action: none;
}

.geometry-drawing-layer { z-index: 1; }
.geometry-instrument-layer { z-index: 2; }

.geometry-drawing-layer.drawing-active {
    z-index: 3;
    pointer-events: auto;
    cursor: crosshair;
}

.geometry-user-drawing {
    position: absolute;
    inset: 0 auto auto 0;
    overflow: hidden;
    pointer-events: none;
}

.geometry-point-label {
    stroke: rgba(255, 255, 255, .98);
    stroke-width: 4px;
    paint-order: stroke fill;
    dominant-baseline: middle;
    font: 900 19px system-ui, sans-serif;
}

.geometry-compass-path {
    fill: none;
    stroke: #24659b;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.geometry-drawn-circle {
    position: absolute;
    overflow: visible;
}

.geometry-drawn-circle circle {
    fill: none;
    stroke: #24659b;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    vector-effect: non-scaling-stroke;
    animation: geometryCircleDraw .8s ease-out forwards;
}

.geometry-drawn-stroke {
    position: absolute;
    inset: 0 auto auto 0;
    overflow: visible;
}

.geometry-drawn-stroke path {
    fill: none;
    stroke: #24659b;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

@keyframes geometryCircleDraw {
    to { stroke-dashoffset: 0; }
}

.geometry-instrument {
    position: absolute;
    min-width: 110px;
    margin: 0;
    transform-origin: center;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    will-change: left, top, width, transform;
}

.geometry-instrument.dragging { cursor: grabbing; }

.geometry-instrument.tracing .geometry-instrument-shape {
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px #16786f) drop-shadow(0 8px 10px rgba(23, 50, 77, .25));
}

.geometry-instrument.opening-compass .geometry-instrument-shape {
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px #d78318) drop-shadow(0 8px 10px rgba(23, 50, 77, .25));
}

.geometry-instrument-shape {
    filter: drop-shadow(0 7px 9px rgba(23, 50, 77, .2));
}

.geometry-instrument.selected .geometry-instrument-shape {
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px #2c78b7) drop-shadow(0 8px 10px rgba(23, 50, 77, .22));
}

.geometry-instrument svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.geometry-ruler svg > rect,
.instrument-fill {
    fill: rgba(88, 196, 218, .16);
    stroke: rgba(24, 105, 139, .78);
    stroke-width: 3;
}

.instrument-outline {
    fill: none;
    stroke: rgba(24, 105, 139, .78);
    stroke-width: 4;
    stroke-linejoin: round;
}

.instrument-marks {
    fill: rgba(23, 50, 77, .88);
    stroke: rgba(23, 50, 77, .78);
    stroke-width: 2;
    font: 22px system-ui, sans-serif;
}

.instrument-marks.inner-graduations {
    stroke-width: 1.6;
}

.protractor-labels {
    pointer-events: none;
}

.protractor-label {
    fill: #17324d;
    stroke: rgba(255, 255, 255, .92);
    stroke-width: 3px;
    paint-order: stroke fill;
    text-anchor: middle;
    dominant-baseline: middle;
    font: 800 16px system-ui, sans-serif;
}

.protractor-label.inner {
    fill: #35689a;
    font-size: 14px;
}

.instrument-center,
.compass-joint-center {
    fill: #35689a;
    stroke: #fff;
    stroke-width: 3;
}

.instrument-center-line {
    stroke: #35689a;
    stroke-width: 3;
}

.compass-joint {
    fill: rgba(216, 226, 235, .58);
    stroke: rgba(83, 106, 128, .8);
    stroke-width: 7;
}

.compass-leg,
.compass-brace {
    fill: rgba(169, 185, 199, .42);
    stroke: rgba(83, 106, 128, .82);
    stroke-width: 7;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.compass-pencil { fill: rgba(240, 189, 79, .68); stroke: rgba(139, 91, 9, .85); stroke-width: 5; }
.compass-point { fill: rgba(83, 106, 128, .75); stroke: rgba(23, 50, 77, .9); stroke-width: 4; }

.instrument-handle {
    position: absolute;
    z-index: 4;
    width: 38px;
    height: 38px;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #244d75;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1;
    opacity: 0;
    box-shadow: 0 3px 11px rgba(23, 50, 77, .38);
    transition: opacity .12s, transform .12s;
}

.geometry-instrument.selected .instrument-handle,
.geometry-instrument:hover .instrument-handle { opacity: 1; }
.instrument-handle:hover { transform: scale(1.1); }
.instrument-handle.rotate { top: -24px; left: calc(50% - 19px); cursor: grab; }
.instrument-handle.delete { top: -20px; right: -20px; background: #a83232; }
.instrument-handle.resize { right: -20px; bottom: -20px; background: #19764a; cursor: nwse-resize; }
.instrument-handle.trace {
    top: calc(14.9% - 23px);
    left: calc(50% - 23px);
    width: 46px;
    height: 46px;
    background: #35689a;
    font-size: 1.35rem;
    cursor: grab;
}

.geometry-instrument.tracing .instrument-handle.trace {
    background: #244d75;
    cursor: grabbing;
    transform: scale(1.08);
}

.instrument-handle.opening {
    width: 40px;
    height: 40px;
    background: #c97919;
    cursor: grab;
}

.geometry-instrument.opening-compass .instrument-handle.opening {
    background: #9c5910;
    cursor: grabbing;
    transform: scale(1.08);
}

.geometry-drawing-mode .instrument-handle {
    opacity: 0 !important;
}

.geometry-paper-controls {
    right: 1rem;
    left: 1rem;
    width: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.paper-scale-group {
    min-width: min(390px, 35vw);
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) 4.5em;
    align-items: center;
    gap: .65rem;
}

.paper-scale-group[hidden] { display: none !important; }
.paper-scale-group output { color: #244d75; font-weight: 900; text-align: right; }

.geometry-tool-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
}

.geometry-workbench-controls {
    min-width: 0;
    display: grid;
    gap: .4rem;
}

.drawing-tool-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
}

.geometry-tool-controls > span,
.drawing-tool-controls > span {
    margin-right: .2rem;
    color: #536a80;
    font-size: .82rem;
    font-weight: 800;
}

.geometry-tool-controls button,
.drawing-tool-controls button,
.screen-geometry-menu summary {
    min-height: 38px;
    padding: .42rem .68rem;
    border: 1px solid #9fb2c3;
    border-radius: 8px;
    background: #fff;
    color: #244d75;
    font-weight: 800;
}

.geometry-tool-controls button:hover,
.drawing-tool-controls button:hover,
.screen-geometry-menu summary:hover { background: #dfeefb; }
.drawing-tool-controls button.active {
    border-color: #16786f;
    background: #dff3ef;
    color: #0f5f58;
    box-shadow: inset 0 0 0 1px #16786f;
}
.geometry-tool-controls button.danger { color: #a83232; }

.drawing-setting {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .45rem;
    border: 1px solid #9fb2c3;
    border-radius: 8px;
    background: #fff;
    color: #536a80;
    font-size: .72rem;
    font-weight: 800;
}

.drawing-setting input[type="color"] {
    width: 30px;
    height: 28px;
    padding: 1px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.drawing-width-setting input {
    width: 78px;
}

.screen-geometry-layer {
    bottom: 76px;
}

.geometry-drawing-layer.screen-geometry-layer { z-index: 4; }
.geometry-instrument-layer.screen-geometry-layer { z-index: 5; }
.geometry-drawing-layer.screen-geometry-layer.drawing-active { z-index: 6; }

.screen-geometry-menu {
    position: relative;
}

.screen-geometry-menu summary {
    display: inline-flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.screen-geometry-menu summary::-webkit-details-marker { display: none; }
.screen-geometry-menu[open] summary {
    border-color: #16786f;
    background: #dff3ef;
    color: #0f5f58;
}

.screen-geometry-popover {
    position: fixed;
    z-index: 30;
    bottom: 88px;
    left: 50%;
    width: min(1040px, calc(100vw - 2rem));
    display: grid;
    gap: .7rem;
    padding: .85rem;
    border: 1px solid #9fb2c3;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    color: #17324d;
    box-shadow: 0 14px 45px rgba(7, 20, 32, .3);
    transform: translateX(-50%);
}

.screen-geometry-popover .drawing-tool-controls,
.screen-geometry-popover .geometry-tool-controls {
    justify-content: center;
}

.standalone-screen-layer .screen-toolbar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.screen-toolbar-help {
    overflow: hidden;
    color: #c4d3df;
    font-size: .86rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.links-page {
    max-width: 1580px;
    margin: auto;
}

.links-title {
    align-items: center;
}

.links-title p {
    margin: .35rem 0 0;
    color: #65778a;
}

.link-category-form {
    min-width: min(430px, 100%);
    display: flex;
    align-items: end;
    gap: .55rem;
}

.link-category-form label { flex: 1; }

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

.link-category {
    position: relative;
    overflow: visible;
    padding: 1rem;
    border: 2px solid var(--category-color, #d8e0e8);
    border-radius: 14px;
    background: #fff;
    background: color-mix(in srgb, var(--category-color, #d8e0e8) 12%, #fff);
    box-shadow: 0 5px 16px rgba(29, 54, 78, .06);
    transition: border-color .15s, background .15s, transform .15s;
}

.link-category.is-reordering { opacity: .48; }
.link-category.is-category-drop-target {
    border-color: #19764a;
    background: #e1f5ed;
    transform: translateY(-2px);
}
.link-category-grid.is-saving-order { cursor: progress; }

.link-category > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
}

.link-category h2 { margin: 0; }

.link-category-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.link-category-actions form { margin: 0; }

.link-category-color-form label { display: block; }
.link-category-color {
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 3px;
    border-radius: 9px;
    cursor: pointer;
}
.link-category-color::-webkit-color-swatch-wrapper { padding: 0; }
.link-category-color::-webkit-color-swatch,
.link-category-color::-moz-color-swatch { border: 0; border-radius: 6px; }

.category-drag-handle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #9fb2c3;
    border-radius: 9px;
    background: #fff;
    color: #244d75;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: grab;
    user-select: none;
}

.category-drag-handle:active { cursor: grabbing; }
.category-drag-handle:focus-visible { outline: 3px solid #16786f; outline-offset: 2px; }

.category-drag-handle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.link-icon-button {
    width: 36px;
    height: 36px;
    min-height: 0;
    border: 1px solid #d8e0e8;
    border-radius: 9px;
    background: #fff;
    color: #536a80;
    font-size: 1.25rem;
}

.link-icon-button.danger { color: #a83232; }
.link-icon-button:disabled { opacity: .3; cursor: default; }
.saved-link-list { display: grid; gap: .35rem; }

.saved-link-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem;
    align-items: center;
    min-height: 54px;
    padding: .28rem;
    border: 1px solid #e1e7ed;
    border-radius: 9px;
}

.saved-link-row > a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem;
    color: #17324d;
    text-decoration: none;
}

.saved-link-row > a:hover strong { color: #35689a; text-decoration: underline; }
.saved-link-row > a > span:last-child { min-width: 0; display: grid; }
.saved-link-row strong,
.saved-link-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-link-row strong { font-weight: 650; }
.saved-link-favicon { color: #35689a; font-size: 1.15rem; }

.saved-link-actions > summary {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.saved-link-actions > summary::-webkit-details-marker { display: none; }
.saved-link-actions > summary:hover { background: #eef3f7; }

.saved-link-actions > div {
    position: absolute;
    z-index: 8;
    right: .25rem;
    top: calc(100% - .2rem);
    width: min(330px, calc(100vw - 3rem));
    display: grid;
    gap: .55rem;
    padding: .7rem;
    border: 1px solid #cbd7e2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(23, 50, 77, .18);
}

.saved-link-actions form { display: flex; gap: .45rem; }
.saved-link-actions input { min-width: 0; }

.manual-link-form {
    display: grid;
    grid-template-columns: minmax(100px, .8fr) minmax(150px, 1.2fr) auto;
    gap: .4rem;
    margin-top: .75rem;
}

.manual-link-form input,
.manual-link-form button { min-height: 38px; }
.links-empty { min-height: 300px; }

@media (max-width: 900px) {
    .geometry-paper-controls { align-items: stretch; flex-direction: column; }
    .paper-scale-group { min-width: 0; width: 100%; }
    .geometry-tool-controls { justify-content: center; }
    .standalone-screen-layer .screen-toolbar { grid-template-columns: auto 1fr auto; }
    .screen-toolbar-help { display: none; }
    .links-title { align-items: stretch; }
}

@media (max-width: 600px) {
    .geometry-paper-controls { right: .5rem; bottom: .5rem; left: .5rem; gap: .5rem; }
    .paper-scale-group { grid-template-columns: 1fr 4em; }
    .paper-scale-group label { grid-column: 1 / -1; }
    .geometry-tool-controls > span { flex-basis: 100%; text-align: center; }
    .geometry-tool-controls button { flex: 1; }
    .link-category-grid { grid-template-columns: 1fr; }
    .link-category-form { min-width: 0; }
    .manual-link-form { grid-template-columns: 1fr; }
}

/* Mode invité : démonstration locale sans écriture dans la base. */
.guest-topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.guest-nav-badge {
    padding: .2rem .48rem;
    border-radius: 999px;
    background: #dff3ec;
    color: #145b49;
    font-size: .66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.topbar nav .guest-register-link {
    background: #e2f4eb;
    color: #145b49;
    font-weight: 800;
}

.guest-demo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #9fcfc4;
    border-radius: 12px;
    background: #e7f6f2;
    color: #145b49;
}

.guest-demo-banner p { margin: .18rem 0 0; color: #356c62; }
.guest-demo-banner .button { flex: 0 0 auto; }

.guest-home-hero {
    background: linear-gradient(135deg, #17324d, #145b49);
    color: #fff;
}

.guest-home-hero p { color: #e0efeb; }
.guest-home-hero .eyebrow { color: #a9e1d4; }

.guest-room-canvas { min-height: 660px; }

.guest-room-canvas .desk {
    min-width: 145px;
}

.guest-room-canvas .seat {
    min-height: 70px;
}

.guest-plan-note {
    color: #536a80;
    font-size: .88rem;
}

.guest-tools-intro {
    margin: 0;
    padding: .65rem 1rem;
    background: #e7f6f2;
    color: #145b49;
    text-align: center;
    font-weight: 700;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 800;
}

.nav-toggle [data-nav-icon] {
    width: 1.1rem;
    font-size: 1.2rem;
    line-height: 1;
}

/* Navigation compacte : les réglages du compte partagent un seul sous-menu. */
.topbar {
    position: relative;
    z-index: 500;
}

.nav-account-menu {
    position: relative;
}

.nav-account-menu > summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    border-radius: 7px;
    color: #dce7f1;
    cursor: pointer;
    font-size: .9rem;
    list-style: none;
    user-select: none;
}

.nav-account-menu > summary::-webkit-details-marker { display: none; }
.nav-account-menu > summary:hover,
.nav-account-menu[open] > summary,
.nav-account-menu[data-active="true"] > summary {
    background: #284b6b;
    color: #fff;
}

.nav-account-menu > summary span {
    display: inline-block;
    transition: transform .16s ease;
}

.nav-account-menu[open] > summary span { transform: rotate(180deg); }

.nav-account-panel {
    position: absolute;
    z-index: 510;
    top: calc(100% + .55rem);
    right: 0;
    width: max-content;
    min-width: 190px;
    display: grid;
    gap: .2rem;
    padding: .45rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
    background: #132d46;
    box-shadow: 0 12px 30px rgba(8, 22, 35, .32);
}

.topbar nav .nav-account-panel a {
    min-height: 40px;
    display: flex;
    align-items: center;
}

.topbar nav .nav-account-panel .nav-logout {
    margin-top: .2rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 7px 7px;
    color: #ffd8d8;
}

.guest-live-photo-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin: 1rem 0;
    padding: clamp(1.3rem, 3vw, 2.2rem);
    overflow: hidden;
    border: 1px solid #a7cec4;
    border-radius: 18px;
    background: linear-gradient(135deg, #f4fbf8 0%, #e6f3f0 58%, #e8f0f6 100%);
    box-shadow: 0 10px 30px rgba(29, 54, 78, .08);
}

.guest-live-photo-copy h2 {
    margin: .75rem 0;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.guest-live-photo-copy p {
    color: #486579;
    line-height: 1.6;
}

.guest-live-photo-copy .guest-feature-detail {
    font-size: .86rem;
    color: #6b7e8d;
}

.guest-feature-badge {
    display: inline-flex;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #d8eee8;
    color: #145b49;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.guest-live-photo-animation {
    position: relative;
    min-height: 270px;
}

.guest-demo-phone {
    position: absolute;
    z-index: 2;
    left: 2%;
    top: 48px;
    width: 92px;
    height: 172px;
    padding: 13px 8px;
    border: 6px solid #17324d;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(23, 50, 77, .2);
}

.guest-demo-phone::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 28px;
    height: 4px;
    border-radius: 999px;
    background: #17324d;
    transform: translateX(-50%);
}

.guest-demo-phone span {
    display: block;
    height: 125px;
    border-radius: 7px;
    background:
        linear-gradient(90deg, transparent 0 15%, #e68b8b 15% 17%, transparent 17%),
        repeating-linear-gradient(#fff 0 15px, #a9d6ee 16px 17px);
}

.guest-demo-phone i {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #17324d;
    transform: translateX(-50%);
}

.guest-demo-screen {
    position: absolute;
    right: 0;
    top: 25px;
    width: min(260px, 64%);
    height: 190px;
    padding: 13px;
    border: 8px solid #315676;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 17px 34px rgba(23, 50, 77, .2);
}

.guest-demo-screen::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -34px;
    width: 86px;
    height: 27px;
    border-bottom: 7px solid #315676;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    transform: translateX(-50%);
}

.guest-demo-screen > div,
.guest-demo-flying-page {
    background:
        linear-gradient(90deg, transparent 0 13%, #e68b8b 13% 15%, transparent 15%),
        repeating-linear-gradient(#fff 0 18px, #a9d6ee 19px 20px);
}

.guest-demo-screen > div {
    height: 100%;
    padding: 35px 24px 0 46px;
    animation: guestScreenGlow 4s ease-in-out infinite;
}

.guest-demo-screen span,
.guest-demo-flying-page span {
    display: block;
    height: 5px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #526b7d;
}

.guest-demo-screen span:nth-child(2) { width: 78%; }
.guest-demo-screen span:nth-child(3) { width: 88%; }
.guest-demo-screen span:nth-child(4) { width: 62%; }

.guest-demo-flying-page {
    position: absolute;
    z-index: 4;
    left: 20%;
    top: 93px;
    width: 68px;
    height: 94px;
    padding: 25px 10px 0 18px;
    border: 1px solid #77a8c3;
    border-radius: 4px;
    box-shadow: 0 8px 18px rgba(23, 50, 77, .18);
    animation: guestPhotoTransfer 4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.guest-demo-flying-page span {
    height: 3px;
    margin-bottom: 9px;
}

.guest-demo-signal {
    position: absolute;
    left: 29%;
    top: 119px;
    display: flex;
    gap: 8px;
}

.guest-demo-signal b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16786f;
    animation: guestSignal 1.2s ease-in-out infinite;
}

.guest-demo-signal b:nth-child(2) { animation-delay: .16s; }
.guest-demo-signal b:nth-child(3) { animation-delay: .32s; }

@keyframes guestPhotoTransfer {
    0%, 15% { opacity: 0; transform: translate(-15px, 8px) scale(.35) rotate(-8deg); }
    28% { opacity: 1; }
    68% { opacity: 1; transform: translate(145px, -15px) scale(.82) rotate(2deg); }
    82%, 100% { opacity: 0; transform: translate(180px, -15px) scale(.9); }
}

@keyframes guestSignal {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes guestScreenGlow {
    0%, 65% { box-shadow: inset 0 0 0 0 rgba(22, 120, 111, 0); }
    78% { box-shadow: inset 0 0 0 5px rgba(22, 120, 111, .32); }
    100% { box-shadow: inset 0 0 0 0 rgba(22, 120, 111, 0); }
}

@media (max-width: 900px) {
    .guest-demo-banner { align-items: flex-start; flex-direction: column; }
    .topbar {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        align-items: center;
        padding: .65rem 1rem;
    }
    .nav-toggle { display: inline-flex; }
    .topbar nav {
        display: none !important;
        width: 100%;
        padding: .45rem 0 .25rem;
        grid-template-columns: 1fr 1fr;
        gap: .35rem;
    }
    .topbar nav.is-open { display: grid !important; }
    .topbar nav a {
        min-height: 42px;
        display: flex;
        align-items: center;
        padding: .65rem .75rem;
        background: rgba(255, 255, 255, .06);
    }
    .nav-account-menu {
        position: static;
    }
    .nav-account-menu > summary {
        min-height: 42px;
        justify-content: space-between;
        padding: .65rem .75rem;
        background: rgba(255, 255, 255, .06);
        font-weight: 700;
    }
    .nav-account-panel {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: .35rem;
        padding: .3rem 0 0 .55rem;
        border: 0;
        border-left: 2px solid rgba(255, 255, 255, .2);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .guest-live-photo-feature { grid-template-columns: 1fr; }
    .guest-live-photo-animation { min-height: 250px; }
    .guest-room-canvas { height: 1120px; min-height: 1120px; }
    .guest-room-canvas .desk { width: 42% !important; min-width: 0; }
    .guest-room-canvas .desk:nth-child(odd) { left: 4% !important; }
    .guest-room-canvas .desk:nth-child(even) { left: 54% !important; }
    .guest-room-canvas .desk:nth-child(1),
    .guest-room-canvas .desk:nth-child(2) { top: 3% !important; }
    .guest-room-canvas .desk:nth-child(3),
    .guest-room-canvas .desk:nth-child(4) { top: 19% !important; }
    .guest-room-canvas .desk:nth-child(5),
    .guest-room-canvas .desk:nth-child(6) { top: 35% !important; }
    .guest-room-canvas .desk:nth-child(7),
    .guest-room-canvas .desk:nth-child(8) { top: 51% !important; }
    .guest-room-canvas .desk:nth-child(9),
    .guest-room-canvas .desk:nth-child(10) { top: 67% !important; }
    .guest-room-canvas .desk:nth-child(11),
    .guest-room-canvas .desk:nth-child(12) { top: 83% !important; }
}

@media (max-width: 520px) {
    .topbar nav { grid-template-columns: 1fr; }
    .guest-live-photo-animation { min-height: 225px; transform: scale(.88); transform-origin: center top; }
}

@media (prefers-reduced-motion: reduce) {
    .guest-demo-flying-page,
    .guest-demo-signal b,
    .guest-demo-screen > div { animation: none; }
    .guest-demo-flying-page { opacity: 1; transform: translate(135px, -15px) scale(.78); }
}

/* Commande privée du tableau projetable. */
.board-control-page {
    max-width: 1650px;
    margin: auto;
}

.board-page-title > div > p:last-child {
    margin: .35rem 0 0;
    color: #65778a;
}

.board-control-grid {
    display: grid;
    grid-template-columns: minmax(330px, 430px) minmax(640px, 1fr);
    gap: 1rem;
    align-items: start;
}

.board-settings-panel {
    position: sticky;
    top: 1rem;
}

.board-settings-panel hr {
    margin: 1.35rem 0;
    border: 0;
    border-top: 1px solid #d8e0e8;
}

.board-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-bottom: 1rem;
}

.board-choice-grid button {
    min-height: 54px;
    padding: .55rem;
    border: 1px solid #bdc9d5;
    border-radius: 9px;
    background: #f6f8fa;
    color: #17324d;
    font-weight: 750;
}

.board-choice-grid button.active {
    border-color: #35689a;
    background: #dcebf8;
    box-shadow: inset 0 0 0 2px #35689a;
}

.board-instruction-label textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid #bdc9d5;
    border-radius: 8px;
    padding: .7rem;
    background: #fff;
    color: #17324d;
    font: inherit;
    line-height: 1.45;
}

.board-setting-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: .8rem;
    align-items: end;
    margin: .9rem 0;
}

.setting-label {
    display: block;
    margin-bottom: .35rem;
    color: #314d67;
    font-size: .9rem;
    font-weight: 650;
}

.light-choice {
    display: flex;
    gap: .4rem;
}

.light-choice button {
    width: 42px;
    min-height: 42px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #aab8c4;
}

.light-choice [data-light="green"] { background: #28a45f; }
.light-choice [data-light="orange"] { background: #f0a326; }
.light-choice [data-light="red"] { background: #d64848; }
.light-choice button.active { box-shadow: 0 0 0 3px #244d75; }
.light-choice .light-off {
    width: auto;
    padding: .3rem .55rem;
    border: 1px solid #bdc9d5;
    border-radius: 8px;
    background: #fff;
    color: #536a80;
    font-size: .78rem;
}

#board-save-content {
    width: 100%;
}

.timer-setting {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: .55rem;
    align-items: end;
}

.timer-control-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.control-timer-readout {
    margin: .8rem 0 0;
    color: #17324d;
    font-size: 2.2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    text-align: center;
}

.layout-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.layout-heading p {
    margin-bottom: 0;
    color: #65778a;
}

.layout-heading > div:last-child {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.board-layout-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 3px solid #284b6b;
    border-radius: 12px;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        #12283d;
    background-size: 24px 24px;
}

.layout-widget {
    position: absolute;
    min-width: 70px;
    min-height: 48px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .78);
    border-radius: 9px;
    background: #f7fafc;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
    color: #17324d;
    touch-action: none;
}

.layout-widget.is-adjusting {
    z-index: 20;
    opacity: .88;
}

.widget-drag {
    height: 24px;
    padding: .25rem .45rem;
    background: #dce6ee;
    color: #36536e;
    font-size: .65rem;
    font-weight: 850;
    text-transform: uppercase;
    cursor: move;
}

.widget-preview-content {
    height: calc(100% - 24px);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: .4rem;
    font-weight: 850;
    text-align: center;
    white-space: pre-wrap;
}

.instruction-widget .widget-preview-content {
    align-content: center;
    font-size: clamp(.65rem, 1.45vw, 1.2rem);
}

.timer-widget .widget-preview-content,
.clock-widget .widget-preview-content {
    font-size: clamp(1rem, 3vw, 2.3rem);
    font-variant-numeric: tabular-nums;
}

.mode-widget { background: #e4effa; }
.timer-widget { background: #fff8df; }
.traffic-widget { background: #1d2b37; }

.traffic-widget .widget-preview-content {
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
}

.traffic-widget i {
    width: min(2.3vw, 26px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3c4a54;
}

.traffic-widget i:nth-child(1) { background: #d64848; }
.traffic-widget i:nth-child(2) { background: #f0a326; }
.traffic-widget i:nth-child(3) { background: #28a45f; }

.widget-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 19px;
    height: 19px;
    border: solid #35689a;
    border-width: 0 3px 3px 0;
    cursor: nwse-resize;
}

/* Écran élève : aucune navigation ni donnée nominative. */
.projection-board {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 12%, rgba(77, 130, 178, .22), transparent 34%),
        radial-gradient(circle at 15% 88%, rgba(42, 112, 85, .16), transparent 36%),
        #102438;
    color: #17324d;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.projection-board[data-mode="individual"] { --mode-color: #397db5; --mode-soft: #e3f1fb; }
.projection-board[data-mode="group"] { --mode-color: #7255a4; --mode-soft: #eee8f8; }
.projection-board[data-mode="correction"] { --mode-color: #24805a; --mode-soft: #e2f4eb; }

.projection-widget {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: clamp(2px, .25vw, 4px) solid rgba(255, 255, 255, .78);
    border-radius: clamp(12px, 1.5vw, 24px);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .3);
}

.projection-mode {
    gap: 1.1vw;
    padding: 1vw 2vw;
    background: var(--mode-soft);
    color: var(--mode-color);
    font-size: clamp(1.25rem, 3.2vw, 3.8rem);
    font-weight: 950;
    text-align: center;
}

.projection-mode-icon {
    flex-shrink: 0;
    font-size: 1.15em;
}

.projection-instruction,
.projection-timer {
    flex-direction: column;
    padding: clamp(1rem, 2.5vw, 3rem);
}

.projection-widget-label {
    position: absolute;
    top: 1.2vw;
    left: 1.5vw;
    margin: 0;
    color: #65778a;
    font-size: clamp(.7rem, 1.15vw, 1.35rem);
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#projection-instruction-text {
    width: 100%;
    color: #17324d;
    font-size: clamp(1.45rem, 4vw, 5.5rem);
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
    text-wrap: balance;
    white-space: pre-wrap;
}

#projection-timer-text {
    color: #17324d;
    font-size: clamp(3rem, 9vw, 10rem);
    font-variant-numeric: tabular-nums;
    font-weight: 950;
    letter-spacing: -.05em;
    line-height: 1;
}

.projection-timer-track {
    position: absolute;
    right: 8%;
    bottom: 8%;
    left: 8%;
    height: clamp(8px, 1vw, 16px);
    overflow: hidden;
    border-radius: 999px;
    background: #dfe7ed;
}

.projection-timer-track span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #397db5;
    transition: width .2s linear, background-color .2s;
}

.projection-timer.urgent #projection-timer-text { color: #b44336; }
.projection-timer.urgent .projection-timer-track span { background: #d55d43; }

.projection-clock {
    background: #edf4fa;
}

.digital-clock {
    font-size: clamp(2rem, 5.2vw, 6.2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 950;
}

.analog-clock {
    position: relative;
    width: auto;
    height: 84%;
    max-width: 100%;
    aspect-ratio: 1;
    border: clamp(3px, .3vw, 6px) solid #244d75;
    border-radius: 50%;
    background: #fff;
}

.clock-mark {
    position: absolute;
    background: #244d75;
}

.mark-12,.mark-6 { left: 47%; width: 6%; height: 10%; }
.mark-12 { top: 3%; }.mark-6 { bottom: 3%; }
.mark-3,.mark-9 { top: 47%; width: 10%; height: 6%; }
.mark-3 { right: 3%; }.mark-9 { left: 3%; }

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 4px;
    border-radius: 999px;
    background: #17324d;
    transform-origin: 50% 100%;
}

.hour-hand { height: 27%; width: 6px; }
.minute-hand { height: 37%; width: 4px; }
.second-hand { height: 41%; width: 2px; background: #d64848; }
.clock-center { position: absolute; left: 50%; top: 50%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #17324d; transform: translate(-50%, -50%); }

.projection-traffic {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.traffic-light-body {
    height: 100%;
    max-width: 100%;
    aspect-ratio: .46;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 8%;
    border: clamp(4px, .55vw, 10px) solid #4e5e6a;
    border-radius: 18%;
    background: #1d2b37;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}

.traffic-bulb {
    width: 72%;
    aspect-ratio: 1;
    border: clamp(2px, .25vw, 5px) solid #0c151c;
    border-radius: 50%;
    background: #3b464e;
    opacity: .28;
}

.traffic-bulb.active { opacity: 1; }
.traffic-bulb.red.active { background: #e14848; box-shadow: 0 0 2.2vw #e14848; }
.traffic-bulb.orange.active { background: #ffad2e; box-shadow: 0 0 2.2vw #ffad2e; }
.traffic-bulb.green.active { background: #32b96c; box-shadow: 0 0 2.2vw #32b96c; }

.projection-connection {
    position: fixed;
    z-index: 50;
    right: .8rem;
    bottom: .6rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: rgba(255, 255, 255, .75);
    font-size: .65rem;
    transition: opacity .3s;
}

.projection-connection.connected { opacity: .25; }
.projection-connection.error { opacity: 1; background: #a83232; color: #fff; }

.projection-start[hidden] { display: none; }
.projection-start {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(8, 25, 40, .9);
    color: #fff;
    text-align: center;
    backdrop-filter: blur(10px);
}

.projection-start > div {
    width: min(600px, 92vw);
    padding: 2.5rem;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 24px;
    background: #17324d;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.projection-start > div > span { font-size: 4rem; }
.projection-start h1 { margin: .6rem 0; font-size: 2.5rem; }
.projection-start p { color: #dce7f1; line-height: 1.5; }
.projection-start button { min-height: 58px; padding: .8rem 1.5rem; font-size: 1.1rem; }

.projection-board.timer-finished::after {
    content: "Temps écoulé";
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(164, 59, 69, .93);
    color: #fff;
    font-size: clamp(3rem, 9vw, 10rem);
    font-weight: 950;
    animation: timerFinishedPulse .65s ease-in-out 4 alternate;
}

@keyframes timerFinishedPulse {
    from { opacity: .78; transform: scale(.98); }
    to { opacity: 1; transform: scale(1.02); }
}

@media (max-width: 1050px) {
    .board-control-grid { grid-template-columns: 1fr; }
    .board-settings-panel { position: static; }
}

@media (max-width: 680px) {
    .board-choice-grid,
    .board-setting-row { grid-template-columns: 1fr; }
    .timer-setting { grid-template-columns: 1fr 1fr; }
    .timer-setting button { grid-column: 1 / -1; }
    .layout-heading { flex-direction: column; }
    .layout-heading > div:last-child { width: 100%; flex-wrap: wrap; }
    .board-layout-panel { padding: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .projection-board.timer-finished::after { animation: none; }
}

/* Version directe du tableau : tous les réglages se font sur l'écran projeté. */
.live-board {
    --live-gap: clamp(.65rem, 1.3vw, 1.3rem);
    --mode-color: #397db5;
    --mode-soft: #e3f1fb;
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(280px, .9fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--live-gap);
    overflow: hidden;
    padding: var(--live-gap);
    background:
        radial-gradient(circle at 82% 15%, rgba(77, 130, 178, .2), transparent 32%),
        radial-gradient(circle at 15% 90%, rgba(42, 112, 85, .15), transparent 35%),
        #102438;
    color: #17324d;
}

.live-board[data-mode="individual"] { --mode-color: #397db5; --mode-soft: #e3f1fb; }
.live-board[data-mode="group"] { --mode-color: #7255a4; --mode-soft: #eee8f8; }
.live-board[data-mode="correction"] { --mode-color: #24805a; --mode-soft: #e2f4eb; }

.live-board-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 54px;
    padding: .45rem .7rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(8, 25, 40, .72);
    color: #fff;
}

.live-board-header > strong {
    font-size: clamp(1rem, 1.7vw, 1.5rem);
}

.live-board-back,
.live-board-header button {
    width: max-content;
    min-height: 38px;
    padding: .45rem .7rem;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
}

.live-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

#live-clock {
    min-width: 5ch;
    font-size: clamp(1.35rem, 2.5vw, 2.25rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.live-card {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: clamp(1rem, 1.8vw, 1.8rem);
    border: clamp(2px, .22vw, 4px) solid rgba(255, 255, 255, .72);
    border-radius: clamp(14px, 1.5vw, 24px);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

.live-card-kicker {
    margin: 0;
    color: #65778a;
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.live-activity {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .55rem;
    background: var(--mode-soft);
}

.live-current-activity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.7rem, 1.5vw, 1.4rem);
    min-height: 0;
    color: var(--mode-color);
    text-align: center;
}

#live-mode-icon {
    flex-shrink: 0;
    font-size: clamp(2.2rem, 5vw, 5.4rem);
}

#live-mode-label {
    font-size: clamp(1.55rem, 3.8vw, 4.4rem);
    font-weight: 950;
    line-height: 1.02;
    text-wrap: balance;
}

.live-mode-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.35rem, .75vw, .75rem);
}

.live-mode-choices button {
    min-width: 0;
    min-height: clamp(58px, 7vw, 88px);
    display: grid;
    place-items: center;
    gap: .1rem;
    padding: .35rem;
    border: 2px solid #c7d3dd;
    border-radius: 12px;
    background: rgba(255, 255, 255, .85);
    color: #314d67;
}

.live-mode-choices button span {
    font-size: clamp(1.25rem, 2.6vw, 2.6rem);
    line-height: 1;
}

.live-mode-choices button small {
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: clamp(.6rem, 1vw, .95rem);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-mode-choices button:hover,
.live-mode-choices button.active {
    border-color: var(--mode-color);
    background: #fff;
    color: var(--mode-color);
    box-shadow: inset 0 0 0 2px var(--mode-color);
    transform: translateY(-2px);
}

.live-timer {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    gap: .55rem;
    background: #fff9e8;
}

.live-timer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.live-timer-status {
    min-width: 8.5em;
    padding: .32rem .7rem;
    border: 2px solid #8295a6;
    border-radius: 999px;
    background: #eef2f5;
    color: #536a80;
    font-size: clamp(.72rem, 1vw, 1rem);
    font-weight: 950;
    letter-spacing: .08em;
    text-align: center;
}

.live-board[data-timer-status="running"] .live-timer-status {
    border-color: #24805a;
    background: #e2f4eb;
    color: #19764a;
}

.live-board[data-timer-status="paused"] .live-timer-status {
    border-color: #d28a21;
    background: #fff1d5;
    color: #8b5b09;
}

.live-board[data-timer-status="finished"] .live-timer-status {
    border-color: #c34242;
    background: #fae4e4;
    color: #a83232;
}

.live-timer-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
}

.live-timer-presets button {
    min-height: 36px;
    padding: .3rem .5rem;
    border: 2px solid #c7d3dd;
    border-radius: 9px;
    background: rgba(255, 255, 255, .9);
    color: #536a80;
    font-weight: 850;
}

.live-timer-presets button:hover,
.live-timer-presets button.active {
    border-color: #397db5;
    background: #e3f1fb;
    color: #244d75;
    box-shadow: inset 0 0 0 1px #397db5;
}

.live-timer-adjust {
    display: grid;
    grid-template-columns: minmax(100px, .5fr) minmax(230px, 1fr) minmax(100px, .5fr);
    align-items: center;
    gap: clamp(.55rem, 1.2vw, 1.2rem);
}

.live-timer-adjust button,
.live-timer-actions button {
    min-height: clamp(48px, 5vw, 66px);
    padding: .5rem .8rem;
    border: 2px solid #b8c7d4;
    border-radius: 12px;
    background: #fff;
    color: #244d75;
    font-size: clamp(.78rem, 1.3vw, 1.2rem);
    font-weight: 850;
}

.live-timer-adjust button:hover,
.live-timer-actions button:hover {
    border-color: #35689a;
    background: #e9f2fa;
}

#live-timer-text {
    color: #17324d;
    font-size: clamp(2.8rem, 7vw, 7.2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 950;
    letter-spacing: -.055em;
    line-height: .9;
    text-align: center;
}

.live-timer-track {
    height: clamp(8px, .9vw, 14px);
    overflow: hidden;
    border-radius: 999px;
    background: #dfe7ed;
}

.live-timer-track span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #397db5;
    transition: width .2s linear, background-color .2s;
}

.live-timer-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

.live-timer-actions #live-timer-start {
    border-color: #24805a;
    background: #e2f4eb;
    color: #19764a;
}

.live-board.timer-urgent #live-timer-text { color: #c87513; }
.live-board.timer-urgent .live-timer-track span { background: #e39a2e; }
.live-board.timer-final #live-timer-text {
    color: #b72e35;
    animation: timerFinalWarning .55s ease-in-out infinite alternate;
}
.live-board.timer-final .live-timer-track span { background: #cf3f45; }

@keyframes timerFinalWarning {
    from { transform: scale(1); text-shadow: 0 0 0 rgba(183, 46, 53, 0); }
    to { transform: scale(1.055); text-shadow: 0 0 24px rgba(183, 46, 53, .34); }
}

.live-traffic {
    grid-column: 2;
    grid-row: 2 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    background: #e9eef2;
}

.live-traffic-help {
    margin: 0;
    color: #65778a;
    font-size: clamp(.7rem, 1vw, 1rem);
}

.real-traffic-light {
    min-height: 0;
    height: 100%;
    max-height: calc(100% - 150px);
    aspect-ratio: .47;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 7%;
    border: clamp(7px, .8vw, 14px) solid #596773;
    border-radius: 16%;
    background: linear-gradient(100deg, #17232d, #2c3b47 48%, #111c24);
    box-shadow: inset 0 0 1.5vw rgba(255, 255, 255, .1), 0 18px 38px rgba(0, 0, 0, .35);
}

.live-traffic-bulb {
    width: 76%;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: clamp(5px, .55vw, 10px) solid #0a1117;
    border-radius: 50%;
    background: #3c474f;
    box-shadow: inset 0 0 2vw rgba(0, 0, 0, .75);
    opacity: .3;
    transition: opacity .16s, transform .16s, box-shadow .16s;
}

.live-traffic-bulb:hover { opacity: .72; transform: scale(1.035); }
.live-traffic-bulb.active { opacity: 1; transform: scale(1.04); }
.live-traffic-bulb.red { background: radial-gradient(circle at 38% 34%, #ff9a91, #e13e3e 42%, #9d1e27 78%); }
.live-traffic-bulb.orange { background: radial-gradient(circle at 38% 34%, #ffe19c, #ffac29 42%, #b7650c 78%); }
.live-traffic-bulb.green { background: radial-gradient(circle at 38% 34%, #a9f2c5, #2fb86a 42%, #14733d 78%); }
.live-traffic-bulb.red.active { background: radial-gradient(circle at 38% 34%, #ff9a91, #e13e3e 42%, #9d1e27 78%); box-shadow: 0 0 3vw #e14848, inset 0 0 1.2vw rgba(255,255,255,.5); }
.live-traffic-bulb.orange.active { background: radial-gradient(circle at 38% 34%, #ffe19c, #ffac29 42%, #b7650c 78%); box-shadow: 0 0 3vw #ffad2e, inset 0 0 1.2vw rgba(255,255,255,.5); }
.live-traffic-bulb.green.active { background: radial-gradient(circle at 38% 34%, #a9f2c5, #2fb86a 42%, #14733d 78%); box-shadow: 0 0 3vw #32b96c, inset 0 0 1.2vw rgba(255,255,255,.5); }

.live-light-label {
    width: 100%;
    min-height: clamp(68px, 8vw, 108px);
    display: grid;
    place-items: center;
    padding: .65rem .8rem;
    border: 3px solid currentColor;
    border-radius: 14px;
    background: #fff;
    color: #314d67;
    font-size: clamp(1.15rem, 2vw, 2rem);
    font-weight: 950;
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
}

.live-board[data-light="green"] .live-light-label { background: #e2f4eb; color: #19764a; }
.live-board[data-light="orange"] .live-light-label { background: #fff2d8; color: #8b5b09; }
.live-board[data-light="red"] .live-light-label { background: #fae4e4; color: #a83232; }

.live-board.timer-finished::after {
    content: "Temps écoulé";
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(164, 59, 69, .94);
    color: #fff;
    font-size: clamp(3rem, 9vw, 10rem);
    font-weight: 950;
    animation: timerFinishedPulse .65s ease-in-out 4 alternate;
}

.live-board:fullscreen {
    width: 100%;
    height: 100%;
}

/* Outils plein écran : papiers de projection et affichage local d'une capture. */
.live-tool-layer[hidden],
.live-paper-panel[hidden],
.live-paper-surface[hidden],
.live-image-surface[hidden],
.live-image-empty[hidden],
.live-image-stage[hidden] {
    display: none !important;
}

.live-tool-layer {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #f8fafc;
    color: #17324d;
}

.live-tool-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .8rem;
    min-height: 64px;
    padding: .55rem .8rem;
    background: #102438;
    color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
}

.live-tool-toolbar > strong {
    font-size: clamp(.9rem, 1.5vw, 1.25rem);
    white-space: nowrap;
}

.live-tool-choices {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.live-tool-toolbar button,
.live-image-file-button,
.live-image-controls button {
    min-height: 40px;
    padding: .45rem .72rem;
    border: 1px solid #9fb2c3;
    border-radius: 8px;
    background: #fff;
    color: #244d75;
    font-weight: 850;
}

.live-tool-toolbar button:hover,
.live-tool-toolbar button.active,
.live-image-file-button:hover,
.live-image-controls button:hover {
    border-color: #57a1df;
    background: #dfeefb;
    color: #173f65;
}

.live-tool-toolbar .live-tool-close {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    white-space: nowrap;
}

.live-paper-panel {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.live-paper-surface {
    --paper-cell: 32px;
    position: absolute;
    inset: 0;
    background-color: #fffefb;
}

.live-paper-surface.paper-grid {
    background-image:
        linear-gradient(rgba(85, 145, 194, .38) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85, 145, 194, .38) 1px, transparent 1px);
    background-size: var(--paper-cell) var(--paper-cell);
}

.live-paper-surface.paper-seyes,
.live-paper-surface.paper-seyes-margin {
    background-image:
        linear-gradient(to bottom, rgba(93, 155, 207, .28) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(50, 121, 181, .64) 2px, transparent 2px),
        linear-gradient(to right, rgba(50, 121, 181, .55) 2px, transparent 2px);
    background-size:
        100% calc(var(--paper-cell) / 4),
        100% var(--paper-cell),
        var(--paper-cell) 100%;
    background-color: #fffefb;
}

.live-paper-surface.paper-seyes-margin::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 11%;
    width: 2px;
    background: rgba(215, 54, 62, .82);
    box-shadow: 3px 0 0 rgba(215, 54, 62, .2);
}

.live-paper-controls {
    position: absolute;
    z-index: 4;
    right: 1rem;
    bottom: 1rem;
    min-width: min(430px, calc(100% - 2rem));
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) 4.5em;
    align-items: center;
    gap: .7rem;
    padding: .65rem .85rem;
    border: 1px solid #a9bfd1;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 26px rgba(23, 50, 77, .2);
}

.live-paper-controls label {
    font-weight: 850;
}

.live-paper-controls output {
    color: #244d75;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    text-align: right;
}

.live-image-surface {
    position: relative;
    min-height: 0;
    overflow: hidden;
    outline: none;
    background: #fff;
}

.live-image-empty {
    position: absolute;
    z-index: 2;
    inset: 0 0 76px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .8rem;
    padding: 2rem;
    color: #17324d;
    text-align: center;
}

.live-image-empty strong {
    font-size: clamp(1.8rem, 4vw, 4rem);
}

.live-image-empty p,
.live-image-empty span {
    margin: 0;
    color: #65778a;
    font-size: clamp(1rem, 1.8vw, 1.45rem);
}

.live-image-empty kbd {
    padding: .15em .38em;
    border: 1px solid #a9bfd1;
    border-bottom-width: 3px;
    border-radius: 6px;
    background: #fff;
    color: #17324d;
    font: inherit;
    font-weight: 900;
}

.live-image-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.live-image-stage {
    position: absolute;
    inset: 0 0 76px;
    overflow: hidden;
    touch-action: none;
}

.projection-image-item {
    position: absolute;
    min-width: 100px;
    border: 3px solid transparent;
    transform-origin: center;
    box-shadow: 0 14px 50px rgba(0, 0, 0, .48);
    cursor: grab;
    touch-action: none;
    user-select: none;
    will-change: left, top, width, transform;
}

.projection-image-item.selected {
    border-color: #57a1df;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 16px 54px rgba(0, 0, 0, .58);
}

.projection-image-item.dragging {
    cursor: grabbing;
    opacity: .92;
}

.projection-image-item > img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    image-orientation: from-image;
}

.projection-image-handle {
    position: absolute;
    z-index: 3;
    width: 38px;
    height: 38px;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #244d75;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1;
    opacity: 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .42);
    transition: opacity .12s, transform .12s;
}

.projection-image-item.selected .projection-image-handle,
.projection-image-item:hover .projection-image-handle {
    opacity: 1;
}

.projection-image-handle:hover {
    transform: scale(1.12);
}

.projection-image-handle.corner-top-left { top: -20px; left: -20px; }
.projection-image-handle.corner-top-right { top: -20px; right: -20px; }
.projection-image-handle.corner-bottom-left { bottom: -20px; left: -20px; }
.projection-image-handle.corner-bottom-right { right: -20px; bottom: -20px; }
.projection-image-handle.danger { background: #a83232; }
.projection-image-handle.resize { background: #19764a; cursor: nwse-resize; }

.projection-image-handle:focus-visible {
    opacity: 1;
    outline: 3px solid #f5c542;
    outline-offset: 2px;
}

.live-image-controls {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .55rem .8rem;
    background: rgba(7, 20, 32, .94);
    color: #fff;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .3);
}

.live-image-controls > span {
    color: #c4d3df;
    font-size: .86rem;
}

.live-image-controls button.danger {
    border-color: #d07878;
    color: #a83232;
}

@media (max-width: 850px) {
    .live-tool-toolbar {
        grid-template-columns: 1fr auto;
    }
    .live-tool-toolbar > strong { display: none; }
    .live-tool-choices { justify-content: flex-start; }
    .live-tool-toolbar button { min-height: 36px; padding: .35rem .5rem; font-size: .78rem; }
    .live-paper-controls { grid-template-columns: 1fr 4em; }
    .live-paper-controls label { grid-column: 1 / -1; }
    .live-image-stage { bottom: 118px; }
    .live-image-empty { bottom: 118px; }
    .live-image-controls { min-height: 118px; }
    .live-image-controls > span { flex-basis: 100%; text-align: center; }
    .screen-geometry-layer { bottom: 118px; }
    .screen-geometry-popover { bottom: 130px; }
}

@media (max-width: 900px), (max-height: 620px) {
    .live-board {
        position: relative;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        overflow: auto;
    }
    .live-board-header { grid-column: 1; grid-template-columns: 1fr auto; }
    .live-board-header > strong { display: none; }
    .live-activity { grid-column: 1; grid-row: 2; min-height: 320px; }
    .live-timer { grid-column: 1; grid-row: 3; min-height: 330px; }
    .live-traffic { grid-column: 1; grid-row: 4; min-height: 650px; }
    .real-traffic-light { height: 520px; }
}

@media (max-width: 600px) {
    .live-board-header { grid-template-columns: 1fr; }
    .live-header-actions { justify-content: space-between; }
    .live-mode-choices { grid-template-columns: 1fr 1fr; }
    .live-timer-adjust { grid-template-columns: 1fr 1fr; }
    #live-timer-text { grid-column: 1 / -1; grid-row: 1; }
    .live-timer-actions { grid-template-columns: 1fr; }
    .live-timer-presets { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .live-board.timer-final #live-timer-text { animation: none; }
}

/* Photo envoyée depuis le téléphone et projetée en temps réel. */
.live-photo-page {
    min-height: calc(100vh - 64px);
    display: grid;
    grid-template-rows: auto minmax(420px, 1fr) auto;
    gap: .8rem;
    padding: .9rem;
    background: #dfe8ef;
}

.live-photo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid #cad6df;
    border-radius: 13px;
    background: #fff;
}

.live-photo-header h1 {
    margin-bottom: .2rem;
}

#live-photo-status {
    margin: 0;
    color: #65778a;
    font-weight: 700;
}

.live-photo-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.live-photo-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.live-photo-zoom-controls .secondary {
    min-width: 42px;
    padding-right: .65rem;
    padding-left: .65rem;
}

.live-photo-zoom-controls .live-photo-zoom-value {
    min-width: 72px;
    color: #244d75;
    font-weight: 850;
}

.live-photo-header-actions .active {
    border-color: #35689a;
    background: #e5f0f9;
    color: #244d75;
    box-shadow: inset 0 0 0 1px #6fa8d5;
}

.live-photo-viewer {
    min-height: 0;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(23, 50, 77, .25);
}

.live-photo-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    touch-action: none;
    background: #fff;
}

.live-photo-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .55rem;
    padding: 2rem;
    color: #36536e;
    text-align: center;
}

.live-photo-empty[hidden],
.live-photo-item[hidden] {
    display: none !important;
}

.live-photo-empty > span {
    font-size: clamp(3rem, 7vw, 6rem);
}

.live-photo-empty strong {
    font-size: clamp(1.7rem, 4vw, 3.8rem);
}

.live-photo-empty p {
    max-width: 680px;
    margin: 0;
    color: #65778a;
    font-size: clamp(.95rem, 1.5vw, 1.3rem);
}

.live-photo-item {
    z-index: 2;
}

.live-photo-upload-panel {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem 1rem;
    border: 1px solid #cad6df;
    border-radius: 13px;
    background: #fff;
}

.live-photo-upload-panel > div {
    min-width: 250px;
    flex: 1;
}

.live-photo-upload-panel p {
    margin: .15rem 0 0;
    color: #65778a;
    font-size: .88rem;
}

.live-camera-button {
    background: #19764a;
}

.live-photo-page:fullscreen {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: block;
    padding: 0;
    background: #fff;
}

.live-photo-page:fullscreen .live-photo-viewer {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.live-photo-page:fullscreen .live-photo-stage {
    height: 100%;
}

.live-photo-page:fullscreen .live-photo-header {
    position: absolute;
    z-index: 20;
    top: .65rem;
    left: .65rem;
    right: .65rem;
    opacity: .96;
    transition: opacity .25s, transform .25s;
}

.live-photo-page[data-mode="projector"] {
    position: relative;
    display: block;
    min-height: calc(100vh - 64px);
    padding: 0;
    background: #fff;
}

.live-photo-page[data-mode="projector"] .live-photo-viewer {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.live-photo-page[data-mode="projector"] .live-photo-stage {
    min-height: 100%;
}

.live-photo-page[data-mode="projector"] .live-photo-header {
    position: absolute;
    z-index: 20;
    top: .65rem;
    left: .65rem;
    right: .65rem;
    opacity: .96;
    transition: opacity .25s, transform .25s;
}

.live-photo-page[data-mode="projector"] .live-photo-upload-panel,
.live-photo-page[data-mode="projector"] .projection-image-handle,
.live-photo-page[data-mode="projector"] .live-photo-zoom-controls,
.live-photo-page:fullscreen .live-photo-upload-panel,
.live-photo-page:fullscreen .projection-image-handle:not(.resize) {
    display: none !important;
}

.live-photo-page:fullscreen .projection-image-handle.resize {
    width: 48px;
    height: 48px;
    right: -24px;
    bottom: -24px;
    opacity: 1;
    font-size: 1.45rem;
}

.live-photo-page[data-mode="projector"].controls-hidden .live-photo-header {
    opacity: 0;
    transform: translateY(-115%);
    pointer-events: none;
}

/* Accueil Salle 112 et administration des comptes. */
.register-card {
    width: min(560px, calc(100% - 2rem));
    margin-top: 3vh;
}

.registration-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 54px;
    margin: 1rem 0 1.2rem;
    padding: .8rem 1rem;
    border: 1px solid #79b6a7;
    border-radius: 12px;
    color: #0d655c;
    background: linear-gradient(135deg, #e2f4ee, #f2faf7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 5px 14px rgba(22, 120, 111, .10);
    text-align: center;
    line-height: 1.4;
    cursor: default;
    user-select: none;
}

.registration-badge span {
    flex: 0 0 auto;
    font-size: 1.15rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1.15rem 0;
    color: #8190a0;
    font-size: .8rem;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #d8e0e8;
}

.auth-create-account {
    width: 100%;
}

.auth-switch {
    margin: 1rem 0 0;
    text-align: center;
}

.check-label {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .65rem;
    line-height: 1.4;
}

.check-label input {
    width: 20px;
    min-height: 20px;
    margin-top: .1rem;
}

.trap-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.home-page {
    max-width: 1180px;
    margin: 0 auto;
}

.home-hero {
    margin-bottom: 1rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid #cad8e4;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff 0%, #edf6fd 100%);
    box-shadow: 0 10px 30px rgba(29, 54, 78, .08);
}

.home-hero p {
    margin: 0;
    color: #536a80;
    font-size: 1.05rem;
}

.tool-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tool-card {
    min-height: 145px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid #cad8e4;
    border-radius: 16px;
    background: #fff;
    color: #17324d;
    text-decoration: none;
    box-shadow: 0 7px 22px rgba(29, 54, 78, .07);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.tool-card:hover {
    transform: translateY(-2px);
    border-color: #6fa8d5;
    box-shadow: 0 12px 30px rgba(29, 54, 78, .13);
}

.tool-card > span {
    width: 58px;
    height: 58px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
    background: #e5f0f9;
    font-size: 2rem;
}

.tool-card div {
    display: grid;
    gap: .4rem;
}

.tool-card strong {
    font-size: 1.08rem;
}

.tool-card small {
    line-height: 1.45;
}

.account-list {
    display: grid;
    gap: .6rem;
}

.account-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    border: 1px solid #d8e0e8;
    border-radius: 10px;
    background: #f8fafc;
}

.account-list article div {
    display: grid;
    gap: .2rem;
}

.account-list article span {
    color: #35689a;
    font-size: .84rem;
    font-weight: 800;
}

.standalone-tool-layer .live-tool-toolbar {
    grid-template-columns: auto auto 1fr auto;
}

.standalone-tool-layer .live-tool-toolbar > .secondary {
    white-space: nowrap;
}

.topbar {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.topbar nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .standalone-tool-layer .live-tool-toolbar { grid-template-columns: auto 1fr auto; }
    .standalone-tool-layer .live-tool-toolbar > strong { display: none; }
    .standalone-tool-layer .live-tool-choices { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
    .tool-card-grid { grid-template-columns: 1fr; }
    .tool-card { min-height: 115px; }
    .account-list article { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
    .live-photo-page {
        min-height: calc(100vh - 105px);
        grid-template-rows: auto auto minmax(52vh, 1fr);
        padding: .55rem;
    }
    .live-photo-header {
        align-items: stretch;
        flex-direction: column;
    }
    .live-photo-header-actions {
        justify-content: stretch;
    }
    .live-photo-header-actions > * {
        flex: 1;
    }
    .live-photo-upload-panel {
        grid-row: 2;
        align-items: stretch;
        flex-direction: column;
    }
    .live-photo-upload-panel > div {
        min-width: 0;
    }
    .live-photo-viewer {
        grid-row: 3;
    }
    .live-photo-stage {
        min-height: 52vh;
    }
    .live-photo-page[data-mode="projector"] {
        min-height: calc(100vh - 105px);
    }
    .live-photo-page[data-mode="projector"] .live-photo-viewer {
        position: absolute;
    }
}

/* Page de tirage indépendante : aucune note ni couleur du plan n'est projetée. */
.random-page {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.4rem;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 225, 112, .28), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(88, 174, 232, .24), transparent 32%),
        #eaf1f7;
}

.random-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem;
    border: 1px solid #d8e0e8;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
}

.random-context {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.random-context > strong {
    color: #17324d;
    font-size: 1.1rem;
}

.random-context label {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.random-context select {
    min-width: 110px;
}

.random-stage {
    position: relative;
    isolation: isolate;
    width: min(1100px, 100%);
    min-height: min(610px, 70vh);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 4px solid rgba(255, 255, 255, .9);
    border-radius: 32px;
    background: linear-gradient(145deg, #ffffff 0%, #eef7ff 55%, #fff7d8 100%);
    box-shadow: 0 22px 70px rgba(29, 54, 78, .22);
    text-align: center;
}

.random-stage.is-spinning .random-die {
    animation: randomDieRoll .72s cubic-bezier(.36, .07, .19, .97) infinite;
}

.random-stage.is-spinning .random-name {
    animation: randomNameShuffle .22s ease-in-out infinite alternate;
}

.random-stage.is-revealed .random-name {
    color: #19764a;
    animation: randomWinnerReveal .7s cubic-bezier(.2, .9, .25, 1.25) both;
    text-shadow: 0 5px 20px rgba(25, 118, 74, .18);
}

.random-stage.is-error .random-name {
    color: #a83232;
    font-size: clamp(2rem, 6vw, 4.5rem);
}

.random-launch {
    min-width: min(330px, 80vw);
    min-height: 72px;
    margin-top: .5rem;
    border-radius: 18px;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.random-result-actions {
    width: min(620px, 100%);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    margin-top: .6rem;
}

.random-result-actions[hidden] {
    display: none;
}

.absence-check {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem;
    flex: 1;
    padding: .7rem .9rem;
    border: 2px solid #d4a23a;
    border-radius: 12px;
    background: #fff8df;
    text-align: left;
    cursor: pointer;
}

.absence-check input {
    width: 26px;
    min-height: 26px;
    margin: 0;
}

.absence-check span {
    display: grid;
    gap: .1rem;
}

.absence-check small {
    color: #755815;
}

.random-absences {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    border: 1px solid #d8e0e8;
    border-radius: 13px;
    background: rgba(255, 255, 255, .9);
}

.random-absences h2,
.random-absences p {
    margin: 0;
}

.random-absences h2 {
    font-size: .98rem;
}

.random-absences p {
    margin-top: .15rem;
    color: #65778a;
    font-size: .8rem;
}

.random-absence-list {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
}

.absence-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .45rem .35rem .7rem;
    border-radius: 999px;
    background: #fff0d7;
    color: #704515;
    font-weight: 750;
}

.absence-pill button {
    min-height: 28px;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #fff;
    color: #244d75;
    font-size: .75rem;
    font-weight: 750;
}

.no-absence {
    color: #65778a;
    font-size: .85rem;
}

.random-page:fullscreen {
    overflow: auto;
}

/* Historique individuel ouvert uniquement dans le mode Consulter. */
.history-overlay[hidden] {
    display: none;
}

.history-overlay {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(12, 31, 48, .72);
    backdrop-filter: blur(4px);
}

.history-card {
    position: relative;
    width: min(760px, 96vw);
    max-height: 88vh;
    overflow: auto;
    padding: 1.5rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.history-close {
    position: absolute;
    top: .7rem;
    right: .8rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eef3f7;
    color: #17324d;
    font-size: 1.5rem;
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .6rem;
    margin: 1rem 0 1.3rem;
}

.history-summary > div {
    display: grid;
    gap: .25rem;
    padding: .75rem;
    border: 1px solid #d8e0e8;
    border-radius: 10px;
    background: #f7fafc;
}

.history-summary span {
    color: #65778a;
    font-size: .76rem;
}

.history-summary strong {
    font-size: 1.15rem;
}

.history-list {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-list li {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid #e3e9ee;
}

.history-action {
    font-weight: 800;
}

.history-action.positive { color: #19764a; }
.history-action.negative { color: #a83232; }
.history-empty { color: #65778a; }

/* Tableau privé de suivi de la classe. */
.dashboard-page {
    max-width: 1450px;
    margin: auto;
}

.dashboard-actions {
    display: flex;
    align-items: end;
    gap: .8rem;
}

.dashboard-actions label {
    min-width: 190px;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-bottom: 1rem;
}

.dashboard-metrics article {
    display: grid;
    gap: .3rem;
    padding: 1rem;
    border: 1px solid #d8e0e8;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(29, 54, 78, .05);
}

.dashboard-metrics span {
    color: #65778a;
    font-size: .82rem;
}

.dashboard-metrics strong {
    font-size: 1.55rem;
}

.dashboard-distribution > div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .6rem;
}

.dashboard-distribution span {
    display: grid;
    place-items: center;
    gap: .2rem;
    padding: .8rem;
    border-radius: 10px;
    background: #eef3f7;
    color: #536a80;
}

.dashboard-distribution strong {
    color: #17324d;
    font-size: 1.3rem;
}

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

.dashboard-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
    padding: .7rem .65rem;
    border-bottom: 1px solid #dfe6ec;
    text-align: left;
}

.dashboard-table th {
    color: #536a80;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.score-badge {
    display: inline-flex;
    min-width: 64px;
    justify-content: center;
    padding: .3rem .5rem;
    border-radius: 999px;
    font-weight: 850;
}

.score-low { background: #fff0d7; color: #8a3e1b; }
.score-neutral { background: #eef3f7; color: #536a80; }
.score-high { background: #e0f3e6; color: #19764a; }

@media (max-width: 760px) {
    .random-toolbar,
    .random-absences,
    .random-result-actions,
    .dashboard-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .random-stage {
        min-height: 540px;
        padding: 1.5rem;
    }

    .history-summary,
    .dashboard-metrics {
        grid-template-columns: 1fr 1fr;
    }

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

    .history-list li {
        grid-template-columns: 1fr auto;
    }

.history-list li > span:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.account-actions {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem !important;
}

.account-actions form {
    margin: 0;
}

.small-button {
    min-height: 36px;
    padding: .45rem .7rem;
    font-size: .82rem;
}

/* Les règles de base des papiers sont déclarées plus haut dans ce fichier :
   cette surcharge finale maintient la barre des instruments au premier plan. */
.live-paper-controls.geometry-paper-controls {
    right: 1rem;
    left: 1rem;
    width: auto;
    min-width: 0;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 900px) {
    .live-paper-controls.geometry-paper-controls {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .live-paper-controls.geometry-paper-controls {
        right: .5rem;
        bottom: .5rem;
        left: .5rem;
        gap: .5rem;
    }
}

/* Version 0.14 : Quadrillage généraliste et atelier Maths séparé. */
.live-paper-controls.paper-only-controls {
    justify-content: flex-start;
}

.paper-white-active .live-paper-controls.paper-only-controls {
    display: none;
}

.live-paper-controls.paper-only-controls .paper-scale-group {
    width: min(520px, 100%);
    min-width: 0;
}

.maths-tool-sidebar {
    position: absolute;
    z-index: 6;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: 205px;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow: auto;
    padding: .85rem;
    border: 1px solid #9fb2c3;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px rgba(23, 50, 77, .22);
}

.maths-tool-sidebar .maths-vertical-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .42rem;
}

.maths-tool-sidebar .maths-vertical-controls + .maths-vertical-controls {
    padding-top: .8rem;
    border-top: 1px solid #d8e0e8;
}

.maths-tool-sidebar strong {
    color: #17324d;
    font-size: .86rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.maths-tool-sidebar button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.maths-tool-sidebar .drawing-setting {
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    padding: .35rem .5rem;
    border: 1px solid #d1dce5;
    border-radius: 8px;
    background: #f8fafc;
}

.maths-tool-sidebar .drawing-setting input {
    width: 100%;
    min-height: 30px;
    padding: 0;
}

.maths-tool-layer .geometry-drawing-layer,
.maths-tool-layer .geometry-instrument-layer {
    right: 225px;
}

.maths-tool-layer .maths-paper-scale {
    right: 225px;
}

@media (max-width: 800px) {
    .maths-tool-sidebar {
        top: .5rem;
        right: .5rem;
        bottom: .5rem;
        width: 170px;
        padding: .6rem;
    }

    .maths-tool-layer .geometry-drawing-layer,
    .maths-tool-layer .geometry-instrument-layer,
    .maths-tool-layer .maths-paper-scale {
        right: 180px;
    }

    .maths-tool-sidebar button {
        min-height: 34px;
        padding: .32rem .48rem;
        font-size: .82rem;
    }

    .maths-tool-sidebar .drawing-setting {
        grid-template-columns: 1fr;
        gap: .2rem;
    }
}

/* Zoom propre au plan : les dimensions changent réellement, le glisser-déposer reste précis. */
.plan-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .2rem;
    border: 1px solid #d8e0e8;
    border-radius: 10px;
    background: #f6f8fa;
}

.plan-zoom-controls .secondary {
    min-width: 38px;
    min-height: 38px;
    padding: .35rem .55rem;
    font-size: 1.08rem;
    font-weight: 900;
}

.plan-zoom-controls .plan-zoom-value {
    min-width: 68px;
    color: #244d75;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}

.plan-zoom-controls button:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.workspace.plan-zoom-enabled .room-canvas {
    height: var(--plan-canvas-height) !important;
    min-height: var(--plan-canvas-height) !important;
    background-size: var(--plan-grid-size) var(--plan-grid-size);
}

.workspace.plan-zoom-enabled .desk {
    width: var(--plan-desk-width) !important;
    min-width: var(--plan-desk-min-width) !important;
    padding-top: var(--plan-desk-top-padding);
}

.workspace.plan-zoom-enabled .desk .seat {
    min-height: var(--plan-seat-height);
    padding: var(--plan-seat-padding) .2rem;
}

.workspace.plan-zoom-enabled .student-name {
    font-size: var(--plan-student-size);
}

.workspace.plan-zoom-enabled .score {
    font-size: var(--plan-score-size);
}

@media (max-width: 760px) {
    .plan-zoom-controls {
        order: 8;
    }

    .plan-zoom-controls .secondary {
        min-width: 42px;
    }
}

/* Version 0.14.2 : aide contextuelle sans alourdir la barre du plan. */
.has-tooltip {
    position: relative;
}

.has-tooltip::before,
.has-tooltip::after {
    position: absolute;
    z-index: 80;
    left: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity .14s ease, transform .14s ease;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    top: calc(100% + .65rem);
    width: max-content;
    max-width: min(280px, 72vw);
    padding: .55rem .7rem;
    border-radius: 8px;
    background: #102f49;
    color: #fff;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: 0 7px 20px rgba(16, 47, 73, .26);
}

.has-tooltip::before {
    content: "";
    top: calc(100% + .3rem);
    border-right: 6px solid transparent;
    border-bottom: 6px solid #102f49;
    border-left: 6px solid transparent;
}

@media (hover: hover) {
    .has-tooltip:hover::before,
    .has-tooltip:hover::after {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.has-tooltip:focus-visible::before,
.has-tooltip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Version 0.16.2 : le menu reste accessible pendant le défilement sur ordinateur. */
@media (min-width: 761px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .course-level-panel,
    .course-reader-level-panel,
    .board-settings-panel {
        top: calc(var(--topbar-height, 64px) + 1rem);
    }

    .placement-panel:not([hidden]) {
        top: calc(var(--topbar-height, 64px) + .5rem);
    }
}

/* 0.25.0 — identité Salle112 homogène dans les espaces PHP */
.topbar .s112-global-brand{
    display:inline-flex;
    align-items:center;
    gap:.58rem;
    color:#fff;
    text-decoration:none;
    font-weight:900;
    letter-spacing:-.025em;
    white-space:nowrap;
}
.topbar .s112-global-brand img{
    width:40px;
    height:34px;
    object-fit:contain;
    border-radius:9px;
    background:#f8fbfa;
    padding:2px;
}
.topbar .s112-global-brand span:not(.guest-nav-badge){font-size:1.08rem}
.topbar .s112-global-brand strong{color:#6bc474}
@media(max-width:760px){
    .topbar .s112-global-brand img{width:36px;height:30px}
    .topbar .s112-global-brand span:not(.guest-nav-badge){font-size:1rem}
}

/* 0.26.1 — le menu connecté reste visible sur Tirage hors plein écran. */
.topbar + .random-page{min-height:calc(100vh - 64px)}
.random-page:fullscreen{min-height:100vh}


/* 0.34.1 — gestion des cours : privilégier la consultation, masquer les actions rares. */
.course-manage-clean .course-page-title-clean{margin-bottom:.85rem;align-items:center}
.course-manage-clean .course-page-title-clean h1{margin:0;font-size:clamp(1.75rem,2.5vw,2.35rem)}
.course-manage-clean .course-page-actions{gap:.65rem}
.course-storage-compact{min-width:0;padding:.5rem .7rem;display:flex;align-items:baseline;gap:.25rem;text-align:left}
.course-storage-compact strong{font-size:.95rem}
.course-storage-compact span{font-size:.72rem}
.course-library-layout-clean{grid-template-columns:minmax(205px,250px) minmax(0,1fr);gap:.9rem}
.course-level-panel-clean,.course-content-panel-clean{padding:1rem}
.course-section-heading-clean{margin-bottom:.65rem}
.course-section-heading-clean h2{margin:0;font-size:1.05rem}
.course-manage-level-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem}
.course-manage-level-head h2{margin:.05rem 0 0;font-size:1.28rem}
.course-manage-level-head .eyebrow,.course-documents-heading-clean .eyebrow{font-size:.68rem}
.course-add-details{position:relative;margin:0}
.course-add-details>summary,.course-upload-details>summary{
    cursor:pointer;list-style:none;border:1px solid #cbd8e2;border-radius:9px;background:#fff;color:#245d8e;
    padding:.48rem .72rem;font-size:.82rem;font-weight:850;white-space:nowrap
}
.course-add-details>summary::-webkit-details-marker,.course-upload-details>summary::-webkit-details-marker{display:none}
.course-add-details[open]>summary,.course-upload-details[open]>summary{background:#eef6fb;border-color:#76a9c9}
.course-add-popover{position:absolute;z-index:40;right:0;top:calc(100% + .4rem);width:min(520px,82vw);padding:.85rem;border:1px solid #cad6df;border-radius:12px;background:#fff;box-shadow:0 16px 38px rgba(23,50,77,.18)}
.course-add-popover.compact{width:min(360px,80vw)}
.course-add-section+ .course-folder-drop-compact{margin-top:.8rem;padding-top:.8rem;border-top:1px solid #e0e7ec}
.course-add-section>strong,.course-folder-drop-compact strong{display:block;margin-bottom:.45rem;color:#173f5e}
.course-compact-form{display:grid;gap:.4rem}
.course-compact-form label{font-size:.78rem;font-weight:800;color:#45647f}
.course-compact-form>div{display:flex;gap:.45rem}
.course-compact-form input{min-width:0;flex:1}
.course-folder-drop-compact{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0;padding:0;border:0;border-radius:0;background:none}
.course-folder-drop-compact .course-folder-drop-copy{gap:.08rem}
.course-folder-drop-compact .course-folder-drop-copy span,.course-folder-drop-compact .course-folder-drop-copy small{font-size:.76rem}
.course-folder-drop-compact.is-dragging{background:#edf8f5;transform:none;border-radius:8px;padding:.35rem}
.compact-alert{margin:.7rem 0 0;padding:.6rem;font-size:.78rem}
.course-level-options{margin:.7rem 0 0;border-top:1px solid #e2e8ed;padding-top:.6rem}
.course-level-options summary{font-size:.76rem;color:#65778a}
.course-options-stack{display:grid;gap:.55rem;margin-top:.5rem}
.course-options-stack form{display:flex;gap:.4rem}
.course-options-stack input{min-width:0;flex:1}
.course-chapter-tabs-clean{margin:.1rem 0 .85rem;padding-bottom:.55rem;border-bottom:1px solid #e0e7ec}
.course-chapter-tabs-clean .course-chapter-tab{min-width:135px;padding:.52rem .68rem}
.course-chapter-tabs-clean .course-chapter-tab strong{font-size:.88rem}
.course-chapter-tabs-clean .course-chapter-tab small{font-size:.7rem}
.course-documents-heading-clean{padding:.15rem 0 .55rem}
.course-documents-heading-clean h2{margin:.05rem 0 .05rem;font-size:1.15rem}
.course-document-count{color:#65778a;font-size:.76rem}
.course-upload-details{margin:.25rem 0 .65rem}
.course-upload-details>summary{display:inline-flex}
.course-upload-box-compact{grid-template-columns:minmax(220px,1fr) auto;gap:.55rem;margin:.45rem 0 0;padding:.65rem;border:1px solid #d6e1e8;background:#f8fbfd}
.course-upload-box-compact small{grid-column:1/-1;color:#65778a;font-size:.72rem}
.course-document-list-clean{gap:.42rem}
.course-document-card-clean{padding:.52rem .65rem;border-radius:9px}
.course-document-card-clean .course-document-icon{width:39px;height:44px;font-size:.64rem}
.course-document-card-clean .course-document-info strong{font-size:.9rem}
.course-document-card-clean .course-document-info small{font-size:.72rem;margin-top:.08rem}
.course-empty-documents-clean{min-height:150px}
.course-empty-documents-clean span{font-size:2rem}
@media(max-width:900px){
  .course-library-layout-clean{grid-template-columns:1fr}
  .course-level-panel-clean{position:static}
  .course-level-list{display:flex;overflow-x:auto;padding-bottom:.2rem}
  .course-level-link{min-width:165px}
  .course-add-popover{position:fixed;left:5vw;right:5vw;top:18vh;width:auto;max-height:65vh;overflow:auto}
}
@media(max-width:620px){
  .course-manage-clean .course-page-title-clean{align-items:flex-start}
  .course-manage-clean .course-page-actions{width:100%;justify-content:space-between}
  .course-storage-compact{display:none}
  .course-manage-level-head{align-items:flex-end}
  .course-upload-box-compact{grid-template-columns:1fr}
  .course-upload-box-compact small{grid-column:auto}
  .course-folder-drop-compact{align-items:flex-start;flex-direction:column}
}

/* 0.34.2 — ordre personnalisé des chapitres de la bibliothèque de cours. */
.course-chapter-sort-wrap{position:relative}
.course-chapter-sort-item{position:relative;flex:0 0 auto}
.course-chapter-sort-item .course-chapter-tab{height:100%;padding-left:2rem}
.course-chapter-drag-handle{
  position:absolute;z-index:2;left:.38rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.8rem;
  display:grid;place-items:center;border:0;background:transparent;color:#71879a;font-size:.9rem;line-height:1;
  cursor:grab;padding:0;border-radius:6px;touch-action:none
}
.course-chapter-drag-handle:hover,.course-chapter-drag-handle:focus-visible{background:#e8f2f7;color:#245d8e;outline:none}
.course-chapter-drag-handle:active{cursor:grabbing}
.course-chapter-sort-item.is-dragging{opacity:.46}
.course-chapter-tabs-clean.is-saving{pointer-events:none;opacity:.82}
.course-chapter-sort-status{display:block;min-height:.9rem;margin-top:-.55rem;margin-bottom:.2rem;text-align:right;color:#65778a;font-size:.7rem;font-weight:700}
.course-chapter-sort-status[data-state="success"]{color:#16786f}
.course-chapter-sort-status[data-state="error"]{color:#a83232}
.course-chapter-sort-status[data-state="working"]{color:#245d8e}


/* 0.37.3 — conserver la navigation Salle112 sur Activité, Quadrillage et Screen.
   Le mode plein écran porte uniquement sur l'outil : le menu disparaît alors naturellement. */
.live-board:not(:fullscreen) {
    top: var(--topbar-height, 64px);
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
}
.live-board:not(:fullscreen) .live-tool-layer {
    top: var(--topbar-height, 64px);
}
.standalone-tool-layer:not(:fullscreen),
.standalone-screen-layer:not(:fullscreen) {
    top: var(--topbar-height, 64px);
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
}
.live-board:fullscreen,
.standalone-tool-layer:fullscreen,
.standalone-screen-layer:fullscreen {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Avec le menu global visible, le lien de retour local devient inutile :
   les barres internes restent consacrées aux commandes de projection. */
.live-board-header {
    grid-template-columns: 1fr auto;
}
.live-board-header > strong {
    justify-self: start;
}
.standalone-tool-layer .live-tool-toolbar {
    grid-template-columns: auto 1fr auto;
}
.standalone-screen-layer .screen-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

@media (max-width: 900px) {
    .standalone-tool-layer .live-tool-toolbar {
        grid-template-columns: 1fr auto;
    }
    .standalone-tool-layer .live-tool-choices {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .standalone-screen-layer .screen-toolbar {
        grid-template-columns: 1fr auto;
    }
    .standalone-screen-layer .screen-toolbar-help {
        display: none;
    }
}